sv5ui 1.8.0 → 2.1.0

package/dist/Accordion/Accordion.svelte

@@ -53,7 +53,18 @@
 
     type SlotName = (typeof slotNames)[number]
 
+    const itemDefaults = $derived.by(() => {
+        const result = {} as Record<SlotName, string>
+        for (const slot of slotNames) {
+            result[slot] = variantSlots[slot]({ class: [config.slots[slot], ui?.[slot]] })
+        }
+        return result
+    })
+
     function getItemClasses(item: AccordionItem) {
+        if (!item.ui && item.class === undefined && item.disabled === undefined) {
+            return itemDefaults
+        }
         const result = {} as Record<SlotName, string>
         for (const slot of slotNames) {
             const baseClass = [

package/dist/Alert/alert.types.d.ts

@@ -43,7 +43,7 @@ export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'>
     color?: NonNullable<AlertVariantProps['color']>;
     /**
      * The visual style variant.
-     * @default 'soft'
+     * @default 'solid'
      */
     variant?: NonNullable<AlertVariantProps['variant']>;
     /**

package/dist/AvatarGroup/AvatarGroup.svelte

@@ -46,9 +46,11 @@
         }
     })
 
-    const visibleAvatars = $derived(
-        !avatars ? [] : max && max > 0 ? avatars.slice(0, max) : avatars
-    )
+    const visibleAvatars = $derived.by(() => {
+        if (!avatars) return []
+        const shown = max && max > 0 ? avatars.slice(0, max) : avatars
+        return [...shown].reverse()
+    })
 
     const overflowCount = $derived(
         avatars && max && max > 0 ? Math.max(0, avatars.length - max) : 0

package/dist/Badge/badge.types.d.ts

@@ -17,7 +17,7 @@ export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
      * Override styles for specific badge slots.
      * Available slots: base, label, leadingIcon, trailingIcon, leadingAvatar.
      */
-    ui?: Partial<Record<BadgeSlots, ClassNameValue>>;
+    ui?: Partial<Record<Exclude<BadgeSlots, 'leadingAvatarSize'>, ClassNameValue>>;
     /**
      * Sets the text content displayed inside the badge.
      */

package/dist/Button/Button.svelte

@@ -76,13 +76,14 @@
     const isLeading = $derived((!!icon && !trailing) || (isLoading && !trailing) || !!leadingIcon)
     const isTrailing = $derived((!!icon && trailing) || (isLoading && trailing) || !!trailingIcon)
 
+    const spinLeading = $derived(isLoading && !trailing)
+    const spinTrailing = $derived(isLoading && trailing)
+
     const leadingIconName = $derived(
-        isLoading && isLeading
-            ? loadingIcon
-            : leadingIcon || (isLeading && !trailing ? icon : undefined)
+        spinLeading ? loadingIcon : leadingIcon || (!trailing ? icon : undefined)
     )
     const trailingIconName = $derived(
-        isLoading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
+        spinTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
     )
 
     const resolvedColor = $derived(active && activeColor ? activeColor : color)
@@ -96,8 +97,8 @@
             block,
             square: isIconOnly,
             loading: isLoading,
-            leading: isLeading,
-            trailing: isTrailing
+            leading: spinLeading,
+            trailing: spinTrailing
         })
         return {
             base: slots.base({ class: [config.slots.base, fieldGroupClass, className, ui?.base] }),

package/dist/Button/button.types.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { ButtonVariantProps, ButtonSlots } from './button.variants.js';
 import type { AvatarProps } from '../Avatar/avatar.types.js';
-export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'color'> & {
+export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'color'> & Pick<HTMLButtonAttributes, 'name' | 'value' | 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'popovertarget' | 'popovertargetaction'> & Pick<HTMLAnchorAttributes, 'download' | 'hreflang' | 'ping' | 'media' | 'referrerpolicy'> & {
     /**
      * Bindable reference to the root DOM element.
      */
@@ -147,5 +147,5 @@ export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'color'> &
     /**
      * Override styles for specific button slots.
      */
-    ui?: Partial<Record<ButtonSlots, ClassNameValue>>;
+    ui?: Partial<Record<Exclude<ButtonSlots, 'leadingAvatarSize'>, ClassNameValue>>;
 };

package/dist/Calendar/Calendar.svelte

@@ -14,7 +14,7 @@
     import { calendarVariants, calendarDefaults } from './calendar.variants.js'
     import { getComponentConfig } from '../config.js'
     import Icon from '../Icon/Icon.svelte'
-    import type { DateValue } from '@internationalized/date'
+    import { type DateValue, today, getLocalTimeZone } from '@internationalized/date'
     import type { Month } from 'bits-ui'
     import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
@@ -63,6 +63,19 @@
         ...restProps
     }: Props = $props()
 
+    function firstDateOf(val: unknown): DateValue | undefined {
+        if (!val) return undefined
+        if (Array.isArray(val)) return val[0] as DateValue | undefined
+        if (typeof val === 'object' && 'start' in val) {
+            return (val as { start?: DateValue }).start
+        }
+        return val as DateValue
+    }
+
+    if (placeholder === undefined) {
+        placeholder = firstDateOf(value) ?? today(getLocalTimeZone())
+    }
+
     const formFieldContext = useFormField()
     const emit = useFormFieldEmit()
 

package/dist/Collapsible/collapsible.types.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
-import type { CollapsibleRootPropsWithoutHTML } from 'bits-ui';
+import type { CollapsibleRootProps, CollapsibleRootPropsWithoutHTML } from 'bits-ui';
 import type { CollapsibleSlots } from './collapsible.variants.js';
 /**
  * Props for the Collapsible component.
@@ -21,7 +21,9 @@ import type { CollapsibleSlots } from './collapsible.variants.js';
  *
  * @see https://bits-ui.com/docs/components/collapsible
  */
-export interface CollapsibleProps extends Pick<CollapsibleRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete' | 'disabled'> {
+export interface CollapsibleProps extends Pick<CollapsibleRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete' | 'disabled'>, Pick<CollapsibleRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the root element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/Command/command.types.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
-import type { CommandRootPropsWithoutHTML } from 'bits-ui';
+import type { CommandRootProps, CommandRootPropsWithoutHTML } from 'bits-ui';
 import type { CommandSlots, CommandVariantProps } from './command.variants.js';
 /**
  * Configuration for an individual command item.
@@ -57,7 +57,9 @@ export interface CommandItemSlotProps {
  *
  * @see https://bits-ui.com/docs/components/command
  */
-export interface CommandProps extends Pick<CommandRootPropsWithoutHTML, 'value' | 'onValueChange' | 'filter' | 'shouldFilter' | 'loop' | 'vimBindings' | 'label'> {
+export interface CommandProps extends Pick<CommandRootPropsWithoutHTML, 'value' | 'onValueChange' | 'filter' | 'shouldFilter' | 'loop' | 'vimBindings' | 'label'>, Pick<CommandRootProps, 'id'> {
+    /** Custom data attributes are forwarded to the root element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
     /** Bindable reference to the root DOM element. */
     ref?: HTMLElement | null;
     /** Array of grouped command items. */

package/dist/Command/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Command } from './Command.svelte';
-export type { CommandProps } from './command.types.js';
+export type { CommandProps, CommandGroup, CommandItem } from './command.types.js';

package/dist/ContextMenu/ContextMenu.svelte

@@ -329,7 +329,7 @@
 
 <ContextMenu.Root bind:open {onOpenChange}>
     {#if children}
-        <ContextMenu.Trigger class={className as string}>
+        <ContextMenu.Trigger class={[className]}>
             {@render children({ open })}
         </ContextMenu.Trigger>
     {/if}

package/dist/Drawer/Drawer.svelte

@@ -44,7 +44,8 @@
         titleSlot,
         descriptionSlot,
         body: bodySlot,
-        footer: footerSlot
+        footer: footerSlot,
+        ...rest
     }: Props = $props()
 
     const hasTitle = $derived(!!title || !!titleSlot)
@@ -81,6 +82,7 @@
 
     const rootProps = $derived.by(() => {
         const base = {
+            ...rest,
             open,
             onOpenChange: handleOpenChange,
             direction,
@@ -175,8 +177,10 @@
 
 {#snippet drawerBody()}
     {#if children}
-        <Drawer.Trigger class={className as string}>
-            {@render children()}
+        <Drawer.Trigger>
+            {#snippet child({ props })}
+                {@render children({ props })}
+            {/snippet}
         </Drawer.Trigger>
     {/if}
 

package/dist/Drawer/DrawerTriggerTestWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Drawer from './Drawer.svelte'
+</script>
+
+<Drawer>
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet content()}<p>Body</p>{/snippet}
+</Drawer>

package/dist/Drawer/DrawerTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DrawerTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DrawerTriggerTestWrapper = InstanceType<typeof DrawerTriggerTestWrapper>;
+export default DrawerTriggerTestWrapper;

package/dist/Drawer/drawer.types.d.ts

@@ -45,9 +45,20 @@ export type DrawerProps = VaulRootProps & {
      */
     class?: ClassNameValue;
     /**
-     * Default slot renders the trigger element.
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the drawer's trigger ARIA and event
+     * handlers land on the real control instead of a nested wrapper button.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ props })}
+     *   <Button {...props}>Open</Button>
+     * {/snippet}
+     * ```
      */
-    children?: Snippet;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
     /**
      * Custom content slot (replaces default layout with header/body/footer).
      */

package/dist/DropdownMenu/DropdownMenu.svelte

@@ -348,9 +348,7 @@
     {#if children}
         <DropdownMenu.Trigger>
             {#snippet child({ props })}
-                <span {...props} class={className as string}>
-                    {@render children({ open })}
-                </span>
+                {@render children({ open, props })}
             {/snippet}
         </DropdownMenu.Trigger>
     {/if}

package/dist/DropdownMenu/DropdownMenuTriggerTestWrapper.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import DropdownMenu from './DropdownMenu.svelte'
+    import type { DropdownMenuItem } from './dropdown-menu.types.js'
+
+    let { items = [] }: { items?: DropdownMenuItem[] } = $props()
+</script>
+
+<DropdownMenu {items}>
+    {#snippet children({ open, props })}
+        <button data-testid="trigger" data-open={open} {...props}>Open</button>
+    {/snippet}
+</DropdownMenu>

package/dist/DropdownMenu/DropdownMenuTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DropdownMenuItem } from './dropdown-menu.types.js';
+type $$ComponentProps = {
+    items?: DropdownMenuItem[];
+};
+declare const DropdownMenuTriggerTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type DropdownMenuTriggerTestWrapper = ReturnType<typeof DropdownMenuTriggerTestWrapper>;
+export default DropdownMenuTriggerTestWrapper;

package/dist/DropdownMenu/dropdown-menu.types.d.ts

@@ -129,10 +129,6 @@ export type DropdownMenuItem = DropdownMenuItemAction | DropdownMenuItemCheckbox
  * Configuration for a radio group within the dropdown menu.
  */
 export interface DropdownMenuRadioGroup {
-    /**
-     * Unique identifier for the radio group.
-     */
-    name: string;
     /**
      * Currently selected value in the group.
      */
@@ -178,8 +174,9 @@ export interface DropdownMenuProps extends RootProps, ContentProps {
      */
     items?: DropdownMenuItem[];
     /**
-     * Radio groups configuration for managing radio item selections.
-     * @example [{ name: 'theme', value: 'dark', onValueChange: (v) => theme = v }]
+     * Radio group configuration for managing radio item selections.
+     * Only the first entry is used — all `type: 'radio'` items belong to it.
+     * @example [{ value: 'dark', onValueChange: (v) => theme = v }]
      */
     radioGroups?: DropdownMenuRadioGroup[];
     /**
@@ -214,7 +211,9 @@ export interface DropdownMenuProps extends RootProps, ContentProps {
      */
     size?: NonNullable<DropdownMenuVariantProps['size']>;
     /**
-     * Additional CSS class for the trigger wrapper.
+     * Additional CSS class for the dropdown content.
+     * Applied only when no trigger `children` are provided (style your own
+     * trigger element directly otherwise).
      */
     class?: ClassNameValue;
     /**
@@ -222,11 +221,20 @@ export interface DropdownMenuProps extends RootProps, ContentProps {
      */
     ui?: Partial<Record<DropdownMenuSlots, ClassNameValue>>;
     /**
-     * Default slot content used as the trigger element.
-     * When provided, clicking this element opens the dropdown.
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the trigger's ARIA and event handlers land
+     * on the real control.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ open, props })}
+     *   <Button {...props}>{open ? 'Close' : 'Open'}</Button>
+     * {/snippet}
+     * ```
      */
     children?: Snippet<[{
         open: boolean;
+        props: Record<string, unknown>;
     }]>;
     /**
      * Custom content to render at the top of the dropdown menu.

package/dist/Editor/Editor.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-    import { Editor } from '@tiptap/core'
+    import { Editor, type AnyExtension } from '@tiptap/core'
     import BubbleMenuExt from '@tiptap/extension-bubble-menu'
     import { untrack } from 'svelte'
     import { editorVariants, editorDefaults } from './editor.variants.js'
@@ -24,7 +24,12 @@
     import Icon from '../Icon/Icon.svelte'
     import Tooltip from '../Tooltip/Tooltip.svelte'
     import EditorUrlPrompt from './EditorUrlPrompt.svelte'
-    import { httpUrlSchema, youtubeUrlSchema, type UrlSchema } from './editor.schemas.js'
+    import {
+        httpUrlSchema,
+        youtubeUrlSchema,
+        isSafeImageSrc,
+        type UrlSchema
+    } from './editor.schemas.js'
 
     const config = getComponentConfig('editor', editorDefaults)
 
@@ -53,6 +58,7 @@
         markdownAllowHtml = false,
         image = false,
         onImageUpload,
+        onImageUploadError,
         tables = false,
         onMention,
         mentionTrigger = '@',
@@ -77,6 +83,14 @@
     const formFieldContext = useFormField()
     const emit = useFormFieldEmit()
 
+    const resolvedOutput = untrack(() => output)
+
+    function getMarkdownStorage(ed: Editor): { getMarkdown?: () => string } | undefined {
+        return (ed.storage as unknown as Record<string, unknown>).markdown as
+            | { getMarkdown?: () => string }
+            | undefined
+    }
+
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false
     )
@@ -143,11 +157,9 @@
     }
 
     function serialize(ed: Editor): string | EditorJSON {
-        if (output === 'json') return ed.getJSON() as EditorJSON
-        if (output === 'markdown') {
-            const md = (ed.storage as unknown as Record<string, unknown>).markdown as
-                | { getMarkdown?: () => string }
-                | undefined
+        if (resolvedOutput === 'json') return ed.getJSON() as EditorJSON
+        if (resolvedOutput === 'markdown') {
+            const md = getMarkdownStorage(ed)
             if (md && typeof md.getMarkdown === 'function') {
                 return md.getMarkdown()
             }
@@ -191,7 +203,7 @@
         })
     }
 
-    function resolveExtensions() {
+    function resolveExtensions(): AnyExtension[] | Promise<AnyExtension[]> {
         if (extensionsOverride) return extensionsOverride
         return buildExtensions({
             headingLevels,
@@ -203,7 +215,7 @@
             tables,
             youtube,
             dragHandle,
-            markdown: output === 'markdown',
+            markdown: resolvedOutput === 'markdown',
             markdownAllowHtml,
             mentionTrigger,
             mentionSuggestion: onMention
@@ -228,14 +240,11 @@
     }
 
     let suppressUpdate = false
+    let lastEmitted: string | EditorJSON | undefined
 
     $effect(() => {
         if (!contentElement) return
 
-        // Untrack: these props would otherwise cause editor recreation on every
-        // keystroke (value changes via onUpdate → effect re-runs → destroy + rebuild
-        // → cursor lost → can only type 1 char). value sync is handled by a
-        // dedicated effect below; disabled/readonly toggle via setEditable.
         const initialContent = untrack(() => value ?? '')
         const initialEditable = untrack(() => !disabled && !readonly)
         const initialAutofocus = untrack(() => autofocus)
@@ -245,43 +254,57 @@
             ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),
             ...(hasError ? { 'aria-invalid': 'true' } : {})
         }))
-        const exts = untrack(() => resolveExtensions())
-
-        const ed = new Editor({
-            element: contentElement,
-            extensions: exts,
-            content: initialContent,
-            editable: initialEditable,
-            autofocus: initialAutofocus,
-            editorProps: {
-                attributes: initialAttrs as Record<string, string>
-            },
-            onCreate: ({ editor: e }) => syncState(e),
-            onUpdate: ({ editor: e }) => {
-                syncState(e)
-                if (suppressUpdate) return
-                const serialized = serialize(e)
-                value = serialized
-                emit.onInput()
-                onValueChange?.(serialized)
-            },
-            onSelectionUpdate: ({ editor: e }) => syncState(e),
-            onFocus: ({ editor: e }) => {
-                syncState(e)
-                emit.onFocus()
-                onFocus?.()
-            },
-            onBlur: ({ editor: e }) => {
-                syncState(e)
-                emit.onBlur()
-                onBlur?.()
-            }
-        })
+        const el = contentElement
+        const result = untrack(() => resolveExtensions())
+
+        let ed: Editor | null = null
+        let cancelled = false
+
+        const create = (exts: AnyExtension[]) => {
+            if (cancelled) return
+            ed = new Editor({
+                element: el,
+                extensions: exts,
+                content: initialContent,
+                editable: initialEditable,
+                autofocus: initialAutofocus,
+                editorProps: {
+                    attributes: initialAttrs as Record<string, string>
+                },
+                onCreate: ({ editor: e }) => syncState(e),
+                onUpdate: ({ editor: e }) => {
+                    syncState(e)
+                    if (suppressUpdate) return
+                    const serialized = serialize(e)
+                    lastEmitted = serialized
+                    value = serialized
+                    emit.onInput()
+                    onValueChange?.(serialized)
+                },
+                onSelectionUpdate: ({ editor: e }) => syncState(e),
+                onFocus: ({ editor: e }) => {
+                    syncState(e)
+                    emit.onFocus()
+                    onFocus?.()
+                },
+                onBlur: ({ editor: e }) => {
+                    syncState(e)
+                    emit.onBlur()
+                    onBlur?.()
+                }
+            })
+            editor = ed
+        }
 
-        editor = ed
+        if (result instanceof Promise) {
+            result.then(create)
+        } else {
+            create(result)
+        }
 
         return () => {
-            ed.destroy()
+            cancelled = true
+            ed?.destroy()
             editor = null
         }
     })
@@ -294,9 +317,6 @@
         }
     })
 
-    // Sync aria attributes on the ProseMirror element when error/id state changes.
-    // Tiptap's editorProps.attributes is read once at init, so toggling needs
-    // direct DOM access. Run on every state change.
     $effect(() => {
         if (!contentElement) return
         const pm = contentElement.querySelector('.ProseMirror') as HTMLElement | null
@@ -311,6 +331,7 @@
     $effect(() => {
         if (!editor) return
         if (value === undefined) return
+        if (typeof value === 'string' && value === lastEmitted) return
         const current = serialize(editor)
         if (isContentEqual(current, value)) return
         suppressUpdate = true
@@ -334,13 +355,11 @@
             TOOLBAR_ACTIONS[action].run(editor)
         },
         getValue(format) {
-            if (!editor) return output === 'json' ? ({} as EditorJSON) : ''
-            const fmt = format ?? output
+            if (!editor) return resolvedOutput === 'json' ? ({} as EditorJSON) : ''
+            const fmt = format ?? resolvedOutput
             if (fmt === 'json') return editor.getJSON() as EditorJSON
             if (fmt === 'markdown') {
-                const md = (editor.storage as unknown as Record<string, unknown>).markdown as
-                    | { getMarkdown?: () => string }
-                    | undefined
+                const md = getMarkdownStorage(editor)
                 if (md && typeof md.getMarkdown === 'function') return md.getMarkdown()
                 return editor.getHTML()
             }
@@ -384,7 +403,6 @@
         return {
             root: slots.root({ class: [c.root, className, u.root] }),
             toolbar: slots.toolbar({ class: [c.toolbar, u.toolbar] }),
-            toolbarGroup: slots.toolbarGroup({ class: [c.toolbarGroup, u.toolbarGroup] }),
             toolbarButton: slots.toolbarButton({ class: [c.toolbarButton, u.toolbarButton] }),
             toolbarSeparator: slots.toolbarSeparator({
                 class: [c.toolbarSeparator, u.toolbarSeparator]
@@ -396,7 +414,6 @@
         }
     })
 
-    // ----- URL prompt modal (shared by YouTube/Image/Link toolbar + slash) -----
     interface UrlPromptState {
         open: boolean
         title: string
@@ -440,7 +457,6 @@
         }
     }
 
-    // ----- Image upload via hidden file input -----
     let fileInput: HTMLInputElement | null = $state(null)
 
     async function handleFileSelected(event: Event): Promise<void> {
@@ -452,10 +468,19 @@
         if (!onImageUpload) return
         try {
             const url = await onImageUpload(file)
+            if (!isSafeImageSrc(url)) {
+                // eslint-disable-next-line no-console
+                console.warn('[Editor] blocked unsafe image src from onImageUpload:', url)
+                return
+            }
             editor.chain().focus().setImage({ src: url }).run()
         } catch (err) {
-            // eslint-disable-next-line no-console
-            console.error('[Editor] image upload failed', err)
+            if (onImageUploadError) {
+                onImageUploadError(err)
+            } else {
+                // eslint-disable-next-line no-console
+                console.error('[Editor] image upload failed', err)
+            }
         }
     }
 
@@ -503,7 +528,6 @@
         })
     }
 
-    // ----- Table dimension picker -----
     let tableMenuOpen = $state(false)
     let tablePickerRows = $state(0)
     let tablePickerCols = $state(0)