@threadlabs/looma 0.29.8 → 0.29.9

package/{vue/editor → editor/node-views}/callout.d.ts

@@ -1,7 +1,7 @@
 import type { NodeViewRenderer } from "@tiptap/core";
 /**
  * Draws an editor callout with Looma's Callout, so it looks the same as a callout in any page.
- * @lifecycle ProseMirror owns the content DOM inside Callout's slot; destroying the view
- * releases its Vue app.
+ * @lifecycle ProseMirror owns the content DOM in Callout's slot and sets the tone and heading as the
+ * node changes. Callout disconnects once ProseMirror removes the view's element.
  */
 export declare const calloutNodeView: NodeViewRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.29.8",
+  "version": "0.29.9",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/components.css

@@ -11020,4 +11020,184 @@ html[data-ui-input-modality="touch"]
 
     /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
 }
+/* Generated by HTML Next 1.0.0-alpha.55. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-callout"] { --html-next-scope-owner: "ui-callout" !important; }
+}
+@scope ([data-component~="ui-callout"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-callout-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-gap {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-icon {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-icon-column {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-leading-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-callout-text {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-callout"]) {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-callout-icon-column: var(--ui-callout-icon-column);
+      --_ui-callout-icon: var(--ui-callout-icon);
+      --_ui-callout-icon-size: var(--ui-callout-icon-size);
+
+      --_callout-surface: var(--ui-info-soft);
+      --_ui-selection-context-surface: light-dark(
+        oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
+        oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
+      );
+      --_ui-selection-context-border: light-dark(
+        oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
+        oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
+      );
+      --_ui-selection-context-text: var(--ui-text-primary);
+
+      --_callout-border: var(--ui-info-solid);
+      --_callout-icon: var(--ui-info-solid);
+
+      display: grid;
+      grid-template-columns: var(--ui-callout-icon-column, 1.125rem) minmax(0, 1fr);
+      gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
+      align-items: start;
+      max-width: 100%;
+      padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
+      padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
+      padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
+      border: var(--ui-callout-border-width, var(--ui-border-width)) solid
+        color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
+      border-inline-start: var(--ui-callout-leading-border-width, var(--ui-callout-border-width, var(--ui-border-width))) solid
+        color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
+      border-radius: var(--ui-radius-md);
+      background: var(--ui-callout-surface, var(--_callout-surface));
+      color: var(--ui-callout-text, var(--ui-text-primary));
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-normal);
+      line-height: var(--ui-line-height-md);
+    }
+
+    /* One line box tall, so the icon centres on the first line of text. */
+    .icon {
+      display: grid;
+      place-items: center;
+      inline-size: var(--_ui-callout-icon-column, 1.125rem);
+      block-size: 1lh;
+      color: var(--_ui-callout-icon, var(--_callout-icon));
+    }
+
+    .icon svg {
+      inline-size: var(--_ui-callout-icon-size, 1.125rem);
+      block-size: var(--_ui-callout-icon-size, 1.125rem);
+    }
+
+    .content {
+      min-inline-size: 0;
+    }
+
+    .heading {
+      display: block;
+      font-weight: var(--ui-font-semibold);
+    }
+
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=neutral"], :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=note"] {
+      --_ui-selection-context-surface: initial;
+      --_ui-selection-context-border: initial;
+      --_ui-selection-context-text: initial;
+      --_callout-surface: var(--ui-surface-muted);
+      --_callout-border: var(--ui-border-strong);
+      --_callout-icon: var(--ui-text-secondary);
+    }
+
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=tip"] {
+      --_callout-surface: var(--ui-success-soft);
+      --_callout-border: var(--ui-success-solid);
+      --_callout-icon: var(--ui-success-solid);
+    }
+
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=important"] {
+      --_callout-surface: var(--ui-accent-soft);
+      --_callout-border: var(--ui-accent-solid);
+      --_callout-icon: var(--ui-accent-solid);
+    }
+
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=warning"] {
+      --_callout-surface: var(--ui-warning-soft);
+      --_callout-border: var(--ui-warning-solid);
+      --_callout-icon: var(--ui-warning-solid);
+    }
+
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=success"] {
+      --_callout-surface: var(--ui-success-soft);
+      --_callout-border: var(--ui-success-solid);
+      --_callout-icon: var(--ui-success-solid);
+    }
+
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=danger"], :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=caution"] {
+      --_callout-surface: var(--ui-danger-soft);
+      --_callout-border: var(--ui-danger-solid);
+      --_callout-icon: var(--ui-danger-solid);
+    }
+
+    /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-callout"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-callout"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* One line box tall, so the icon centres on the first line of text. */
+
+    /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
+    .content :where([data-slotted], [data-slotted] *):is(a) {
+      color: var(--ui-accent-active);
+      text-decoration: underline;
+      text-decoration-thickness: 0.06em;
+      text-underline-offset: 0.18em;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
 /*$vite$:1*/

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 { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeTableOfContentsConfig } from "@threadlabs/looma/editor";
-import { Button, Callout, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, Popover, Stack, StatusMessage, Text, Tooltip } from "@threadlabs/looma/vue";
+import { Button, Card, Checkbox, Cluster, Disclosure, EditorBlockActions, EditorChipEditor, EditorCodeLanguage, EditorImageToolbar, EditorInsertTableGrid, EditorLinkCard, EditorLinkForm, EditorMentionMenu, EditorMentionMenuItem, EditorSlashMenu, EditorSlashMenuGroup, EditorSlashMenuItem, EditorSurface, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, FormField, Icon, IconButton, Image, Input, List, Menu, MenuItem, 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";
@@ -11,7 +11,7 @@ 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 { acceptProps, attachGeneratedController, checkBoolean, checkFormat, formatOf, hostState, keywordFormat, manageProps, toAttribute, writeAttribute } from "@nextwebwg/html-next/generated-runtime";
+import { acceptProps, attachGeneratedController, buildTemplate, checkBoolean, checkFormat, checkString, clearRegion, dispose, fillSlot, formatOf, hostState, keywordFormat, manageProps, project, toAttribute, toText, truthy, writeAttribute } 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. */
@@ -3175,13 +3175,13 @@ var expandNodeView = ({ editor, node, getPos }) => {
 };
 //#endregion
 //#region vanilla/UiSeparator.js
-var S = {
+var S$1 = {
 	n: [],
 	t: [],
 	f: import.meta.url,
 	g: "ui-separator"
 };
-var D = {
+var D$1 = {
 	g: "ui-separator",
 	props: {
 		"emphasis": {
@@ -3242,7 +3242,7 @@ function createUiSeparator(options = {}, html) {
 		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 p0 = (r, c, d) => {
 		if (c & 1073741826) {
 			const x0 = v[1];
@@ -3268,7 +3268,7 @@ function createUiSeparator(options = {}, html) {
 		v1: void 0
 	};
 	const I = { B };
-	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;
 }
@@ -3315,39 +3315,488 @@ var dividerNodeView = ({ editor, getPos }) => {
 	};
 };
 //#endregion
-//#region src/vue/editor/callout.ts
+//#region vanilla/UiCallout.js
+var T0 = [
+	"",
+	[],
+	"\n    ",
+	[
+		"span",
+		[
+			"class",
+			"icon",
+			"aria-hidden",
+			"true"
+		],
+		"\n      ",
+		1,
+		"\n      ",
+		1,
+		"\n      ",
+		1,
+		"\n      ",
+		1,
+		"\n      ",
+		1,
+		"\n      ",
+		1,
+		"\n      ",
+		1,
+		"\n    "
+	],
+	"\n    ",
+	[
+		"div",
+		["class", "content"],
+		"\n      ",
+		1,
+		"\n      ",
+		4,
+		"\n    "
+	],
+	"\n  "
+];
+var T1 = [
+	"svg",
+	[
+		"viewBox",
+		"0 0 24 24",
+		"fill",
+		"none",
+		"stroke",
+		"currentColor",
+		"stroke-width",
+		"2",
+		"stroke-linecap",
+		"round",
+		"stroke-linejoin",
+		"round"
+	],
+	["circle", [
+		"cx",
+		"12",
+		"cy",
+		"12",
+		"r",
+		"10"
+	]],
+	["path", ["d", "M12 16v-4"]],
+	["path", ["d", "M12 8h.01"]]
+];
+var T2 = [
+	"svg",
+	[
+		"viewBox",
+		"0 0 24 24",
+		"fill",
+		"none",
+		"stroke",
+		"currentColor",
+		"stroke-width",
+		"2",
+		"stroke-linecap",
+		"round",
+		"stroke-linejoin",
+		"round"
+	],
+	["path", ["d", "M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"]],
+	["path", ["d", "M13 2v7h7"]],
+	["path", ["d", "m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"]]
+];
+var T3 = [
+	"svg",
+	[
+		"viewBox",
+		"0 0 24 24",
+		"fill",
+		"none",
+		"stroke",
+		"currentColor",
+		"stroke-width",
+		"2",
+		"stroke-linecap",
+		"round",
+		"stroke-linejoin",
+		"round"
+	],
+	["path", ["d", "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"]],
+	["path", ["d", "M9 18h6"]],
+	["path", ["d", "M10 22h4"]]
+];
+var T4 = [
+	"svg",
+	[
+		"viewBox",
+		"0 0 24 24",
+		"fill",
+		"none",
+		"stroke",
+		"currentColor",
+		"stroke-width",
+		"2",
+		"stroke-linecap",
+		"round",
+		"stroke-linejoin",
+		"round"
+	],
+	["path", ["d", "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"]],
+	["path", ["d", "M12 15h.01"]],
+	["path", ["d", "M12 7v4"]]
+];
+var T5 = [
+	"svg",
+	[
+		"viewBox",
+		"0 0 24 24",
+		"fill",
+		"none",
+		"stroke",
+		"currentColor",
+		"stroke-width",
+		"2",
+		"stroke-linecap",
+		"round",
+		"stroke-linejoin",
+		"round"
+	],
+	["path", ["d", "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"]],
+	["path", ["d", "M12 9v4"]],
+	["path", ["d", "M12 17h.01"]]
+];
+var T6 = [
+	"svg",
+	[
+		"viewBox",
+		"0 0 24 24",
+		"fill",
+		"none",
+		"stroke",
+		"currentColor",
+		"stroke-width",
+		"2",
+		"stroke-linecap",
+		"round",
+		"stroke-linejoin",
+		"round"
+	],
+	["circle", [
+		"cx",
+		"12",
+		"cy",
+		"12",
+		"r",
+		"10"
+	]],
+	["path", ["d", "m9 12 2 2 4-4"]]
+];
+var T7 = [
+	"svg",
+	[
+		"viewBox",
+		"0 0 24 24",
+		"fill",
+		"none",
+		"stroke",
+		"currentColor",
+		"stroke-width",
+		"2",
+		"stroke-linecap",
+		"round",
+		"stroke-linejoin",
+		"round"
+	],
+	["circle", [
+		"cx",
+		"12",
+		"cy",
+		"12",
+		"r",
+		"10"
+	]],
+	["path", ["d", "m15 9-6 6"]],
+	["path", ["d", "m9 9 6 6"]]
+];
+var T8 = [
+	"strong",
+	["class", "heading"],
+	0
+];
+var T9 = ["", []];
+var P0;
+var P1;
+var P2;
+var P3;
+var P4;
+var P5;
+var P6;
+var P7;
+var P8;
+var P9;
+var S = {
+	n: [],
+	t: [],
+	f: import.meta.url,
+	g: "ui-callout"
+};
+var D = {
+	g: "ui-callout",
+	props: {
+		"heading": {
+			"required": false,
+			"default": "",
+			c: checkString,
+			t: "string",
+			j: 0,
+			m: "s"
+		},
+		"tone": {
+			"required": false,
+			"values": [
+				"info",
+				"neutral",
+				"note",
+				"tip",
+				"important",
+				"warning",
+				"caution",
+				"success",
+				"danger"
+			],
+			"default": "info",
+			c: checkFormat("keyword", keywordFormat),
+			t: "keyword",
+			j: 0,
+			m: [
+				"p",
+				formatOf(keywordFormat),
+				false
+			]
+		}
+	}
+};
+function createUiCallout(options = {}, html) {
+	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+	const element = document.createElement("div");
+	for (const [name, value] of Object.entries(attributes)) {
+		if (value === null || value === void 0 || value === false) continue;
+		element.setAttribute(name, value === true ? "" : String(value));
+	}
+	if (!element.hasAttribute("role")) element.setAttribute("role", "note");
+	element.setAttribute("data-component", "ui-callout");
+	element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+	const v = [null, null];
+	const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+	const m1 = (d) => {
+		return { n: (P1 ??= buildTemplate(T1)).cloneNode(true) };
+	};
+	const m2 = (d) => {
+		return { n: (P2 ??= buildTemplate(T2)).cloneNode(true) };
+	};
+	const m3 = (d) => {
+		return { n: (P3 ??= buildTemplate(T3)).cloneNode(true) };
+	};
+	const m4 = (d) => {
+		return { n: (P4 ??= buildTemplate(T4)).cloneNode(true) };
+	};
+	const m5 = (d) => {
+		return { n: (P5 ??= buildTemplate(T5)).cloneNode(true) };
+	};
+	const m6 = (d) => {
+		return { n: (P6 ??= buildTemplate(T6)).cloneNode(true) };
+	};
+	const m7 = (d) => {
+		return { n: (P7 ??= buildTemplate(T7)).cloneNode(true) };
+	};
+	const m8 = (d) => {
+		const n = (P8 ??= buildTemplate(T8)).cloneNode(true);
+		const r = {
+			n,
+			a0: n.firstChild,
+			v0: ""
+		};
+		p8(r, -1, d);
+		return r;
+	};
+	const p8 = (r, c, d) => {
+		if (c & 1) {
+			const x0 = v[0];
+			const s0 = toText(x0);
+			if (s0 !== r.v0) r.a0.data = r.v0 = s0;
+		}
+	};
+	const m9 = (d) => {
+		return { n: (P9 ??= buildTemplate(T9)).cloneNode(true) };
+	};
+	const p0 = (r, c, d) => {
+		if (c & 2) {
+			const s0 = hostState(["tone"], [v[1]]);
+			if (s0 !== r.v0) writeAttribute(r.n, "data-ui-callout-state", (r.v0 = s0) === "" ? null : s0);
+		}
+		if (c & 2 && !(v[1] === "info") !== !r.b0) {
+			if (r.b0) {
+				r.b0 = void 0;
+				clearRegion(r.a0, r.e0);
+			} else {
+				r.b0 = m1(d);
+				r.e0.before(r.b0.n);
+			}
+		} else if (r.b0 !== void 0) r.b0;
+		if (c & 2 && !(v[1] === "neutral" || v[1] === "note") !== !r.b1) {
+			if (r.b1) {
+				r.b1 = void 0;
+				clearRegion(r.a1, r.e1);
+			} else {
+				r.b1 = m2(d);
+				r.e1.before(r.b1.n);
+			}
+		} else if (r.b1 !== void 0) r.b1;
+		if (c & 2 && !(v[1] === "tip") !== !r.b2) {
+			if (r.b2) {
+				r.b2 = void 0;
+				clearRegion(r.a2, r.e2);
+			} else {
+				r.b2 = m3(d);
+				r.e2.before(r.b2.n);
+			}
+		} else if (r.b2 !== void 0) r.b2;
+		if (c & 2 && !(v[1] === "important") !== !r.b3) {
+			if (r.b3) {
+				r.b3 = void 0;
+				clearRegion(r.a3, r.e3);
+			} else {
+				r.b3 = m4(d);
+				r.e3.before(r.b3.n);
+			}
+		} else if (r.b3 !== void 0) r.b3;
+		if (c & 2 && !(v[1] === "warning") !== !r.b4) {
+			if (r.b4) {
+				r.b4 = void 0;
+				clearRegion(r.a4, r.e4);
+			} else {
+				r.b4 = m5(d);
+				r.e4.before(r.b4.n);
+			}
+		} else if (r.b4 !== void 0) r.b4;
+		if (c & 2 && !(v[1] === "success") !== !r.b5) {
+			if (r.b5) {
+				r.b5 = void 0;
+				clearRegion(r.a5, r.e5);
+			} else {
+				r.b5 = m6(d);
+				r.e5.before(r.b5.n);
+			}
+		} else if (r.b5 !== void 0) r.b5;
+		if (c & 2 && !(v[1] === "danger" || v[1] === "caution") !== !r.b6) {
+			if (r.b6) {
+				r.b6 = void 0;
+				clearRegion(r.a6, r.e6);
+			} else {
+				r.b6 = m7(d);
+				r.e6.before(r.b6.n);
+			}
+		} else if (r.b6 !== void 0) r.b6;
+		if (c & 1 && !truthy(v[0]) !== !r.b7) {
+			if (r.b7) {
+				r.b7 = void 0;
+				clearRegion(r.a7, r.e7);
+			} else {
+				r.b7 = m8(d);
+				r.e7.before(r.b7.n);
+			}
+		} else if (r.b7 !== void 0) p8(r.b7, c, d);
+		if (r.f8 === void 0) {
+			r.f8 = 1;
+			const at = fillSlot(r.a8, r.e8, "", 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.b8 = m9(d);
+				at.before(r.b8.n);
+			}
+		} else if (r.b8 !== void 0) r.b8;
+	};
+	const t0 = element.firstChild.nextSibling;
+	const t1 = t0.firstChild.nextSibling;
+	const t2 = t1.nextSibling.nextSibling.nextSibling;
+	const t3 = t2.nextSibling.nextSibling.nextSibling;
+	const t4 = t3.nextSibling.nextSibling.nextSibling;
+	const t5 = t4.nextSibling.nextSibling.nextSibling;
+	const t6 = t5.nextSibling.nextSibling.nextSibling;
+	const t7 = t6.nextSibling.nextSibling.nextSibling;
+	const t9 = t0.nextSibling.nextSibling.firstChild.nextSibling;
+	const t10 = t9.nextSibling.nextSibling.nextSibling;
+	const R = {
+		n: element,
+		v0: void 0,
+		a0: t1,
+		e0: t1.nextSibling,
+		b0: void 0,
+		a1: t2,
+		e1: t2.nextSibling,
+		b1: void 0,
+		a2: t3,
+		e2: t3.nextSibling,
+		b2: void 0,
+		a3: t4,
+		e3: t4.nextSibling,
+		b3: void 0,
+		a4: t5,
+		e4: t5.nextSibling,
+		b4: void 0,
+		a5: t6,
+		e5: t6.nextSibling,
+		b5: void 0,
+		a6: t7,
+		e6: t7.nextSibling,
+		b6: void 0,
+		a7: t9,
+		e7: t9.nextSibling,
+		b7: void 0,
+		a8: t10,
+		e8: t10.nextSibling,
+		b8: void 0,
+		f8: void 0
+	};
+	const I = { B };
+	const J = project(I, children, slots);
+	attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
+	manageProps(I);
+	return element;
+}
+//#endregion
+//#region src/editor/node-views/callout.ts
+var calloutProps = (node) => ({
+	tone: node.attrs.tone,
+	heading: node.attrs.heading || void 0
+});
 /**
 * Draws an editor callout with Looma's Callout, so it looks the same as a callout in any page.
-* @lifecycle ProseMirror owns the content DOM inside Callout's slot; destroying the view
-* releases its Vue app.
+* @lifecycle ProseMirror owns the content DOM in Callout's slot and sets the tone and heading as the
+* node changes. Callout disconnects once ProseMirror removes the view's element.
 */
 var calloutNodeView = ({ node }) => {
 	const dom = document.createElement("div");
 	dom.dataset.loomaCallout = "";
-	const current = shallowRef(node);
-	let contentDOM;
-	const app = createApp({ render: () => h(Callout, {
-		tone: current.value.attrs.tone,
-		heading: current.value.attrs.heading || void 0
-	}, () => h("div", {
-		"data-looma-callout-body": "",
-		ref: (element) => {
-			if (element) contentDOM = element;
-		}
-	})) });
-	app.mount(dom);
+	const contentDOM = document.createElement("div");
+	contentDOM.dataset.loomaCalloutBody = "";
+	const callout = createUiCallout({
+		...calloutProps(node),
+		children: [contentDOM]
+	});
+	dom.append(callout);
+	let current = node;
 	return {
 		dom,
 		contentDOM,
 		update(next) {
-			if (next.type !== current.value.type) return false;
-			current.value = next;
+			if (next.type !== current.type) return false;
+			current = next;
+			updateComponentProps(callout, calloutProps(next));
 			return true;
 		},
-		ignoreMutation: (mutation) => mutation.type !== "selection" && !contentDOM.contains(mutation.target),
-		destroy() {
-			app.unmount();
-		}
+		ignoreMutation: (mutation) => mutation.type !== "selection" && !contentDOM.contains(mutation.target)
 	};
 };
 //#endregion