@flowdrop/flowdrop 1.7.0 → 1.8.0

package/dist/messages/defaults.js

@@ -0,0 +1,356 @@
+/**
+ * Default English strings for every user-facing label, message, and tooltip
+ * rendered by FlowDrop.
+ *
+ * Consumers override any subset by passing `messages={() => partial}` to the
+ * root `<FlowDrop>` component (see `./context.ts`).
+ *
+ * Conventions:
+ *   - Group by **domain** (form, interrupt, chat, navigation, status, nodes,
+ *     common), not by component file path. Component paths churn; domains
+ *     don't.
+ *   - Parameterised strings are **functions**, not template strings with
+ *     placeholders. The compiler then enforces the param shape at every call
+ *     site.
+ *   - Leaves are either `string` or `(params) => string`. Nothing else.
+ *
+ * The `as const` assertion is load-bearing: without it, every string widens
+ * to `string` and the `Messages` type loses its precision.
+ */
+export const defaultMessages = {
+    common: {
+        save: 'Save',
+        cancel: 'Cancel',
+        confirm: 'Confirm',
+        close: 'Close',
+        delete: 'Delete',
+        yes: 'Yes',
+        no: 'No'
+    },
+    form: {
+        array: {
+            // Item-level controls — `n` is the 1-based item position the user sees.
+            itemLabel: ({ n }) => `Item ${n}`,
+            expandItem: 'Expand item',
+            collapseItem: 'Collapse item',
+            moveItemUp: ({ n }) => `Move item ${n} up`,
+            moveItemDown: ({ n }) => `Move item ${n} down`,
+            deleteItem: ({ n }) => `Delete item ${n}`,
+            moveUp: 'Move up',
+            moveDown: 'Move down',
+            delete: 'Delete item',
+            // Boolean rendering inside array items.
+            yes: 'Yes',
+            no: 'No',
+            // Empty state and limits.
+            empty: 'No items yet',
+            add: 'Add Item',
+            count: ({ n }) => `${n} item${n !== 1 ? 's' : ''}`,
+            min: ({ n }) => `Min: ${n}`,
+            max: ({ n }) => `Max: ${n}`,
+            unsupported: ({ type }) => `Complex item type "${type}" is not fully supported.`
+        },
+        markdown: {
+            placeholder: 'Write your markdown here...',
+            // Toolbar action labels (rendered as `title` and used in `title` with
+            // an optional shortcut suffix appended by the component).
+            bold: 'Bold',
+            italic: 'Italic',
+            strikethrough: 'Strikethrough',
+            heading1: 'Heading 1',
+            heading2: 'Heading 2',
+            heading3: 'Heading 3',
+            quote: 'Quote',
+            unorderedList: 'Unordered List',
+            orderedList: 'Ordered List',
+            link: 'Link',
+            image: 'Image',
+            table: 'Table',
+            // Region/widget aria-labels.
+            editor: 'Markdown editor',
+            toolbar: 'Markdown formatting',
+            // Status bar metric labels (the metric value is appended after the colon).
+            words: 'words',
+            lines: 'lines',
+            characters: 'characters'
+        },
+        autocomplete: {
+            removeTag: ({ label }) => `Remove ${label}`,
+            loading: 'Loading suggestions',
+            loadingPending: 'Loading suggestions...',
+            clearAll: 'Clear all selections',
+            suggestions: 'Suggestions',
+            retry: 'Retry',
+            noResults: 'No results found'
+        },
+        field: {
+            required: 'required'
+        },
+        toggle: {
+            enabled: 'Enabled',
+            disabled: 'Disabled'
+        },
+        schema: {
+            save: 'Save',
+            cancel: 'Cancel',
+            empty: 'No schema properties defined.'
+        },
+        code: {
+            // FormCodeEditor — JSON editor aria-label.
+            editor: 'JSON editor'
+        },
+        template: {
+            // FormTemplateEditor — Mustache/template editor aria-label.
+            editor: 'Template editor'
+        }
+    },
+    interrupt: {
+        // Shared resolution notice rendered after any interrupt prompt is answered.
+        responseSubmitted: 'Response submitted',
+        responseSubmittedBy: ({ name }) => `Response submitted by ${name}`,
+        confirmation: {
+            yes: 'Yes',
+            no: 'No'
+        },
+        choice: {
+            submit: 'Submit',
+            // Selection counter rendered inside the picker, e.g. "2 of 5 selected".
+            selectedCount: ({ n, total }) => `${n} of ${total} selected`,
+            min: ({ n }) => `(min: ${n})`,
+            max: ({ n }) => `(max: ${n})`
+        },
+        review: {
+            acceptAll: 'Accept All',
+            rejectAll: 'Reject All',
+            submit: 'Submit Review',
+            empty: '(empty)',
+            yes: 'Yes',
+            no: 'No',
+            // Per-row controls.
+            acceptItem: ({ label }) => `Accept ${label}`,
+            rejectItem: ({ label }) => `Reject ${label}`,
+            accept: 'Accept',
+            reject: 'Reject',
+            accepted: 'Accepted',
+            rejected: 'Rejected',
+            // Diff/preview controls.
+            rendered: 'Rendered',
+            rawHtml: 'Raw HTML',
+            original: 'Original:',
+            proposed: 'Proposed:',
+            diff: 'Diff:',
+            // Header counter — accepted decisions out of total.
+            counter: ({ accepted, total }) => `${accepted} of ${total} accepted`,
+            // Footer summary — accepted/rejected breakdown.
+            summary: ({ accepted, rejected, total }) => `${accepted} accepted, ${rejected} rejected out of ${total} changes`
+        },
+        form: {
+            submit: 'Submit',
+            // Boolean and empty-cell rendering in the submitted-values readout.
+            yes: 'Yes',
+            no: 'No',
+            empty: '—',
+            submittedValuesTitle: 'Submitted Values'
+        },
+        text: {
+            placeholder: 'Enter your response...',
+            min: ({ n }) => `(min: ${n})`,
+            submit: 'Submit'
+        },
+        bubble: {
+            // Pre-resolution status — keyed by interrupt kind.
+            required: {
+                confirmation: 'Confirmation Required',
+                selection: 'Selection Required',
+                input: 'Input Required',
+                form: 'Form Required',
+                review: 'Review Required',
+                default: 'Action Required'
+            },
+            // Post-resolution status.
+            submitted: {
+                confirmation: 'Confirmation Submitted',
+                selection: 'Selection Made',
+                input: 'Input Submitted',
+                form: 'Form Submitted',
+                review: 'Review Submitted',
+                default: 'Response Submitted'
+            },
+            cancelled: 'Cancelled',
+            errorRetry: 'Error - Click to Retry',
+            retry: 'Retry',
+            cancel: 'Cancel',
+            fromWorkflow: 'From workflow node',
+            nodeIdTooltip: ({ id }) => `Node ID: ${id}`
+        }
+    },
+    navigation: {
+        // Navbar branding (rendered when no consumer overrides via title prop).
+        appName: 'FlowDrop',
+        tagline: 'Visual Workflow Manager',
+        breadcrumbAriaLabel: 'Breadcrumb',
+        connected: 'Connected',
+        settingsTitle: 'Settings',
+        settingsAriaLabel: 'Open settings',
+        // Default primary action labels rendered when no `navbarActions` prop is supplied.
+        save: 'Save',
+        export: 'Export',
+        import: 'Import',
+        workflowSettings: 'Workflow Settings',
+        // Right-sidebar workflow settings panel (distinct from the navbar action label above).
+        workflowSettingsPanelTitle: 'Workflow Settings',
+        workflowSettingsPanelSubtitle: 'Settings',
+        nodeConfigDescription: 'Node configuration',
+        closeSettings: 'Close settings',
+        closeConfigModal: 'Close configuration modal',
+        copyId: 'Copy ID to clipboard',
+        // Bottom panel tab labels.
+        bottomPanel: {
+            console: 'Console',
+            chat: 'AI Assistant'
+        }
+    },
+    layout: {
+        // Sidebar/main-region landmarks.
+        componentsSidebar: 'Components sidebar',
+        workflowCanvas: 'Workflow canvas',
+        executionLogs: 'Execution logs sidebar',
+        settingsCategories: 'Settings categories',
+        searchComponents: 'Search components',
+        commandConsole: 'Command Console (`)',
+        backToConfiguration: 'Back to configuration',
+        // Resize handle labels — keyboard users tab to these.
+        resizeLeftSidebar: 'Resize left sidebar',
+        resizeRightSidebar: 'Resize right sidebar',
+        resizeBottomPanel: 'Resize bottom panel',
+        expandSidebar: 'Expand sidebar',
+        collapseSidebar: 'Collapse sidebar',
+        closePlaygroundModal: 'Close playground modal',
+        closeLogsSidebar: 'Close logs sidebar',
+        closeConfigPanel: 'Close panel',
+        closeConsole: 'Close console',
+        swapNode: 'Swap node',
+        backToNodeSelection: 'Back to node selection',
+        loadSession: ({ name }) => `Load session: ${name}`
+    },
+    chat: {
+        // AIChatPanel labels.
+        aiAssistant: 'AI Assistant',
+        requiresBackend: 'AI Assistant requires backend configuration',
+        loadWorkflow: 'Load a workflow to start chatting',
+        helpBuild: 'Ask the AI to help build your workflow',
+        placeholder: 'Describe what you want to build...',
+        send: 'Send message',
+        autoRetry: ({ attempt, max }) => `Auto-retrying (attempt ${attempt}/${max})…`,
+        // CommandPreview labels.
+        commandPreview: {
+            ariaLabel: 'Command preview',
+            applying: 'Applying…',
+            applied: 'Applied',
+            dismissed: 'Dismissed',
+            applyAll: 'Apply All',
+            cancel: 'Cancel'
+        }
+    },
+    playground: {
+        chat: {
+            placeholder: 'Type your message...',
+            predefinedRun: 'Run workflow'
+        },
+        states: {
+            viewOnlyTitle: 'View only',
+            viewOnlyText: 'This playground is in view-only mode. No inputs are available.',
+            newSessionTitle: 'New session',
+            newSessionText: 'Test your flow with a prompt',
+            readyTitle: 'Ready to run',
+            readyText: 'Click Run to execute your workflow',
+            processing: 'Processing...',
+            viewOnlyHelp: 'View-only mode. Workflow execution is controlled externally.'
+        },
+        actions: {
+            stopTitle: 'Stop execution',
+            stop: 'Stop',
+            sendTitle: 'Send message',
+            send: 'Send',
+            runTitle: 'Run workflow',
+            runWaitingTitle: 'Waiting for workflow to be ready...',
+            run: 'Run'
+        },
+        // Message author labels.
+        roles: {
+            you: 'You',
+            assistant: 'Assistant',
+            system: 'System',
+            log: 'Log',
+            message: 'Message'
+        },
+        messageTooltips: {
+            nodeId: ({ id }) => `Node ID: ${id}`,
+            executionDuration: 'Execution duration'
+        },
+        sessions: {
+            header: 'Sessions',
+            newSession: 'New Session',
+            empty: 'No sessions yet',
+            clickAgainToConfirm: 'Click again to confirm',
+            cancel: 'Cancel',
+            deleteSession: 'Delete session',
+            // Relative timestamp formatting.
+            justNow: 'Just now',
+            minutesAgo: ({ n }) => `${n}m ago`,
+            hoursAgo: ({ n }) => `${n}h ago`,
+            daysAgo: ({ n }) => `${n}d ago`
+        }
+    },
+    nodes: {
+        notes: {
+            placeholder: 'Add your notes here...',
+            types: {
+                info: 'Info',
+                warning: 'Warning',
+                success: 'Success',
+                error: 'Error',
+                default: 'Note'
+            },
+            processing: 'Processing...',
+            errorOccurred: 'Error occurred',
+            configure: 'Configure note'
+        },
+        // SvelteFlow node aria-labels — every visible node and port needs a
+        // landmark. The `name`/`title` parameter is the rendered display
+        // string (already localised by the workflow author or fallback).
+        graph: {
+            workflowNode: ({ name }) => `Workflow node: ${name}`,
+            gatewayNode: ({ title }) => `Gateway node: ${title}`,
+            ideaNode: ({ title }) => `Idea node: ${title}`,
+            connectInputPort: ({ name }) => `Connect to ${name} input port`,
+            connectOutputPort: ({ name }) => `Connect from ${name} output port`,
+            connectBranch: ({ name }) => `Connect from ${name} branch`
+        }
+    },
+    status: {
+        // Pipeline status panel.
+        pipeline: {
+            refresh: 'Refresh Status',
+            refreshing: 'Refreshing...',
+            viewLogs: 'View Logs',
+            home: 'Home',
+            workflows: 'Workflows',
+            workflow: 'Workflow',
+            pipelines: 'Pipelines',
+            pipelineCrumb: ({ id, status }) => `Pipeline ${id} - ${status}`
+        },
+        // NodeStatusOverlay tooltip content. The `status` parameter is the
+        // resolved status label (typically from `getStatusLabel()` so it stays
+        // consistent with status icons elsewhere); the wrapper text is localized.
+        overlay: {
+            tooltip: ({ status, count }) => `${status} - Executed ${count} times`,
+            ariaLabel: ({ status }) => `Node execution status: ${status}`,
+            statusLabel: 'Status:',
+            executionsLabel: 'Executions:',
+            lastRunLabel: 'Last Run:',
+            durationLabel: 'Duration:',
+            errorLabel: 'Error:'
+        }
+    }
+};

package/dist/messages/deprecation.d.ts

@@ -0,0 +1,20 @@
+/**
+ * One-shot deprecation warning helper for the messages migration.
+ *
+ * Components that previously accepted per-string label props (e.g.
+ * `saveLabel`, `cancelLabel`, `placeholder`, `addLabel`) keep accepting them
+ * during the v1.x deprecation window. When a consumer passes one explicitly
+ * we emit a single console.warn per (component, prop) pair so the noise is
+ * bounded even if the prop is rebound on every render.
+ *
+ * Production builds skip the warning entirely.
+ *
+ * Removed in v2.0 along with the props themselves.
+ */
+export declare function warnDeprecatedProp(component: string, prop: string, replacement: string): void;
+/**
+ * Test-only: clear the warned-once cache so subsequent renders re-emit the
+ * warning. Storybook stories and Vitest specs that share a module instance
+ * need this to assert the warning fires per case.
+ */
+export declare function __resetDeprecationWarningsForTests(): void;

package/dist/messages/deprecation.js

@@ -0,0 +1,33 @@
+/**
+ * One-shot deprecation warning helper for the messages migration.
+ *
+ * Components that previously accepted per-string label props (e.g.
+ * `saveLabel`, `cancelLabel`, `placeholder`, `addLabel`) keep accepting them
+ * during the v1.x deprecation window. When a consumer passes one explicitly
+ * we emit a single console.warn per (component, prop) pair so the noise is
+ * bounded even if the prop is rebound on every render.
+ *
+ * Production builds skip the warning entirely.
+ *
+ * Removed in v2.0 along with the props themselves.
+ */
+const warned = new Set();
+export function warnDeprecatedProp(component, prop, replacement) {
+    if (import.meta.env.PROD)
+        return;
+    const key = `${component}.${prop}`;
+    if (warned.has(key))
+        return;
+    warned.add(key);
+    // eslint-disable-next-line no-console
+    console.warn(`[flowdrop] <${component}> prop \`${prop}\` is deprecated and will be removed in v2.0. ` +
+        `Use \`messages\` on <FlowDrop> instead: ${replacement}`);
+}
+/**
+ * Test-only: clear the warned-once cache so subsequent renders re-emit the
+ * warning. Storybook stories and Vitest specs that share a module instance
+ * need this to assert the warning fires per case.
+ */
+export function __resetDeprecationWarningsForTests() {
+    warned.clear();
+}

package/dist/messages/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Messages module — typed, overridable, translation-ready user-facing strings.
+ *
+ * See `./defaults.ts` for the canonical shape, `./context.ts` for the runtime
+ * plumbing, and the i18n guide in `apps/docs` for consumer recipes.
+ */
+export { defaultMessages } from './defaults.js';
+export { mergeMessages } from './merge.js';
+export { setMessages, getMessages, m } from './context.js';
+export { warnDeprecatedProp, __resetDeprecationWarningsForTests } from './deprecation.js';
+export type { Messages, MessagesOverride, DeepPartial } from './types.js';

package/dist/messages/index.js

@@ -0,0 +1,10 @@
+/**
+ * Messages module — typed, overridable, translation-ready user-facing strings.
+ *
+ * See `./defaults.ts` for the canonical shape, `./context.ts` for the runtime
+ * plumbing, and the i18n guide in `apps/docs` for consumer recipes.
+ */
+export { defaultMessages } from './defaults.js';
+export { mergeMessages } from './merge.js';
+export { setMessages, getMessages, m } from './context.js';
+export { warnDeprecatedProp, __resetDeprecationWarningsForTests } from './deprecation.js';

package/dist/messages/merge.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Deep-merge a `MessagesOverride` onto the canonical `Messages` tree.
+ *
+ * Hand-written rather than pulled from lodash because the shape is known and
+ * fixed: leaves are strings or functions, branches are plain objects. The
+ * walker is smaller than the lodash import and has no edge cases we don't
+ * want.
+ *
+ * Rules:
+ *   - `undefined` partial returns the base reference unchanged (cheap path
+ *     for the no-override case).
+ *   - Override branches are walked recursively and merged with their base.
+ *   - Override leaves replace base leaves wholesale. Functions and strings
+ *     are interchangeable per `DeepPartial` (see `./types.ts`).
+ *   - Keys not present in the override fall through to the base.
+ *
+ * Identity preservation: when a subtree of `partial` resolves to values that
+ * are already `===` to the corresponding base values (string interning makes
+ * this the common case for paraglide-style overrides — `p.save()` returns
+ * the same `'Save'` string each call), the base reference is returned
+ * unchanged. This stops downstream `$derived(m().branch)` reads in components
+ * from invalidating on every parent re-render when the consumer passes an
+ * inline `messages={{...}}` literal whose contents are stable but whose
+ * outer identity churns. Function leaves still create fresh identities, but
+ * they aren't read in render hotspots.
+ */
+import type { Messages, MessagesOverride } from './types.js';
+export declare function mergeMessages(base: Messages, partial: MessagesOverride | undefined): Messages;

package/dist/messages/merge.js

@@ -0,0 +1,53 @@
+/**
+ * Deep-merge a `MessagesOverride` onto the canonical `Messages` tree.
+ *
+ * Hand-written rather than pulled from lodash because the shape is known and
+ * fixed: leaves are strings or functions, branches are plain objects. The
+ * walker is smaller than the lodash import and has no edge cases we don't
+ * want.
+ *
+ * Rules:
+ *   - `undefined` partial returns the base reference unchanged (cheap path
+ *     for the no-override case).
+ *   - Override branches are walked recursively and merged with their base.
+ *   - Override leaves replace base leaves wholesale. Functions and strings
+ *     are interchangeable per `DeepPartial` (see `./types.ts`).
+ *   - Keys not present in the override fall through to the base.
+ *
+ * Identity preservation: when a subtree of `partial` resolves to values that
+ * are already `===` to the corresponding base values (string interning makes
+ * this the common case for paraglide-style overrides — `p.save()` returns
+ * the same `'Save'` string each call), the base reference is returned
+ * unchanged. This stops downstream `$derived(m().branch)` reads in components
+ * from invalidating on every parent re-render when the consumer passes an
+ * inline `messages={{...}}` literal whose contents are stable but whose
+ * outer identity churns. Function leaves still create fresh identities, but
+ * they aren't read in render hotspots.
+ */
+const isPlainObject = (value) => typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    typeof value !== 'function';
+export function mergeMessages(base, partial) {
+    if (partial === undefined)
+        return base;
+    return mergeNode(base, partial);
+}
+function mergeNode(base, partial) {
+    if (!isPlainObject(base) || !isPlainObject(partial))
+        return partial ?? base;
+    let out = null;
+    for (const key of Object.keys(partial)) {
+        const baseChild = base[key];
+        const partialChild = partial[key];
+        const merged = isPlainObject(baseChild) && isPlainObject(partialChild)
+            ? mergeNode(baseChild, partialChild)
+            : (partialChild ?? baseChild);
+        if (merged !== baseChild) {
+            if (out === null)
+                out = { ...base };
+            out[key] = merged;
+        }
+    }
+    return out ?? base;
+}

package/dist/messages/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Type machinery for the FlowDrop messages system.
+ *
+ * `Messages` is the canonical shape of every user-facing string in the library.
+ * It is derived from `defaultMessages` so the defaults file is the single
+ * source of truth — adding a key there immediately widens the type.
+ *
+ * Consumers pass `DeepPartial<Messages>` to override any subset. Function
+ * leaves (parameterised strings) may be overridden with either a function of
+ * the same signature OR a plain string for cases where the override doesn't
+ * need the parameters.
+ */
+import type { defaultMessages } from './defaults.js';
+export type Messages = typeof defaultMessages;
+type AnyFn = (...args: any[]) => unknown;
+/**
+ * A recursive partial that:
+ *   - allows skipping any key at any level,
+ *   - preserves function leaves with their original signature — overrides
+ *     of parameterised messages MUST stay functions, because call sites
+ *     invoke them with the params object,
+ *   - widens string leaves to `string` so `as const` literal defaults
+ *     (e.g. `'Cancel'`) accept arbitrary translations.
+ */
+export type DeepPartial<T> = T extends AnyFn ? T : T extends string ? string : T extends object ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+} : T;
+export type MessagesOverride = DeepPartial<Messages>;
+export {};

package/dist/messages/types.js

@@ -0,0 +1,13 @@
+/**
+ * Type machinery for the FlowDrop messages system.
+ *
+ * `Messages` is the canonical shape of every user-facing string in the library.
+ * It is derived from `defaultMessages` so the defaults file is the single
+ * source of truth — adding a key there immediately widens the type.
+ *
+ * Consumers pass `DeepPartial<Messages>` to override any subset. Function
+ * leaves (parameterised strings) may be overridden with either a function of
+ * the same signature OR a plain string for cases where the override doesn't
+ * need the parameters.
+ */
+export {};

package/dist/services/draftStorage.d.ts

@@ -75,6 +75,19 @@ export declare function hasDraft(storageKey: string): boolean;
  * @returns Draft metadata, or null if not found
  */
 export declare function getDraftMetadata(storageKey: string): DraftMetadata | null;
+/**
+ * Clear all FlowDrop drafts from localStorage
+ *
+ * Removes every key beginning with `flowdrop:draft:`. Intended to be called
+ * from a host application's logout handler so workflow drafts do not persist
+ * across user sessions on shared devices.
+ *
+ * @param extraKeys - Additional explicit keys to remove. Pass any custom
+ *   `draftStorageKey` values configured at mount time so they are cleared
+ *   alongside the default-prefixed keys.
+ * @returns The number of entries removed.
+ */
+export declare function clearAllDrafts(extraKeys?: readonly string[]): number;
 /**
  * Draft auto-save manager
  *

package/dist/services/draftStorage.js

@@ -120,6 +120,42 @@ export function getDraftMetadata(storageKey) {
     const draft = loadDraft(storageKey);
     return draft?.metadata ?? null;
 }
+/**
+ * Clear all FlowDrop drafts from localStorage
+ *
+ * Removes every key beginning with `flowdrop:draft:`. Intended to be called
+ * from a host application's logout handler so workflow drafts do not persist
+ * across user sessions on shared devices.
+ *
+ * @param extraKeys - Additional explicit keys to remove. Pass any custom
+ *   `draftStorageKey` values configured at mount time so they are cleared
+ *   alongside the default-prefixed keys.
+ * @returns The number of entries removed.
+ */
+export function clearAllDrafts(extraKeys = []) {
+    try {
+        const keysToRemove = new Set();
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith(`${STORAGE_KEY_PREFIX}:`)) {
+                keysToRemove.add(key);
+            }
+        }
+        for (const key of extraKeys) {
+            if (localStorage.getItem(key) !== null) {
+                keysToRemove.add(key);
+            }
+        }
+        for (const key of keysToRemove) {
+            localStorage.removeItem(key);
+        }
+        return keysToRemove.size;
+    }
+    catch (error) {
+        logger.warn('Failed to clear drafts from localStorage:', error);
+        return 0;
+    }
+}
 /**
  * Draft auto-save manager
  *

package/dist/styles/base.css

@@ -39,13 +39,22 @@
   --xy-controls-button-border-color: var(--fd-controls-button-border, var(--fd-border));
   --xy-controls-box-shadow: var(--fd-controls-box-shadow, 0 0 2px 1px rgba(0, 0, 0, 0.08));
 
-  --xy-minimap-background-color: var(--fd-minimap-bg, var(--fd-card));
+  --xy-minimap-background-color: var(--fd-minimap-bg, var(--fd-muted));
   --xy-minimap-mask-background-color: var(--fd-minimap-mask-bg, var(--fd-backdrop));
   --xy-minimap-mask-stroke-color: var(--fd-minimap-mask-stroke, var(--fd-border));
   --xy-minimap-mask-stroke-width: var(--fd-minimap-mask-stroke-width, 1);
-  --xy-minimap-node-background-color: var(--fd-minimap-node-bg, var(--fd-muted));
-  --xy-minimap-node-stroke-color: var(--fd-minimap-node-stroke, var(--fd-border-muted));
-  --xy-minimap-node-stroke-width: var(--fd-minimap-node-stroke-width, 2);
+  --xy-minimap-node-background-color: var(--fd-minimap-node-bg, var(--fd-muted-foreground));
+  --xy-minimap-node-stroke-color: var(--fd-minimap-node-stroke, var(--fd-border-strong));
+  --xy-minimap-node-stroke-width: var(--fd-minimap-node-stroke-width, 1);
+}
+
+/* Minimap: render as a clearly bounded floating panel so users don't mistake
+   it for the canvas and pan unintentionally when clicking/dragging on it. */
+.svelte-flow .svelte-flow__minimap {
+  border: 1px solid var(--fd-border-strong);
+  border-radius: var(--fd-radius-md);
+  box-shadow: var(--fd-shadow-md);
+  overflow: hidden;
 }
 
 /* Flow node handles: 20px connection area, 12px visible circle (::before)

package/dist/svelte-app.d.ts

@@ -109,6 +109,17 @@ export interface MountedFlowDropApp {
      * Trigger export operation (downloads JSON)
      */
     export: () => void;
+    /**
+     * Clear all FlowDrop workflow drafts from `localStorage`.
+     *
+     * Removes every key beginning with `flowdrop:draft:` plus the custom
+     * `draftStorageKey` configured at mount time (if any). Call this from
+     * the host application's logout handler so drafts do not persist across
+     * user sessions on shared devices.
+     *
+     * @returns The number of entries removed.
+     */
+    clearAllDrafts: () => number;
 }
 /**
  * Mount the full FlowDrop App with navbar, sidebars, and workflow editor