@comfyorg/design-system 1.2.0 → 1.3.0-alpha.0

package/dist/tree/TreeItem.vue.js

@@ -1,16 +1,15 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
-import { t as Button_default } from "../shared/Button-CilmsOkY.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
 import { treeItemClass, treeItemIndent } from "./treeStyles.js";
 import { computed, createBlock, createElementBlock, createElementVNode, createPropsRestProxy, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useTemplateRef, withCtx, withModifiers } from "vue";
 import { TreeItem, injectTreeRootContext } from "reka-ui";
 import { useElementHover } from "@vueuse/core";
-//#region src/components/tree/TreeItem.vue?vue&type=script&setup=true&lang.ts
+// src/components/tree/TreeItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 1,
 	class: "size-5 shrink-0"
 };
-//#endregion
-//#region src/components/tree/TreeItem.vue
+// src/components/tree/TreeItem.vue
 var TreeItem_default = /* @__PURE__ */ defineComponent({
 	__name: "TreeItem",
 	props: {
@@ -78,5 +77,4 @@ var TreeItem_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { TreeItem_default as default };

package/dist/tree/treeStyles.js

@@ -1,7 +1,6 @@
-//#region src/components/tree/treeStyles.ts
+// src/components/tree/treeStyles.ts
 var treeItemClass = "group/tree-node flex w-full min-w-0 cursor-pointer items-center gap-3 rounded-sm py-(--tree-item-padding,--spacing(2)) pr-2 text-sm text-foreground outline-none select-none hover:bg-accent focus-visible:bg-accent data-selected:bg-muted";
 function treeItemIndent(level) {
 	return { paddingLeft: `${8 + (level - 1) * 24}px` };
 }
-//#endregion
 export { treeItemClass, treeItemIndent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/design-system",
-  "version": "1.2.0",
+  "version": "1.3.0-alpha.0",
   "description": "Shared design system for ComfyUI Frontend",
   "homepage": "https://comfy.org",
   "license": "MIT",
@@ -30,6 +30,11 @@
       "import": "./dist/*.vue.js",
       "default": "./dist/*.vue.js"
     },
+    "./lib/color-picker/types": {
+      "types": "./dist/color-picker/types.d.ts",
+      "import": "./dist/color-picker/types.js",
+      "default": "./dist/color-picker/types.js"
+    },
     "./lib/composables/useAttrsClass": {
       "types": "./dist/composables/useAttrsClass.d.ts",
       "import": "./dist/composables/useAttrsClass.js",
@@ -85,6 +90,11 @@
       "import": "./dist/multi-select/types.js",
       "default": "./dist/multi-select/types.js"
     },
+    "./lib/navigation/types": {
+      "types": "./dist/navigation/types.d.ts",
+      "import": "./dist/navigation/types.js",
+      "default": "./dist/navigation/types.js"
+    },
     "./lib/popover/usePopoverViewportDismiss": {
       "types": "./dist/popover/usePopoverViewportDismiss.d.ts",
       "import": "./dist/popover/usePopoverViewportDismiss.js",
@@ -121,6 +131,7 @@
       "default": "./dist/tree/treeStyles.js"
     },
     "./components.css": "./dist/components.css",
+    "./css/style.css": "./src/css/published.css",
     "./css/*": "./src/css/*",
     "./icons/*": "./src/icons/*",
     "./button.variants": {
@@ -148,44 +159,53 @@
     "@iconify/tailwind4": "^1.2.3",
     "@iconify/tools": "^5.0.3",
     "@iconify/utils": "^3.1.0",
-    "@vueuse/core": "^14.4.0",
-    "@vueuse/integrations": "^14.4.0",
     "chart.js": "^4.5.0",
     "clsx": "^2.1.1",
     "cva": "1.0.0-beta.4",
-    "dompurify": "^3.4.13",
+    "dompurify": "^3.4.17",
     "es-toolkit": "^1.39.9",
     "fuse.js": "^7.0.0",
     "tailwind-merge": "^2.2.0",
     "tw-animate-css": "^1.3.8"
   },
   "devDependencies": {
-    "@storybook/vue3-vite": "^10.5.6",
-    "@tailwindcss/vite": "^4.3.2",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/user-event": "^14.6.1",
+    "@comfyorg/shared-frontend-utils": "^1.0.0",
+    "@comfyorg/tailwind-utils": "^1.0.0",
+    "@storybook/vue3-vite": "^10.6.5",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/user-event": "^14.6.8",
     "@testing-library/vue": "^8.1.0",
-    "@vitejs/plugin-vue": "^6.0.8",
-    "@vitest/coverage-v8": "^5.0.2",
-    "happy-dom": "20.14.5",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitest/coverage-v8": "^5.0.5",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/integrations": "^14.4.0",
+    "happy-dom": "21.0.4",
     "reka-ui": "2.11.0",
-    "storybook": "^10.5.6",
-    "tailwindcss": "^4.3.2",
+    "storybook": "^10.6.5",
+    "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3",
-    "vite": "^8.2.2",
-    "vite-plugin-dts": "^5.1.0",
-    "vitest": "^5.0.2",
-    "vue": "^3.5.42",
-    "vue-component-type-helpers": "^3.3.11",
-    "@comfyorg/tailwind-utils": "^1.0.0"
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-component-type-helpers": "^3.3.14"
   },
   "peerDependencies": {
-    "reka-ui": "^2.11.0",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/integrations": "^14.4.0",
+    "reka-ui": "^2.10.5",
     "tailwindcss": "^4.1.0",
     "vue": "^3.5.40",
     "vue-component-type-helpers": "^3.3.0"
   },
   "peerDependenciesMeta": {
+    "@vueuse/core": {
+      "optional": true
+    },
+    "@vueuse/integrations": {
+      "optional": true
+    },
     "reka-ui": {
       "optional": true
     },

package/src/css/_mask-editor.css

@@ -1,6 +1,5 @@
 #maskEditor_brush {
   position: absolute;
-  z-index: 8889;
   pointer-events: none;
   border-radius: 50%;
   overflow: visible;

package/src/css/component-support.css

@@ -0,0 +1,69 @@
+@import './_palette.css';
+@import 'tw-animate-css';
+
+@plugin "./iconifyDynamicPlugin.ts";
+
+@plugin "./lucideStrokePlugin.js";
+
+@custom-variant touch (@media (hover: none));
+
+@theme {
+  --z-index-panel: 1100;
+  --z-index-education: 1500;
+  --z-index-onboarding: 1600;
+  --z-index-overlay: 1700;
+  --z-index-tour: 1800;
+  --z-index-toast: 9999;
+  --z-index-blocking: 10000;
+
+  --text-2xs: 0.625rem;
+  --text-2xs--line-height: calc(1 / 0.625);
+
+  --text-3xs: 0.5625rem;
+  --text-3xs--line-height: calc(1 / 0.5625);
+
+  --color-credit: #ddbd31;
+  --color-warning-foreground: var(--color-charcoal-800);
+}
+
+@utility highlight {
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+  font-weight: 700;
+  border-radius: 0.25rem;
+}
+
+@utility scrollbar-hide {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    width: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+}
+
+@utility scrollbar-custom {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted) transparent;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--muted);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--muted);
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}

package/src/css/iconSizing.test.ts

@@ -77,4 +77,4 @@ it('compiles non-shrinking size-4 icons with explicit overrides', async () => {
   expect(rules.get('.w-8')?.width).toBe('calc(var(--spacing) * 8)')
   expect(rules.get('.h-5')?.height).toBe('calc(var(--spacing) * 5)')
   expect(rules.get('.shrink')?.['flex-shrink']).toBe('1')
-})
+}, 30_000)

package/src/css/published.css

@@ -0,0 +1,3 @@
+@import './theme.css';
+
+@source '../../dist';

package/src/css/style.css

@@ -1,320 +1,6 @@
-@layer theme, base, components, utilities;
-
-@import './fonts.css';
-@import './_palette.css';
-@import './_deprecated-aliases.css';
-@import './_legacy-palette.css';
-@import 'tailwindcss/theme' layer(theme);
-@import 'tailwindcss/utilities' layer(utilities);
-@import 'tw-animate-css';
+@import './theme.css';
 
 @source '../components';
 @source not '../components/**/*.test.ts';
+@source not '../components/**/*.stories.ts';
 @source not '../components/**/*.md';
-@source '../../dist';
-
-@plugin "./iconifyDynamicPlugin.ts";
-
-@plugin "./lucideStrokePlugin.js";
-
-@layer base {
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    border-color: var(--border);
-  }
-
-  button,
-  input,
-  select,
-  optgroup,
-  textarea,
-  ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-  }
-}
-
-/* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,anthropic,bfl,bria,bytedance,claude,comfy-cloud,comfy-logo,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
-
-/* Badge icon names are built at runtime, so the scanner cannot find them. */
-@source inline("icon-mask-[comfy--{3d-decomp,ai-model,anthropic,batch-images-node,bfl,bria,brightness-contrast,bytedance,canny,canny-to-image,canny-to-video,channels,chromatic-aberration,claude,comfy-c,comfy-logo,credits,depth-to-image,depth-to-video,dial,elevenlabs,extensions-blocks,file-output,frames-to-video,gemini,get-video-components,glow,grain,grok,hitpaw,ideogram,image-ai-edit,image-batch,image-blur,image-canny,image-captioning,image-collage,image-compare,image-depth,image-edit,image-inpaint,image-invert,image-outpaint,image-outpainting,image-remove-background,image-rotate,image-select-object-segmentation,image-shader,image-sharpen,image-to-3d,image-to-image,image-to-layers,image-to-video,image-upscale,image-vectorize,kling,load-3d,load-audio,load-video,lora-loader,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,open-ai-chat-node,openai,pin,pixverse,play,pose-to-image,pose-to-video,quiver,recraft,reve,rodin,runway,save-3d,save-audio,save-video,send,sora,stability-ai,template,tencent,text-prompt-enhance,text-to-3d,text-to-audio,text-to-image,text-to-video,topaz,tripo,veo,video-captioning,video-edit,video-enhance,video-extract-frame,video-inpaint,video-interpolation,video-select-object-segmentation,video-slice,video-split-screen,video-trim,video-upscale,vidu,voice-clone,wan,wavespeed,workflow}]");
-
-@custom-variant touch (@media (hover: none));
-
-@theme {
-  --z-index-overlay: 1700;
-  --z-index-onboarding: 1600;
-  --z-index-tour: 1800;
-  --z-index-toast: 9999;
-  --z-index-blocking: 10000;
-
-  --shadow-2xs: 0 1px 1px var(--shadow-color);
-  --shadow-xs: 0 1px 2px var(--shadow-color);
-  --shadow-sm: 0 1px 4px var(--shadow-color);
-  --shadow-md: 1px 1px 8px 0 var(--shadow-color);
-  --shadow-lg: 0 2px 16px 0 var(--shadow-color);
-  --shadow-xl: 0 8px 24px var(--shadow-color);
-  --shadow-2xl: 0 24px 80px var(--shadow-color);
-  --drop-shadow-xs: 0 1px 1px var(--shadow-color);
-  --drop-shadow-sm: 1px 1px 4px var(--shadow-color);
-  --drop-shadow-md: 1px 1px 8px var(--shadow-color);
-  --drop-shadow-lg: 0 9px 7px var(--shadow-color);
-  --shadow-inset-highlight: inset 0 1px 0 0 rgb(from white r g b / 0.1);
-
-  --text-2xs: 0.625rem;
-  --text-2xs--line-height: calc(1 / 0.625);
-
-  --text-3xs: 0.5625rem;
-  --text-3xs--line-height: calc(1 / 0.5625);
-
-  --color-credit: #ddbd31;
-
-  --color-bypass: #6a246a;
-  --color-warning-foreground: var(--color-charcoal-800);
-  --color-success: var(--color-jade-600);
-}
-
-:root {
-  color-scheme: dark;
-
-  --background: var(--color-charcoal-800);
-  --foreground: var(--color-white);
-  --card: var(--color-charcoal-600);
-  --node-foreground: var(--color-smoke-700);
-  --node-header: var(--color-charcoal-700);
-  --node-border: var(--color-charcoal-100);
-  --primary: var(--color-azure-600);
-  --secondary: var(--color-charcoal-600);
-  --muted: var(--color-charcoal-300);
-  --muted-foreground: var(--color-smoke-800);
-  --accent: var(--color-charcoal-400);
-  --destructive: var(--color-coral-700);
-  --border: var(--color-charcoal-200);
-  --ring: var(--muted-foreground);
-  --popover: var(--background);
-  --input: var(--accent);
-  --node: var(--card);
-
-  --default-transition-duration: 0.1s;
-  --comfy-topbar-height: 2.5rem;
-  --workflow-tabs-height: 2.375rem;
-  --comfy-textarea-font-size: 10px;
-
-  --warning: var(--color-gold-600);
-  --shadow-color: rgb(0 0 0 / 0.4);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-node: var(--node);
-  --color-node-foreground: var(--node-foreground);
-  --color-node-header: var(--node-header);
-  --color-node-border: var(--node-border);
-  --color-popover: var(--popover);
-  --color-primary: var(--primary);
-  --color-secondary: var(--secondary);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* Semantic tokens */
-  --color-warning: var(--warning);
-}
-
-@utility floating-panel {
-  border-radius: var(--radius-xl);
-  padding: --spacing(1);
-  background-color: var(--background);
-  box-shadow: var(--shadow-inset-highlight), theme(boxShadow.lg);
-}
-
-@utility highlight {
-  background-color: color-mix(in srgb, currentColor 20%, transparent);
-  font-weight: 700;
-  border-radius: 0.25rem;
-}
-
-@utility scrollbar-hide {
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    width: 1px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-}
-
-/* ===================== Scrollbar Utilities (Tailwind) =====================
-   Usage: Add `scrollbar-custom` class to scrollable containers.
-   The scrollbar styling adapts to light/dark theme automatically.
-============================================================================ */
-
-@utility scrollbar-custom {
-  overflow-y: auto;
-  /* Firefox */
-  scrollbar-width: thin;
-  scrollbar-color: var(--muted) transparent;
-
-  /* WebKit */
-  &::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: var(--muted);
-    border-radius: 9999px;
-    border: 2px solid transparent;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--muted);
-  }
-  &::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-}
-/* =================== End Custom Scrollbar (cross-browser) =================== */
-
-/* Everthing below here to be cleaned up over time. */
-
-:root[data-palette-switching] * {
-  transition: none;
-}
-
-body {
-  width: 100vw;
-  height: 100vh;
-  margin: 0;
-  overflow: hidden;
-  min-height: -webkit-fill-available;
-  max-height: -webkit-fill-available;
-  min-width: -webkit-fill-available;
-  max-width: -webkit-fill-available;
-  font-family: Inter, Arial, sans-serif;
-  background-color: var(--background);
-  color: var(--foreground);
-}
-
-.comfy-multiline-input {
-  background-color: var(--input);
-  color: var(--foreground);
-  overflow: hidden;
-  overflow-y: auto;
-  padding: 2px;
-  resize: none;
-  border: none;
-  box-sizing: border-box;
-  font-family: var(--font-mono);
-  font-size: var(--comfy-textarea-font-size);
-}
-
-@import './_markdown.css';
-
-@import './_legacy-ui.css';
-
-audio.comfy-audio.empty-audio-widget {
-  display: none;
-}
-
-#vue-app {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-/* [Desktop] Electron window specific styles */
-.app-drag {
-  app-region: drag;
-}
-
-.no-drag {
-  app-region: no-drag;
-}
-
-.window-actions-spacer {
-  width: calc(100vw - env(titlebar-area-width, 100vw));
-}
-/* End of [Desktop] Electron window specific styles */
-
-.lg-node {
-  /* Disable text selection on all nodes */
-  user-select: none;
-}
-
-.lg-node .lg-slot {
-  transition:
-    opacity 0.1s ease,
-    font-size 0.1s ease;
-}
-
-@import './_mask-editor.css';
-
-/* ===================== Skeleton Shimmer ===================== */
-.skeleton-shimmer {
-  background:
-    linear-gradient(135deg, rgb(188 188 188 / 0.5) 0%, rgb(0 0 0 / 0.5) 100%) 0
-      0 / 200% 200%,
-    #000;
-  animation: skeleton-shimmer 2s ease-in-out infinite;
-}
-
-@keyframes skeleton-shimmer {
-  0%,
-  100% {
-    background-position: 100% 100%;
-  }
-  50% {
-    background-position: 0 0;
-  }
-}
-
-@utility scroll-shadows-* {
-  overflow: auto;
-
-  background:
-    /* Shadow Cover TOP */
-    linear-gradient(--value(--color-*) 30%, transparent) center top,
-    /* Shadow Cover BOTTOM */
-    linear-gradient(transparent, --value(--color-*) 70%) center bottom,
-    /* Shadow TOP */
-    radial-gradient(
-        farthest-side at 50% 0,
-        color-mix(in oklab, --value(--color-*), #777777 35%),
-        60%,
-        transparent
-      )
-      center top,
-    /* Shadow BOTTOM */
-    radial-gradient(
-        farthest-side at 50% 100%,
-        color-mix(in oklab, --value(--color-*), #777777 35%),
-        60%,
-        transparent
-      )
-      center bottom;
-
-  background-repeat: no-repeat;
-  background-size:
-    300% 40px,
-    300% 40px,
-    300% 14px,
-    300% 14px;
-  background-attachment: local, local, scroll, scroll;
-}