@threadlabs/looma 0.29.11 → 0.29.12

package/vue/editor/index.js

@@ -1,6 +1,6 @@
-import { computed, createApp, defineComponent, h, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, shallowRef, useId, watch } from "vue";
+import { computed, 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, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
-import { Button, Card, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Image, Popover, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
+import { Button, Card, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Popover, 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 { AllSelection, NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
@@ -601,7 +601,7 @@ var inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
 * This extension allows you to insert images.
 * @see https://www.tiptap.dev/api/nodes/image
 */
-var Image$1 = Node$1.create({
+var Image = Node$1.create({
 	name: "image",
 	addOptions() {
 		return {
@@ -663,7 +663,7 @@ function normalizeImageDimension(value) {
 function normalizeImagePlacement(value) {
 	return value === "center" || value === "wrap-left" || value === "wrap-right" ? value : "block";
 }
-Image$1.extend({ addAttributes() {
+Image.extend({ addAttributes() {
 	return {
 		...this.parent?.(),
 		width: {
@@ -2450,7 +2450,7 @@ function setCodeBlockLanguage(editor, pos, value, names) {
 }
 //#endregion
 //#region components/ui-button/ui-button.js
-function connect$9(host) {
+function connect$10(host) {
 	const onClick = (event) => {
 		if (!host.props.loading.value && !host.props.pending.value) return;
 		event.preventDefault();
@@ -2460,12 +2460,12 @@ function connect$9(host) {
 	return () => host.element.removeEventListener("click", onClick, true);
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$9(host) {
-	host.on("connect", () => connect$9(host));
+function controller$10(host) {
+	host.on("connect", () => connect$10(host));
 }
 //#endregion
 //#region vanilla/UiButton.js
-var T0$14 = [
+var T0$15 = [
 	"",
 	[],
 	"\n      ",
@@ -2489,8 +2489,8 @@ var T0$14 = [
 	],
 	"\n    "
 ];
-var T1$14 = ["ui-spinner", ["size", "sm"]];
-var T2$10 = [
+var T1$15 = ["ui-spinner", ["size", "sm"]];
+var T2$11 = [
 	"",
 	[],
 	4
@@ -2593,9 +2593,9 @@ var T17$1 = [
 ];
 var T18$1 = ["", []];
 var T19$1 = ["", []];
-var P0$14;
-var P1$14;
-var P2$10;
+var P0$15;
+var P1$15;
+var P2$11;
 var P3$7;
 var P4$6;
 var P5$5;
@@ -2613,7 +2613,7 @@ var P16$1;
 var P17$1;
 var P18$1;
 var P19$1;
-var S$16 = {
+var S$17 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
@@ -2743,7 +2743,7 @@ var Q$3 = [
 	[],
 	[]
 ];
-var D$16 = {
+var D$17 = {
 	g: "ui-button",
 	props: {
 		"align": {
@@ -2916,7 +2916,7 @@ var D$16 = {
 		}
 	}
 };
-var C$9 = (host) => controller$9(host);
+var C$10 = (host) => controller$10(host);
 function createUiButton(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const v = [
@@ -2935,7 +2935,7 @@ function createUiButton(options = {}, html) {
 		null,
 		null
 	];
-	acceptProps(void 0, D$16, S$16.n, v, componentProps, [], html);
+	acceptProps(void 0, D$17, S$17.n, v, componentProps, [], html);
 	let a = v[13] === "card" && v[1] === "a" ? 0 : v[13] === "card" ? 1 : v[1] === "a" ? 2 : 3;
 	let element;
 	if (a === 0) {
@@ -2967,12 +2967,12 @@ function createUiButton(options = {}, html) {
 		}
 		element.setAttribute("data-component", "ui-button");
 	}
-	const B = acceptProps(element, D$16, S$16.n, v, componentProps, Q$3[a], html);
+	const B = acceptProps(element, D$17, S$17.n, v, componentProps, Q$3[a], html);
 	const m1 = (d) => {
-		return { n: (P1$14 ??= buildTemplate(T1$14)).cloneNode(true) };
+		return { n: (P1$15 ??= buildTemplate(T1$15)).cloneNode(true) };
 	};
 	const m2 = (d) => {
-		const n = (P2$10 ??= buildTemplate(T2$10)).cloneNode(true);
+		const n = (P2$11 ??= buildTemplate(T2$11)).cloneNode(true);
 		const t0 = n.firstChild;
 		const r = {
 			n,
@@ -3065,7 +3065,7 @@ function createUiButton(options = {}, html) {
 		return { n: (P19$1 ??= buildTemplate(T19$1)).cloneNode(true) };
 	};
 	const m0 = (n, d) => {
-		n.append((P0$14 ??= buildTemplate(T0$14)).cloneNode(true));
+		n.append((P0$15 ??= buildTemplate(T0$15)).cloneNode(true));
 		const t0 = n.firstChild.nextSibling;
 		const t1 = t0.firstChild;
 		const t2 = t1.nextSibling.nextSibling;
@@ -3614,27 +3614,27 @@ function createUiButton(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$16, v, p, C$9, void 0, I);
+	attachGeneratedController(element, S$17, v, p, C$10, void 0, I);
 	manageProps(I);
 	return element;
 }
 //#endregion
 //#region vanilla/UiCluster.js
-var T0$13 = [
+var T0$14 = [
 	"",
 	[],
 	4
 ];
-var T1$13 = ["", []];
-var P0$13;
-var P1$13;
-var S$15 = {
+var T1$14 = ["", []];
+var P0$14;
+var P1$14;
+var S$16 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
 	g: "ui-cluster"
 };
-var D$15 = {
+var D$16 = {
 	g: "ui-cluster",
 	props: {
 		"align": {
@@ -3757,7 +3757,7 @@ function createUiCluster(options = {}, html) {
 		element.setAttribute(name, value === true ? "" : String(value));
 	}
 	element.setAttribute("data-component", "ui-cluster");
-	element.append((P0$13 ??= buildTemplate(T0$13)).cloneNode(true));
+	element.append((P0$14 ??= buildTemplate(T0$14)).cloneNode(true));
 	const v = [
 		null,
 		null,
@@ -3767,9 +3767,9 @@ function createUiCluster(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$15, S$15.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$16, S$16.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$13 ??= buildTemplate(T1$13)).cloneNode(true) };
+		return { n: (P1$14 ??= buildTemplate(T1$14)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
 		if (c & 127) {
@@ -3816,7 +3816,7 @@ function createUiCluster(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$15, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
+	attachGeneratedController(element, S$16, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -3857,7 +3857,7 @@ function id(prefix) {
 function descriptionIds(input) {
 	return Array.from(new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)));
 }
-function connect$8(host) {
+function connect$9(host) {
 	const element = host.element;
 	let activeInput = null;
 	let owned = /* @__PURE__ */ new Set();
@@ -3930,12 +3930,12 @@ function connect$8(host) {
 	};
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$8(host) {
-	host.on("connect", () => connect$8(host));
+function controller$9(host) {
+	host.on("connect", () => connect$9(host));
 }
 //#endregion
 //#region vanilla/UiFormField.js
-var T0$12 = [
+var T0$13 = [
 	"",
 	[],
 	"\n    ",
@@ -3968,24 +3968,24 @@ var T0$12 = [
 	],
 	"\n  "
 ];
-var T1$12 = ["", []];
-var T2$9 = ["", []];
+var T1$13 = ["", []];
+var T2$10 = ["", []];
 var T3$6 = ["", []];
 var T4$5 = ["", []];
 var T5$4 = ["", []];
-var P0$12;
-var P1$12;
-var P2$9;
+var P0$13;
+var P1$13;
+var P2$10;
 var P3$6;
 var P4$5;
 var P5$4;
-var S$14 = {
+var S$15 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
 	g: "ui-form-field"
 };
-var D$14 = {
+var D$15 = {
 	g: "ui-form-field",
 	props: {
 		"disabled": {
@@ -4014,7 +4014,7 @@ var D$14 = {
 		}
 	}
 };
-var C$8 = (host) => controller$8(host);
+var C$9 = (host) => controller$9(host);
 function createUiFormField(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("div");
@@ -4023,18 +4023,18 @@ function createUiFormField(options = {}, html) {
 		element.setAttribute(name, value === true ? "" : String(value));
 	}
 	element.setAttribute("data-component", "ui-form-field");
-	element.append((P0$12 ??= buildTemplate(T0$12)).cloneNode(true));
+	element.append((P0$13 ??= buildTemplate(T0$13)).cloneNode(true));
 	const v = [
 		null,
 		null,
 		null
 	];
-	const B = acceptProps(element, D$14, S$14.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$15, S$15.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$12 ??= buildTemplate(T1$12)).cloneNode(true) };
+		return { n: (P1$13 ??= buildTemplate(T1$13)).cloneNode(true) };
 	};
 	const m2 = (d) => {
-		return { n: (P2$9 ??= buildTemplate(T2$9)).cloneNode(true) };
+		return { n: (P2$10 ??= buildTemplate(T2$10)).cloneNode(true) };
 	};
 	const m3 = (d) => {
 		return { n: (P3$6 ??= buildTemplate(T3$6)).cloneNode(true) };
@@ -4144,13 +4144,13 @@ function createUiFormField(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$14, v, ((c, d) => p0(R, c, d)), C$8, void 0, I);
+	attachGeneratedController(element, S$15, v, ((c, d) => p0(R, c, d)), C$9, void 0, I);
 	manageProps(I);
 	return element;
 }
 //#endregion
 //#region vanilla/UiIcon.js
-var T0$11 = [
+var T0$12 = [
 	"",
 	[],
 	"\n    ",
@@ -4176,7 +4176,7 @@ var T0$11 = [
 	],
 	"\n  "
 ];
-var T1$11 = [
+var T1$12 = [
 	"g",
 	[],
 	1,
@@ -4184,7 +4184,7 @@ var T1$11 = [
 	1,
 	1
 ];
-var T2$8 = ["path", []];
+var T2$9 = ["path", []];
 var T3$5 = ["circle", []];
 var T4$4 = [
 	"rect",
@@ -4192,14 +4192,14 @@ var T4$4 = [
 	"\n        "
 ];
 var T5$3 = ["line", []];
-var P0$11;
-var P1$11;
-var P2$8;
+var P0$12;
+var P1$12;
+var P2$9;
 var P3$5;
 var P4$4;
 var P5$3;
 var E = /* @__PURE__ */ new Map();
-var S$13 = {
+var S$14 = {
 	n: ["shapes"],
 	t: ["?"],
 	f: import.meta.url,
@@ -4207,7 +4207,7 @@ var S$13 = {
 	k: 0,
 	r: readonlyView
 };
-var D$13 = {
+var D$14 = {
 	g: "ui-icon",
 	props: { "name": {
 		"required": false,
@@ -4227,9 +4227,9 @@ function createUiIcon(options = {}, html) {
 	}
 	if (!element.hasAttribute("aria-hidden")) element.setAttribute("aria-hidden", "true");
 	element.setAttribute("data-component", "ui-icon");
-	element.append((P0$11 ??= buildTemplate(T0$11)).cloneNode(true));
+	element.append((P0$12 ??= buildTemplate(T0$12)).cloneNode(true));
 	const v = [void 0, null];
-	const B = acceptProps(element, D$13, S$13.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$14, S$14.n, v, componentProps, [], html);
 	const X = {
 		e: 0,
 		g: (j) => g(j),
@@ -5350,7 +5350,7 @@ function createUiIcon(options = {}, html) {
 		return next;
 	};
 	const m1 = (o, j, l) => {
-		const n = (P1$11 ??= buildTemplate(T1$11, document, 1)).cloneNode(true);
+		const n = (P1$12 ??= buildTemplate(T1$12, document, 1)).cloneNode(true);
 		const t0 = n.firstChild;
 		const t1 = t0.nextSibling.nextSibling;
 		const t2 = t1.nextSibling.nextSibling;
@@ -5418,7 +5418,7 @@ function createUiIcon(options = {}, html) {
 	};
 	const m2 = (d, o, u) => {
 		const r = {
-			n: (P2$8 ??= buildTemplate(T2$8, document, 1)).cloneNode(true),
+			n: (P2$9 ??= buildTemplate(T2$9, document, 1)).cloneNode(true),
 			u,
 			w: 0,
 			v0: null
@@ -5534,13 +5534,13 @@ function createUiIcon(options = {}, html) {
 	const t0 = element.firstChild.nextSibling.firstChild;
 	const R = { L0: new IndexedList(t0, t0.nextSibling, m1, p1, void 0, "shape") };
 	const I = { B };
-	attachGeneratedController(element, S$13, v, ((c, d) => p0(R, c, d)), void 0, X, I);
+	attachGeneratedController(element, S$14, v, ((c, d) => p0(R, c, d)), void 0, X, I);
 	manageProps(I);
 	return element;
 }
 //#endregion
 //#region components/ui-icon-button/ui-icon-button.js
-function connect$7(host) {
+function connect$8(host) {
 	const stop = host.effect(() => {
 		if (host.props.anticipatory.value) host.element.setAttribute("data-ui-affordance", "button");
 		else host.element.removeAttribute("data-ui-affordance");
@@ -5557,12 +5557,12 @@ function connect$7(host) {
 	};
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$7(host) {
-	host.on("connect", () => connect$7(host));
+function controller$8(host) {
+	host.on("connect", () => connect$8(host));
 }
 //#endregion
 //#region vanilla/UiIconButton.js
-var T0$10 = [
+var T0$11 = [
 	"",
 	[],
 	"\n    ",
@@ -5575,18 +5575,18 @@ var T0$10 = [
 	],
 	"\n  "
 ];
-var T1$10 = ["ui-spinner", ["size", "sm"]];
-var T2$7 = ["", []];
-var P0$10;
-var P1$10;
-var P2$7;
-var S$12 = {
+var T1$11 = ["ui-spinner", ["size", "sm"]];
+var T2$8 = ["", []];
+var P0$11;
+var P1$11;
+var P2$8;
+var S$13 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
 	g: "ui-icon-button"
 };
-var D$12 = {
+var D$13 = {
 	g: "ui-icon-button",
 	props: {
 		"anticipatory": {
@@ -5705,7 +5705,7 @@ var D$12 = {
 		}
 	}
 };
-var C$7 = (host) => controller$7(host);
+var C$8 = (host) => controller$8(host);
 function createUiIconButton(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("button");
@@ -5715,7 +5715,7 @@ function createUiIconButton(options = {}, html) {
 	}
 	if (!element.hasAttribute("type")) element.setAttribute("type", "button");
 	element.setAttribute("data-component", "ui-icon-button");
-	element.append((P0$10 ??= buildTemplate(T0$10)).cloneNode(true));
+	element.append((P0$11 ??= buildTemplate(T0$11)).cloneNode(true));
 	const v = [
 		null,
 		null,
@@ -5729,12 +5729,12 @@ function createUiIconButton(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$12, S$12.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$13, S$13.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$10 ??= buildTemplate(T1$10)).cloneNode(true) };
+		return { n: (P1$11 ??= buildTemplate(T1$11)).cloneNode(true) };
 	};
 	const m2 = (d) => {
-		return { n: (P2$7 ??= buildTemplate(T2$7)).cloneNode(true) };
+		return { n: (P2$8 ??= buildTemplate(T2$8)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
 		if (c & 2) {
@@ -5833,29 +5833,29 @@ function createUiIconButton(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$12, v, ((c, d) => p0(R, c, d)), C$7, void 0, I);
+	attachGeneratedController(element, S$13, v, ((c, d) => p0(R, c, d)), C$8, void 0, I);
 	manageProps(I);
 	return element;
 }
 //#endregion
 //#region vanilla/UiList.js
-var T0$9 = [
+var T0$10 = [
 	"",
 	[],
 	4
 ];
-var T1$9 = ["", []];
-var T2$6 = [
+var T1$10 = ["", []];
+var T2$7 = [
 	"",
 	[],
 	4
 ];
 var T3$4 = ["", []];
-var P0$9;
-var P1$9;
-var P2$6;
+var P0$10;
+var P1$10;
+var P2$7;
 var P3$4;
-var S$11 = {
+var S$12 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
@@ -5889,7 +5889,7 @@ var A$2 = [[
 	]
 ]];
 var Q$2 = [[], []];
-var D$11 = {
+var D$12 = {
 	g: "ui-list",
 	props: {
 		"as": {
@@ -5954,7 +5954,7 @@ function createUiList(options = {}, html) {
 		null,
 		null
 	];
-	acceptProps(void 0, D$11, S$11.n, v, componentProps, [], html);
+	acceptProps(void 0, D$12, S$12.n, v, componentProps, [], html);
 	let a = v[0] === "ol" ? 0 : 1;
 	let element;
 	if (a === 0) {
@@ -5973,15 +5973,15 @@ function createUiList(options = {}, html) {
 		if (!element.hasAttribute("role")) element.setAttribute("role", "list");
 		element.setAttribute("data-component", "ui-list");
 	}
-	const B = acceptProps(element, D$11, S$11.n, v, componentProps, Q$2[a], html);
+	const B = acceptProps(element, D$12, S$12.n, v, componentProps, Q$2[a], html);
 	const m1 = (d) => {
-		return { n: (P1$9 ??= buildTemplate(T1$9)).cloneNode(true) };
+		return { n: (P1$10 ??= buildTemplate(T1$10)).cloneNode(true) };
 	};
 	const m3 = (d) => {
 		return { n: (P3$4 ??= buildTemplate(T3$4)).cloneNode(true) };
 	};
 	const m0 = (n, d) => {
-		n.append((P0$9 ??= buildTemplate(T0$9)).cloneNode(true));
+		n.append((P0$10 ??= buildTemplate(T0$10)).cloneNode(true));
 		const t0 = n.firstChild;
 		const r = {
 			n,
@@ -6023,7 +6023,7 @@ function createUiList(options = {}, html) {
 		} else if (r.b0 !== void 0) r.b0;
 	};
 	const m2 = (n, d) => {
-		n.append((P2$6 ??= buildTemplate(T2$6)).cloneNode(true));
+		n.append((P2$7 ??= buildTemplate(T2$7)).cloneNode(true));
 		const t0 = n.firstChild;
 		const r = {
 			n,
@@ -6090,7 +6090,7 @@ function createUiList(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$11, v, p, void 0, void 0, I);
+	attachGeneratedController(element, S$12, v, p, void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -6767,7 +6767,7 @@ function triggerFor(event) {
 function disabled(item) {
 	return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
 }
-function connect$6(host) {
+function connect$7(host) {
 	const element = host.element;
 	const document = element.ownerDocument;
 	const overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
@@ -6927,12 +6927,12 @@ function connect$6(host) {
 	};
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$6(host) {
-	host.on("connect", () => connect$6(host));
+function controller$7(host) {
+	host.on("connect", () => connect$7(host));
 }
 //#endregion
 //#region vanilla/UiMenu.js
-var T0$8 = [
+var T0$9 = [
 	"",
 	[],
 	[
@@ -6941,10 +6941,10 @@ var T0$8 = [
 		4
 	]
 ];
-var T1$8 = ["", []];
-var P0$8;
-var P1$8;
-var S$10 = {
+var T1$9 = ["", []];
+var P0$9;
+var P1$9;
+var S$11 = {
 	n: ["internalOpen"],
 	t: ["b"],
 	f: import.meta.url,
@@ -7036,7 +7036,7 @@ var S$10 = {
 	},
 	x: dispatchDeclared
 };
-var D$10 = {
+var D$11 = {
 	g: "ui-menu",
 	props: {
 		"density": {
@@ -7107,7 +7107,7 @@ var D$10 = {
 		}
 	}
 };
-var C$6 = (host) => controller$6(host);
+var C$7 = (host) => controller$7(host);
 function createUiMenu(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("div");
@@ -7118,7 +7118,7 @@ function createUiMenu(options = {}, html) {
 	if (!element.hasAttribute("role")) element.setAttribute("role", "menu");
 	if (!element.hasAttribute("aria-orientation")) element.setAttribute("aria-orientation", "vertical");
 	element.setAttribute("data-component", "ui-menu");
-	element.append((P0$8 ??= buildTemplate(T0$8)).cloneNode(true));
+	element.append((P0$9 ??= buildTemplate(T0$9)).cloneNode(true));
 	const v = [
 		false,
 		null,
@@ -7129,9 +7129,9 @@ function createUiMenu(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$10, S$10.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$11, S$11.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$8 ??= buildTemplate(T1$8)).cloneNode(true) };
+		return { n: (P1$9 ??= buildTemplate(T1$9)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
 		if (c & 155) {
@@ -7175,10 +7175,10 @@ function createUiMenu(options = {}, html) {
 	const I = { B };
 	const J = project(I, children, slots);
 	I.R = /* @__PURE__ */ new Set();
-	attachGeneratedController(element, S$10, v, (c, d) => {
+	attachGeneratedController(element, S$11, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$6, void 0, I);
+	}, C$7, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -7187,7 +7187,7 @@ function createUiMenu(options = {}, html) {
 function radioScope(item) {
 	return item.closest("[role=\"group\"]") ?? item.closest("[role=\"menu\"]");
 }
-function connect$5(host) {
+function connect$6(host) {
 	const item = host.element;
 	let external = Boolean(host.props.checked.value);
 	host.state.internalChecked = external;
@@ -7238,12 +7238,12 @@ function connect$5(host) {
 	};
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$5(host) {
-	host.on("connect", () => connect$5(host));
+function controller$6(host) {
+	host.on("connect", () => connect$6(host));
 }
 //#endregion
 //#region vanilla/UiMenuItem.js
-var T0$7 = [
+var T0$8 = [
 	"",
 	[],
 	"\n      ",
@@ -7276,8 +7276,8 @@ var T0$7 = [
 	],
 	"\n    "
 ];
-var T1$7 = ["", []];
-var T2$5 = ["", []];
+var T1$8 = ["", []];
+var T2$6 = ["", []];
 var T3$3 = ["", []];
 var T4$3 = [
 	"",
@@ -7329,16 +7329,16 @@ var T5$2 = ["ui-icon", ["name", "check"]];
 var T6$2 = ["", []];
 var T7$2 = ["", []];
 var T8$2 = ["", []];
-var P0$7;
-var P1$7;
-var P2$5;
+var P0$8;
+var P1$8;
+var P2$6;
 var P3$3;
 var P4$3;
 var P5$2;
 var P6$2;
 var P7$2;
 var P8$2;
-var S$9 = {
+var S$10 = {
 	n: ["internalChecked"],
 	t: ["b"],
 	f: import.meta.url,
@@ -7418,7 +7418,7 @@ var A$1 = [[
 	]
 ]];
 var Q$1 = [[], []];
-var D$9 = {
+var D$10 = {
 	g: "ui-menu-item",
 	props: {
 		"checked": {
@@ -7485,7 +7485,7 @@ var D$9 = {
 		}
 	}
 };
-var C$5 = (host) => controller$5(host);
+var C$6 = (host) => controller$6(host);
 function createUiMenuItem(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const v = [
@@ -7497,7 +7497,7 @@ function createUiMenuItem(options = {}, html) {
 		null,
 		null
 	];
-	acceptProps(void 0, D$9, S$9.n, v, componentProps, [], html);
+	acceptProps(void 0, D$10, S$10.n, v, componentProps, [], html);
 	let a = truthy(v[3]) && v[5] === "action" ? 0 : 1;
 	let element;
 	if (a === 0) {
@@ -7518,12 +7518,12 @@ function createUiMenuItem(options = {}, html) {
 		if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
 		element.setAttribute("data-component", "ui-menu-item");
 	}
-	const B = acceptProps(element, D$9, S$9.n, v, componentProps, Q$1[a], html);
+	const B = acceptProps(element, D$10, S$10.n, v, componentProps, Q$1[a], html);
 	const m1 = (d) => {
-		return { n: (P1$7 ??= buildTemplate(T1$7)).cloneNode(true) };
+		return { n: (P1$8 ??= buildTemplate(T1$8)).cloneNode(true) };
 	};
 	const m2 = (d) => {
-		return { n: (P2$5 ??= buildTemplate(T2$5)).cloneNode(true) };
+		return { n: (P2$6 ??= buildTemplate(T2$6)).cloneNode(true) };
 	};
 	const m3 = (d) => {
 		return { n: (P3$3 ??= buildTemplate(T3$3)).cloneNode(true) };
@@ -7541,7 +7541,7 @@ function createUiMenuItem(options = {}, html) {
 		return { n: (P8$2 ??= buildTemplate(T8$2)).cloneNode(true) };
 	};
 	const m0 = (n, d) => {
-		n.append((P0$7 ??= buildTemplate(T0$7)).cloneNode(true));
+		n.append((P0$8 ??= buildTemplate(T0$8)).cloneNode(true));
 		const t0 = n.firstChild.nextSibling;
 		const t1 = t0.firstChild;
 		const t2 = t0.nextSibling.nextSibling;
@@ -7772,16 +7772,16 @@ function createUiMenuItem(options = {}, html) {
 	const I = { B };
 	const J = project(I, children, slots);
 	I.R = /* @__PURE__ */ new Set();
-	attachGeneratedController(element, S$9, v, (c, d) => {
+	attachGeneratedController(element, S$10, v, (c, d) => {
 		p(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$5, void 0, I);
+	}, C$6, void 0, I);
 	manageProps(I);
 	return element;
 }
 //#endregion
 //#region components/ui-popover/ui-popover.js
-function connect$4(host) {
+function connect$5(host) {
 	const element = host.element;
 	const document = element.ownerDocument;
 	const offset = () => {
@@ -7899,12 +7899,12 @@ function connect$4(host) {
 	};
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$4(host) {
-	host.on("connect", () => connect$4(host));
+function controller$5(host) {
+	host.on("connect", () => connect$5(host));
 }
 //#endregion
 //#region vanilla/UiPopover.js
-var T0$6 = [
+var T0$7 = [
 	"",
 	[],
 	[
@@ -7913,10 +7913,10 @@ var T0$6 = [
 		4
 	]
 ];
-var T1$6 = ["", []];
-var P0$6;
-var P1$6;
-var S$8 = {
+var T1$7 = ["", []];
+var P0$7;
+var P1$7;
+var S$9 = {
 	n: ["internalOpen"],
 	t: ["b"],
 	f: import.meta.url,
@@ -7987,7 +7987,7 @@ var S$8 = {
 	},
 	x: dispatchDeclared
 };
-var D$8 = {
+var D$9 = {
 	g: "ui-popover",
 	props: {
 		"for": {
@@ -8052,7 +8052,7 @@ var D$8 = {
 		}
 	}
 };
-var C$4 = (host) => controller$4(host);
+var C$5 = (host) => controller$5(host);
 function createUiPopover(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("span");
@@ -8061,7 +8061,7 @@ function createUiPopover(options = {}, html) {
 		element.setAttribute(name, value === true ? "" : String(value));
 	}
 	element.setAttribute("data-component", "ui-popover");
-	element.append((P0$6 ??= buildTemplate(T0$6)).cloneNode(true));
+	element.append((P0$7 ??= buildTemplate(T0$7)).cloneNode(true));
 	const v = [
 		false,
 		null,
@@ -8069,9 +8069,9 @@ function createUiPopover(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$8, S$8.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$9, S$9.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$6 ??= buildTemplate(T1$6)).cloneNode(true) };
+		return { n: (P1$7 ??= buildTemplate(T1$7)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
 		if (c & 17) {
@@ -8103,30 +8103,30 @@ function createUiPopover(options = {}, html) {
 	const I = { B };
 	const J = project(I, children, slots);
 	I.R = /* @__PURE__ */ new Set();
-	attachGeneratedController(element, S$8, v, (c, d) => {
+	attachGeneratedController(element, S$9, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$4, void 0, I);
+	}, C$5, void 0, I);
 	manageProps(I);
 	return element;
 }
 //#endregion
 //#region vanilla/UiStack.js
-var T0$5 = [
+var T0$6 = [
 	"",
 	[],
 	4
 ];
-var T1$5 = ["", []];
-var P0$5;
-var P1$5;
-var S$7 = {
+var T1$6 = ["", []];
+var P0$6;
+var P1$6;
+var S$8 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
 	g: "ui-stack"
 };
-var D$7 = {
+var D$8 = {
 	g: "ui-stack",
 	props: {
 		"align": {
@@ -8207,7 +8207,7 @@ function createUiStack(options = {}, html) {
 		element.setAttribute(name, value === true ? "" : String(value));
 	}
 	element.setAttribute("data-component", "ui-stack");
-	element.append((P0$5 ??= buildTemplate(T0$5)).cloneNode(true));
+	element.append((P0$6 ??= buildTemplate(T0$6)).cloneNode(true));
 	const v = [
 		null,
 		null,
@@ -8215,9 +8215,9 @@ function createUiStack(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$7, S$7.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$8, S$8.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$5 ??= buildTemplate(T1$5)).cloneNode(true) };
+		return { n: (P1$6 ??= buildTemplate(T1$6)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
 		if (c & 8) {
@@ -8266,19 +8266,19 @@ function createUiStack(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$7, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
+	attachGeneratedController(element, S$8, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
 //#endregion
 //#region vanilla/UiText.js
-var T0$4 = [
+var T0$5 = [
 	"",
 	[],
 	4
 ];
-var T1$4 = ["", []];
-var T2$4 = [
+var T1$5 = ["", []];
+var T2$5 = [
 	"",
 	[],
 	4
@@ -8338,9 +8338,9 @@ var T20 = [
 	4
 ];
 var T21 = ["", []];
-var P0$4;
-var P1$4;
-var P2$4;
+var P0$5;
+var P1$5;
+var P2$5;
 var P3$2;
 var P4$2;
 var P5$1;
@@ -8360,7 +8360,7 @@ var P18;
 var P19;
 var P20;
 var P21;
-var S$6 = {
+var S$7 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
@@ -8612,7 +8612,7 @@ var Q = [
 	[],
 	[]
 ];
-var D$6 = {
+var D$7 = {
 	g: "ui-text",
 	props: {
 		"align": {
@@ -8796,7 +8796,7 @@ function createUiText(options = {}, html) {
 		null,
 		null
 	];
-	acceptProps(void 0, D$6, S$6.n, v, componentProps, [], html);
+	acceptProps(void 0, D$7, S$7.n, v, componentProps, [], html);
 	let a = v[1] === "span" ? 0 : v[1] === "div" ? 1 : v[1] === "small" ? 2 : v[1] === "strong" ? 3 : v[1] === "label" ? 4 : v[1] === "h2" ? 5 : v[1] === "h3" ? 6 : v[1] === "h4" ? 7 : v[1] === "h5" ? 8 : v[1] === "h6" ? 9 : 10;
 	let element;
 	if (a === 0) {
@@ -8877,9 +8877,9 @@ function createUiText(options = {}, html) {
 		}
 		element.setAttribute("data-component", "ui-text");
 	}
-	const B = acceptProps(element, D$6, S$6.n, v, componentProps, Q[a], html);
+	const B = acceptProps(element, D$7, S$7.n, v, componentProps, Q[a], html);
 	const m1 = (d) => {
-		return { n: (P1$4 ??= buildTemplate(T1$4)).cloneNode(true) };
+		return { n: (P1$5 ??= buildTemplate(T1$5)).cloneNode(true) };
 	};
 	const m3 = (d) => {
 		return { n: (P3$2 ??= buildTemplate(T3$2)).cloneNode(true) };
@@ -8912,7 +8912,7 @@ function createUiText(options = {}, html) {
 		return { n: (P21 ??= buildTemplate(T21)).cloneNode(true) };
 	};
 	const m0 = (n, d) => {
-		n.append((P0$4 ??= buildTemplate(T0$4)).cloneNode(true));
+		n.append((P0$5 ??= buildTemplate(T0$5)).cloneNode(true));
 		const t0 = n.firstChild;
 		const r = {
 			n,
@@ -8966,7 +8966,7 @@ function createUiText(options = {}, html) {
 		} else if (r.b0 !== void 0) r.b0;
 	};
 	const m2 = (n, d) => {
-		n.append((P2$4 ??= buildTemplate(T2$4)).cloneNode(true));
+		n.append((P2$5 ??= buildTemplate(T2$5)).cloneNode(true));
 		const t0 = n.firstChild;
 		const r = {
 			n,
@@ -9555,14 +9555,14 @@ function createUiText(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S$6, v, p, void 0, void 0, I);
+	attachGeneratedController(element, S$7, v, p, void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
 //#endregion
 //#region components/ui-tooltip/ui-tooltip.js
 var warmTooltips = /* @__PURE__ */ new WeakMap();
-function connect$3(host) {
+function connect$4(host) {
 	const element = host.element;
 	const document = element.ownerDocument;
 	const warm = warmTooltips.get(document) ?? {
@@ -9797,12 +9797,12 @@ function connect$3(host) {
 	};
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$3(host) {
-	host.on("connect", () => connect$3(host));
+function controller$4(host) {
+	host.on("connect", () => connect$4(host));
 }
 //#endregion
 //#region vanilla/UiTooltip.js
-var T0$3 = [
+var T0$4 = [
 	"",
 	[],
 	[
@@ -9823,12 +9823,12 @@ var T0$3 = [
 		"\n    "
 	]
 ];
-var T1$3 = ["", []];
-var T2$3 = ["", []];
-var P0$3;
-var P1$3;
-var P2$3;
-var S$5 = {
+var T1$4 = ["", []];
+var T2$4 = ["", []];
+var P0$4;
+var P1$4;
+var P2$4;
+var S$6 = {
 	n: ["internalOpen"],
 	t: ["b"],
 	f: import.meta.url,
@@ -9899,7 +9899,7 @@ var S$5 = {
 	},
 	x: dispatchDeclared
 };
-var D$5 = {
+var D$6 = {
 	g: "ui-tooltip",
 	props: {
 		"for": {
@@ -9987,7 +9987,7 @@ var D$5 = {
 		}
 	}
 };
-var C$3 = (host) => controller$3(host);
+var C$4 = (host) => controller$4(host);
 function createUiTooltip(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("span");
@@ -9997,7 +9997,7 @@ function createUiTooltip(options = {}, html) {
 	}
 	if (!element.hasAttribute("role")) element.setAttribute("role", "tooltip");
 	element.setAttribute("data-component", "ui-tooltip");
-	element.append((P0$3 ??= buildTemplate(T0$3)).cloneNode(true));
+	element.append((P0$4 ??= buildTemplate(T0$4)).cloneNode(true));
 	const v = [
 		false,
 		null,
@@ -10008,12 +10008,12 @@ function createUiTooltip(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$5, S$5.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$6, S$6.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$3 ??= buildTemplate(T1$3)).cloneNode(true) };
+		return { n: (P1$4 ??= buildTemplate(T1$4)).cloneNode(true) };
 	};
 	const m2 = (d) => {
-		return { n: (P2$3 ??= buildTemplate(T2$3)).cloneNode(true) };
+		return { n: (P2$4 ??= buildTemplate(T2$4)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
 		if (c & 1) {
@@ -10069,10 +10069,10 @@ function createUiTooltip(options = {}, html) {
 	const I = { B };
 	const J = project(I, children, slots);
 	I.R = /* @__PURE__ */ new Set();
-	attachGeneratedController(element, S$5, v, (c, d) => {
+	attachGeneratedController(element, S$6, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$3, void 0, I);
+	}, C$4, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -10795,7 +10795,7 @@ function trackTrigger(host) {
 }
 //#endregion
 //#region components/ui-checkbox/ui-checkbox.js
-function connect$2(host) {
+function connect$3(host) {
 	const input = host.refs.input;
 	describeInput(input, host.refs.description);
 	const [trigger, stopTracking] = trackTrigger(host);
@@ -10828,12 +10828,12 @@ function connect$2(host) {
 	};
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$2(host) {
-	host.on("connect", () => connect$2(host));
+function controller$3(host) {
+	host.on("connect", () => connect$3(host));
 }
 //#endregion
 //#region vanilla/UiCheckbox.js
-var T0$2 = [
+var T0$3 = [
 	"",
 	[],
 	"\n    ",
@@ -10863,12 +10863,12 @@ var T0$2 = [
 	],
 	"\n  "
 ];
-var T1$2 = ["", []];
-var T2$2 = ["", []];
-var P0$2;
-var P1$2;
-var P2$2;
-var S$4 = {
+var T1$3 = ["", []];
+var T2$3 = ["", []];
+var P0$3;
+var P1$3;
+var P2$3;
+var S$5 = {
 	n: ["internalChecked"],
 	t: ["b"],
 	f: import.meta.url,
@@ -10901,7 +10901,7 @@ var S$4 = {
 	] },
 	x: dispatchDeclared
 };
-var D$4 = {
+var D$5 = {
 	g: "ui-checkbox",
 	props: {
 		"checked": {
@@ -10987,7 +10987,7 @@ var D$4 = {
 		}
 	}
 };
-var C$2 = (host) => controller$2(host);
+var C$3 = (host) => controller$3(host);
 function createUiCheckbox(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("label");
@@ -10996,7 +10996,7 @@ function createUiCheckbox(options = {}, html) {
 		element.setAttribute(name, value === true ? "" : String(value));
 	}
 	element.setAttribute("data-component", "ui-checkbox");
-	element.append((P0$2 ??= buildTemplate(T0$2)).cloneNode(true));
+	element.append((P0$3 ??= buildTemplate(T0$3)).cloneNode(true));
 	const v = [
 		false,
 		null,
@@ -11009,12 +11009,12 @@ function createUiCheckbox(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$4, S$4.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$5, S$5.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$2 ??= buildTemplate(T1$2)).cloneNode(true) };
+		return { n: (P1$3 ??= buildTemplate(T1$3)).cloneNode(true) };
 	};
 	const m2 = (d) => {
-		return { n: (P2$2 ??= buildTemplate(T2$2)).cloneNode(true) };
+		return { n: (P2$3 ??= buildTemplate(T2$3)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
 		if (c & 32) {
@@ -11129,10 +11129,10 @@ function createUiCheckbox(options = {}, html) {
 	const I = { B };
 	const J = project(I, children, slots);
 	I.R = /* @__PURE__ */ new Set();
-	attachGeneratedController(element, S$4, v, (c, d) => {
+	attachGeneratedController(element, S$5, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$2, void 0, I);
+	}, C$3, void 0, I);
 	manageProps(I);
 	I.r["input"] = t0;
 	I.r["description"] = t4;
@@ -11174,7 +11174,7 @@ function leaveGroup(document, name, member) {
 	if (!members.size) byName.delete(name);
 	else ensureOpen(members);
 }
-function connect$1(host) {
+function connect$2(host) {
 	const document = host.element.ownerDocument;
 	const [trigger, stopTracking] = trackTrigger(host);
 	host.state.contentId = `ui-disclosure-${++disclosures}`;
@@ -11276,12 +11276,12 @@ function connect$1(host) {
 	};
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller$1(host) {
-	host.on("connect", () => connect$1(host));
+function controller$2(host) {
+	host.on("connect", () => connect$2(host));
 }
 //#endregion
 //#region vanilla/UiDisclosure.js
-var T0$1 = [
+var T0$2 = [
 	"",
 	[],
 	"\n    ",
@@ -11336,8 +11336,8 @@ var T0$1 = [
 	],
 	"\n  "
 ];
-var T1$1 = ["", []];
-var T2$1 = [
+var T1$2 = ["", []];
+var T2$2 = [
 	"",
 	[],
 	0
@@ -11348,12 +11348,12 @@ var T3$1 = [
 	["span", ["class", "chevron"]]
 ];
 var T4$1 = ["", []];
-var P0$1;
-var P1$1;
-var P2$1;
+var P0$2;
+var P1$2;
+var P2$2;
 var P3$1;
 var P4$1;
-var S$3 = {
+var S$4 = {
 	n: [
 		"internalOpen",
 		"contentId",
@@ -11438,7 +11438,7 @@ var S$3 = {
 	},
 	x: dispatchDeclared
 };
-var D$3 = {
+var D$4 = {
 	g: "ui-disclosure",
 	props: {
 		"density": {
@@ -11525,7 +11525,7 @@ var D$3 = {
 		}
 	}
 };
-var C$1 = (host) => controller$1(host);
+var C$2 = (host) => controller$2(host);
 function createUiDisclosure(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("div");
@@ -11534,7 +11534,7 @@ function createUiDisclosure(options = {}, html) {
 		element.setAttribute(name, value === true ? "" : String(value));
 	}
 	element.setAttribute("data-component", "ui-disclosure");
-	element.append((P0$1 ??= buildTemplate(T0$1)).cloneNode(true));
+	element.append((P0$2 ??= buildTemplate(T0$2)).cloneNode(true));
 	const v = [
 		false,
 		"",
@@ -11550,12 +11550,12 @@ function createUiDisclosure(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$3, S$3.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$4, S$4.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1$1 ??= buildTemplate(T1$1)).cloneNode(true) };
+		return { n: (P1$2 ??= buildTemplate(T1$2)).cloneNode(true) };
 	};
 	const m2 = (d) => {
-		const n = (P2$1 ??= buildTemplate(T2$1)).cloneNode(true);
+		const n = (P2$2 ??= buildTemplate(T2$2)).cloneNode(true);
 		const r = {
 			n,
 			a0: n.firstChild,
@@ -11709,10 +11709,10 @@ function createUiDisclosure(options = {}, html) {
 	const I = { B };
 	const J = project(I, children, slots);
 	I.R = /* @__PURE__ */ new Set();
-	attachGeneratedController(element, S$3, v, (c, d) => {
+	attachGeneratedController(element, S$4, v, (c, d) => {
 		((c, d) => p0(R, c, d))(c, d);
 		for (const f of I.R) f(c, d);
-	}, C$1, void 0, I);
+	}, C$2, void 0, I);
 	manageProps(I);
 	I.r["heading"] = t0;
 	I.r["trigger"] = t1;
@@ -11721,7 +11721,7 @@ function createUiDisclosure(options = {}, html) {
 }
 //#endregion
 //#region components/ui-input/ui-input.js
-function connect(host) {
+function connect$1(host) {
 	return host.effect(() => {
 		const value = host.props.value.value;
 		if (value === void 0 || value === null) return;
@@ -11734,18 +11734,18 @@ function connect(host) {
 	});
 }
 /** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-function controller(host) {
-	host.on("connect", () => connect(host));
+function controller$1(host) {
+	host.on("connect", () => connect$1(host));
 }
 //#endregion
 //#region vanilla/UiInput.js
-var S$2 = {
+var S$3 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
 	g: "ui-input"
 };
-var D$2 = {
+var D$3 = {
 	g: "ui-input",
 	props: {
 		"disabled": {
@@ -11941,7 +11941,7 @@ var D$2 = {
 		}
 	}
 };
-var C = (host) => controller(host);
+var C$1 = (host) => controller$1(host);
 function createUiInput(options = {}, html) {
 	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
 	const element = document.createElement("input");
@@ -11959,7 +11959,7 @@ function createUiInput(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$2, S$2.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$3, S$3.n, v, componentProps, [], html);
 	const p0 = (r, c, d) => {
 		if (c & 1073741856) {
 			const x0 = v[5];
@@ -11967,7 +11967,7 @@ function createUiInput(options = {}, html) {
 			if (s0 !== r.v0) writeAttribute(r.n, "type", r.v0 = s0);
 		}
 		if (c & 1073741920) {
-			const x1 = checkSelected(S$2, v[6], v[5], [
+			const x1 = checkSelected(S$3, v[6], v[5], [
 				[
 					"text",
 					"s",
@@ -12090,7 +12090,7 @@ function createUiInput(options = {}, html) {
 		v6: void 0
 	};
 	const I = { B };
-	attachGeneratedController(element, S$2, v, ((c, d) => p0(R, c, d)), C, void 0, I);
+	attachGeneratedController(element, S$3, v, ((c, d) => p0(R, c, d)), C$1, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -12279,13 +12279,13 @@ var expandNodeView = ({ editor, node, getPos }) => {
 };
 //#endregion
 //#region vanilla/UiSeparator.js
-var S$1 = {
+var S$2 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
 	g: "ui-separator"
 };
-var D$1 = {
+var D$2 = {
 	g: "ui-separator",
 	props: {
 		"emphasis": {
@@ -12346,7 +12346,7 @@ function createUiSeparator(options = {}, html) {
 		null,
 		null
 	];
-	const B = acceptProps(element, D$1, S$1.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$2, S$2.n, v, componentProps, [], html);
 	const p0 = (r, c, d) => {
 		if (c & 1073741826) {
 			const x0 = v[1];
@@ -12372,7 +12372,7 @@ function createUiSeparator(options = {}, html) {
 		v1: void 0
 	};
 	const I = { B };
-	attachGeneratedController(element, S$1, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
+	attachGeneratedController(element, S$2, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -12420,7 +12420,7 @@ var dividerNodeView = ({ editor, getPos }) => {
 };
 //#endregion
 //#region vanilla/UiCallout.js
-var T0 = [
+var T0$1 = [
 	"",
 	[],
 	"\n    ",
@@ -12460,7 +12460,7 @@ var T0 = [
 	],
 	"\n  "
 ];
-var T1 = [
+var T1$1 = [
 	"svg",
 	[
 		"viewBox",
@@ -12487,7 +12487,7 @@ var T1 = [
 	["path", ["d", "M12 16v-4"]],
 	["path", ["d", "M12 8h.01"]]
 ];
-var T2 = [
+var T2$1 = [
 	"svg",
 	[
 		"viewBox",
@@ -12626,9 +12626,9 @@ var T8 = [
 	0
 ];
 var T9 = ["", []];
-var P0;
-var P1;
-var P2;
+var P0$1;
+var P1$1;
+var P2$1;
 var P3;
 var P4;
 var P5;
@@ -12636,13 +12636,13 @@ var P6;
 var P7;
 var P8;
 var P9;
-var S = {
+var S$1 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
 	g: "ui-callout"
 };
-var D = {
+var D$1 = {
 	g: "ui-callout",
 	props: {
 		"heading": {
@@ -12687,14 +12687,14 @@ function createUiCallout(options = {}, html) {
 	}
 	if (!element.hasAttribute("role")) element.setAttribute("role", "note");
 	element.setAttribute("data-component", "ui-callout");
-	element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+	element.append((P0$1 ??= buildTemplate(T0$1)).cloneNode(true));
 	const v = [null, null];
-	const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+	const B = acceptProps(element, D$1, S$1.n, v, componentProps, [], html);
 	const m1 = (d) => {
-		return { n: (P1 ??= buildTemplate(T1)).cloneNode(true) };
+		return { n: (P1$1 ??= buildTemplate(T1$1)).cloneNode(true) };
 	};
 	const m2 = (d) => {
-		return { n: (P2 ??= buildTemplate(T2)).cloneNode(true) };
+		return { n: (P2$1 ??= buildTemplate(T2$1)).cloneNode(true) };
 	};
 	const m3 = (d) => {
 		return { n: (P3 ??= buildTemplate(T3)).cloneNode(true) };
@@ -12865,7 +12865,7 @@ function createUiCallout(options = {}, html) {
 	};
 	const I = { B };
 	const J = project(I, children, slots);
-	attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
+	attachGeneratedController(element, S$1, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
 	manageProps(I);
 	return element;
 }
@@ -12904,86 +12904,553 @@ var calloutNodeView = ({ node }) => {
 	};
 };
 //#endregion
-//#region src/vue/editor/image.ts
-/** Projects the shared image's resize intent into a single document transaction.
-* @ownership Delivery decorations belong to the inner image, never the figure;
-* persisted attributes remain independent of host renditions and drag previews.
-* @lifecycle Each atom owns a Vue app and an editability subscription.
+//#region components/ui-image/ui-image.js
+/** Owns transient resize geometry; consumers own persistence and selection.
+* @lifecycle Pointer capture ends on release, Escape, cancellation, or teardown.
+* Only release commits a drag, so consumers can make it one undo operation.
 */
-var imageNodeView = ({ editor, node, getPos, decorations }) => {
-	const mount = document.createElement("div");
-	const current = shallowRef(node);
-	const delivery = shallowRef(decorations);
-	const selected = ref(false);
-	const editable = ref(editor.isEditable);
-	const refresh = () => {
-		editable.value = editor.isEditable;
+function connect(host) {
+	const root = host.element;
+	const frame = host.refs.frame;
+	const document = root.ownerDocument;
+	let drag = null;
+	const image = () => frame.querySelector("img");
+	const enabled = () => host.props.selected.value && host.props.resizable.value;
+	const measure = () => {
+		const media = image();
+		const rect = media.getBoundingClientRect();
+		return {
+			width: rect.width,
+			height: rect.height,
+			ratio: (media.naturalHeight || rect.height || 1) / (media.naturalWidth || rect.width || 1)
+		};
 	};
-	const app = createApp({ render: () => {
-		const attrs = current.value.attrs;
-		const transient = Object.assign({}, ...delivery.value.map((decoration) => decoration.spec.loomaImageAttributes ?? {}));
-		return h(Image, {
-			src: transient.src ?? attrs.src,
-			alt: attrs.alt ?? "",
-			width: attrs.width,
-			height: attrs.height,
-			placement: normalizeImagePlacement(attrs.placement),
-			selected: editable.value && selected.value,
-			resizable: editable.value,
-			contenteditable: "false",
-			"data-looma-image-node": "",
-			onClick: (event) => {
-				if (event.target.closest("button")) return;
-				const position = getPos();
-				if (!editor.isEditable || typeof position !== "number") return;
-				editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, position)));
-				editor.view.focus();
-			},
-			onResize: (event) => {
-				if (event.detail.phase !== "commit" || !editor.isEditable) return;
-				const position = getPos();
-				if (typeof position !== "number" || editor.state.doc.nodeAt(position) !== current.value) return;
-				const { width, height } = event.detail;
-				if (width === current.value.attrs.width && height === current.value.attrs.height) return;
-				editor.view.dispatch(closeHistory(editor.state.tr).setNodeMarkup(position, void 0, {
-					...current.value.attrs,
-					width,
-					height
-				}));
-				editor.view.dispatch(closeHistory(editor.state.tr));
-			}
-		}, { media: () => h("img", {
+	const dimensions = (width, ratio) => {
+		const container = root.parentElement;
+		const style = document.defaultView.getComputedStyle(container);
+		const available = container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+		const gap = parseFloat(document.defaultView.getComputedStyle(root).paddingLeft) + parseFloat(document.defaultView.getComputedStyle(root).paddingRight);
+		const maximum = Math.max(1, available - gap);
+		const next = Math.round(Math.min(maximum, Math.max(Math.min(32, maximum), width)));
+		return {
+			width: next,
+			height: Math.max(1, Math.round(next * ratio))
+		};
+	};
+	const restore = () => {
+		root.removeAttribute("data-resizing");
+		const width = host.props.width.value;
+		if (width > 0) root.style.setProperty("--_ui-image-width", `${width}px`);
+		else root.style.removeProperty("--_ui-image-width");
+	};
+	const dispatch = (size, phase, trigger) => host.dispatch("resize", {
+		...size,
+		phase,
+		trigger
+	});
+	const finish = (phase) => {
+		if (!drag) return;
+		const current = drag;
+		drag = null;
+		document.removeEventListener("keydown", onEscape, true);
+		if (current.handle.hasPointerCapture(current.pointer)) current.handle.releasePointerCapture(current.pointer);
+		if (phase === "commit" && !current.moved) phase = "cancel";
+		restore();
+		dispatch(phase === "commit" ? current.size : {
+			width: Math.round(current.width),
+			height: Math.round(current.height)
+		}, phase, "pointer");
+	};
+	const onDown = (event) => {
+		const handle = event.target.closest("[data-corner]");
+		if (!enabled() || !handle || !root.contains(handle) || event.button !== 0 || drag) return;
+		event.preventDefault();
+		const measured = measure();
+		drag = {
+			...measured,
+			x: event.clientX,
+			y: event.clientY,
+			handle,
+			pointer: event.pointerId,
+			size: dimensions(measured.width, measured.ratio)
+		};
+		handle.setPointerCapture(event.pointerId);
+		document.addEventListener("keydown", onEscape, true);
+		root.setAttribute("data-resizing", "");
+	};
+	const onMove = (event) => {
+		if (!drag || drag.pointer !== event.pointerId) return;
+		const corner = drag.handle.dataset.corner;
+		const dx = (event.clientX - drag.x) * (corner.endsWith("left") ? -1 : 1);
+		const dy = (event.clientY - drag.y) * (corner.startsWith("top") ? -1 : 1);
+		const delta = (dx + drag.ratio * dy) / (1 + drag.ratio * drag.ratio);
+		drag.size = dimensions(drag.width + delta, drag.ratio);
+		drag.moved = drag.size.width !== Math.round(drag.width);
+		root.style.setProperty("--_ui-image-width", `${drag.size.width}px`);
+		dispatch(drag.size, "preview", "pointer");
+	};
+	const onUp = (event) => {
+		if (drag?.pointer === event.pointerId) finish("commit");
+	};
+	const onCancel = (event) => {
+		if (drag?.pointer === event.pointerId) finish("cancel");
+	};
+	const onEscape = (event) => {
+		if (event.key !== "Escape" || !drag) return;
+		event.preventDefault();
+		event.stopPropagation();
+		finish("cancel");
+	};
+	const onKey = (event) => {
+		const handle = event.target.closest?.("[data-corner]");
+		if (!enabled() || !handle || !root.contains(handle) || ![
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(event.key)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const measured = measure();
+		const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+		const amount = ((event.key === "ArrowLeft" || event.key === "ArrowUp") !== (horizontal ? handle.dataset.corner.endsWith("left") : handle.dataset.corner.startsWith("top")) ? -1 : 1) * (event.shiftKey ? 32 : 8);
+		dispatch(dimensions(measured.width + amount / (horizontal ? 1 : measured.ratio), measured.ratio), "commit", "keyboard");
+	};
+	const stop = host.effect(() => {
+		host.props.width.value;
+		host.props.height.value;
+		host.props.placement.value;
+		if (drag) finish("cancel");
+		restore();
+		enabled();
+	});
+	root.addEventListener("pointerdown", onDown);
+	root.addEventListener("pointermove", onMove);
+	root.addEventListener("pointerup", onUp);
+	root.addEventListener("pointercancel", onCancel);
+	root.addEventListener("lostpointercapture", onCancel);
+	root.addEventListener("keydown", onKey);
+	return () => {
+		stop();
+		if (drag) {
+			const active = drag;
+			drag = null;
+			if (active.handle.hasPointerCapture(active.pointer)) active.handle.releasePointerCapture(active.pointer);
+		}
+		root.removeEventListener("pointerdown", onDown);
+		root.removeEventListener("pointermove", onMove);
+		root.removeEventListener("pointerup", onUp);
+		root.removeEventListener("pointercancel", onCancel);
+		root.removeEventListener("lostpointercapture", onCancel);
+		root.removeEventListener("keydown", onKey);
+		document.removeEventListener("keydown", onEscape, true);
+	};
+}
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+function controller(host) {
+	host.on("connect", () => connect(host));
+}
+//#endregion
+//#region vanilla/UiImage.js
+var T0 = [
+	"",
+	[],
+	"\n    ",
+	[
+		"div",
+		["class", "frame"],
+		"\n      ",
+		4,
+		"\n      ",
+		[
+			"div",
+			["class", "handles"],
+			"\n        ",
+			["button", [
+				"type",
+				"button",
+				"class",
+				"handle",
+				"data-corner",
+				"top-left",
+				"aria-label",
+				"Resize image from top left"
+			]],
+			"\n        ",
+			["button", [
+				"type",
+				"button",
+				"class",
+				"handle",
+				"data-corner",
+				"top-right",
+				"aria-label",
+				"Resize image from top right"
+			]],
+			"\n        ",
+			["button", [
+				"type",
+				"button",
+				"class",
+				"handle",
+				"data-corner",
+				"bottom-left",
+				"aria-label",
+				"Resize image from bottom left"
+			]],
+			"\n        ",
+			["button", [
+				"type",
+				"button",
+				"class",
+				"handle",
+				"data-corner",
+				"bottom-right",
+				"aria-label",
+				"Resize image from bottom right"
+			]],
+			"\n      "
+		],
+		"\n      ",
+		4,
+		"\n    "
+	],
+	"\n  "
+];
+var T1 = [
+	"",
+	[],
+	["img", []]
+];
+var T2 = ["", []];
+var P0;
+var P1;
+var P2;
+var S = {
+	n: [],
+	t: [],
+	f: import.meta.url,
+	g: "ui-image",
+	d: { "resize": [
+		detailCheck(checkObject([
+			[
+				"width",
+				checkInteger,
+				false
+			],
+			[
+				"height",
+				checkInteger,
+				false
+			],
+			[
+				"phase",
+				checkConstrained(checkFormat("keyword", keywordFormat), "keyword", { "values": [
+					"preview",
+					"commit",
+					"cancel"
+				] }),
+				false
+			],
+			[
+				"trigger",
+				checkConstrained(checkFormat("keyword", keywordFormat), "keyword", { "values": ["pointer", "keyboard"] }),
+				false
+			]
+		], false)),
+		true,
+		true,
+		false
+	] },
+	x: dispatchDeclared
+};
+var D = {
+	g: "ui-image",
+	props: {
+		"alt": {
+			"required": false,
+			"default": "",
+			c: checkString,
+			t: "string",
+			j: 0,
+			m: "s"
+		},
+		"height": {
+			"required": false,
+			c: checkInteger,
+			t: "integer",
+			j: 0,
+			m: "i"
+		},
+		"placement": {
+			"required": false,
+			"values": [
+				"block",
+				"center",
+				"wrap-left",
+				"wrap-right"
+			],
+			"default": "block",
+			c: checkFormat("keyword", keywordFormat),
+			t: "keyword",
+			j: 0,
+			m: [
+				"p",
+				formatOf(keywordFormat),
+				false
+			]
+		},
+		"resizable": {
+			"required": false,
+			"default": false,
+			c: checkBoolean,
+			t: "boolean",
+			j: 0,
+			m: "b"
+		},
+		"selected": {
+			"required": false,
+			"default": false,
+			c: checkBoolean,
+			t: "boolean",
+			j: 0,
+			m: "b"
+		},
+		"src": {
+			"required": false,
+			"default": "",
+			c: checkString,
+			t: "string",
+			j: 0,
+			m: "s"
+		},
+		"width": {
+			"required": false,
+			c: checkInteger,
+			t: "integer",
+			j: 0,
+			m: "i"
+		}
+	}
+};
+var C = (host) => controller(host);
+function createUiImage(options = {}, html) {
+	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+	const element = document.createElement("figure");
+	for (const [name, value] of Object.entries(attributes)) {
+		if (value === null || value === void 0 || value === false) continue;
+		element.setAttribute(name, value === true ? "" : String(value));
+	}
+	element.setAttribute("data-component", "ui-image");
+	element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+	const v = [
+		null,
+		null,
+		null,
+		null,
+		null,
+		null,
+		null
+	];
+	const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+	const m1 = (d) => {
+		const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
+		const r = {
+			n,
+			a0: n.firstChild,
+			v0: null,
+			v1: null,
+			v2: null,
+			v3: null
+		};
+		p1(r, -1, d);
+		return r;
+	};
+	const p1 = (r, c, d) => {
+		if (c & 32) {
+			const x0 = v[5];
+			const s0 = toAttribute(x0, "src");
+			if (s0 !== r.v0) writeUrlAttribute(r.a0, "src", r.v0 = s0);
+		}
+		if (c & 1) {
+			const x1 = v[0];
+			const s1 = toAttribute(x1, "alt");
+			if (s1 !== r.v1) writeAttribute(r.a0, "alt", r.v1 = s1);
+		}
+		if (c & 64) {
+			const x2 = v[6];
+			const s2 = toAttribute(x2, "width");
+			if (s2 !== r.v2) writeAttribute(r.a0, "width", r.v2 = s2);
+		}
+		if (c & 2) {
+			const x3 = v[1];
+			const s3 = toAttribute(x3, "height");
+			if (s3 !== r.v3) writeAttribute(r.a0, "height", r.v3 = s3);
+		}
+	};
+	const m2 = (d) => {
+		return { n: (P2 ??= buildTemplate(T2)).cloneNode(true) };
+	};
+	const p0 = (r, c, d) => {
+		if (c & 24) {
+			const x0 = !(truthy(v[4]) && truthy(v[3]));
+			const s0 = toAttribute(x0, "hidden");
+			if (s0 !== r.v0) writeAttribute(r.a2, "hidden", r.v0 = s0);
+		}
+		if (c & 20) {
+			const s1 = hostState(["placement", "selected"], [v[2], v[4]]);
+			if (s1 !== r.v1) writeAttribute(r.n, "data-ui-image-state", (r.v1 = s1) === "" ? null : s1);
+		}
+		if (r.f0 === void 0) {
+			r.f0 = 1;
+			const at = fillSlot(r.a1, r.e0, "media", J, true, void 0, d);
+			if (Array.isArray(at)) (r.z ??= []).push(() => {
+				at[0].l.delete(at[1]);
+				dispose(at[1]);
+			});
+			else if (at !== void 0) {
+				r.b0 = m1(d);
+				at.before(r.b0.n);
+			}
+		} else if (r.b0 !== void 0) p1(r.b0, c, d);
+		if (r.f1 === void 0) {
+			r.f1 = 1;
+			const at = fillSlot(r.a3, r.e1, "controls", J, false, void 0, d);
+			if (Array.isArray(at)) (r.z ??= []).push(() => {
+				at[0].l.delete(at[1]);
+				dispose(at[1]);
+			});
+			else if (at !== void 0) {
+				r.b1 = m2(d);
+				at.before(r.b1.n);
+			}
+		} else if (r.b1 !== void 0) r.b1;
+	};
+	const t0 = element.firstChild.nextSibling;
+	const t1 = t0.firstChild.nextSibling;
+	const t2 = t1.nextSibling.nextSibling.nextSibling;
+	const t3 = t2.nextSibling.nextSibling;
+	const R = {
+		n: element,
+		a2: t2,
+		v0: null,
+		v1: void 0,
+		a1: t1,
+		e0: t1.nextSibling,
+		b0: void 0,
+		f0: void 0,
+		a3: t3,
+		e1: t3.nextSibling,
+		b1: void 0,
+		f1: void 0
+	};
+	const I = { B };
+	const J = project(I, children, slots);
+	attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), C, void 0, I);
+	manageProps(I);
+	I.r["frame"] = t0;
+	return element;
+}
+//#endregion
+//#region src/editor/node-views/image.ts
+/** The delivery attributes the editor's decorations lay over the stored ones, such as `srcset`. */
+var deliveryAttributes = (decorations) => Object.assign({}, ...decorations.map((decoration) => decoration.spec.loomaImageAttributes ?? {}));
+/**
+* Projects Image's resize into one document transaction, and draws the stored image with the
+* delivery attributes laid over it.
+* @ownership Delivery attributes belong to the inner `img`, never to Image; the stored attributes
+* stay independent of host renditions and drag previews.
+* @lifecycle Image disconnects once ProseMirror removes it; destroying the view stops following the
+* editor's editability.
+*/
+var imageNodeView = ({ editor, node, getPos, decorations }) => {
+	let current = node;
+	let delivery = deliveryAttributes(decorations);
+	let selected = false;
+	const media = document.createElement("img");
+	let written = /* @__PURE__ */ new Set();
+	const writeMedia = (attrs) => {
+		const next = Object.entries({
 			src: attrs.src,
 			alt: attrs.alt ?? "",
 			title: attrs.title,
 			width: attrs.width,
 			height: attrs.height,
-			...transient
-		}) });
-	} });
-	app.mount(mount);
-	const dom = mount.firstElementChild;
-	editor.on("update", refresh);
+			...delivery
+		}).filter(([, value]) => value !== void 0 && value !== null && value !== false);
+		const names = new Set(next.map(([name]) => name));
+		for (const name of written) if (!names.has(name)) media.removeAttribute(name);
+		for (const [name, value] of next) {
+			const text = value === true ? "" : String(value);
+			if (media.getAttribute(name) !== text) media.setAttribute(name, text);
+		}
+		written = names;
+	};
+	const props = (next) => ({
+		src: delivery.src ?? next.attrs.src,
+		alt: next.attrs.alt ?? "",
+		width: next.attrs.width,
+		height: next.attrs.height,
+		placement: normalizeImagePlacement(next.attrs.placement),
+		selected: editor.isEditable && selected,
+		resizable: editor.isEditable
+	});
+	writeMedia(node.attrs);
+	const image = createUiImage({
+		...props(node),
+		attributes: {
+			contenteditable: "false",
+			"data-looma-image-node": ""
+		},
+		slots: { media: [media] }
+	});
+	const dom = element(image);
+	const render = () => {
+		writeMedia(current.attrs);
+		updateComponentProps(dom, props(current));
+	};
+	dom.addEventListener("click", (event) => {
+		if (event.target.closest("button")) return;
+		const position = getPos();
+		if (!editor.isEditable || typeof position !== "number") return;
+		editor.view.dispatch(editor.state.tr.setSelection(NodeSelection.create(editor.state.doc, position)));
+		editor.view.focus();
+	});
+	image.addEventListener("resize", (event) => {
+		const { width, height, phase } = event.detail;
+		if (event.target !== dom || phase !== "commit" || !editor.isEditable) return;
+		const position = getPos();
+		if (typeof position !== "number" || editor.state.doc.nodeAt(position) !== current) return;
+		if (width === current.attrs.width && height === current.attrs.height) return;
+		editor.view.dispatch(closeHistory(editor.state.tr).setNodeMarkup(position, void 0, {
+			...current.attrs,
+			width,
+			height
+		}));
+		editor.view.dispatch(closeHistory(editor.state.tr));
+	});
+	editor.on("update", render);
 	return {
 		dom,
 		update(next, nextDecorations) {
-			if (next.type !== current.value.type) return false;
-			current.value = next;
-			delivery.value = nextDecorations;
-			refresh();
+			if (next.type !== current.type) return false;
+			current = next;
+			delivery = deliveryAttributes(nextDecorations);
+			render();
 			return true;
 		},
 		selectNode() {
-			selected.value = true;
+			selected = true;
+			render();
 		},
 		deselectNode() {
-			selected.value = false;
+			selected = false;
+			render();
 		},
 		stopEvent: (event) => event.target instanceof Element && Boolean(event.target.closest("[data-corner]")),
 		ignoreMutation: (mutation) => mutation.type !== "selection",
 		destroy() {
-			editor.off("update", refresh);
-			app.unmount();
+			editor.off("update", render);
 		}
 	};
 };