@flowdrop/flowdrop 1.0.0 → 1.1.0

package/dist/styles/tokens.css

@@ -70,278 +70,304 @@
  */
 
 :root {
-	/* =========================================================================
+  /* =========================================================================
 	   INTERNAL PALETTE (Private - not documented for users)
 	   Prefix: --_ indicates internal/private tokens
 	   @internal — Do NOT override these in consumer stylesheets.
 	   ========================================================================= */
 
-	/* Grays - Tinted scale with subtle blue undertone for modern feel, 9 steps */
-	--_gray-1: #fafafc; /* @internal */
-	--_gray-2: #f5f5f8; /* @internal */
-	--_gray-3: #eaeaef; /* @internal */
-	--_gray-4: #dcdce4; /* @internal */
-	--_gray-5: #a3a3ad; /* @internal */
-	--_gray-6: #71717b; /* @internal */
-	--_gray-7: #52525c; /* @internal */
-	--_gray-8: #27272b; /* @internal */
-	--_gray-9: #18181c; /* @internal */
-
-	/* Blue - Primary/interactive color */
-	--_blue-1: #eff6ff; /* @internal */
-	--_blue-2: #3b82f6; /* @internal */
-	--_blue-3: #1d4ed8; /* @internal */
-
-	/* Green - Success states */
-	--_green-1: #f0fdf4; /* @internal */
-	--_green-2: #22c55e; /* @internal */
-	--_green-3: #15803d; /* @internal */
-
-	/* Red - Error/destructive states */
-	--_red-1: #fef2f2; /* @internal */
-	--_red-2: #ef4444; /* @internal */
-	--_red-3: #b91c1c; /* @internal */
-
-	/* Amber - Warning states */
-	--_amber-1: #fffbeb; /* @internal */
-	--_amber-2: #f59e0b; /* @internal */
-	--_amber-3: #b45309; /* @internal */
-
-	/* Violet - Selection/accent */
-	--_violet-1: #f5f3ff; /* @internal */
-	--_violet-2: #8b5cf6; /* @internal */
-	--_violet-3: #6d28d9; /* @internal */
-
-	/* =========================================================================
+  /* Grays - Tinted scale with subtle blue undertone for modern feel, 9 steps */
+  --_gray-1: #fafafc; /* @internal */
+  --_gray-2: #f5f5f8; /* @internal */
+  --_gray-3: #eaeaef; /* @internal */
+  --_gray-4: #dcdce4; /* @internal */
+  --_gray-5: #a3a3ad; /* @internal */
+  --_gray-6: #71717b; /* @internal */
+  --_gray-7: #52525c; /* @internal */
+  --_gray-8: #27272b; /* @internal */
+  --_gray-9: #18181c; /* @internal */
+
+  /* Blue - Primary/interactive color */
+  --_blue-1: #eff6ff; /* @internal */
+  --_blue-2: #3b82f6; /* @internal */
+  --_blue-3: #1d4ed8; /* @internal */
+
+  /* Green - Success states */
+  --_green-1: #f0fdf4; /* @internal */
+  --_green-2: #22c55e; /* @internal */
+  --_green-3: #15803d; /* @internal */
+
+  /* Red - Error/destructive states */
+  --_red-1: #fef2f2; /* @internal */
+  --_red-2: #ef4444; /* @internal */
+  --_red-3: #b91c1c; /* @internal */
+
+  /* Amber - Warning states */
+  --_amber-1: #fffbeb; /* @internal */
+  --_amber-2: #f59e0b; /* @internal */
+  --_amber-3: #b45309; /* @internal */
+
+  /* Violet - Selection/accent */
+  --_violet-1: #f5f3ff; /* @internal */
+  --_violet-2: #8b5cf6; /* @internal */
+  --_violet-3: #6d28d9; /* @internal */
+
+  /* =========================================================================
 	   SEMANTIC TOKENS (Public API)
 	   These are the tokens users override for theming.
 	   @public — All tokens in this section are safe to override.
 	   ========================================================================= */
 
-	/* ----- SURFACES (Backgrounds) ----- */
-	--fd-background: #ffffff; /* @public */
-	--fd-foreground: var(--_gray-9); /* @public */
-	--fd-muted: #f8f8fb; /* @public */
-	--fd-muted-foreground: var(--_gray-6); /* @public */
-	--fd-subtle: #f0f0f5; /* @public */
-	--fd-card: #ffffff; /* @public */
-	--fd-card-foreground: var(--_gray-9); /* @public */
-
-	/* ----- HEADER (Distinct header styling) ----- */
-	--fd-header: #f5f7fa; /* @public */
-	--fd-header-foreground: var(--_gray-8); /* @public */
-	--fd-header-gradient: linear-gradient(180deg, #f8f9fc 0%, #f4f5f8 100%); /* @public */
-
-	/* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
-	--fd-surface-tint: rgba(99, 102, 241, 0.02); /* @public */
-
-	/* ----- BORDERS ----- */
-	--fd-border: var(--_gray-4); /* @public */
-	--fd-border-muted: var(--_gray-3); /* @public */
-	--fd-border-strong: var(--_gray-5); /* @public */
-	--fd-ring: var(--_blue-2); /* @public */
-
-	/* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
-	--fd-node-border: var(--_gray-5); /* @public */
-	--fd-node-border-hover: var(--_gray-6); /* @public */
-
-	/* ----- PRIMARY (Interactive/Brand) ----- */
-	--fd-primary: var(--_blue-2); /* @public */
-	--fd-primary-hover: var(--_blue-3); /* @public */
-	--fd-primary-foreground: #ffffff; /* @public */
-	--fd-primary-muted: var(--_blue-1); /* @public */
-
-	/* ----- SECONDARY ----- */
-	--fd-secondary: var(--_gray-2); /* @public */
-	--fd-secondary-hover: var(--_gray-3); /* @public */
-	--fd-secondary-foreground: var(--_gray-9); /* @public */
-
-	/* ----- ACCENT ----- */
-	--fd-accent: var(--_violet-2); /* @public */
-	--fd-accent-hover: var(--_violet-3); /* @public */
-	--fd-accent-foreground: #ffffff; /* @public */
-	--fd-accent-muted: var(--_violet-1); /* @public */
-
-	/* ----- STATUS: SUCCESS ----- */
-	--fd-success: var(--_green-2); /* @public */
-	--fd-success-hover: var(--_green-3); /* @public */
-	--fd-success-foreground: #ffffff; /* @public */
-	--fd-success-muted: var(--_green-1); /* @public */
-
-	/* ----- STATUS: WARNING ----- */
-	--fd-warning: var(--_amber-2); /* @public */
-	--fd-warning-hover: var(--_amber-3); /* @public */
-	--fd-warning-foreground: var(--_gray-9); /* @public */
-	--fd-warning-muted: var(--_amber-1); /* @public */
-
-	/* ----- STATUS: ERROR/DESTRUCTIVE ----- */
-	--fd-error: var(--_red-2); /* @public */
-	--fd-error-hover: var(--_red-3); /* @public */
-	--fd-error-foreground: #ffffff; /* @public */
-	--fd-error-muted: var(--_red-1); /* @public */
-
-	/* ----- STATUS: INFO ----- */
-	--fd-info: var(--_blue-2); /* @public */
-	--fd-info-hover: var(--_blue-3); /* @public */
-	--fd-info-foreground: #ffffff; /* @public */
-	--fd-info-muted: var(--_blue-1); /* @public */
-
-	/* ----- SPACING SCALE (Named sizes) ----- */
-	--fd-space-0: 0; /* @public */
-	--fd-space-3xs: 0.25rem; /* @public  4px */
-	--fd-space-2xs: 0.375rem; /* @public  6px */
-	--fd-space-xs: 0.5rem; /* @public  8px */
-	--fd-space-sm: 0.625rem; /* @public  10px */
-	--fd-space-md: 0.75rem; /* @public  12px */
-	--fd-space-lg: 0.875rem; /* @public  14px */
-	--fd-space-xl: 1rem; /* @public  16px */
-	--fd-space-2xl: 1.25rem; /* @public  20px */
-	--fd-space-3xl: 1.5rem; /* @public  24px */
-	--fd-space-4xl: 2rem; /* @public  32px */
-	--fd-space-5xl: 2.5rem; /* @public  40px */
-	--fd-space-6xl: 3rem; /* @public  48px */
-	--fd-space-7xl: 4rem; /* @public  64px */
-
-	/* ----- BORDER RADIUS ----- */
-	--fd-radius-none: 0; /* @public */
-	--fd-radius-sm: 0.25rem; /* @public  4px */
-	--fd-radius-md: 0.375rem; /* @public  6px */
-	--fd-radius-lg: 0.5rem; /* @public  8px */
-	--fd-radius-xl: 0.75rem; /* @public  12px */
-	--fd-radius-2xl: 1rem; /* @public  16px */
-	--fd-radius-full: 9999px; /* @public */
-
-	/* ----- SHADOWS (Refined layered shadows for modern depth) ----- */
-	--fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06); /* @public */
-	--fd-shadow-md: 0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04); /* @public */
-	--fd-shadow-lg: 0 10px 20px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04); /* @public */
-	--fd-shadow-xl: 0 20px 30px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.06); /* @public */
-
-	/* ----- FONT SIZES ----- */
-	--fd-text-2xs: 0.6875rem; /* @public  11px */
-	--fd-text-xs: 0.75rem; /* @public  12px */
-	--fd-text-xsm: 0.8125rem; /* @public  13px */
-	--fd-text-sm: 0.875rem; /* @public  14px */
-	--fd-text-md: 0.9375rem; /* @public  15px */
-	--fd-text-base: 1rem; /* @public  16px */
-	--fd-text-lg: 1.125rem; /* @public  18px */
-	--fd-text-xl: 1.25rem; /* @public  20px */
-	--fd-text-2xl: 1.5rem; /* @public  24px */
-
-	/* ----- LINE HEIGHTS ----- */
-	--fd-leading-tight: 1.4; /* @public */
-	--fd-leading-normal: 1.5; /* @public */
-	--fd-leading-relaxed: 1.6; /* @public */
-
-	/* ----- FONT FAMILIES ----- */
-	--fd-font-mono:
-		ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* @public */
-
-	/* ----- COMPONENT SIZES ----- */
-	--fd-size-icon-btn: 1.75rem; /* @internal  28px — may change with component redesigns */
-	--fd-size-btn-min: 2.5rem; /* @internal  40px — may change with component redesigns */
-	--fd-size-avatar: 2.25rem; /* @internal  36px — may change with component redesigns */
-	--fd-size-spinner: 1rem; /* @internal  16px — may change with component redesigns */
-
-	/* ----- TRANSITIONS ----- */
-	--fd-transition-fast: 150ms ease; /* @public */
-	--fd-transition-normal: 200ms ease; /* @public */
-	--fd-transition-slow: 300ms ease; /* @public */
-
-	/* =========================================================================
+  /* ----- SURFACES (Backgrounds) ----- */
+  --fd-background: #ffffff; /* @public */
+  --fd-foreground: var(--_gray-9); /* @public */
+  --fd-muted: #f8f8fb; /* @public */
+  --fd-muted-foreground: var(--_gray-6); /* @public */
+  --fd-subtle: #f0f0f5; /* @public */
+  --fd-card: #ffffff; /* @public */
+  --fd-card-foreground: var(--_gray-9); /* @public */
+
+  /* ----- HEADER (Distinct header styling) ----- */
+  --fd-header: #f5f7fa; /* @public */
+  --fd-header-foreground: var(--_gray-8); /* @public */
+  --fd-header-gradient: linear-gradient(
+    180deg,
+    #f8f9fc 0%,
+    #f4f5f8 100%
+  ); /* @public */
+
+  /* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
+  --fd-surface-tint: rgba(99, 102, 241, 0.02); /* @public */
+
+  /* ----- BORDERS ----- */
+  --fd-border: var(--_gray-4); /* @public */
+  --fd-border-muted: var(--_gray-3); /* @public */
+  --fd-border-strong: var(--_gray-5); /* @public */
+  --fd-ring: var(--_blue-2); /* @public */
+
+  /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
+  --fd-node-border: var(--_gray-5); /* @public */
+  --fd-node-border-hover: var(--_gray-6); /* @public */
+
+  /* ----- PRIMARY (Interactive/Brand) ----- */
+  --fd-primary: var(--_blue-2); /* @public */
+  --fd-primary-hover: var(--_blue-3); /* @public */
+  --fd-primary-foreground: #ffffff; /* @public */
+  --fd-primary-muted: var(--_blue-1); /* @public */
+
+  /* ----- SECONDARY ----- */
+  --fd-secondary: var(--_gray-2); /* @public */
+  --fd-secondary-hover: var(--_gray-3); /* @public */
+  --fd-secondary-foreground: var(--_gray-9); /* @public */
+
+  /* ----- ACCENT ----- */
+  --fd-accent: var(--_violet-2); /* @public */
+  --fd-accent-hover: var(--_violet-3); /* @public */
+  --fd-accent-foreground: #ffffff; /* @public */
+  --fd-accent-muted: var(--_violet-1); /* @public */
+
+  /* ----- STATUS: SUCCESS ----- */
+  --fd-success: var(--_green-2); /* @public */
+  --fd-success-hover: var(--_green-3); /* @public */
+  --fd-success-foreground: #ffffff; /* @public */
+  --fd-success-muted: var(--_green-1); /* @public */
+
+  /* ----- STATUS: WARNING ----- */
+  --fd-warning: var(--_amber-2); /* @public */
+  --fd-warning-hover: var(--_amber-3); /* @public */
+  --fd-warning-foreground: var(--_gray-9); /* @public */
+  --fd-warning-muted: var(--_amber-1); /* @public */
+
+  /* ----- STATUS: ERROR/DESTRUCTIVE ----- */
+  --fd-error: var(--_red-2); /* @public */
+  --fd-error-hover: var(--_red-3); /* @public */
+  --fd-error-foreground: #ffffff; /* @public */
+  --fd-error-muted: var(--_red-1); /* @public */
+
+  /* ----- STATUS: INFO ----- */
+  --fd-info: var(--_blue-2); /* @public */
+  --fd-info-hover: var(--_blue-3); /* @public */
+  --fd-info-foreground: #ffffff; /* @public */
+  --fd-info-muted: var(--_blue-1); /* @public */
+
+  /* ----- SPACING SCALE (Named sizes) ----- */
+  --fd-space-0: 0; /* @public */
+  --fd-space-3xs: 0.25rem; /* @public  4px */
+  --fd-space-2xs: 0.375rem; /* @public  6px */
+  --fd-space-xs: 0.5rem; /* @public  8px */
+  --fd-space-sm: 0.625rem; /* @public  10px */
+  --fd-space-md: 0.75rem; /* @public  12px */
+  --fd-space-lg: 0.875rem; /* @public  14px */
+  --fd-space-xl: 1rem; /* @public  16px */
+  --fd-space-2xl: 1.25rem; /* @public  20px */
+  --fd-space-3xl: 1.5rem; /* @public  24px */
+  --fd-space-4xl: 2rem; /* @public  32px */
+  --fd-space-5xl: 2.5rem; /* @public  40px */
+  --fd-space-6xl: 3rem; /* @public  48px */
+  --fd-space-7xl: 4rem; /* @public  64px */
+
+  /* ----- BORDER RADIUS ----- */
+  --fd-radius-none: 0; /* @public */
+  --fd-radius-sm: 0.25rem; /* @public  4px */
+  --fd-radius-md: 0.375rem; /* @public  6px */
+  --fd-radius-lg: 0.5rem; /* @public  8px */
+  --fd-radius-xl: 0.75rem; /* @public  12px */
+  --fd-radius-2xl: 1rem; /* @public  16px */
+  --fd-radius-full: 9999px; /* @public */
+
+  /* ----- SHADOWS (Refined layered shadows for modern depth) ----- */
+  --fd-shadow-sm:
+    0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06); /* @public */
+  --fd-shadow-md:
+    0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04); /* @public */
+  --fd-shadow-lg:
+    0 10px 20px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04); /* @public */
+  --fd-shadow-xl:
+    0 20px 30px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.06); /* @public */
+
+  /* ----- FONT SIZES ----- */
+  --fd-text-2xs: 0.6875rem; /* @public  11px */
+  --fd-text-xs: 0.75rem; /* @public  12px */
+  --fd-text-xsm: 0.8125rem; /* @public  13px */
+  --fd-text-sm: 0.875rem; /* @public  14px */
+  --fd-text-md: 0.9375rem; /* @public  15px */
+  --fd-text-base: 1rem; /* @public  16px */
+  --fd-text-lg: 1.125rem; /* @public  18px */
+  --fd-text-xl: 1.25rem; /* @public  20px */
+  --fd-text-2xl: 1.5rem; /* @public  24px */
+
+  /* ----- LINE HEIGHTS ----- */
+  --fd-leading-tight: 1.4; /* @public */
+  --fd-leading-normal: 1.5; /* @public */
+  --fd-leading-relaxed: 1.6; /* @public */
+
+  /* ----- FONT FAMILIES ----- */
+  --fd-font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace; /* @public */
+
+  /* ----- COMPONENT SIZES ----- */
+  --fd-size-icon-btn: 1.75rem; /* @internal  28px — may change with component redesigns */
+  --fd-size-btn-min: 2.5rem; /* @internal  40px — may change with component redesigns */
+  --fd-size-avatar: 2.25rem; /* @internal  36px — may change with component redesigns */
+  --fd-size-spinner: 1rem; /* @internal  16px — may change with component redesigns */
+
+  /* ----- TRANSITIONS ----- */
+  --fd-transition-fast: 150ms ease; /* @public */
+  --fd-transition-normal: 200ms ease; /* @public */
+  --fd-transition-slow: 300ms ease; /* @public */
+
+  /* =========================================================================
 	   COMPONENT TOKENS
 	   These provide fine-grained control while defaulting to semantic tokens.
 	   @public tokens in this section are safe to override.
 	   @internal tokens may change without notice.
 	   ========================================================================= */
 
-	/* ----- LAYOUT ----- */
-	--fd-sidebar-width: 320px; /* @internal — controlled programmatically */
-	--fd-navbar-height: 60px; /* @internal — controlled programmatically */
-	--fd-toolbar-height: 40px; /* @internal — controlled programmatically */
-
-	/* ----- NODE COLORS (for workflow editor) ----- */
-	--fd-node-emerald: #10b981; /* @public */
-	--fd-node-blue: #2563eb; /* @public */
-	--fd-node-amber: #f59e0b; /* @public */
-	--fd-node-orange: #f97316; /* @public */
-	--fd-node-red: #ef4444; /* @public */
-	--fd-node-pink: #ec4899; /* @public */
-	--fd-node-indigo: #6366f1; /* @public */
-	--fd-node-teal: #14b8a6; /* @public */
-	--fd-node-cyan: #06b6d4; /* @public */
-	--fd-node-lime: #84cc16; /* @public */
-	--fd-node-slate: #64748b; /* @public */
-	--fd-node-purple: #9333ea; /* @public */
-
-	/** Icon on node squircle: dark in light theme, white in dark theme */
-	--fd-node-icon: var(--_gray-9); /* @public */
-	/** Opacity of the icon squircle background (color-mix percentage). Light mode: 15% / 22% hover; dark mode uses higher values. */
-	--fd-node-icon-bg-opacity: 20%; /* @public */
-	--fd-node-icon-bg-opacity-hover: 50%; /* @public */
-
-	/* ----- EDGE TOKENS ----- */
-	--fd-edge-trigger: var(--_gray-9); /* @public */
-	--fd-edge-trigger-hover: var(--_gray-9); /* @public */
-	--fd-edge-trigger-selected: var(--_violet-2); /* @public */
-	--fd-edge-trigger-width: 2px; /* @public */
-	--fd-edge-trigger-width-hover: 3px; /* @public */
-
-	--fd-edge-tool: var(--_amber-2); /* @public */
-	--fd-edge-tool-hover: var(--_amber-3); /* @public */
-	--fd-edge-tool-selected: var(--_violet-2); /* @public */
-
-	--fd-edge-data: var(--_gray-5); /* @public */
-	--fd-edge-data-hover: var(--_gray-6); /* @public */
-	--fd-edge-data-selected: var(--_violet-2); /* @public */
-
-	--fd-edge-loopback: var(--_gray-6); /* @public */
-	--fd-edge-loopback-hover: var(--_gray-7); /* @public */
-	--fd-edge-loopback-selected: var(--_violet-2); /* @public */
-	--fd-edge-loopback-width: 1.5px; /* @public */
-	--fd-edge-loopback-width-hover: 2.5px; /* @public */
-	--fd-edge-loopback-dasharray: 5 5; /* @public */
-	--fd-edge-loopback-opacity: 0.85; /* @public */
-
-	/* ----- SCROLLBAR COLORS ----- */
-	--fd-scrollbar-thumb: var(--_gray-4); /* @internal */
-	--fd-scrollbar-thumb-hover: var(--_gray-5); /* @internal */
-	--fd-scrollbar-track: var(--_gray-2); /* @internal */
-
-	/* ----- BACKDROP/OVERLAY ----- */
-	--fd-backdrop: rgba(255, 255, 255, 0.8); /* @internal */
-	--fd-backdrop-blur: blur(8px); /* @internal */
-
-	/* ----- HANDLE (Node connection points) ----- */
-	/* White ring around handles for contrast against node backgrounds */
-	--fd-handle-border: #ffffff; /* @public */
-	/* Outer size = connection/hit area (px); visual = visible circle (px) */
-	--fd-handle-size: 20px; /* @public */
-	--fd-handle-visual-size: 12px; /* @public */
-	--fd-handle-offset: calc(
-		-1 * var(--fd-handle-size) / 2
-	); /* @internal — half handle size for edge positioning */
-
-	/* ----- NODE LAYOUT (Dimensions and port alignment; multiples of 10 for grid) ----- */
-	--fd-node-grid-step: 10; /* @internal — layout algorithm detail */
-	--fd-node-default-width: 290px; /* @public */
-	--fd-node-header-height: 60px; /* @public */
-	--fd-node-header-title-height: 40px; /* @internal */
-	--fd-node-header-desc-line: 20px; /* @internal */
-	--fd-node-header-gap: 10px; /* @internal */
-	--fd-node-port-row-height: 20px; /* @internal */
-	--fd-node-terminal-size: 80px; /* @public */
-	--fd-node-square-size: 80px; /* @public */
-	--fd-node-simple-height: 80px; /* @public */
-	--fd-node-tool-min-height: 80px; /* @public */
-
-	/* ----- LAYOUT BACKGROUND (Main content area gradient) ----- */
-	--fd-layout-background: linear-gradient(
-		135deg,
-		#f9fafb 0%,
-		#e0e7ff 50%,
-		#c7d2fe 100%
-	); /* @public */
+  /* ----- LAYOUT ----- */
+  --fd-sidebar-width: 320px; /* @internal — controlled programmatically */
+  --fd-navbar-height: 60px; /* @internal — controlled programmatically */
+  --fd-toolbar-height: 40px; /* @internal — controlled programmatically */
+
+  /* ----- NODE COLORS (for workflow editor) ----- */
+  --fd-node-emerald: #10b981; /* @public */
+  --fd-node-blue: #2563eb; /* @public */
+  --fd-node-amber: #f59e0b; /* @public */
+  --fd-node-orange: #f97316; /* @public */
+  --fd-node-red: #ef4444; /* @public */
+  --fd-node-pink: #ec4899; /* @public */
+  --fd-node-indigo: #6366f1; /* @public */
+  --fd-node-teal: #14b8a6; /* @public */
+  --fd-node-cyan: #06b6d4; /* @public */
+  --fd-node-lime: #84cc16; /* @public */
+  --fd-node-slate: #64748b; /* @public */
+  --fd-node-purple: #9333ea; /* @public */
+
+  /** Icon on node squircle: dark in light theme, white in dark theme */
+  --fd-node-icon: var(--_gray-9); /* @public */
+  /** Opacity of the icon squircle background (color-mix percentage). Light mode: 15% / 22% hover; dark mode uses higher values. */
+  --fd-node-icon-bg-opacity: 20%; /* @public */
+  --fd-node-icon-bg-opacity-hover: 50%; /* @public */
+
+  /* ----- EDGE TOKENS ----- */
+  --fd-edge-trigger: var(--_gray-9); /* @public */
+  --fd-edge-trigger-hover: var(--_gray-9); /* @public */
+  --fd-edge-trigger-selected: var(--_violet-2); /* @public */
+  --fd-edge-trigger-width: 2px; /* @public */
+  --fd-edge-trigger-width-hover: 3px; /* @public */
+
+  --fd-edge-tool: var(--_amber-2); /* @public */
+  --fd-edge-tool-hover: var(--_amber-3); /* @public */
+  --fd-edge-tool-selected: var(--_violet-2); /* @public */
+
+  --fd-edge-data: var(--_gray-5); /* @public */
+  --fd-edge-data-hover: var(--_gray-6); /* @public */
+  --fd-edge-data-selected: var(--_violet-2); /* @public */
+
+  --fd-edge-loopback: var(--_gray-6); /* @public */
+  --fd-edge-loopback-hover: var(--_gray-7); /* @public */
+  --fd-edge-loopback-selected: var(--_violet-2); /* @public */
+  --fd-edge-loopback-width: 1.5px; /* @public */
+  --fd-edge-loopback-width-hover: 2.5px; /* @public */
+  --fd-edge-loopback-dasharray: 5 5; /* @public */
+  --fd-edge-loopback-opacity: 0.85; /* @public */
+
+  /* ----- SCROLLBAR COLORS ----- */
+  --fd-scrollbar-thumb: var(--_gray-4); /* @internal */
+  --fd-scrollbar-thumb-hover: var(--_gray-5); /* @internal */
+  --fd-scrollbar-track: var(--_gray-2); /* @internal */
+
+  /* ----- BACKDROP/OVERLAY ----- */
+  --fd-backdrop: rgba(255, 255, 255, 0.8); /* @internal */
+  --fd-backdrop-blur: blur(8px); /* @internal */
+
+  /* ----- HANDLE (Node connection points) ----- */
+  /* White ring around handles for contrast against node backgrounds */
+  --fd-handle-border: #ffffff; /* @public */
+  /* Outer size = connection/hit area (px); visual = visible circle (px) */
+  --fd-handle-size: 20px; /* @public */
+  --fd-handle-visual-size: 12px; /* @public */
+  --fd-handle-offset: calc(
+    -1 * var(--fd-handle-size) / 2
+  ); /* @internal — half handle size for edge positioning */
+
+  /* ----- NODE LAYOUT (Dimensions and port alignment; multiples of 10 for grid) ----- */
+  --fd-node-grid-step: 10; /* @internal — layout algorithm detail */
+  --fd-node-default-width: 290px; /* @public */
+  --fd-node-header-height: 60px; /* @public */
+  --fd-node-header-title-height: 40px; /* @internal */
+  --fd-node-header-desc-line: 20px; /* @internal */
+  --fd-node-header-gap: 10px; /* @internal */
+  --fd-node-port-row-height: 20px; /* @internal */
+  --fd-node-terminal-size: 80px; /* @public */
+  --fd-node-square-size: 80px; /* @public */
+  --fd-node-simple-height: 80px; /* @public */
+  --fd-node-tool-min-height: 80px; /* @public */
+
+  /* ----- LAYOUT BACKGROUND (Main content area gradient) ----- */
+  --fd-layout-background: linear-gradient(
+    135deg,
+    #f9fafb 0%,
+    #e0e7ff 50%,
+    #c7d2fe 100%
+  ); /* @public */
+
+  /* ----- SKIN DISPLAY CONTROL TOKENS ----- */
+  /* @public — override these in a skin's tokens dict to toggle visual variants */
+  --fd-node-icon-display: flex; /* @public  show squircle icon wrapper */
+  --fd-node-circle-display: none; /* @public  hide circle dot */
+  --fd-sidebar-search-display: flex; /* @public  show sidebar search input */
+  --fd-sidebar-header-display: flex; /* @public  show sidebar "Components" header */
+  --fd-sidebar-card-display: block; /* @public  show accordion card node list */
+  --fd-sidebar-flat-display: none; /* @public  hide flat dot-name node list */
+  --fd-sidebar-category-color: var(
+    --fd-muted-foreground
+  ); /* @public  category header text color */
+  --fd-sidebar-flat-item-color: var(
+    --fd-foreground
+  ); /* @public  flat list item text color */
+  --fd-navbar-split-display: none; /* @public  show all actions as separate buttons */
+  --fd-navbar-dropdown-display: flex; /* @public  show primary-action + dropdown chevron */
 }
 
 /* =========================================================================
@@ -350,126 +376,131 @@
    Designed for softer contrast and reduced eye strain
    ========================================================================= */
 
-[data-theme='dark'] {
-	/* ----- SURFACES (Backgrounds) - Softer contrast ----- */
-	--fd-background: #1a1a1e;
-	--fd-foreground: var(--_gray-2);
-	--fd-muted: #242428;
-	--fd-muted-foreground: var(--_gray-4);
-	--fd-subtle: #2a2a30;
-	--fd-card: #222226;
-	--fd-card-foreground: var(--_gray-2);
-
-	/* ----- HEADER (Distinct header styling for dark mode) ----- */
-	--fd-header: #1f1f24;
-	--fd-header-foreground: var(--_gray-3);
-	--fd-header-gradient: linear-gradient(180deg, #222228 0%, #1e1e24 100%);
-
-	/* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
-	--fd-surface-tint: rgba(99, 102, 241, 0.03);
-
-	/* ----- HANDLE (Node connection points) ----- */
-	/* White ring around handles provides contrast on dark node backgrounds */
-	--fd-handle-border: rgba(255, 255, 255, 0.9);
-
-	/* ----- BORDERS - Subtle in dark mode for softer contrast ----- */
-	--fd-border: #3a3a40;
-	--fd-border-muted: #2e2e33;
-	--fd-border-strong: #4a4a52;
-	--fd-ring: #60a5fa;
-
-	/* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
-	--fd-node-border: #4a4a52;
-	--fd-node-border-hover: #5a5a62;
-
-	/* ----- NODE COLORS (port type labels/badges - lighter for readability on dark surfaces) ----- */
-	--fd-node-emerald: #34d399;
-	--fd-node-blue: #60a5fa;
-	--fd-node-amber: #fbbf24;
-	--fd-node-orange: #fb923c;
-	--fd-node-red: #f87171;
-	--fd-node-pink: #f472b6;
-	--fd-node-indigo: #818cf8;
-	--fd-node-teal: #2dd4bf;
-	--fd-node-cyan: #22d3ee;
-	--fd-node-lime: #a3e635;
-	--fd-node-slate: #94a3b8;
-	--fd-node-purple: #c084fc;
-
-	/** Icon on node squircle: white in dark theme */
-	--fd-node-icon: #ffffff;
-	/** Icon squircle background opacity: higher in dark mode for visibility on dark surfaces */
-	--fd-node-icon-bg-opacity: 50%;
-	--fd-node-icon-bg-opacity-hover: 80%;
-
-	/* ----- PRIMARY (Interactive/Brand) ----- */
-	--fd-primary: #60a5fa;
-	--fd-primary-hover: #93c5fd;
-	--fd-primary-foreground: var(--_gray-9);
-	--fd-primary-muted: rgba(59, 130, 246, 0.12);
-
-	/* ----- SECONDARY ----- */
-	--fd-secondary: #2d2d32;
-	--fd-secondary-hover: #3a3a3f;
-	--fd-secondary-foreground: var(--_gray-2);
-
-	/* ----- ACCENT ----- */
-	--fd-accent: #a78bfa;
-	--fd-accent-hover: #c4b5fd;
-	--fd-accent-foreground: var(--_gray-9);
-	--fd-accent-muted: rgba(139, 92, 246, 0.12);
-
-	/* ----- STATUS: SUCCESS ----- */
-	--fd-success: #4ade80;
-	--fd-success-hover: #86efac;
-	--fd-success-foreground: var(--_gray-9);
-	--fd-success-muted: rgba(34, 197, 94, 0.12);
-
-	/* ----- STATUS: WARNING ----- */
-	--fd-warning: #fbbf24;
-	--fd-warning-hover: #fcd34d;
-	--fd-warning-foreground: var(--_gray-9);
-	--fd-warning-muted: rgba(245, 158, 11, 0.12);
-
-	/* ----- STATUS: ERROR/DESTRUCTIVE ----- */
-	--fd-error: #f87171;
-	--fd-error-hover: #fca5a5;
-	--fd-error-foreground: var(--_gray-9);
-	--fd-error-muted: rgba(239, 68, 68, 0.12);
-
-	/* ----- STATUS: INFO ----- */
-	--fd-info: #60a5fa;
-	--fd-info-hover: #93c5fd;
-	--fd-info-foreground: var(--_gray-9);
-	--fd-info-muted: rgba(59, 130, 246, 0.12);
-
-	/* ----- SHADOWS (softer for dark mode) ----- */
-	--fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
-	--fd-shadow-md: 0 4px 6px rgb(0 0 0 / 0.25);
-	--fd-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3);
-	--fd-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.4);
-
-	/* ----- SCROLLBAR COLORS ----- */
-	--fd-scrollbar-thumb: var(--_gray-5);
-	--fd-scrollbar-thumb-hover: var(--_gray-4);
-	--fd-scrollbar-track: #242428;
-
-	/* ----- BACKDROP/OVERLAY ----- */
-	--fd-backdrop: rgba(26, 26, 30, 0.85);
-
-	/* ----- EDGE TOKENS (adjusted for dark mode visibility) ----- */
-	--fd-edge-trigger: var(--_gray-3);
-	--fd-edge-trigger-hover: var(--_gray-2);
-	--fd-edge-trigger-selected: #a78bfa;
-	--fd-edge-data: var(--_gray-5);
-	--fd-edge-data-hover: var(--_gray-4);
-	--fd-edge-data-selected: #a78bfa;
-	--fd-edge-tool-hover: #fbbf24;
-	--fd-edge-tool-selected: #a78bfa;
-	--fd-edge-loopback: var(--_gray-5);
-	--fd-edge-loopback-hover: var(--_gray-4);
-	--fd-edge-loopback-selected: #a78bfa;
-
-	/* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */
-	--fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
+[data-theme="dark"] {
+  /* ----- SURFACES (Backgrounds) - Softer contrast ----- */
+  --fd-background: #1a1a1e;
+  --fd-foreground: var(--_gray-2);
+  --fd-muted: #242428;
+  --fd-muted-foreground: var(--_gray-4);
+  --fd-subtle: #2a2a30;
+  --fd-card: #222226;
+  --fd-card-foreground: var(--_gray-2);
+
+  /* ----- HEADER (Distinct header styling for dark mode) ----- */
+  --fd-header: #1f1f24;
+  --fd-header-foreground: var(--_gray-3);
+  --fd-header-gradient: linear-gradient(180deg, #222228 0%, #1e1e24 100%);
+
+  /* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
+  --fd-surface-tint: rgba(99, 102, 241, 0.03);
+
+  /* ----- HANDLE (Node connection points) ----- */
+  /* White ring around handles provides contrast on dark node backgrounds */
+  --fd-handle-border: rgba(255, 255, 255, 0.9);
+
+  /* ----- BORDERS - Subtle in dark mode for softer contrast ----- */
+  --fd-border: #3a3a40;
+  --fd-border-muted: #2e2e33;
+  --fd-border-strong: #4a4a52;
+  --fd-ring: #60a5fa;
+
+  /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
+  --fd-node-border: #4a4a52;
+  --fd-node-border-hover: #5a5a62;
+
+  /* ----- NODE COLORS (port type labels/badges - lighter for readability on dark surfaces) ----- */
+  --fd-node-emerald: #34d399;
+  --fd-node-blue: #60a5fa;
+  --fd-node-amber: #fbbf24;
+  --fd-node-orange: #fb923c;
+  --fd-node-red: #f87171;
+  --fd-node-pink: #f472b6;
+  --fd-node-indigo: #818cf8;
+  --fd-node-teal: #2dd4bf;
+  --fd-node-cyan: #22d3ee;
+  --fd-node-lime: #a3e635;
+  --fd-node-slate: #94a3b8;
+  --fd-node-purple: #c084fc;
+
+  /** Icon on node squircle: white in dark theme */
+  --fd-node-icon: #ffffff;
+  /** Icon squircle background opacity: higher in dark mode for visibility on dark surfaces */
+  --fd-node-icon-bg-opacity: 50%;
+  --fd-node-icon-bg-opacity-hover: 80%;
+
+  /* ----- PRIMARY (Interactive/Brand) ----- */
+  --fd-primary: #60a5fa;
+  --fd-primary-hover: #93c5fd;
+  --fd-primary-foreground: var(--_gray-9);
+  --fd-primary-muted: rgba(59, 130, 246, 0.12);
+
+  /* ----- SECONDARY ----- */
+  --fd-secondary: #2d2d32;
+  --fd-secondary-hover: #3a3a3f;
+  --fd-secondary-foreground: var(--_gray-2);
+
+  /* ----- ACCENT ----- */
+  --fd-accent: #a78bfa;
+  --fd-accent-hover: #c4b5fd;
+  --fd-accent-foreground: var(--_gray-9);
+  --fd-accent-muted: rgba(139, 92, 246, 0.12);
+
+  /* ----- STATUS: SUCCESS ----- */
+  --fd-success: #4ade80;
+  --fd-success-hover: #86efac;
+  --fd-success-foreground: var(--_gray-9);
+  --fd-success-muted: rgba(34, 197, 94, 0.12);
+
+  /* ----- STATUS: WARNING ----- */
+  --fd-warning: #fbbf24;
+  --fd-warning-hover: #fcd34d;
+  --fd-warning-foreground: var(--_gray-9);
+  --fd-warning-muted: rgba(245, 158, 11, 0.12);
+
+  /* ----- STATUS: ERROR/DESTRUCTIVE ----- */
+  --fd-error: #f87171;
+  --fd-error-hover: #fca5a5;
+  --fd-error-foreground: var(--_gray-9);
+  --fd-error-muted: rgba(239, 68, 68, 0.12);
+
+  /* ----- STATUS: INFO ----- */
+  --fd-info: #60a5fa;
+  --fd-info-hover: #93c5fd;
+  --fd-info-foreground: var(--_gray-9);
+  --fd-info-muted: rgba(59, 130, 246, 0.12);
+
+  /* ----- SHADOWS (softer for dark mode) ----- */
+  --fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
+  --fd-shadow-md: 0 4px 6px rgb(0 0 0 / 0.25);
+  --fd-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3);
+  --fd-shadow-xl: 0 20px 25px rgb(0 0 0 / 0.4);
+
+  /* ----- SCROLLBAR COLORS ----- */
+  --fd-scrollbar-thumb: var(--_gray-5);
+  --fd-scrollbar-thumb-hover: var(--_gray-4);
+  --fd-scrollbar-track: #242428;
+
+  /* ----- BACKDROP/OVERLAY ----- */
+  --fd-backdrop: rgba(26, 26, 30, 0.85);
+
+  /* ----- EDGE TOKENS (adjusted for dark mode visibility) ----- */
+  --fd-edge-trigger: var(--_gray-3);
+  --fd-edge-trigger-hover: var(--_gray-2);
+  --fd-edge-trigger-selected: #a78bfa;
+  --fd-edge-data: var(--_gray-5);
+  --fd-edge-data-hover: var(--_gray-4);
+  --fd-edge-data-selected: #a78bfa;
+  --fd-edge-tool-hover: #fbbf24;
+  --fd-edge-tool-selected: #a78bfa;
+  --fd-edge-loopback: var(--_gray-5);
+  --fd-edge-loopback-hover: var(--_gray-4);
+  --fd-edge-loopback-selected: #a78bfa;
+
+  /* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */
+  --fd-layout-background: linear-gradient(
+    135deg,
+    #141418 0%,
+    #1a1a2e 50%,
+    #16162a 100%
+  );
 }