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

package/dist/components/SettingsPanel.svelte

@@ -198,7 +198,8 @@
           description: 'Visual style and layout of the editor',
           oneOf: [
             { const: 'default', title: 'Default' },
-            { const: 'minimal', title: 'Minimal' }
+            { const: 'minimal', title: 'Minimal' },
+            { const: 'drafter', title: 'Drafter' }
           ],
           default: 'default'
         }
@@ -538,11 +539,6 @@
     color: var(--fd-primary-foreground);
   }
 
-  .flowdrop-settings-panel__tab:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
   :global(.flowdrop-settings-panel__tab-icon) {
     font-size: var(--fd-text-base);
   }

package/dist/components/Textarea.svelte

@@ -0,0 +1,39 @@
+<!--
+  Textarea — typed wrapper over the shared `.flowdrop-input` system (base.css),
+  with the `.flowdrop-input--textarea` modifier (min-height + vertical resize).
+
+  Shares the exact field look of Input/Select so multiline fields render
+  identically. All styling lives in base.css. Native attributes (value,
+  placeholder, rows, disabled, id, aria-*, oninput…) forward to <textarea>.
+
+  Internal for now; see Button.svelte / Input.svelte for the pattern.
+-->
+
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLTextareaAttributes {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the textarea */
+    class?: string;
+  }
+
+  let { size = 'md', invalid = false, class: className = '', ...rest }: Props = $props();
+
+  const textareaClass = $derived(
+    [
+      'flowdrop-input',
+      'flowdrop-input--textarea',
+      size === 'md' ? '' : `flowdrop-input--${size}`,
+      invalid ? 'flowdrop-input--invalid' : '',
+      className
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<textarea class={textareaClass} {...rest}></textarea>

package/dist/components/Textarea.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface Props extends HTMLTextareaAttributes {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the textarea */
+    class?: string;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/ThemeToggle.svelte

@@ -1,12 +1,15 @@
 <!--
   Theme Toggle Component
-  A button that cycles through light, dark, and auto theme modes
-  Displays appropriate icon for current theme state
-  Styled with BEM syntax
+  A button that cycles through light, dark, and auto theme modes.
+  Displays the icon for the current theme state.
+
+  Built on the shared Button primitive so it stays visually and dimensionally
+  aligned with every other control (height, focus ring, hover) for free.
 -->
 
 <script lang="ts">
   import Icon from '@iconify/svelte';
+  import Button from './Button.svelte';
   import { getTheme, getResolvedTheme, cycleTheme } from '../stores/settingsStore.svelte.js';
   import type { ThemePreference } from '../types/settings.js';
 
@@ -47,7 +50,7 @@
   }
 
   /**
-   * Get accessible label for the current theme
+   * Get the label text for the current theme
    */
   const themeLabel = $derived(getThemeLabel(getTheme()));
 
@@ -80,105 +83,23 @@
     const next = currentTheme === 'light' ? 'Dark' : 'Auto';
     return `Theme: ${currentTheme === 'light' ? 'Light' : 'Dark'}. Click to switch to ${next}`;
   }
-
-  /**
-   * Handle click to cycle theme
-   */
-  function handleClick(): void {
-    cycleTheme();
-  }
-
-  /**
-   * Handle keyboard events for accessibility
-   */
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      cycleTheme();
-    }
-  }
 </script>
 
-<button
-  class="flowdrop-theme-toggle flowdrop-theme-toggle--{size} {className}"
-  onclick={handleClick}
-  onkeydown={handleKeydown}
+<Button
+  variant="outline"
+  {size}
+  class={className}
   title={tooltipText}
-  aria-label={tooltipText}
-  type="button"
+  ariaLabel={tooltipText}
+  onclick={cycleTheme}
 >
-  <span class="flowdrop-theme-toggle__icon">
-    <Icon icon={themeIcon} />
-  </span>
+  <Icon icon={themeIcon} />
   {#if showLabel}
     <span class="flowdrop-theme-toggle__label">{themeLabel}</span>
   {/if}
-</button>
+</Button>
 
 <style>
-  .flowdrop-theme-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--fd-space-xs);
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-md);
-    background-color: var(--fd-background);
-    color: var(--fd-foreground);
-    cursor: pointer;
-    transition: all var(--fd-transition-normal);
-    font-family: inherit;
-  }
-
-  .flowdrop-theme-toggle:hover {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-strong);
-  }
-
-  .flowdrop-theme-toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
-  .flowdrop-theme-toggle:active {
-    transform: scale(0.98);
-  }
-
-  /* Size variants */
-  .flowdrop-theme-toggle--sm {
-    padding: var(--fd-space-3xs) var(--fd-space-xs);
-    font-size: var(--fd-text-xs);
-  }
-
-  .flowdrop-theme-toggle--sm .flowdrop-theme-toggle__icon {
-    font-size: var(--fd-text-sm);
-  }
-
-  .flowdrop-theme-toggle--md {
-    padding: var(--fd-space-xs) var(--fd-space-md);
-    font-size: var(--fd-text-sm);
-  }
-
-  .flowdrop-theme-toggle--md .flowdrop-theme-toggle__icon {
-    font-size: var(--fd-text-base);
-  }
-
-  .flowdrop-theme-toggle--lg {
-    padding: var(--fd-space-md) var(--fd-space-xl);
-    font-size: var(--fd-text-base);
-  }
-
-  .flowdrop-theme-toggle--lg .flowdrop-theme-toggle__icon {
-    font-size: var(--fd-text-lg);
-  }
-
-  .flowdrop-theme-toggle__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
-
   .flowdrop-theme-toggle__label {
     font-weight: 500;
   }

package/dist/components/UniversalNode.svelte

@@ -17,6 +17,9 @@
 
   const fd = getInstance();
 
+  // Element ref used only to reach xyflow's node wrapper (our ancestor).
+  let universalNodeEl: HTMLDivElement;
+
   let {
     data,
     selected = false
@@ -61,6 +64,34 @@
     shouldShowNodeStatus(executionInfo) && resolvedComponentName !== 'note'
   );
 
+  // Keyboard activation lives on xyflow's node wrapper — the single focusable,
+  // arrow-movable element SvelteFlow manages. Because the wrapper is our
+  // ancestor, its keydown events never bubble down into our markup, so we bind
+  // directly to it. Enter/Space opens the node's config, mirroring the
+  // double-click (and single-click for square/atom) mouse paths. Node selection
+  // and arrow-key movement remain SvelteFlow's job.
+  $effect(() => {
+    const wrapper = universalNodeEl?.closest<HTMLElement>('.svelte-flow__node');
+    if (!wrapper) return;
+
+    function onWrapperKeydown(event: KeyboardEvent): void {
+      // Only when the node itself is focused — not an inner field (e.g. an
+      // editable note) — so we don't hijack typing.
+      if (event.target !== wrapper) return;
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        data.onConfigOpen?.({
+          id: data.nodeId ?? 'unknown',
+          type: resolvedComponentName,
+          data
+        });
+      }
+    }
+
+    wrapper.addEventListener('keydown', onWrapperKeydown);
+    return () => wrapper.removeEventListener('keydown', onWrapperKeydown);
+  });
+
   /**
    * Get the node component for the given type from the registry.
    *
@@ -129,7 +160,7 @@
   }
 </script>
 
-<div class="universal-node">
+<div class="universal-node" bind:this={universalNodeEl}>
   <!-- Render the node component dynamically (Svelte 5 dynamic component syntax) -->
   {#if nodeComponent}
     <!-- Svelte 5 dynamic component limitation; reactivity maintained via $derived -->

package/dist/components/WorkflowEditor.svelte

@@ -26,7 +26,7 @@
   import CanvasController from './CanvasController.svelte';
   import FlowDropZone from './FlowDropZone.svelte';
   import EdgeRefresher from './EdgeRefresher.svelte';
-  import { tick, untrack } from 'svelte';
+  import { tick, untrack, onMount } from 'svelte';
   import type { EndpointConfig } from '../config/endpoints.js';
   import type { AuthProvider } from '../types/auth.js';
   import ConnectionLine from './ConnectionLine.svelte';
@@ -34,6 +34,7 @@
   import { m } from '../messages/index.js';
   import { provideInstance } from '../stores/getInstance.svelte.js';
   import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
+  import type { FlowDropGridVariant } from '../types/theme.js';
   import UniversalNode from './UniversalNode.svelte';
   import {
     EdgeStylingHelper,
@@ -56,7 +57,8 @@
   import { logger } from '../utils/logger.js';
   import { validateWorkflowData } from '../utils/validation.js';
   import { createEditorStateMachine } from '../stores/editorStateMachine.svelte.js';
-  import Icon from '@iconify/svelte';
+  import CanvasIconButton from './CanvasIconButton.svelte';
+  import CommandLineIcon from './icons/CommandLineIcon.svelte';
   import { DEV } from 'esm-env';
 
   interface Props {
@@ -85,6 +87,23 @@
     onToggleConsole?: () => void;
     /** Per-instance state container (created by mount functions). Defaults to the page-default instance. */
     instance?: FlowDropInstance;
+    /**
+     * Canvas background grid pattern. Supplied by App from the active theme's
+     * `config.canvas.grid` default; any theme can opt into 'lines' / 'cross'.
+     * Color is driven separately by the `--fd-grid-pattern-color` token.
+     * @default 'dots'
+     */
+    gridVariant?: FlowDropGridVariant;
+    /**
+     * Register the built-in heavy form editors (markdown / code / template)
+     * on this instance's field registry. Batteries-included by default — node
+     * config fields with `format: 'markdown' | 'code' | 'template'` render real
+     * CodeMirror editors. The chunks are code-split (loaded lazily here), so
+     * the `/editor` static bundle stays light. Set `false` to keep the textarea
+     * fallback or register your own field components. See `features.builtinEditors`.
+     * @default true
+     */
+    builtinEditors?: boolean;
   }
 
   let props: Props = $props();
@@ -95,10 +114,36 @@
   // svelte-ignore state_referenced_locally
   const fd = provideInstance(props.instance);
 
+  // Batteries-included: register the built-in heavy form editors (markdown /
+  // code / template) on this instance's field registry so node config fields
+  // render real editors out of the box. Dynamic import is deliberate — the
+  // bundle guard only inspects *static* imports, and `form/markdown`/`form/code`
+  // statically re-export their CodeMirror components, so a static import here
+  // would leak CodeMirror into the light `/editor` entry. Importing lazily on
+  // mount keeps the static graph clean while the chunks load on demand.
+  // register*Field is idempotent per registry, so re-mounts are safe.
+  onMount(() => {
+    if (props.builtinEditors === false) return;
+    void (async () => {
+      const [code, markdown] = await Promise.all([
+        import('../form/code.js'),
+        import('../form/markdown.js')
+      ]);
+      code.registerCodeEditorField(fd.fields);
+      code.registerTemplateEditorField(fd.fields);
+      markdown.registerMarkdownEditorField(fd.fields);
+    })();
+  });
+
   // `mode` is the public API; the canvas only needs to know whether editing is
   // enabled. 'readonly' and 'locked' both disable interaction identically.
   const canvasEditable = $derived((props.mode ?? 'edit') === 'edit');
 
+  // Canvas grid pattern, supplied by the active theme's config.canvas.grid
+  // (App passes it down). BackgroundVariant's enum values are the same strings
+  // ('dots' | 'lines' | 'cross'), so the theme config maps straight through.
+  const gridVariant = $derived((props.gridVariant ?? 'dots') as BackgroundVariant);
+
   // ---------------------------------------------------------------------------
   // Editor State Machine
   // Centralizes reactive guards — replaces scattered boolean flags
@@ -875,23 +920,26 @@
             >
               <Controls />
               {#if canvasEditable && props.onToggleConsole}
-                <button
+                <CanvasIconButton
                   class="flowdrop-console-toggle"
-                  class:flowdrop-console-toggle--active={props.consoleOpen}
+                  label={m().layout.commandConsole}
+                  active={props.consoleOpen}
                   onclick={props.onToggleConsole}
-                  aria-label={m().layout.commandConsole}
-                  title={m().layout.commandConsole}
-                  type="button"
                 >
-                  <Icon icon="heroicons:command-line" width="18" height="18" />
-                </button>
+                  {#snippet icon()}
+                    <CommandLineIcon />
+                  {/snippet}
+                </CanvasIconButton>
               {/if}
               <!-- Always render Background for consistent bg color in dark/light mode -->
               <Background
                 gap={getEditorSettings().gridSize}
-                bgColor="var(--fd-background)"
-                variant={BackgroundVariant.Dots}
-                patternColor={getEditorSettings().showGrid ? undefined : 'transparent'}
+                bgColor="var(--fd-canvas-bg)"
+                variant={gridVariant}
+                lineWidth={1}
+                patternColor={getEditorSettings().showGrid
+                  ? 'var(--fd-grid-pattern-color)'
+                  : 'transparent'}
               />
               {#if getEditorSettings().showMinimap}
                 <MiniMap />
@@ -1006,48 +1054,11 @@
     justify-content: space-between;
   }
 
-  .flowdrop-console-toggle {
-    position: absolute;
+  /* Console toggle — placement only; visuals live in CanvasIconButton */
+  :global(.flowdrop-console-toggle) {
     bottom: 140px;
     left: 12px;
     z-index: 5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-md);
-    background-color: var(--fd-background);
-    color: var(--fd-muted-foreground);
-    cursor: pointer;
-    box-shadow: var(--fd-shadow-sm);
-    transition:
-      color var(--fd-transition-fast),
-      background-color var(--fd-transition-fast),
-      box-shadow var(--fd-transition-fast);
-  }
-
-  .flowdrop-console-toggle:hover {
-    color: var(--fd-foreground);
-    background-color: var(--fd-subtle);
-    box-shadow: var(--fd-shadow-md);
-  }
-
-  .flowdrop-console-toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--fd-ring);
-  }
-
-  .flowdrop-console-toggle--active {
-    color: var(--fd-primary);
-    background-color: var(--fd-primary-muted);
-    border-color: var(--fd-primary);
-  }
-
-  .flowdrop-console-toggle--active:hover {
-    color: var(--fd-primary);
-    background-color: var(--fd-primary-muted);
   }
 
   :global(.flowdrop-workflow-editor .svelte-flow__node:hover) {

package/dist/components/WorkflowEditor.svelte.d.ts

@@ -3,6 +3,7 @@ import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
 import type { AuthProvider } from '../types/auth.js';
 import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
+import type { FlowDropGridVariant } from '../types/theme.js';
 interface Props {
     endpointConfig?: EndpointConfig;
     /** Auth provider applied to this instance's API requests. */
@@ -27,6 +28,23 @@ interface Props {
     onToggleConsole?: () => void;
     /** Per-instance state container (created by mount functions). Defaults to the page-default instance. */
     instance?: FlowDropInstance;
+    /**
+     * Canvas background grid pattern. Supplied by App from the active theme's
+     * `config.canvas.grid` default; any theme can opt into 'lines' / 'cross'.
+     * Color is driven separately by the `--fd-grid-pattern-color` token.
+     * @default 'dots'
+     */
+    gridVariant?: FlowDropGridVariant;
+    /**
+     * Register the built-in heavy form editors (markdown / code / template)
+     * on this instance's field registry. Batteries-included by default — node
+     * config fields with `format: 'markdown' | 'code' | 'template'` render real
+     * CodeMirror editors. The chunks are code-split (loaded lazily here), so
+     * the `/editor` static bundle stays light. Set `false` to keep the textarea
+     * fallback or register your own field components. See `features.builtinEditors`.
+     * @default true
+     */
+    builtinEditors?: boolean;
 }
 declare const WorkflowEditor: import("svelte").Component<Props, {
     updateNodeData: (nodeId: string, dataUpdates: Partial<WorkflowNodeType["data"]>) => void;

package/dist/components/chat/AIChatPanel.svelte

@@ -552,7 +552,7 @@
 
   .ai-chat-panel__messages::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .ai-chat-panel__messages::-webkit-scrollbar-thumb:hover {

package/dist/components/console/ConsoleAutocomplete.svelte

@@ -98,7 +98,7 @@
 
   .console-autocomplete::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 3px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .console-autocomplete__item {

package/dist/components/console/ConsoleOutput.svelte

@@ -68,12 +68,12 @@
 
   .console-output::-webkit-scrollbar-track {
     background: var(--fd-scrollbar-track);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .console-output::-webkit-scrollbar-thumb {
     background: var(--fd-scrollbar-thumb);
-    border-radius: 4px;
+    border-radius: var(--fd-scrollbar-radius);
   }
 
   .console-output::-webkit-scrollbar-thumb:hover {