@threadlabs/looma 0.28.22 → 0.29.1

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.54/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"

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit.
 import {
   computed,
   createTextVNode,
@@ -535,6 +535,8 @@ export interface ComponentHostOptions {
   readonly data?: Readonly<Record<string, Readable<unknown>>>
   /** Values inherited through declared context, which a controller reads. */
   readonly context?: Readonly<Record<string, Readable<unknown>>>
+  /** Each named declared script, which a controller reads as `host.scripts`. */
+  readonly scripts?: Readonly<Record<string, unknown>>
   readonly acceptsState?: (name: string, keys: readonly string[], value: unknown) => boolean
   /** Asks one of the component's declared requests. */
   request?(
@@ -700,6 +702,7 @@ export function useComponentHost(
       ),
       ...(options.acceptsState === undefined ? {} : { acceptsState: options.acceptsState }),
     }, options.controllerSource?.definition ?? '<component>'),
+    scripts: options.scripts ?? Object.freeze({}),
     on(type: string, callback: (event: Event) => void | (() => void)): () => void {
       const entry: Subscription = {
         type,