@threadlabs/looma 0.28.19 → 0.28.20

package/vue/chunks/UiTreeItem.js

@@ -680,6 +680,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-54a4ba48"]]);
+}), [["__scopeId", "data-v-ecab748f"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/chunks/_plugin-vue_export-helper.js

@@ -1,4 +1,4 @@
-import { Fragment, computed, defineComponent, getCurrentInstance, h, onBeforeUnmount, onBeforeUpdate, onMounted, onUpdated, shallowRef, useSlots, watchEffect } from "vue";
+import { Fragment, computed, defineComponent, getCurrentInstance, h, onBeforeUnmount, onBeforeUpdate, onMounted, onUpdated, shallowRef, useSlots, watch, watchEffect } from "vue";
 //#region .build/vue/host.ts
 function controllerNamespaces(options, source) {
 	const reported = /* @__PURE__ */ new Set();
@@ -119,6 +119,42 @@ function controllerNamespaces(options, source) {
 		})
 	};
 }
+var requestStateKey = Symbol.for("@nextwebwg/html-next.runtime.v1");
+var documentRecord = (root) => root.ownerDocument[requestStateKey] ??= {};
+/** Requests from inside root wait until its controller has run; the returned release ends the wait. */
+function holdController(root) {
+	const { g: gates } = documentRecord(root).requests ??= { g: /* @__PURE__ */ new WeakMap() };
+	let release;
+	const gate = new Promise((resolve) => {
+		release = resolve;
+	});
+	gates.set(root, gate);
+	return () => {
+		if (gates.get(root) === gate) gates.delete(root);
+		release();
+	};
+}
+/** A responder registered on root relays to the requests inside it that went unanswered, once a page asks. */
+function relayResponders(root, name) {
+	documentRecord(root).relay?.(root, name);
+}
+/** 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, callback) {
+	return (event) => {
+		if (type !== "responder" || !event.bubbles) callback(event);
+	};
+}
+/** The connection signal requests use: it aborts when the component disconnects. */
+function requestConnection() {
+	let current;
+	return {
+		signal: (connected) => connected ? (current ??= new AbortController()).signal : AbortSignal.abort(new DOMException("The component is not connected.", "AbortError")),
+		end: () => {
+			current?.abort();
+			current = void 0;
+		}
+	};
+}
 function dispatchToTargets(recorded, send) {
 	const targets = (recorded instanceof Set ? [...recorded] : Array.isArray(recorded) ? [...recorded] : [recorded]).map((ref) => ref?.nodeType === 1 ? ref : ref?.$el).filter((element) => element?.nodeType === 1 && element.isConnected).sort((a, b) => a === b ? 0 : a.compareDocumentPosition(b) & 4 ? -1 : 1);
 	for (const target of targets) if (target.isConnected) send(target);
@@ -243,6 +279,7 @@ function useComponentHost(controllerLoader, options) {
 		else if (entry.type !== "disconnect") {
 			entry.target = root.value ?? void 0;
 			entry.target?.addEventListener(entry.type, entry.callback);
+			if (entry.target !== void 0) relayResponders(entry.target, entry.type);
 		}
 	};
 	const deactivate = (entry, disconnecting) => {
@@ -291,7 +328,7 @@ function useComponentHost(controllerLoader, options) {
 		on(type, callback) {
 			const entry = {
 				type,
-				callback
+				callback: type === "connect" || type === "disconnect" || options.request === void 0 ? callback : hostListener(type, callback)
 			};
 			subscriptions.add(entry);
 			if (connected.value) activate(entry);
@@ -348,18 +385,32 @@ function useComponentHost(controllerLoader, options) {
 			stops.push(dispose);
 			return dispose;
 		},
-		dispatch
+		dispatch,
+		...options.request === void 0 ? {} : { request: (name, detail, requestOptions) => options.request(root.value, requests.signal(connected.value), name, detail, requestOptions) }
 	};
+	const requests = requestConnection();
+	const responders = Object.entries(options.responders ?? {});
+	for (const [name, read] of responders) host.on(name, (event) => read()?.(event));
+	if (responders.length > 0) watch(() => responders.map(([, read]) => read() !== void 0), (now, before) => {
+		const element = root.value;
+		if (element === null || !connected.value) return;
+		now.forEach((set, index) => {
+			if (set && !before[index]) relayResponders(element, responders[index][0]);
+		});
+	});
 	let cleanup;
 	let started;
 	let stopObserving;
 	let connection = 0;
 	let initialized = false;
 	let unmounted = false;
+	let releaseController;
 	const disconnect = () => {
 		if (!connected.value) return;
 		connected.value = false;
 		connection += 1;
+		requests.end();
+		releaseController?.();
 		for (const pause of pauses.values()) pause();
 		for (const entry of subscriptions) deactivate(entry, true);
 		cleanup?.();
@@ -382,17 +433,24 @@ function useComponentHost(controllerLoader, options) {
 		for (const entry of subscriptions) activate(entry);
 		if (initialized) return;
 		const current = ++connection;
+		const release = releaseController = holdController(root.value);
 		started = loadControllerModule().then(async (loaded) => {
 			if (!connected.value || current !== connection || initialized) return loaded;
 			initialized = true;
-			const result = await loaded.default(host);
+			let invoked;
+			try {
+				invoked = loaded.default(host);
+			} finally {
+				release();
+			}
+			const result = await invoked;
 			if (typeof result === "function") {
 				if (!connected.value || current !== connection) result();
 				else cleanup = result;
 			}
 			return loaded;
 		});
-		started.catch(report);
+		started.catch(report).finally(release);
 	};
 	onMounted(() => {
 		if (root.value === null) return;

package/vue/components.css

@@ -939,12 +939,12 @@ ol:where([data-hn-ui-breadcrumbs]) {
 }
 
 /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
-@keyframes ui-spinner-rotate-2ac18d52 {
+@keyframes ui-spinner-rotate-b406e90c {
 100% {
     transform: rotate(1turn);
 }
 }
-@keyframes ui-spinner-dash-2ac18d52 {
+@keyframes ui-spinner-dash-b406e90c {
 0% {
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
@@ -980,7 +980,7 @@ svg {
     display: block;
     inline-size: 100%;
     block-size: 100%;
-    animation: ui-spinner-rotate-2ac18d52 2s linear infinite;
+    animation: ui-spinner-rotate-b406e90c 2s linear infinite;
 }
 circle {
     stroke-width: 3;
@@ -993,7 +993,7 @@ circle {
     stroke: currentColor;
     stroke-dasharray: 90, 150;
     stroke-dashoffset: 0;
-    animation: ui-spinner-dash-2ac18d52 1.5s ease-in-out infinite;
+    animation: ui-spinner-dash-b406e90c 1.5s ease-in-out infinite;
 }
 @media (prefers-reduced-motion: reduce) {
 svg,.arc {
@@ -1777,7 +1777,7 @@ html[data-ui-input-modality="touch"]
 /* The label, and under it an optional line saying what the choice means. */
 
 /* Centre the tick's box and lift it slightly for the rotated check shape. */
-@keyframes ui-checkbox-check-084399a9 {
+@keyframes ui-checkbox-check-48b85ef3 {
 from {
     opacity: 0;
     transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
@@ -1872,7 +1872,7 @@ input:checked:where([data-hn-ui-checkbox])::after {
     border-width: 0 0.125rem 0.125rem 0;
     opacity: 1;
     transform: translateY(-0.09rem) rotate(45deg);
-    animation: ui-checkbox-check-084399a9 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
+    animation: ui-checkbox-check-48b85ef3 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
       both;
 }
 input:indeterminate:where([data-hn-ui-checkbox])::after {
@@ -3032,13 +3032,13 @@ dd:where([data-hn-ui-description-item]) {
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-ada617a6 {
+@keyframes ui-dialog-enter-d07f3be8 {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-ada617a6 {
+@keyframes ui-dialog-backdrop-enter-d07f3be8 {
 from {
     background-color: transparent;
 }
@@ -3086,7 +3086,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-ada617a6 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-d07f3be8 var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -3204,7 +3204,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-ada617a6 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-d07f3be8 var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -9428,7 +9428,7 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
-@keyframes ui-toast-enter-503076d4 {
+@keyframes ui-toast-enter-eb136028 {
 from {
     opacity: 0;
     transform: translateY(-1rem);
@@ -9438,7 +9438,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-503076d4 {
+@keyframes ui-toast-exit-eb136028 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -9448,7 +9448,7 @@ to {
     transform: translateY(0.75rem);
 }
 }
-@keyframes ui-toast-enter-bottom-503076d4 {
+@keyframes ui-toast-enter-bottom-eb136028 {
 from {
     opacity: 0;
     transform: translateY(1rem);
@@ -9458,7 +9458,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-bottom-503076d4 {
+@keyframes ui-toast-exit-bottom-eb136028 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -9549,7 +9549,7 @@ to {
       --_ui-toast-region-shadow,
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
-    animation: ui-toast-enter-503076d4 var(--_ui-toast-region-enter-duration, 0.32s)
+    animation: ui-toast-enter-eb136028 var(--_ui-toast-region-enter-duration, 0.32s)
       var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 .toast[data-tone="info"]:where([data-hn-ui-toast-region]) {
@@ -9569,17 +9569,17 @@ to {
     --_ui-toast-region-tone-surface: var(--ui-danger-soft);
 }
 .toast.closing:where([data-hn-ui-toast-region]) {
-    animation: ui-toast-exit-503076d4 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
+    animation: ui-toast-exit-eb136028 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
       both;
     pointer-events: none;
 }
 :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
     .toast:where([data-hn-ui-toast-region]) {
-    animation-name: ui-toast-enter-bottom-503076d4;
+    animation-name: ui-toast-enter-bottom-eb136028;
 }
 :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
     .toast.closing:where([data-hn-ui-toast-region]) {
-    animation-name: ui-toast-exit-bottom-503076d4;
+    animation-name: ui-toast-exit-bottom-eb136028;
 }
 @media (prefers-reduced-motion: reduce) {
 .toast:where([data-hn-ui-toast-region]),.toast.closing:where([data-hn-ui-toast-region]) {
@@ -9780,7 +9780,7 @@ to {
    slides, the label reaches back under the icon (the controller measures how far) with its text
    where it was, and fades out across the gap before the icon, fully gone where the icon begins
    to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
-@keyframes ui-tree-item-marquee-54a4ba48 {
+@keyframes ui-tree-item-marquee-ecab748f {
 from {
     transform: translateX(0);
 }
@@ -10036,7 +10036,7 @@ to {
 .row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item]) {
     /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
        long enough to read rather than sliding back and forth. */
-    animation: ui-tree-item-marquee-54a4ba48 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+    animation: ui-tree-item-marquee-ecab748f var(--_marquee-duration) linear 0.5s 1 normal forwards;
     will-change: transform;
 }
 .row[data-ui-marquee] > .label:where([data-hn-ui-tree-item]) {

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.53 for Vue 3.5. Do not edit.
 import {
   computed,
   createTextVNode,
@@ -202,6 +202,58 @@ function controllerNamespaces(options: ControllerNamespaces, source: string): {
   return { state, data }
 }
 
+const requestStateKey = Symbol.for('@nextwebwg/html-next.runtime.v1')
+type DocumentRecord = {
+  requests?: { readonly g: WeakMap<Node, Promise<void>> }
+  relay?: (from: Node, name: string) => void
+}
+const documentRecord = (root: Element): DocumentRecord =>
+  (root.ownerDocument as unknown as Record<symbol, DocumentRecord>)[requestStateKey] ??= {}
+
+/** Requests from inside root wait until its controller has run; the returned release ends the wait. */
+function holdController(root: Element): () => void {
+  const { g: gates } = documentRecord(root).requests ??= { g: new WeakMap() }
+  let release!: () => void
+  const gate = new Promise<void>((resolve) => {
+    release = resolve
+  })
+  gates.set(root, gate)
+  return () => {
+    if (gates.get(root) === gate) gates.delete(root)
+    release()
+  }
+}
+
+/** A responder registered on root relays to the requests inside it that went unanswered, once a page asks. */
+function relayResponders(root: Element, name: string): void {
+  documentRecord(root).relay?.(root, name)
+}
+
+/** 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) => {
+    if (type !== 'responder' || !event.bubbles) callback(event)
+  }
+}
+
+/** The connection signal requests use: it aborts when the component disconnects. */
+function requestConnection(): {
+  readonly signal: (connected: boolean) => AbortSignal
+  readonly end: () => void
+} {
+  let current: AbortController | undefined
+  return {
+    signal: (connected) =>
+      connected
+        ? (current ??= new AbortController()).signal
+        : AbortSignal.abort(new DOMException('The component is not connected.', 'AbortError')),
+    end: () => {
+      current?.abort()
+      current = undefined
+    },
+  }
+}
+
 export function dispatchToTargets(recorded: unknown, send: (target: Element) => void): void {
   const refs = recorded instanceof Set
     ? [...recorded]
@@ -484,6 +536,16 @@ export interface ComponentHostOptions {
   /** Values inherited through declared context, which a controller reads. */
   readonly context?: Readonly<Record<string, Readable<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>
+  /** 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>>
 }
 
 /** Vue does not promise a `v-for` ref array in source order, and the host does. */
@@ -582,6 +644,8 @@ export function useComponentHost(
     else if (entry.type !== 'disconnect') {
       entry.target = root.value ?? undefined
       entry.target?.addEventListener(entry.type, entry.callback as EventListener)
+      // A responder registered after a request went unanswered tells the asker to ask again.
+      if (entry.target !== undefined) relayResponders(entry.target, entry.type)
     }
   }
   const deactivate = (entry: Subscription, disconnecting: boolean): void => {
@@ -637,7 +701,12 @@ export function useComponentHost(
       ...(options.acceptsState === undefined ? {} : { acceptsState: options.acceptsState }),
     }, options.controllerSource?.definition ?? '<component>'),
     on(type: string, callback: (event: Event) => void | (() => void)): () => void {
-      const entry: Subscription = { type, callback }
+      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 () => {
@@ -703,6 +772,31 @@ export function useComponentHost(
       return dispose
     },
     dispatch,
+    // A component that declares requests also has host.request.
+    ...(options.request === undefined ? {} : {
+      request: (name: string, detail?: unknown, requestOptions?: unknown): Promise<unknown> =>
+        options.request!(
+          root.value as Element,
+          requests.signal(connected.value),
+          name,
+          detail,
+          requestOptions,
+        ),
+    }),
+  }
+  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.
+  if (responders.length > 0) {
+    watch(() => responders.map(([, read]) => read() !== undefined), (now, before) => {
+      const element = root.value
+      if (element === null || !connected.value) return
+      now.forEach((set, index) => {
+        if (set && !before[index]) relayResponders(element, responders[index]![0])
+      })
+    })
   }
 
   let cleanup: void | (() => void)
@@ -711,10 +805,13 @@ export function useComponentHost(
   let connection = 0
   let initialized = false
   let unmounted = false
+  let releaseController: (() => void) | undefined
   const disconnect = (): void => {
     if (!connected.value) return
     connected.value = false
     connection += 1
+    requests.end()
+    releaseController?.()
     for (const pause of pauses.values()) pause()
     for (const entry of subscriptions) deactivate(entry, true)
     cleanup?.()
@@ -741,17 +838,25 @@ export function useComponentHost(
     for (const entry of subscriptions) activate(entry)
     if (initialized) return
     const current = ++connection
+    // Requests from inside this root wait until the controller has run, or failed to load.
+    const release = releaseController = holdController(root.value!)
     started = loadControllerModule().then(async (loaded) => {
       if (!connected.value || current !== connection || initialized) return loaded
       initialized = true
-      const result = await loaded.default(host as never)
+      let invoked: unknown
+      try {
+        invoked = loaded.default(host as never)
+      } finally {
+        release()
+      }
+      const result = await invoked
       if (typeof result === 'function') {
         if (!connected.value || current !== connection) result()
         else cleanup = result as () => void
       }
       return loaded
     })
-    void started.catch(report)
+    void started.catch(report).finally(release)
   }
   onMounted(() => {
     if (root.value === null) return