@threadlabs/looma 0.28.22 → 0.29.0

package/editor/image-uploads.d.ts

@@ -1,31 +1,37 @@
 import type { Editor } from "@tiptap/core";
 import { type LoomaImageDescriptor } from "./image-delivery.js";
-/**
- * Host upload result normalized into the editor's durable image descriptor.
- * `url` becomes the stored `src`; optional dimensions preserve layout before
- * the image loads and `responsive` opts into host-provided rendition policy.
- */
-export interface LoomaImageUploadResult extends Omit<LoomaImageDescriptor, "src"> {
-    url: string;
+/** What an image upload request's detail carries: the file to upload. */
+export interface LoomaImageUploadDetail {
+    file: File;
 }
 /**
- * Application-owned upload boundary used by paste, drop, and file selection.
+ * Uploads one image and answers with the image to insert, or `null` to insert nothing. Paste,
+ * drop, and file selection all upload through it.
  *
- * @ownership The application owns network requests, persistence, and returned
- * URLs. Looma owns only editor insertion after the promise fulfills.
- * @failure Rejection leaves the document unchanged and is surfaced through the
- * editor's `uploadError` event so the host chooses retry and user messaging.
+ * @ownership The application owns network requests, persistence, and the returned `src`. Looma
+ * owns only inserting the image once the answer arrives.
+ * @failure A rejection leaves the document unchanged and is reported through the editor's
+ * `uploadError` event, so the host chooses retry and user messaging. An aborted `signal` means the
+ * author canceled the upload; its rejection is not reported.
  */
-export type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUploadResult>;
+export type LoomaImageUpload = (file: File, init: {
+    readonly signal: AbortSignal;
+    readonly progress: (loaded: number, total: number) => void;
+}) => LoomaImageDescriptor | null | PromiseLike<LoomaImageDescriptor | null>;
 export interface LoomaImageUploadsState {
     readonly uploading: boolean;
+    /** The current upload's progress as its uploader reports it, or null before it reports any. */
+    readonly progress: {
+        readonly loaded: number;
+        readonly total: number;
+    } | null;
     /** The file whose upload failed last, which `retry()` sends again. */
     readonly failed: File | null;
 }
 export interface LoomaImageUploadsOptions {
     editor: Editor;
     /** Read on each upload, so a host can change it while the editor runs. */
-    upload: () => LoomaImageUploader | null | undefined;
+    upload: () => LoomaImageUpload | null | undefined;
     onError: (error: unknown, file: File) => void;
 }
 /**
@@ -35,7 +41,7 @@ export interface LoomaImageUploadsOptions {
  * @ownership The host owns the upload and its URL; this owns the uploading state, the failed file,
  * and inserting the result.
  * @failure A rejected upload leaves the document unchanged, records the file for `retry()`, and is
- * reported through `onError`.
+ * reported through `onError`. A canceled upload leaves the document unchanged and reports nothing.
  */
 export interface LoomaImageUploads {
     readonly state: LoomaImageUploadsState;
@@ -45,5 +51,7 @@ export interface LoomaImageUploads {
     insert(files: Iterable<File>): Promise<void>;
     /** Sends the failed file again. */
     retry(): Promise<void>;
+    /** Aborts the uploads in progress and the files still waiting their turn. */
+    cancel(): void;
 }
 export declare function createImageUploads(options: LoomaImageUploadsOptions): LoomaImageUploads;

package/editor/link-editing.d.ts

@@ -11,13 +11,13 @@ export interface LoomaLinkTarget {
  * @ownership The host checks access and returns durable, openable href values.
  * @failure A rejection leaves the existing document untouched and shows a retryable search error.
  */
-export type LoomaLinkSearch = (query: string) => Promise<LoomaLinkTarget[]>;
+export type LinkSearch = (query: string) => Promise<LoomaLinkTarget[]>;
 /**
  * Describes a saved host link so a renamed record can show its current label.
  * @ownership The host resolves identity and access; Looma keeps the saved href as is.
  * @failure A rejection leaves the original href visible and editable.
  */
-export type LoomaLinkResolve = (href: string) => Promise<LoomaLinkTarget | null>;
+export type LinkResolve = (href: string) => Promise<LoomaLinkTarget | null>;
 /** The link form's state and the resolved target of the link at the caret. */
 export interface LoomaLinkEditingState {
     /** Where the form shows: nowhere, in the toolbar's popover, or in place of the link card. */
@@ -44,8 +44,8 @@ export interface LoomaLinkEditingState {
 export interface LoomaLinkEditingOptions {
     editor: Editor;
     /** Read on each use, so a host can change them while the editor runs. */
-    search: () => LoomaLinkSearch | null | undefined;
-    resolve: () => LoomaLinkResolve | null | undefined;
+    search: () => LinkSearch | null | undefined;
+    resolve: () => LinkResolve | null | undefined;
     baseUrl: () => string;
 }
 /**

package/editor/requests.d.ts

@@ -0,0 +1,43 @@
+/**
+ * What a responder function receives besides the detail, as in HTML Next's request contract.
+ * @lifecycle `signal` aborts when the asker no longer needs the answer; `progress` reaches the asker
+ * only while the request is pending.
+ */
+export interface LoomaRequestInit {
+    readonly signal: AbortSignal;
+    readonly progress: (loaded: number, total: number) => void;
+}
+/**
+ * Answers one of the editor's requests: the answer, `null` for none, or a promise of either. It is
+ * the converted-framework form of an HTML Next request, so it always answers.
+ * @failure A rejection reaches the asker, which reports it as that request documents.
+ */
+export type LoomaResponder<Detail, Answer> = (detail: Detail, init: LoomaRequestInit) => Answer | null | PromiseLike<Answer | null>;
+export interface LoomaRequestOptions {
+    /** Abort to withdraw the request. */
+    signal?: AbortSignal;
+    /** Receives the responder's progress while the request is pending. */
+    progress?: (loaded: number, total: number) => void;
+}
+/**
+ * Asks `name` at `root` as an HTML Next component's `host.request` does: dispatches a bubbling,
+ * composed `RequestEvent`, and the nearest responder's answer settles it. A responder that answers
+ * with a value, or no responder at all, settles it at once, so the answer is returned as it is; an
+ * answer given as a promise is returned as a promise.
+ *
+ * @contract Settles `null` when no listener answers during the dispatch, or when the answer is `null`.
+ * @failure Throws when the signal has already aborted. A promised answer rejects with the signal's
+ * reason when it aborts before the answer arrives, and with the answer's own rejection.
+ */
+export declare function askRequest<Answer>(root: Element, name: string, detail: unknown, options?: LoomaRequestOptions): Answer | null | Promise<Answer | null>;
+/** Calls `apply` with an answer from `askRequest` now, or once its promise fulfills. */
+export declare function whenAnswered<Answer>(answer: Answer | null | Promise<Answer | null>, apply: (answer: Answer | null) => void): void | Promise<void>;
+/** Answers a request event with a responder function, as an HTML Next framework function prop does. */
+export declare function respondWithFunction<Detail, Answer>(event: Event, responder: LoomaResponder<Detail, Answer>): void;
+/**
+ * Calls `callback` with the request name when a responder announces itself, as HTML Next's
+ * `respond()` does, on `root`, one of its ancestors, or the document.
+ *
+ * @lifecycle Listens on the document until the returned function is called.
+ */
+export declare function onResponderAnnounced(root: Element, callback: (name: string) => void): () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.22",
+  "version": "0.29.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/editor/LoomaEditor.d.ts

@@ -2,11 +2,13 @@ import "../../components/ui-editor-surface/ui-editor-surface.css";
 import "./looma-editor.css";
 import { type AnyExtension, type Editor, type JSONContent } from "@tiptap/core";
 import { type PropType, type VNode } from "vue";
-import { type LoomaSlashCommand, type LoomaMentionItem, type LoomaMentionProvider, type LoomaCodeLanguages } from "@threadlabs/looma/editor";
-import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageSourceResolver, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
-import { type LoomaImageUploader } from "../../editor/image-uploads.js";
-import { type LoomaLinkResolve, type LoomaLinkSearch } from "../../editor/link-editing.js";
-export type { LoomaImageUploader, LoomaImageUploadResult } from "../../editor/image-uploads.js";
+import { type LoomaSlashCommand, type LoomaMentionItem, type LoomaCodeLanguages } from "@threadlabs/looma/editor";
+import { type LoomaImageActivationDetail, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageSourceResolver, type LoomaImageRenditionErrorDetail } from "../../editor/image-delivery.js";
+import { type LoomaImageUploadDetail } from "../../editor/image-uploads.js";
+import { type LoomaResponder } from "../../editor/requests.js";
+import { type LoomaLinkTarget } from "../../editor/link-editing.js";
+export type { LoomaImageUploadDetail } from "../../editor/image-uploads.js";
+export type { LoomaRequestInit, LoomaResponder } from "../../editor/requests.js";
 /**
  * Chooses whether formatting controls follow a selection, occupy persistent
  * editor chrome, or open from an app-owned button (`popover`, with a text-only
@@ -42,13 +44,63 @@ export interface LoomaEditorSelectionActionDetail {
     before: string;
     after: string;
 }
+export type { LoomaLinkTarget } from "../../editor/link-editing.js";
+/** The `slash-commands` request's detail: this editor's default commands. */
+export interface LoomaSlashCommandsDetail {
+    defaults: LoomaSlashCommand[];
+}
+/** The `link-search` request's detail: what the author typed in the link field. */
+export interface LoomaLinkSearchDetail {
+    query: string;
+}
+/** The `link-resolve` request's detail: a saved link's `href`. */
+export interface LoomaLinkResolveDetail {
+    href: string;
+}
+/** The `mention-query` request's detail: what the author typed after `@`, and how many results show. */
+export interface LoomaMentionQueryDetail {
+    query: string;
+    limit: number;
+}
+/**
+ * Answers `extensions` with Tiptap extensions added after Looma's.
+ * @lifecycle The editor asks when it mounts and again when a responder first appears, then rebuilds
+ * with the answer and keeps its document.
+ */
+export type LoomaEditorExtensions = LoomaResponder<null, AnyExtension[]>;
+/**
+ * Answers `slash-commands` with the commands the slash menu offers: the defaults, changed or
+ * extended. `null` keeps the defaults; an empty array offers none.
+ * @ownership The host owns its command objects and mutations; Looma asks again with fresh defaults
+ * when the prop changes or image uploads become available.
+ */
+export type LoomaEditorSlashCommands = LoomaResponder<LoomaSlashCommandsDetail, LoomaSlashCommand[]>;
+/**
+ * Answers `link-search` with host records for a link, without teaching the editor how they are stored.
+ * @ownership The host checks access and returns durable, openable `href` values.
+ * @failure A rejection leaves the document untouched and shows a retryable search error.
+ */
+export type LoomaLinkSearch = LoomaResponder<LoomaLinkSearchDetail, LoomaLinkTarget[]>;
+/**
+ * Answers `link-resolve` with a saved link's current record, so a renamed record shows its new label.
+ * @ownership The host resolves identity and access; Looma keeps the saved href as is.
+ * @failure A rejection or `null` leaves the original href visible and editable.
+ */
+export type LoomaLinkResolve = LoomaResponder<LoomaLinkResolveDetail, LoomaLinkTarget>;
+/**
+ * Answers `mention-query` with people to suggest after `@`; `null` falls back to `mentionItems`.
+ * @ownership The host owns directory access; Looma filters the answer and clamps it to `limit`.
+ * @failure A rejection shows an empty menu.
+ */
+export type LoomaMentionQuery = LoomaResponder<LoomaMentionQueryDetail, LoomaMentionItem[]>;
 /**
- * Replace the slash inventory, or return retained defaults plus host commands.
- * @ownership The host owns its command objects and mutations; Looma supplies
- * fresh defaults and invokes this factory when the inventory prop changes.
+ * Answers `image-upload` with the image to insert for a pasted, dropped, or chosen file, or `null`
+ * to insert nothing. `progress(loaded, total)` drives the editor's progress status, and `signal`
+ * aborts when the author cancels.
+ * @ownership The application owns the upload and the returned `src`; Looma owns inserting it.
+ * @failure A rejection leaves the document unchanged and emits `uploadError`.
  */
-export type LoomaEditorSlashCommands = LoomaSlashCommand[] | ((defaults: LoomaSlashCommand[]) => LoomaSlashCommand[]);
-export type { LoomaLinkResolve, LoomaLinkSearch, LoomaLinkTarget } from "../../editor/link-editing.js";
+export type LoomaImageUploader = LoomaResponder<LoomaImageUploadDetail, LoomaImageDescriptor>;
 /**
  * Turnkey Vue editor that composes Looma's framework-neutral Tiptap extensions
  * with declarative menus, image delivery, and table interaction chrome.
@@ -95,13 +147,14 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
+    /** Answers `extensions`: the application's Tiptap extensions, added after Looma's. */
     extensions: {
-        type: PropType<AnyExtension[]>;
-        default: () => never[];
+        type: PropType<LoomaEditorExtensions | undefined>;
+        default: undefined;
     };
-    /** One inventory for the existing slash extension; an empty array intentionally supplies no commands. */
+    /** Answers `slash-commands`: the slash menu's commands, given the defaults. */
     slashCommands: {
-        type: PropType<LoomaEditorSlashCommands>;
+        type: PropType<LoomaEditorSlashCommands | undefined>;
         default: undefined;
     };
     /** Override the lazy built-in catalog with application-owned code grammars. An empty object disables highlighting. */
@@ -113,8 +166,9 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaMentionItem[]>;
         default: () => never[];
     };
-    mentionProvider: {
-        type: PropType<LoomaMentionProvider | undefined>;
+    /** Answers `mention-query`: people to suggest for what the author typed after `@`. */
+    mentionQuery: {
+        type: PropType<LoomaMentionQuery | undefined>;
         default: undefined;
     };
     mentionLimit: {
@@ -126,7 +180,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
-    /** Host-owned search and identity lookup for links to application records. */
+    /** Answers `link-search` and `link-resolve`: host search and identity lookup for links to application records. */
     linkSearch: {
         type: PropType<LoomaLinkSearch | undefined>;
         default: undefined;
@@ -139,7 +193,8 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
-    uploadImage: {
+    /** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+    imageUpload: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
     };
@@ -237,13 +292,14 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
+    /** Answers `extensions`: the application's Tiptap extensions, added after Looma's. */
     extensions: {
-        type: PropType<AnyExtension[]>;
-        default: () => never[];
+        type: PropType<LoomaEditorExtensions | undefined>;
+        default: undefined;
     };
-    /** One inventory for the existing slash extension; an empty array intentionally supplies no commands. */
+    /** Answers `slash-commands`: the slash menu's commands, given the defaults. */
     slashCommands: {
-        type: PropType<LoomaEditorSlashCommands>;
+        type: PropType<LoomaEditorSlashCommands | undefined>;
         default: undefined;
     };
     /** Override the lazy built-in catalog with application-owned code grammars. An empty object disables highlighting. */
@@ -255,8 +311,9 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: PropType<LoomaMentionItem[]>;
         default: () => never[];
     };
-    mentionProvider: {
-        type: PropType<LoomaMentionProvider | undefined>;
+    /** Answers `mention-query`: people to suggest for what the author typed after `@`. */
+    mentionQuery: {
+        type: PropType<LoomaMentionQuery | undefined>;
         default: undefined;
     };
     mentionLimit: {
@@ -268,7 +325,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
-    /** Host-owned search and identity lookup for links to application records. */
+    /** Answers `link-search` and `link-resolve`: host search and identity lookup for links to application records. */
     linkSearch: {
         type: PropType<LoomaLinkSearch | undefined>;
         default: undefined;
@@ -281,7 +338,8 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
-    uploadImage: {
+    /** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+    imageUpload: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
     };
@@ -344,7 +402,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     onImageActivate?: ((_detail: LoomaImageActivationDetail) => any) | undefined;
     onImageRenditionError?: ((_detail: LoomaImageRenditionErrorDetail) => any) | undefined;
 }>, {
-    extensions: AnyExtension[];
+    extensions: LoomaEditorExtensions | undefined;
     editable: boolean;
     label: string;
     placeholder: string;
@@ -352,15 +410,15 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     disableHighlight: boolean;
     codeLanguages: Readonly<Record<string, import("highlight.js").LanguageFn>> | null;
     modelValue: JSONContent;
+    slashCommands: LoomaEditorSlashCommands | undefined;
+    mentionQuery: LoomaMentionQuery | undefined;
+    linkSearch: LoomaLinkSearch | undefined;
+    linkResolve: LoomaLinkResolve | undefined;
+    imageUpload: LoomaImageUploader | undefined;
     contentDensity: "compact" | "comfortable";
-    slashCommands: LoomaEditorSlashCommands;
     mentionItems: LoomaMentionItem[];
-    mentionProvider: LoomaMentionProvider | undefined;
     mentionLimit: number;
-    linkSearch: LoomaLinkSearch | undefined;
-    linkResolve: LoomaLinkResolve | undefined;
     linkTargetLabel: string;
-    uploadImage: LoomaImageUploader | undefined;
     resolveImageAttributes: LoomaImageAttributeResolver | undefined;
     resolveImageSource: LoomaImageSourceResolver | undefined;
     toolbarMode: LoomaEditorToolbarMode;

package/vue/editor/index.d.ts

@@ -1,4 +1,4 @@
 export * from "@threadlabs/looma/editor";
 export * from "./primitives.js";
-export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorSlashCommands, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkResolve, type LoomaImageUploader, type LoomaImageUploadResult, } from "./LoomaEditor.js";
+export { LoomaEditor, type LoomaEditorToolbarMode, type LoomaEditorSelectionAction, type LoomaEditorSelectionActionDetail, type LoomaEditorRangeAction, type LoomaEditorRangeActionDetail, type LoomaEditorExtensions, type LoomaEditorSlashCommands, type LoomaSlashCommandsDetail, type LoomaLinkTarget, type LoomaLinkSearch, type LoomaLinkSearchDetail, type LoomaLinkResolve, type LoomaLinkResolveDetail, type LoomaMentionQuery, type LoomaMentionQueryDetail, type LoomaImageUploader, type LoomaImageUploadDetail, type LoomaRequestInit, type LoomaResponder, } from "./LoomaEditor.js";
 export type { LoomaImageActivationDetail, LoomaImageActivationTrigger, LoomaImageAttributeResolver, LoomaImageSourceResolver, LoomaImageDescriptor, LoomaImageRenditionErrorDetail, LoomaImageRenditionAttributes, } from "../../editor/image-delivery.js";

package/vue/editor/index.js

@@ -1,6 +1,6 @@
-import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useId, watch } from "vue";
+import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, shallowRef, useId, watch } from "vue";
 import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
-import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, Text, Tooltip } from "@threadlabs/looma/vue";
+import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Separator, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
 import { Editor, Extension, Node as Node$1, getText, getTextSerializersFromSchema, isNodeSelection, mergeAttributes, nodeInputRule, posToDOMRect } from "@tiptap/core";
 import { Editor as Editor$1 } from "@tiptap/vue-3";
 import { closeHistory } from "@tiptap/pm/history";
@@ -1142,8 +1142,10 @@ function runBlockAction(editor, action) {
 function createImageUploads(options) {
 	const { editor } = options;
 	const listeners = /* @__PURE__ */ new Set();
+	const batches = /* @__PURE__ */ new Set();
 	let state = {
 		uploading: false,
+		progress: null,
 		failed: null
 	};
 	const set = (patch) => {
@@ -1153,28 +1155,53 @@ function createImageUploads(options) {
 		};
 		listeners.forEach((listener) => listener());
 	};
-	const insertOne = async (file) => {
+	const insertOne = async (file, signal) => {
 		const upload = options.upload();
-		if (!upload || editor.isDestroyed) return;
-		set({ uploading: true });
+		if (!upload || editor.isDestroyed || signal.aborted) return;
+		set({
+			uploading: true,
+			progress: null
+		});
 		try {
-			const result = await upload(file);
-			const image = typeof result === "string" ? { url: result } : result;
-			const width = normalizeImageDimension(image.width);
-			const height = normalizeImageDimension(image.height);
-			if (!editor.isDestroyed) editor.chain().focus().insertContent(imageUploadContent({
-				src: image.url,
-				alt: image.alt ?? file.name,
-				...width ? { width } : {},
-				...height ? { height } : {},
-				...image.responsive === true ? { responsive: true } : {}
-			})).run();
-			set({ failed: null });
+			const image = await upload(file, {
+				signal,
+				progress: (loaded, total) => {
+					if (!signal.aborted) set({ progress: {
+						loaded,
+						total
+					} });
+				}
+			});
+			if (image && !signal.aborted && !editor.isDestroyed) {
+				const width = normalizeImageDimension(image.width);
+				const height = normalizeImageDimension(image.height);
+				editor.chain().focus().insertContent(imageUploadContent({
+					src: image.src,
+					alt: image.alt ?? file.name,
+					...width ? { width } : {},
+					...height ? { height } : {},
+					...image.responsive === true ? { responsive: true } : {}
+				})).run();
+			}
+			if (!signal.aborted) set({ failed: null });
 		} catch (error) {
+			if (signal.aborted) return;
 			set({ failed: file });
 			options.onError(error, file);
 		} finally {
-			set({ uploading: false });
+			set({
+				uploading: false,
+				progress: null
+			});
+		}
+	};
+	const run = async (files) => {
+		const batch = new AbortController();
+		batches.add(batch);
+		try {
+			for (const file of files) await insertOne(file, batch.signal);
+		} finally {
+			batches.delete(batch);
 		}
 	};
 	return {
@@ -1187,15 +1214,146 @@ function createImageUploads(options) {
 				listeners.delete(listener);
 			};
 		},
-		async insert(files) {
-			for (const file of files) await insertOne(file);
-		},
+		insert: run,
 		async retry() {
-			if (state.failed) await insertOne(state.failed);
+			if (state.failed) await run([state.failed]);
+		},
+		cancel() {
+			batches.forEach((batch) => batch.abort(new DOMException("The upload was canceled.", "AbortError")));
 		}
 	};
 }
 //#endregion
+//#region ../../node_modules/.pnpm/@nextwebwg+html-next@1.0.0-alpha.53/node_modules/@nextwebwg/html-next/dist/requests.js
+/**
+* Requests: behavior a component asks its consumer for, answered through a native event's
+* `respondWith` (https://nextwebwg.org/declarative-components/javascript#requests).
+*
+* Every HTML Next bundle on a page (the live runtime, compiled modules and framework helpers) keeps
+* its requests in one record on the document, so any consumer answers any component, and one
+* document listener relays late responders. Converted framework components carry this module's
+* source (scripts/generate-literal-source.ts), so it imports nothing.
+*/
+var ports = /* @__PURE__ */ new WeakMap();
+var port = (event) => {
+	let found = ports.get(event);
+	if (found === void 0) ports.set(event, found = {});
+	return found;
+};
+/** A request as its responders receive it: the nearest one answers with `respondWith`. */
+var RequestEvent = class extends CustomEvent {
+	/** Aborts when the asker no longer needs the answer, or its component disconnects. */
+	signal;
+	constructor(type, init) {
+		super(type, init);
+		this.signal = init.signal;
+	}
+	/** Answer the request with a value or a promise of one; the event stops propagating. */
+	respondWith(answer) {
+		const recorded = port(this);
+		if (this.eventPhase === 0 || recorded.a !== void 0) throw new DOMException(recorded.a === void 0 ? "A request is answered while it is dispatched." : "The request already has an answer.", "InvalidStateError");
+		recorded.a = [answer];
+		this.stopImmediatePropagation();
+	}
+	/** Report progress to the asker while the request is pending. */
+	progress(loaded, total) {
+		const report = this.signal.aborted ? void 0 : ports.get(this)?.p;
+		try {
+			report?.(loaded, total);
+		} catch (error) {
+			reportError(error);
+		}
+	}
+};
+//#endregion
+//#region src/editor/requests.ts
+var AskedRequest = class extends RequestEvent {
+	answered = false;
+	answer;
+	report;
+	respondWith(answer) {
+		super.respondWith(answer);
+		this.answered = true;
+		this.answer = answer;
+	}
+	progress(loaded, total) {
+		if (this.signal.aborted) return;
+		try {
+			this.report?.(loaded, total);
+		} catch (error) {
+			reportError(error);
+		}
+	}
+};
+/** Settles with `answer`, or rejects with the signal's reason when it aborts first. */
+var settle = (answer, signal) => new Promise((resolve, reject) => {
+	const abort = () => reject(signal.reason);
+	if (signal.aborted) abort();
+	signal.addEventListener("abort", abort, { once: true });
+	Promise.resolve(answer).then((value) => {
+		signal.removeEventListener("abort", abort);
+		resolve(value);
+	}, (error) => {
+		signal.removeEventListener("abort", abort);
+		reject(error);
+	});
+});
+/**
+* Asks `name` at `root` as an HTML Next component's `host.request` does: dispatches a bubbling,
+* composed `RequestEvent`, and the nearest responder's answer settles it. A responder that answers
+* with a value, or no responder at all, settles it at once, so the answer is returned as it is; an
+* answer given as a promise is returned as a promise.
+*
+* @contract Settles `null` when no listener answers during the dispatch, or when the answer is `null`.
+* @failure Throws when the signal has already aborted. A promised answer rejects with the signal's
+* reason when it aborts before the answer arrives, and with the answer's own rejection.
+*/
+function askRequest(root, name, detail, options = {}) {
+	const signal = options.signal ?? new AbortController().signal;
+	signal.throwIfAborted();
+	const event = new AskedRequest(name, {
+		detail: detail ?? null,
+		signal,
+		bubbles: true,
+		composed: true
+	});
+	event.report = options.progress;
+	root.dispatchEvent(event);
+	const answer = event.answered ? event.answer : null;
+	if (!isThenable(answer)) {
+		event.report = void 0;
+		return answer ?? null;
+	}
+	return settle(answer, signal).then((value) => value ?? null).finally(() => {
+		event.report = void 0;
+	});
+}
+var isThenable = (value) => typeof value?.then === "function";
+/** Answers a request event with a responder function, as an HTML Next framework function prop does. */
+function respondWithFunction(event, responder) {
+	const request = event;
+	request.respondWith(responder(request.detail, {
+		signal: request.signal,
+		progress: (loaded, total) => request.progress(loaded, total)
+	}));
+}
+/**
+* Calls `callback` with the request name when a responder announces itself, as HTML Next's
+* `respond()` does, on `root`, one of its ancestors, or the document.
+*
+* @lifecycle Listens on the document until the returned function is called.
+*/
+function onResponderAnnounced(root, callback) {
+	const document = root.ownerDocument;
+	const listener = (event) => {
+		const name = event.detail?.name;
+		const target = event.target;
+		if (typeof name === "string" && target instanceof Node && target.contains(root)) callback(name);
+	};
+	document.addEventListener("responder", listener);
+	return () => document.removeEventListener("responder", listener);
+}
+//#endregion
 //#region src/editor/formatting-selection.ts
 var HOLD_MS = 500;
 var HOLD_SLOP_PX = 8;
@@ -2816,10 +2974,20 @@ var imageNodeView = ({ editor, node, getPos, decorations }) => {
 };
 //#endregion
 //#region src/vue/editor/LoomaEditor.ts
+var EDITOR_REQUESTS = {
+	extensions: "extensions",
+	"slash-commands": "slashCommands",
+	"mention-query": "mentionQuery",
+	"link-search": "linkSearch",
+	"link-resolve": "linkResolve",
+	"image-upload": "imageUpload"
+};
+var EDITOR_REQUEST_NAMES = Object.keys(EDITOR_REQUESTS);
 var EMPTY_DOCUMENT = {
 	type: "doc",
 	content: []
 };
+var uploadProgressText = (progress) => progress && progress.total > 0 ? `Uploading image… ${Math.round(Math.min(1, progress.loaded / progress.total) * 100)}%` : "Uploading image…";
 var editorInstanceSequence = 0;
 var EMPTY_CAPABILITIES = {
 	canToggleHeaderRow: false,
@@ -2912,13 +3080,14 @@ var LoomaEditor = defineComponent({
 			type: String,
 			default: "Document"
 		},
+		/** Answers `extensions`: the application's Tiptap extensions, added after Looma's. */
 		extensions: {
-			type: Array,
-			default: () => []
+			type: Function,
+			default: void 0
 		},
-		/** One inventory for the existing slash extension; an empty array intentionally supplies no commands. */
+		/** Answers `slash-commands`: the slash menu's commands, given the defaults. */
 		slashCommands: {
-			type: [Array, Function],
+			type: Function,
 			default: void 0
 		},
 		/** Override the lazy built-in catalog with application-owned code grammars. An empty object disables highlighting. */
@@ -2930,7 +3099,8 @@ var LoomaEditor = defineComponent({
 			type: Array,
 			default: () => []
 		},
-		mentionProvider: {
+		/** Answers `mention-query`: people to suggest for what the author typed after `@`. */
+		mentionQuery: {
 			type: Function,
 			default: void 0
 		},
@@ -2943,7 +3113,7 @@ var LoomaEditor = defineComponent({
 			type: String,
 			default: ""
 		},
-		/** Host-owned search and identity lookup for links to application records. */
+		/** Answers `link-search` and `link-resolve`: host search and identity lookup for links to application records. */
 		linkSearch: {
 			type: Function,
 			default: void 0
@@ -2956,7 +3126,8 @@ var LoomaEditor = defineComponent({
 			type: String,
 			default: "Item"
 		},
-		uploadImage: {
+		/** Answers `image-upload`: uploads a pasted, dropped, or chosen image and returns the image to insert. */
+		imageUpload: {
 			type: Function,
 			default: void 0
 		},
@@ -3086,6 +3257,7 @@ var LoomaEditor = defineComponent({
 		let uploads;
 		const uploadState = shallowRef({
 			uploading: false,
+			progress: null,
 			failed: null
 		});
 		const tablePickerOpen = ref(false);
@@ -3182,12 +3354,77 @@ var LoomaEditor = defineComponent({
 			chipOpen.value = false;
 			if (focusChip) root.value?.querySelector(`#${chipAnchorId}`)?.focus();
 		};
-		const resolveSlashCommands = () => {
-			const defaults = getDefaultSlashCommands(props.uploadImage ? () => fileInput.value?.click() : void 0, openChipEditor, () => openLinkEditor());
-			return typeof props.slashCommands === "function" ? props.slashCommands(defaults) : props.slashCommands ?? defaults;
+		const found = reactive(/* @__PURE__ */ new Set());
+		const answers = (name) => {
+			const prop = EDITOR_REQUESTS[name];
+			return typeof props[prop] === "function" || attrs[`on${prop[0].toUpperCase()}${prop.slice(1)}`] != null || found.has(name);
+		};
+		const connection = new AbortController();
+		const ask = (name, detail, options = {}) => {
+			if (!root.value || connection.signal.aborted) return null;
+			const signal = options.signal ? AbortSignal.any([options.signal, connection.signal]) : connection.signal;
+			return askRequest(root.value, name, detail, {
+				...options,
+				signal
+			});
+		};
+		const latest = /* @__PURE__ */ new Map();
+		const askLatest = (name, detail) => {
+			latest.get(name)?.abort();
+			const controller = new AbortController();
+			latest.set(name, controller);
+			return ask(name, detail, { signal: controller.signal });
+		};
+		const askThen = (name, detail, apply) => {
+			const answer = askLatest(name, detail);
+			if (!(answer instanceof Promise)) return apply(answer);
+			const controller = latest.get(name);
+			answer.then(apply, (error) => {
+				if (controller !== latest.get(name) || connection.signal.aborted) return;
+				reportError(error);
+				apply(null);
+			});
 		};
+		let slashDefaults;
+		const defaultSlashCommands = () => {
+			const uploads = answers("image-upload");
+			if (slashDefaults?.uploads !== uploads) slashDefaults = {
+				uploads,
+				commands: getDefaultSlashCommands(uploads ? () => fileInput.value?.click() : void 0, openChipEditor, () => openLinkEditor())
+			};
+			return slashDefaults.commands;
+		};
+		const askSlashCommands = () => {
+			const defaults = defaultSlashCommands();
+			askThen("slash-commands", { defaults: [...defaults] }, (answer) => {
+				const commands = answer ?? defaults;
+				const current = slashExtension.options.commands;
+				if (commands.length === current.length && commands.every((command, index) => command === current[index])) return;
+				slashExtension.options.commands = commands;
+				editor.value?.commands.dismissLoomaSlashMenu();
+			});
+		};
+		let consumerExtensions = [];
+		const askExtensions = () => askThen("extensions", null, (extensions) => {
+			const changed = Boolean(extensions?.length || consumerExtensions.length);
+			consumerExtensions = extensions ?? [];
+			if (!session) build(props.modelValue);
+			else if (changed) rebuild();
+		});
+		let responders = /* @__PURE__ */ new Set();
+		const checkResponders = () => {
+			const current = new Set(EDITOR_REQUEST_NAMES.filter(answers));
+			const arrived = (name) => current.has(name) && !responders.has(name);
+			const extensionsArrived = arrived("extensions");
+			const slashChanged = arrived("slash-commands") || current.has("image-upload") !== responders.has("image-upload");
+			responders = current;
+			if (extensionsArrived) askExtensions();
+			if (slashChanged) askSlashCommands();
+		};
+		onUpdated(checkResponders);
+		let stopAnnouncements;
 		const slashExtension = createLoomaSlashCommandExtension({
-			commands: resolveSlashCommands(),
+			commands: defaultSlashCommands(),
 			onOpenImagePicker: () => fileInput.value?.click(),
 			onOpenChipEditor: openChipEditor,
 			onOpenLinkEditor: () => openLinkEditor(),
@@ -3196,13 +3433,13 @@ var LoomaEditor = defineComponent({
 			}
 		});
 		const mentionMenuId = `looma-editor-mention-menu-${++editorInstanceSequence}`;
-		const mentionExtension = props.extensions.some((extension) => extension.name === "mention") ? null : createLoomaMentionExtension({
+		const mentionExtension = createLoomaMentionExtension({
 			limit: props.mentionLimit,
 			menuId: mentionMenuId,
-			items: async (query, context) => {
-				if (props.mentionProvider) return await props.mentionProvider(query, context);
-				return props.mentionItems;
-			},
+			items: async (query, context) => await askLatest("mention-query", {
+				query,
+				limit: context.limit
+			}) ?? props.mentionItems,
 			onStateChange: (state) => {
 				Object.assign(mention, state);
 			}
@@ -3234,13 +3471,16 @@ var LoomaEditor = defineComponent({
 		const loadForCodeBlock = codeHighlighting.loadForCodeBlock;
 		const editor = shallowRef();
 		let session;
-		onMounted(() => {
+		let edited = false;
+		const build = (content) => {
+			edited = false;
+			const consumerMention = consumerExtensions.some((extension) => extension.name === "mention");
 			session = createEditorSession({
 				extensions: [
 					...getDefaultEditorExtensions({
 						placeholder: props.placeholder,
 						linkBaseUrl: props.linkBaseUrl,
-						mention: mentionExtension ?? false,
+						mention: consumerMention ? false : mentionExtension,
 						disableHighlight: props.disableHighlight,
 						codeLanguages: props.codeLanguages ?? void 0,
 						codeLowlight: codeHighlighting.lowlight,
@@ -3252,9 +3492,9 @@ var LoomaEditor = defineComponent({
 					}),
 					imageDelivery.extension,
 					slashExtension,
-					...props.extensions
+					...consumerExtensions
 				],
-				content: props.modelValue,
+				content,
 				editable: props.editable,
 				editorProps: {
 					nodeViews: { image: () => ({ dom: document.createElement("span") }) },
@@ -3304,6 +3544,7 @@ var LoomaEditor = defineComponent({
 					}
 				},
 				onUpdate: ({ editor: instance }) => {
+					edited = true;
 					const value = instance.getJSON();
 					emit("update:modelValue", value);
 					emit("update", value);
@@ -3316,8 +3557,8 @@ var LoomaEditor = defineComponent({
 			editor.value = session.editor;
 			const engine = createLinkEditing({
 				editor: session.editor,
-				search: () => props.linkSearch,
-				resolve: () => props.linkResolve,
+				search: () => answers("link-search") ? async (query) => await askLatest("link-search", { query }) ?? [] : null,
+				resolve: () => async (href) => await askLatest("link-resolve", { href }),
 				baseUrl: () => props.linkBaseUrl
 			});
 			engine.subscribe(() => {
@@ -3326,7 +3567,14 @@ var LoomaEditor = defineComponent({
 			linkEditing = engine;
 			const imageUploads = createImageUploads({
 				editor: session.editor,
-				upload: () => props.uploadImage,
+				upload: () => async (file, init) => {
+					const image = await ask("image-upload", { file }, init);
+					if (image && !found.has("image-upload")) {
+						found.add("image-upload");
+						checkResponders();
+					}
+					return image;
+				},
 				onError: (error, file) => emit("uploadError", error, file)
 			});
 			imageUploads.subscribe(() => {
@@ -3344,6 +3592,30 @@ var LoomaEditor = defineComponent({
 					formattingPopup?.show();
 				}
 			});
+		};
+		const rebuild = () => {
+			const previous = session;
+			const content = edited ? previous.editor.getJSON() : props.modelValue;
+			linkEditing?.destroy();
+			formatting?.destroy();
+			uploads?.cancel();
+			previous.destroy();
+			build(content);
+		};
+		onMounted(() => {
+			const element = root.value;
+			for (const name of EDITOR_REQUEST_NAMES) element.addEventListener(name, (event) => {
+				const responder = props[EDITOR_REQUESTS[name]];
+				if (typeof responder === "function" && "respondWith" in event) respondWithFunction(event, responder);
+			}, { capture: true });
+			stopAnnouncements = onResponderAnnounced(element, (name) => {
+				if (!(name in EDITOR_REQUESTS)) return;
+				found.add(name);
+				checkResponders();
+			});
+			responders = new Set(EDITOR_REQUEST_NAMES.filter(answers));
+			askExtensions();
+			askSlashCommands();
 		});
 		const attachDocument = (element) => {
 			if (element instanceof HTMLElement) session?.attach(element);
@@ -3351,6 +3623,8 @@ var LoomaEditor = defineComponent({
 		onBeforeUnmount(() => {
 			const element = session?.editor.options.element;
 			element?.parentNode?.replaceChild(element.cloneNode(true), element);
+			connection.abort();
+			stopAnnouncements?.();
 			linkEditing?.destroy();
 			session?.destroy();
 		});
@@ -3384,10 +3658,10 @@ var LoomaEditor = defineComponent({
 				ref: setLinkFormRoot,
 				class: "looma-editor__link-form",
 				existing: Boolean(state.range?.existing),
-				searchable: Boolean(props.linkSearch),
+				searchable: answers("link-search"),
 				mode: state.mode,
-				value: props.linkSearch ? state.query : state.href,
-				placeholder: props.linkSearch ? `Search ${props.linkTargetLabel.toLowerCase()}s or paste a URL…` : "https://example.com",
+				value: answers("link-search") ? state.query : state.href,
+				placeholder: answers("link-search") ? `Search ${props.linkTargetLabel.toLowerCase()}s or paste a URL…` : "https://example.com",
 				newTab: state.newTab,
 				textEditable: state.textEditable,
 				text: state.text,
@@ -3437,10 +3711,7 @@ var LoomaEditor = defineComponent({
 				onRemove: () => linkEditing?.remove()
 			});
 		};
-		watch([() => props.slashCommands, () => props.uploadImage], () => {
-			slashExtension.options.commands = resolveSlashCommands();
-			editor.value?.commands.dismissLoomaSlashMenu();
-		});
+		watch(() => props.slashCommands, askSlashCommands);
 		watch(() => props.editable, (editable) => {
 			formatting?.press.cancel();
 			formatting?.release();
@@ -4205,7 +4476,7 @@ var LoomaEditor = defineComponent({
 					variant: tablePickerOpen.value ? "solid" : "ghost",
 					"aria-expanded": tablePickerOpen.value ? "true" : "false"
 				}, () => loomaIcon("table")),
-				commandButton(uploadState.value.uploading ? "Uploading image" : "Insert image", "image", false, uploadState.value.uploading || !props.uploadImage, () => fileInput.value?.click()),
+				commandButton(uploadState.value.uploading ? "Uploading image" : "Insert image", "image", false, uploadState.value.uploading || !answers("image-upload"), () => fileInput.value?.click()),
 				h("span", {
 					class: "divider",
 					"aria-hidden": "true"
@@ -4396,6 +4667,14 @@ var LoomaEditor = defineComponent({
 					"aria-hidden": "true",
 					onChange: onFileChange
 				}),
+				uploadState.value.uploading ? h(StatusMessage, { kind: "loading" }, {
+					default: () => uploadProgressText(uploadState.value.progress),
+					action: () => h(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => uploads?.cancel()
+					}, () => "Cancel")
+				}) : null,
 				uploadState.value.failed ? h("div", {
 					class: "looma-editor__upload-error",
 					role: "alert"