@flowdrop/flowdrop 1.7.0 → 1.8.1

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}

package/dist/components/interrupt/FormPrompt.svelte

@@ -11,6 +11,7 @@
   import Icon from '@iconify/svelte';
   import SchemaForm from '../SchemaForm.svelte';
   import type { FormConfig } from '../../types/interrupt.js';
+  import { getMessages, m, mergeMessages, setMessages } from '../../messages/index.js';
 
   /**
    * Component props
@@ -49,6 +50,10 @@
   /** Display values - either resolved or current form values */
   const displayValues = $derived(isResolved ? (resolvedValue ?? {}) : formValues);
 
+  // Hoist the interrupt branch — six reads in the template, three of them
+  // inside `formatResolvedValue` which is called per `{#each schema.property}`.
+  const interrupt = $derived(m().interrupt);
+
   /**
    * Handle form value changes
    */
@@ -66,14 +71,30 @@
   }
 
   /**
-   * Format resolved value for display
+   * Format resolved value for display.
+   * Returns localized strings via the current messages tree.
    */
   function formatResolvedValue(value: unknown): string {
-    if (value === null || value === undefined) return '—';
-    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+    if (value === null || value === undefined) return interrupt.form.empty;
+    if (typeof value === 'boolean') return value ? interrupt.form.yes : interrupt.form.no;
     if (typeof value === 'object') return JSON.stringify(value, null, 2);
     return String(value);
   }
+
+  // Scope a messages override for the inner SchemaForm so its Save button reads
+  // the interrupt-specific submit label (e.g. "Submit"), and the cancel button
+  // remains empty — historical behavior that effectively hid it. Avoids passing
+  // deprecated `saveLabel` / `cancelLabel` props on SchemaForm.
+  // Merges over the parent's tree so consumer-supplied overrides higher up
+  // (e.g. translations from <FlowDrop messages={...} />) still apply.
+  const parentMessages = getMessages();
+  const scopedMessages = $derived.by(() => {
+    const base = parentMessages();
+    return mergeMessages(base, {
+      form: { schema: { save: base.interrupt.form.submit, cancel: '' } }
+    });
+  });
+  setMessages(() => scopedMessages);
 </script>
 
 <div
@@ -101,8 +122,6 @@
         onChange={handleChange}
         onSave={handleSave}
         showActions={true}
-        saveLabel="Submit"
-        cancelLabel=""
         loading={isSubmitting}
         disabled={isResolved}
       />
@@ -110,7 +129,7 @@
   {:else}
     <!-- Resolved state: Show submitted values as read-only -->
     <div class="form-prompt__resolved-values">
-      <h4 class="form-prompt__resolved-title">Submitted Values</h4>
+      <h4 class="form-prompt__resolved-title">{interrupt.form.submittedValuesTitle}</h4>
       <div class="form-prompt__values-list">
         {#each Object.entries(config.schema.properties ?? {}) as [key, field]}
           {@const value = displayValues[key]}
@@ -131,7 +150,9 @@
     <div class="form-prompt__resolved-badge">
       <Icon icon="mdi:check-circle" />
       <span>
-        {resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
+        {resolvedByUserName
+          ? interrupt.responseSubmittedBy({ name: resolvedByUserName })
+          : interrupt.responseSubmitted}
       </span>
     </div>
   {/if}