@threadlabs/looma 0.29.3 → 0.29.5

package/vue/editor/index.js

@@ -1224,7 +1224,7 @@ function createImageUploads(options) {
 	};
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@nextwebwg+html-next@1.0.0-alpha.54/node_modules/@nextwebwg/html-next/dist/requests.js
+//#region ../../node_modules/.pnpm/@nextwebwg+html-next@1.0.0-alpha.55/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).
@@ -1240,7 +1240,12 @@ var port = (event) => {
 	if (found === void 0) ports.set(event, found = {});
 	return found;
 };
-/** A request as its responders receive it: the nearest one answers with `respondWith`. */
+/**
+* A request as its responders receive it: the nearest one answers with `respondWith`. Its static
+* `respond`, `request` and `hasResponder` are how code without a `host` takes part
+* (https://nextwebwg.org/declarative-components/javascript#outside-a-controller). They never read
+* `this`, so `const { respond, request, hasResponder } = RequestEvent` works.
+*/
 var RequestEvent = class extends CustomEvent {
 	/** Aborts when the asker no longer needs the answer, or its component disconnects. */
 	signal;
@@ -1264,71 +1269,135 @@ var RequestEvent = class extends CustomEvent {
 			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;
+	/**
+	* Answers `name` requests that reach `target` with `answer`, records it as a known responder, then
+	* announces it so a component whose request went unanswered can ask again. Returns a function that
+	* removes it.
+	*/
+	static respond(target, name, answer) {
+		const listener = (event) => {
+			if ("respondWith" in event) answerRequest(event, answer);
+		};
+		target.addEventListener(name, listener);
+		const forget = knownResponder(target, name);
+		target.dispatchEvent(new CustomEvent("responder", {
+			bubbles: true,
+			detail: { name }
+		}));
+		return () => {
+			target.removeEventListener(name, listener);
+			forget();
+		};
 	}
-	progress(loaded, total) {
-		if (this.signal.aborted) return;
-		try {
-			this.report?.(loaded, total);
-		} catch (error) {
-			reportError(error);
-		}
+	/**
+	* Asks `name` at `target` with the request steps `host.request` uses, with no declaration to check
+	* the detail or the answer against, no connection signal, and nothing remembered for late responders.
+	*/
+	static request(target, name, detail, options) {
+		return dispatchRequest(target, target.nodeType ? target : null, name, detail ?? null, options?.signal ?? new AbortController().signal, options?.progress);
+	}
+	/** Whether a known responder for `name` is on the path a request from `target` takes, now. */
+	static hasResponder(target, name) {
+		return knownCount(target, name) > 0;
 	}
 };
-/** 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);
+/** Answers a request event with a responder function, as `RequestEvent.respond` and framework function props do. */
+function answerRequest(event, responder) {
+	const request = event;
+	request.respondWith(responder(request.detail, {
+		signal: request.signal,
+		progress: (loaded, total) => request.progress(loaded, total)
+	}));
+}
+var runtimeKey = Symbol.for("@nextwebwg/html-next.runtime.v1");
+var documentRecord = (document) => document[runtimeKey] ??= {};
+/** A target's document: a node's owner, a window's document, or a target outside the DOM itself. */
+var recordOf = (target) => documentRecord(target.nodeType === 9 ? target : target.ownerDocument ?? target.document ?? target);
+var requestState = (record) => record.requests ??= { g: /* @__PURE__ */ new WeakMap() };
+/**
+* Records a responder for `name` on `target` that `hasResponder` can see, until the returned function
+* runs. `own` counts the entries a controller's `host.on` adds on its own root, which its own
+* `host.hasResponder` does not count.
+*/
+function knownResponder(target, name, own) {
+	const record = recordOf(target);
+	const known = record.k ??= /* @__PURE__ */ new WeakMap();
+	const names = known.get(target) ?? known.set(target, []).get(target);
+	const change = (add) => {
+		for (const list of own === void 0 ? [names] : [names, own]) if (add) list.push(name);
+		else list.splice(list.indexOf(name), 1);
+		record.w?.forEach((changed) => changed(name));
+	};
+	change(true);
+	let held = true;
+	return () => {
+		if (held) {
+			held = false;
+			change(false);
+		}
+	};
+}
+/** The next object on a composed event's path: an assigned slot, a parent, a shadow host, the window. */
+var parentOf = (node) => node.nodeType === 9 ? node.defaultView : node.nodeType === 11 ? node.host : node.nodeType ? node.assignedSlot ?? node.parentNode : null;
+/** How many of `names` are `name`. */
+var countOf = (names, name) => names?.filter((known) => known === name).length ?? 0;
+/** How many known responders for `name` are on the path a request from `target` takes. */
+function knownCount(target, name) {
+	const known = recordOf(target).k;
+	let count = 0;
+	if (known !== void 0) for (let node = target; node; node = parentOf(node)) count += countOf(known.get(node), name);
+	return count;
+}
+/** Settles with `value`, or rejects with the signal's reason when it aborts first; a late value is discarded. */
+function settle(value, signal) {
+	return new Promise((resolve, reject) => {
+		const abort = () => reject(signal.reason);
+		if (signal.aborted) abort();
+		signal.addEventListener("abort", abort, { once: true });
+		Promise.resolve(value).then((result) => {
+			signal.removeEventListener("abort", abort);
+			resolve(result);
+		}, (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.
+* The request steps every asker shares: wait for the controllers of components at `from` and around
+* it, dispatch the `RequestEvent` at `target`, and settle with the answer, or `null` when nobody
+* answered. `answered` hears, during the dispatch, whether anyone did.
 */
-function askRequest(root, name, detail, options = {}) {
-	const signal = options.signal ?? new AbortController().signal;
+async function dispatchRequest(target, from, name, detail, signal, progress, answered) {
 	signal.throwIfAborted();
-	const event = new AskedRequest(name, {
-		detail: detail ?? null,
+	const state = requestState(recordOf(target));
+	for (;;) {
+		const waits = [];
+		for (let node = from; node !== null; node = node.parentNode ?? node.host ?? null) {
+			const gate = state.g.get(node);
+			if (gate !== void 0) waits.push(gate);
+		}
+		if (waits.length === 0) break;
+		await settle(Promise.all(waits), signal);
+	}
+	const event = new RequestEvent(name, {
+		detail,
 		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;
+	const recorded = port(event);
+	recorded.p = progress;
+	target.dispatchEvent(event);
+	answered?.(recorded.a !== void 0);
+	try {
+		return recorded.a === void 0 ? null : await settle(recorded.a[0], signal);
+	} finally {
+		recorded.p = void 0;
 	}
-	return settle(answer, signal).then((value) => value ?? null).finally(() => {
-		event.report = void 0;
-	});
 }
-var isThenable = (value) => typeof value?.then === "function";
+//#endregion
+//#region src/editor/requests.ts
 /** Answers a request event with a responder function, as an HTML Next framework function prop does. */
 function respondWithFunction(event, responder) {
 	const request = event;
@@ -1338,8 +1407,8 @@ function respondWithFunction(event, responder) {
 	}));
 }
 /**
-* 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.
+* Calls `callback` with the request name when a responder announces itself, as
+* `RequestEvent.respond()` does, on `root`, one of its ancestors, or the document.
 *
 * @lifecycle Listens on the document until the returned function is called.
 */
@@ -1810,6 +1879,45 @@ function selectionActionDetail(state, id) {
 		after: doc.textBetween(to, Math.min(doc.content.size, to + CONTEXT), "\n")
 	};
 }
+/** Whether a viewport this wide gets the editing dock rather than floating tools. */
+var usesMobileDock = (viewportWidth) => viewportWidth <= 767;
+/**
+* Where the dock sits: across the visual viewport, against its bottom edge, so an on-screen keyboard
+* pushes it up. It never rises above the viewport's top.
+*/
+function mobileDockPlacement(viewport, dockHeight) {
+	return {
+		left: viewport.left,
+		top: Math.max(viewport.top, viewport.bottom - dockHeight),
+		width: viewport.width
+	};
+}
+/** Calls `onChange` with the new mode whenever it changes. */
+function createMobileDock(onChange) {
+	let mode = "formatting";
+	let formattingChosen = false;
+	const set = (next) => {
+		if (next === mode) return;
+		mode = next;
+		onChange(mode);
+	};
+	return {
+		get mode() {
+			return mode;
+		},
+		tableActive() {
+			if (!formattingChosen) set("table");
+		},
+		showFormatting() {
+			formattingChosen = true;
+			set("formatting");
+		},
+		tableInactive() {
+			formattingChosen = false;
+			set("formatting");
+		}
+	};
+}
 //#endregion
 //#region src/editor/extensions/relative-links.ts
 /** Keep other origins and non-web schemes intact; same-origin links retain path, query, and fragment. */
@@ -3508,7 +3616,7 @@ var LoomaEditor = defineComponent({
 		});
 		const tablePickerOpen = ref(false);
 		const mobileToolbarStyle = ref({});
-		const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
+		const mobile = ref(typeof window !== "undefined" && usesMobileDock(window.innerWidth));
 		const editorFocused = ref(false);
 		let formatting;
 		let formattingPopup = null;
@@ -3520,10 +3628,12 @@ var LoomaEditor = defineComponent({
 		const formattingActive = () => formatting?.active() ?? false;
 		const editorStateVersion = ref(0);
 		const mobileToolbarMode = ref("formatting");
+		const mobileDock = createMobileDock((mode) => {
+			mobileToolbarMode.value = mode;
+		});
 		let dragLeaveTimer = null;
 		let tableResizeActive = false;
 		let tableInteractionActive = false;
-		let mobileTableControlsDismissed = false;
 		let hoveredTableCell = null;
 		let overlayTableElement = null;
 		let tablePointerFrame = null;
@@ -3573,16 +3683,17 @@ var LoomaEditor = defineComponent({
 			chipEditing?.close();
 			if (focusChip) element?.focus();
 		};
-		const found = reactive(/* @__PURE__ */ new Set());
+		const responderVersion = ref(0);
 		const answers = (name) => {
+			responderVersion.value;
 			const prop = EDITOR_REQUESTS[name];
-			return typeof props[prop] === "function" || attrs[`on${prop[0].toUpperCase()}${prop.slice(1)}`] != null || found.has(name);
+			return typeof props[prop] === "function" || attrs[`on${prop[0].toUpperCase()}${prop.slice(1)}`] != null || root.value !== null && RequestEvent.hasResponder(root.value, name);
 		};
 		const connection = new AbortController();
 		const ask = (name, detail, options = {}) => {
-			if (!root.value || connection.signal.aborted) return null;
+			if (!root.value || connection.signal.aborted) return Promise.resolve(null);
 			const signal = options.signal ? AbortSignal.any([options.signal, connection.signal]) : connection.signal;
-			return askRequest(root.value, name, detail, {
+			return RequestEvent.request(root.value, name, detail, {
 				...options,
 				signal
 			});
@@ -3596,10 +3707,12 @@ var LoomaEditor = defineComponent({
 		};
 		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;
+			const current = () => controller === latest.get(name) && !connection.signal.aborted;
+			answer.then((value) => {
+				if (current()) apply(value);
+			}, (error) => {
+				if (!current()) return;
 				reportError(error);
 				apply(null);
 			});
@@ -3794,14 +3907,7 @@ var LoomaEditor = defineComponent({
 			chipEditing = chips;
 			const imageUploads = createImageUploads({
 				editor: session.editor,
-				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;
-				},
+				upload: () => (file, init) => ask("image-upload", { file }, init),
 				onError: (error, file) => emit("uploadError", error, file)
 			});
 			imageUploads.subscribe(() => {
@@ -3838,9 +3944,10 @@ var LoomaEditor = defineComponent({
 			}, { capture: true });
 			stopAnnouncements = onResponderAnnounced(element, (name) => {
 				if (!(name in EDITOR_REQUESTS)) return;
-				found.add(name);
+				responderVersion.value += 1;
 				checkResponders();
 			});
+			responderVersion.value += 1;
 			responders = new Set(EDITOR_REQUEST_NAMES.filter(answers));
 			askExtensions();
 			askSlashCommands();
@@ -3993,22 +4100,20 @@ var LoomaEditor = defineComponent({
 			tableUi.geometry = null;
 			tableUi.capabilities = { ...EMPTY_CAPABILITIES };
 			overlayTableElement = null;
-			mobileTableControlsDismissed = false;
-			mobileToolbarMode.value = "formatting";
+			mobileDock.tableInactive();
 		};
 		const updateMobileViewport = () => {
-			mobile.value = window.innerWidth <= 767;
+			mobile.value = usesMobileDock(window.innerWidth);
 			if (!mobile.value) {
 				mobileToolbarStyle.value = {};
 				return;
 			}
 			nextTick(() => {
-				const viewport = getVisualViewportRect(window);
-				const toolbarHeight = mobileToolbarShell.value?.getBoundingClientRect().height || 56;
+				const placement = mobileDockPlacement(getVisualViewportRect(window), mobileToolbarShell.value?.getBoundingClientRect().height || 56);
 				mobileToolbarStyle.value = {
-					left: `${viewport.left}px`,
-					top: `${Math.max(viewport.top, viewport.bottom - toolbarHeight)}px`,
-					width: `${viewport.width}px`
+					left: `${placement.left}px`,
+					top: `${placement.top}px`,
+					width: `${placement.width}px`
 				};
 			});
 		};
@@ -4098,7 +4203,7 @@ var LoomaEditor = defineComponent({
 			}
 			const selectedTableIsActive = state.active && selectedTable === table;
 			overlayTableElement = table;
-			if (selectedTableIsActive && !mobileTableControlsDismissed) mobileToolbarMode.value = "table";
+			if (selectedTableIsActive) mobileDock.tableActive();
 			const rect = table.getBoundingClientRect();
 			const maxToolbarWidth = Math.min(420, window.innerWidth - 24);
 			const toolbarLeft = Math.min(Math.max(12, rect.left + (rect.width - maxToolbarWidth) / 2), Math.max(12, window.innerWidth - maxToolbarWidth - 12));
@@ -4853,8 +4958,7 @@ var LoomaEditor = defineComponent({
 					type: "button",
 					"aria-label": "Formatting tools",
 					onClick: () => {
-						mobileTableControlsDismissed = true;
-						mobileToolbarMode.value = "formatting";
+						mobileDock.showFormatting();
 						editor.value?.commands.focus();
 						nextTick(updateMobileViewport);
 					}

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.54 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.55 for Vue 3.5. Do not edit.
 import {
   computed,
   createTextVNode,
@@ -206,6 +206,8 @@ const requestStateKey = Symbol.for('@nextwebwg/html-next.runtime.v1')
 type DocumentRecord = {
   requests?: { readonly g: WeakMap<Node, Promise<void>> }
   relay?: (from: Node, name: string) => void
+  k?: WeakMap<EventTarget, string[]>
+  w?: Set<(name: string) => void>
 }
 const documentRecord = (root: Element): DocumentRecord =>
   (root.ownerDocument as unknown as Record<symbol, DocumentRecord>)[requestStateKey] ??= {}
@@ -229,6 +231,28 @@ function relayResponders(root: Element, name: string): void {
   documentRecord(root).relay?.(root, name)
 }
 
+/** Records a responder hasResponder can see on root until the returned function runs; own lists its controller's. */
+function knownResponder(root: Element, name: string, own?: string[]): () => void {
+  const record = documentRecord(root)
+  const known = record.k ??= new WeakMap()
+  const names = known.get(root) ?? known.set(root, []).get(root)!
+  const change = (add: boolean): void => {
+    for (const list of own === undefined ? [names] : [names, own]) {
+      if (add) list.push(name)
+      else list.splice(list.indexOf(name), 1)
+    }
+    record.w?.forEach((changed) => changed(name))
+  }
+  change(true)
+  let held = true
+  return () => {
+    if (held) {
+      held = false
+      change(false)
+    }
+  }
+}
+
 /** For a component that asks: a responder announcement reaches its controller only as the relay to its root, which does not bubble. */
 function hostListener(type: string, callback: (event: Event) => unknown): (event: Event) => void {
   return (event) => {
@@ -538,14 +562,16 @@ export interface ComponentHostOptions {
   /** 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?(
-    root: Element,
-    connection: AbortSignal,
-    name: string,
-    detail?: unknown,
-    options?: unknown,
-  ): Promise<unknown>
+  /** Asks one of the component's declared requests; its `has` builds `host.hasResponder`. */
+  readonly request?:
+    & ((
+      root: Element,
+      connection: AbortSignal,
+      name: string,
+      detail?: unknown,
+      options?: any,
+    ) => Promise<unknown>)
+    & { readonly has?: (host: any, own: string[]) => (name: string) => boolean }
   /** Each declared request's responder, from its function prop or event form, read when the request arrives. */
   readonly responders?: Readonly<Record<string, () => ((event: Event) => void) | undefined>>
 }
@@ -632,20 +658,30 @@ export function useComponentHost(
   const stops: Array<() => void> = []
   const connected = shallowRef(false)
   const pauses = new Map<() => void, () => void>()
-  const subscriptions = new Set<
-    {
-      type: string
-      callback: (event: Event) => void | (() => void)
-      target?: Element | undefined
-      cleanup?: void | (() => void)
-    }
-  >()
+  // A subscription's known responder (k), and for a request's function prop or event form whether one is set (r).
+  const subscriptions = new Set<{
+    type: string
+    callback: (event: Event) => void | (() => void)
+    target?: Element | undefined
+    cleanup?: void | (() => void)
+    k?: (() => void) | undefined
+    r?: () => boolean
+  }>()
   type Subscription = typeof subscriptions extends Set<infer S> ? S : never
+  // How many known responders the controller's host.on keeps on its own root, by name.
+  const own: string[] = []
+  const track = (entry: Subscription): void => {
+    entry.k?.()
+    entry.k = entry.target === undefined || entry.r?.() === false
+      ? undefined
+      : knownResponder(entry.target, entry.type, entry.r ? undefined : own)
+  }
   const activate = (entry: Subscription): void => {
     if (entry.type === 'connect') entry.cleanup = entry.callback(new Event('connect'))
     else if (entry.type !== 'disconnect') {
       entry.target = root.value ?? undefined
       entry.target?.addEventListener(entry.type, entry.callback as EventListener)
+      track(entry)
       // A responder registered after a request went unanswered tells the asker to ask again.
       if (entry.target !== undefined) relayResponders(entry.target, entry.type)
     }
@@ -653,6 +689,7 @@ export function useComponentHost(
   const deactivate = (entry: Subscription, disconnecting: boolean): void => {
     entry.target?.removeEventListener(entry.type, entry.callback as EventListener)
     entry.target = undefined
+    track(entry)
     const cleanup = entry.cleanup
     entry.cleanup = undefined
     cleanup?.()
@@ -704,17 +741,7 @@ export function useComponentHost(
     }, options.controllerSource?.definition ?? '<component>'),
     scripts: options.scripts ?? Object.freeze({}),
     on(type: string, callback: (event: Event) => void | (() => void)): () => void {
-      const entry: Subscription = {
-        type,
-        callback: type === 'connect' || type === 'disconnect' || options.request === undefined
-          ? callback
-          : hostListener(type, callback),
-      }
-      subscriptions.add(entry)
-      if (connected.value) activate(entry)
-      return () => {
-        if (subscriptions.delete(entry)) deactivate(entry, false)
-      }
+      return listen(type, callback)
     },
     props: Object.freeze(propHandles),
     refs: Object.defineProperties(
@@ -787,13 +814,39 @@ export function useComponentHost(
         ),
     }),
   }
+  function listen(
+    type: string,
+    callback: (event: Event) => void | (() => void),
+    set?: () => boolean,
+  ): () => void {
+    const entry: Subscription = {
+      type,
+      callback: type === 'connect' || type === 'disconnect' || options.request === undefined
+        ? callback
+        : hostListener(type, callback),
+    }
+    if (set !== undefined) entry.r = set
+    subscriptions.add(entry)
+    if (connected.value) activate(entry)
+    return () => {
+      if (subscriptions.delete(entry)) deactivate(entry, false)
+    }
+  }
+  if (options.request?.has !== undefined) {
+    Object.assign(host, { hasResponder: options.request.has(host, own) })
+  }
   const requests = requestConnection()
   // Each request's responder listens on the root from its first connection, before the controller runs.
   const responders = Object.entries(options.responders ?? {})
-  for (const [name, read] of responders) host.on(name, (event) => read()?.(event))
-  // A function prop or event form set later relays for its request, as a late host.on does.
+  for (const [name, read] of responders) {
+    listen(name, (event) =>
+      read()?.(event), () =>
+      read() !== undefined)
+  }
+  // A function prop or event form set later is a known responder, and relays for its request, as a late host.on does.
   if (responders.length > 0) {
     watch(() => responders.map(([, read]) => read() !== undefined), (now, before) => {
+      for (const entry of subscriptions) if (entry.r !== undefined) track(entry)
       const element = root.value
       if (element === null || !connected.value) return
       now.forEach((set, index) => {