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

package/dist/styles/base.css

@@ -8,6 +8,36 @@
   box-sizing: border-box;
 }
 
+/* Drop the UA default margin on paragraphs so block text sits on the grid;
+   contexts that want spacing (e.g. .markdown-display p) opt back in. */
+p {
+  margin: 0;
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   Standardized focus ring — THE single source of truth.
+
+   The entire library draws ONE focus ring: a solid outline in --fd-ring, sized
+   by --fd-ring-width / --fd-ring-offset. Components must NOT declare their own
+   focus rings (no per-element :focus outline/box-shadow). :focus-visible keeps
+   it to keyboard navigation; browsers still surface it for text fields on
+   click. Scoped to the library roots so it never leaks into the host app.
+   ─────────────────────────────────────────────────────────────────────────── */
+.flowdrop-root :focus-visible,
+.svelte-flow :focus-visible {
+  outline: var(--fd-ring-width) solid var(--fd-ring);
+  outline-offset: var(--fd-ring-offset);
+}
+
+/* xyflow hard-disables the node wrapper outline
+   (.svelte-flow__node.selectable:focus-visible { outline: none }). That wrapper
+   is our single focusable node element, so re-assert the standard ring at
+   matching specificity. */
+.svelte-flow .svelte-flow__node.selectable:focus-visible {
+  outline: var(--fd-ring-width) solid var(--fd-ring);
+  outline-offset: var(--fd-ring-offset);
+}
+
 /* Layout utilities */
 .flowdrop-layout {
   display: flex;
@@ -93,9 +123,11 @@
   background-color: var(--fd-primary);
 }
 
+/* Handles are tabindex="-1" (programmatic focus only, so :focus-visible won't
+   fire) — keep a :focus ring, but draw it from the same tokens. */
 .svelte-flow .svelte-flow__handle:focus {
-  outline: 2px solid var(--fd-ring);
-  outline-offset: 2px;
+  outline: var(--fd-ring-width) solid var(--fd-ring);
+  outline-offset: var(--fd-ring-offset);
 }
 
 /* Centralized handle edge positioning — offset derived from --fd-handle-size */
@@ -117,6 +149,7 @@
   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);
@@ -135,10 +168,7 @@
   border-color: var(--fd-border);
 }
 
-.flowdrop-btn:focus {
-  outline: 2px solid var(--fd-ring);
-  outline-offset: 2px;
-}
+/* Focus ring is centralized (see top of file). */
 
 .flowdrop-btn--primary {
   background-color: var(--fd-primary);
@@ -195,38 +225,278 @@
   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 {
-  outline: none;
-  border-color: var(--fd-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  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);
@@ -1092,6 +1362,7 @@
   --fd-notes-node-width: 500px;
   --fd-notes-node-min-width: 250px;
   --fd-notes-node-max-width: 500px;
+  --fd-notes-node-min-height: 200px;
   --fd-notes-node-backdrop-filter: blur(8px);
 }
 

package/dist/styles/tokens.css

@@ -127,6 +127,13 @@
   --fd-card: #ffffff; /* @public */
   --fd-card-foreground: var(--_gray-9); /* @public */
 
+  /* ----- CHROME PANELS (sidebar + config/inspector panel) -----
+     Large editor-shell panels read from these so a theme can make them
+     glassy/translucent without touching every other surface. Default to the
+     opaque app background + no blur, so existing themes are unchanged. */
+  --fd-panel-bg: var(--fd-background); /* @public  sidebar + config panel surface */
+  --fd-panel-backdrop-filter: none; /* @public  glass/frost behind translucent panels; e.g. blur(14px) */
+
   /* ----- HEADER (Distinct header styling) ----- */
   --fd-header: #f5f7fa; /* @public */
   --fd-header-foreground: var(--_gray-8); /* @public */
@@ -140,10 +147,45 @@
   --fd-border-muted: var(--_gray-3); /* @public */
   --fd-border-strong: var(--_gray-5); /* @public */
   --fd-ring: var(--_blue-2); /* @public */
+  /* Focus-ring geometry. The whole library draws ONE focus ring from these
+     (see base.css). Color is theme-aware (--fd-ring); width/offset are not, so
+     they live only here. */
+  --fd-ring-width: 2px; /* @public */
+  --fd-ring-offset: 2px; /* @public */
+
+  /* ----- EDITOR CANVAS & NODE SURFACES -----
+     Scoped surfaces for the graph editor, kept separate from the general app
+     "chrome" (navbar, sidebars, panels) so a theme can restyle the canvas/nodes
+     without tinting the rest of the UI. Each defaults to its chrome equivalent,
+     so overriding the base token (e.g. --fd-card) still cascades here. */
+  --fd-canvas-bg: var(--fd-background); /* @public  editor canvas (grid) background */
+  --fd-node-bg: var(--fd-card); /* @public  node body surface */
+  --fd-node-header-bg: var(--fd-header); /* @public  node header surface */
+  --fd-node-radius: var(
+    --fd-radius-xl
+  ); /* @public  node card corner radius; lower for sharper corners */
+  --fd-node-shadow: var(
+    --fd-shadow-md
+  ); /* @public  node resting elevation; 'none' for a flat look */
+  --fd-node-shadow-hover: var(
+    --fd-shadow-lg
+  ); /* @public  node hover/selected elevation; 'none' for a flat look */
+  --fd-node-backdrop-filter: none; /* @public  glass/frost effect behind translucent node bodies; e.g. blur(10px) */
 
   /* ----- NODE BORDERS (Higher contrast for visibility when zoomed out) ----- */
   --fd-node-border: var(--_gray-5); /* @public */
   --fd-node-border-hover: var(--_gray-6); /* @public */
+  --fd-node-border-width: 1.5px; /* @public  node outline thickness; lower for a thinner look */
+  /* Note nodes can carry their own outline so themes can read them as
+     informational/annotation rather than a process node. Defaults to the
+     shared node border so existing themes are unchanged. */
+  --fd-note-border: var(--fd-node-border); /* @public  notes-node outline */
+  --fd-note-border-hover: var(--fd-node-border-hover); /* @public  notes-node outline (hover) */
+
+  /* ----- CANVAS GRID (pattern color for the editor background grid; any theme
+     can recolor whichever grid variant it picks via config.canvas.grid).
+     Default matches xyflow's dot-grid color so the default theme is unchanged. */
+  --fd-grid-pattern-color: #91919a; /* @public */
 
   /* ----- PRIMARY (Interactive/Brand) ----- */
   --fd-primary: var(--_blue-2); /* @public */
@@ -211,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 */
@@ -307,6 +355,7 @@
   --fd-scrollbar-thumb: var(--_gray-4); /* @internal */
   --fd-scrollbar-thumb-hover: var(--_gray-5); /* @internal */
   --fd-scrollbar-track: var(--_gray-2); /* @internal */
+  --fd-scrollbar-radius: 4px; /* @public  scrollbar thumb/track corner radius; 0 for square */
 
   /* ----- BACKDROP/OVERLAY ----- */
   --fd-backdrop: rgba(255, 255, 255, 0.8); /* @internal */
@@ -324,11 +373,17 @@
 
   /* ----- 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-default-width: 280px; /* @public */
   --fd-node-header-height: 60px; /* @public */
-  --fd-node-header-title-height: 40px; /* @internal */
+  --fd-node-header-title-height: 40px; /* @internal — fits icon + up to 2 text lines */
   --fd-node-header-desc-line: 20px; /* @internal */
   --fd-node-header-gap: 10px; /* @internal */
+  /* Divider absorbed into header bottom padding so header height stays on the
+     20px grid regardless of border thickness. */
+  --fd-node-header-divider-width: 1px; /* @public */
+  --fd-node-header-divider-color: var(
+    --fd-border-muted
+  ); /* @public — header bottom divider color */
   --fd-node-port-row-height: 20px; /* @internal */
   --fd-node-terminal-size: 80px; /* @public */
   --fd-node-square-size: 80px; /* @public */
@@ -395,6 +450,9 @@
   --fd-node-border: #4a4a52;
   --fd-node-border-hover: #5a5a62;
 
+  /* ----- CANVAS GRID (matches xyflow's dark dot-grid color) ----- */
+  --fd-grid-pattern-color: #777;
+
   /* ----- NODE COLORS (port type labels/badges - lighter for readability on dark surfaces) ----- */
   --fd-node-emerald: #34d399;
   --fd-node-blue: #60a5fa;

package/dist/svelte-app.d.ts

@@ -204,6 +204,12 @@ export declare function mountWorkflowEditor(container: HTMLElement, options?: {
     authProvider?: AuthProvider;
     /** Instance identifier — see {@link FlowDropMountOptions.instanceId}. */
     instanceId?: string;
+    /**
+     * Register the built-in markdown/code/template editors. Batteries-included
+     * by default (chunks load lazily). See {@link FlowDropFeatures.builtinEditors}.
+     * @default true
+     */
+    builtinEditors?: boolean;
 }): Promise<MountedFlowDropApp>;
 /**
  * Unmount a FlowDrop app

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);
@@ -335,61 +340,17 @@ export async function mountFlowDropApp(container, options = {}) {
  * @returns Promise resolving to a MountedFlowDropApp instance
  */
 export async function mountWorkflowEditor(container, options = {}) {
-    const { workflow, endpointConfig, portConfig, categories, authProvider, instanceId } = 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) {
@@ -401,7 +362,8 @@ export async function mountWorkflowEditor(container, options = {}) {
         props: {
             instance: fd,
             endpointConfig: config,
-            authProvider
+            authProvider,
+            builtinEditors
         }
     });
     // Create the mounted app interface (simpler version)

package/dist/themes/drafter.d.ts

@@ -0,0 +1,2 @@
+import type { FlowDropTheme } from '../types/theme.js';
+export declare const drafterTheme: FlowDropTheme;