@threadlabs/looma 0.29.7 → 0.29.8

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.8",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/vue/components.css

@@ -10965,4 +10965,59 @@ 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. */
+}
 /*$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, 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 { 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, checkBoolean, checkFormat, formatOf, hostState, keywordFormat, manageProps, toAttribute, 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,45 +3174,143 @@ 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 = {
+	n: [],
+	t: [],
+	f: import.meta.url,
+	g: "ui-separator"
+};
+var D = {
+	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, S.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, 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);
 		}
 	};
 };

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;