@flowdrop/flowdrop 1.7.0 → 1.8.0

package/README.md

@@ -131,6 +131,16 @@ const app = await mountFlowDropApp(container, {
 });
 ```
 
+## Customising messages
+
+Every user-facing string flows through a typed `Messages` tree. Pass a callback to override any subset:
+
+```svelte
+<FlowDrop messages={() => ({ form: { schema: { save: 'Apply' } } })} />
+```
+
+Wire the callback to your i18n library (paraglide-js, sveltekit-i18n, etc.) — locale changes propagate automatically. See the [i18n & Custom Messages guide](https://docs.flowdrop.io/guides/i18n) for the full shape and a paraglide-js worked example.
+
 ## Sub-Module Exports
 
 FlowDrop provides tree-shakeable sub-module exports so you can import only what you need:

package/dist/components/App.svelte

@@ -65,6 +65,8 @@
   import { logger } from '../utils/logger.js';
   import { validateWorkflowData } from '../utils/validation.js';
   import type { SettingsCategory } from '../types/settings.js';
+  import { defaultMessages, mergeMessages, setMessages } from '../messages/index.js';
+  import type { MessagesOverride } from '../messages/index.js';
 
   /**
    * Configuration props for runtime customization
@@ -124,6 +126,18 @@
     swapStrategies?: SwapStrategy[];
     /** Additional JSON Schema properties to show in the Workflow Settings panel. Values are persisted in workflow.config. */
     workflowSettingsSchema?: ConfigSchema;
+    /**
+     * Override user-facing strings. Pass either a partial of the `Messages`
+     * tree directly, or a callback that returns one. Missing keys fall through
+     * to English defaults.
+     *
+     * For static overrides, a value is fine: `messages={{ common: { save: 'Apply' } }}`.
+     * For reactive overrides driven by an i18n library (paraglide, etc.),
+     * either form works — Svelte 5's prop reactivity propagates locale changes.
+     * The callback form is useful when your translations live behind a
+     * function call you'd rather not invoke unless the prop is actually read.
+     */
+    messages?: MessagesOverride | (() => MessagesOverride);
   }
 
   let {
@@ -150,12 +164,74 @@
     showSettingsSyncButton,
     showSettingsResetButton,
     swapStrategies,
-    workflowSettingsSchema
+    workflowSettingsSchema,
+    messages: messagesOverride
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally — feature flags don't change at runtime
   const features = mergeFeatures(propFeatures);
 
+  // Messages: merge consumer overrides over defaults; expose via context as a
+  // getter so consumer-side reactivity (e.g. paraglide-js locale switches)
+  // propagates into every child without a subscription. Accepts either a
+  // value or a callback — normalize here so the rest of the component sees
+  // the merged tree directly.
+  let mergedMessages = $derived(
+    mergeMessages(
+      defaultMessages,
+      typeof messagesOverride === 'function' ? messagesOverride() : messagesOverride
+    )
+  );
+  // setContext must run during component init (synchronously, not in $effect)
+  // — Svelte enforces that. The context value is a getter that closes over
+  // the live $derived, so child components always read the current tree.
+  setMessages(() => mergedMessages);
+
+  // Default navbar primary actions — used when no `navbarActions` prop is supplied.
+  // Derived so the labels track locale changes.
+  const defaultPrimaryActions = $derived([
+    {
+      label: mergedMessages.navigation.save,
+      href: '#save',
+      icon: 'heroicons:document-arrow-down',
+      variant: 'primary' as const,
+      onclick: (e: Event) => {
+        e.preventDefault();
+        saveWorkflow();
+      }
+    },
+    {
+      label: mergedMessages.navigation.export,
+      href: '#export',
+      icon: 'heroicons:arrow-down-tray',
+      variant: 'outline' as const,
+      onclick: (e: Event) => {
+        e.preventDefault();
+        exportWorkflow();
+      }
+    },
+    {
+      label: mergedMessages.navigation.import,
+      href: '#import',
+      icon: 'heroicons:arrow-up-tray',
+      variant: 'outline' as const,
+      onclick: (e: Event) => {
+        e.preventDefault();
+        fileInputRef?.click();
+      }
+    },
+    {
+      label: mergedMessages.navigation.workflowSettings,
+      href: '#settings',
+      icon: 'heroicons:cog-6-tooth',
+      variant: 'outline' as const,
+      onclick: (e: Event) => {
+        e.preventDefault();
+        toggleWorkflowSettings();
+      }
+    }
+  ]);
+
   // Theme system — resolve named theme or custom object, inject CSS tokens from skin
   // Explicit prop wins; falls back to user's persisted theme preference from settings
   let resolvedTheme = $derived(resolveTheme(themeProp ?? getUiSettings().theme));
@@ -950,50 +1026,7 @@
     {#snippet header()}
       <Navbar
         title={breadcrumbTitle}
-        primaryActions={navbarActions.length > 0
-          ? navbarActions
-          : [
-              {
-                label: 'Save',
-                href: '#save',
-                icon: 'heroicons:document-arrow-down',
-                variant: 'primary',
-                onclick: (e) => {
-                  e.preventDefault();
-                  saveWorkflow();
-                }
-              },
-              {
-                label: 'Export',
-                href: '#export',
-                icon: 'heroicons:arrow-down-tray',
-                variant: 'outline',
-                onclick: (e) => {
-                  e.preventDefault();
-                  exportWorkflow();
-                }
-              },
-              {
-                label: 'Import',
-                href: '#import',
-                icon: 'heroicons:arrow-up-tray',
-                variant: 'outline',
-                onclick: (e) => {
-                  e.preventDefault();
-                  fileInputRef?.click();
-                }
-              },
-              {
-                label: 'Workflow Settings',
-                href: '#settings',
-                icon: 'heroicons:cog-6-tooth',
-                variant: 'outline',
-                onclick: (e) => {
-                  e.preventDefault();
-                  toggleWorkflowSettings();
-                }
-              }
-            ]}
+        primaryActions={navbarActions.length > 0 ? navbarActions : defaultPrimaryActions}
         showStatus={true}
         {showSettings}
         {settingsCategories}
@@ -1042,7 +1075,7 @@
         />
       {:else if isWorkflowSettingsOpen}
         <ConfigPanel
-          title="Workflow Settings"
+          title={mergedMessages.navigation.workflowSettingsPanelTitle}
           id={getWorkflowStore()?.id}
           details={[
             {
@@ -1054,7 +1087,7 @@
               value: String(getWorkflowStore()?.edges?.length ?? 0)
             }
           ]}
-          configTitle="Settings"
+          configTitle={mergedMessages.navigation.workflowSettingsPanelSubtitle}
           onClose={() => (isWorkflowSettingsOpen = false)}
         >
           <ConfigForm
@@ -1103,7 +1136,8 @@
         <ConfigPanel
           title={currentNode.data.label}
           id={currentNode.id}
-          description={currentNode.data.metadata?.description || 'Node configuration'}
+          description={currentNode.data.metadata?.description ||
+            mergedMessages.navigation.nodeConfigDescription}
           details={[
             {
               label: 'Type',
@@ -1160,7 +1194,7 @@
       {/if}
     {/snippet}
 
-    <!-- Bottom Panel: Tabbed Console / AI Chat -->
+    <!-- Bottom Panel: Tabbed Console / AI Assistant -->
     {#snippet bottomPanel()}
       <div class="bottom-panel-tabs">
         <div class="bottom-panel-tabs__bar">
@@ -1170,7 +1204,7 @@
               : ''}"
             onclick={() => updateSettings({ ui: { bottomPanelTab: 'console' } })}
           >
-            Console
+            {mergedMessages.navigation.bottomPanel.console}
           </button>
           <button
             class="bottom-panel-tabs__tab {getUiSettings().bottomPanelTab === 'chat'
@@ -1178,7 +1212,7 @@
               : ''}"
             onclick={() => updateSettings({ ui: { bottomPanelTab: 'chat' } })}
           >
-            AI Chat
+            {mergedMessages.navigation.bottomPanel.chat}
           </button>
         </div>
         <div class="bottom-panel-tabs__content">
@@ -1263,15 +1297,19 @@
       onclick={handleCanvasClick}
       onkeydown={(e) => e.key === 'Escape' && closeConfigSidebar()}
       role="region"
-      aria-label="Workflow canvas"
+      aria-label={mergedMessages.layout.workflowCanvas}
     >
       <!-- Floating sidebar toggle — always visible on the canvas top-left -->
       {#if !disableSidebar}
         <button
           class="flowdrop-sidebar-fab"
           onclick={toggleSidebar}
-          aria-label={isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          title={isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          aria-label={isSidebarCollapsed
+            ? mergedMessages.layout.expandSidebar
+            : mergedMessages.layout.collapseSidebar}
+          title={isSidebarCollapsed
+            ? mergedMessages.layout.expandSidebar
+            : mergedMessages.layout.collapseSidebar}
         >
           <Icon icon={isSidebarCollapsed ? 'mdi:menu' : 'mdi:menu-open'} />
         </button>

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

@@ -5,6 +5,7 @@ import type { AuthProvider } from '../types/auth.js';
 import type { FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
 import type { FlowDropTheme, FlowDropThemeName } from '../types/theme.js';
 import type { SettingsCategory } from '../types/settings.js';
+import type { MessagesOverride } from '../messages/index.js';
 /**
  * Configuration props for runtime customization
  */
@@ -63,6 +64,18 @@ interface Props {
     swapStrategies?: SwapStrategy[];
     /** Additional JSON Schema properties to show in the Workflow Settings panel. Values are persisted in workflow.config. */
     workflowSettingsSchema?: ConfigSchema;
+    /**
+     * Override user-facing strings. Pass either a partial of the `Messages`
+     * tree directly, or a callback that returns one. Missing keys fall through
+     * to English defaults.
+     *
+     * For static overrides, a value is fine: `messages={{ common: { save: 'Apply' } }}`.
+     * For reactive overrides driven by an i18n library (paraglide, etc.),
+     * either form works — Svelte 5's prop reactivity propagates locale changes.
+     * The callback form is useful when your translations live behind a
+     * function call you'd rather not invoke unless the prop is actually read.
+     */
+    messages?: MessagesOverride | (() => MessagesOverride);
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/ConfigModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ConfigSchema, ConfigValues } from '../types';
   import ConfigForm from './ConfigForm.svelte';
+  import { m } from '../messages/index.js';
 
   interface Props {
     isOpen: boolean;
@@ -60,7 +61,7 @@
           type="button"
           class="config-modal__close-btn"
           onclick={handleClose}
-          aria-label="Close configuration modal"
+          aria-label={m().navigation.closeConfigModal}
         >
           <span aria-hidden="true">×</span>
         </button>

package/dist/components/ConfigPanel.svelte

@@ -11,6 +11,7 @@
   import Icon from '@iconify/svelte';
   import ReadOnlyDetails from './ReadOnlyDetails.svelte';
   import { getUiSettings } from '../stores/settingsStore.svelte.js';
+  import { m } from '../messages/index.js';
 
   /**
    * A single detail item with label and value
@@ -70,13 +71,13 @@
         <button
           class="config-panel__action-btn"
           onclick={onSwap}
-          aria-label="Swap node"
+          aria-label={m().layout.swapNode}
           title="Swap node type"
         >
           <Icon icon="heroicons:arrows-right-left" />
         </button>
       {/if}
-      <button class="config-panel__close" onclick={onClose} aria-label="Close panel"> × </button>
+      <button class="config-panel__close" onclick={onClose} aria-label={m().layout.closeConfigPanel}> × </button>
     </div>
   </div>
 

package/dist/components/FlowDropZone.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import { useSvelteFlow } from '@xyflow/svelte';
   import type { Snippet } from 'svelte';
+  import { m } from '../messages/index.js';
 
   interface Props {
     ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
@@ -68,7 +69,7 @@
 <div
   class="flow-drop-zone"
   role="application"
-  aria-label="Workflow canvas"
+  aria-label={m().layout.workflowCanvas}
   ondragover={handleDragOver}
   ondrop={handleDrop}
 >

package/dist/components/LogsSidebar.svelte

@@ -8,6 +8,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
+  import { m } from '../messages/index.js';
 
   interface LogEntry {
     timestamp: string;
@@ -163,7 +164,7 @@
   class="logs-sidebar"
   class:logs-sidebar--open={props.isOpen}
   role="dialog"
-  aria-label="Execution logs sidebar"
+  aria-label={m().layout.executionLogs}
   aria-modal="true"
   tabindex="-1"
   onkeydown={handleKeydown}
@@ -189,7 +190,7 @@
       class="logs-sidebar__close-btn"
       onclick={handleClose}
       title="Close logs sidebar (Esc)"
-      aria-label="Close logs sidebar"
+      aria-label={m().layout.closeLogsSidebar}
     >
       <Icon icon="mdi:close" />
     </button>

package/dist/components/Navbar.svelte

@@ -11,6 +11,7 @@
   import Logo from './Logo.svelte';
   import SettingsModal from './SettingsModal.svelte';
   import type { SettingsCategory } from '../types/settings.js';
+  import { m } from '../messages/index.js';
 
   interface NavbarAction {
     label: string;
@@ -64,6 +65,9 @@
   // Settings modal state
   let isSettingsOpen = $state(false);
 
+  // Hoist the navigation branch — six reads in the template.
+  const nav = $derived(m().navigation);
+
   // Close dropdown when clicking outside
   function handleClickOutside(event: MouseEvent) {
     const target = event.target as HTMLElement;
@@ -90,8 +94,8 @@
           <Logo />
         </div>
         <div>
-          <h1 class="flowdrop-text--logo flowdrop-font--bold">FlowDrop</h1>
-          <p class="flowdrop-text--tagline flowdrop-text--gray">Visual Workflow Manager</p>
+          <h1 class="flowdrop-text--logo flowdrop-font--bold">{nav.appName}</h1>
+          <p class="flowdrop-text--tagline flowdrop-text--gray">{nav.tagline}</p>
         </div>
       </div>
     </div>
@@ -104,7 +108,7 @@
         <div class="flowdrop-navbar__status-container">
           <div class="flowdrop-navbar__status">
             <div class="flowdrop-navbar__status-indicator"></div>
-            <span class="flowdrop-navbar__status-text">Connected</span>
+            <span class="flowdrop-navbar__status-text">{nav.connected}</span>
           </div>
         </div>
       {/if}
@@ -112,7 +116,7 @@
       <!-- Title or Breadcrumbs on bottom -->
       {#if breadcrumbs.length > 0}
         <div class="flowdrop-navbar__breadcrumb-container">
-          <nav class="flowdrop-navbar__breadcrumb" aria-label="Breadcrumb">
+          <nav class="flowdrop-navbar__breadcrumb" aria-label={nav.breadcrumbAriaLabel}>
             <ol class="flowdrop-navbar__breadcrumb-list">
               {#each breadcrumbs as breadcrumb, index (index)}
                 <li class="flowdrop-navbar__breadcrumb-item">
@@ -241,8 +245,8 @@
       <button
         class="flowdrop-navbar__settings-btn"
         onclick={() => (isSettingsOpen = true)}
-        title="Settings"
-        aria-label="Open settings"
+        title={nav.settingsTitle}
+        aria-label={nav.settingsAriaLabel}
       >
         <Icon icon="mdi:cog" />
       </button>

package/dist/components/NodeSidebar.svelte

@@ -13,6 +13,7 @@
   import { getCategoryLabel } from '../stores/categoriesStore.svelte.js';
   import { getUiSettings } from '../stores/settingsStore.svelte.js';
   import { extractConfigDefaults } from '../utils/nodeIds.js';
+  import { m } from '../messages/index.js';
 
   interface Props {
     nodes: NodeMetadata[];
@@ -168,7 +169,7 @@
   class:flowdrop-sidebar--collapsed={isCollapsed}
   class:flowdrop-sidebar--compact={getUiSettings().compactMode}
   style:width="{isCollapsed ? 0 : getUiSettings().sidebarWidth}px"
-  aria-label="Components sidebar"
+  aria-label={m().layout.componentsSidebar}
 >
   <!-- Search Section — visibility controlled by --fd-sidebar-search-display -->
   <div class="flowdrop-sidebar__search">
@@ -176,13 +177,13 @@
       <div class="flowdrop-join__item flowdrop-flex--1">
         <input
           type="text"
-          placeholder="Search components..."
+          placeholder={m().layout.searchComponents}
           class="flowdrop-input flowdrop-join__item flowdrop-w--full"
           bind:value={searchInput}
           oninput={handleSearchChange}
         />
       </div>
-      <button class="flowdrop-btn flowdrop-join__item" aria-label="Search components">
+      <button class="flowdrop-btn flowdrop-join__item" aria-label={m().layout.searchComponents}>
         <Icon icon="mdi:magnify" class="flowdrop-icon" />
       </button>
     </div>

package/dist/components/NodeStatusOverlay.svelte

@@ -17,6 +17,7 @@
     formatExecutionDuration,
     formatLastExecuted
   } from '../utils/nodeStatus.js';
+  import { m } from '../messages/index.js';
 
   interface Props {
     nodeId?: string;
@@ -79,6 +80,9 @@
   let shouldShow = $derived(
     executionInfo.status !== 'idle' || executionInfo.executionCount > 0 || executionInfo.isExecuting
   );
+
+  // Hoist the overlay branch — seven reads in the template.
+  const overlay = $derived(m().status.overlay);
 </script>
 
 {#if shouldShow}
@@ -98,9 +102,12 @@
 		"
     onmouseenter={() => (isHovered = true)}
     onmouseleave={() => (isHovered = false)}
-    title="{getStatusLabel(executionInfo.status)} - Executed {executionInfo.executionCount} times"
+    title={overlay.tooltip({
+      status: getStatusLabel(executionInfo.status),
+      count: executionInfo.executionCount
+    })}
     role="status"
-    aria-label="Node execution status: {getStatusLabel(executionInfo.status)}"
+    aria-label={overlay.ariaLabel({ status: getStatusLabel(executionInfo.status) })}
   >
     <!-- Status Display: [icon] [label] -->
     <div
@@ -130,18 +137,18 @@
     {#if showDetails && isHovered}
       <div class="node-status-overlay__details">
         <div class="node-status-overlay__detail-item">
-          <span class="node-status-overlay__detail-label">Status:</span>
+          <span class="node-status-overlay__detail-label">{overlay.statusLabel}</span>
           <span class="node-status-overlay__detail-value"
             >{getStatusLabel(executionInfo.status)}</span
           >
         </div>
         <div class="node-status-overlay__detail-item">
-          <span class="node-status-overlay__detail-label">Executions:</span>
+          <span class="node-status-overlay__detail-label">{overlay.executionsLabel}</span>
           <span class="node-status-overlay__detail-value">{executionInfo.executionCount}</span>
         </div>
         {#if executionInfo.lastExecuted}
           <div class="node-status-overlay__detail-item">
-            <span class="node-status-overlay__detail-label">Last Run:</span>
+            <span class="node-status-overlay__detail-label">{overlay.lastRunLabel}</span>
             <span class="node-status-overlay__detail-value"
               >{formatLastExecuted(executionInfo.lastExecuted)}</span
             >
@@ -149,7 +156,7 @@
         {/if}
         {#if executionInfo.lastExecutionDuration}
           <div class="node-status-overlay__detail-item">
-            <span class="node-status-overlay__detail-label">Duration:</span>
+            <span class="node-status-overlay__detail-label">{overlay.durationLabel}</span>
             <span class="node-status-overlay__detail-value"
               >{formatExecutionDuration(executionInfo.lastExecutionDuration)}</span
             >
@@ -157,7 +164,7 @@
         {/if}
         {#if executionInfo.lastError}
           <div class="node-status-overlay__detail-item node-status-overlay__detail-item--error">
-            <span class="node-status-overlay__detail-label">Error:</span>
+            <span class="node-status-overlay__detail-label">{overlay.errorLabel}</span>
             <span class="node-status-overlay__detail-value">{executionInfo.lastError}</span>
           </div>
         {/if}

package/dist/components/NodeSwapPicker.svelte

@@ -10,6 +10,7 @@
   import Icon from '@iconify/svelte';
   import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
   import { getCategoryColorToken } from '../utils/colors.js';
+  import { m } from '../messages/index.js';
   import { getCategoryLabel } from '../stores/categoriesStore.svelte.js';
   import { getVersionUpgrade } from '../utils/nodeSwap.js';
 
@@ -80,7 +81,7 @@
 <div class="swap-picker">
   <!-- Header -->
   <div class="swap-picker__header">
-    <button class="swap-picker__back" onclick={onCancel} aria-label="Back to configuration">
+    <button class="swap-picker__back" onclick={onCancel} aria-label={m().layout.backToConfiguration}>
       <Icon icon="heroicons:arrow-left" />
     </button>
     <h2 class="swap-picker__title">Swap Node</h2>

package/dist/components/PipelineStatus.svelte

@@ -13,6 +13,7 @@
   import type { Workflow } from '../types/index.js';
   import type { EndpointConfig } from '../config/endpoints.js';
   import { logger } from '../utils/logger.js';
+  import { m } from '../messages/index.js';
 
   interface Props {
     pipelineId: string;
@@ -166,9 +167,10 @@
    * Get pipeline actions for the parent navbar
    */
   function getPipelineActions() {
+    const sp = m().status.pipeline;
     return [
       {
-        label: isLoadingJobStatus ? 'Refreshing...' : 'Refresh Status',
+        label: isLoadingJobStatus ? sp.refreshing : sp.refresh,
         href: '#refresh',
         icon: isLoadingJobStatus ? 'mdi:loading' : 'mdi:refresh',
         variant: 'outline' as const,
@@ -178,7 +180,7 @@
         }
       },
       {
-        label: 'View Logs',
+        label: sp.viewLogs,
         href: '#logs',
         icon: 'mdi:file-document-outline',
         variant: 'outline' as const,
@@ -214,29 +216,30 @@
   // Send pipeline breadcrumbs to layout when they change
   $effect(() => {
     if (pipelineStatus && pipelineId && workflow) {
+      const sp = m().status.pipeline;
       const breadcrumbs = [
         {
-          label: 'Home',
+          label: sp.home,
           href: '/',
           icon: 'mdi:home'
         },
         {
-          label: 'Workflows',
+          label: sp.workflows,
           href: '/',
           icon: 'mdi:view-list'
         },
         {
-          label: workflow.name || 'Workflow',
+          label: workflow.name || sp.workflow,
           href: `/workflow/${workflow.id}/edit`,
           icon: 'mdi:workflow'
         },
         {
-          label: 'Pipelines',
+          label: sp.pipelines,
           href: `/workflow/${workflow.id}/pipelines`,
           icon: 'mdi:source-branch'
         },
         {
-          label: `Pipeline ${pipelineId} - ${pipelineStatus}`,
+          label: sp.pipelineCrumb({ id: pipelineId, status: pipelineStatus }),
           icon: 'mdi:play-circle'
         }
       ];

package/dist/components/ReadOnlyDetails.svelte

@@ -5,6 +5,8 @@
 -->
 
 <script lang="ts">
+  import { m } from '../messages/index.js';
+
   /**
    * A single detail item with label and value
    */
@@ -52,8 +54,8 @@
       <button
         class="readonly-details__copy-btn"
         onclick={copyId}
-        title="Copy ID"
-        aria-label="Copy ID to clipboard"
+        title={m().navigation.copyId}
+        aria-label={m().navigation.copyId}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"