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

package/dist/components/playground/ChatInput.svelte

@@ -232,7 +232,6 @@
 
   .chat-input__wrapper:focus-within {
     border-color: var(--fd-primary);
-    box-shadow: 0 0 0 3px var(--fd-primary-muted);
   }
 
   .chat-input__textarea {

package/dist/components/playground/InputCollector.svelte

@@ -369,9 +369,7 @@
   .input-collector__input:focus,
   .input-collector__select:focus,
   .input-collector__textarea:focus {
-    outline: none;
     border-color: var(--fd-primary);
-    box-shadow: 0 0 0 3px var(--fd-primary-muted);
   }
 
   .input-collector__input::placeholder,

package/dist/components/playground/PlaygroundApp.svelte

@@ -52,7 +52,7 @@
     endpointConfig,
     authProvider,
     config = {},
-    showNavbar = true,
+    showNavbar = false,
     navbarTitle,
     primaryActions = [],
     showSettings = true,

package/dist/components/playground/PlaygroundStudio.svelte

@@ -463,11 +463,6 @@
     .playground-studio__back-to-chat:hover {
       background-color: var(--fd-muted);
     }
-
-    .playground-studio__back-to-chat:focus-visible {
-      outline: 2px solid var(--fd-ring);
-      outline-offset: 2px;
-    }
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/playground/mount.d.ts

@@ -252,7 +252,7 @@ export interface PlaygroundAppMountOptions extends Omit<PlaygroundStudioMountOpt
      * @default "standalone"
      */
     mode?: 'standalone' | 'embedded';
-    /** Render the FlowDrop Navbar above the playground (default: true). */
+    /** Render the FlowDrop Navbar above the playground (default: false). */
     showNavbar?: boolean;
     /** Title shown in the navbar. Falls back to the workflow name, then "Playground". */
     navbarTitle?: string;
@@ -268,17 +268,21 @@ export interface PlaygroundAppMountOptions extends Omit<PlaygroundStudioMountOpt
     showSettingsResetButton?: boolean;
 }
 /**
- * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ * Mount the full-page PlaygroundApp (PlaygroundStudio, optionally wrapped in the
+ * FlowDrop Navbar) into a container.
  *
- * Use this when you want the same chrome as the FlowDrop editor — logo,
- * branding, and settings modal — wrapped around the playground. For an
- * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ * The navbar is opt-in (`showNavbar: true`) — matching the editor mount, so
+ * embedding into a page that already has its own header never double-stacks a
+ * header. Pass `showNavbar: true` when FlowDrop owns the whole page and you want
+ * its chrome (logo, branding, settings modal). For a leaner embeddable
+ * split-pane, mountPlaygroundStudio() omits the navbar wrapper entirely.
  *
  * @example
  * ```typescript
  * const app = await mountPlaygroundApp(container, {
  *   workflowId: 'wf-123',
  *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   showNavbar: true,
  *   navbarTitle: 'My Workflow',
  *   primaryActions: [
  *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },

package/dist/playground/mount.js

@@ -287,17 +287,21 @@ export async function mountPlaygroundStudio(container, options) {
     return buildMountedPlayground(svelteApp, workflowId, config, fd, ownsInstance, onSessionStatusChange);
 }
 /**
- * Mount the full-page PlaygroundApp (Navbar + PlaygroundStudio) into a container.
+ * Mount the full-page PlaygroundApp (PlaygroundStudio, optionally wrapped in the
+ * FlowDrop Navbar) into a container.
  *
- * Use this when you want the same chrome as the FlowDrop editor — logo,
- * branding, and settings modal — wrapped around the playground. For an
- * embeddable split-pane without the navbar, use mountPlaygroundStudio().
+ * The navbar is opt-in (`showNavbar: true`) — matching the editor mount, so
+ * embedding into a page that already has its own header never double-stacks a
+ * header. Pass `showNavbar: true` when FlowDrop owns the whole page and you want
+ * its chrome (logo, branding, settings modal). For a leaner embeddable
+ * split-pane, mountPlaygroundStudio() omits the navbar wrapper entirely.
  *
  * @example
  * ```typescript
  * const app = await mountPlaygroundApp(container, {
  *   workflowId: 'wf-123',
  *   endpointConfig: createEndpointConfig('/api/flowdrop'),
+ *   showNavbar: true,
  *   navbarTitle: 'My Workflow',
  *   primaryActions: [
  *     { label: 'Edit', href: '/workflows/wf-123/edit', icon: 'mdi:pencil-outline', variant: 'secondary' },
@@ -307,7 +311,7 @@ export async function mountPlaygroundStudio(container, options) {
  * ```
  */
 export async function mountPlaygroundApp(container, options) {
-    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, authProvider, config = {}, height, width, showNavbar = true, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, instanceId } = options;
+    const { workflowId, workflow, mode = 'standalone', initialSessionId, endpointConfig, authProvider, config = {}, height, width, showNavbar = false, navbarTitle, primaryActions, showSettings = true, settingsCategories, showSettingsSyncButton, showSettingsResetButton, initialPipelineOpen, minChatWidth, initialPipelineWidth, settings: initialSettings, onClose, onSessionNavigate, onSessionStatusChange, instanceId } = options;
     if (!workflowId) {
         throw new Error('workflowId is required for mountPlaygroundApp()');
     }

package/dist/skins/drafter.d.ts

@@ -0,0 +1,30 @@
+import type { FlowDropSkin } from '../types/skin';
+/**
+ * Drafter — a fresh, modern "drafting workspace" skin for the whole editor
+ * environment (see ref-image.png): a fresh white shell around a mint/aqua
+ * canvas with soft cyan/teal technical grid lines, crisp engineering geometry
+ * and clean teal-ink text — not a neutral admin UI and not an all-cyan shell.
+ *
+ * Unlike a canvas-only skin, Drafter themes the entire shell so it reads as one
+ * designed environment:
+ *  - App chrome (navbar, sidebars, inspector, status bars, form fields) stays
+ *    white/near-white for a clean fresh product feel.
+ *  - The mint/aqua personality lives in the canvas, node glass, focus rings,
+ *    selected states and small technical accents.
+ *  - Disabled/read-only surfaces use quiet light grey so state remains obvious.
+ *  - Borders are mostly neutral hairlines; strong/focus borders + node outlines
+ *    are teal/cyan ink (--fd-ring / --fd-border-strong / --fd-node-border).
+ *  - Focus rings are cyan (--fd-ring), not the default blue.
+ *  - Nodes are frosted glass with a faint inner highlight; the minimap + zoom
+ *    controls share the same vocabulary.
+ *  - Note/instruction cards read as cool annotations (translucent tint + slate
+ *    ink border), never as a filled "success" card.
+ *  - Emerald/green is reserved for primary actions, selection and live edges
+ *    (--fd-primary) — it is not used for every outline.
+ *
+ * Data-type port colors and category icon colors are left untouched so they keep
+ * their full color against the draft surface. The square grid is rendered by
+ * WorkflowEditor via config.canvas.grid = 'lines'; --fd-grid-pattern-color
+ * colors it. Ships light + dark variants.
+ */
+export declare const drafterSkin: FlowDropSkin;

package/dist/skins/drafter.js

@@ -0,0 +1,185 @@
+/**
+ * Drafter — a fresh, modern "drafting workspace" skin for the whole editor
+ * environment (see ref-image.png): a fresh white shell around a mint/aqua
+ * canvas with soft cyan/teal technical grid lines, crisp engineering geometry
+ * and clean teal-ink text — not a neutral admin UI and not an all-cyan shell.
+ *
+ * Unlike a canvas-only skin, Drafter themes the entire shell so it reads as one
+ * designed environment:
+ *  - App chrome (navbar, sidebars, inspector, status bars, form fields) stays
+ *    white/near-white for a clean fresh product feel.
+ *  - The mint/aqua personality lives in the canvas, node glass, focus rings,
+ *    selected states and small technical accents.
+ *  - Disabled/read-only surfaces use quiet light grey so state remains obvious.
+ *  - Borders are mostly neutral hairlines; strong/focus borders + node outlines
+ *    are teal/cyan ink (--fd-ring / --fd-border-strong / --fd-node-border).
+ *  - Focus rings are cyan (--fd-ring), not the default blue.
+ *  - Nodes are frosted glass with a faint inner highlight; the minimap + zoom
+ *    controls share the same vocabulary.
+ *  - Note/instruction cards read as cool annotations (translucent tint + slate
+ *    ink border), never as a filled "success" card.
+ *  - Emerald/green is reserved for primary actions, selection and live edges
+ *    (--fd-primary) — it is not used for every outline.
+ *
+ * Data-type port colors and category icon colors are left untouched so they keep
+ * their full color against the draft surface. The square grid is rendered by
+ * WorkflowEditor via config.canvas.grid = 'lines'; --fd-grid-pattern-color
+ * colors it. Ships light + dark variants.
+ */
+export const drafterSkin = {
+    tokens: {
+        /* ----- Shell surfaces: fresh white chrome, not all-cyan ----- */
+        background: '#ffffff',
+        foreground: '#10201c',
+        muted: '#f4f6f7',
+        'muted-foreground': '#5f6f6b',
+        subtle: '#eef3f2',
+        card: '#ffffff',
+        'card-foreground': '#10201c',
+        header: '#ffffff',
+        'header-foreground': '#10201c',
+        'header-gradient': 'linear-gradient(180deg, #ffffff 0%, #fbfefd 100%)',
+        'surface-tint': 'rgba(20, 184, 166, 0.015)',
+        /* White sidebars/inspector with only a whisper of technical glass */
+        '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',
+        'border-strong': 'rgba(15, 118, 110, 0.42)',
+        ring: '#06b6d4',
+        /* ----- Canvas: fresh aqua-mint, soft cyan/teal square grid ----- */
+        'canvas-bg': '#fbfefd',
+        'grid-pattern-color': 'rgba(20, 184, 166, 0.08)',
+        /* ----- Nodes: frosted glass, faint inner highlight ----- */
+        'node-bg': 'rgba(247, 252, 250, 0.7)',
+        'node-header-bg': 'rgba(214, 245, 236, 0.6)',
+        'node-backdrop-filter': 'blur(10px) saturate(1.15)',
+        'node-radius': '2px',
+        'node-shadow': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.6)',
+        'node-shadow-hover': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.85)',
+        'node-border': '#0f766e',
+        'node-border-hover': '#0c5f59',
+        'node-border-width': '1.25px',
+        /* Header divider matches the node outline ink (tracks light/dark node-border) */
+        'node-header-divider-color': 'var(--fd-node-border)',
+        'handle-border': '#ffffff',
+        /* 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. */
+        success: '#0d9488',
+        'success-hover': '#0f766e',
+        info: '#0891b2',
+        'info-hover': '#0e7490',
+        warning: '#d97706',
+        '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)',
+        /* ----- Crisp drafting geometry + flat chrome (2–6px radius, no soft shadow) ----- */
+        'radius-sm': '2px',
+        'radius-md': '3px',
+        'radius-lg': '4px',
+        'radius-xl': '6px',
+        'scrollbar-radius': '0',
+        'shadow-sm': 'none',
+        'shadow-md': 'none',
+        /* ----- Canvas overlays: light, instrument-like ----- */
+        'minimap-bg': 'rgba(255, 255, 255, 0.72)',
+        'minimap-mask-bg': 'rgba(15, 118, 110, 0.08)',
+        '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-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-foreground': '#0f3d36',
+        accent: '#06b6d4',
+        'accent-hover': '#0891b2',
+        'accent-foreground': '#ffffff',
+        'accent-muted': 'rgba(6, 182, 212, 0.12)',
+        primary: '#10b981',
+        'primary-hover': '#059669',
+        'primary-foreground': '#ffffff',
+        'primary-muted': 'rgba(16, 185, 129, 0.14)'
+    },
+    darkTokens: {
+        /* ----- Shell surfaces: deep teal-slate glass ----- */
+        background: '#0e2421',
+        foreground: '#d8f0ea',
+        muted: 'rgba(20, 60, 54, 0.6)',
+        'muted-foreground': '#8fb3aa',
+        subtle: 'rgba(13, 47, 44, 0.7)',
+        card: 'rgba(18, 42, 38, 0.96)',
+        'card-foreground': '#d8f0ea',
+        header: 'rgba(13, 40, 37, 0.7)',
+        'header-foreground': '#d8f0ea',
+        'header-gradient': 'linear-gradient(180deg, rgba(17, 42, 38, 0.9) 0%, rgba(12, 33, 30, 0.9) 100%)',
+        'surface-tint': 'rgba(45, 212, 191, 0.04)',
+        'panel-bg': 'rgba(14, 36, 33, 0.8)',
+        'panel-backdrop-filter': 'blur(14px) saturate(1.2)',
+        backdrop: 'rgba(11, 31, 28, 0.8)',
+        border: 'rgba(45, 212, 191, 0.22)',
+        'border-muted': 'rgba(45, 212, 191, 0.12)',
+        'border-strong': 'rgba(45, 212, 191, 0.4)',
+        ring: '#22d3ee',
+        'canvas-bg': '#0b1f1c',
+        'grid-pattern-color': 'rgba(45, 212, 191, 0.16)',
+        'node-bg': 'rgba(17, 38, 35, 0.62)',
+        'node-header-bg': 'rgba(13, 47, 44, 0.6)',
+        'node-backdrop-filter': 'blur(10px) saturate(1.2)',
+        'node-shadow': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.08)',
+        'node-shadow-hover': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.14)',
+        'node-border': '#0d9488',
+        'node-border-hover': '#2dd4bf',
+        'handle-border': '#0b1f1c',
+        'note-border': '#7d96b0',
+        'note-border-hover': '#9fb4cb',
+        success: '#2dd4bf',
+        'success-hover': '#5eead4',
+        info: '#22d3ee',
+        'info-hover': '#67e8f9',
+        warning: '#fbbf24',
+        '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)',
+        '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-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-foreground': '#d8f0ea',
+        accent: '#22d3ee',
+        'accent-hover': '#67e8f9',
+        'accent-foreground': '#03291c',
+        'accent-muted': 'rgba(34, 211, 238, 0.14)',
+        primary: '#34d399',
+        'primary-hover': '#6ee7b7',
+        'primary-foreground': '#03291c',
+        'primary-muted': 'rgba(52, 211, 153, 0.16)'
+    }
+};

package/dist/skins/index.d.ts

@@ -1,6 +1,7 @@
 import type { FlowDropSkin, FlowDropSkinName } from '../types/skin';
 import { defaultSkin } from './default';
 import { slateSkin } from './slate';
+import { drafterSkin } from './drafter';
 /**
  * Resolve a skin prop to a complete FlowDropSkin object.
  *
@@ -10,4 +11,4 @@ import { slateSkin } from './slate';
  *   → minimal skin tokens + { primary: '#e11d48' }
  */
 export declare function resolveSkin(skin: FlowDropSkin | FlowDropSkinName | undefined): FlowDropSkin;
-export { defaultSkin, slateSkin };
+export { defaultSkin, slateSkin, drafterSkin };

package/dist/skins/index.js

@@ -1,8 +1,10 @@
 import { defaultSkin } from './default';
 import { slateSkin } from './slate';
+import { drafterSkin } from './drafter';
 const builtinSkins = {
     default: defaultSkin,
-    slate: slateSkin
+    slate: slateSkin,
+    drafter: drafterSkin
 };
 /**
  * Resolve a skin prop to a complete FlowDropSkin object.
@@ -27,4 +29,4 @@ export function resolveSkin(skin) {
     }
     return skin;
 }
-export { defaultSkin, slateSkin };
+export { defaultSkin, slateSkin, drafterSkin };

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 */
@@ -135,10 +167,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);
@@ -211,10 +240,9 @@
     box-shadow var(--fd-transition-normal);
 }
 
+/* Active-field hint only; the focus ring itself is centralized (top of file). */
 .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--sm {
@@ -1092,6 +1120,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 */
@@ -307,6 +349,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 +367,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 +444,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

@@ -335,7 +335,7 @@ 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
@@ -401,7 +401,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;

package/dist/themes/drafter.js

@@ -0,0 +1,15 @@
+import { drafterSkin } from '../skins/drafter.js';
+export const drafterTheme = {
+    name: 'drafter',
+    skin: drafterSkin,
+    config: {
+        sidebar: {
+            defaultOpen: true,
+            categoriesDefaultOpen: false
+        },
+        // Blueprint square line grid (any theme can opt into a grid variant here)
+        canvas: {
+            grid: 'lines'
+        }
+    }
+};

package/dist/themes/index.d.ts

@@ -1,6 +1,7 @@
 import type { FlowDropTheme, FlowDropThemeName } from '../types/theme.js';
 import { defaultTheme } from './default.js';
 import { minimalTheme } from './minimal.js';
+import { drafterTheme } from './drafter.js';
 /**
  * Resolve a theme prop to a complete FlowDropTheme object.
  *
@@ -10,4 +11,4 @@ import { minimalTheme } from './minimal.js';
  *   → minimal theme + { skin.tokens.primary: '#e11d48' }
  */
 export declare function resolveTheme(theme: FlowDropTheme | FlowDropThemeName | undefined): FlowDropTheme;
-export { defaultTheme, minimalTheme };
+export { defaultTheme, minimalTheme, drafterTheme };

package/dist/themes/index.js

@@ -1,8 +1,10 @@
 import { defaultTheme } from './default.js';
 import { minimalTheme } from './minimal.js';
+import { drafterTheme } from './drafter.js';
 const builtinThemes = {
     default: defaultTheme,
-    minimal: minimalTheme
+    minimal: minimalTheme,
+    drafter: drafterTheme
 };
 /**
  * Resolve a theme prop to a complete FlowDropTheme object.
@@ -35,10 +37,14 @@ export function resolveTheme(theme) {
                 sidebar: {
                     ...base.config?.sidebar,
                     ...theme.config?.sidebar
+                },
+                canvas: {
+                    ...base.config?.canvas,
+                    ...theme.config?.canvas
                 }
             }
         };
     }
     return theme;
 }
-export { defaultTheme, minimalTheme };
+export { defaultTheme, minimalTheme, drafterTheme };