@flowdrop/flowdrop 1.6.0 → 1.8.0

package/dist/components/nodes/WorkflowNode.svelte

@@ -24,6 +24,7 @@
   } from '../../utils/colors.js';
   import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
   import { applyPortOrder } from '../../utils/portUtils.js';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     data: WorkflowNode['data'] & {
@@ -36,6 +37,10 @@
   let props: Props = $props();
   let isHandleInteraction = $state(false);
 
+  // Hoist the graph branch — three reads in the template, two of them inside
+  // {#each port} loops where N×M reads add up. One getter walk per render.
+  const graph = $derived(m().nodes.graph);
+
   /**
    * Instance-specific title override from config.
    * Falls back to the original label if not set.
@@ -205,7 +210,7 @@
       handleDoubleClick();
     }
   }}
-  aria-label="Workflow node: {props.data.metadata.name}"
+  aria-label={graph.workflowNode({ name: props.data.metadata.name })}
   aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
 >
   <!-- Default Node Header: expands in multiples of 10 (title row 40px + gap 10px + description 20px per line) -->
@@ -261,7 +266,7 @@
               )}); --fd-handle-border-color: var(--fd-handle-border);"
               role="button"
               tabindex={0}
-              aria-label="Connect to {port.name} input port"
+              aria-label={graph.connectInputPort({ name: port.name })}
             />
 
             <!-- Port Info: padding lives here so handle position is simple -->
@@ -339,7 +344,7 @@
               )}); --fd-handle-border-color: var(--fd-handle-border);"
               role="button"
               tabindex={0}
-              aria-label="Connect from {port.name} output port"
+              aria-label={graph.connectOutputPort({ name: port.name })}
             />
           </div>
         {/each}

package/dist/components/playground/ChatPanel.svelte

@@ -30,6 +30,7 @@
     interruptActions,
     getInterruptByMessageId
   } from '../../stores/interruptStore.svelte.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -78,7 +79,7 @@
   let {
     showTimestamps = true,
     autoScroll = true,
-    placeholder = 'Type your message...',
+    placeholder,
     onSendMessage,
     onStopExecution,
     showLogsInline = false,
@@ -86,10 +87,21 @@
     onInterruptResolved,
     showChatInput = true,
     showRunButton = true,
-    predefinedMessage = 'Run workflow',
+    predefinedMessage,
     compactSystemMessages = true
   }: Props = $props();
 
+  // Hoist playground branches — states/actions are read 8+ times each in the
+  // template. Single getter walk per render instead of per-string.
+  const states = $derived(m().playground.states);
+  const actions = $derived(m().playground.actions);
+  const chat = $derived(m().playground.chat);
+
+  // Playground placeholders/labels are configurable per-instance (workflow
+  // author) but fall back to the localized messages tree when not provided.
+  const resolvedPlaceholder = $derived(placeholder ?? chat.placeholder);
+  const resolvedPredefinedMessage = $derived(predefinedMessage ?? chat.predefinedRun);
+
   /**
    * Tracks whether the Run button is enabled.
    * Starts as true, becomes false after Run is clicked,
@@ -283,7 +295,7 @@
     }
     // Disable the Run button after clicking
     runEnabled = false;
-    onSendMessage?.(predefinedMessage);
+    onSendMessage?.(resolvedPredefinedMessage);
   }
 
   /**
@@ -468,16 +480,16 @@
           </svg>
         </div>
         {#if noInputsAvailable}
-          <h2 class="chat-panel__welcome-title">View only</h2>
+          <h2 class="chat-panel__welcome-title">{states.viewOnlyTitle}</h2>
           <p class="chat-panel__welcome-text">
-            This playground is in view-only mode. No inputs are available.
+            {states.viewOnlyText}
           </p>
         {:else if showChatInput}
-          <h2 class="chat-panel__welcome-title">New session</h2>
-          <p class="chat-panel__welcome-text">Test your flow with a prompt</p>
+          <h2 class="chat-panel__welcome-title">{states.newSessionTitle}</h2>
+          <p class="chat-panel__welcome-text">{states.newSessionText}</p>
         {:else}
-          <h2 class="chat-panel__welcome-title">Ready to run</h2>
-          <p class="chat-panel__welcome-text">Click Run to execute your workflow</p>
+          <h2 class="chat-panel__welcome-title">{states.readyTitle}</h2>
+          <p class="chat-panel__welcome-text">{states.readyText}</p>
         {/if}
       </div>
     {:else if showEmptyChat}
@@ -509,16 +521,16 @@
           </svg>
         </div>
         {#if noInputsAvailable}
-          <h2 class="chat-panel__welcome-title">View only</h2>
+          <h2 class="chat-panel__welcome-title">{states.viewOnlyTitle}</h2>
           <p class="chat-panel__welcome-text">
-            This playground is in view-only mode. No inputs are available.
+            {states.viewOnlyText}
           </p>
         {:else if showChatInput}
-          <h2 class="chat-panel__welcome-title">New session</h2>
-          <p class="chat-panel__welcome-text">Test your flow with a prompt</p>
+          <h2 class="chat-panel__welcome-title">{states.newSessionTitle}</h2>
+          <p class="chat-panel__welcome-text">{states.newSessionText}</p>
         {:else}
-          <h2 class="chat-panel__welcome-title">Ready to run</h2>
-          <p class="chat-panel__welcome-text">Click Run to execute your workflow</p>
+          <h2 class="chat-panel__welcome-title">{states.readyTitle}</h2>
+          <p class="chat-panel__welcome-text">{states.readyText}</p>
         {/if}
       </div>
     {:else}
@@ -552,7 +564,7 @@
             <span></span>
             <span></span>
           </div>
-          <span class="chat-panel__typing-text">Processing...</span>
+          <span class="chat-panel__typing-text">{states.processing}</span>
         </div>
       {/if}
     {/if}
@@ -564,7 +576,7 @@
       <!-- No inputs available - show informational message -->
       <div class="chat-panel__no-inputs">
         <Icon icon="mdi:information-outline" />
-        <span>View-only mode. Workflow execution is controlled externally.</span>
+        <span>{states.viewOnlyHelp}</span>
       </div>
     {:else}
       <div
@@ -577,7 +589,7 @@
               bind:this={inputField}
               bind:value={inputValue}
               class="chat-panel__input"
-              {placeholder}
+              placeholder={resolvedPlaceholder}
               rows="1"
               disabled={getIsExecuting()}
               onkeydown={handleKeydown}
@@ -591,10 +603,10 @@
             type="button"
             class="chat-panel__stop-btn"
             onclick={handleStop}
-            title="Stop execution"
+            title={actions.stopTitle}
           >
             <Icon icon="mdi:stop" />
-            Stop
+            {actions.stop}
           </button>
         {:else if showChatInput}
           <button
@@ -602,9 +614,9 @@
             class="chat-panel__send-btn"
             onclick={handleSend}
             disabled={!inputValue.trim()}
-            title="Send message"
+            title={actions.sendTitle}
           >
-            Send
+            {actions.send}
           </button>
         {:else if showRunButton}
           <button
@@ -612,10 +624,10 @@
             class="chat-panel__run-btn"
             onclick={handleRun}
             disabled={!runEnabled}
-            title={runEnabled ? 'Run workflow' : 'Waiting for workflow to be ready...'}
+            title={runEnabled ? actions.runTitle : actions.runWaitingTitle}
           >
             <Icon icon="mdi:play" />
-            Run
+            {actions.run}
           </button>
         {/if}
       </div>

package/dist/components/playground/MessageBubble.svelte

@@ -17,6 +17,7 @@
     PlaygroundMessageMetadata,
     PlaygroundMessageRole
   } from '../../types/playground.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -91,17 +92,18 @@
    * @returns Display label
    */
   function getRoleLabel(role: PlaygroundMessageRole, metadata?: PlaygroundMessageMetadata): string {
+    const roles = m().playground.roles;
     switch (role) {
       case 'user':
-        return metadata?.userName ?? 'You';
+        return metadata?.userName ?? roles.you;
       case 'assistant':
-        return 'Assistant';
+        return roles.assistant;
       case 'system':
-        return 'System';
+        return roles.system;
       case 'log':
-        return metadata?.nodeLabel ?? 'Log';
+        return metadata?.nodeLabel ?? roles.log;
       default:
-        return 'Message';
+        return roles.message;
     }
   }
 
@@ -208,13 +210,19 @@
       {#if message.metadata?.duration !== undefined || message.nodeId}
         <div class="message-bubble__footer">
           {#if message.nodeId}
-            <span class="message-bubble__node" title="Node ID: {message.nodeId}">
+            <span
+              class="message-bubble__node"
+              title={m().playground.messageTooltips.nodeId({ id: message.nodeId })}
+            >
               <Icon icon="mdi:graph" />
               {message.metadata?.nodeLabel ?? message.nodeId}
             </span>
           {/if}
           {#if message.metadata?.duration !== undefined}
-            <span class="message-bubble__duration" title="Execution duration">
+            <span
+              class="message-bubble__duration"
+              title={m().playground.messageTooltips.executionDuration}
+            >
               <Icon icon="mdi:timer-outline" />
               {formatDuration(message.metadata.duration)}
             </span>

package/dist/components/playground/Playground.svelte

@@ -29,6 +29,7 @@
   } from '../../stores/playgroundStore.svelte.js';
   import { interruptActions } from '../../stores/interruptStore.svelte.js';
   import { logger } from '../../utils/logger.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -545,7 +546,7 @@
                     role="button"
                     tabindex="0"
                     title="Click to load this session"
-                    aria-label="Load session: {session.name}"
+                    aria-label={m().layout.loadSession({ name: session.name })}
                     onclick={() => handleSelectSession(session.id)}
                     onkeydown={(e) => e.key === 'Enter' && handleSelectSession(session.id)}
                   >

package/dist/components/playground/PlaygroundModal.svelte

@@ -12,6 +12,7 @@
   import type { Workflow } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import type { PlaygroundConfig } from '../../types/playground.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -86,7 +87,7 @@
           type="button"
           class="playground-modal__close-btn"
           onclick={onClose}
-          aria-label="Close playground modal"
+          aria-label={m().layout.closePlaygroundModal}
         >
           <Icon icon="mdi:close" />
         </button>

package/dist/components/playground/SessionManager.svelte

@@ -16,6 +16,7 @@
     getIsLoading,
     getSessionCount
   } from '../../stores/playgroundStore.svelte.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -44,6 +45,9 @@
     mode = 'sidebar'
   }: Props = $props();
 
+  // Hoist the sessions branch — used in formatDate plus several template reads.
+  const t = $derived(m().playground.sessions);
+
   /** Session pending deletion (for confirmation) */
   let pendingDeleteId = $state<string | null>(null);
 
@@ -105,16 +109,16 @@
     const diffDays = Math.floor(diffMs / 86400000);
 
     if (diffMins < 1) {
-      return 'Just now';
+      return t.justNow;
     }
     if (diffMins < 60) {
-      return `${diffMins}m ago`;
+      return t.minutesAgo({ n: diffMins });
     }
     if (diffHours < 24) {
-      return `${diffHours}h ago`;
+      return t.hoursAgo({ n: diffHours });
     }
     if (diffDays < 7) {
-      return `${diffDays}d ago`;
+      return t.daysAgo({ n: diffDays });
     }
     return date.toLocaleDateString('en-US', {
       month: 'short',
@@ -170,7 +174,7 @@
   >
     <div class="session-manager__title">
       <Icon icon="mdi:history" />
-      <span>Sessions</span>
+      <span>{t.header}</span>
       {#if getSessionCount() > 0}
         <span class="session-manager__count">{getSessionCount()}</span>
       {/if}
@@ -192,7 +196,7 @@
         disabled={getIsLoading()}
       >
         <Icon icon="mdi:plus" />
-        New Session
+        {t.newSession}
       </button>
 
       <!-- Sessions List -->
@@ -200,7 +204,7 @@
         {#if getSessions().length === 0}
           <div class="session-manager__empty">
             <Icon icon="mdi:chat-outline" />
-            <span>No sessions yet</span>
+            <span>{t.empty}</span>
           </div>
         {:else}
           {#each getSessions() as session (session.id)}
@@ -236,7 +240,7 @@
                     type="button"
                     class="session-manager__delete-btn session-manager__delete-btn--confirm"
                     onclick={(e) => handleDeleteClick(e, session.id)}
-                    title="Click again to confirm"
+                    title={t.clickAgainToConfirm}
                   >
                     <Icon icon="mdi:check" />
                   </button>
@@ -244,7 +248,7 @@
                     type="button"
                     class="session-manager__delete-btn session-manager__delete-btn--cancel"
                     onclick={cancelDelete}
-                    title="Cancel"
+                    title={t.cancel}
                   >
                     <Icon icon="mdi:close" />
                   </button>
@@ -253,7 +257,7 @@
                     type="button"
                     class="session-manager__delete-btn"
                     onclick={(e) => handleDeleteClick(e, session.id)}
-                    title="Delete session"
+                    title={t.deleteSession}
                   >
                     <Icon icon="mdi:delete-outline" />
                   </button>

package/dist/core/index.d.ts

@@ -82,3 +82,5 @@ export { logger, setLogLevel, getLogLevel } from '../utils/logger.js';
 export type { LogLevel } from '../utils/logger.js';
 export { computeSwapPreview, computeSwapPreviewWithOptions, executeSwap, mapConfig, getVersionUpgrade, compareSemver, performSwap, validateSwapResult, SwapValidationError } from '../utils/nodeSwap.js';
 export type { SwapPreview, SwapResult, PortMapping, DroppedEdge, MatchQuality, PortMappingOverride, ConfigMappingOverride, SwapOptions, SwapStrategy, SwapStrategyContext, SwapEventContext } from '../utils/nodeSwap.js';
+export { defaultMessages, mergeMessages, setMessages } from '../messages/index.js';
+export type { Messages, MessagesOverride } from '../messages/index.js';

package/dist/core/index.js

@@ -101,3 +101,12 @@ export { logger, setLogLevel, getLogLevel } from '../utils/logger.js';
 // Node Swap
 // ============================================================================
 export { computeSwapPreview, computeSwapPreviewWithOptions, executeSwap, mapConfig, getVersionUpgrade, compareSemver, performSwap, validateSwapResult, SwapValidationError } from '../utils/nodeSwap.js';
+// ============================================================================
+// Messages (typed, overridable, translation-ready user-facing strings)
+//
+// Consumers pass `messages={partial}` (or a getter) to <FlowDrop>; type the
+// partial as `MessagesOverride`. `setMessages` + `mergeMessages` are exported
+// for ad-hoc mounts that render flowdrop components outside the root provider
+// (Storybook stories, standalone <SchemaForm>, etc.) — see the i18n guide.
+// ============================================================================
+export { defaultMessages, mergeMessages, setMessages } from '../messages/index.js';

package/dist/editor/index.d.ts

@@ -82,7 +82,7 @@ export { globalSaveWorkflow, globalExportWorkflow } from '../services/globalSave
 export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';
 export { fetchCategories, validateCategories } from '../services/categoriesApi.js';
 export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from '../services/dynamicSchemaService.js';
-export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from '../services/draftStorage.js';
+export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, clearAllDrafts, DraftAutoSaveManager } from '../services/draftStorage.js';
 export { EnhancedFlowDropApiClient, ApiError } from '../api/enhanced-client.js';
 export { isLoopbackEdge, isValidLoopbackCycle, PortCompatibilityChecker, initializePortCompatibility, getPortCompatibilityChecker, getPossibleConnections, validateConnection, getConnectionSuggestions, hasCycles, hasInvalidCycles, getExecutionOrder } from '../utils/connections.js';
 export { fetchRuntimeConfig, getRuntimeConfig, clearRuntimeConfigCache, initRuntimeConfig } from '../config/runtimeConfig.js';

package/dist/editor/index.js

@@ -125,7 +125,7 @@ export { globalSaveWorkflow, globalExportWorkflow } from '../services/globalSave
 export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';
 export { fetchCategories, validateCategories } from '../services/categoriesApi.js';
 export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from '../services/dynamicSchemaService.js';
-export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from '../services/draftStorage.js';
+export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, clearAllDrafts, DraftAutoSaveManager } from '../services/draftStorage.js';
 // ============================================================================
 // API Clients
 // ============================================================================

package/dist/messages/context.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Svelte context plumbing for the messages system.
+ *
+ * The context value is a **getter** `() => Messages`, not a snapshot. Storing
+ * a getter lets the consumer's i18n library drive reactivity transparently:
+ * they pass `messages={() => somethingReactive()}` to `<FlowDrop>`, the root
+ * `$derived`s the merged tree, and `m()` re-reads it on every access. No
+ * subscription, no store, no flowdrop-owned reactive primitive.
+ *
+ * Components rendered outside the root provider (Storybook stories, ad-hoc
+ * mounts) silently fall back to `defaultMessages` rather than throwing — see
+ * `getMessages()` below. Trade-off: a missing provider produces English
+ * regardless of the consumer's locale, by design.
+ */
+import type { Messages } from './types.js';
+export declare function setMessages(getter: () => Messages): void;
+/**
+ * Returns the current messages getter. Components should call the result on
+ * every read so locale switches in the consumer's i18n library propagate
+ * without a subscription.
+ *
+ * Outside a provider, returns a getter that always yields `defaultMessages`.
+ */
+export declare function getMessages(): () => Messages;
+/**
+ * Shorthand for the common pattern `getMessages()()` — read the current
+ * merged messages tree once. Use inside templates: `m().form.array.moveUp`.
+ */
+export declare function m(): Messages;

package/dist/messages/context.js

@@ -0,0 +1,38 @@
+/**
+ * Svelte context plumbing for the messages system.
+ *
+ * The context value is a **getter** `() => Messages`, not a snapshot. Storing
+ * a getter lets the consumer's i18n library drive reactivity transparently:
+ * they pass `messages={() => somethingReactive()}` to `<FlowDrop>`, the root
+ * `$derived`s the merged tree, and `m()` re-reads it on every access. No
+ * subscription, no store, no flowdrop-owned reactive primitive.
+ *
+ * Components rendered outside the root provider (Storybook stories, ad-hoc
+ * mounts) silently fall back to `defaultMessages` rather than throwing — see
+ * `getMessages()` below. Trade-off: a missing provider produces English
+ * regardless of the consumer's locale, by design.
+ */
+import { getContext, setContext } from 'svelte';
+import { defaultMessages } from './defaults.js';
+const KEY = Symbol('flowdrop.messages');
+const defaultGetter = () => defaultMessages;
+export function setMessages(getter) {
+    setContext(KEY, getter);
+}
+/**
+ * Returns the current messages getter. Components should call the result on
+ * every read so locale switches in the consumer's i18n library propagate
+ * without a subscription.
+ *
+ * Outside a provider, returns a getter that always yields `defaultMessages`.
+ */
+export function getMessages() {
+    return getContext(KEY) ?? defaultGetter;
+}
+/**
+ * Shorthand for the common pattern `getMessages()()` — read the current
+ * merged messages tree once. Use inside templates: `m().form.array.moveUp`.
+ */
+export function m() {
+    return getMessages()();
+}