@threadlabs/looma 0.29.7 → 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/editor/node-views/divider.d.ts

@@ -0,0 +1,8 @@
+import type { NodeViewRenderer } from "@tiptap/core";
+/**
+ * A pointer-sized document divider drawn by Separator, selectable while the editor is editable.
+ * @lifecycle The editor owns the node and its deletion. Separator connects while ProseMirror keeps its
+ * element in the document and disconnects once ProseMirror removes it; destroying the view stops
+ * following the editor's editability.
+ */
+export declare const dividerNodeView: NodeViewRenderer;

package/package.json

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

package/vue/components.css

@@ -10965,4 +10965,239 @@ html[data-ui-input-modality="touch"]
   width: 3px;
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
 }
+/* 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-separator"] { --html-next-scope-owner: "ui-separator" !important; }
+}
+@scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-separator-color {
+      syntax: "*";
+      inherits: false;
+    }
+
+    /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
+    :scope:where([data-component~="ui-separator"]) {
+      box-sizing: border-box;
+      align-self: stretch;
+      margin: 0;
+      border: 0;
+      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+    }
+
+    :scope:where([data-component~="ui-separator"])[data-ui-separator-state~="emphasis=strong"] {
+      --_separator-color: var(--ui-border-strong);
+    }
+
+    :scope:where([data-component~="ui-separator"])[aria-orientation="vertical"] {
+      block-size: auto;
+      border-block-start: 0;
+      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+    }
+
+    :scope:where([data-component~="ui-separator"])[data-ui-separator-state~="selectable"] {
+      min-block-size: var(--ui-control-size-sm);
+      border: 0;
+      background: linear-gradient(var(--ui-separator-color, var(--ui-border-divider)), var(--ui-separator-color, var(--ui-border-divider))) center / 100%
+        var(--ui-border-width) no-repeat;
+      cursor: pointer;
+    }
+    :scope:where([data-component~="ui-separator"])[data-ui-separator-state~="selectable"]:hover {
+      background-color: var(--ui-surface-hover);
+    }
+    :scope:where([data-component~="ui-separator"])[data-ui-separator-state~="selected"] {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
+      border-radius: var(--ui-radius-sm);
+    }
+}
+@scope ([data-component~="ui-separator"]) to ([data-component]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* 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,15 +1,17 @@
 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, Separator, 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";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { createLowlight } from "lowlight";
+import { RequestEvent, updateComponentProps } 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 { 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. */
@@ -1224,179 +1226,6 @@ function createImageUploads(options) {
 	};
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@nextwebwg+html-next@1.0.0-alpha.55/node_modules/@nextwebwg/html-next/dist/requests.js
-/**
-* Requests: behavior a component asks its consumer for, answered through a native event's
-* `respondWith` (https://nextwebwg.org/declarative-components/javascript#requests).
-*
-* Every HTML Next bundle on a page (the live runtime, compiled modules and framework helpers) keeps
-* its requests in one record on the document, so any consumer answers any component, and one
-* document listener relays late responders. Converted framework components carry this module's
-* source (scripts/generate-literal-source.ts), so it imports nothing.
-*/
-var ports = /* @__PURE__ */ new WeakMap();
-var port = (event) => {
-	let found = ports.get(event);
-	if (found === void 0) ports.set(event, found = {});
-	return found;
-};
-/**
-* A request as its responders receive it: the nearest one answers with `respondWith`. Its static
-* `respond`, `request` and `hasResponder` are how code without a `host` takes part
-* (https://nextwebwg.org/declarative-components/javascript#outside-a-controller). They never read
-* `this`, so `const { respond, request, hasResponder } = RequestEvent` works.
-*/
-var RequestEvent = class extends CustomEvent {
-	/** Aborts when the asker no longer needs the answer, or its component disconnects. */
-	signal;
-	constructor(type, init) {
-		super(type, init);
-		this.signal = init.signal;
-	}
-	/** Answer the request with a value or a promise of one; the event stops propagating. */
-	respondWith(answer) {
-		const recorded = port(this);
-		if (this.eventPhase === 0 || recorded.a !== void 0) throw new DOMException(recorded.a === void 0 ? "A request is answered while it is dispatched." : "The request already has an answer.", "InvalidStateError");
-		recorded.a = [answer];
-		this.stopImmediatePropagation();
-	}
-	/** Report progress to the asker while the request is pending. */
-	progress(loaded, total) {
-		const report = this.signal.aborted ? void 0 : ports.get(this)?.p;
-		try {
-			report?.(loaded, total);
-		} catch (error) {
-			reportError(error);
-		}
-	}
-	/**
-	* Answers `name` requests that reach `target` with `answer`, records it as a known responder, then
-	* announces it so a component whose request went unanswered can ask again. Returns a function that
-	* removes it.
-	*/
-	static respond(target, name, answer) {
-		const listener = (event) => {
-			if ("respondWith" in event) answerRequest(event, answer);
-		};
-		target.addEventListener(name, listener);
-		const forget = knownResponder(target, name);
-		target.dispatchEvent(new CustomEvent("responder", {
-			bubbles: true,
-			detail: { name }
-		}));
-		return () => {
-			target.removeEventListener(name, listener);
-			forget();
-		};
-	}
-	/**
-	* Asks `name` at `target` with the request steps `host.request` uses, with no declaration to check
-	* the detail or the answer against, no connection signal, and nothing remembered for late responders.
-	*/
-	static request(target, name, detail, options) {
-		return dispatchRequest(target, target.nodeType ? target : null, name, detail ?? null, options?.signal ?? new AbortController().signal, options?.progress);
-	}
-	/** Whether a known responder for `name` is on the path a request from `target` takes, now. */
-	static hasResponder(target, name) {
-		return knownCount(target, name) > 0;
-	}
-};
-/** Answers a request event with a responder function, as `RequestEvent.respond` and framework function props do. */
-function answerRequest(event, responder) {
-	const request = event;
-	request.respondWith(responder(request.detail, {
-		signal: request.signal,
-		progress: (loaded, total) => request.progress(loaded, total)
-	}));
-}
-var runtimeKey = Symbol.for("@nextwebwg/html-next.runtime.v1");
-var documentRecord = (document) => document[runtimeKey] ??= {};
-/** A target's document: a node's owner, a window's document, or a target outside the DOM itself. */
-var recordOf = (target) => documentRecord(target.nodeType === 9 ? target : target.ownerDocument ?? target.document ?? target);
-var requestState = (record) => record.requests ??= { g: /* @__PURE__ */ new WeakMap() };
-/**
-* Records a responder for `name` on `target` that `hasResponder` can see, until the returned function
-* runs. `own` counts the entries a controller's `host.on` adds on its own root, which its own
-* `host.hasResponder` does not count.
-*/
-function knownResponder(target, name, own) {
-	const record = recordOf(target);
-	const known = record.k ??= /* @__PURE__ */ new WeakMap();
-	const names = known.get(target) ?? known.set(target, []).get(target);
-	const change = (add) => {
-		for (const list of own === void 0 ? [names] : [names, own]) if (add) list.push(name);
-		else list.splice(list.indexOf(name), 1);
-		record.w?.forEach((changed) => changed(name));
-	};
-	change(true);
-	let held = true;
-	return () => {
-		if (held) {
-			held = false;
-			change(false);
-		}
-	};
-}
-/** The next object on a composed event's path: an assigned slot, a parent, a shadow host, the window. */
-var parentOf = (node) => node.nodeType === 9 ? node.defaultView : node.nodeType === 11 ? node.host : node.nodeType ? node.assignedSlot ?? node.parentNode : null;
-/** How many of `names` are `name`. */
-var countOf = (names, name) => names?.filter((known) => known === name).length ?? 0;
-/** How many known responders for `name` are on the path a request from `target` takes. */
-function knownCount(target, name) {
-	const known = recordOf(target).k;
-	let count = 0;
-	if (known !== void 0) for (let node = target; node; node = parentOf(node)) count += countOf(known.get(node), name);
-	return count;
-}
-/** Settles with `value`, or rejects with the signal's reason when it aborts first; a late value is discarded. */
-function settle(value, signal) {
-	return new Promise((resolve, reject) => {
-		const abort = () => reject(signal.reason);
-		if (signal.aborted) abort();
-		signal.addEventListener("abort", abort, { once: true });
-		Promise.resolve(value).then((result) => {
-			signal.removeEventListener("abort", abort);
-			resolve(result);
-		}, (error) => {
-			signal.removeEventListener("abort", abort);
-			reject(error);
-		});
-	});
-}
-/**
-* The request steps every asker shares: wait for the controllers of components at `from` and around
-* it, dispatch the `RequestEvent` at `target`, and settle with the answer, or `null` when nobody
-* answered. `answered` hears, during the dispatch, whether anyone did.
-*/
-async function dispatchRequest(target, from, name, detail, signal, progress, answered) {
-	signal.throwIfAborted();
-	const state = requestState(recordOf(target));
-	for (;;) {
-		const waits = [];
-		for (let node = from; node !== null; node = node.parentNode ?? node.host ?? null) {
-			const gate = state.g.get(node);
-			if (gate !== void 0) waits.push(gate);
-		}
-		if (waits.length === 0) break;
-		await settle(Promise.all(waits), signal);
-	}
-	const event = new RequestEvent(name, {
-		detail,
-		signal,
-		bubbles: true,
-		composed: true
-	});
-	const recorded = port(event);
-	recorded.p = progress;
-	target.dispatchEvent(event);
-	answered?.(recorded.a !== void 0);
-	try {
-		return recorded.a === void 0 ? null : await settle(recorded.a[0], signal);
-	} finally {
-		recorded.p = void 0;
-	}
-}
-//#endregion
 //#region src/editor/requests.ts
 /** Answers a request event with a responder function, as an HTML Next framework function prop does. */
 function respondWithFunction(event, responder) {
@@ -3345,82 +3174,629 @@ var expandNodeView = ({ editor, node, getPos }) => {
 	};
 };
 //#endregion
-//#region src/vue/editor/divider.ts
-/** A pointer-sized document divider using the shared separator's selected state.
-* @lifecycle The editor owns the node and deletion; destroying the view releases
-* its Vue app and editability subscription.
+//#region vanilla/UiSeparator.js
+var S$1 = {
+	n: [],
+	t: [],
+	f: import.meta.url,
+	g: "ui-separator"
+};
+var D$1 = {
+	g: "ui-separator",
+	props: {
+		"emphasis": {
+			"required": false,
+			"values": ["normal", "strong"],
+			"default": "normal",
+			c: checkFormat("keyword", keywordFormat),
+			t: "keyword",
+			j: 0,
+			m: [
+				"p",
+				formatOf(keywordFormat),
+				false
+			]
+		},
+		"orientation": {
+			"required": false,
+			"values": ["horizontal", "vertical"],
+			"default": "horizontal",
+			c: checkFormat("keyword", keywordFormat),
+			t: "keyword",
+			j: 0,
+			m: [
+				"p",
+				formatOf(keywordFormat),
+				false
+			]
+		},
+		"selectable": {
+			"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"
+		}
+	}
+};
+function createUiSeparator(options = {}, html) {
+	const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+	const element = document.createElement("hr");
+	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-separator");
+	const v = [
+		null,
+		null,
+		null,
+		null
+	];
+	const B = acceptProps(element, D$1, S$1.n, v, componentProps, [], html);
+	const p0 = (r, c, d) => {
+		if (c & 1073741826) {
+			const x0 = v[1];
+			const s0 = toAttribute(x0, "aria-orientation");
+			if (s0 !== r.v0) writeAttribute(r.n, "aria-orientation", r.v0 = s0);
+		}
+		if (c & 13) {
+			const s1 = hostState([
+				"emphasis",
+				"selectable",
+				"selected"
+			], [
+				v[0],
+				v[2],
+				v[3]
+			]);
+			if (s1 !== r.v1) writeAttribute(r.n, "data-ui-separator-state", (r.v1 = s1) === "" ? null : s1);
+		}
+	};
+	const R = {
+		n: element,
+		v0: void 0,
+		v1: void 0
+	};
+	const I = { B };
+	attachGeneratedController(element, S$1, v, ((c, d) => p0(R, c, d)), void 0, void 0, I);
+	manageProps(I);
+	return element;
+}
+//#endregion
+//#region src/editor/node-views/divider.ts
+/**
+* A pointer-sized document divider drawn by Separator, selectable while the editor is editable.
+* @lifecycle The editor owns the node and its deletion. Separator connects while ProseMirror keeps its
+* element in the document and disconnects once ProseMirror removes it; destroying the view stops
+* following the editor's editability.
 */
 var dividerNodeView = ({ editor, getPos }) => {
-	const mount = document.createElement("div");
-	const selected = ref(false);
-	const editable = ref(editor.isEditable);
-	const refresh = () => {
-		editable.value = editor.isEditable;
-	};
-	const app = createApp({ render: () => h(Separator, {
-		selectable: editable.value,
-		selected: editable.value && selected.value,
-		contenteditable: "false",
-		onClick: () => {
-			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();
-		}
-	}) });
-	app.mount(mount);
-	const dom = mount.firstElementChild;
-	editor.on("update", refresh);
+	let selected = false;
+	const dom = createUiSeparator({
+		selectable: editor.isEditable,
+		attributes: { contenteditable: "false" }
+	});
+	const render = () => updateComponentProps(dom, {
+		selectable: editor.isEditable,
+		selected: editor.isEditable && selected
+	});
+	dom.addEventListener("click", () => {
+		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();
+	});
+	editor.on("update", render);
 	return {
 		dom,
 		selectNode() {
-			selected.value = true;
+			selected = true;
+			render();
 		},
 		deselectNode() {
-			selected.value = false;
+			selected = false;
+			render();
 		},
 		stopEvent: () => false,
 		ignoreMutation: (mutation) => mutation.type !== "selection",
 		destroy() {
-			editor.off("update", refresh);
-			app.unmount();
+			editor.off("update", render);
 		}
 	};
 };
 //#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

package/vue/editor/divider.d.ts

@@ -1,6 +0,0 @@
-import type { NodeViewRenderer } from "@tiptap/core";
-/** A pointer-sized document divider using the shared separator's selected state.
- * @lifecycle The editor owns the node and deletion; destroying the view releases
- * its Vue app and editability subscription.
- */
-export declare const dividerNodeView: NodeViewRenderer;