@flowdrop/flowdrop 1.5.0 → 1.6.0

package/dist/components/form/FormMarkdownEditor.svelte

@@ -17,27 +17,14 @@
 -->
 
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import {
-    EditorView,
-    lineNumbers,
-    drawSelection,
-    keymap,
-  } 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 { onMount, onDestroy } from 'svelte';
+  import { EditorView, lineNumbers, drawSelection, keymap } 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';
 
   interface Props {
     /** Field identifier */
@@ -72,10 +59,10 @@
 
   let {
     id,
-    value = "",
-    placeholder = "Write your markdown here...",
+    value = '',
+    placeholder = 'Write your markdown here...',
     required = false,
-    height = "300px",
+    height = '300px',
     showToolbar = true,
     showStatusBar = true,
     spellChecker = false,
@@ -84,7 +71,7 @@
     disabled = false,
     darkTheme = false,
     ariaDescribedBy,
-    onChange,
+    onChange
   }: Props = $props();
 
   /** Reference to the editor container element */
@@ -128,22 +115,20 @@
     image:
       '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0L2.5 11.06Zm6.5-3.31a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd"/></svg>',
     table:
-      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M.99 5.24A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm8.26 4.51v3.75h1.5v-3.75h-1.5Zm1.5-1.5v-3.75h-1.5v3.75h1.5Zm-3-3.75H3.25a.75.75 0 0 0-.75.75v3h5.25v-3.75Zm-5.25 5.25v3.75c0 .414.336.75.75.75h4.5v-4.5H2.5Zm14.5 0h-5.25v4.5h4.5a.75.75 0 0 0 .75-.75v-3.75Zm0-1.5v-3a.75.75 0 0 0-.75-.75h-4.5v3.75H17Z" clip-rule="evenodd"/></svg>',
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M.99 5.24A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm8.26 4.51v3.75h1.5v-3.75h-1.5Zm1.5-1.5v-3.75h-1.5v3.75h1.5Zm-3-3.75H3.25a.75.75 0 0 0-.75.75v3h5.25v-3.75Zm-5.25 5.25v3.75c0 .414.336.75.75.75h4.5v-4.5H2.5Zm14.5 0h-5.25v4.5h4.5a.75.75 0 0 0 .75-.75v-3.75Zm0-1.5v-3a.75.75 0 0 0-.75-.75h-4.5v3.75H17Z" clip-rule="evenodd"/></svg>'
   };
 
   function wrapSelection(before: string, after: string) {
     if (!editorView) return;
     const { from, to } = editorView.state.selection.main;
     const selected = editorView.state.sliceDoc(from, to);
-    const replacement = `${before}${selected || "text"}${after}`;
+    const replacement = `${before}${selected || 'text'}${after}`;
     editorView.dispatch({
       changes: { from, to, insert: replacement },
       selection: {
         anchor: selected ? from + before.length : from + before.length,
-        head: selected
-          ? from + before.length + selected.length
-          : from + before.length + 4,
-      },
+        head: selected ? from + before.length + selected.length : from + before.length + 4
+      }
     });
     editorView.focus();
   }
@@ -157,14 +142,14 @@
     // If already has this prefix, remove it (toggle)
     if (currentText.startsWith(prefix)) {
       editorView.dispatch({
-        changes: { from: line.from, to: line.from + prefix.length, insert: "" },
+        changes: { from: line.from, to: line.from + prefix.length, insert: '' }
       });
     } else {
       // Remove any existing heading prefix before adding new one
       const headingMatch = currentText.match(/^#{1,6}\s/);
       const removeLen = headingMatch ? headingMatch[0].length : 0;
       editorView.dispatch({
-        changes: { from: line.from, to: line.from + removeLen, insert: prefix },
+        changes: { from: line.from, to: line.from + removeLen, insert: prefix }
       });
     }
     editorView.focus();
@@ -175,110 +160,108 @@
     const { from, to } = editorView.state.selection.main;
     editorView.dispatch({
       changes: { from, to, insert: text },
-      selection: { anchor: from + text.length },
+      selection: { anchor: from + text.length }
     });
     editorView.focus();
   }
 
-  const toolbarActions: (ToolbarAction | "|")[] = [
+  const toolbarActions: (ToolbarAction | '|')[] = [
     {
-      id: "bold",
-      label: "Bold",
-      icon: "B",
-      shortcut: "Mod-b",
-      action: () => wrapSelection("**", "**"),
+      id: 'bold',
+      label: 'Bold',
+      icon: 'B',
+      shortcut: 'Mod-b',
+      action: () => wrapSelection('**', '**')
     },
     {
-      id: "italic",
-      label: "Italic",
-      icon: "I",
-      shortcut: "Mod-i",
-      action: () => wrapSelection("_", "_"),
+      id: 'italic',
+      label: 'Italic',
+      icon: 'I',
+      shortcut: 'Mod-i',
+      action: () => wrapSelection('_', '_')
     },
     {
-      id: "strikethrough",
-      label: "Strikethrough",
-      icon: "S",
-      action: () => wrapSelection("~~", "~~"),
+      id: 'strikethrough',
+      label: 'Strikethrough',
+      icon: 'S',
+      action: () => wrapSelection('~~', '~~')
     },
-    "|",
+    '|',
     {
-      id: "heading-1",
-      label: "Heading 1",
-      icon: "H1",
-      action: () => prefixLine("# "),
+      id: 'heading-1',
+      label: 'Heading 1',
+      icon: 'H1',
+      action: () => prefixLine('# ')
     },
     {
-      id: "heading-2",
-      label: "Heading 2",
-      icon: "H2",
-      action: () => prefixLine("## "),
+      id: 'heading-2',
+      label: 'Heading 2',
+      icon: 'H2',
+      action: () => prefixLine('## ')
     },
     {
-      id: "heading-3",
-      label: "Heading 3",
-      icon: "H3",
-      action: () => prefixLine("### "),
+      id: 'heading-3',
+      label: 'Heading 3',
+      icon: 'H3',
+      action: () => prefixLine('### ')
     },
-    "|",
+    '|',
     {
-      id: "quote",
-      label: "Quote",
+      id: 'quote',
+      label: 'Quote',
       icon: '"',
-      action: () => prefixLine("> "),
+      action: () => prefixLine('> ')
     },
     {
-      id: "unordered-list",
-      label: "Unordered List",
-      icon: "•",
-      action: () => prefixLine("- "),
+      id: 'unordered-list',
+      label: 'Unordered List',
+      icon: '•',
+      action: () => prefixLine('- ')
     },
     {
-      id: "ordered-list",
-      label: "Ordered List",
-      icon: "1.",
-      action: () => prefixLine("1. "),
+      id: 'ordered-list',
+      label: 'Ordered List',
+      icon: '1.',
+      action: () => prefixLine('1. ')
     },
-    "|",
+    '|',
     {
-      id: "link",
-      label: "Link",
+      id: 'link',
+      label: 'Link',
       icon: icons.link,
       isSvg: true,
-      shortcut: "Mod-k",
+      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 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,
-          },
+            head: from + text.length + 6
+          }
         });
         editorView.focus();
-      },
+      }
     },
     {
-      id: "image",
-      label: "Image",
+      id: 'image',
+      label: 'Image',
       icon: icons.image,
       isSvg: true,
-      action: () => insertAtCursor("![alt text](image-url)"),
+      action: () => insertAtCursor('![alt text](image-url)')
     },
     {
-      id: "table",
-      label: "Table",
+      id: 'table',
+      label: 'Table',
       icon: icons.table,
       isSvg: true,
       action: () =>
-        insertAtCursor(
-          "\n| Header | Header |\n| ------ | ------ |\n| Cell   | Cell   |\n",
-        ),
-    },
+        insertAtCursor('\n| Header | Header |\n| ------ | ------ |\n| Cell   | Cell   |\n')
+    }
   ];
 
   // ── CM6 Keyboard shortcuts for toolbar actions ───────────
@@ -286,50 +269,48 @@
   function createToolbarKeymap() {
     return keymap.of([
       {
-        key: "Mod-b",
+        key: 'Mod-b',
         run: () => {
-          wrapSelection("**", "**");
+          wrapSelection('**', '**');
           return true;
-        },
+        }
       },
       {
-        key: "Mod-i",
+        key: 'Mod-i',
         run: () => {
-          wrapSelection("_", "_");
+          wrapSelection('_', '_');
           return true;
-        },
+        }
       },
       {
-        key: "Mod-k",
+        key: 'Mod-k',
         run: () => {
-          const action = toolbarActions.find(
-            (a) => a !== "|" && a.id === "link",
-          );
-          if (action && action !== "|") action.action();
+          const action = toolbarActions.find((a) => a !== '|' && a.id === 'link');
+          if (action && action !== '|') action.action();
           return true;
-        },
+        }
       },
       {
-        key: "Mod-h",
+        key: 'Mod-h',
         run: () => {
-          prefixLine("## ");
+          prefixLine('## ');
           return true;
-        },
+        }
       },
       {
         key: "Mod-'",
         run: () => {
-          prefixLine("> ");
+          prefixLine('> ');
           return true;
-        },
+        }
       },
       {
-        key: "Mod-l",
+        key: 'Mod-l',
         run: () => {
-          prefixLine("- ");
+          prefixLine('- ');
           return true;
-        },
-      },
+        }
+      }
     ]);
   }
 
@@ -358,14 +339,12 @@
         : [
             history(),
             keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
-            createToolbarKeymap(),
+            createToolbarKeymap()
           ]),
 
       // Theme
       themeCompartment.of(
-        darkTheme
-          ? oneDark
-          : syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        darkTheme ? oneDark : syntaxHighlighting(defaultHighlightStyle, { fallback: true })
       ),
 
       // Markdown language support
@@ -396,30 +375,29 @@
 
       // Custom theme
       EditorView.theme({
-        "&": {
+        '&': {
           height: height,
-          fontSize: "var(--fd-text-sm, 0.8125rem)",
-          fontFamily:
-            "'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace",
-        },
-        ".cm-scroller": {
-          overflow: "auto",
+          fontSize: 'var(--fd-text-sm, 0.8125rem)',
+          fontFamily: "'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace"
         },
-        ".cm-content": {
-          minHeight: "100px",
-          padding: "0.5rem 0",
+        '.cm-scroller': {
+          overflow: 'auto'
         },
-        "&.cm-focused": {
-          outline: "none",
+        '.cm-content': {
+          minHeight: '100px',
+          padding: '0.5rem 0'
         },
+        '&.cm-focused': {
+          outline: 'none'
+        }
       }),
       EditorView.lineWrapping,
 
       // Accessibility
       EditorView.contentAttributes.of({
-        "aria-label": "Markdown editor",
-        "aria-multiline": "true",
-      }),
+        'aria-label': 'Markdown editor',
+        'aria-multiline': 'true'
+      })
     ];
 
     return extensions;
@@ -445,9 +423,9 @@
     editorView = new EditorView({
       state: EditorState.create({
         doc: initialContent,
-        extensions: createExtensions(),
+        extensions: createExtensions()
       }),
-      parent: containerRef,
+      parent: containerRef
     });
 
     updateStats(editorView.state.doc);
@@ -477,8 +455,8 @@
         changes: {
           from: 0,
           to: editorView.state.doc.length,
-          insert: value,
-        },
+          insert: value
+        }
       });
       isInternalUpdate = false;
       updateStats(editorView.state.doc);
@@ -503,35 +481,26 @@
 
   <!-- 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="Markdown formatting">
       {#each toolbarActions as item}
-        {#if item === "|"}
+        {#if item === '|'}
           <span class="form-markdown-editor__separator"></span>
         {:else}
           <button
             type="button"
             class="form-markdown-editor__btn"
-            title="{item.label}{item.shortcut
-              ? ` (${item.shortcut.replace('Mod', '⌘')})`
-              : ''}"
+            title="{item.label}{item.shortcut ? ` (${item.shortcut.replace('Mod', '⌘')})` : ''}"
             onclick={item.action}
           >
             {#if item.isSvg}
-              <span class="form-markdown-editor__btn-svg"
-                >{@html item.icon}</span
-              >
+              <span class="form-markdown-editor__btn-svg">{@html item.icon}</span>
             {:else}
               <span
                 class="form-markdown-editor__btn-icon"
-                class:form-markdown-editor__btn-icon--bold={item.id === "bold"}
-                class:form-markdown-editor__btn-icon--italic={item.id ===
-                  "italic"}
-                class:form-markdown-editor__btn-icon--strike={item.id ===
-                  "strikethrough"}>{item.icon}</span
+                class:form-markdown-editor__btn-icon--bold={item.id === 'bold'}
+                class:form-markdown-editor__btn-icon--italic={item.id === 'italic'}
+                class:form-markdown-editor__btn-icon--strike={item.id === 'strikethrough'}
+                >{item.icon}</span
               >
             {/if}
           </button>
@@ -661,14 +630,12 @@
   }
 
   /* When no toolbar, body gets top radius */
-  .form-markdown-editor:not(:has(.form-markdown-editor__toolbar))
-    .form-markdown-editor__body {
+  .form-markdown-editor:not(:has(.form-markdown-editor__toolbar)) .form-markdown-editor__body {
     border-radius: var(--fd-radius-lg) var(--fd-radius-lg) 0 0;
   }
 
   /* When no status bar, body gets bottom radius */
-  .form-markdown-editor:not(:has(.form-markdown-editor__status))
-    .form-markdown-editor__body {
+  .form-markdown-editor:not(:has(.form-markdown-editor__status)) .form-markdown-editor__body {
     border-radius: 0 0 var(--fd-radius-lg) var(--fd-radius-lg);
   }
 

package/dist/components/form/FormNumberField.stories.svelte

@@ -1,36 +1,36 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import FormNumberField from "./FormNumberField.svelte";
-  import { fn } from "storybook/test";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FormNumberField from './FormNumberField.svelte';
+  import { fn } from 'storybook/test';
 
   const { Story } = defineMeta({
-    title: "Form/FormNumberField",
+    title: 'Form/FormNumberField',
     component: FormNumberField,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
-      value: { control: "number" },
-      placeholder: { control: "text" },
-      min: { control: "number" },
-      max: { control: "number" },
-      step: { control: "number" },
-      required: { control: "boolean" },
-      disabled: { control: "boolean" },
+      value: { control: 'number' },
+      placeholder: { control: 'text' },
+      min: { control: 'number' },
+      max: { control: 'number' },
+      step: { control: 'number' },
+      required: { control: 'boolean' },
+      disabled: { control: 'boolean' }
     },
     args: {
-      id: "demo-number-field",
-      value: "",
-      onChange: fn(),
-    },
+      id: 'demo-number-field',
+      value: '',
+      onChange: fn()
+    }
   });
 </script>
 
-<Story name="Default" args={{ placeholder: "Enter a number..." }} />
+<Story name="Default" args={{ placeholder: 'Enter a number...' }} />
 
 <Story name="With Value" args={{ value: 42 }} />
 
 <Story
   name="With Constraints"
-  args={{ value: 50, min: 0, max: 100, step: 5, placeholder: "0-100, step 5" }}
+  args={{ value: 50, min: 0, max: 100, step: 5, placeholder: '0-100, step 5' }}
 />
 
 <Story name="Disabled" args={{ value: 10, disabled: true }} />

package/dist/components/form/FormNumberField.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const FormNumberField: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormNumberField from "./FormNumberField.svelte";
+import FormNumberField from './FormNumberField.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/form/FormNumberField.svelte

@@ -34,15 +34,15 @@
 
   let {
     id,
-    value = "",
-    placeholder = "",
+    value = '',
+    placeholder = '',
     min,
     max,
     step,
     required = false,
     disabled = false,
     ariaDescribedBy,
-    onChange,
+    onChange
   }: Props = $props();
 
   /**
@@ -53,8 +53,8 @@
     const target = event.currentTarget as HTMLInputElement;
     const inputValue = target.value;
 
-    if (inputValue === "") {
-      onChange("");
+    if (inputValue === '') {
+      onChange('');
     } else {
       const numValue = Number(inputValue);
       onChange(isNaN(numValue) ? inputValue : numValue);
@@ -66,7 +66,7 @@
   {id}
   type="number"
   class="form-number-field"
-  value={value ?? ""}
+  value={value ?? ''}
   {placeholder}
   {min}
   {max}

package/dist/components/form/FormRangeField.stories.svelte

@@ -1,24 +1,24 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import FormRangeField from "./FormRangeField.svelte";
-  import { fn } from "storybook/test";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FormRangeField from './FormRangeField.svelte';
+  import { fn } from 'storybook/test';
 
   const { Story } = defineMeta({
-    title: "Form/FormRangeField",
+    title: 'Form/FormRangeField',
     component: FormRangeField,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
-      value: { control: { type: "number" } },
-      min: { control: "number" },
-      max: { control: "number" },
-      step: { control: "number" },
-      disabled: { control: "boolean" },
+      value: { control: { type: 'number' } },
+      min: { control: 'number' },
+      max: { control: 'number' },
+      step: { control: 'number' },
+      disabled: { control: 'boolean' }
     },
     args: {
-      id: "demo-range-field",
+      id: 'demo-range-field',
       value: 50,
-      onChange: fn(),
-    },
+      onChange: fn()
+    }
   });
 </script>
 

package/dist/components/form/FormRangeField.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const FormRangeField: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormRangeField from "./FormRangeField.svelte";
+import FormRangeField from './FormRangeField.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;