sv5ui 1.8.0 → 2.1.0

package/dist/Editor/SlashPopup.svelte

@@ -6,9 +6,11 @@
         items: SlashCommand[]
         selectedIndex: number
         onPick: (index: number) => void
+        listboxId: string
+        optionIdPrefix: string
     }
 
-    let { items, selectedIndex, onPick }: Props = $props()
+    let { items, selectedIndex, onPick, listboxId, optionIdPrefix }: Props = $props()
 
     let listEl: HTMLDivElement | null = $state(null)
 
@@ -24,7 +26,9 @@
 
 <div
     bind:this={listEl}
+    id={listboxId}
     role="listbox"
+    aria-label="Slash commands"
     data-editor-slash-popup
     class="max-h-72 max-w-80 min-w-64 overflow-y-auto rounded-lg border border-outline-variant bg-surface py-1 shadow-lg"
 >
@@ -35,6 +39,9 @@
             {@const active = i === selectedIndex}
             <button
                 type="button"
+                role="option"
+                id={`${optionIdPrefix}${i}`}
+                aria-selected={active}
                 data-slash-item
                 data-id={cmd.id}
                 data-index={i}

package/dist/Editor/SlashPopup.svelte.d.ts

@@ -3,6 +3,8 @@ interface Props {
     items: SlashCommand[];
     selectedIndex: number;
     onPick: (index: number) => void;
+    listboxId: string;
+    optionIdPrefix: string;
 }
 declare const SlashPopup: import("svelte").Component<Props, {}, "">;
 type SlashPopup = ReturnType<typeof SlashPopup>;

package/dist/Editor/editor.extensions.d.ts

@@ -19,5 +19,5 @@ interface BuildExtensionsOptions {
     dragHandle?: boolean;
     extra?: AnyExtension[];
 }
-export declare function buildExtensions(options?: BuildExtensionsOptions): AnyExtension[];
+export declare function buildExtensions(options?: BuildExtensionsOptions): AnyExtension[] | Promise<AnyExtension[]>;
 export {};

package/dist/Editor/editor.extensions.js

@@ -5,11 +5,6 @@ import Typography from '@tiptap/extension-typography';
 import CharacterCount from '@tiptap/extension-character-count';
 import Image from '@tiptap/extension-image';
 import Mention from '@tiptap/extension-mention';
-import { Table } from '@tiptap/extension-table';
-import { TableRow } from '@tiptap/extension-table-row';
-import { TableCell } from '@tiptap/extension-table-cell';
-import { TableHeader } from '@tiptap/extension-table-header';
-import { Markdown } from 'tiptap-markdown';
 import Youtube from '@tiptap/extension-youtube';
 import { DragHandle } from '@tiptap/extension-drag-handle';
 import { buildSlashExtension } from './editor.slash.svelte.js';
@@ -38,7 +33,13 @@ function buildImageExt() {
         HTMLAttributes: { class: 'sv5ui-editor-image' }
     });
 }
-function buildTableExts() {
+async function buildTableExts() {
+    const [{ Table }, { TableRow }, { TableCell }, { TableHeader }] = await Promise.all([
+        import('@tiptap/extension-table'),
+        import('@tiptap/extension-table-row'),
+        import('@tiptap/extension-table-cell'),
+        import('@tiptap/extension-table-header')
+    ]);
     return [
         Table.configure({
             resizable: true,
@@ -49,7 +50,8 @@ function buildTableExts() {
         TableCell
     ];
 }
-function buildMarkdownExt(allowHtml) {
+async function buildMarkdownExt(allowHtml) {
+    const { Markdown } = await import('tiptap-markdown');
     return Markdown.configure({
         html: allowHtml,
         tightLists: true,
@@ -73,8 +75,6 @@ function buildYoutubeExt() {
         HTMLAttributes: { class: 'sv5ui-editor-youtube' }
     });
 }
-// lucide:grip-vertical inline SVG. Used directly because @iconify/svelte
-// component would need to be mounted via Svelte; this is a vanilla DOM helper.
 const GRIP_VERTICAL_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/></svg>';
 function buildDragHandleExt() {
     return DragHandle.configure({
@@ -106,18 +106,27 @@ const OPTIONAL_BUILDERS = [
     (o) => (o.dragHandle ? buildDragHandleExt() : null)
 ];
 function collectOptionalExts(options) {
-    const acc = [];
+    const sync = [];
+    const lazy = [];
     for (const build of OPTIONAL_BUILDERS) {
         const result = build(options);
-        if (result === null)
+        if (result === null || result === undefined)
             continue;
-        if (Array.isArray(result))
-            acc.push(...result);
+        if (result instanceof Promise)
+            lazy.push(result);
+        else if (Array.isArray(result))
+            sync.push(...result);
         else
-            acc.push(result);
+            sync.push(result);
     }
-    return acc;
+    if (lazy.length === 0)
+        return sync;
+    return Promise.all(lazy).then((resolved) => [...sync, ...resolved.flat()]);
 }
 export function buildExtensions(options = {}) {
-    return [...buildCore(options), ...collectOptionalExts(options), ...(options.extra ?? [])];
+    const optional = collectOptionalExts(options);
+    if (optional instanceof Promise) {
+        return optional.then((opt) => [...buildCore(options), ...opt, ...(options.extra ?? [])]);
+    }
+    return [...buildCore(options), ...optional, ...(options.extra ?? [])];
 }

package/dist/Editor/editor.schemas.d.ts

@@ -1,4 +1,5 @@
 import type { StandardSchemaV1 } from '@standard-schema/spec';
 export type UrlSchema = StandardSchemaV1<string, string>;
 export declare const httpUrlSchema: UrlSchema;
+export declare function isSafeImageSrc(src: string): boolean;
 export declare const youtubeUrlSchema: UrlSchema;

package/dist/Editor/editor.schemas.js

@@ -1,3 +1,27 @@
 import * as v from 'valibot';
 export const httpUrlSchema = v.pipe(v.string(), v.trim(), v.nonEmpty('URL is required'), v.url('Please enter a valid URL'), v.regex(/^https?:\/\//i, 'URL must start with http:// or https://'));
+function normalizeUrl(src) {
+    const s = src.replace(/[\t\n\r]/g, '');
+    let start = 0;
+    let end = s.length;
+    while (start < end && s.charCodeAt(start) <= 0x20)
+        start++;
+    while (end > start && s.charCodeAt(end - 1) <= 0x20)
+        end--;
+    return s.slice(start, end);
+}
+export function isSafeImageSrc(src) {
+    const s = normalizeUrl(src);
+    if (!s)
+        return false;
+    const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(s)?.[1]?.toLowerCase();
+    if (!scheme)
+        return true;
+    if (scheme === 'http' || scheme === 'https')
+        return true;
+    if (scheme === 'data') {
+        return /^data:image\/(?:png|jpe?g|gif|webp|avif|bmp|x-icon|vnd\.microsoft\.icon)[;,]/i.test(s);
+    }
+    return false;
+}
 export const youtubeUrlSchema = v.pipe(v.string(), v.trim(), v.nonEmpty('URL is required'), v.url('Please enter a valid URL'), v.regex(/^https?:\/\/(?:www\.|m\.)?(?:youtube\.com|youtu\.be|youtube-nocookie\.com)\//i, 'Must be a YouTube URL (youtube.com or youtu.be)'));

package/dist/Editor/editor.slash.svelte.d.ts

@@ -14,17 +14,8 @@ interface SlashCommandsContext {
     image?: boolean;
     tables?: boolean;
     youtube?: boolean;
-    /**
-     * Override for the URL prompt used by image/youtube commands. Pass an
-     * async function that resolves to a URL string, or `null`/empty string
-     * to cancel. When omitted, falls back to `window.prompt`.
-     */
     promptUrl?: (opts: UrlPromptOptions) => Promise<string | null>;
 }
-/**
- * Returns the built-in slash command list, optionally including media
- * commands based on which features are enabled in the host Editor.
- */
 export declare function buildDefaultSlashCommands(ctx?: SlashCommandsContext): SlashCommand[];
 interface SlashExtensionOptions {
     suggestion: Partial<SuggestionOptions>;

package/dist/Editor/editor.slash.svelte.js

@@ -9,10 +9,6 @@ function defaultPromptUrl(opts) {
         return Promise.resolve(null);
     return Promise.resolve(window.prompt(opts.title, opts.initialValue ?? opts.placeholder ?? ''));
 }
-/**
- * Returns the built-in slash command list, optionally including media
- * commands based on which features are enabled in the host Editor.
- */
 export function buildDefaultSlashCommands(ctx = {}) {
     const commands = [
         {
@@ -143,6 +139,7 @@ export function buildDefaultSlashCommands(ctx = {}) {
     }
     return commands;
 }
+let slashSeq = 0;
 function substringFilter(commands, query) {
     const q = query.trim().toLowerCase();
     if (!q)
@@ -163,6 +160,10 @@ function buildSuggestionRender() {
         onStart: (props) => {
             if (typeof document === 'undefined')
                 return;
+            const seq = ++slashSeq;
+            const listboxId = `sv5ui-slash-listbox-${seq}`;
+            const optionIdPrefix = `sv5ui-slash-${seq}-`;
+            const editorDom = props.editor.view.dom;
             const container = document.createElement('div');
             container.setAttribute('data-editor-slash-container', '');
             container.style.cssText = 'position:absolute;top:0;left:0;z-index:50;';
@@ -170,6 +171,8 @@ function buildSuggestionRender() {
             const state = $state({
                 items: props.items,
                 selectedIndex: 0,
+                listboxId,
+                optionIdPrefix,
                 onPick: (i) => {
                     const cmd = state.items[i];
                     if (!cmd)
@@ -181,7 +184,26 @@ function buildSuggestionRender() {
                 target: container,
                 props: state
             });
-            handle = { container, component, state, cleanup: null };
+            editorDom.setAttribute('aria-controls', listboxId);
+            editorDom.setAttribute('aria-expanded', 'true');
+            const stopActiveDescendant = $effect.root(() => {
+                $effect(() => {
+                    if (state.items.length > 0) {
+                        editorDom.setAttribute('aria-activedescendant', `${optionIdPrefix}${state.selectedIndex}`);
+                    }
+                    else {
+                        editorDom.removeAttribute('aria-activedescendant');
+                    }
+                });
+            });
+            handle = {
+                container,
+                component,
+                state,
+                cleanup: null,
+                editorDom,
+                stopActiveDescendant
+            };
             const rect = props.clientRect?.();
             if (rect) {
                 const virtualEl = { getBoundingClientRect: () => rect };
@@ -224,6 +246,12 @@ function buildSuggestionRender() {
             if (!handle)
                 return;
             handle.cleanup?.();
+            handle.stopActiveDescendant?.();
+            if (handle.editorDom) {
+                handle.editorDom.removeAttribute('aria-controls');
+                handle.editorDom.removeAttribute('aria-expanded');
+                handle.editorDom.removeAttribute('aria-activedescendant');
+            }
             unmount(handle.component);
             handle.container.remove();
             handle = null;
@@ -262,8 +290,6 @@ export function buildSlashExtension(commands, trigger = '/') {
             allowSpaces: false,
             items: ({ query }) => substringFilter(commands, query),
             render: buildSuggestionRender,
-            // Tiptap merges `suggestion` shallowly when an extension is .configure()'d,
-            // so the command default in addOptions gets overwritten. Include it here.
             command: ({ editor, range, props }) => {
                 editor.chain().focus().deleteRange(range).run();
                 props.run({ editor });

package/dist/Editor/editor.suggestion.js

@@ -1,4 +1,5 @@
 import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
+let mentionSeq = 0;
 function createPopup() {
     const popup = document.createElement('div');
     popup.setAttribute('data-editor-mention-popup', '');
@@ -25,6 +26,9 @@ function renderItems(state) {
         row.type = 'button';
         row.setAttribute('data-mention-item', '');
         row.setAttribute('data-index', String(i));
+        row.setAttribute('role', 'option');
+        row.id = `${state.optionIdPrefix}${i}`;
+        row.setAttribute('aria-selected', i === state.selectedIndex ? 'true' : 'false');
         row.className = [
             'flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start',
             'hover:bg-surface-container-high',
@@ -49,6 +53,9 @@ function renderItems(state) {
         });
         state.listEl?.appendChild(row);
     });
+    if (state.editorDom && state.items.length > 0) {
+        state.editorDom.setAttribute('aria-activedescendant', `${state.optionIdPrefix}${state.selectedIndex}`);
+    }
 }
 export function buildMentionSuggestion(options) {
     return {
@@ -66,17 +73,28 @@ export function buildMentionSuggestion(options) {
                 onStart: (props) => {
                     if (typeof document === 'undefined')
                         return;
+                    const seq = ++mentionSeq;
+                    const listboxId = `sv5ui-mention-listbox-${seq}`;
+                    const optionIdPrefix = `sv5ui-mention-${seq}-`;
+                    const editorDom = props.editor.view.dom;
                     const popupEl = createPopup();
                     const listEl = document.createElement('div');
                     listEl.setAttribute('role', 'listbox');
+                    listEl.id = listboxId;
+                    listEl.setAttribute('aria-label', 'Mentions');
                     popupEl.appendChild(listEl);
                     document.body.appendChild(popupEl);
+                    editorDom.setAttribute('aria-controls', listboxId);
+                    editorDom.setAttribute('aria-expanded', 'true');
                     state = {
                         items: props.items,
                         selectedIndex: 0,
                         popupEl,
                         listEl,
                         cleanup: null,
+                        editorDom,
+                        listboxId,
+                        optionIdPrefix,
                         pickItem: (i) => {
                             const it = state?.items[i];
                             if (!it)
@@ -134,6 +152,11 @@ export function buildMentionSuggestion(options) {
                 onExit: () => {
                     state?.cleanup?.();
                     state?.popupEl?.remove();
+                    if (state?.editorDom) {
+                        state.editorDom.removeAttribute('aria-controls');
+                        state.editorDom.removeAttribute('aria-expanded');
+                        state.editorDom.removeAttribute('aria-activedescendant');
+                    }
                     state = null;
                 }
             };

package/dist/Editor/editor.toolbar.js

@@ -1,11 +1,3 @@
-// ---------------------------------------------------------------------------
-// Fallback `run` handlers below (link/image/youtube) use window.prompt because
-// they need to gather a URL. Editor.svelte intercepts these actions and routes
-// them through the EditorUrlPrompt modal instead. The fallbacks only execute
-// when a consumer calls `api.run('link'|'image'|'youtube')` directly — at
-// which point we have no modal mount point, so window.prompt is the simplest
-// non-UI fallback.
-// ---------------------------------------------------------------------------
 function promptForLink(editor) {
     const previous = editor.getAttributes('link').href ?? 'https://';
     const url = typeof window === 'undefined' ? null : window.prompt('URL', previous);

package/dist/Editor/editor.types.d.ts

@@ -195,10 +195,20 @@ export interface EditorProps extends Omit<HTMLAttributes<HTMLElement>, 'class' |
      * Bindable content. The runtime type depends on `output`:
      * - `output: 'html'` (default) → `string` of HTML
      * - `output: 'json'` → `EditorJSON` document
+     *
+     * Security: the serialized value is structurally validated by the editor
+     * schema (unknown tags, attributes, and event handlers are dropped), but it
+     * is NOT sanitizer-clean. It can still contain arbitrary image `src` values
+     * (including `data:` URIs from pasted content). Sanitize the HTML output
+     * (e.g. with DOMPurify) before rendering it as raw markup elsewhere.
      */
     value?: string | EditorJSON;
     /**
      * Serialization format used for `value` and `onValueChange`.
+     *
+     * Read once when the editor mounts (it also decides whether the Markdown
+     * extension is loaded). Changing it on an existing editor has no effect —
+     * re-key the component (e.g. `{#key output}`) to switch formats.
      * @default 'html'
      */
     output?: EditorOutput;
@@ -257,8 +267,18 @@ export interface EditorProps extends Omit<HTMLAttributes<HTMLElement>, 'class' |
      * must return the resolved URL to insert as `<img src=...>`. When
      * omitted and `image` is `true`, images can only be inserted via URL
      * prompt (toolbar).
+     *
+     * The returned URL is validated before insertion: relative URLs,
+     * `http(s)`, and raster `data:image/*` URIs are allowed; `javascript:`,
+     * `data:text/*`, and `data:image/svg+xml` are rejected (the image is not
+     * inserted and a warning is logged).
      */
     onImageUpload?: (file: File) => Promise<string>;
+    /**
+     * Called when `onImageUpload` rejects. When omitted, the error is logged to
+     * the console. Use this to surface upload failures to the user.
+     */
+    onImageUploadError?: (error: unknown) => void;
     /**
      * Enable tables. Adds the `table` toolbar action which opens a
      * dimension picker (rows × columns) and inserts a new table.

package/dist/Editor/editor.variants.d.ts

@@ -52,7 +52,6 @@ export declare const editorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: string[];
     toolbar: string[];
-    toolbarGroup: string;
     toolbarButton: string[];
     toolbarSeparator: string;
     content: string[];
@@ -112,7 +111,6 @@ export declare const editorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: string[];
     toolbar: string[];
-    toolbarGroup: string;
     toolbarButton: string[];
     toolbarSeparator: string;
     content: string[];
@@ -172,7 +170,6 @@ export declare const editorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: string[];
     toolbar: string[];
-    toolbarGroup: string;
     toolbarButton: string[];
     toolbarSeparator: string;
     content: string[];
@@ -236,7 +233,6 @@ export declare const editorDefaults: {
     }, {
         root: string[];
         toolbar: string[];
-        toolbarGroup: string;
         toolbarButton: string[];
         toolbarSeparator: string;
         content: string[];
@@ -296,7 +292,6 @@ export declare const editorDefaults: {
     }, {
         root: string[];
         toolbar: string[];
-        toolbarGroup: string;
         toolbarButton: string[];
         toolbarSeparator: string;
         content: string[];

package/dist/Editor/editor.variants.js

@@ -13,7 +13,6 @@ export const editorVariants = tv({
             'bg-surface-container-low',
             'rounded-t-lg p-1.5'
         ],
-        toolbarGroup: 'flex items-center gap-0.5',
         toolbarButton: [
             'inline-flex items-center justify-center rounded text-on-surface-variant',
             'hover:bg-surface-container-high hover:text-on-surface',
@@ -25,7 +24,6 @@ export const editorVariants = tv({
         toolbarSeparator: 'mx-1 h-5 w-px shrink-0 bg-outline-variant',
         content: [
             'text-on-surface',
-            // ----- Inner ProseMirror element (the actual contenteditable) -----
             '[&_.ProseMirror]:outline-none',
             '[&_.ProseMirror]:focus:outline-none',
             '[&_.ProseMirror]:focus-visible:outline-none',
@@ -33,13 +31,11 @@ export const editorVariants = tv({
             '[&_.ProseMirror]:min-h-32',
             '[&_.ProseMirror]:whitespace-pre-wrap',
             '[&_.ProseMirror]:break-words',
-            // ----- Placeholder (when editor is empty) -----
             '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',
             '[&_.is-editor-empty]:before:text-on-surface-variant/60',
             '[&_.is-editor-empty]:before:pointer-events-none',
             '[&_.is-editor-empty]:before:float-left',
             '[&_.is-editor-empty]:before:h-0',
-            // ----- Content typography (lightweight in-house prose) -----
             '[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0',
             '[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:my-3',
             '[&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-3',
@@ -56,17 +52,13 @@ export const editorVariants = tv({
             '[&_hr]:border-outline-variant [&_hr]:my-4',
             '[&_strong]:font-semibold',
             '[&_em]:italic',
-            // ----- Image -----
             '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-md [&_img]:my-2',
-            // ----- YouTube embed (responsive 16:9) -----
             '[&_iframe[src*="youtube"]]:aspect-video [&_iframe[src*="youtube"]]:w-full [&_iframe[src*="youtube"]]:rounded-md [&_iframe[src*="youtube"]]:my-3 [&_iframe[src*="youtube"]]:border-0',
-            // ----- Mention chip -----
             '[&_.sv5ui-editor-mention]:inline-flex [&_.sv5ui-editor-mention]:items-center',
             '[&_.sv5ui-editor-mention]:rounded [&_.sv5ui-editor-mention]:bg-primary-container/60',
             '[&_.sv5ui-editor-mention]:text-on-primary-container',
             '[&_.sv5ui-editor-mention]:px-1.5 [&_.sv5ui-editor-mention]:py-0.5',
             '[&_.sv5ui-editor-mention]:text-sm [&_.sv5ui-editor-mention]:font-medium',
-            // ----- Table -----
             '[&_.tableWrapper]:my-3 [&_.tableWrapper]:overflow-x-auto',
             '[&_table]:w-full [&_table]:border-collapse [&_table]:table-fixed',
             '[&_table]:border [&_table]:border-outline-variant [&_table]:rounded-md',
@@ -77,12 +69,10 @@ export const editorVariants = tv({
             '[&_td]:border [&_td]:border-outline-variant',
             '[&_td]:px-2 [&_td]:py-1.5 [&_td]:align-top',
             '[&_td]:relative [&_td]:min-w-16',
-            // Tiptap selectedCell highlight + column resize handle
             '[&_.selectedCell]:bg-primary/10',
             '[&_.column-resize-handle]:absolute [&_.column-resize-handle]:top-0 [&_.column-resize-handle]:bottom-[-2px]',
             '[&_.column-resize-handle]:-right-0.5 [&_.column-resize-handle]:w-1',
             '[&_.column-resize-handle]:bg-primary/40 [&_.column-resize-handle]:pointer-events-none',
-            // ----- Selection styling -----
             '[&_::selection]:bg-primary/20'
         ],
         footer: [
@@ -94,11 +84,6 @@ export const editorVariants = tv({
         ],
         countLabel: 'tabular-nums',
         bubbleMenu: [
-            // ⚠️ Tiptap's BubbleMenu only sets `visibility:hidden` initially,
-            // leaving the element in normal flow (taking up space below the editor)
-            // until the user first selects text. Setting `position:absolute` upfront
-            // keeps it out of flow from mount — extension's Floating UI positioning
-            // then overrides left/top inline on selection.
             'absolute top-0 left-0 z-50 invisible',
             'flex items-center gap-0.5 p-1',
             'rounded-lg border border-outline-variant bg-surface',

package/dist/Editor/index.d.ts

@@ -29,10 +29,12 @@
  *
  * (`npm add` / `yarn add` work equally well.)
  *
- * All 18 packages are required, even if you only enable a subset of
- * features. Editor imports every extension at module load so toggling
- * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
- * import. Missing peers fail at runtime with module-resolution errors.
+ * All 18 packages must be installed even if you only enable a subset of
+ * features — missing peers fail at runtime with module-resolution errors.
+ * Most extensions are imported eagerly, but the heaviest optional ones load
+ * on demand: `tiptap-markdown` (only with `output="markdown"`) and the table
+ * packages (only with `tables`) are pulled in via dynamic `import()`, so your
+ * bundler code-splits them out of the base editor chunk when unused.
  *
  * ## Usage
  *

package/dist/Editor/index.js

@@ -29,10 +29,12 @@
  *
  * (`npm add` / `yarn add` work equally well.)
  *
- * All 18 packages are required, even if you only enable a subset of
- * features. Editor imports every extension at module load so toggling
- * `image`, `tables`, `youtube`, etc. via props doesn't trigger a dynamic
- * import. Missing peers fail at runtime with module-resolution errors.
+ * All 18 packages must be installed even if you only enable a subset of
+ * features — missing peers fail at runtime with module-resolution errors.
+ * Most extensions are imported eagerly, but the heaviest optional ones load
+ * on demand: `tiptap-markdown` (only with `output="markdown"`) and the table
+ * packages (only with `tables`) are pulled in via dynamic `import()`, so your
+ * bundler code-splits them out of the base editor chunk when unused.
  *
  * ## Usage
  *

package/dist/FileUpload/FileUpload.svelte

@@ -154,6 +154,13 @@
         }
     })
 
+    $effect(() => {
+        return () => {
+            for (const [, url] of urlCache) URL.revokeObjectURL(url)
+            urlCache.clear()
+        }
+    })
+
     export function open() {
         if (isDisabled) return
         inputRef?.click()

package/dist/Icon/icon.types.d.ts

@@ -1,6 +1,9 @@
 import type { IconProps as IconifyProps } from '@iconify/svelte';
+import type { SVGAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
-export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'> {
+export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'>, Pick<SVGAttributes<SVGSVGElement>, 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-hidden' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the rendered `<svg>`. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Icon name in Iconify format: "collection:icon-name"
      * @example "lucide:home", "mdi:account", "heroicons:star"

package/dist/Input/Input.svelte

@@ -94,19 +94,14 @@
     const resolvedId = $derived(id ?? formFieldContext?.ariaId)
     const resolvedName = $derived(name ?? formFieldContext?.name)
 
-    const isLeading = $derived(
-        (!!icon && !trailing) || (loading && !trailing) || !!leadingIcon || !!avatar
-    )
-    const isTrailing = $derived((!!icon && trailing) || (loading && trailing) || !!trailingIcon)
+    const loadingLeading = $derived(loading && !trailing)
+    const loadingTrailing = $derived(loading && trailing)
 
-    const leadingIconName = $derived(
-        loading && isLeading
-            ? loadingIcon
-            : leadingIcon || (isLeading && !trailing && !avatar ? icon : undefined)
-    )
-    const trailingIconName = $derived(
-        loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
-    )
+    const isLeading = $derived((!!icon && !trailing) || !!leadingIcon || !!avatar || loadingLeading)
+    const isTrailing = $derived((!!icon && trailing) || !!trailingIcon || loadingTrailing)
+
+    const leadingIconName = $derived(leadingIcon || (!!icon && !trailing ? icon : undefined))
+    const trailingIconName = $derived(trailingIcon || (!!icon && trailing ? icon : undefined))
 
     const ariaDescribedBy = $derived(
         !formFieldContext
@@ -123,7 +118,6 @@
             size: resolvedSize,
             leading: isLeading,
             trailing: isTrailing,
-            loading,
             highlight: resolvedHighlight
         })
     )
@@ -154,14 +148,20 @@
         <span class={classes.leading}>
             {@render leadingSlot()}
         </span>
-    {:else if isLeading && leadingIconName}
+    {:else if loadingLeading}
         <span class={classes.leading}>
-            <Icon name={leadingIconName} class={classes.leadingIcon} />
+            <span class="inline-flex animate-spin">
+                <Icon name={loadingIcon} class={classes.leadingIcon} />
+            </span>
         </span>
     {:else if avatar}
         <span class={classes.leading}>
             <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
         </span>
+    {:else if leadingIconName}
+        <span class={classes.leading}>
+            <Icon name={leadingIconName} class={classes.leadingIcon} />
+        </span>
     {/if}
 
     <input
@@ -185,7 +185,13 @@
         <span class={classes.trailing}>
             {@render trailingSlot()}
         </span>
-    {:else if isTrailing && trailingIconName}
+    {:else if loadingTrailing}
+        <span class={classes.trailing}>
+            <span class="inline-flex animate-spin">
+                <Icon name={loadingIcon} class={classes.trailingIcon} />
+            </span>
+        </span>
+    {:else if trailingIconName}
         <span class={classes.trailing}>
             <Icon name={trailingIconName} class={classes.trailingIcon} />
         </span>

package/dist/Input/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Input } from './Input.svelte';
-export type { InputProps } from './input.types.js';
+export type { InputProps, InputValue } from './input.types.js';