@thomasfosterau/prosekit-svelte 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,21 @@
+/**
+ * `@thomasfosterau/prosekit-svelte` — Svelte 5 editor components on ProseKit.
+ *
+ * `Editor.svelte` carries this package's only side-effecting imports, the
+ * ProseKit basic stylesheets, and through `createEditor` it pulls the
+ * ProseKit runtime behind them. Import a component from here by path from a
+ * route that genuinely edits a document, or through a dynamic `import()`
+ * from one that only sometimes does; never re-export one from a barrel an
+ * application loads on every page.
+ *
+ * @module
+ */
+export { default as BlockEditor } from './editor/BlockEditor.svelte';
+export { default as Editor } from './editor/Editor.svelte';
+export { default as InlineEditor } from './editor/InlineEditor.svelte';
+export { defaultEditorMessages, getEditorMessages, setEditorMessages, } from "./messages.svelte.js";
+export { default as BlockToolbar } from './toolbar/BlockToolbar.svelte';
+export { default as ImageDialog } from './toolbar/ImageDialog.svelte';
+export { createDefaultSlashCommands, createDefaultToolbarItems, isToolbarSeparator, } from "./toolbar/items.js";
+export { default as LinkDialog } from './toolbar/LinkDialog.svelte';
+export { default as SlashMenu } from './toolbar/SlashMenu.svelte';

package/dist/messages.svelte.d.ts

@@ -0,0 +1,162 @@
+/**
+ * The optional per-render-site copy override.
+ *
+ * Every string this package renders is already a prop with an English
+ * default, so an application can translate one call site by passing props.
+ * {@link setEditorMessages} is the other half: it changes those *defaults*
+ * for one subtree, so an application that mounts the editor from several
+ * places wires its catalogue once per place instead of threading twenty
+ * props through each.
+ *
+ * It is deliberately set **per render site** — from the component that
+ * mounts an editor — and never from a root layout. Wiring it high in the
+ * tree means importing this package's barrel there, and `Editor.svelte`'s
+ * bare `prosekit/basic/*.css` imports would then land in every page's shared
+ * chunk along with the ProseKit runtime they pull behind them. That is the
+ * one bundle boundary this package exists to hold (the app repos measured it
+ * and enforce it with bundle-boundary tests; PERF-BUNDLE-001).
+ *
+ * When no provider is mounted — Storybook, a test, an application that never
+ * wires it — {@link getEditorMessages} returns {@link defaultEditorMessages}.
+ * The missing-provider case is the documented normal case, not an error:
+ * the editor is silently un-translated, never broken.
+ *
+ * @module
+ */
+/**
+ * Every user-facing string this package can render, as one flat record of
+ * plain strings.
+ *
+ * Flat and plain on purpose. Nested groups would have to be merged
+ * recursively for a partial override to work, and message *functions* (what
+ * the applications this package was extracted from used) force every call
+ * site to remember the parentheses. A string is what a Svelte prop wants.
+ *
+ * The first block is the component label props; the rest are the labels of
+ * the items {@link createDefaultToolbarItems} and
+ * {@link createDefaultSlashCommands} build, which are data rather than
+ * markup and so are the only way to translate them.
+ */
+export interface EditorMessages {
+    /** Accessible name of `BlockToolbar`'s `role="toolbar"`. */
+    readonly toolbarLabel: string;
+    /** Visible label and accessible name of the insert-menu trigger. */
+    readonly insertLabel: string;
+    /** Accessible name of the open insert menu. */
+    readonly insertMenuLabel: string;
+    /** `LinkDialog`'s heading — the dialog's accessible name. */
+    readonly linkDialogTitle: string;
+    /** Label of `LinkDialog`'s URL field. */
+    readonly linkHrefLabel: string;
+    /** Label of `LinkDialog`'s optional title field. */
+    readonly linkTitleLabel: string;
+    /** `LinkDialog`'s submit button. */
+    readonly linkSubmitLabel: string;
+    /** `LinkDialog`'s remove-the-link button. */
+    readonly linkRemoveLabel: string;
+    /** `LinkDialog`'s cancel button. */
+    readonly linkCancelLabel: string;
+    /** Accessible name of `LinkDialog`'s corner close button. */
+    readonly linkCloseLabel: string;
+    /** Shown in a `role="alert"` when the URL fails `isSafeHref`. */
+    readonly linkInvalidHrefMessage: string;
+    /** `ImageDialog`'s heading — the dialog's accessible name. */
+    readonly imageDialogTitle: string;
+    /** Label of `ImageDialog`'s source field. */
+    readonly imageSrcLabel: string;
+    /** `ImageDialog`'s submit button. */
+    readonly imageSubmitLabel: string;
+    /** `ImageDialog`'s cancel button. */
+    readonly imageCancelLabel: string;
+    /** Accessible name of `ImageDialog`'s corner close button. */
+    readonly imageCloseLabel: string;
+    /** Shown in a `role="alert"` when the source fails `isSafeHref`. */
+    readonly imageInvalidSrcMessage: string;
+    /** Default toolbar item: toggle the `bold` mark. */
+    readonly bold: string;
+    /** Default toolbar item: toggle the `italic` mark. */
+    readonly italic: string;
+    /** Default toolbar item: toggle the `underline` mark. */
+    readonly underline: string;
+    /** Default toolbar item: toggle the `strike` mark. */
+    readonly strike: string;
+    /** Default toolbar item: toggle the `highlight` mark. */
+    readonly highlight: string;
+    /** Default toolbar item: toggle the `subscript` mark. */
+    readonly subscript: string;
+    /** Default toolbar item: toggle the `superscript` mark. */
+    readonly superscript: string;
+    /** Default toolbar item: open `LinkDialog`. */
+    readonly link: string;
+    /** Default toolbar item: set the block to a paragraph. */
+    readonly paragraph: string;
+    /** Default toolbar item: toggle a level-2 heading. */
+    readonly heading2: string;
+    /** Default toolbar item: toggle a blockquote. */
+    readonly quote: string;
+    /** Default toolbar item: toggle a bullet list. */
+    readonly bullets: string;
+    /** Default toolbar item: toggle an ordered list. */
+    readonly numbered: string;
+    /** Default toolbar item: toggle a code block. */
+    readonly codeBlock: string;
+    /** Default toolbar item: insert a horizontal rule. */
+    readonly rule: string;
+    /** Default toolbar item: insert a 3×3 table. */
+    readonly table: string;
+    /** Default toolbar item: open `ImageDialog`. */
+    readonly image: string;
+    /** Default toolbar item: undo. */
+    readonly undo: string;
+    /** Default toolbar item: redo. */
+    readonly redo: string;
+    /** Default insert-menu command: set the block to a paragraph. */
+    readonly slashParagraph: string;
+    /** Default insert-menu command: toggle a level-2 heading. */
+    readonly slashHeading2: string;
+    /** Default insert-menu command: toggle a blockquote. */
+    readonly slashBlockquote: string;
+    /** Default insert-menu command: toggle a bullet list. */
+    readonly slashBulletList: string;
+    /** Default insert-menu command: toggle an ordered list. */
+    readonly slashOrderedList: string;
+    /** Default insert-menu command: toggle a task list. */
+    readonly slashTodoList: string;
+    /** Default insert-menu command: toggle a code block. */
+    readonly slashCodeBlock: string;
+    /** Default insert-menu command: insert a 3×3 table. */
+    readonly slashTable: string;
+    /** Default insert-menu command: open `ImageDialog`. */
+    readonly slashImage: string;
+    /** Default insert-menu command: insert a horizontal rule. */
+    readonly slashHorizontalRule: string;
+}
+/**
+ * The English copy every prop falls back to.
+ *
+ * The item labels are the ones the applications this package was extracted
+ * from shipped, abbreviations included (`P`, `H2`, `Sub`, `Sup`): the
+ * default toolbar draws no icons, so an item's label is both its visible
+ * text and its accessible name, and changing them would change what those
+ * applications' users read. An application that wants longer names passes
+ * its own `items`, or overrides these keys.
+ */
+export declare const defaultEditorMessages: EditorMessages;
+/**
+ * Provides the copy for this subtree, merged over
+ * {@link defaultEditorMessages}.
+ *
+ * Call it during the initialisation of the component that mounts an editor —
+ * Svelte's `setContext` is only legal there — and pass only the keys being
+ * translated; everything else keeps its English default.
+ */
+export declare function setEditorMessages(messages: Partial<EditorMessages>): void;
+/**
+ * Reads the copy for this subtree, or {@link defaultEditorMessages} when no
+ * provider is mounted.
+ *
+ * Call it once in a component's `<script>` and spend the result in the
+ * `$props()` defaults (`label = messages.toolbarLabel`), so a caller's own
+ * prop still wins over the context.
+ */
+export declare function getEditorMessages(): EditorMessages;

package/dist/messages.svelte.js

@@ -0,0 +1,114 @@
+/**
+ * The optional per-render-site copy override.
+ *
+ * Every string this package renders is already a prop with an English
+ * default, so an application can translate one call site by passing props.
+ * {@link setEditorMessages} is the other half: it changes those *defaults*
+ * for one subtree, so an application that mounts the editor from several
+ * places wires its catalogue once per place instead of threading twenty
+ * props through each.
+ *
+ * It is deliberately set **per render site** — from the component that
+ * mounts an editor — and never from a root layout. Wiring it high in the
+ * tree means importing this package's barrel there, and `Editor.svelte`'s
+ * bare `prosekit/basic/*.css` imports would then land in every page's shared
+ * chunk along with the ProseKit runtime they pull behind them. That is the
+ * one bundle boundary this package exists to hold (the app repos measured it
+ * and enforce it with bundle-boundary tests; PERF-BUNDLE-001).
+ *
+ * When no provider is mounted — Storybook, a test, an application that never
+ * wires it — {@link getEditorMessages} returns {@link defaultEditorMessages}.
+ * The missing-provider case is the documented normal case, not an error:
+ * the editor is silently un-translated, never broken.
+ *
+ * @module
+ */
+import { getContext, setContext } from 'svelte';
+/**
+ * The English copy every prop falls back to.
+ *
+ * The item labels are the ones the applications this package was extracted
+ * from shipped, abbreviations included (`P`, `H2`, `Sub`, `Sup`): the
+ * default toolbar draws no icons, so an item's label is both its visible
+ * text and its accessible name, and changing them would change what those
+ * applications' users read. An application that wants longer names passes
+ * its own `items`, or overrides these keys.
+ */
+export const defaultEditorMessages = {
+    toolbarLabel: 'Editor toolbar',
+    insertLabel: 'Insert',
+    insertMenuLabel: 'Insert block',
+    linkDialogTitle: 'Link',
+    linkHrefLabel: 'URL',
+    linkTitleLabel: 'Title (optional)',
+    linkSubmitLabel: 'Apply',
+    linkRemoveLabel: 'Remove link',
+    linkCancelLabel: 'Cancel',
+    linkCloseLabel: 'Close',
+    linkInvalidHrefMessage: 'Enter an http, https or mailto URL.',
+    imageDialogTitle: 'Image',
+    imageSrcLabel: 'Image URL',
+    imageSubmitLabel: 'Insert',
+    imageCancelLabel: 'Cancel',
+    imageCloseLabel: 'Close',
+    imageInvalidSrcMessage: 'Enter an http, https or mailto URL.',
+    bold: 'Bold',
+    italic: 'Italic',
+    underline: 'Underline',
+    strike: 'Strike',
+    highlight: 'Highlight',
+    subscript: 'Sub',
+    superscript: 'Sup',
+    link: 'Link',
+    paragraph: 'P',
+    heading2: 'H2',
+    quote: 'Quote',
+    bullets: 'Bullets',
+    numbered: 'Numbered',
+    codeBlock: 'Code',
+    rule: 'Rule',
+    table: 'Table',
+    image: 'Image',
+    undo: 'Undo',
+    redo: 'Redo',
+    slashParagraph: 'Paragraph',
+    slashHeading2: 'Heading 2',
+    slashBlockquote: 'Blockquote',
+    slashBulletList: 'Bullet List',
+    slashOrderedList: 'Ordered List',
+    slashTodoList: 'Todo List',
+    slashCodeBlock: 'Code Block',
+    slashTable: 'Table',
+    slashImage: 'Image',
+    slashHorizontalRule: 'Horizontal Rule',
+};
+/**
+ * The context key.
+ *
+ * `Symbol.for` rather than `Symbol()`: a registry symbol is the same value
+ * in two copies of this module, which is what keeps a duplicated bundle from
+ * silently falling back to English on one half of the tree.
+ */
+const MESSAGES_KEY = Symbol.for('@thomasfosterau/prosekit-svelte/messages');
+/**
+ * Provides the copy for this subtree, merged over
+ * {@link defaultEditorMessages}.
+ *
+ * Call it during the initialisation of the component that mounts an editor —
+ * Svelte's `setContext` is only legal there — and pass only the keys being
+ * translated; everything else keeps its English default.
+ */
+export function setEditorMessages(messages) {
+    setContext(MESSAGES_KEY, { ...defaultEditorMessages, ...messages });
+}
+/**
+ * Reads the copy for this subtree, or {@link defaultEditorMessages} when no
+ * provider is mounted.
+ *
+ * Call it once in a component's `<script>` and spend the result in the
+ * `$props()` defaults (`label = messages.toolbarLabel`), so a caller's own
+ * prop still wins over the context.
+ */
+export function getEditorMessages() {
+    return getContext(MESSAGES_KEY) ?? defaultEditorMessages;
+}

package/dist/toolbar/BlockToolbar.svelte

@@ -0,0 +1,162 @@
+<!-- @component The editor toolbar rendered from `ToolbarItem`s and `SlashCommand`s on a bits-ui `Toolbar` (one tab stop, arrow keys, `aria-pressed` toggles). Render it inside an `Editor`. -->
+
+<!--
+  BlockToolbar — the editor's toolbar, rendered from a list of items.
+
+  ARIA and keyboard contract: bits-ui's `Toolbar`. `role="toolbar"`, one tab
+  stop for the whole toolbar, arrow keys to move between items (wrapping),
+  Home and End to the ends, and disabled items skipped. The applications this
+  package was extracted from had `role="toolbar"` and an accessible name and
+  nothing else — every button was a tab stop, and the "active" state of a
+  toggle was a CSS class with no `aria-pressed` behind it. That is what the
+  browser suite pins here.
+
+  What is local: `aria-pressed` for `kind: 'toggle'` items, read from the
+  item's own `isActive` on every editor update (hence `useEditor({ update:
+  true })`); `disabled` from `isEnabled`; the separators; and pulling focus
+  back into the document after a command runs, so typing continues where it
+  left off. A run that opens a dialog says so through `dialogs`, and the
+  refocus is skipped — otherwise it would fire before the dialog's focus trap
+  and steal the focus straight back.
+
+  The dialogs are rendered here rather than by each item because an item is a
+  plain value with no markup of its own; `ToolbarRunContext.dialogs` is the
+  seam. The link dialog is seeded from the selection's own link mark, so the
+  button edits an existing link instead of silently replacing it.
+
+  Every class is a literal: Tailwind only generates what it can read in
+  source, so `btn-${something}` would emit nothing at build time.
+-->
+<script lang="ts">import { Toolbar } from "bits-ui";
+import { getMarkRange } from "prosekit/core";
+import { useEditor } from "prosekit/svelte";
+import { getEditorMessages } from "../messages.svelte.js";
+import ImageDialog from "./ImageDialog.svelte";
+import { createDefaultSlashCommands, createDefaultToolbarItems, isToolbarSeparator } from "./items.js";
+import LinkDialog from "./LinkDialog.svelte";
+import SlashMenu from "./SlashMenu.svelte";
+const messages = getEditorMessages();
+let { items = createDefaultToolbarItems(messages), slashCommands = createDefaultSlashCommands(messages), label = messages.toolbarLabel, labelledBy, insertLabel = messages.insertLabel, insertMenuLabel = messages.insertMenuLabel, linkDialog, imageDialog, class: className, id, ...rest } = $props();
+const editorStore = useEditor({ update: true });
+const BUTTON_CLASS = "btn btn-sm btn-ghost border-base-300 border";
+const PRESSED_CLASS = "btn-active";
+let linkOpen = $state(false);
+let imageOpen = $state(false);
+let linkSeed = $state({
+	href: "",
+	title: ""
+});
+/**
+* Reads the link mark touching the caret, so the dialog opens on the link
+* the user is standing in rather than blank over the top of it. Guarded on
+* the schema: an application may use these items with a grammar that has
+* no link mark, and `getMarkRange` would throw for it.
+*/
+function currentLink(editor) {
+	if (editor.schema.marks["link"] === undefined) return {
+		href: "",
+		title: ""
+	};
+	const range = getMarkRange(editor.state.selection.$from, "link");
+	const attrs = range?.mark.attrs ?? {};
+	return {
+		href: typeof attrs["href"] === "string" ? attrs["href"] : "",
+		title: typeof attrs["title"] === "string" ? attrs["title"] : ""
+	};
+}
+/** Tracks whether the run just performed asked for a dialog. */
+let opening = false;
+const dialogs = {
+	link: () => {
+		opening = true;
+		linkSeed = currentLink($editorStore);
+		linkOpen = true;
+	},
+	image: () => {
+		opening = true;
+		imageOpen = true;
+	}
+};
+function run(item) {
+	opening = false;
+	item.run({
+		editor: $editorStore,
+		dialogs
+	});
+	if (!opening) $editorStore.focus();
+}
+function applyLink(attrs) {
+	const editor = $editorStore;
+	// ProseKit's stock `link` mark declares `href`, `target` and `rel`; a
+	// `title` reaches `addLink` for a grammar whose link mark declares one
+	// and is dropped by `computeAttrs` for one that does not.
+	editor.commands["addLink"]?.(attrs);
+	editor.focus();
+}
+function removeLink() {
+	const editor = $editorStore;
+	editor.commands["removeLink"]?.();
+	editor.focus();
+}
+function insertImage(attrs) {
+	const editor = $editorStore;
+	editor.commands["insertNode"]?.({
+		type: "image",
+		attrs
+	});
+	editor.focus();
+}
+</script>
+
+<Toolbar.Root
+  {...rest}
+  {...(id === undefined ? {} : { id })}
+  aria-label={label}
+  aria-labelledby={labelledBy || undefined}
+  class={[
+    'border-base-300 bg-base-100 flex flex-wrap items-center gap-1.5 rounded border p-2',
+    className,
+  ]}
+>
+  {#each items as item (item.id)}
+    {#if isToolbarSeparator(item)}
+      <div role="separator" aria-orientation="vertical" class="bg-base-300 mx-1 h-5 w-px"></div>
+    {:else}
+      <Toolbar.Button
+        disabled={item.isEnabled === undefined ? false : !item.isEnabled($editorStore)}
+        aria-pressed={item.kind === 'toggle'
+          ? (item.isActive?.($editorStore) ?? false)
+          : undefined}
+        class={[
+          BUTTON_CLASS,
+          item.kind === 'toggle' && item.isActive?.($editorStore) === true && PRESSED_CLASS,
+        ]}
+        onclick={() => run(item)}
+      >
+        {item.label}
+      </Toolbar.Button>
+    {/if}
+  {/each}
+
+  <SlashMenu
+    commands={slashCommands}
+    label={insertLabel}
+    menuLabel={insertMenuLabel}
+    {dialogs}
+  >
+    {#snippet trigger({ props })}
+      <Toolbar.Button {...props} class={BUTTON_CLASS}>{insertLabel}</Toolbar.Button>
+    {/snippet}
+  </SlashMenu>
+</Toolbar.Root>
+
+<LinkDialog
+  bind:open={linkOpen}
+  href={linkSeed.href}
+  title={linkSeed.title}
+  onSubmit={applyLink}
+  onRemove={removeLink}
+  {...linkDialog}
+/>
+
+<ImageDialog bind:open={imageOpen} onSubmit={insertImage} {...imageDialog} />

package/dist/toolbar/BlockToolbar.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type SlashCommand, type ToolbarItem, type ToolbarSeparator } from './items.ts';
+/** The label props `BlockToolbar` forwards to `LinkDialog`. */
+interface LinkDialogLabels {
+    titleLabel: string;
+    hrefLabel: string;
+    linkTitleLabel: string;
+    submitLabel: string;
+    removeLabel: string;
+    cancelLabel: string;
+    closeLabel: string;
+    invalidHrefMessage: string;
+}
+/** The label props `BlockToolbar` forwards to `ImageDialog`. */
+interface ImageDialogLabels {
+    titleLabel: string;
+    srcLabel: string;
+    submitLabel: string;
+    cancelLabel: string;
+    closeLabel: string;
+    invalidSrcMessage: string;
+}
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id' | 'aria-label' | 'aria-labelledby'> {
+    /** The toolbar element's `id`. */
+    id?: string | undefined;
+    /** The buttons and separators, in order. */
+    items?: ReadonlyArray<ToolbarItem | ToolbarSeparator> | undefined;
+    /** The insert menu's entries. */
+    slashCommands?: ReadonlyArray<SlashCommand> | undefined;
+    /** Accessible name of the toolbar. */
+    label?: string | undefined;
+    /**
+     * The `id` (or space-separated `id`s) of the visible element that names
+     * the toolbar, rendered as `aria-labelledby`. Wins over `label`, which
+     * stays the fallback name if no element has the id.
+     */
+    labelledBy?: string | undefined;
+    /** Visible text and accessible name of the insert button. */
+    insertLabel?: string | undefined;
+    /** Accessible name of the open insert menu. */
+    insertMenuLabel?: string | undefined;
+    /** Label overrides for the link dialog. */
+    linkDialog?: Partial<LinkDialogLabels> | undefined;
+    /** Label overrides for the image dialog. */
+    imageDialog?: Partial<ImageDialogLabels> | undefined;
+    /** Extra classes on the toolbar. */
+    class?: string | undefined;
+}
+/** The editor toolbar rendered from `ToolbarItem`s and `SlashCommand`s on a bits-ui `Toolbar` (one tab stop, arrow keys, `aria-pressed` toggles). Render it inside an `Editor`. */
+declare const BlockToolbar: import("svelte").Component<Props, {}, "">;
+type BlockToolbar = ReturnType<typeof BlockToolbar>;
+export default BlockToolbar;

package/dist/toolbar/ImageDialog.svelte

@@ -0,0 +1,86 @@
+<!-- @component The image prompt as a bits-ui modal, asking only for the source URL the stock `image` node can hold. -->
+
+<!--
+  ImageDialog — the image prompt, as a modal. `LinkDialog`'s reasoning,
+  applied to the other prompt.
+
+  One field, deliberately. The applications this package was extracted from
+  asked four questions — source, alt text, title, caption — and passed all
+  four as node attributes; ProseKit's stock `image` node declares `src`,
+  `width` and `height`, so ProseMirror's `computeAttrs` dropped the other
+  three on the way in. Three of those four prompts collected text that went
+  nowhere. Only the one the schema can hold is asked for here; an
+  application whose image node declares more passes its own toolbar item.
+
+  ARIA contract: bits-ui's, as `LinkDialog`.
+-->
+<script lang="ts">import { isSafeHref } from "@thomasfosterau/prosekit-utilities";
+import { Dialog } from "bits-ui";
+import { getEditorMessages } from "../messages.svelte.js";
+const messages = getEditorMessages();
+let { open = $bindable(false), src = "", onSubmit, titleLabel = messages.imageDialogTitle, srcLabel = messages.imageSrcLabel, submitLabel = messages.imageSubmitLabel, cancelLabel = messages.imageCancelLabel, closeLabel = messages.imageCloseLabel, invalidSrcMessage = messages.imageInvalidSrcMessage, class: className, id, ...rest } = $props();
+const uid = $props.id();
+const srcId = `${uid}-src`;
+const errorId = `${uid}-error`;
+let srcValue = $state("");
+let invalid = $state(false);
+$effect(() => {
+	if (!open) return;
+	srcValue = src;
+	invalid = false;
+});
+function submit(event) {
+	event.preventDefault();
+	const candidate = srcValue.trim();
+	if (!isSafeHref(candidate)) {
+		invalid = true;
+		return;
+	}
+	onSubmit({ src: candidate });
+	open = false;
+}
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Portal>
+    <Dialog.Overlay class="bg-base-300/60 fixed inset-0 z-40" />
+    <Dialog.Content
+      {...rest}
+      {...(id === undefined ? {} : { id })}
+      class={[
+        'modal-box fixed left-1/2 top-1/2 z-50 w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2',
+        className,
+      ]}
+    >
+      <div class="flex items-start justify-between gap-4">
+        <Dialog.Title class="text-lg font-semibold">{titleLabel}</Dialog.Title>
+        <Dialog.Close class="btn btn-sm btn-ghost -mr-1 -mt-1">{closeLabel}</Dialog.Close>
+      </div>
+
+      <form class="mt-4 flex flex-col gap-3" onsubmit={submit}>
+        <label class="flex flex-col gap-1 text-sm" for={srcId}>
+          {srcLabel}
+          <input
+            id={srcId}
+            class="input input-bordered w-full"
+            type="text"
+            bind:value={srcValue}
+            aria-invalid={invalid ? 'true' : undefined}
+            aria-describedby={invalid ? errorId : undefined}
+          />
+        </label>
+
+        {#if invalid}
+          <p id={errorId} role="alert" class="text-error text-sm">{invalidSrcMessage}</p>
+        {/if}
+
+        <div class="modal-action">
+          <button type="button" class="btn btn-sm btn-ghost" onclick={() => (open = false)}>
+            {cancelLabel}
+          </button>
+          <button type="submit" class="btn btn-sm btn-primary">{submitLabel}</button>
+        </div>
+      </form>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

package/dist/toolbar/ImageDialog.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'id'> {
+    /** The dialog element's `id`. */
+    id?: string | undefined;
+    /** Whether the dialog is shown. Bindable. */
+    open?: boolean | undefined;
+    /** The URL the form opens with. */
+    src?: string | undefined;
+    /** Called with the accepted attributes when the form is submitted. */
+    onSubmit: (attrs: {
+        src: string;
+    }) => void;
+    /** The dialog's heading, and its accessible name. */
+    titleLabel?: string | undefined;
+    /** Label of the source field. */
+    srcLabel?: string | undefined;
+    /** The submit button. */
+    submitLabel?: string | undefined;
+    /** The cancel button. */
+    cancelLabel?: string | undefined;
+    /** Accessible name of the corner close button. */
+    closeLabel?: string | undefined;
+    /** Announced when the source is rejected. */
+    invalidSrcMessage?: string | undefined;
+    /** Extra classes on the dialog box. */
+    class?: string | undefined;
+}
+/** The image prompt as a bits-ui modal, asking only for the source URL the stock `image` node can hold. */
+declare const ImageDialog: import("svelte").Component<Props, {}, "open">;
+type ImageDialog = ReturnType<typeof ImageDialog>;
+export default ImageDialog;