-
+
@@ -44,9 +58,40 @@ import Button from 'primevue/button'
import Tab from 'primevue/tab'
import TabList from 'primevue/tablist'
import Tabs from 'primevue/tabs'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import { useDialogService } from '@/services/dialogService'
import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import type { BottomPanelExtension } from '@/types/extensionTypes'
const bottomPanelStore = useBottomPanelStore()
+const dialogService = useDialogService()
+const { t } = useI18n()
+
+const isShortcutsTabActive = computed(() => {
+ const activeTabId = bottomPanelStore.activeBottomPanelTabId
+ return (
+ activeTabId === 'shortcuts-essentials' ||
+ activeTabId === 'shortcuts-view-controls'
+ )
+})
+
+const shouldCapitalizeTab = (tabId: string): boolean => {
+ return tabId !== 'shortcuts-essentials' && tabId !== 'shortcuts-view-controls'
+}
+
+const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
+ const title = tab.titleKey ? t(tab.titleKey) : tab.title || ''
+ return shouldCapitalizeTab(tab.id) ? title.toUpperCase() : title
+}
+
+const openKeybindingSettings = async () => {
+ dialogService.showSettingsDialog('keybinding')
+}
+
+const closeBottomPanel = () => {
+ bottomPanelStore.activePanel = null
+}
diff --git a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
new file mode 100644
index 0000000000..459d095ae2
--- /dev/null
+++ b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
@@ -0,0 +1,33 @@
+
+ = {
+ title: 'Components/Button/IconGroup',
+ component: IconGroup,
+ parameters: {
+ layout: 'centered'
+ }
+}
+export default meta
+
+type Story = StoryObj
+
+export const Basic: Story = {
+ render: () => ({
+ components: { IconGroup, IconButton, Download, ExternalLink, Heart },
+ template: `
+
+
+
+
+
+
+
+
+ `
+ })
+}
diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
new file mode 100644
index 0000000000..082da5a76b
--- /dev/null
+++ b/src/components/button/IconGroup.vue
@@ -0,0 +1,7 @@
+
+ = {
+ title: 'Components/Button/IconTextButton',
+ component: IconTextButton,
+ tags: ['autodocs'],
+ argTypes: {
+ label: {
+ control: 'text'
+ },
+ size: {
+ control: { type: 'select' },
+ options: ['sm', 'md']
+ },
+ type: {
+ control: { type: 'select' },
+ options: ['primary', 'secondary', 'transparent']
+ },
+ iconPosition: {
+ control: { type: 'select' },
+ options: ['left', 'right']
+ },
+ onClick: { action: 'clicked' }
+ }
+}
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ render: (args) => ({
+ components: { IconTextButton, Package },
+ setup() {
+ return { args }
+ },
+ template: `
+
+
+
+ `
+ }),
+ args: {
+ label: 'Deploy',
+ type: 'primary',
+ size: 'md'
+ }
+}
+
+export const Secondary: Story = {
+ render: (args) => ({
+ components: { IconTextButton, Settings },
+ setup() {
+ return { args }
+ },
+ template: `
+
+
+
+ `
+ }),
+ args: {
+ label: 'Settings',
+ type: 'secondary',
+ size: 'md'
+ }
+}
+
+export const Transparent: Story = {
+ render: (args) => ({
+ components: { IconTextButton, X },
+ setup() {
+ return { args }
+ },
+ template: `
+
+
+
+ `
+ }),
+ args: {
+ label: 'Cancel',
+ type: 'transparent',
+ size: 'md'
+ }
+}
+
+export const WithIconRight: Story = {
+ render: (args) => ({
+ components: { IconTextButton, ChevronRight },
+ setup() {
+ return { args }
+ },
+ template: `
+
+
+
+ `
+ }),
+ args: {
+ label: 'Next',
+ type: 'primary',
+ size: 'md',
+ iconPosition: 'right'
+ }
+}
+
+export const Small: Story = {
+ render: (args) => ({
+ components: { IconTextButton, Save },
+ setup() {
+ return { args }
+ },
+ template: `
+
+
+
+ `
+ }),
+ args: {
+ label: 'Save',
+ type: 'primary',
+ size: 'sm'
+ }
+}
+
+export const AllVariants: Story = {
+ render: () => ({
+ components: {
+ IconTextButton,
+ Download,
+ Settings,
+ Trash2,
+ ChevronRight,
+ ChevronLeft,
+ Save
+ },
+ template: `
+ = {
+ title: 'Components/Button/MoreButton',
+ component: MoreButton,
+ parameters: {
+ layout: 'centered'
+ },
+ argTypes: {}
+}
+export default meta
+
+type Story = StoryObj
+
+export const Basic: Story = {
+ render: () => ({
+ components: { MoreButton, IconTextButton, Download, ScrollText },
+ template: `
+ = {
+ title: 'Components/Button/TextButton',
+ component: TextButton,
+ tags: ['autodocs'],
+ argTypes: {
+ label: {
+ control: 'text',
+ defaultValue: 'Click me'
+ },
+ size: {
+ control: { type: 'select' },
+ options: ['sm', 'md'],
+ defaultValue: 'md'
+ },
+ type: {
+ control: { type: 'select' },
+ options: ['primary', 'secondary', 'transparent'],
+ defaultValue: 'primary'
+ },
+ onClick: { action: 'clicked' }
+ }
+}
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+ args: {
+ label: 'Primary Button',
+ type: 'primary',
+ size: 'md'
+ }
+}
+
+export const Secondary: Story = {
+ args: {
+ label: 'Secondary Button',
+ type: 'secondary',
+ size: 'md'
+ }
+}
+
+export const Transparent: Story = {
+ args: {
+ label: 'Transparent Button',
+ type: 'transparent',
+ size: 'md'
+ }
+}
+
+export const Small: Story = {
+ args: {
+ label: 'Small Button',
+ type: 'primary',
+ size: 'sm'
+ }
+}
+
+export const AllVariants: Story = {
+ render: () => ({
+ components: { TextButton },
+ template: `
+ = {
+ title: 'Components/Card/Card',
+ argTypes: {
+ containerRatio: {
+ control: 'select',
+ options: ['square', 'portrait', 'tallPortrait'],
+ description: 'Card container aspect ratio'
+ },
+ maxWidth: {
+ control: { type: 'range', min: 200, max: 600, step: 10 },
+ description: 'Maximum width in pixels'
+ },
+ minWidth: {
+ control: { type: 'range', min: 150, max: 400, step: 10 },
+ description: 'Minimum width in pixels'
+ },
+ topRatio: {
+ control: 'select',
+ options: ['square', 'landscape'],
+ description: 'Top section aspect ratio'
+ },
+ showTopLeft: {
+ control: 'boolean',
+ description: 'Show top-left slot content'
+ },
+ showTopRight: {
+ control: 'boolean',
+ description: 'Show top-right slot content'
+ },
+ showBottomLeft: {
+ control: 'boolean',
+ description: 'Show bottom-left slot content'
+ },
+ showBottomRight: {
+ control: 'boolean',
+ description: 'Show bottom-right slot content'
+ },
+ showTitle: {
+ control: 'boolean',
+ description: 'Show card title'
+ },
+ showDescription: {
+ control: 'boolean',
+ description: 'Show card description'
+ },
+ title: {
+ control: 'text',
+ description: 'Card title text'
+ },
+ description: {
+ control: 'text',
+ description: 'Card description text'
+ },
+ backgroundColor: {
+ control: 'color',
+ description: 'Background color for card top'
+ },
+ showImage: {
+ control: 'boolean',
+ description: 'Show image instead of color background'
+ },
+ imageUrl: {
+ control: 'text',
+ description: 'Image URL for card top'
+ },
+ tags: {
+ control: 'object',
+ description: 'Tags to display (array of strings)'
+ },
+ showFileSize: {
+ control: 'boolean',
+ description: 'Show file size tag'
+ },
+ fileSize: {
+ control: 'text',
+ description: 'File size text'
+ },
+ showFileType: {
+ control: 'boolean',
+ description: 'Show file type tag'
+ },
+ fileType: {
+ control: 'text',
+ description: 'File type text'
+ }
+ }
+}
+
+export default meta
+type Story = StoryObj
+
+const createCardTemplate = (args: CardStoryArgs) => ({
+ components: {
+ CardContainer,
+ CardTop,
+ CardBottom,
+ CardTitle,
+ CardDescription,
+ IconButton,
+ SquareChip,
+ Info,
+ Folder,
+ Heart,
+ Download,
+ Star,
+ Upload,
+ MoreVertical
+ },
+ setup() {
+ const favorited = ref(false)
+ const toggleFavorite = () => {
+ favorited.value = !favorited.value
+ }
+
+ return {
+ args,
+ favorited,
+ toggleFavorite
+ }
+ },
+ template: `
+ = {
+ title: 'Components/SquareChip',
+ component: SquareChip,
+ tags: ['autodocs'],
+ argTypes: {
+ label: {
+ control: 'text',
+ defaultValue: 'Tag'
+ }
+ }
+}
+
+export default meta
+type Story = StoryObj
+
+export const TagList: Story = {
+ render: () => ({
+ components: { SquareChip },
+ template: `
+
-
+
+
(null)
+const nodeSearchboxPopoverRef = shallowRef | null>(null)
const settingStore = useSettingStore()
const nodeDefStore = useNodeDefStore()
const workspaceStore = useWorkspaceStore()
@@ -192,9 +191,7 @@ const selectionToolboxEnabled = computed(() =>
settingStore.get('Comfy.Canvas.SelectionToolbox')
)
-const minimapRef = ref>()
const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
-const minimap = useMinimap()
// Feature flags
const { shouldRenderVueNodes, isDevModeEnabled } = useFeatureFlags()
@@ -746,6 +743,7 @@ onMounted(async () => {
canvasStore.canvas = comfyApp.canvas
canvasStore.canvas.render_canvas_border = false
workspaceStore.spinner = false
+ useSearchBoxStore().setPopoverRef(nodeSearchboxPopoverRef.value)
window.app = comfyApp
window.graph = comfyApp.graph
@@ -806,13 +804,6 @@ onMounted(async () => {
}
)
- whenever(
- () => minimapRef.value,
- (ref) => {
- minimap.setMinimapRef(ref)
- }
- )
-
whenever(
() => useCanvasStore().canvas,
(canvas) => {
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index 0ddd95ef9e..8ecbce724c 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -1,116 +1,278 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/graph/MiniMap.vue b/src/components/graph/MiniMap.vue
index 2ce097646e..bbf4ef9ae3 100644
--- a/src/components/graph/MiniMap.vue
+++ b/src/components/graph/MiniMap.vue
@@ -1,33 +1,89 @@
@@ -11,18 +14,29 @@
class="p-3 border-none"
>
- {{ tab.title.toUpperCase() }}
+ {{ getTabDisplayTitle(tab) }}
-
+
+
+
+
+
+
+
+
diff --git a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
new file mode 100644
index 0000000000..2a5e84f794
--- /dev/null
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue b/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
new file mode 100644
index 0000000000..4852e9d0ac
--- /dev/null
+++ b/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ + {{ getSubcategoryTitle(subcategory) }} +
+ +
+
+
+
+
+
+
+
+ {{ t(`commands.${normalizeI18nKey(command.id)}.label`) }}
+
+
+
+
+
+ {{ formatKey(key) }}
+
+
+
+
+
+
+
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index 83bec7ffd0..cd34babab9 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -32,7 +32,6 @@
diff --git a/src/components/button/IconGroup.stories.ts b/src/components/button/IconGroup.stories.ts
new file mode 100644
index 0000000000..1eb0d6e0ab
--- /dev/null
+++ b/src/components/button/IconGroup.stories.ts
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Download, ExternalLink, Heart } from 'lucide-vue-next'
+
+import IconButton from './IconButton.vue'
+import IconGroup from './IconGroup.vue'
+
+const meta: Meta
+
+
+
+
diff --git a/src/components/button/IconTextButton.stories.ts b/src/components/button/IconTextButton.stories.ts
new file mode 100644
index 0000000000..3c08c418a9
--- /dev/null
+++ b/src/components/button/IconTextButton.stories.ts
@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+ ChevronLeft,
+ ChevronRight,
+ Download,
+ Package,
+ Save,
+ Settings,
+ Trash2,
+ X
+} from 'lucide-vue-next'
+
+import IconTextButton from './IconTextButton.vue'
+
+const meta: Meta
+
+ `
+ }),
+ parameters: {
+ controls: { disable: true },
+ actions: { disable: true }
+ }
+}
diff --git a/src/components/button/IconTextButton.vue b/src/components/button/IconTextButton.vue
new file mode 100644
index 0000000000..12aeba3cae
--- /dev/null
+++ b/src/components/button/IconTextButton.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/src/components/button/MoreButton.stories.ts b/src/components/button/MoreButton.stories.ts
new file mode 100644
index 0000000000..1a2171b096
--- /dev/null
+++ b/src/components/button/MoreButton.stories.ts
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Download, ScrollText } from 'lucide-vue-next'
+
+import IconTextButton from './IconTextButton.vue'
+import MoreButton from './MoreButton.vue'
+
+const meta: Meta
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ })
+}
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
new file mode 100644
index 0000000000..5f4f81607a
--- /dev/null
+++ b/src/components/button/MoreButton.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/button/TextButton.stories.ts b/src/components/button/TextButton.stories.ts
new file mode 100644
index 0000000000..c21dc280ee
--- /dev/null
+++ b/src/components/button/TextButton.stories.ts
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import TextButton from './TextButton.vue'
+
+const meta: Meta
+
+
+
+ `
+ })
+}
diff --git a/src/components/button/TextButton.vue b/src/components/button/TextButton.vue
new file mode 100644
index 0000000000..fbbc6774c3
--- /dev/null
+++ b/src/components/button/TextButton.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
diff --git a/src/components/card/Card.stories.ts b/src/components/card/Card.stories.ts
new file mode 100644
index 0000000000..0d8bf4385f
--- /dev/null
+++ b/src/components/card/Card.stories.ts
@@ -0,0 +1,665 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+ Download,
+ Folder,
+ Heart,
+ Info,
+ MoreVertical,
+ Star,
+ Upload
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+import IconButton from '../button/IconButton.vue'
+import SquareChip from '../chip/SquareChip.vue'
+import CardBottom from './CardBottom.vue'
+import CardContainer from './CardContainer.vue'
+import CardDescription from './CardDescription.vue'
+import CardTitle from './CardTitle.vue'
+import CardTop from './CardTop.vue'
+
+interface CardStoryArgs {
+ // CardContainer props
+ containerRatio: 'square' | 'portrait' | 'tallPortrait'
+ maxWidth: number
+ minWidth: number
+
+ // CardTop props
+ topRatio: 'square' | 'landscape'
+
+ // Content props
+ showTopLeft: boolean
+ showTopRight: boolean
+ showBottomLeft: boolean
+ showBottomRight: boolean
+ showTitle: boolean
+ showDescription: boolean
+ title: string
+ description: string
+
+ // Visual props
+ backgroundColor: string
+ showImage: boolean
+ imageUrl: string
+
+ // Tag props
+ tags: string[]
+ showFileSize: boolean
+ fileSize: string
+ showFileType: boolean
+ fileType: string
+}
+
+const meta: Meta
+
+
+
+
+
+
+
+
+
+
+
+ ![Card image]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ args.title }}
+ {{ args.description }}
+
+
+
+
+ `
+})
+
+export const Default: Story = {
+ render: (args: CardStoryArgs) => createCardTemplate(args),
+ args: {
+ containerRatio: 'portrait',
+ maxWidth: 300,
+ minWidth: 200,
+ topRatio: 'square',
+ showTopLeft: false,
+ showTopRight: true,
+ showBottomLeft: false,
+ showBottomRight: true,
+ showTitle: true,
+ showDescription: true,
+ title: 'Model Name',
+ description:
+ 'This is a detailed description of the model that can span multiple lines',
+ backgroundColor: '#3b82f6',
+ showImage: false,
+ imageUrl: '',
+ tags: ['LoRA', 'SDXL'],
+ showFileSize: true,
+ fileSize: '1.2 MB',
+ showFileType: true,
+ fileType: 'safetensors'
+ }
+}
+
+export const SquareCard: Story = {
+ render: (args: CardStoryArgs) => createCardTemplate(args),
+ args: {
+ containerRatio: 'square',
+ maxWidth: 400,
+ minWidth: 250,
+ topRatio: 'landscape',
+ showTopLeft: false,
+ showTopRight: true,
+ showBottomLeft: false,
+ showBottomRight: true,
+ showTitle: true,
+ showDescription: true,
+ title: 'Workflow Bundle',
+ description:
+ 'Complete workflow for image generation with all necessary nodes',
+ backgroundColor: '#10b981',
+ showImage: false,
+ imageUrl: '',
+ tags: ['Workflow'],
+ showFileSize: true,
+ fileSize: '245 KB',
+ showFileType: true,
+ fileType: 'json'
+ }
+}
+
+export const TallPortraitCard: Story = {
+ render: (args: CardStoryArgs) => createCardTemplate(args),
+ args: {
+ containerRatio: 'tallPortrait',
+ maxWidth: 280,
+ minWidth: 180,
+ topRatio: 'square',
+ showTopLeft: true,
+ showTopRight: true,
+ showBottomLeft: false,
+ showBottomRight: true,
+ showTitle: true,
+ showDescription: true,
+ title: 'Premium Model',
+ description:
+ 'High-quality photorealistic model trained on professional photography',
+ backgroundColor: '#8b5cf6',
+ showImage: false,
+ imageUrl: '',
+ tags: ['SD 1.5', 'Checkpoint'],
+ showFileSize: true,
+ fileSize: '2.1 GB',
+ showFileType: true,
+ fileType: 'ckpt'
+ }
+}
+
+export const ImageCard: Story = {
+ render: (args: CardStoryArgs) => createCardTemplate(args),
+ args: {
+ containerRatio: 'portrait',
+ maxWidth: 350,
+ minWidth: 220,
+ topRatio: 'square',
+ showTopLeft: false,
+ showTopRight: true,
+ showBottomLeft: false,
+ showBottomRight: true,
+ showTitle: true,
+ showDescription: true,
+ title: 'Generated Image',
+ description: 'Created with DreamShaper XL',
+ backgroundColor: '#3b82f6',
+ showImage: true,
+ imageUrl: 'https://picsum.photos/400/400',
+ tags: ['Output'],
+ showFileSize: true,
+ fileSize: '856 KB',
+ showFileType: true,
+ fileType: 'png'
+ }
+}
+
+export const MinimalCard: Story = {
+ render: (args: CardStoryArgs) => createCardTemplate(args),
+ args: {
+ containerRatio: 'square',
+ maxWidth: 300,
+ minWidth: 200,
+ topRatio: 'landscape',
+ showTopLeft: false,
+ showTopRight: false,
+ showBottomLeft: false,
+ showBottomRight: false,
+ showTitle: true,
+ showDescription: false,
+ title: 'Simple Card',
+ description: '',
+ backgroundColor: '#64748b',
+ showImage: false,
+ imageUrl: '',
+ tags: [],
+ showFileSize: false,
+ fileSize: '',
+ showFileType: false,
+ fileType: ''
+ }
+}
+
+export const FullFeaturedCard: Story = {
+ render: (args: CardStoryArgs) => createCardTemplate(args),
+ args: {
+ containerRatio: 'tallPortrait',
+ maxWidth: 320,
+ minWidth: 240,
+ topRatio: 'square',
+ showTopLeft: true,
+ showTopRight: true,
+ showBottomLeft: true,
+ showBottomRight: true,
+ showTitle: true,
+ showDescription: true,
+ title: 'Ultimate Model Pack',
+ description:
+ 'Complete collection with checkpoints, LoRAs, embeddings, and VAE models for professional use',
+ backgroundColor: '#ef4444',
+ showImage: false,
+ imageUrl: '',
+ tags: ['Bundle', 'Premium', 'SDXL'],
+ showFileSize: true,
+ fileSize: '5.4 GB',
+ showFileType: true,
+ fileType: 'pack'
+ }
+}
+
+export const GridOfCards: Story = {
+ render: () => ({
+ components: {
+ CardContainer,
+ CardTop,
+ CardBottom,
+ CardTitle,
+ CardDescription,
+ IconButton,
+ SquareChip,
+ Info,
+ Folder,
+ Heart,
+ Download
+ },
+ setup() {
+ const cards = ref([
+ {
+ id: 1,
+ title: 'Realistic Vision',
+ description: 'Photorealistic model for portraits',
+ color: 'from-blue-400 to-blue-600',
+ ratio: 'portrait' as const,
+ tags: ['SD 1.5'],
+ size: '2.1 GB'
+ },
+ {
+ id: 2,
+ title: 'DreamShaper XL',
+ description: 'Artistic style model with enhanced details',
+ color: 'from-purple-400 to-pink-600',
+ ratio: 'portrait' as const,
+ tags: ['SDXL'],
+ size: '6.5 GB'
+ },
+ {
+ id: 3,
+ title: 'Anime LoRA',
+ description: 'Character style LoRA',
+ color: 'from-green-400 to-teal-600',
+ ratio: 'portrait' as const,
+ tags: ['LoRA'],
+ size: '144 MB'
+ },
+ {
+ id: 4,
+ title: 'VAE Model',
+ description: 'Enhanced color VAE',
+ color: 'from-orange-400 to-red-600',
+ ratio: 'portrait' as const,
+ tags: ['VAE'],
+ size: '335 MB'
+ },
+ {
+ id: 5,
+ title: 'Workflow Bundle',
+ description: 'Complete workflow setup',
+ color: 'from-indigo-400 to-blue-600',
+ ratio: 'portrait' as const,
+ tags: ['Workflow'],
+ size: '45 KB'
+ },
+ {
+ id: 6,
+ title: 'Embedding Pack',
+ description: 'Negative embeddings collection',
+ color: 'from-yellow-400 to-orange-600',
+ ratio: 'portrait' as const,
+ tags: ['Embedding'],
+ size: '2.3 MB'
+ }
+ ])
+
+ return { cards }
+ },
+ template: `
+
+
+ `
+ })
+}
+
+export const ResponsiveGrid: Story = {
+ render: () => ({
+ components: {
+ CardContainer,
+ CardTop,
+ CardBottom,
+ CardTitle,
+ CardDescription,
+ SquareChip
+ },
+ setup() {
+ const generateCards = (
+ count: number,
+ ratio: 'square' | 'portrait' | 'tallPortrait'
+ ) => {
+ return Array.from({ length: count }, (_, i) => ({
+ id: i + 1,
+ title: `Model ${i + 1}`,
+ description: `Description for model ${i + 1}`,
+ ratio,
+ color: `hsl(${(i * 60) % 360}, 70%, 60%)`
+ }))
+ }
+
+ const squareCards = ref(generateCards(4, 'square'))
+ const portraitCards = ref(generateCards(6, 'portrait'))
+ const tallCards = ref(generateCards(5, 'tallPortrait'))
+
+ return {
+ squareCards,
+ portraitCards,
+ tallCards
+ }
+ },
+ template: `
+ Model Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ card.title }}
+ {{ card.description }}
+
+
+
+
+
+
+ `
+ }),
+ parameters: {
+ controls: { disable: true },
+ actions: { disable: true }
+ }
+}
diff --git a/src/components/card/CardBottom.vue b/src/components/card/CardBottom.vue
new file mode 100644
index 0000000000..7f35754e6c
--- /dev/null
+++ b/src/components/card/CardBottom.vue
@@ -0,0 +1,7 @@
+
+
+
+
+ Square Cards (1:1)
+
+
+
+
+
+
+
+
+
+ {{ card.title }}
+ {{ card.description }}
+
+
+
+
+
+
+
+ Portrait Cards (2:3)
+
+
+
+
+
+
+
+
+
+ {{ card.title }}
+
+
+
+
+
+
+ Tall Portrait Cards (2:4)
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ card.title }}
+ {{ card.description }}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
new file mode 100644
index 0000000000..ebcac78e83
--- /dev/null
+++ b/src/components/card/CardContainer.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
diff --git a/src/components/card/CardDescription.vue b/src/components/card/CardDescription.vue
new file mode 100644
index 0000000000..6085fcf8e3
--- /dev/null
+++ b/src/components/card/CardDescription.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
+
diff --git a/src/components/card/CardTitle.vue b/src/components/card/CardTitle.vue
new file mode 100644
index 0000000000..ff0ed236ac
--- /dev/null
+++ b/src/components/card/CardTitle.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
+
diff --git a/src/components/card/CardTop.vue b/src/components/card/CardTop.vue
new file mode 100644
index 0000000000..24ad569717
--- /dev/null
+++ b/src/components/card/CardTop.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
diff --git a/src/components/chip/SquareChip.stories.ts b/src/components/chip/SquareChip.stories.ts
new file mode 100644
index 0000000000..6ae12b1e93
--- /dev/null
+++ b/src/components/chip/SquareChip.stories.ts
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import SquareChip from './SquareChip.vue'
+
+const meta: Meta
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ })
+}
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
new file mode 100644
index 0000000000..3c3abee149
--- /dev/null
+++ b/src/components/chip/SquareChip.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/src/components/common/ApiNodesCostBreakdown.vue b/src/components/common/ApiNodesCostBreakdown.vue
deleted file mode 100644
index 3184215551..0000000000
--- a/src/components/common/ApiNodesCostBreakdown.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/components/common/ApiNodesList.vue b/src/components/common/ApiNodesList.vue
deleted file mode 100644
index 38d89607b5..0000000000
--- a/src/components/common/ApiNodesList.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
- {{ t('apiNodesCostBreakdown.title') }}
- {{ t('apiNodesCostBreakdown.costPerRun') }}
-
-
-
-
-
- {{
- node.name
- }}
-
-
-
-
- {{ t('apiNodesCostBreakdown.totalCost') }}
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/common/LazyImage.vue b/src/components/common/LazyImage.vue
new file mode 100644
index 0000000000..79c7320f64
--- /dev/null
+++ b/src/components/common/LazyImage.vue
@@ -0,0 +1,124 @@
+
+
-
- {{ t('apiNodesCostBreakdown.title') }}
-
-
-
-
-
- {{
- nodeName
- }}
-
-
+ ![]()
+
+
+
+
diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index c2a7e74822..de9b64d199 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -42,7 +42,7 @@
diff --git a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue b/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
index 90e13b54d2..05927a5f58 100644
--- a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
@@ -57,7 +57,7 @@
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 97cac49e70..2cdd876cc0 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -2,13 +2,11 @@
-
+
+
+
-
-
+
+
diff --git a/src/components/graph/SelectionOverlay.vue b/src/components/graph/SelectionOverlay.vue
deleted file mode 100644
index d0b6e9eb66..0000000000
--- a/src/components/graph/SelectionOverlay.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index 89f0edc7e1..38f0a2c0d0 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -1,45 +1,55 @@
-
+
+
+
+
+ + + + + + +
+ + + + + + +
+
+
+
+
+
+
diff --git a/src/components/load3d/controls/viewer/ViewerCameraControls.vue b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
new file mode 100644
index 0000000000..e2edb8cd53
--- /dev/null
+++ b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/load3d/controls/viewer/ViewerExportControls.vue b/src/components/load3d/controls/viewer/ViewerExportControls.vue
new file mode 100644
index 0000000000..6164e5bb0c
--- /dev/null
+++ b/src/components/load3d/controls/viewer/ViewerExportControls.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/src/components/load3d/controls/viewer/ViewerLightControls.vue b/src/components/load3d/controls/viewer/ViewerLightControls.vue
new file mode 100644
index 0000000000..d38ccfd4d1
--- /dev/null
+++ b/src/components/load3d/controls/viewer/ViewerLightControls.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/load3d/controls/viewer/ViewerSceneControls.vue b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
new file mode 100644
index 0000000000..3cabcc7bed
--- /dev/null
+++ b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/node/NodePreview.stories.ts b/src/components/node/NodePreview.stories.ts
new file mode 100644
index 0000000000..f7a98f4d6f
--- /dev/null
+++ b/src/components/node/NodePreview.stories.ts
@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+
+import NodePreview from './NodePreview.vue'
+
+// Mock node definition data for a typical ComfyUI node
+const mockNodeDef: ComfyNodeDefV2 = {
+ name: 'KSampler',
+ display_name: 'KSampler',
+ description:
+ 'The main sampler node for generating images. Controls the denoising process using various samplers and schedulers.',
+ category: 'sampling',
+ output_node: false,
+ python_module: 'nodes',
+ inputs: {
+ model: {
+ type: 'MODEL',
+ name: 'model',
+ isOptional: false
+ },
+ positive: {
+ type: 'CONDITIONING',
+ name: 'positive',
+ isOptional: false
+ },
+ negative: {
+ type: 'CONDITIONING',
+ name: 'negative',
+ isOptional: false
+ },
+ latent_image: {
+ type: 'LATENT',
+ name: 'latent_image',
+ isOptional: false
+ },
+ seed: {
+ type: 'INT',
+ name: 'seed',
+ default: 0,
+ min: 0,
+ max: Number.MAX_SAFE_INTEGER,
+ isOptional: false
+ },
+ steps: {
+ type: 'INT',
+ name: 'steps',
+ default: 20,
+ min: 1,
+ max: 10000,
+ isOptional: false
+ },
+ cfg: {
+ type: 'FLOAT',
+ name: 'cfg',
+ default: 8.0,
+ min: 0.0,
+ max: 100.0,
+ step: 0.1,
+ isOptional: false
+ },
+ sampler_name: {
+ type: 'COMBO',
+ name: 'sampler_name',
+ options: [
+ 'euler',
+ 'euler_ancestral',
+ 'heun',
+ 'dpm_2',
+ 'dpm_2_ancestral',
+ 'lms',
+ 'dpm_fast',
+ 'dpm_adaptive',
+ 'dpmpp_2s_ancestral',
+ 'dpmpp_sde',
+ 'dpmpp_2m'
+ ],
+ default: 'euler',
+ isOptional: false
+ },
+ scheduler: {
+ type: 'COMBO',
+ name: 'scheduler',
+ options: [
+ 'normal',
+ 'karras',
+ 'exponential',
+ 'sgm_uniform',
+ 'simple',
+ 'ddim_uniform'
+ ],
+ default: 'normal',
+ isOptional: false
+ },
+ denoise: {
+ type: 'FLOAT',
+ name: 'denoise',
+ default: 1.0,
+ min: 0.0,
+ max: 1.0,
+ step: 0.01,
+ isOptional: false
+ }
+ },
+ outputs: [
+ {
+ index: 0,
+ name: 'LATENT',
+ type: 'LATENT',
+ is_list: false
+ }
+ ]
+}
+
+// Simpler text node for comparison
+const mockTextNodeDef: ComfyNodeDefV2 = {
+ name: 'CLIPTextEncode',
+ display_name: 'CLIP Text Encode',
+ description:
+ 'Encode text using CLIP to create conditioning for image generation.',
+ category: 'conditioning',
+ output_node: false,
+ python_module: 'nodes',
+ inputs: {
+ clip: {
+ type: 'CLIP',
+ name: 'clip',
+ isOptional: false
+ },
+ text: {
+ type: 'STRING',
+ name: 'text',
+ multiline: true,
+ default: '',
+ isOptional: false
+ }
+ },
+ outputs: [
+ {
+ index: 0,
+ name: 'CONDITIONING',
+ type: 'CONDITIONING',
+ is_list: false
+ }
+ ]
+}
+
+// Image processing node with multiple outputs
+const mockImageNodeDef: ComfyNodeDefV2 = {
+ name: 'VAEDecode',
+ display_name: 'VAE Decode',
+ description:
+ 'Decode latent representation back to image using a Variational Autoencoder.',
+ category: 'latent',
+ output_node: false,
+ python_module: 'nodes',
+ inputs: {
+ samples: {
+ type: 'LATENT',
+ name: 'samples',
+ isOptional: false
+ },
+ vae: {
+ type: 'VAE',
+ name: 'vae',
+ isOptional: false
+ }
+ },
+ outputs: [
+ {
+ index: 0,
+ name: 'IMAGE',
+ type: 'IMAGE',
+ is_list: false
+ }
+ ]
+}
+
+const meta: Meta
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+