@flowdrop/flowdrop 1.7.0 → 1.8.0

package/dist/components/interrupt/InterruptBubble.svelte

@@ -37,6 +37,7 @@
   } from '../../stores/interruptStore.svelte.js';
   import { interruptService } from '../../services/interruptService.js';
   import { logger } from '../../utils/logger.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -105,41 +106,46 @@
     }
   }
 
+  // Hoist the bubble branch — five reads inside the header alone.
+  const t = $derived(m().interrupt.bubble);
+
   /**
    * Get the label for the interrupt type
    */
   function getTypeLabel(type: InterruptType): string {
+    const required = t.required;
     switch (type) {
       case 'confirmation':
-        return 'Confirmation Required';
+        return required.confirmation;
       case 'choice':
-        return 'Selection Required';
+        return required.selection;
       case 'text':
-        return 'Input Required';
+        return required.input;
       case 'form':
-        return 'Form Required';
+        return required.form;
       case 'review':
-        return 'Review Required';
+        return required.review;
       default:
-        return 'Action Required';
+        return required.default;
     }
   }
 
   /** Get resolved label for the header when resolved */
   function getResolvedLabel(type: InterruptType): string {
+    const submitted = t.submitted;
     switch (type) {
       case 'confirmation':
-        return 'Confirmation Submitted';
+        return submitted.confirmation;
       case 'choice':
-        return 'Selection Made';
+        return submitted.selection;
       case 'text':
-        return 'Input Submitted';
+        return submitted.input;
       case 'form':
-        return 'Form Submitted';
+        return submitted.form;
       case 'review':
-        return 'Review Submitted';
+        return submitted.review;
       default:
-        return 'Response Submitted';
+        return submitted.default;
     }
   }
 
@@ -257,10 +263,10 @@
       <Icon icon={getTypeIcon(currentInterrupt.type)} />
       {#if isResolved}
         {currentInterrupt.machineState.status === 'cancelled'
-          ? 'Cancelled'
+          ? t.cancelled
           : getResolvedLabel(currentInterrupt.type)}
       {:else if currentInterrupt.machineState.status === 'error'}
-        Error - Click to Retry
+        {t.errorRetry}
       {:else}
         {getTypeLabel(currentInterrupt.type)}
       {/if}
@@ -279,7 +285,7 @@
       <span>{error}</span>
       <button type="button" class="interrupt-bubble__retry-btn" onclick={handleRetry}>
         <Icon icon="mdi:refresh" />
-        Retry
+        {t.retry}
       </button>
     </div>
   {/if}
@@ -344,9 +350,12 @@
   {#if currentInterrupt.nodeId || (currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation')}
     <div class="interrupt-bubble__footer">
       {#if currentInterrupt.nodeId}
-        <span class="interrupt-bubble__node" title="Node ID: {currentInterrupt.nodeId}">
+        <span
+          class="interrupt-bubble__node"
+          title={t.nodeIdTooltip({ id: currentInterrupt.nodeId })}
+        >
           <Icon icon="mdi:graph" />
-          <span>From workflow node</span>
+          <span>{t.fromWorkflow}</span>
         </span>
       {/if}
       {#if currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation'}
@@ -357,7 +366,7 @@
           disabled={isSubmitting}
         >
           <Icon icon="mdi:close" />
-          <span>Cancel</span>
+          <span>{t.cancel}</span>
         </button>
       {/if}
     </div>

package/dist/components/interrupt/ReviewPrompt.svelte

@@ -18,6 +18,7 @@
     ReviewResolution,
     ReviewFieldDecision
   } from '../../types/interrupt.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -70,10 +71,14 @@
   /** Total number of changes */
   const totalCount = $derived(config.changes.length);
 
-  /** Button labels with defaults */
-  const acceptAllLabel = $derived(config.acceptAllLabel ?? 'Accept All');
-  const rejectAllLabel = $derived(config.rejectAllLabel ?? 'Reject All');
-  const submitLabel = $derived(config.submitLabel ?? 'Submit Review');
+  // Hoist the review branch — 18 reads inside the template, plus three label
+  // resolvers below. One getter walk per render is enough.
+  const t = $derived(m().interrupt.review);
+
+  /** Button labels — config wins, falls back to messages tree. */
+  const acceptAllLabel = $derived(config.acceptAllLabel ?? t.acceptAll);
+  const rejectAllLabel = $derived(config.rejectAllLabel ?? t.rejectAll);
+  const submitLabel = $derived(config.submitLabel ?? t.submit);
 
   /**
    * Set a specific field's decision
@@ -166,9 +171,9 @@
    * Format a value for display
    */
   function formatValue(value: unknown): string {
-    if (value === null || value === undefined) return '(empty)';
+    if (value === null || value === undefined) return t.empty;
     if (typeof value === 'string') return value;
-    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+    if (typeof value === 'boolean') return value ? t.yes : t.no;
     if (typeof value === 'object') return JSON.stringify(value, null, 2);
     return String(value);
   }
@@ -258,7 +263,7 @@
         </button>
       </div>
       <span class="review-prompt__counter">
-        {acceptedCount} of {totalCount} accepted
+        {t.counter({ accepted: acceptedCount, total: totalCount })}
       </span>
     </div>
   {/if}
@@ -288,11 +293,11 @@
                 class:review-prompt__toggle-btn--active={isAccepted}
                 onclick={() => setFieldDecision(change.field, true)}
                 disabled={isSubmitting}
-                aria-label="Accept {change.label}"
-                title="Accept"
+                aria-label={t.acceptItem({ label: change.label })}
+                title={t.accept}
               >
                 <Icon icon="mdi:check" />
-                <span>Accept</span>
+                <span>{t.accept}</span>
               </button>
               <button
                 type="button"
@@ -300,11 +305,11 @@
                 class:review-prompt__toggle-btn--active={!isAccepted}
                 onclick={() => setFieldDecision(change.field, false)}
                 disabled={isSubmitting}
-                aria-label="Reject {change.label}"
-                title="Reject"
+                aria-label={t.rejectItem({ label: change.label })}
+                title={t.reject}
               >
                 <Icon icon="mdi:close" />
-                <span>Reject</span>
+                <span>{t.reject}</span>
               </button>
             </div>
           {:else}
@@ -315,10 +320,10 @@
             >
               {#if isAccepted}
                 <Icon icon="mdi:check-circle" />
-                <span>Accepted</span>
+                <span>{t.accepted}</span>
               {:else}
                 <Icon icon="mdi:close-circle" />
-                <span>Rejected</span>
+                <span>{t.rejected}</span>
               {/if}
             </span>
           {/if}
@@ -334,12 +339,12 @@
                 onclick={() => toggleHtmlView(change.field)}
               >
                 <Icon icon={isRawView ? 'mdi:eye' : 'mdi:code-tags'} />
-                <span>{isRawView ? 'Rendered' : 'Raw HTML'}</span>
+                <span>{isRawView ? t.rendered : t.rawHtml}</span>
               </button>
             </div>
           {/if}
           <div class="review-prompt__diff-row">
-            <span class="review-prompt__diff-label">Original:</span>
+            <span class="review-prompt__diff-label">{t.original}</span>
             {#if isHtml && !isRawView}
               <span class="review-prompt__diff-value review-prompt__html-content"
                 >{@html sanitizeHtml(String(change.original))}</span
@@ -355,7 +360,7 @@
             {/if}
           </div>
           <div class="review-prompt__diff-row">
-            <span class="review-prompt__diff-label">Proposed:</span>
+            <span class="review-prompt__diff-label">{t.proposed}</span>
             {#if isHtml && !isRawView}
               <span
                 class="review-prompt__diff-value review-prompt__diff-value--proposed review-prompt__html-content"
@@ -374,7 +379,7 @@
           </div>
           {#if diff}
             <div class="review-prompt__diff-row">
-              <span class="review-prompt__diff-label">Diff:</span>
+              <span class="review-prompt__diff-label">{t.diff}</span>
               {#if isMultiLineDiff(diff)}
                 <pre
                   class="review-prompt__diff-value review-prompt__diff-block">{#each diff as part}{#if part.added}<span
@@ -425,8 +430,11 @@
   {#if isResolved && resolvedValue}
     <div class="review-prompt__summary">
       <span class="review-prompt__summary-text">
-        {resolvedValue.summary.accepted} accepted, {resolvedValue.summary.rejected} rejected out of {resolvedValue
-          .summary.total} changes
+        {t.summary({
+          accepted: resolvedValue.summary.accepted,
+          rejected: resolvedValue.summary.rejected,
+          total: resolvedValue.summary.total
+        })}
       </span>
     </div>
   {/if}
@@ -436,7 +444,9 @@
     <div class="review-prompt__resolved-badge">
       <Icon icon="mdi:check-circle" />
       <span>
-        {resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
+        {resolvedByUserName
+          ? m().interrupt.responseSubmittedBy({ name: resolvedByUserName })
+          : m().interrupt.responseSubmitted}
       </span>
     </div>
   {/if}

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -10,6 +10,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import type { TextConfig } from '../../types/interrupt.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -41,6 +42,10 @@
     onSubmit
   }: Props = $props();
 
+  // Hoist the text branch — placeholder/min/submit reads, including duplicate
+  // placeholder in single- vs. multiline branches.
+  const t = $derived(m().interrupt.text);
+
   /** Local state for input value */
   // svelte-ignore state_referenced_locally — initial default, user edits the input
   let inputValue = $state(config.defaultValue ?? '');
@@ -112,7 +117,7 @@
         class="text-prompt__textarea"
         class:text-prompt__textarea--resolved={isResolved}
         value={displayValue}
-        placeholder={config.placeholder ?? 'Enter your response...'}
+        placeholder={config.placeholder ?? t.placeholder}
         disabled={isResolved || isSubmitting}
         oninput={handleInput}
         onkeydown={handleKeyDown}
@@ -126,7 +131,7 @@
         class="text-prompt__input"
         class:text-prompt__input--resolved={isResolved}
         value={displayValue}
-        placeholder={config.placeholder ?? 'Enter your response...'}
+        placeholder={config.placeholder ?? t.placeholder}
         disabled={isResolved || isSubmitting}
         oninput={handleInput}
         onkeydown={handleKeyDown}
@@ -148,7 +153,7 @@
           / {config.maxLength}
         {/if}
         {#if config.minLength !== undefined}
-          (min: {config.minLength})
+          {t.min({ n: config.minLength })}
         {/if}
       </span>
     </div>
@@ -168,7 +173,7 @@
         {:else}
           <Icon icon="mdi:send" />
         {/if}
-        <span>Submit</span>
+        <span>{t.submit}</span>
       </button>
     </div>
   {/if}
@@ -178,7 +183,9 @@
     <div class="text-prompt__resolved-badge">
       <Icon icon="mdi:check-circle" />
       <span>
-        {resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
+        {resolvedByUserName
+          ? m().interrupt.responseSubmittedBy({ name: resolvedByUserName })
+          : m().interrupt.responseSubmitted}
       </span>
     </div>
   {/if}

package/dist/components/layouts/MainLayout.svelte

@@ -11,6 +11,7 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { m } from '../../messages/index.js';
 
   /**
    * Configuration props for the MainLayout component
@@ -342,7 +343,7 @@
           aria-valuenow={leftSidebarWidth}
           aria-valuemin={leftSidebarMinWidth}
           aria-valuemax={leftSidebarMaxWidth}
-          aria-label="Resize left sidebar"
+          aria-label={m().layout.resizeLeftSidebar}
           tabindex="0"
         >
           <div class="flowdrop-main-layout__divider-handle"></div>
@@ -377,7 +378,7 @@
           aria-valuenow={bottomPanelHeightState}
           aria-valuemin={bottomPanelMinHeight}
           aria-valuemax={bottomPanelMaxHeight}
-          aria-label="Resize bottom panel"
+          aria-label={m().layout.resizeBottomPanel}
           tabindex="0"
         >
           <div
@@ -408,7 +409,7 @@
         aria-valuenow={rightSidebarWidth}
         aria-valuemin={rightSidebarMinWidth}
         aria-valuemax={rightSidebarMaxWidth}
-        aria-label="Resize right sidebar"
+        aria-label={m().layout.resizeRightSidebar}
         tabindex="0"
       >
         <div class="flowdrop-main-layout__divider-handle"></div>

package/dist/components/nodes/GatewayNode.svelte

@@ -19,6 +19,7 @@
     getPortBackgroundColor
   } from '../../utils/colors.js';
   import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     data: WorkflowNode['data'] & {
@@ -30,6 +31,10 @@
 
   let props: Props = $props();
 
+  // Hoist the graph branch — three reads in the template, two inside
+  // {#each port} / {#each branch} loops. 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.
@@ -159,7 +164,7 @@
   onkeydown={handleKeydown}
   role="button"
   tabindex="0"
-  aria-label="Gateway node: {displayTitle}"
+  aria-label={graph.gatewayNode({ title: displayTitle })}
   aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
 >
   <!-- Node Header: expands in multiples of 10 (title row 40px + gap 10px + description 20px per line) -->
@@ -207,7 +212,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 -->
@@ -295,7 +300,7 @@
                   )}; --fd-handle-border-color: var(--fd-handle-border);"
               role="button"
               tabindex={0}
-              aria-label="Connect from {branch.name} branch"
+              aria-label={graph.connectBranch({ name: branch.name })}
             />
           </div>
         {/each}

package/dist/components/nodes/IdeaNode.svelte

@@ -11,6 +11,7 @@
   import type { ConfigValues, NodeMetadata } from '../../types/index.js';
   import Icon from '@iconify/svelte';
   import { getDataTypeColor } from '../../utils/colors.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * IdeaNode component props
@@ -142,7 +143,7 @@
   onkeydown={handleKeydown}
   role="button"
   tabindex="0"
-  aria-label="Idea node: {displayTitle}"
+  aria-label={m().nodes.graph.ideaNode({ title: displayTitle })}
 >
   <!-- Left Port (Target/Input): center at top 40px (multiple of 10), 20px connection area -->
   {#if enableLeftPort}

package/dist/components/nodes/NotesNode.svelte

@@ -2,6 +2,7 @@
   import type { ConfigValues, NodeMetadata } from '../../types/index.js';
   import Icon from '@iconify/svelte';
   import MarkdownDisplay from '../MarkdownDisplay.svelte';
+  import { m } from '../../messages/index.js';
 
   /**
    * NotesNode component props
@@ -24,40 +25,45 @@
     isError?: boolean;
   }>();
 
+  // Hoist the notes branch — read for placeholder, every type name, processing,
+  // error, and configure tooltip.
+  const notes = $derived(m().nodes.notes);
+
   /** Note content derived from config */
-  const noteContent = $derived((props.data.config?.content as string) || 'Add your notes here...');
+  const noteContent = $derived((props.data.config?.content as string) || notes.placeholder);
 
   /** Note type derived from config */
   const noteType = $derived((props.data.config?.noteType as string) || 'info');
 
-  /** Note type configuration with styling for each type */
-  const noteTypes = {
+  /** Note type configuration with styling for each type. Type names track the
+   * messages tree so locale changes flow through. */
+  const noteTypes = $derived({
     info: {
-      name: 'Info',
+      name: notes.types.info,
       typeClass: 'flowdrop-notes-node--info',
       icon: 'mdi:information'
     },
     warning: {
-      name: 'Warning',
+      name: notes.types.warning,
       typeClass: 'flowdrop-notes-node--warning',
       icon: 'mdi:alert'
     },
     success: {
-      name: 'Success',
+      name: notes.types.success,
       typeClass: 'flowdrop-notes-node--success',
       icon: 'mdi:check-circle'
     },
     error: {
-      name: 'Error',
+      name: notes.types.error,
       typeClass: 'flowdrop-notes-node--error',
       icon: 'mdi:close-circle'
     },
     note: {
-      name: 'Note',
+      name: notes.types.default,
       typeClass: 'flowdrop-notes-node--note',
       icon: 'mdi:note-text'
     }
-  };
+  });
 
   /** Current note type configuration based on selected type */
   const currentType = $derived(noteTypes[noteType as keyof typeof noteTypes] || noteTypes.info);
@@ -126,7 +132,7 @@
     {#if props.isProcessing}
       <div class="flowdrop-notes-node__processing">
         <div class="flowdrop-notes-node__spinner"></div>
-        <span>Processing...</span>
+        <span>{notes.processing}</span>
       </div>
     {/if}
 
@@ -134,7 +140,7 @@
     {#if props.isError}
       <div class="flowdrop-notes-node__error-indicator">
         <Icon icon="mdi:alert-circle" class="flowdrop-notes-node__error-icon" />
-        <span>Error occurred</span>
+        <span>{notes.errorOccurred}</span>
       </div>
     {/if}
   </div>
@@ -143,7 +149,7 @@
   <button
     class="flowdrop-notes-node__config-btn"
     onclick={openConfigSidebar}
-    title="Configure note"
+    title={notes.configure}
   >
     <Icon icon="mdi:cog" />
   </button>

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}