@flowdrop/flowdrop 1.6.0 → 1.8.0

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 */
@@ -91,13 +92,14 @@
       return '';
     }
     if (typeof val === 'string') {
-      // Check if it's already a valid JSON string
+      // If the string is already a valid JSON representation (e.g. '{"a":1}' or '"foo"'),
+      // use it as-is to avoid double-encoding
       try {
         JSON.parse(val);
         return val;
       } catch {
-        // Not valid JSON, return as-is
-        return val;
+        // Plain JS string value — serialize it as a JSON string literal (adds quotes)
+        return JSON.stringify(val);
       }
     }
     // Convert object to formatted JSON string
@@ -321,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>
 

package/dist/components/form/FormMarkdownEditor.svelte

@@ -18,20 +18,21 @@
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { EditorView, lineNumbers, drawSelection, keymap } from '@codemirror/view';
+  import { EditorView, lineNumbers, drawSelection, keymap, placeholder } from '@codemirror/view';
   import { EditorState, Compartment } from '@codemirror/state';
   import { history, historyKeymap, defaultKeymap, indentWithTab } from '@codemirror/commands';
   import { highlightSpecialChars, highlightActiveLine } from '@codemirror/view';
   import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
   import { markdown } from '@codemirror/lang-markdown';
   import { oneDark } from '@codemirror/theme-one-dark';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     /** Field identifier */
     id: string;
     /** Current value (markdown string) */
     value: string;
-    /** Placeholder text shown when empty */
+    /** Placeholder text shown when empty. Falls back to `messages.form.markdown.placeholder`. */
     placeholder?: string;
     /** Whether the field is required */
     required?: boolean;
@@ -60,7 +61,7 @@
   let {
     id,
     value = '',
-    placeholder = 'Write your markdown here...',
+    placeholder: placeholderProp,
     required = false,
     height = '300px',
     showToolbar = true,
@@ -97,6 +98,12 @@
   /** Theme compartment for dynamic theme switching */
   const themeCompartment = new Compartment();
 
+  /** Placeholder compartment so locale changes can reconfigure without rebuilding the editor */
+  const placeholderCompartment = new Compartment();
+
+  /** aria-label compartment so locale changes update the editor's accessible name */
+  const ariaLabelCompartment = new Compartment();
+
   // ── Toolbar actions ──────────────────────────────────────
 
   type ToolbarAction = {
@@ -165,104 +172,110 @@
     editorView.focus();
   }
 
-  const toolbarActions: (ToolbarAction | '|')[] = [
-    {
-      id: 'bold',
-      label: 'Bold',
-      icon: 'B',
-      shortcut: 'Mod-b',
-      action: () => wrapSelection('**', '**')
-    },
-    {
-      id: 'italic',
-      label: 'Italic',
-      icon: 'I',
-      shortcut: 'Mod-i',
-      action: () => wrapSelection('_', '_')
-    },
-    {
-      id: 'strikethrough',
-      label: 'Strikethrough',
-      icon: 'S',
-      action: () => wrapSelection('~~', '~~')
-    },
-    '|',
-    {
-      id: 'heading-1',
-      label: 'Heading 1',
-      icon: 'H1',
-      action: () => prefixLine('# ')
-    },
-    {
-      id: 'heading-2',
-      label: 'Heading 2',
-      icon: 'H2',
-      action: () => prefixLine('## ')
-    },
-    {
-      id: 'heading-3',
-      label: 'Heading 3',
-      icon: 'H3',
-      action: () => prefixLine('### ')
-    },
-    '|',
-    {
-      id: 'quote',
-      label: 'Quote',
-      icon: '"',
-      action: () => prefixLine('> ')
-    },
-    {
-      id: 'unordered-list',
-      label: 'Unordered List',
-      icon: '•',
-      action: () => prefixLine('- ')
-    },
-    {
-      id: 'ordered-list',
-      label: 'Ordered List',
-      icon: '1.',
-      action: () => prefixLine('1. ')
-    },
-    '|',
-    {
-      id: 'link',
-      label: 'Link',
-      icon: icons.link,
-      isSvg: true,
-      shortcut: 'Mod-k',
-      action: () => {
-        if (!editorView) return;
-        const { from, to } = editorView.state.selection.main;
-        const selected = editorView.state.sliceDoc(from, to);
-        const text = selected || 'link text';
-        const replacement = `[${text}](url)`;
-        editorView.dispatch({
-          changes: { from, to, insert: replacement },
-          selection: {
-            anchor: from + text.length + 3,
-            head: from + text.length + 6
-          }
-        });
-        editorView.focus();
+  // Derived so `label` strings refresh whenever the consumer's i18n source
+  // changes locale. Action closures recreate alongside, but they're cheap —
+  // they only capture a stable reference to `editorView` (a state).
+  const toolbarActions: (ToolbarAction | '|')[] = $derived.by(() => {
+    const md = m().form.markdown;
+    return [
+      {
+        id: 'bold',
+        label: md.bold,
+        icon: 'B',
+        shortcut: 'Mod-b',
+        action: () => wrapSelection('**', '**')
+      },
+      {
+        id: 'italic',
+        label: md.italic,
+        icon: 'I',
+        shortcut: 'Mod-i',
+        action: () => wrapSelection('_', '_')
+      },
+      {
+        id: 'strikethrough',
+        label: md.strikethrough,
+        icon: 'S',
+        action: () => wrapSelection('~~', '~~')
+      },
+      '|',
+      {
+        id: 'heading-1',
+        label: md.heading1,
+        icon: 'H1',
+        action: () => prefixLine('# ')
+      },
+      {
+        id: 'heading-2',
+        label: md.heading2,
+        icon: 'H2',
+        action: () => prefixLine('## ')
+      },
+      {
+        id: 'heading-3',
+        label: md.heading3,
+        icon: 'H3',
+        action: () => prefixLine('### ')
+      },
+      '|',
+      {
+        id: 'quote',
+        label: md.quote,
+        icon: '"',
+        action: () => prefixLine('> ')
+      },
+      {
+        id: 'unordered-list',
+        label: md.unorderedList,
+        icon: '•',
+        action: () => prefixLine('- ')
+      },
+      {
+        id: 'ordered-list',
+        label: md.orderedList,
+        icon: '1.',
+        action: () => prefixLine('1. ')
+      },
+      '|',
+      {
+        id: 'link',
+        label: md.link,
+        icon: icons.link,
+        isSvg: true,
+        shortcut: 'Mod-k',
+        action: () => {
+          if (!editorView) return;
+          const { from, to } = editorView.state.selection.main;
+          const selected = editorView.state.sliceDoc(from, to);
+          const text = selected || 'link text';
+          const replacement = `[${text}](url)`;
+          editorView.dispatch({
+            changes: { from, to, insert: replacement },
+            selection: {
+              anchor: from + text.length + 3,
+              head: from + text.length + 6
+            }
+          });
+          editorView.focus();
+        }
+      },
+      {
+        id: 'image',
+        label: md.image,
+        icon: icons.image,
+        isSvg: true,
+        action: () => insertAtCursor('![alt text](image-url)')
+      },
+      {
+        id: 'table',
+        label: md.table,
+        icon: icons.table,
+        isSvg: true,
+        action: () =>
+          insertAtCursor('\n| Header | Header |\n| ------ | ------ |\n| Cell   | Cell   |\n')
       }
-    },
-    {
-      id: 'image',
-      label: 'Image',
-      icon: icons.image,
-      isSvg: true,
-      action: () => insertAtCursor('![alt text](image-url)')
-    },
-    {
-      id: 'table',
-      label: 'Table',
-      icon: icons.table,
-      isSvg: true,
-      action: () =>
-        insertAtCursor('\n| Header | Header |\n| ------ | ------ |\n| Cell   | Cell   |\n')
-    }
-  ];
+    ];
+  });
 
   // ── CM6 Keyboard shortcuts for toolbar actions ───────────
 
@@ -327,11 +340,14 @@
   // ── Editor setup ─────────────────────────────────────────
 
   function createExtensions() {
+    const placeholderText = placeholderProp ?? m().form.markdown.placeholder;
+
     const extensions = [
       lineNumbers(),
       highlightSpecialChars(),
       highlightActiveLine(),
       drawSelection(),
+      placeholderCompartment.of(placeholder(placeholderText)),
 
       // Editing features (skip when read-only)
       ...(disabled
@@ -394,10 +410,12 @@
       EditorView.lineWrapping,
 
       // Accessibility
-      EditorView.contentAttributes.of({
-        'aria-label': 'Markdown editor',
-        'aria-multiline': 'true'
-      })
+      ariaLabelCompartment.of(
+        EditorView.contentAttributes.of({
+          'aria-label': m().form.markdown.editor,
+          'aria-multiline': 'true'
+        })
+      )
     ];
 
     return extensions;
@@ -462,6 +480,27 @@
       updateStats(editorView.state.doc);
     }
   });
+
+  // Reconfigure CodeMirror-owned strings (placeholder, content aria-label)
+  // when the consumer's locale or `placeholder` prop changes. Toolbar and
+  // status-bar strings rerender via `$derived` in the template; CodeMirror
+  // lives outside Svelte's reactivity graph, so this effect bridges the gap.
+  $effect(() => {
+    const placeholderText = placeholderProp ?? m().form.markdown.placeholder;
+    const ariaLabel = m().form.markdown.editor;
+    if (!editorView) return;
+    editorView.dispatch({
+      effects: [
+        placeholderCompartment.reconfigure(placeholder(placeholderText)),
+        ariaLabelCompartment.reconfigure(
+          EditorView.contentAttributes.of({
+            'aria-label': ariaLabel,
+            'aria-multiline': 'true'
+          })
+        )
+      ]
+    });
+  });
 </script>
 
 <div
@@ -481,7 +520,11 @@
 
   <!-- Toolbar -->
   {#if showToolbar && !disabled}
-    <div class="form-markdown-editor__toolbar" role="toolbar" aria-label="Markdown formatting">
+    <div
+      class="form-markdown-editor__toolbar"
+      role="toolbar"
+      aria-label={m().form.markdown.toolbar}
+    >
       {#each toolbarActions as item}
         {#if item === '|'}
           <span class="form-markdown-editor__separator"></span>
@@ -514,10 +557,11 @@
 
   <!-- Status bar -->
   {#if showStatusBar}
+    {@const md = m().form.markdown}
     <div class="form-markdown-editor__status">
-      <span>words: {wordCount}</span>
-      <span>lines: {lineCount}</span>
-      <span>characters: {charCount}</span>
+      <span>{md.words}: {wordCount}</span>
+      <span>{md.lines}: {lineCount}</span>
+      <span>{md.characters}: {charCount}</span>
     </div>
   {/if}
 </div>

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

@@ -3,7 +3,7 @@ interface Props {
     id: string;
     /** Current value (markdown string) */
     value: string;
-    /** Placeholder text shown when empty */
+    /** Placeholder text shown when empty. Falls back to `messages.form.markdown.placeholder`. */
     placeholder?: string;
     /** Whether the field is required */
     required?: boolean;

package/dist/components/form/FormTemplateEditor.svelte

@@ -46,6 +46,7 @@
   import { createTemplateAutocomplete } from './templateAutocomplete.js';
   import { getVariableSchema } from '../../services/variableService.js';
   import { logger } from '../../utils/logger.js';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     /** Field identifier */
@@ -506,7 +507,7 @@
     class:form-template-editor__container--dark={darkTheme}
     role="textbox"
     aria-multiline="true"
-    aria-label="Template editor"
+    aria-label={m().form.template.editor}
   ></div>
 
   <!-- Loading banner (shown while fetching variables from API) -->

package/dist/components/form/FormToggle.svelte

@@ -9,14 +9,20 @@
 -->
 
 <script lang="ts">
+  import { m, warnDeprecatedProp } from '../../messages/index.js';
+
   interface Props {
     /** Field identifier */
     id: string;
     /** Current value */
     value: boolean;
-    /** Label shown when toggle is on */
+    /**
+     * @deprecated since v1.8 — use `messages.form.toggle.enabled`. Removed in v2.0.
+     */
     onLabel?: string;
-    /** Label shown when toggle is off */
+    /**
+     * @deprecated since v1.8 — use `messages.form.toggle.disabled`. Removed in v2.0.
+     */
     offLabel?: string;
     /** Whether the field is disabled (read-only) */
     disabled?: boolean;
@@ -29,13 +35,25 @@
   let {
     id,
     value = false,
-    onLabel = 'Enabled',
-    offLabel = 'Disabled',
+    onLabel,
+    offLabel,
     disabled = false,
     ariaDescribedBy,
     onChange
   }: Props = $props();
 
+  // svelte-ignore state_referenced_locally — deprecation warns once per mount; later prop rebinds aren't relevant
+  if (onLabel !== undefined) {
+    warnDeprecatedProp('FormToggle', 'onLabel', 'messages.form.toggle.enabled');
+  }
+  // svelte-ignore state_referenced_locally
+  if (offLabel !== undefined) {
+    warnDeprecatedProp('FormToggle', 'offLabel', 'messages.form.toggle.disabled');
+  }
+
+  const resolvedOnLabel = $derived(onLabel ?? m().form.toggle.enabled);
+  const resolvedOffLabel = $derived(offLabel ?? m().form.toggle.disabled);
+
   /**
    * Handle toggle changes
    */
@@ -59,7 +77,7 @@
     <span class="form-toggle__thumb"></span>
   </span>
   <span class="form-toggle__label">
-    {value ? onLabel : offLabel}
+    {value ? resolvedOnLabel : resolvedOffLabel}
   </span>
 </label>
 

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

@@ -3,9 +3,13 @@ interface Props {
     id: string;
     /** Current value */
     value: boolean;
-    /** Label shown when toggle is on */
+    /**
+     * @deprecated since v1.8 — use `messages.form.toggle.enabled`. Removed in v2.0.
+     */
     onLabel?: string;
-    /** Label shown when toggle is off */
+    /**
+     * @deprecated since v1.8 — use `messages.form.toggle.disabled`. Removed in v2.0.
+     */
     offLabel?: string;
     /** Whether the field is disabled (read-only) */
     disabled?: boolean;

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -10,6 +10,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import type { ChoiceConfig, InterruptChoice } from '../../types/interrupt.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -41,6 +42,9 @@
     onSubmit
   }: Props = $props();
 
+  // Hoist the choice branch — counter, min, max, submit reads.
+  const t = $derived(m().interrupt.choice);
+
   /** Local state for selected values */
   let selectedValues = $state<Set<string>>(new Set());
 
@@ -165,12 +169,15 @@
   {#if isMultiple && !isResolved}
     <div class="choice-prompt__info">
       <span>
-        {selectedValues.size} of {config.options.length} selected
+        {t.selectedCount({
+          n: selectedValues.size,
+          total: config.options.length
+        })}
         {#if minSelections > 0}
-          (min: {minSelections})
+          {t.min({ n: minSelections })}
         {/if}
         {#if maxSelections < config.options.length}
-          (max: {maxSelections})
+          {t.max({ n: maxSelections })}
         {/if}
       </span>
     </div>
@@ -190,7 +197,7 @@
         {:else}
           <Icon icon="mdi:check" />
         {/if}
-        <span>Submit</span>
+        <span>{t.submit}</span>
       </button>
     </div>
   {/if}
@@ -200,7 +207,9 @@
     <div class="choice-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/ConfirmationPrompt.svelte

@@ -10,6 +10,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import type { ConfirmationConfig } from '../../types/interrupt.js';
+  import { m } from '../../messages/index.js';
 
   /**
    * Component props
@@ -44,11 +45,11 @@
     onDecline
   }: Props = $props();
 
-  /** Computed label for confirm button */
-  const confirmLabel = $derived(config.confirmLabel ?? 'Yes');
+  /** Computed label for confirm button — config wins, falls back to messages tree. */
+  const confirmLabel = $derived(config.confirmLabel ?? m().interrupt.confirmation.yes);
 
-  /** Computed label for decline/cancel button */
-  const declineLabel = $derived(config.cancelLabel ?? 'No');
+  /** Computed label for decline/cancel button — config wins, falls back to messages tree. */
+  const declineLabel = $derived(config.cancelLabel ?? m().interrupt.confirmation.no);
 </script>
 
 <div
@@ -119,7 +120,9 @@
     <div class="confirmation-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}