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

package/dist/registry/nodeComponentRegistry.d.ts

@@ -16,9 +16,10 @@ import { BaseRegistry } from './BaseRegistry.svelte.js';
  * Any component registered in the registry must be compatible with these props.
  */
 export interface NodeComponentProps {
+    /** The SvelteFlow node id */
+    id: string;
     /** Node data containing label, config, metadata, executionInfo */
     data: WorkflowNode['data'] & {
-        nodeId?: string;
         onConfigOpen?: (node: {
             id: string;
             type: string;

package/dist/services/dynamicSchemaService.d.ts

@@ -33,7 +33,7 @@ export interface DynamicSchemaResult {
  * const endpoint: DynamicSchemaEndpoint = {
  *   url: "/api/nodes/{nodeTypeId}/schema",
  *   method: "GET",
- *   parameterMapping: { nodeTypeId: "metadata.id" }
+ *   parameterMapping: { nodeTypeId: "metadata.node_type_id" }
  * };
  *
  * const result = await fetchDynamicSchema(endpoint, node);
@@ -56,7 +56,7 @@ export declare function fetchDynamicSchema(endpointConfig: EndpointConfig | null
  * ```typescript
  * const link: ExternalEditLink = {
  *   url: "https://admin.example.com/nodes/{nodeTypeId}/edit/{instanceId}",
- *   parameterMapping: { nodeTypeId: "metadata.id", instanceId: "id" }
+ *   parameterMapping: { nodeTypeId: "metadata.node_type_id", instanceId: "id" }
  * };
  *
  * const url = resolveExternalEditUrl(link, node, workflowId);

package/dist/services/dynamicSchemaService.js

@@ -15,16 +15,16 @@ const schemaCache = new Map();
 const DEFAULT_CACHE_TTL = DEFAULT_CACHE_TTL_MS;
 /**
  * Resolves a template variable path from the node context.
- * Supports dot-notation paths like "metadata.id", "config.apiKey", "id"
+ * Supports dot-notation paths like "metadata.node_type_id", "config.apiKey", "id"
  *
  * @param context - The node context containing all available data
- * @param path - Dot-notation path to resolve (e.g., "metadata.id")
+ * @param path - Dot-notation path to resolve (e.g., "metadata.node_type_id")
  * @returns The resolved value as a string, or undefined if not found
  *
  * @example
  * ```typescript
- * const context = { id: "node-1", metadata: { id: "llm-node" } };
- * resolveVariablePath(context, "metadata.id"); // Returns "llm-node"
+ * const context = { id: "node-1", metadata: { node_type_id: "llm-node" } };
+ * resolveVariablePath(context, "metadata.node_type_id"); // Returns "llm-node"
  * resolveVariablePath(context, "id"); // Returns "node-1"
  * ```
  */
@@ -60,8 +60,8 @@ function resolveVariablePath(context, path) {
  * @example
  * ```typescript
  * const url = "/api/nodes/{nodeTypeId}/schema?instance={instanceId}";
- * const mapping = { nodeTypeId: "metadata.id", instanceId: "id" };
- * const context = { id: "node-1", metadata: { id: "llm-node" } };
+ * const mapping = { nodeTypeId: "metadata.node_type_id", instanceId: "id" };
+ * const context = { id: "node-1", metadata: { node_type_id: "llm-node" } };
  * resolveTemplate(url, mapping, context);
  * // Returns "/api/nodes/llm-node/schema?instance=node-1"
  * ```
@@ -127,7 +127,7 @@ function isCacheValid(entry, ttl = DEFAULT_CACHE_TTL) {
  * const endpoint: DynamicSchemaEndpoint = {
  *   url: "/api/nodes/{nodeTypeId}/schema",
  *   method: "GET",
- *   parameterMapping: { nodeTypeId: "metadata.id" }
+ *   parameterMapping: { nodeTypeId: "metadata.node_type_id" }
  * };
  *
  * const result = await fetchDynamicSchema(endpoint, node);
@@ -279,7 +279,7 @@ export async function fetchDynamicSchema(endpointConfig, endpoint, node, workflo
  * ```typescript
  * const link: ExternalEditLink = {
  *   url: "https://admin.example.com/nodes/{nodeTypeId}/edit/{instanceId}",
- *   parameterMapping: { nodeTypeId: "metadata.id", instanceId: "id" }
+ *   parameterMapping: { nodeTypeId: "metadata.node_type_id", instanceId: "id" }
  * };
  *
  * const url = resolveExternalEditUrl(link, node, workflowId);

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/stores/playgroundStore.svelte.js

@@ -212,7 +212,7 @@ export class PlaygroundStore {
         // Find input nodes in the workflow
         workflow.nodes.forEach((node) => {
             const category = node.data.metadata?.category;
-            const nodeTypeId = node.data.metadata?.id ?? node.type;
+            const nodeTypeId = node.data.metadata?.node_type_id ?? node.type;
             // Check if this is an input-type node
             // The category can be "inputs" (standard) or variations like "input"
             const categoryStr = String(category || '');

package/dist/stores/workflowStore.svelte.js

@@ -94,23 +94,6 @@ function hasWorkflowDataChanged(currentWorkflow, newNodes, newEdges) {
     }
     return false;
 }
-/**
- * Heal nodes that are missing `data.nodeId`.
- *
- * Node components derive their handle IDs from `data.nodeId` — a node without
- * it renders with zero handles and SvelteFlow silently drops every edge
- * anchored to it, making an intact graph look corrupted on the canvas.
- * `data.nodeId` always equals the node's own `id`, so it is safe to restore.
- */
-function healMissingNodeIds(workflow) {
-    if (!workflow.nodes?.some((node) => !node.data.nodeId)) {
-        return workflow;
-    }
-    return {
-        ...workflow,
-        nodes: workflow.nodes.map((node) => node.data.nodeId ? node : { ...node, data: { ...node.data, nodeId: node.id } })
-    };
-}
 // =========================================================================
 // WorkflowStore (per-instance reactive state)
 // =========================================================================
@@ -373,7 +356,6 @@ export class WorkflowStore {
      */
     initialize(workflow) {
         workflow = normalizeWorkflowMetadata(workflow);
-        workflow = healMissingNodeIds(workflow);
         this.#workflow = workflow;
         // Reset version counters — workflow is "clean" after initialization
         this.#editVersion = 0;

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 */