@flowdrop/flowdrop 1.6.0 → 1.8.0

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"

package/dist/components/SchemaForm.svelte

@@ -61,6 +61,7 @@
   import { FormField } from './form/index.js';
   import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
   import type { FieldSchema } from './form/index.js';
+  import { m, warnDeprecatedProp } from '../messages/index.js';
 
   /**
    * Props interface for SchemaForm component
@@ -100,14 +101,12 @@
     showActions?: boolean;
 
     /**
-     * Label for the save button.
-     * @default "Save"
+     * @deprecated since v1.8 — use `messages.form.schema.save`. Removed in v2.0.
      */
     saveLabel?: string;
 
     /**
-     * Label for the cancel button.
-     * @default "Cancel"
+     * @deprecated since v1.8 — use `messages.form.schema.cancel`. Removed in v2.0.
      */
     cancelLabel?: string;
 
@@ -160,8 +159,8 @@
     values = {},
     onChange,
     showActions = false,
-    saveLabel = 'Save',
-    cancelLabel = 'Cancel',
+    saveLabel,
+    cancelLabel,
     onSave,
     onCancel,
     loading = false,
@@ -171,6 +170,18 @@
     baseUrl = ''
   }: Props = $props();
 
+  // svelte-ignore state_referenced_locally — deprecation warns once per mount; later prop rebinds aren't relevant
+  if (saveLabel !== undefined) {
+    warnDeprecatedProp('SchemaForm', 'saveLabel', 'messages.form.schema.save');
+  }
+  // svelte-ignore state_referenced_locally
+  if (cancelLabel !== undefined) {
+    warnDeprecatedProp('SchemaForm', 'cancelLabel', 'messages.form.schema.cancel');
+  }
+
+  const resolvedSaveLabel = $derived(saveLabel ?? m().form.schema.save);
+  const resolvedCancelLabel = $derived(cancelLabel ?? m().form.schema.cancel);
+
   // Set context for child components (e.g., FormAutocomplete)
   // Use getter functions to ensure child components always get the current prop value,
   // even if the prop changes after initial mount
@@ -352,7 +363,7 @@
           disabled={loading}
         >
           <Icon icon="heroicons:x-mark" class="schema-form__button-icon" />
-          <span>{cancelLabel}</span>
+          <span>{resolvedCancelLabel}</span>
         </button>
         <button
           type="submit"
@@ -364,7 +375,7 @@
           {:else}
             <Icon icon="heroicons:check" class="schema-form__button-icon" />
           {/if}
-          <span>{saveLabel}</span>
+          <span>{resolvedSaveLabel}</span>
         </button>
       </div>
     {/if}
@@ -374,7 +385,7 @@
     <div class="schema-form__empty-icon">
       <Icon icon="heroicons:document-text" />
     </div>
-    <p class="schema-form__empty-text">No schema properties defined.</p>
+    <p class="schema-form__empty-text">{m().form.schema.empty}</p>
   </div>
 {/if}
 

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

@@ -33,13 +33,11 @@ interface Props {
      */
     showActions?: boolean;
     /**
-     * Label for the save button.
-     * @default "Save"
+     * @deprecated since v1.8 — use `messages.form.schema.save`. Removed in v2.0.
      */
     saveLabel?: string;
     /**
-     * Label for the cancel button.
-     * @default "Cancel"
+     * @deprecated since v1.8 — use `messages.form.schema.cancel`. Removed in v2.0.
      */
     cancelLabel?: string;
     /**

package/dist/components/SettingsModal.svelte

@@ -27,6 +27,7 @@
   import Icon from '@iconify/svelte';
   import SettingsPanel from './SettingsPanel.svelte';
   import type { SettingsCategory } from '../types/settings.js';
+  import { m } from '../messages/index.js';
 
   /**
    * Props interface for SettingsModal component
@@ -131,13 +132,13 @@
     <div class="flowdrop-settings-modal__header">
       <h2 id="settings-modal-title" class="flowdrop-settings-modal__title">
         <Icon icon="mdi:cog" class="flowdrop-settings-modal__title-icon" />
-        Settings
+        {m().navigation.settingsTitle}
       </h2>
       <button
         class="flowdrop-settings-modal__close"
         onclick={closeModal}
-        aria-label="Close settings"
-        title="Close"
+        aria-label={m().navigation.closeSettings}
+        title={m().common.close}
       >
         <Icon icon="mdi:close" />
       </button>

package/dist/components/SettingsPanel.svelte

@@ -30,6 +30,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import { SchemaForm } from '../form/index.js';
+  import { m } from '../messages/index.js';
   import type { ConfigSchema } from '../types/index.js';
   import type { SettingsCategory } from '../types/settings.js';
   import {
@@ -231,7 +232,7 @@
         },
         chatAutoRetry: {
           type: 'boolean',
-          title: 'AI Chat Auto-retry',
+          title: 'AI Assistant Auto-retry',
           description: 'Automatically ask the AI to self-correct when commands fail',
           default: true
         }
@@ -361,7 +362,7 @@
 
 <div class="flowdrop-settings-panel {className}">
   <!-- Tab Navigation -->
-  <div class="flowdrop-settings-panel__tabs" role="tablist" aria-label="Settings categories">
+  <div class="flowdrop-settings-panel__tabs" role="tablist" aria-label={m().layout.settingsCategories}>
     {#each categories as category, index (category)}
       <button
         class="flowdrop-settings-panel__tab"

package/dist/components/SwapMappingEditor.svelte

@@ -14,6 +14,7 @@
   import { getCategoryColorToken } from '../utils/colors.js';
   import PortMappingRow from './PortMappingRow.svelte';
   import ConfigMappingRow from './ConfigMappingRow.svelte';
+  import { m } from '../messages/index.js';
 
   interface Props {
     interactiveState: InteractiveSwapState;
@@ -129,7 +130,7 @@
 <div class="swap-editor">
   <!-- Header -->
   <div class="swap-editor__header">
-    <button class="swap-editor__back" onclick={onBack} aria-label="Back to node selection">
+    <button class="swap-editor__back" onclick={onBack} aria-label={m().layout.backToNodeSelection}>
       <Icon icon="heroicons:arrow-left" />
     </button>
     <h2 class="swap-editor__title">Swap Mapping</h2>

package/dist/components/WorkflowEditor.svelte

@@ -35,6 +35,7 @@
   import type { EndpointConfig } from '../config/endpoints.js';
   import ConnectionLine from './ConnectionLine.svelte';
   import FlowDropEdge from './FlowDropEdge.svelte';
+  import { m } from '../messages/index.js';
   import { getWorkflowStore, workflowActions } from '../stores/workflowStore.svelte.js';
   import { historyActions, setOnRestoreCallback } from '../stores/historyStore.svelte.js';
   import UniversalNode from './UniversalNode.svelte';
@@ -835,8 +836,8 @@
                   class="flowdrop-console-toggle"
                   class:flowdrop-console-toggle--active={props.consoleOpen}
                   onclick={props.onToggleConsole}
-                  aria-label="Command Console (`)"
-                  title="Command Console (`)"
+                  aria-label={m().layout.commandConsole}
+                  title={m().layout.commandConsole}
                   type="button"
                 >
                   <Icon icon="heroicons:command-line" width="18" height="18" />

package/dist/components/chat/AIChatPanel.svelte

@@ -15,6 +15,7 @@
   import MarkdownDisplay from '../MarkdownDisplay.svelte';
   import { tick } from 'svelte';
   import Icon from '@iconify/svelte';
+  import { m, warnDeprecatedProp } from '../../messages/index.js';
 
   // =========================================================================
   // Internal Display Message Type
@@ -35,12 +36,26 @@
     nodeTypes: NodeMetadata[];
     workflowId?: string;
     onUIAction?: (action: UIAction) => void;
+    /**
+     * @deprecated since v1.8 — use `messages.chat.placeholder`. Removed in v2.0.
+     */
     placeholder?: string;
     endpointConfig?: EndpointConfig | null;
   }
 
   let { nodeTypes, workflowId, onUIAction, placeholder, endpointConfig }: Props = $props();
 
+  // svelte-ignore state_referenced_locally — deprecation warns once per mount; later prop rebinds aren't relevant
+  if (placeholder !== undefined) {
+    warnDeprecatedProp('AIChatPanel', 'placeholder', 'messages.chat.placeholder');
+  }
+
+  // Hoist the chat branch — read in placeholder, header, three welcome states,
+  // auto-retry banner, and the send button aria-label.
+  const t = $derived(m().chat);
+
+  const resolvedPlaceholder = $derived(placeholder ?? t.placeholder);
+
   // =========================================================================
   // State
   // =========================================================================
@@ -365,18 +380,18 @@
   }
 </script>
 
-<div class="ai-chat-panel" role="region" aria-label="AI Chat">
+<div class="ai-chat-panel" role="region" aria-label={t.aiAssistant}>
   {#if !isChatConfigured}
     <!-- No backend configured -->
     <div class="ai-chat-panel__notice">
       <Icon icon="mdi:robot-off-outline" />
-      <span>AI Chat requires backend configuration</span>
+      <span>{t.requiresBackend}</span>
     </div>
   {:else if isDisabled}
     <!-- No workflow loaded -->
     <div class="ai-chat-panel__notice">
       <Icon icon="mdi:chat-sleep-outline" />
-      <span>Load a workflow to start chatting</span>
+      <span>{t.loadWorkflow}</span>
     </div>
   {:else}
     <!-- Messages area -->
@@ -384,7 +399,7 @@
       {#if displayMessages.length === 0}
         <div class="ai-chat-panel__empty">
           <Icon icon="mdi:chat-outline" />
-          <span>Ask the AI to help build your workflow</span>
+          <span>{t.helpBuild}</span>
         </div>
       {/if}
       {#each displayMessages as message, msgIndex}
@@ -395,7 +410,7 @@
               msgIndex === displayMessages.length - 1}
           >
             <Icon icon="mdi:autorenew" />
-            <span>Auto-retrying (attempt {message.retryAttempt}/{MAX_AUTO_RETRIES})…</span>
+            <span>{t.autoRetry({ attempt: message.retryAttempt, max: MAX_AUTO_RETRIES })}</span>
           </div>
         {:else}
           <div class="ai-chat-panel__bubble ai-chat-panel__bubble--{message.role}">
@@ -443,7 +458,7 @@
         bind:value={inputValue}
         onkeydown={handleKeydown}
         class="ai-chat-panel__input"
-        placeholder={placeholder ?? 'Describe what you want to build...'}
+        placeholder={resolvedPlaceholder}
         rows="1"
         disabled={isLoading}
       ></textarea>
@@ -451,7 +466,7 @@
         class="ai-chat-panel__send"
         onclick={sendMessage}
         disabled={!canSend}
-        aria-label="Send message"
+        aria-label={t.send}
       >
         <Icon icon="mdi:send" />
       </button>

package/dist/components/chat/AIChatPanel.svelte.d.ts

@@ -5,6 +5,9 @@ interface Props {
     nodeTypes: NodeMetadata[];
     workflowId?: string;
     onUIAction?: (action: UIAction) => void;
+    /**
+     * @deprecated since v1.8 — use `messages.chat.placeholder`. Removed in v2.0.
+     */
     placeholder?: string;
     endpointConfig?: EndpointConfig | null;
 }

package/dist/components/chat/CommandPreview.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { CommandPreviewItem } from '../../types/chat.js';
   import Icon from '@iconify/svelte';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     commands: CommandPreviewItem[];
@@ -24,9 +25,12 @@
     resolvedAction = 'cancelled';
     onCancel();
   }
+
+  // Hoist the commandPreview branch — six template reads.
+  const t = $derived(m().chat.commandPreview);
 </script>
 
-<div class="command-preview" role="region" aria-label="Command preview">
+<div class="command-preview" role="region" aria-label={t.ariaLabel}>
   <div class="command-preview__list">
     {#each commands as command, i}
       <div class="command-preview__item command-preview__item--{command.status}">
@@ -54,16 +58,16 @@
       <span class="command-preview__resolved command-preview__resolved--applied">
         {#if isExecuting}
           <Icon icon="mdi:loading" />
-          Applying…
+          {t.applying}
         {:else}
           <Icon icon="mdi:check-all" />
-          Applied
+          {t.applied}
         {/if}
       </span>
     {:else if resolvedAction === 'cancelled'}
       <span class="command-preview__resolved command-preview__resolved--cancelled">
         <Icon icon="mdi:close" />
-        Dismissed
+        {t.dismissed}
       </span>
     {:else}
       <button
@@ -72,14 +76,14 @@
         disabled={!hasPending || isExecuting}
       >
         <Icon icon="mdi:check-all" />
-        Apply All
+        {t.applyAll}
       </button>
       <button
         class="command-preview__btn command-preview__btn--cancel"
         onclick={handleCancel}
         disabled={isExecuting}
       >
-        Cancel
+        {t.cancel}
       </button>
     {/if}
   </div>

package/dist/components/console/CommandConsole.svelte

@@ -23,6 +23,7 @@
   import { updateSettings, getUiSettings } from '../../stores/settingsStore.svelte.js';
   import ConsoleInput from './ConsoleInput.svelte';
   import ConsoleOutput, { type ConsoleEntry } from './ConsoleOutput.svelte';
+  import { m } from '../../messages/index.js';
   import {
     formatListNodes,
     formatListEdges,
@@ -186,13 +187,13 @@
   }
 </script>
 
-<div class="command-console" role="region" aria-label="Command Console">
+<div class="command-console" role="region" aria-label={m().layout.commandConsole}>
   <div class="command-console__header">
-    <h2 class="command-console__title">Console</h2>
+    <h2 class="command-console__title">{m().navigation.bottomPanel.console}</h2>
     <button
       class="command-console__close"
       onclick={closeConsole}
-      aria-label="Close console"
+      aria-label={m().layout.closeConsole}
       type="button"
     >
       &times;

package/dist/components/form/FormArray.svelte

@@ -20,6 +20,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import type { FieldSchema } from './types.js';
+  import { m, warnDeprecatedProp } from '../../messages/index.js';
 
   interface Props {
     /** Field identifier */
@@ -32,7 +33,9 @@
     minItems?: number;
     /** Maximum number of items allowed */
     maxItems?: number;
-    /** Label for add button */
+    /**
+     * @deprecated since v1.8 — use `messages.form.array.add`. Removed in v2.0.
+     */
     addLabel?: string;
     /** Whether the field is disabled */
     disabled?: boolean;
@@ -46,11 +49,21 @@
     itemSchema,
     minItems = 0,
     maxItems,
-    addLabel = 'Add Item',
+    addLabel,
     disabled = false,
     onChange
   }: Props = $props();
 
+  // svelte-ignore state_referenced_locally — deprecation warns once per mount; later prop rebinds aren't relevant
+  if (addLabel !== undefined) {
+    warnDeprecatedProp('FormArray', 'addLabel', 'messages.form.array.add');
+  }
+
+  // Hoist the array branch — every {#each} iteration would otherwise re-walk
+  // `m().form.array.*` for ~6 keys per item. One getter call instead of N×6.
+  const t = $derived(m().form.array);
+  const resolvedAddLabel = $derived(addLabel ?? t.add);
+
   /**
    * Ensure value is always an array
    */
@@ -197,7 +210,7 @@
       const itemStr = String(item);
       return itemStr.length > 30
         ? `${itemStr.substring(0, 30)}...`
-        : itemStr || `Item ${index + 1}`;
+        : itemStr || t.itemLabel({ n: index + 1 });
     }
 
     // For objects, try to find a name/label/title property
@@ -211,7 +224,7 @@
       }
     }
 
-    return `Item ${index + 1}`;
+    return t.itemLabel({ n: index + 1 });
   }
 
   /**
@@ -260,7 +273,7 @@
                 class="form-array__item-toggle"
                 onclick={() => toggleCollapse(index)}
                 aria-expanded={!isCollapsed(index)}
-                aria-label={isCollapsed(index) ? 'Expand item' : 'Collapse item'}
+                aria-label={isCollapsed(index) ? t.expandItem : t.collapseItem}
               >
                 <Icon
                   icon={isCollapsed(index) ? 'heroicons:chevron-right' : 'heroicons:chevron-down'}
@@ -280,8 +293,8 @@
                 class="form-array__action-btn form-array__action-btn--move"
                 onclick={() => moveItemUp(index)}
                 disabled={index === 0 || disabled}
-                aria-label="Move item {index + 1} up"
-                title="Move up"
+                aria-label={t.moveItemUp({ n: index + 1 })}
+                title={t.moveUp}
               >
                 <Icon icon="heroicons:arrow-up" />
               </button>
@@ -292,8 +305,8 @@
                 class="form-array__action-btn form-array__action-btn--move"
                 onclick={() => moveItemDown(index)}
                 disabled={index === items.length - 1 || disabled}
-                aria-label="Move item {index + 1} down"
-                title="Move down"
+                aria-label={t.moveItemDown({ n: index + 1 })}
+                title={t.moveDown}
               >
                 <Icon icon="heroicons:arrow-down" />
               </button>
@@ -304,8 +317,8 @@
                 class="form-array__action-btn form-array__action-btn--delete"
                 onclick={() => removeItem(index)}
                 disabled={!canRemoveItem || disabled}
-                aria-label="Delete item {index + 1}"
-                title="Delete item"
+                aria-label={t.deleteItem({ n: index + 1 })}
+                title={t.delete}
               >
                 <Icon icon="heroicons:trash" />
               </button>
@@ -366,7 +379,7 @@
                     <span class="form-array__toggle-thumb"></span>
                   </span>
                   <span class="form-array__toggle-label">
-                    {item ? 'Yes' : 'No'}
+                    {item ? t.yes : t.no}
                   </span>
                 </label>
               {:else if itemSchema.enum}
@@ -480,7 +493,7 @@
                               <span class="form-array__toggle-thumb"></span>
                             </span>
                             <span class="form-array__toggle-label">
-                              {propValue ? 'Yes' : 'No'}
+                              {propValue ? t.yes : t.no}
                             </span>
                           </label>
                         {:else}
@@ -510,7 +523,7 @@
               <!-- Unknown complex type -->
               <div class="form-array__unsupported">
                 <p>
-                  Complex item type "{itemSchema.type}" is not fully supported.
+                  {t.unsupported({ type: String(itemSchema.type ?? '') })}
                 </p>
               </div>
             {/if}
@@ -522,7 +535,7 @@
     <!-- Empty State -->
     <div class="form-array__empty">
       <Icon icon="heroicons:squares-plus" class="form-array__empty-icon" />
-      <p class="form-array__empty-text">No items yet</p>
+      <p class="form-array__empty-text">{t.empty}</p>
     </div>
   {/if}
 
@@ -532,21 +545,21 @@
     class="form-array__add-btn"
     onclick={addItem}
     disabled={!canAddItem || disabled}
-    aria-label={addLabel}
+    aria-label={resolvedAddLabel}
   >
     <Icon icon="heroicons:plus" />
-    <span>{addLabel}</span>
+    <span>{resolvedAddLabel}</span>
   </button>
 
   <!-- Item count and limits -->
   {#if minItems > 0 || maxItems !== undefined}
     <div class="form-array__info">
-      <span class="form-array__count">{items.length} item{items.length !== 1 ? 's' : ''}</span>
+      <span class="form-array__count">{t.count({ n: items.length })}</span>
       {#if minItems > 0}
-        <span class="form-array__limit">Min: {minItems}</span>
+        <span class="form-array__limit">{t.min({ n: minItems })}</span>
       {/if}
       {#if maxItems !== undefined}
-        <span class="form-array__limit">Max: {maxItems}</span>
+        <span class="form-array__limit">{t.max({ n: maxItems })}</span>
       {/if}
     </div>
   {/if}

package/dist/components/form/FormArray.svelte.d.ts

@@ -10,7 +10,9 @@ interface Props {
     minItems?: number;
     /** Maximum number of items allowed */
     maxItems?: number;
-    /** Label for add button */
+    /**
+     * @deprecated since v1.8 — use `messages.form.array.add`. Removed in v2.0.
+     */
     addLabel?: string;
     /** Whether the field is disabled */
     disabled?: boolean;