@flowdrop/flowdrop 2.0.0-beta.3 → 2.0.0-beta.4

package/dist/skins/drafter.js

@@ -28,12 +28,16 @@
  */
 export const drafterSkin = {
     tokens: {
-        /* ----- Shell surfaces: fresh white chrome, not all-cyan ----- */
+        /* ----- Shell surfaces: fresh white shell + pale mint chrome ----- */
+        /* Neutral greys read as cold admin chrome and fight the mint canvas, so the
+           quiet surfaces carry a faint aqua-mint tint instead. muted-foreground is
+           a darker teal-slate (≈6.5:1 on white) so secondary/helper text clears
+           WCAG AA comfortably — grey body text was the accessibility problem. */
         background: '#ffffff',
         foreground: '#10201c',
-        muted: '#f4f6f7',
-        'muted-foreground': '#5f6f6b',
-        subtle: '#eef3f2',
+        muted: '#eaf5f0',
+        'muted-foreground': '#46635b',
+        subtle: '#e1f0ea',
         card: '#ffffff',
         'card-foreground': '#10201c',
         header: '#ffffff',
@@ -44,9 +48,9 @@ export const drafterSkin = {
         'panel-bg': 'rgba(255, 255, 255, 0.94)',
         'panel-backdrop-filter': 'blur(10px) saturate(1.04)',
         backdrop: 'rgba(255, 255, 255, 0.92)',
-        /* ----- Borders: neutral chrome; strong/focus = teal-cyan accent ----- */
-        border: '#e3e8e7',
-        'border-muted': '#eef2f2',
+        /* ----- Borders: soft mint hairlines; strong/focus = teal-cyan accent ----- */
+        border: '#d3e6df',
+        'border-muted': '#e4f0eb',
         'border-strong': 'rgba(15, 118, 110, 0.42)',
         ring: '#06b6d4',
         /* ----- Canvas: fresh aqua-mint, soft cyan/teal square grid ----- */
@@ -68,7 +72,6 @@ export const drafterSkin = {
         /* Notes read as cool annotations, not filled success cards */
         'note-border': '#5b7891',
         'note-border-hover': '#48617a',
-        /* Translucent status tints so note/instruction cards stay light + glassy */
         /* Status hues tuned to the cool palette: danger = rose (teal's warm
            complement, not a generic red), warning = golden amber. Success/info stay
            on the emerald/cyan family so they read as part of the theme. */
@@ -80,15 +83,23 @@ export const drafterSkin = {
         'warning-hover': '#b45309',
         error: '#e11d48',
         'error-hover': '#be123c',
-        'info-muted': 'rgba(8, 145, 178, 0.1)',
-        'success-muted': 'rgba(13, 148, 136, 0.1)',
-        'warning-muted': 'rgba(217, 119, 6, 0.12)',
-        'error-muted': 'rgba(225, 29, 72, 0.1)',
+        /* Status/accent tints are FLAT + OPAQUE (not alpha) so the action buttons
+           that use them as fills (form add/move/delete, canvas toggles, secondary)
+           read as solid chips, never see-through to the grid. Values are the opaque
+           equivalent of the former translucent tints over the white shell. */
+        'info-muted': '#e6f4f7',
+        'success-muted': '#e7f4f3',
+        'warning-muted': '#faefe1',
+        'error-muted': '#fce8ed',
         /* ----- Crisp drafting geometry + flat chrome (2–6px radius, no soft shadow) ----- */
         'radius-sm': '2px',
         'radius-md': '3px',
         'radius-lg': '4px',
         'radius-xl': '6px',
+        /* Form controls + their group containers (fields, array item boxes,
+           fieldsets) get the sharpest 2px corner so the config panel reads as
+           crisp drafting geometry, not rounded admin chrome. */
+        'control-radius': '2px',
         'scrollbar-radius': '0',
         'shadow-sm': 'none',
         'shadow-md': 'none',
@@ -98,23 +109,23 @@ export const drafterSkin = {
         'minimap-mask-stroke': 'rgba(15, 118, 110, 0.35)',
         'minimap-node-bg': 'rgba(15, 118, 110, 0.3)',
         'minimap-node-stroke': 'rgba(15, 118, 110, 0.45)',
-        'controls-button-bg': 'rgba(255, 255, 255, 0.86)',
-        'controls-button-bg-hover': 'rgba(204, 251, 241, 0.9)',
+        'controls-button-bg': '#ffffff',
+        'controls-button-bg-hover': '#ccfbf1',
         'controls-button-color': '#0f766e',
         'controls-button-color-hover': '#0c5f59',
         'controls-button-border': 'rgba(15, 118, 110, 0.25)',
         /* ----- Secondary = mint, accent = cyan, primary = the one allowed green ----- */
-        secondary: 'rgba(206, 230, 223, 0.55)',
-        'secondary-hover': 'rgba(186, 219, 210, 0.7)',
+        secondary: '#e4f1ed',
+        'secondary-hover': '#cfe6e0',
         'secondary-foreground': '#0f3d36',
         accent: '#06b6d4',
         'accent-hover': '#0891b2',
         'accent-foreground': '#ffffff',
-        'accent-muted': 'rgba(6, 182, 212, 0.12)',
+        'accent-muted': '#e1f6fa',
         primary: '#10b981',
         'primary-hover': '#059669',
         'primary-foreground': '#ffffff',
-        'primary-muted': 'rgba(16, 185, 129, 0.14)'
+        'primary-muted': '#def5ed'
     },
     darkTokens: {
         /* ----- Shell surfaces: deep teal-slate glass ----- */
@@ -156,30 +167,32 @@ export const drafterSkin = {
         'warning-hover': '#fcd34d',
         error: '#fb7185',
         'error-hover': '#fda4af',
-        'info-muted': 'rgba(34, 211, 238, 0.12)',
-        'success-muted': 'rgba(45, 212, 191, 0.12)',
-        'warning-muted': 'rgba(251, 191, 36, 0.14)',
-        'error-muted': 'rgba(251, 113, 133, 0.12)',
+        /* Flat + opaque tints (opaque equivalent of the former alpha tints over the
+           deep teal-slate shell) so button fills never go see-through. */
+        'info-muted': '#10393a',
+        'success-muted': '#123934',
+        'warning-muted': '#2f3a21',
+        'error-muted': '#2a2d2d',
         'minimap-bg': 'rgba(11, 31, 28, 0.7)',
         'minimap-mask-bg': 'rgba(45, 212, 191, 0.06)',
         'minimap-mask-stroke': 'rgba(45, 212, 191, 0.3)',
         'minimap-node-bg': 'rgba(45, 212, 191, 0.28)',
         'minimap-node-stroke': 'rgba(45, 212, 191, 0.45)',
-        'controls-button-bg': 'rgba(17, 38, 35, 0.8)',
-        'controls-button-bg-hover': 'rgba(13, 47, 44, 0.9)',
+        'controls-button-bg': '#102522',
+        'controls-button-bg-hover': '#0d2d2a',
         'controls-button-color': '#2dd4bf',
         'controls-button-color-hover': '#5eead4',
         'controls-button-border': 'rgba(45, 212, 191, 0.3)',
-        secondary: 'rgba(13, 47, 44, 0.8)',
-        'secondary-hover': 'rgba(20, 60, 54, 0.9)',
+        secondary: '#0d2d2a',
+        'secondary-hover': '#133a34',
         'secondary-foreground': '#d8f0ea',
         accent: '#22d3ee',
         'accent-hover': '#67e8f9',
         'accent-foreground': '#03291c',
-        'accent-muted': 'rgba(34, 211, 238, 0.14)',
+        'accent-muted': '#113d3e',
         primary: '#34d399',
         'primary-hover': '#6ee7b7',
         'primary-foreground': '#03291c',
-        'primary-muted': 'rgba(52, 211, 153, 0.16)'
+        'primary-muted': '#144034'
     }
 };

package/dist/styles/base.css

@@ -149,6 +149,7 @@ p {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--fd-space-xs);
   padding: var(--fd-space-xs) var(--fd-space-xl);
   border: 1px solid transparent;
   border-radius: var(--fd-radius-md);
@@ -224,37 +225,278 @@ p {
   min-height: var(--fd-space-6xl);
 }
 
-/* Input styles */
+/* ───────────────────────────────────────────────────────────────────────────
+   Icon buttons — square, icon-only. The typed primitive IconButton.svelte
+   routes here (the same way Button.svelte routes through .flowdrop-btn). It
+   composes onto .flowdrop-btn, then overrides geometry to a fixed square and
+   layers a tint variant. Corners follow --fd-control-radius so the Drafter
+   theme gets crisp icon buttons alongside its form controls.
+
+   Sizes: md (default) is 32px with a 16px glyph — the dominant size across the
+   library (form-array actions, modal closes, toolbars). sm maps to the
+   canonical --fd-size-icon-btn token (28px); lg is 36px (canvas-scale). */
+.flowdrop-btn--icon {
+  width: 2rem;
+  height: 2rem;
+  min-height: 0;
+  padding: 0;
+  border-radius: var(--fd-control-radius);
+  color: var(--fd-muted-foreground);
+}
+
+.flowdrop-btn--icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.flowdrop-btn--icon.flowdrop-btn--sm {
+  width: var(--fd-size-icon-btn);
+  height: var(--fd-size-icon-btn);
+  padding: 0;
+}
+
+.flowdrop-btn--icon.flowdrop-btn--sm svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.flowdrop-btn--icon.flowdrop-btn--lg {
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+}
+
+.flowdrop-btn--icon.flowdrop-btn--lg svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/* Ghost (default for icon buttons) — transparent until hover. */
+.flowdrop-btn--icon.flowdrop-btn--ghost:hover:not(:disabled) {
+  background-color: var(--fd-muted);
+  color: var(--fd-foreground);
+  border-color: transparent;
+}
+
+/* Default — flat --fd-background surface with a resting border. */
+.flowdrop-btn--icon-default {
+  background-color: var(--fd-background);
+  border-color: var(--fd-border);
+}
+
+.flowdrop-btn--icon-default:hover:not(:disabled) {
+  background-color: var(--fd-muted);
+  color: var(--fd-foreground);
+}
+
+/* Tinted semantic variants — muted fill + semantic border/text, solid on press.
+   Unlike the solid text-button --primary, the icon flavour stays a quiet tint
+   so a row of action buttons reads as a group, not a wall of colour. */
+.flowdrop-btn--icon-primary {
+  background-color: var(--fd-primary-muted);
+  border-color: var(--fd-primary);
+  color: var(--fd-primary-hover);
+}
+
+.flowdrop-btn--icon-primary:hover:not(:disabled) {
+  border-color: var(--fd-primary-hover);
+  color: var(--fd-primary-hover);
+}
+
+.flowdrop-btn--icon-primary:active:not(:disabled) {
+  background-color: var(--fd-primary);
+}
+
+.flowdrop-btn--icon-danger {
+  background-color: var(--fd-error-muted);
+  border-color: var(--fd-error);
+  color: var(--fd-error);
+}
+
+.flowdrop-btn--icon-danger:hover:not(:disabled) {
+  border-color: var(--fd-error-hover);
+  color: var(--fd-error-hover);
+}
+
+.flowdrop-btn--icon-danger:active:not(:disabled) {
+  background-color: var(--fd-error);
+}
+
+.flowdrop-btn--icon-success {
+  background-color: var(--fd-success-muted);
+  border-color: var(--fd-success);
+  color: var(--fd-success);
+}
+
+.flowdrop-btn--icon-success:hover:not(:disabled) {
+  border-color: var(--fd-success-hover);
+  color: var(--fd-success-hover);
+}
+
+.flowdrop-btn--icon-success:active:not(:disabled) {
+  background-color: var(--fd-success);
+}
+
+/* Active / toggled state (e.g. a pressed canvas control) — primary tint. */
+.flowdrop-btn--icon.is-active {
+  color: var(--fd-primary);
+  background-color: var(--fd-primary-muted);
+  border-color: var(--fd-primary);
+}
+
+.flowdrop-btn--icon:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   Form controls — THE single source of truth for input/select/textarea look.
+
+   The typed primitives Input.svelte / Select.svelte / Textarea.svelte route
+   here (the same way Button.svelte routes through .flowdrop-btn) so every field
+   across the library — config form, sidebar search, playground, prompts —
+   renders identically. Resting fields are ALWAYS the flat --fd-background
+   surface; `:disabled` is the ONLY muted state. Components must not re-declare
+   control backgrounds/borders locally. */
 .flowdrop-input {
   display: block;
   width: 100%;
-  padding: var(--fd-space-xs) var(--fd-space-md);
+  padding: 0.625rem 0.875rem;
   border: 1px solid var(--fd-border);
-  border-radius: var(--fd-radius-md);
+  border-radius: var(--fd-control-radius);
   font-size: var(--fd-text-sm);
+  font-family: inherit;
   line-height: 1.25rem;
   color: var(--fd-foreground);
   background-color: var(--fd-background);
+  box-shadow: var(--fd-shadow-sm);
   transition:
     border-color var(--fd-transition-normal),
     box-shadow var(--fd-transition-normal);
 }
 
+.flowdrop-input::placeholder {
+  color: var(--fd-muted-foreground);
+}
+
 /* Active-field hint only; the focus ring itself is centralized (top of file). */
+.flowdrop-input:hover:not(:disabled):not(:focus) {
+  border-color: var(--fd-border-strong);
+}
+
 .flowdrop-input:focus {
   border-color: var(--fd-ring);
 }
 
+.flowdrop-input:disabled {
+  background-color: var(--fd-muted);
+  border-color: var(--fd-border-muted);
+  color: var(--fd-muted-foreground);
+  cursor: not-allowed;
+}
+
+/* Invalid keeps its error border even on hover. */
+.flowdrop-input--invalid,
+.flowdrop-input--invalid:hover:not(:disabled) {
+  border-color: var(--fd-error);
+}
+
+/* Sizes */
 .flowdrop-input--sm {
-  padding: var(--fd-space-2xs) var(--fd-space-xs);
+  padding: 0.375rem 0.625rem;
   font-size: var(--fd-text-xs);
 }
 
 .flowdrop-input--lg {
-  padding: var(--fd-space-md) var(--fd-space-xl);
+  padding: 0.75rem 1rem;
   font-size: var(--fd-text-base);
 }
 
+/* Tabular figures for numeric entry (aligned digits). */
+.flowdrop-input--numeric {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Multiline */
+.flowdrop-input--textarea {
+  min-height: 5rem;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+/* Select: room for the chevron overlay; native arrow removed. */
+.flowdrop-input--select {
+  padding-right: 2.5rem;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+/* Select shell carries the chevron; the <select> keeps the field look. */
+.flowdrop-select-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.flowdrop-select-wrap__icon {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  pointer-events: none;
+  color: var(--fd-muted-foreground);
+  transition: color var(--fd-transition-fast);
+}
+
+.flowdrop-select-wrap:focus-within .flowdrop-select-wrap__icon {
+  color: var(--fd-primary);
+}
+
+.flowdrop-select-wrap__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Input with a leading/trailing affordance (e.g. a search magnifier). */
+.flowdrop-input-wrap {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.flowdrop-input-wrap__icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  color: var(--fd-muted-foreground);
+}
+
+.flowdrop-input-wrap__icon--leading {
+  left: 0.75rem;
+}
+
+.flowdrop-input-wrap__icon--trailing {
+  right: 0.75rem;
+}
+
+.flowdrop-input-wrap__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.flowdrop-input--has-leading {
+  padding-left: 2.25rem;
+}
+
+.flowdrop-input--has-trailing {
+  padding-right: 2.25rem;
+}
+
 /* Card styles */
 .flowdrop-card {
   background-color: var(--fd-card);

package/dist/styles/tokens.css

@@ -253,6 +253,12 @@
   --fd-radius-2xl: 1rem; /* @public  16px */
   --fd-radius-full: 9999px; /* @public */
 
+  /* Corner radius shared by form controls (input/select/textarea) and their
+     group containers (array item boxes, fieldsets, checkbox groups, config
+     sections). Defaults to --fd-radius-lg; themes can tighten it independently
+     of cards/panels — e.g. Drafter sets 2px for crisp drafting corners. */
+  --fd-control-radius: var(--fd-radius-lg); /* @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 */

package/dist/svelte-app.js

@@ -55,6 +55,58 @@ function releaseInstance(fd, isDefault) {
         fd.destroy();
     }
 }
+/**
+ * Resolve endpoint config, port config and categories from mount options and
+ * apply them to the given instance (API context, port-compatibility checker,
+ * categories). Shared by `mountFlowDropApp` and `mountWorkflowEditor`.
+ *
+ * @returns the resolved {@link EndpointConfig} (merged with defaults), which the
+ *   callers forward to their mounted component.
+ */
+async function configureInstance(fd, options) {
+    const { endpointConfig, portConfig, categories, authProvider } = options;
+    // Create endpoint configuration, merging with defaults so all required
+    // endpoints are present.
+    const { defaultEndpointConfig } = await import('./config/endpoints.js');
+    const config = endpointConfig
+        ? {
+            ...defaultEndpointConfig,
+            ...endpointConfig,
+            endpoints: {
+                ...defaultEndpointConfig.endpoints,
+                ...endpointConfig.endpoints
+            }
+        }
+        : defaultEndpointConfig;
+    // Initialize port configuration (fetch from API when not supplied).
+    let finalPortConfig = portConfig;
+    if (!finalPortConfig) {
+        try {
+            finalPortConfig = await fetchPortConfig(config, authProvider);
+        }
+        catch (error) {
+            logger.warn('Failed to fetch port config from API, using default:', error);
+            finalPortConfig = DEFAULT_PORT_CONFIG;
+        }
+    }
+    // Configure this instance's API context and port compatibility checker.
+    fd.api.configure(config, authProvider);
+    fd.portCompatibility.reinitialize(finalPortConfig);
+    // Initialize this instance's categories (fetch from API when not supplied).
+    if (categories) {
+        fd.categories.initialize(categories);
+    }
+    else {
+        try {
+            const fetchedCategories = await fetchCategories(config, authProvider);
+            fd.categories.initialize(fetchedCategories);
+        }
+        catch (error) {
+            logger.warn('Failed to fetch categories from API, using defaults:', error);
+        }
+    }
+    return config;
+}
 /**
  * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
  *
@@ -103,61 +155,14 @@ export async function mountFlowDropApp(container, options = {}) {
     await initializeSettings({
         defaults: initialSettings
     });
-    // Create endpoint configuration
-    let config;
-    if (endpointConfig) {
-        // Merge with default configuration to ensure all required endpoints are present
-        const { defaultEndpointConfig } = await import('./config/endpoints.js');
-        config = {
-            ...defaultEndpointConfig,
-            ...endpointConfig,
-            endpoints: {
-                ...defaultEndpointConfig.endpoints,
-                ...endpointConfig.endpoints
-            }
-        };
-    }
-    else {
-        // Use default configuration if none provided
-        const { defaultEndpointConfig } = await import('./config/endpoints.js');
-        config = defaultEndpointConfig;
-    }
-    // Initialize port configuration
-    let finalPortConfig = portConfig;
-    if (!finalPortConfig && config) {
-        // Try to fetch port configuration from API
-        try {
-            finalPortConfig = await fetchPortConfig(config, authProvider);
-        }
-        catch (error) {
-            logger.warn('Failed to fetch port config from API, using default:', error);
-            finalPortConfig = DEFAULT_PORT_CONFIG;
-        }
-    }
-    else if (!finalPortConfig) {
-        finalPortConfig = DEFAULT_PORT_CONFIG;
-    }
-    // Configure this instance's API context (endpoints + auth provider) so
-    // <App> and services resolve it via getInstance().api.
-    if (config) {
-        fd.api.configure(config, authProvider);
-    }
-    // Re-initialize this instance's port compatibility checker with the resolved
-    // config (it was seeded with DEFAULT_PORT_CONFIG at construction).
-    fd.portCompatibility.reinitialize(finalPortConfig);
-    // Initialize this instance's categories
-    if (categories) {
-        fd.categories.initialize(categories);
-    }
-    else if (config) {
-        try {
-            const fetchedCategories = await fetchCategories(config, authProvider);
-            fd.categories.initialize(fetchedCategories);
-        }
-        catch (error) {
-            logger.warn('Failed to fetch categories from API, using defaults:', error);
-        }
-    }
+    // Resolve and apply endpoint config, port config and categories to this
+    // instance (see configureInstance).
+    const config = await configureInstance(fd, {
+        endpointConfig,
+        portConfig,
+        categories,
+        authProvider
+    });
     // Set up event handler callbacks in this instance's store
     if (eventHandlers?.onDirtyStateChange) {
         fd.workflow.setOnDirtyStateChange(eventHandlers.onDirtyStateChange);
@@ -338,58 +343,14 @@ export async function mountWorkflowEditor(container, options = {}) {
     const { workflow, endpointConfig, portConfig, categories, authProvider, instanceId, builtinEditors } = options;
     // Per-instance state container (see mountFlowDropApp)
     const { fd, isDefault } = acquireInstance(instanceId);
-    // Create endpoint configuration
-    let config;
-    if (endpointConfig) {
-        // Merge with default configuration to ensure all required endpoints are present
-        const { defaultEndpointConfig } = await import('./config/endpoints.js');
-        config = {
-            ...defaultEndpointConfig,
-            ...endpointConfig,
-            endpoints: {
-                ...defaultEndpointConfig.endpoints,
-                ...endpointConfig.endpoints
-            }
-        };
-    }
-    else {
-        // Use default configuration if none provided
-        const { defaultEndpointConfig } = await import('./config/endpoints.js');
-        config = defaultEndpointConfig;
-    }
-    // Initialize port configuration
-    let finalPortConfig = portConfig;
-    if (!finalPortConfig && config) {
-        // Try to fetch port configuration from API
-        try {
-            finalPortConfig = await fetchPortConfig(config, authProvider);
-        }
-        catch (error) {
-            logger.warn('Failed to fetch port config from API, using default:', error);
-            finalPortConfig = DEFAULT_PORT_CONFIG;
-        }
-    }
-    else if (!finalPortConfig) {
-        finalPortConfig = DEFAULT_PORT_CONFIG;
-    }
-    // Configure this instance's API context and port compatibility checker.
-    if (config) {
-        fd.api.configure(config, authProvider);
-    }
-    fd.portCompatibility.reinitialize(finalPortConfig);
-    // Initialize this instance's categories
-    if (categories) {
-        fd.categories.initialize(categories);
-    }
-    else if (config) {
-        try {
-            const fetchedCategories = await fetchCategories(config, authProvider);
-            fd.categories.initialize(fetchedCategories);
-        }
-        catch (error) {
-            logger.warn('Failed to fetch categories from API, using defaults:', error);
-        }
-    }
+    // Resolve and apply endpoint config, port config and categories to this
+    // instance (see configureInstance).
+    const config = await configureInstance(fd, {
+        endpointConfig,
+        portConfig,
+        categories,
+        authProvider
+    });
     // Seed the instance's workflow before mounting so the editor renders it
     // immediately. (1.x accepted this option but silently ignored it.)
     if (workflow) {