@threadlabs/looma 0.29.17 → 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 = [
@@ -5242,14 +5273,33 @@ var S$14 = {
 };
 var D$14 = {
 	g: "ui-icon",
-	props: { "name": {
-		"required": false,
-		"default": "",
-		c: checkString,
-		t: "string",
-		j: 0,
-		m: "s"
-	} }
+	props: {
+		"name": {
+			"required": false,
+			"default": "",
+			c: checkString,
+			t: "string",
+			j: 0,
+			m: "s"
+		},
+		"tone": {
+			"required": false,
+			"values": [
+				"inherit",
+				"secondary",
+				"muted"
+			],
+			"default": "inherit",
+			c: checkFormat("keyword", keywordFormat),
+			t: "keyword",
+			j: 0,
+			m: [
+				"p",
+				formatOf(keywordFormat),
+				false
+			]
+		}
+	}
 };
 function createUiIcon(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -5261,7 +5311,11 @@ function createUiIcon(options = {}, html) {
 	if (!element.hasAttribute("aria-hidden")) element.setAttribute("aria-hidden", "true");
 	element.setAttribute("data-component", "ui-icon");
 	element.append((P0$12 ??= buildTemplate(T0$12)).cloneNode(true));
-	const v = [void 0, null];
+	const v = [
+		void 0,
+		null,
+		null
+	];
 	const B = acceptProps(element, D$14, S$14.n, v, componentProps, [], html);
 	const X = {
 		e: 0,
@@ -6562,15 +6616,24 @@ function createUiIcon(options = {}, html) {
 		}
 	};
 	const p0 = (r, c, d) => {
+		if (c & 4) {
+			const s0 = hostState(["tone"], [v[2]]);
+			if (s0 !== r.v0) writeAttribute(r.n, "data-ui-icon-state", (r.v0 = s0) === "" ? null : s0);
+		}
 		if (c & 1073741826) r.L0.update(g(0), d, c);
 	};
 	const t0 = element.firstChild.nextSibling.firstChild;
-	const R = { L0: new IndexedList(t0, t0.nextSibling, m1, p1, void 0, "shape") };
+	const R = {
+		n: element,
+		v0: void 0,
+		L0: new IndexedList(t0, t0.nextSibling, m1, p1, void 0, "shape")
+	};
 	const I = { B };
 	attachGeneratedController(element, S$14, v, ((c, d) => p0(R, c, d)), void 0, X, I);
 	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) {
@@ -6881,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 = [
@@ -7138,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\"]";
@@ -7620,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) {
@@ -8217,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) {
@@ -8548,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 = [
@@ -8708,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 = [
@@ -9997,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();
@@ -10146,6 +10272,7 @@ function connect$4(host) {
 		}
 		trigger.addEventListener("focusin", onFocusin);
 		trigger.addEventListener("focusout", onFocusout);
+		onFocusin();
 	};
 	const ids = createIdResolver(document, () => {
 		lastFor = void 0;
@@ -10514,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
 /**
@@ -11045,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) => {
@@ -11133,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) => {
@@ -11161,13 +11297,12 @@ var tableOfContentsNodeView = ({ editor, node, getPos }) => {
 		size: "sm",
 		anticipatory: true,
 		attributes: { id },
-		children: [element(createUiText({
-			as: "span",
-			tone: "secondary",
-			children: [element(createUiIcon({ name: "settings" }))]
+		children: [element(createUiIcon({
+			name: "settings",
+			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"]
@@ -11653,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;
@@ -12234,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) {
@@ -12609,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;
@@ -12637,7 +12803,7 @@ var expandNodeView = ({ editor, node, getPos }) => {
 	});
 	const setExpanded = (open) => {
 		expanded = open;
-		updateComponentProps(disclosure, {
+		componentRegistry.update(disclosure, {
 			summary: current.attrs.summary,
 			open
 		});
@@ -12655,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`;
@@ -12666,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",
@@ -12705,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) => {
@@ -12891,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
 /**
@@ -12905,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
 	});
@@ -13384,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) => ({
@@ -13412,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)
@@ -13866,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`. */
@@ -13922,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;
@@ -14920,7 +15102,6 @@ var LoomaEditor = defineComponent({
 			element,
 			pluginKey: "looma-link-context-menu",
 			shouldShow: ({ editor: menuEditor, from, to }) => (from === to || Boolean(selectedLinkReference(menuEditor))) && isLinkActive(menuEditor) && linkState.value.surface !== "popover" && !formatting?.dismissed(menuEditor.state.selection) && Boolean(menuEditor.isFocused || linkState.value.surface === "context" || linkPopup?.element.contains(document.activeElement)) && !(props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive()),
-			maxWidth: () => Math.min(480, window.innerWidth - 24),
 			related: editorRoot,
 			onDismiss: (reason) => reason === "escape" ? dismissFormatting() : linkPopup?.hide()
 		}));

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',