@threadlabs/looma 0.29.18 → 0.30.0

package/vue/editor/index.js

@@ -6,12 +6,12 @@ import { Editor as Editor$1 } from "@tiptap/vue-3";
 import { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { createLowlight } from "lowlight";
-import { RequestEvent, updateComponentProps } from "@nextwebwg/html-next/runtime";
+import { RequestEvent, componentRegistry } from "@nextwebwg/html-next/runtime";
 import "@tiptap/pm/tables";
 import "@tiptap/pm/transform";
 import { closeHistory } from "@tiptap/pm/history";
 import { DOMParser, DOMSerializer, Fragment as Fragment$1 } from "@tiptap/pm/model";
-import { IndexedList, NONCONFORMING, acceptProps, armElement, attachGeneratedController, buildTemplate, checkBoolean, checkConstrained, checkFormat, checkInteger, checkNumber, checkObject, checkSelected, checkString, clearRegion, computedCycle, detailCheck, dispatchDeclared, dispose, fillSlot, formatOf, hostState, keywordFormat, manageProps, project, readIndex, readMember, readonlyView, readsChanged, rec, replaceRoot, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, writeUrlAttribute } from "@nextwebwg/html-next/generated-runtime";
+import { IndexedList, NONCONFORMING, acceptProps, armElement, attachGeneratedController, buildTemplate, checkBoolean, checkConstrained, checkFormat, checkInteger, checkNumber, checkObject, checkSelected, checkString, clearRegion, computedCycle, defineComponent as defineComponent$1, detailCheck, dispatchDeclared, dispose, fillSlot, formatOf, hostState, keywordFormat, manageProps, project, readIndex, readMember, readonlyView, readsChanged, rec, replaceRoot, textCall, toAttribute, toText, trackContainer, truthy, writeAttribute, writeUrlAttribute } from "@nextwebwg/html-next/generated-runtime";
 export * from "@threadlabs/looma/editor";
 //#region src/vue/editor/primitives.ts
 /** Each Vue editor component's element tag, for tooling that enumerates them. */
@@ -3859,6 +3859,22 @@ function createUiButton(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-button", createUiButton, [
+	"align",
+	"as",
+	"disabled",
+	"href",
+	"loading",
+	"pending",
+	"rel",
+	"shape",
+	"size",
+	"stretch",
+	"target",
+	"tone",
+	"type",
+	"variant"
+]);
 //#endregion
 //#region components/shared/overlay.js
 function stateFor(document) {
@@ -4651,6 +4667,7 @@ function createUiAffordanceScope(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-affordance-scope", createUiAffordanceScope, ["guide", "nearRadius"]);
 //#endregion
 //#region vanilla/UiCluster.js
 var T0$14 = [
@@ -4853,6 +4870,15 @@ function createUiCluster(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-cluster", createUiCluster, [
+	"align",
+	"fixed",
+	"gap",
+	"justify",
+	"padding",
+	"paddingEnd",
+	"wrap"
+]);
 //#endregion
 //#region components/shared/authoring.js
 var DEV = (() => {
@@ -5085,7 +5111,7 @@ function createUiFormField(options = {}, html) {
 		}
 		if (r.f1 === void 0) {
 			r.f1 = 1;
-			const at = fillSlot(r.a1, r.e1, "label-action", J, false, void 0, d);
+			const at = fillSlot(r.a1, r.e1, "labelAction", J, false, void 0, d);
 			if (Array.isArray(at)) (r.z ??= []).push(() => {
 				at[0].l.delete(at[1]);
 				dispose(at[1]);
@@ -5181,6 +5207,11 @@ function createUiFormField(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-form-field", createUiFormField, [
+	"disabled",
+	"invalid",
+	"required"
+]);
 //#endregion
 //#region vanilla/UiIcon.js
 var T0$12 = [
@@ -6602,6 +6633,7 @@ function createUiIcon(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-icon", createUiIcon, ["name", "tone"]);
 //#endregion
 //#region components/ui-icon-button/ui-icon-button.js
 function connect$8(host) {
@@ -6912,6 +6944,20 @@ function createUiIconButton(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-icon-button", createUiIconButton, [
+	"anticipatory",
+	"disabled",
+	"guide",
+	"label",
+	"loading",
+	"matchButton",
+	"pending",
+	"revealed",
+	"round",
+	"size",
+	"tone",
+	"variant"
+]);
 //#endregion
 //#region vanilla/UiList.js
 var T0$10 = [
@@ -7169,6 +7215,12 @@ function createUiList(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-list", createUiList, [
+	"as",
+	"density",
+	"layout",
+	"markers"
+]);
 //#endregion
 //#region components/shared/menu-navigation.js
 var itemSelector = "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]";
@@ -7651,6 +7703,15 @@ function createUiMenu(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-menu", createUiMenu, [
+	"density",
+	"for",
+	"icons",
+	"inline",
+	"open",
+	"placement",
+	"size"
+]);
 //#endregion
 //#region components/ui-menu-item/ui-menu-item.js
 function radioScope(item) {
@@ -8248,6 +8309,14 @@ function createUiMenuItem(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-menu-item", createUiMenuItem, [
+	"checked",
+	"disabled",
+	"href",
+	"tone",
+	"type",
+	"value"
+]);
 //#endregion
 //#region components/ui-popover/ui-popover.js
 function connect$5(host) {
@@ -8579,6 +8648,12 @@ function createUiPopover(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-popover", createUiPopover, [
+	"for",
+	"open",
+	"placement",
+	"size"
+]);
 //#endregion
 //#region vanilla/UiStack.js
 var T0$6 = [
@@ -8739,6 +8814,13 @@ function createUiStack(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-stack", createUiStack, [
+	"align",
+	"fill",
+	"gap",
+	"height",
+	"justify"
+]);
 //#endregion
 //#region vanilla/UiText.js
 var T0$5 = [
@@ -10028,6 +10110,19 @@ function createUiText(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-text", createUiText, [
+	"align",
+	"as",
+	"font",
+	"grow",
+	"size",
+	"tone",
+	"trim",
+	"truncate",
+	"variant",
+	"weight",
+	"wrap"
+]);
 //#endregion
 //#region components/ui-tooltip/ui-tooltip.js
 var warmTooltips = /* @__PURE__ */ new WeakMap();
@@ -10177,6 +10272,7 @@ function connect$4(host) {
 		}
 		trigger.addEventListener("focusin", onFocusin);
 		trigger.addEventListener("focusout", onFocusout);
+		onFocusin();
 	};
 	const ids = createIdResolver(document, () => {
 		lastFor = void 0;
@@ -10545,6 +10641,15 @@ function createUiTooltip(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-tooltip", createUiTooltip, [
+	"for",
+	"hideDelay",
+	"inverse",
+	"open",
+	"placement",
+	"showDelay",
+	"trigger"
+]);
 //#endregion
 //#region src/editor/extensions/expand.ts
 /**
@@ -11076,7 +11181,7 @@ var tableOfContentsNodeView = ({ editor, node, getPos }) => {
 	const showDraft = () => {
 		for (const field of ["format", "depth"]) {
 			choices[field]?.replaceChildren(choiceLabel(field, draft));
-			for (const [value, item] of items[field]) updateComponentProps(item, { checked: String(draft[field]) === value });
+			for (const [value, item] of items[field]) componentRegistry.update(item, { checked: String(draft[field]) === value });
 		}
 	};
 	const dropdown = (field) => {
@@ -11164,7 +11269,7 @@ var tableOfContentsNodeView = ({ editor, node, getPos }) => {
 	});
 	const setSettingsOpen = (open) => {
 		settingsOpen = open;
-		updateComponentProps(popover, { open });
+		componentRegistry.update(popover, { open });
 		revealSettings();
 	};
 	popover.addEventListener("open", (event) => {
@@ -11197,7 +11302,7 @@ var tableOfContentsNodeView = ({ editor, node, getPos }) => {
 			tone: "secondary"
 		}))]
 	}));
-	const revealSettings = () => updateComponentProps(settingsButton, { revealed: selected || hovered || settingsOpen });
+	const revealSettings = () => componentRegistry.update(settingsButton, { revealed: selected || hovered || settingsOpen });
 	const tooltip = element(createUiTooltip({
 		for: id,
 		children: ["Table of contents settings"]
@@ -11683,6 +11788,17 @@ function createUiCheckbox(options = {}, html) {
 	I.r["description"] = t4;
 	return element;
 }
+defineComponent$1("ui-checkbox", createUiCheckbox, [
+	"checked",
+	"disabled",
+	"indeterminate",
+	"invalid",
+	"label",
+	"name",
+	"required",
+	"size",
+	"value"
+]);
 //#endregion
 //#region components/ui-disclosure/ui-disclosure.js
 var disclosures = 0;
@@ -12264,6 +12380,17 @@ function createUiDisclosure(options = {}, html) {
 	I.r["panel"] = t7;
 	return element;
 }
+defineComponent$1("ui-disclosure", createUiDisclosure, [
+	"density",
+	"disabled",
+	"fill",
+	"headingLevel",
+	"name",
+	"open",
+	"requiredOpen",
+	"summary",
+	"variant"
+]);
 //#endregion
 //#region components/ui-input/ui-input.js
 function connect$1(host) {
@@ -12639,6 +12766,15 @@ function createUiInput(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-input", createUiInput, [
+	"disabled",
+	"invalid",
+	"readonly",
+	"required",
+	"size",
+	"type",
+	"value"
+]);
 //#endregion
 //#region src/editor/node-views/expand.ts
 var expandSequence = 0;
@@ -12667,7 +12803,7 @@ var expandNodeView = ({ editor, node, getPos }) => {
 	});
 	const setExpanded = (open) => {
 		expanded = open;
-		updateComponentProps(disclosure, {
+		componentRegistry.update(disclosure, {
 			summary: current.attrs.summary,
 			open
 		});
@@ -12685,7 +12821,7 @@ var expandNodeView = ({ editor, node, getPos }) => {
 	});
 	summary.addEventListener("input", () => {
 		draft.summary = summary.value;
-		updateComponentProps(summary, { value: draft.summary });
+		componentRegistry.update(summary, { value: draft.summary });
 	});
 	const label = document.createElement("label");
 	label.htmlFor = `${id}-summary`;
@@ -12696,7 +12832,7 @@ var expandNodeView = ({ editor, node, getPos }) => {
 	});
 	initiallyExpanded.addEventListener("change", (event) => {
 		draft.open = event.detail.checked;
-		updateComponentProps(initiallyExpanded, { checked: draft.open });
+		componentRegistry.update(initiallyExpanded, { checked: draft.open });
 	});
 	const cancel = createUiButton({
 		variant: "ghost",
@@ -12735,13 +12871,13 @@ var expandNodeView = ({ editor, node, getPos }) => {
 			]
 		}))]
 	});
-	const setSettingsOpen = (open) => updateComponentProps(popover, { open });
+	const setSettingsOpen = (open) => componentRegistry.update(popover, { open });
 	popover.addEventListener("open", (event) => {
 		if (event.target !== popover) return;
 		draft.summary = String(current.attrs.summary);
 		draft.open = Boolean(current.attrs.open);
-		updateComponentProps(summary, { value: draft.summary });
-		updateComponentProps(initiallyExpanded, { checked: draft.open });
+		componentRegistry.update(summary, { value: draft.summary });
+		componentRegistry.update(initiallyExpanded, { checked: draft.open });
 		setSettingsOpen(true);
 	});
 	popover.addEventListener("close", (event) => {
@@ -12921,6 +13057,12 @@ function createUiSeparator(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-separator", createUiSeparator, [
+	"emphasis",
+	"orientation",
+	"selectable",
+	"selected"
+]);
 //#endregion
 //#region src/editor/node-views/divider.ts
 /**
@@ -12935,7 +13077,7 @@ var dividerNodeView = ({ editor, getPos }) => {
 		selectable: editor.isEditable,
 		attributes: { contenteditable: "false" }
 	});
-	const render = () => updateComponentProps(dom, {
+	const render = () => componentRegistry.update(dom, {
 		selectable: editor.isEditable,
 		selected: editor.isEditable && selected
 	});
@@ -13414,6 +13556,7 @@ function createUiCallout(options = {}, html) {
 	manageProps(I);
 	return element;
 }
+defineComponent$1("ui-callout", createUiCallout, ["heading", "tone"]);
 //#endregion
 //#region src/editor/node-views/callout.ts
 var calloutProps = (node) => ({
@@ -13442,7 +13585,7 @@ var calloutNodeView = ({ node }) => {
 		update(next) {
 			if (next.type !== current.type) return false;
 			current = next;
-			updateComponentProps(callout, calloutProps(next));
+			componentRegistry.update(callout, calloutProps(next));
 			return true;
 		},
 		ignoreMutation: (mutation) => mutation.type !== "selection" && !contentDOM.contains(mutation.target)
@@ -13896,6 +14039,15 @@ function createUiImage(options = {}, html) {
 	I.r["frame"] = t0;
 	return element;
 }
+defineComponent$1("ui-image", createUiImage, [
+	"alt",
+	"height",
+	"placement",
+	"resizable",
+	"selected",
+	"src",
+	"width"
+]);
 //#endregion
 //#region src/editor/node-views/image.ts
 /** The delivery attributes the editor's decorations lay over the stored ones, such as `srcset`. */
@@ -13952,7 +14104,7 @@ var imageNodeView = ({ editor, node, getPos, decorations }) => {
 	const dom = element(image);
 	const render = () => {
 		writeMedia(current.attrs);
-		updateComponentProps(dom, props(current));
+		componentRegistry.update(dom, props(current));
 	};
 	dom.addEventListener("click", (event) => {
 		if (event.target.closest("button")) return;

package/vue/host.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit.
 import {
   computed,
   createTextVNode,
@@ -713,12 +713,15 @@ export function useComponentHost(
       validate: validity,
     })
   }
+  // Vue clears a template ref when it removes the element, as when a failed render replaces the
+  // root, so cleanup that runs after that still reads the root that disconnected.
+  let lastRoot: Element | null = null
   const host = {
     get element(): Element {
-      return root.value as Element
+      return (root.value ?? lastRoot) as Element
     },
     get root(): Element {
-      return root.value as Element
+      return (root.value ?? lastRoot) as Element
     },
     ...controllerNamespaces({
       state: Object.fromEntries(
@@ -875,6 +878,7 @@ export function useComponentHost(
   }
   const synchronize = (): void => {
     if (unmounted) return
+    lastRoot = root.value ?? lastRoot
     if (root.value?.isConnected !== true) {
       disconnect()
       return
@@ -1144,8 +1148,8 @@ export function useReflectedProp() {
 /** A scoped slot's name, which the consumer must fill with a `<template slot>` rather than plain children. */
 export function useScopedSlotName() {
   const slots = useSlots()
-  return (value: unknown): string => {
-    const name = value == null ? '' : String(value)
+  // A slot's name is a literal, so the outlet keeps its literal type, as declared slots type it.
+  return <Name extends string>(name: Name): Name => {
     if (slots[name] === undefined && slots.default?.().some((node) => node.props?.slot === name)) {
       throw diagnostic(
         'HR007',