@flowdrop/flowdrop 1.7.0 → 1.8.0

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;

package/dist/components/form/FormAutocomplete.svelte

@@ -27,6 +27,7 @@
   import type { FieldOption } from './types.js';
   import { buildFetchHeaders } from '../../utils/fetchWithAuth.js';
   import { logger } from '../../utils/logger.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Props interface for FormAutocomplete component
@@ -68,6 +69,10 @@
   );
   const getBaseUrl = getContext<(() => string) | undefined>('flowdrop:getBaseUrl');
 
+  // Hoist the autocomplete branch — seven reads in the template, one inside
+  // an {#each tag} loop. One getter walk per render.
+  const t = $derived(m().form.autocomplete);
+
   // Configuration with defaults
   const queryParam = $derived(autocomplete.queryParam ?? 'q');
   const minChars = $derived(autocomplete.minChars ?? 0);
@@ -579,7 +584,9 @@
               <button
                 type="button"
                 class="form-autocomplete__tag-remove"
-                aria-label={`Remove ${getDisplayLabel(selectedVal)}`}
+                aria-label={t.removeTag({
+                  label: getDisplayLabel(selectedVal)
+                })}
                 onclick={(e) => {
                   e.stopPropagation();
                   removeTag(selectedVal);
@@ -622,14 +629,14 @@
     <!-- Status icons -->
     <div class="form-autocomplete__icons">
       {#if isLoading}
-        <span class="form-autocomplete__spinner" aria-label="Loading suggestions">
+        <span class="form-autocomplete__spinner" aria-label={t.loading}>
           <Icon icon="heroicons:arrow-path" />
         </span>
       {:else if selectedValues.length > 0 && !disabled}
         <button
           type="button"
           class="form-autocomplete__clear"
-          aria-label="Clear all selections"
+          aria-label={t.clearAll}
           onclick={(e) => {
             e.stopPropagation();
             handleClearAll();
@@ -657,24 +664,28 @@
     style={popoverStyle}
     onmousedown={(e) => e.preventDefault()}
   >
-    <ul class="form-autocomplete__listbox" role="listbox" aria-label="Suggestions">
+    <ul
+      class="form-autocomplete__listbox"
+      role="listbox"
+      aria-label={t.suggestions}
+    >
       {#if isLoading}
         <li class="form-autocomplete__status form-autocomplete__status--loading">
           <Icon icon="heroicons:arrow-path" class="form-autocomplete__status-icon" />
-          <span>Loading suggestions...</span>
+          <span>{t.loadingPending}</span>
         </li>
       {:else if error}
         <li class="form-autocomplete__status form-autocomplete__status--error">
           <Icon icon="heroicons:exclamation-triangle" class="form-autocomplete__status-icon" />
           <span>{error}</span>
           <button type="button" class="form-autocomplete__retry" onclick={handleRetry}>
-            Retry
+            {t.retry}
           </button>
         </li>
       {:else if suggestions.length === 0}
         <li class="form-autocomplete__status form-autocomplete__status--empty">
           <Icon icon="heroicons:magnifying-glass" class="form-autocomplete__status-icon" />
-          <span>No results found</span>
+          <span>{t.noResults}</span>
         </li>
       {:else}
         {#each suggestions as option, index (option.value)}

package/dist/components/form/FormCodeEditor.svelte

@@ -31,6 +31,7 @@
   import { json, jsonParseLinter } from '@codemirror/lang-json';
   import { oneDark } from '@codemirror/theme-one-dark';
   import { linter } from '@codemirror/lint';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     /** Field identifier */
@@ -322,7 +323,7 @@
     class:form-code-editor__container--dark={darkTheme}
     role="textbox"
     aria-multiline="true"
-    aria-label="JSON editor"
+    aria-label={m().form.code.editor}
     onblur={formatContent}
   ></div>
 

package/dist/components/form/FormFieldWrapper.svelte

@@ -11,6 +11,7 @@
 
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     /** Field identifier for label association */
@@ -42,7 +43,7 @@
       {label}
     </span>
     {#if required}
-      <span class="form-field__required" aria-label="required">*</span>
+      <span class="form-field__required" aria-label={m().form.field.required}>*</span>
     {/if}
   </label>