@threadlabs/looma 0.29.6 → 0.29.8

package/editor/code-language-picker.d.ts

@@ -0,0 +1,29 @@
+import type { Editor } from "@tiptap/core";
+/** The code block the selection lies in: its position, saved language (`auto` when none), text, and element. */
+export interface LoomaCodeBlockAtSelection {
+    readonly pos: number;
+    readonly language: string;
+    readonly text: string;
+    readonly element: HTMLElement;
+}
+/** The code block holding the whole selection, or null when the selection is elsewhere or spans blocks. */
+export declare function codeBlockAtSelection(editor: Editor): LoomaCodeBlockAtSelection | null;
+/**
+ * The picker's choices: Auto, naming the detected language when there is one; a saved language the
+ * catalog lacks, marked unavailable, so it stays selected; then every catalog language.
+ */
+export declare function codeLanguageChoices(language: string, detected: string | null, names: readonly string[]): Array<{
+    value: string;
+    label: string;
+}>;
+/** Centers the picker over the code block, above it when there is room and below it otherwise. */
+export declare function codeLanguagePickerPlacement(block: DOMRect): {
+    top: string;
+    left: string;
+    transform: string;
+};
+/**
+ * Saves `value` as the language of the code block at `pos`, as its own undo step; `auto` clears it.
+ * @failure Returns false, and changes nothing, for a language outside `names` or no code block at `pos`.
+ */
+export declare function setCodeBlockLanguage(editor: Editor, pos: number, value: string, names: readonly string[]): boolean;

package/editor/extensions/table-commands.d.ts

@@ -53,6 +53,7 @@ export interface ActiveTableUiState {
     headerColumn: boolean;
     capabilities: TableActionCapabilities;
 }
+export declare const NO_TABLE_CAPABILITIES: TableActionCapabilities;
 /**
  * Text formatting belongs to actual text selections, not table CellSelections.
  *

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/editor/table-ui.d.ts

@@ -0,0 +1,35 @@
+import { type ActiveTableUiState, type TableActionCapabilities } from "./extensions/table-commands.js";
+import type { TableCellAlignment, TableCellBackground } from "./extensions/table-formatting.js";
+/** What the table's controls show: the toolbar and overlay, and the selected cells' formatting and actions. */
+export interface LoomaTableControls {
+    readonly toolbarOpen: boolean;
+    readonly overlayOpen: boolean;
+    readonly alignment: TableCellAlignment;
+    readonly background: TableCellBackground;
+    readonly headerRow: boolean;
+    readonly headerColumn: boolean;
+    readonly capabilities: TableActionCapabilities;
+}
+export declare const LOOMA_TABLE_CONTROLS_CLOSED: LoomaTableControls;
+/**
+ * The controls for the table shown: its overlay on wider screens, and the toolbar and the selection's
+ * formatting only while the selection is in that table. A table that is only hovered shows its overlay
+ * with nothing selected; narrow screens use the editing dock instead of the toolbar and overlay.
+ */
+export declare function tableControls(state: ActiveTableUiState, selectionInTable: boolean, narrow: boolean): LoomaTableControls;
+/**
+ * Centers the table toolbar on the table, at most 420px wide and 12px inside the viewport's sides,
+ * above the table when there is room and below it otherwise.
+ */
+export declare function tableToolbarPlacement(table: DOMRect, viewportWidth: number): {
+    top: string;
+    left: string;
+    maxWidth: string;
+};
+/** The overlay covers the table exactly. */
+export declare const tableOverlayPlacement: (table: DOMRect) => {
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.29.6",
+  "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/LoomaEditor.d.ts

@@ -384,6 +384,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     linkBaseUrl: string;
     disableHighlight: boolean;
     codeLanguages: Readonly<Record<string, import("highlight.js").LanguageFn>> | null;
+    toolbarOpen: boolean;
     modelValue: JSONContent;
     slashCommands: LoomaEditorSlashCommands | undefined;
     mentionQuery: LoomaMentionQuery | undefined;
@@ -401,5 +402,4 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     selectionActions: LoomaEditorSelectionAction[];
     rangeActions: LoomaEditorRangeAction[];
     toolbarTriggerId: string;
-    toolbarOpen: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/editor/compact/index.js

@@ -1,8 +1,8 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 import { Extension, Mark, Node, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
 import { Editor as Editor$1, EditorContent } from "@tiptap/vue-3";
-import { closeHistory, history, redo, undo } from "@tiptap/pm/history";
 import { Plugin } from "@tiptap/pm/state";
+import { closeHistory, history, redo, undo } from "@tiptap/pm/history";
 //#region ../../node_modules/.pnpm/@tiptap+extension-document@2.27.2_@tiptap+core@2.27.2_@tiptap+pm@2.27.2_/node_modules/@tiptap/extension-document/dist/index.js
 /**
 * The default document node which represents the top level node of the editor.

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 { closeHistory } from "@tiptap/pm/history";
 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) {
@@ -1562,6 +1391,23 @@ function selectedTableCellElement(editor) {
 }
 //#endregion
 //#region src/editor/extensions/table-commands.ts
+var NO_TABLE_CAPABILITIES = {
+	canToggleHeaderRow: false,
+	canToggleHeaderColumn: false,
+	canMoveRowUp: false,
+	canMoveRowDown: false,
+	canMoveColumnLeft: false,
+	canMoveColumnRight: false,
+	canAddRowBefore: false,
+	canAddRowAfter: false,
+	canAddColumnBefore: false,
+	canAddColumnAfter: false,
+	canDeleteRow: false,
+	canDeleteColumn: false,
+	canDeleteTable: false,
+	canMergeCells: false,
+	canSplitCell: false
+};
 /**
 * Moves the caret to the cell an overlay action names when the action comes from a table other
 * than the selected one, so table commands act on that table. A cell menu also selects its cell,
@@ -1879,6 +1725,59 @@ function selectionActionDetail(state, id) {
 		after: doc.textBetween(to, Math.min(doc.content.size, to + CONTEXT), "\n")
 	};
 }
+//#endregion
+//#region src/editor/table-ui.ts
+var LOOMA_TABLE_CONTROLS_CLOSED = Object.freeze({
+	toolbarOpen: false,
+	overlayOpen: false,
+	alignment: "left",
+	background: null,
+	headerRow: false,
+	headerColumn: false,
+	capabilities: Object.freeze({ ...NO_TABLE_CAPABILITIES })
+});
+/**
+* The controls for the table shown: its overlay on wider screens, and the toolbar and the selection's
+* formatting only while the selection is in that table. A table that is only hovered shows its overlay
+* with nothing selected; narrow screens use the editing dock instead of the toolbar and overlay.
+*/
+function tableControls(state, selectionInTable, narrow) {
+	if (!selectionInTable) return {
+		...LOOMA_TABLE_CONTROLS_CLOSED,
+		overlayOpen: !narrow
+	};
+	return {
+		toolbarOpen: state.showToolbar && !narrow,
+		overlayOpen: !narrow,
+		alignment: state.cellAlignment,
+		background: state.cellBackground,
+		headerRow: state.headerRow,
+		headerColumn: state.headerColumn,
+		capabilities: state.capabilities
+	};
+}
+/** Space, in pixels, the toolbar needs above a table; with less it sits below. */
+var ROOM_ABOVE$1 = 76;
+/**
+* Centers the table toolbar on the table, at most 420px wide and 12px inside the viewport's sides,
+* above the table when there is room and below it otherwise.
+*/
+function tableToolbarPlacement(table, viewportWidth) {
+	const width = Math.min(420, viewportWidth - 24);
+	const left = Math.min(Math.max(12, table.left + (table.width - width) / 2), Math.max(12, viewportWidth - width - 12));
+	return {
+		top: `${table.top > ROOM_ABOVE$1 ? table.top - 52 : table.bottom + 12}px`,
+		left: `${left}px`,
+		maxWidth: `${width}px`
+	};
+}
+/** The overlay covers the table exactly. */
+var tableOverlayPlacement = (table) => ({
+	top: `${table.top}px`,
+	left: `${table.left}px`,
+	width: `${table.width}px`,
+	height: `${table.height}px`
+});
 /** Whether a viewport this wide gets the editing dock rather than floating tools. */
 var usesMobileDock = (viewportWidth) => viewportWidth <= 767;
 /**
@@ -2485,6 +2384,71 @@ function createToolbarTooltip(onChange) {
 	};
 }
 //#endregion
+//#region src/editor/code-language-picker.ts
+/** The code block holding the whole selection, or null when the selection is elsewhere or spans blocks. */
+function codeBlockAtSelection(editor) {
+	const { $from, $to } = editor.state.selection;
+	const block = $from.parent;
+	if (block.type.name !== "codeBlock" || !$from.sameParent($to)) return null;
+	const pos = $from.before();
+	const element = editor.view.nodeDOM(pos);
+	if (!(element instanceof HTMLElement)) return null;
+	return {
+		pos,
+		language: typeof block.attrs.language === "string" && block.attrs.language ? block.attrs.language : "auto",
+		text: block.textContent,
+		element
+	};
+}
+/**
+* The picker's choices: Auto, naming the detected language when there is one; a saved language the
+* catalog lacks, marked unavailable, so it stays selected; then every catalog language.
+*/
+function codeLanguageChoices(language, detected, names) {
+	return [
+		{
+			value: "auto",
+			label: detected ? `Auto (${detected.toUpperCase()})` : "Auto"
+		},
+		...language !== "auto" && !names.includes(language) ? [{
+			value: language,
+			label: `${language.toUpperCase()} (unavailable)`
+		}] : [],
+		...names.map((name) => ({
+			value: name,
+			label: name.toUpperCase()
+		}))
+	];
+}
+/** Space, in pixels, the picker needs above a code block; with less it sits below. */
+var ROOM_ABOVE = 76;
+/** Centers the picker over the code block, above it when there is room and below it otherwise. */
+function codeLanguagePickerPlacement(block) {
+	const above = block.top > ROOM_ABOVE;
+	return {
+		top: `${above ? block.top - 8 : block.bottom + 8}px`,
+		left: `${block.left + block.width / 2}px`,
+		transform: `translate(-50%, ${above ? "-100%" : "0"})`
+	};
+}
+/**
+* Saves `value` as the language of the code block at `pos`, as its own undo step; `auto` clears it.
+* @failure Returns false, and changes nothing, for a language outside `names` or no code block at `pos`.
+*/
+function setCodeBlockLanguage(editor, pos, value, names) {
+	const language = value === "auto" ? null : value;
+	if (language !== null && !names.includes(language)) return false;
+	const node = editor.state.doc.nodeAt(pos);
+	if (node?.type.name !== "codeBlock") return false;
+	editor.view.dispatch(closeHistory(editor.state.tr));
+	editor.view.dispatch(editor.state.tr.setNodeMarkup(pos, void 0, {
+		...node.attrs,
+		language
+	}));
+	editor.view.dispatch(closeHistory(editor.state.tr));
+	return true;
+}
+//#endregion
 //#region src/editor/extensions/expand.ts
 /**
 * Reveals collapsed ancestors before a host navigates to a document position.
@@ -3210,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);
 		}
 	};
 };
@@ -3389,23 +3451,6 @@ var EMPTY_DOCUMENT = {
 };
 var uploadProgressText = (progress) => progress && progress.total > 0 ? `Uploading image… ${Math.round(Math.min(1, progress.loaded / progress.total) * 100)}%` : "Uploading image…";
 var editorInstanceSequence = 0;
-var EMPTY_CAPABILITIES = {
-	canToggleHeaderRow: false,
-	canToggleHeaderColumn: false,
-	canMoveRowUp: false,
-	canMoveRowDown: false,
-	canMoveColumnLeft: false,
-	canMoveColumnRight: false,
-	canAddRowBefore: false,
-	canAddRowAfter: false,
-	canAddColumnBefore: false,
-	canAddColumnAfter: false,
-	canDeleteRow: false,
-	canDeleteColumn: false,
-	canDeleteTable: false,
-	canMergeCells: false,
-	canSplitCell: false
-};
 function slashMenuRows(items) {
 	const groups = [];
 	for (const [index, item] of items.entries()) {
@@ -3695,7 +3740,7 @@ var LoomaEditor = defineComponent({
 			toolbarStyle: {},
 			overlayStyle: {},
 			menuStyle: {},
-			capabilities: { ...EMPTY_CAPABILITIES }
+			capabilities: LOOMA_TABLE_CONTROLS_CLOSED.capabilities
 		});
 		const openChipEditor = (_instance, position) => {
 			if (!chipEditing?.open(position)) return;
@@ -4114,16 +4159,10 @@ var LoomaEditor = defineComponent({
 			if (session.setContent(value, lastFocusedSelection) && wasFocused) rememberSelection(instance);
 		}, { deep: true });
 		const closeTableUi = () => {
-			tableUi.toolbarOpen = false;
-			tableUi.overlayOpen = false;
+			Object.assign(tableUi, LOOMA_TABLE_CONTROLS_CLOSED);
 			tableUi.menuOpen = false;
 			tableUi.menuScope = "cell";
-			tableUi.alignment = "left";
-			tableUi.background = null;
-			tableUi.headerRow = false;
-			tableUi.headerColumn = false;
 			tableUi.geometry = null;
-			tableUi.capabilities = { ...EMPTY_CAPABILITIES };
 			overlayTableElement = null;
 			mobileDock.tableInactive();
 		};
@@ -4145,63 +4184,31 @@ var LoomaEditor = defineComponent({
 		let codeBlurTimer;
 		const updateCodeUi = (focusSettled = false) => {
 			const instance = editor.value?.isDestroyed ? void 0 : editor.value;
-			const selection = instance?.state.selection;
-			const block = selection?.$from.parent;
-			const dom = instance && block?.type.name === "codeBlock" && selection.$from.sameParent(selection.$to) ? instance.view.nodeDOM(selection.$from.before()) : null;
-			if (!instance || !props.editable || !codeLanguageNames.length || !(dom instanceof HTMLElement)) {
+			const block = instance ? codeBlockAtSelection(instance) : null;
+			if (!instance || !props.editable || !codeLanguageNames.length || !block) {
 				codeUi.open = false;
 				return;
 			}
-			loadForCodeBlock(instance, block.attrs.language, block.textContent);
+			loadForCodeBlock(instance, block.language === "auto" ? null : block.language, block.text);
 			if (!instance.isFocused && !codeLanguageShell.value?.contains(document.activeElement)) {
 				clearTimeout(codeBlurTimer);
 				if (codeUi.open && !focusSettled) codeBlurTimer = setTimeout(() => updateCodeUi(true), 0);
 				else codeUi.open = false;
 				return;
 			}
-			const rect = dom.getBoundingClientRect();
-			const above = rect.top > 76;
 			codeUi.open = true;
-			codeUi.pos = selection.$from.before();
-			codeUi.language = typeof block.attrs.language === "string" && block.attrs.language ? block.attrs.language : "auto";
-			codeUi.text = block.textContent;
-			codeUi.style = {
-				top: `${above ? rect.top - 8 : rect.bottom + 8}px`,
-				left: `${rect.left + rect.width / 2}px`,
-				transform: `translate(-50%, ${above ? "-100%" : "0"})`
-			};
+			codeUi.pos = block.pos;
+			codeUi.language = block.language;
+			codeUi.text = block.text;
+			codeUi.style = codeLanguagePickerPlacement(block.element.getBoundingClientRect());
 		};
 		const codeLanguageOptions = computed(() => {
 			codeUi.grammarVersion;
 			const detected = codeUi.open && codeUi.text.trim() ? codeHighlighting.lowlight.highlightAuto(codeUi.text).data?.language : null;
-			return [
-				{
-					value: "auto",
-					label: typeof detected === "string" ? `Auto (${detected.toUpperCase()})` : "Auto"
-				},
-				...codeUi.language !== "auto" && !codeLanguageNames.includes(codeUi.language) ? [{
-					value: codeUi.language,
-					label: `${codeUi.language.toUpperCase()} (unavailable)`
-				}] : [],
-				...codeLanguageNames.map((name) => ({
-					value: name,
-					label: name.toUpperCase()
-				}))
-			];
+			return codeLanguageChoices(codeUi.language, typeof detected === "string" ? detected : null, codeLanguageNames);
 		});
 		const chooseCodeLanguage = (value) => {
-			const instance = editor.value;
-			if (!instance) return;
-			const language = value === "auto" ? null : value;
-			if (language !== null && !codeLanguageNames.includes(language)) return;
-			const node = instance.state.doc.nodeAt(codeUi.pos);
-			if (node?.type.name !== "codeBlock") return;
-			instance.view.dispatch(closeHistory(instance.state.tr));
-			instance.view.dispatch(instance.state.tr.setNodeMarkup(codeUi.pos, void 0, {
-				...node.attrs,
-				language
-			}));
-			instance.view.dispatch(closeHistory(instance.state.tr));
+			if (editor.value) setCodeBlockLanguage(editor.value, codeUi.pos, value, codeLanguageNames);
 		};
 		const onCodeTransaction = () => updateCodeUi();
 		watch(() => props.editable, () => nextTick(onCodeTransaction));
@@ -4230,31 +4237,14 @@ var LoomaEditor = defineComponent({
 			overlayTableElement = table;
 			if (selectedTableIsActive) mobileDock.tableActive();
 			const rect = table.getBoundingClientRect();
-			const maxToolbarWidth = Math.min(420, window.innerWidth - 24);
-			const toolbarLeft = Math.min(Math.max(12, rect.left + (rect.width - maxToolbarWidth) / 2), Math.max(12, window.innerWidth - maxToolbarWidth - 12));
-			tableUi.toolbarOpen = selectedTableIsActive && state.showToolbar && !mobile.value;
-			tableUi.overlayOpen = !mobile.value;
-			tableUi.alignment = selectedTableIsActive ? state.cellAlignment : "left";
-			tableUi.background = selectedTableIsActive ? state.cellBackground : null;
-			tableUi.headerRow = selectedTableIsActive && state.headerRow;
-			tableUi.headerColumn = selectedTableIsActive && state.headerColumn;
-			tableUi.capabilities = selectedTableIsActive ? state.capabilities : { ...EMPTY_CAPABILITIES };
+			Object.assign(tableUi, tableControls(state, selectedTableIsActive, mobile.value));
 			const selectedCell = selectedTableIsActive ? selectedTableCellElement(instance) : null;
 			const geometry = measureTableOverlayGeometry(table, selectedCell, hoveredTableCell && table.contains(hoveredTableCell) ? hoveredTableCell : null);
 			tableUi.rows = Math.max(0, geometry.rowBoundaries.length - 1);
 			tableUi.cols = Math.max(0, geometry.columnBoundaries.length - 1);
 			tableUi.geometry = geometry;
-			tableUi.toolbarStyle = {
-				top: `${rect.top > 76 ? rect.top - 52 : rect.bottom + 12}px`,
-				left: `${toolbarLeft}px`,
-				maxWidth: `${maxToolbarWidth}px`
-			};
-			tableUi.overlayStyle = {
-				top: `${rect.top}px`,
-				left: `${rect.left}px`,
-				width: `${rect.width}px`,
-				height: `${rect.height}px`
-			};
+			tableUi.toolbarStyle = tableToolbarPlacement(rect, window.innerWidth);
+			tableUi.overlayStyle = tableOverlayPlacement(rect);
 		};
 		const onEditorFocus = () => {
 			editorFocused.value = true;

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;