@threadlabs/looma 0.7.4 → 0.8.1

package/editor/chunks/extensions.js

@@ -1,12 +1,12 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "./table-backgrounds.js";
-import { Extension, Mark, Node, callOrReturn, canInsertNode, combineTransactionSteps, escapeForRegEx, findChildren, findChildrenInRange, findParentNodeClosestToPos, getAttributes, getChangedRanges, getExtensionField, getMarksBetween, isNodeEmpty, isNodeSelection, markInputRule, markPasteRule, mergeAttributes, nodeInputRule, textInputRule, textblockTypeInputRule, wrappingInputRule } from "@tiptap/core";
+import { Extension, Mark, Node as Node$1, callOrReturn, canInsertNode, combineTransactionSteps, escapeForRegEx, findChildren, findChildrenInRange, findParentNodeClosestToPos, getAttributes, getChangedRanges, getExtensionField, getMarksBetween, isNodeEmpty, isNodeSelection, markInputRule, markPasteRule, mergeAttributes, nodeInputRule, textInputRule, textblockTypeInputRule, wrappingInputRule } from "@tiptap/core";
 import { NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { history, redo, undo } from "@tiptap/pm/history";
 import { dropCursor } from "@tiptap/pm/dropcursor";
 import { gapCursor } from "@tiptap/pm/gapcursor";
 import { common, createLowlight } from "lowlight";
-import { DOMParser, Node as Node$1 } from "@tiptap/pm/model";
+import { DOMParser, Node as Node$2 } from "@tiptap/pm/model";
 import MarkdownIt from "markdown-it";
 import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, columnResizing, deleteCellSelection, deleteColumn, deleteRow, deleteTable, fixTables, goToNextCell, mergeCells, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
 //#region src/editor/extensions/active-block.ts
@@ -19,23 +19,42 @@ import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, ad
 * wrap and every arrow key, and one that tracked a nested list item would step
 * in and out of the list's inset. The outermost block is the stable answer to
 * "where am I", which is the question the marker exists to answer.
+*
+* The marker is a cue for finding your place, so it stays out of the way while
+* the place is obvious: it is absent while text is being typed and returns once
+* typing pauses, and a focus change that stays within the editor (the toolbar,
+* a menu) or that returns at once does not blink it off.
 */
 /** Class applied to the decorated block; `looma-editor.css` owns its appearance. */
 var LOOMA_ACTIVE_BLOCK_CLASS = "looma-active-block";
-/** Plugin state is the editor's focus, so the marker is absent while reading. */
+/** How long typing must pause before the marker returns. */
+var LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS = 800;
+/** How long focus may be away before the marker treats the editor as unfocused. */
+var LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS = 200;
+/** Plugin state is the editor's focus and whether text is being typed. */
 var LoomaActiveBlockPluginKey = new PluginKey("loomaActiveBlock");
+var blurTimers = /* @__PURE__ */ new WeakMap();
+function setActiveBlockState(view, next) {
+	view.dispatch(view.state.tr.setMeta(LoomaActiveBlockPluginKey, next));
+}
+function cancelPendingBlur(view) {
+	clearTimeout(blurTimers.get(view));
+	blurTimers.delete(view);
+}
 /**
 * Decorates the outermost block containing the selection head while the editor
-* has focus.
+* has focus and text is not being typed.
 *
 * @contract Adds `LOOMA_ACTIVE_BLOCK_CLASS` to at most one top-level block, and
-* nothing at all when the editor is unfocused or not editable. The document is
-* never modified.
+* nothing at all when the editor is unfocused, not editable, or being typed in.
+* The document is never modified.
 * @invariant Focus is tracked in plugin state rather than read from the editor,
 * so the decoration recomputes on focus and blur even when neither changes the
-* selection.
+* selection. A blur only takes effect once focus has stayed away for
+* `LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS`, and never when focus moved to an element
+* inside the editor's own root.
 * @ownership The consuming stylesheet owns every visual property; this extension
-* owns only which block carries the class.
+* owns only which block carries the class, and when.
 */
 var LoomaActiveBlock = Extension.create({
 	name: "loomaActiveBlock",
@@ -43,25 +62,57 @@ var LoomaActiveBlock = Extension.create({
 		return [new Plugin({
 			key: LoomaActiveBlockPluginKey,
 			state: {
-				init: () => false,
-				apply: (transaction, focused) => {
-					const next = transaction.getMeta(LoomaActiveBlockPluginKey);
-					return typeof next === "boolean" ? next : focused;
+				init: () => ({
+					focused: false,
+					typing: false
+				}),
+				apply: (transaction, previous) => {
+					const meta = transaction.getMeta(LoomaActiveBlockPluginKey);
+					const next = {
+						...previous,
+						...meta
+					};
+					if (transaction.docChanged && meta?.typing === void 0) next.typing = true;
+					return next.focused === previous.focused && next.typing === previous.typing ? previous : next;
 				}
 			},
+			view: () => {
+				let idleTimer;
+				return {
+					update: (view, previousState) => {
+						if (!LoomaActiveBlockPluginKey.getState(view.state)?.typing) {
+							clearTimeout(idleTimer);
+							return;
+						}
+						if (view.state.doc.eq(previousState.doc)) return;
+						clearTimeout(idleTimer);
+						idleTimer = setTimeout(() => setActiveBlockState(view, { typing: false }), 800);
+					},
+					destroy: () => clearTimeout(idleTimer)
+				};
+			},
 			props: {
 				handleDOMEvents: {
 					focus: (view) => {
-						view.dispatch(view.state.tr.setMeta(LoomaActiveBlockPluginKey, true));
+						cancelPendingBlur(view);
+						if (!LoomaActiveBlockPluginKey.getState(view.state)?.focused) setActiveBlockState(view, { focused: true });
 						return false;
 					},
-					blur: (view) => {
-						view.dispatch(view.state.tr.setMeta(LoomaActiveBlockPluginKey, false));
+					blur: (view, event) => {
+						const destination = event.relatedTarget;
+						const root = view.dom.closest(".looma-editor") ?? view.dom.parentElement;
+						if (destination instanceof Node && root?.contains(destination)) return false;
+						cancelPendingBlur(view);
+						blurTimers.set(view, setTimeout(() => {
+							blurTimers.delete(view);
+							if (!view.isDestroyed && !view.hasFocus()) setActiveBlockState(view, { focused: false });
+						}, 200));
 						return false;
 					}
 				},
 				decorations: (state) => {
-					if (!LoomaActiveBlockPluginKey.getState(state)) return null;
+					const active = LoomaActiveBlockPluginKey.getState(state);
+					if (!active?.focused || active.typing) return null;
 					const { $head } = state.selection;
 					if ($head.depth === 0) return null;
 					const from = $head.before(1);
@@ -90,7 +141,7 @@ function normalizeCalloutTone(value) {
 * @invariant Parsed and rendered `data-tone` values always belong to
 * `LOOMA_CALLOUT_TONES`; missing or unknown values round-trip as `note`.
 */
-var LoomaCallout = Node.create({
+var LoomaCallout = Node$1.create({
 	name: "loomaCallout",
 	group: "block",
 	content: "block+",
@@ -126,7 +177,7 @@ var LoomaCallout = Node.create({
 * The default document node which represents the top level node of the editor.
 * @see https://tiptap.dev/api/nodes/document
 */
-var Document = Node.create({
+var Document = Node$1.create({
 	name: "doc",
 	topNode: true,
 	content: "block+"
@@ -137,7 +188,7 @@ var Document = Node.create({
 * This extension allows you to create paragraphs.
 * @see https://www.tiptap.dev/api/nodes/paragraph
 */
-var Paragraph = Node.create({
+var Paragraph = Node$1.create({
 	name: "paragraph",
 	priority: 1e3,
 	addOptions() {
@@ -170,7 +221,7 @@ var Paragraph = Node.create({
 * This extension allows you to create text nodes.
 * @see https://www.tiptap.dev/api/nodes/text
 */
-var Text$1 = Node.create({
+var Text$1 = Node$1.create({
 	name: "text",
 	group: "inline"
 });
@@ -467,7 +518,7 @@ var Underline = Mark.create({
 * This extension allows you to create headings.
 * @see https://www.tiptap.dev/api/nodes/heading
 */
-var Heading = Node.create({
+var Heading = Node$1.create({
 	name: "heading",
 	addOptions() {
 		return {
@@ -546,7 +597,7 @@ var inputRegex$6 = /^\s*([-+*])\s$/;
 * @see https://tiptap.dev/api/nodes/bullet-list
 * @see https://tiptap.dev/api/nodes/list-item.
 */
-var BulletList = Node.create({
+var BulletList = Node$1.create({
 	name: "bulletList",
 	addOptions() {
 		return {
@@ -611,7 +662,7 @@ var inputRegex$5 = /^(\d+)\.\s$/;
 * @see https://www.tiptap.dev/api/nodes/ordered-list
 * @see https://www.tiptap.dev/api/nodes/list-item
 */
-var OrderedList = Node.create({
+var OrderedList = Node$1.create({
 	name: "orderedList",
 	addOptions() {
 		return {
@@ -691,7 +742,7 @@ var OrderedList = Node.create({
 * This extension allows you to create list items.
 * @see https://www.tiptap.dev/api/nodes/list-item
 */
-var ListItem = Node.create({
+var ListItem = Node$1.create({
 	name: "listItem",
 	addOptions() {
 		return {
@@ -726,7 +777,7 @@ var ListItem = Node.create({
 * This extension allows you to create task lists.
 * @see https://www.tiptap.dev/api/nodes/task-list
 */
-var TaskList = Node.create({
+var TaskList = Node$1.create({
 	name: "taskList",
 	addOptions() {
 		return {
@@ -770,7 +821,7 @@ var inputRegex$4 = /^\s*(\[([( |x])?\])\s$/;
 * This extension allows you to create task items.
 * @see https://www.tiptap.dev/api/nodes/task-item
 */
-var TaskItem = Node.create({
+var TaskItem = Node$1.create({
 	name: "taskItem",
 	addOptions() {
 		return {
@@ -903,7 +954,7 @@ var inputRegex$3 = /^\s*>\s$/;
 * This extension allows you to create blockquotes.
 * @see https://tiptap.dev/api/nodes/blockquote
 */
-var Blockquote = Node.create({
+var Blockquote = Node$1.create({
 	name: "blockquote",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -950,7 +1001,7 @@ var Blockquote = Node.create({
 * This extension allows you to insert horizontal rules.
 * @see https://www.tiptap.dev/api/nodes/horizontal-rule
 */
-var HorizontalRule = Node.create({
+var HorizontalRule = Node$1.create({
 	name: "horizontalRule",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -1009,7 +1060,7 @@ var HorizontalRule = Node.create({
 * This extension allows you to insert hard breaks.
 * @see https://www.tiptap.dev/api/nodes/hard-break
 */
-var HardBreak = Node.create({
+var HardBreak = Node$1.create({
 	name: "hardBreak",
 	addOptions() {
 		return {
@@ -2895,7 +2946,7 @@ var inputRegex$2 = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
 * This extension allows you to insert images.
 * @see https://www.tiptap.dev/api/nodes/image
 */
-var Image = Node.create({
+var Image = Node$1.create({
 	name: "image",
 	addOptions() {
 		return {
@@ -3304,7 +3355,7 @@ var tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
 * This extension allows you to create code blocks.
 * @see https://tiptap.dev/api/nodes/code-block
 */
-var CodeBlock = Node.create({
+var CodeBlock = Node$1.create({
 	name: "codeBlock",
 	addOptions() {
 		return {
@@ -5375,7 +5426,7 @@ var CodeBlockLowlight = CodeBlock.extend({
 * This extension allows you to create table rows.
 * @see https://www.tiptap.dev/api/nodes/table-row
 */
-var TableRow = Node.create({
+var TableRow = Node$1.create({
 	name: "tableRow",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -5679,7 +5730,7 @@ function getSuggestionFromChar(options, char) {
 * This extension allows you to insert mentions into the editor.
 * @see https://www.tiptap.dev/api/extensions/mention
 */
-var Mention = Node.create({
+var Mention = Node$1.create({
 	name: "mention",
 	priority: 101,
 	addOptions() {
@@ -5789,7 +5840,7 @@ var Mention = Node.create({
 					return false;
 				}
 			});
-			let mentionNode = new Node$1();
+			let mentionNode = new Node$2();
 			let mentionPos = 0;
 			state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
 				if (node.type.name === this.name) {
@@ -6260,7 +6311,7 @@ var deleteTableWhenAllCellsSelected = ({ editor }) => {
 * This extension allows you to create tables.
 * @see https://www.tiptap.dev/api/nodes/table
 */
-var Table = Node.create({
+var Table = Node$1.create({
 	name: "table",
 	addOptions() {
 		return {
@@ -6405,7 +6456,7 @@ var Table = Node.create({
 * This extension allows you to create table cells.
 * @see https://www.tiptap.dev/api/nodes/table-cell
 */
-var TableCell = Node.create({
+var TableCell = Node$1.create({
 	name: "tableCell",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -6443,7 +6494,7 @@ var TableCell = Node.create({
 * This extension allows you to create table headers.
 * @see https://www.tiptap.dev/api/nodes/table-header
 */
-var TableHeader = Node.create({
+var TableHeader = Node$1.create({
 	name: "tableHeader",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -7330,4 +7381,4 @@ function createLoomaSlashCommandExtension(options = {}) {
 	});
 }
 //#endregion
-export { LoomaActiveBlock as A, DEFAULT_MENTION_RESULT_LIMIT as C, LOOMA_CALLOUT_TONES as D, normalizeMentionResultLimit as E, LoomaCallout as O, createLoomaMentionExtension as S, filterLoomaMentionItems as T, getActiveTableCellBackground as _, handleTableAction as a, LoomaSmartPaste as b, normalizeActiveTableColumnWidths as c, getDefaultEditorExtensions as d, getLoomaTableExtensions as f, getActiveTableCellAlignment as g, LoomaTableHeader as h, getActiveTableUiState as i, LoomaActiveBlockPluginKey as j, LOOMA_ACTIVE_BLOCK_CLASS as k, shouldShowTextFormattingToolbar as l, LoomaTableCell as m, createLoomaSlashCommandExtension as n, handleTableOverlayAction as o, LoomaTable as p, getDefaultSlashCommands as r, insertTableAtRange as s, LoomaSlashCommand as t, LoomaTableKit as u, setActiveTableCellAlignment as v, MAX_MENTION_RESULT_LIMIT as w, LoomaMentionSuggestionPluginKey as x, setActiveTableCellBackground as y };
+export { LOOMA_ACTIVE_BLOCK_CLASS as A, DEFAULT_MENTION_RESULT_LIMIT as C, LOOMA_CALLOUT_TONES as D, normalizeMentionResultLimit as E, LoomaActiveBlock as M, LoomaActiveBlockPluginKey as N, LoomaCallout as O, createLoomaMentionExtension as S, filterLoomaMentionItems as T, getActiveTableCellBackground as _, handleTableAction as a, LoomaSmartPaste as b, normalizeActiveTableColumnWidths as c, getDefaultEditorExtensions as d, getLoomaTableExtensions as f, getActiveTableCellAlignment as g, LoomaTableHeader as h, getActiveTableUiState as i, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS as j, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS as k, shouldShowTextFormattingToolbar as l, LoomaTableCell as m, createLoomaSlashCommandExtension as n, handleTableOverlayAction as o, LoomaTable as p, getDefaultSlashCommands as r, insertTableAtRange as s, LoomaSlashCommand as t, LoomaTableKit as u, setActiveTableCellAlignment as v, MAX_MENTION_RESULT_LIMIT as w, LoomaMentionSuggestionPluginKey as x, setActiveTableCellBackground as y };

package/editor/extensions/active-block.d.ts

@@ -7,24 +7,40 @@
  * wrap and every arrow key, and one that tracked a nested list item would step
  * in and out of the list's inset. The outermost block is the stable answer to
  * "where am I", which is the question the marker exists to answer.
+ *
+ * The marker is a cue for finding your place, so it stays out of the way while
+ * the place is obvious: it is absent while text is being typed and returns once
+ * typing pauses, and a focus change that stays within the editor (the toolbar,
+ * a menu) or that returns at once does not blink it off.
  */
 import { Extension } from "@tiptap/core";
 import { PluginKey } from "@tiptap/pm/state";
 /** Class applied to the decorated block; `looma-editor.css` owns its appearance. */
 export declare const LOOMA_ACTIVE_BLOCK_CLASS = "looma-active-block";
-/** Plugin state is the editor's focus, so the marker is absent while reading. */
-export declare const LoomaActiveBlockPluginKey: PluginKey<boolean>;
+/** How long typing must pause before the marker returns. */
+export declare const LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS = 800;
+/** How long focus may be away before the marker treats the editor as unfocused. */
+export declare const LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS = 200;
+interface ActiveBlockState {
+    focused: boolean;
+    typing: boolean;
+}
+/** Plugin state is the editor's focus and whether text is being typed. */
+export declare const LoomaActiveBlockPluginKey: PluginKey<ActiveBlockState>;
 /**
  * Decorates the outermost block containing the selection head while the editor
- * has focus.
+ * has focus and text is not being typed.
  *
  * @contract Adds `LOOMA_ACTIVE_BLOCK_CLASS` to at most one top-level block, and
- * nothing at all when the editor is unfocused or not editable. The document is
- * never modified.
+ * nothing at all when the editor is unfocused, not editable, or being typed in.
+ * The document is never modified.
  * @invariant Focus is tracked in plugin state rather than read from the editor,
  * so the decoration recomputes on focus and blur even when neither changes the
- * selection.
+ * selection. A blur only takes effect once focus has stayed away for
+ * `LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS`, and never when focus moved to an element
+ * inside the editor's own root.
  * @ownership The consuming stylesheet owns every visual property; this extension
- * owns only which block carries the class.
+ * owns only which block carries the class, and when.
  */
 export declare const LoomaActiveBlock: Extension<any, any>;
+export {};

package/editor/extensions/index.d.ts

@@ -6,7 +6,7 @@
  * application owns wiring and editor-instance lifetime. Tiptap remains a peer
  * dependency so Looma and the host execute against the same editor runtime.
  */
-export { LOOMA_ACTIVE_BLOCK_CLASS, LoomaActiveBlock, LoomaActiveBlockPluginKey, } from "./active-block.js";
+export { LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, LoomaActiveBlock, LoomaActiveBlockPluginKey, } from "./active-block.js";
 export { LoomaCallout, LOOMA_CALLOUT_TONES, type LoomaCalloutTone, } from "./callout.js";
 export { getDefaultEditorExtensions, getLoomaTableExtensions, LoomaTableKit, type DefaultEditorExtensionsOptions, } from "./preset.js";
 export { LoomaSmartPaste } from "./smart-paste.js";

package/editor/extensions/index.js

@@ -1,3 +1,3 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "../chunks/table-backgrounds.js";
-import { A as LoomaActiveBlock, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LoomaActiveBlockPluginKey, k as LOOMA_ACTIVE_BLOCK_CLASS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "../chunks/extensions.js";
-export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_CALLOUT_TONES, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+import { A as LOOMA_ACTIVE_BLOCK_CLASS, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, M as LoomaActiveBlock, N as LoomaActiveBlockPluginKey, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, k as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "../chunks/extensions.js";
+export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, LOOMA_CALLOUT_TONES, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/editor/index.js

@@ -1,6 +1,6 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
-import { A as LoomaActiveBlock, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LoomaActiveBlockPluginKey, k as LOOMA_ACTIVE_BLOCK_CLASS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
+import { A as LOOMA_ACTIVE_BLOCK_CLASS, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, M as LoomaActiveBlock, N as LoomaActiveBlockPluginKey, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, k as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
 import { AlignCenter, AlignLeft, AlignRight, Bold, Braces, ChevronDown, ChevronLeft, CircleCheck, CircleX, CodeXml, Columns3, Ellipsis, Eraser, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, List, ListOrdered, ListTodo, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Redo2, Rows3, Split, Strikethrough, Table2, Trash2, TriangleAlert, Underline, Undo2 } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
@@ -94,4 +94,4 @@ function getVisualViewportRect(owner = window) {
 	};
 }
 //#endregion
-export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_CALLOUT_TONES, LOOMA_ICONS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, resolveTableCellAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, LOOMA_CALLOUT_TONES, LOOMA_ICONS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, resolveTableCellAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/package.json

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

package/styles/ui-avatar-group.css

@@ -30,7 +30,7 @@
         var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
         var(--ui-avatar-group-edge-ring, var(--_edge-ring));
       font: inherit;
-      font-size: 0.75rem;
+      font-size: var(--ui-font-size-xs);
       font-weight: 600;
       flex-shrink: 0;
     }

package/styles/ui-avatar.css

@@ -11,7 +11,7 @@
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-solid));
       font: inherit;
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
       font-weight: 600;
       text-transform: uppercase;
     }

package/styles/ui-button.css

@@ -65,13 +65,13 @@
     :scope[data-ui-button-state~="size=sm"] {
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     :scope[data-ui-button-state~="size=lg"] {
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
-      font-size: 1rem;
+      font-size: var(--ui-font-size-md);
     }
 
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that

package/styles/ui-combobox.css

@@ -9,7 +9,7 @@
     }
     label {
       color: var(--ui-combobox-label-text, var(--ui-text-primary));
-      font-size: var(--ui-combobox-label-font-size, 0.875rem);
+      font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
       font-weight: 500;
     }
     /* The field and anything that annotates it sit on one row; the help button is beside the box,

package/styles/ui-editor-slash-menu.css

@@ -152,7 +152,7 @@
       align-items: center;
       justify-content: center;
       font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-      font-size: 10px;
+      font-size: var(--ui-font-size-2xs);
       background: var(--ui-surface-hover);
       border: 1px solid var(--ui-border);
       border-radius: 3px;

package/styles/ui-editor-table-context-menu.css

@@ -101,7 +101,7 @@
 
     .heading {
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.6875rem;
+      font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;

package/styles/ui-editor-table-toolbar.css

@@ -141,7 +141,7 @@
 
     .menu-heading {
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.6875rem;
+      font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;

package/styles/ui-form-field.css

@@ -18,12 +18,12 @@
 
     .label {
       color: var(--ui-text-secondary);
-      font-size: 0.95rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     .help {
       color: var(--ui-text-muted);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-md);
     }
 
@@ -43,7 +43,7 @@
     .error,
     :where([data-slotted], [data-slotted] *):is([role="alert"]) {
       color: var(--ui-accent-active);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-tree-item.css

@@ -17,7 +17,7 @@
       align-items: center;
       min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
-      font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
+      font-size: var(--ui-tree-item-font-size, var(--ui-font-size-sm));
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-secondary);
       transition:

package/tokens.css

@@ -36,7 +36,6 @@
       "Segoe UI Emoji";
     --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
     --ui-font-size: 1rem;
-    --ui-font-size-sm: 0.875rem;
     --ui-font-medium: 500;
     --ui-line-height: 1.4;
 
@@ -78,8 +77,8 @@
     /* Type scale, from the base size. */
     --ui-font-size-2xs: calc(var(--ui-font-size) * 0.6875);
     --ui-font-size-xs: calc(var(--ui-font-size) * 0.75);
-    /* Dense interactive text: legible without body-copy spacing. */
-    --ui-font-size-ui: calc(var(--ui-font-size) * 0.9375);
+    /* Dense text: controls, labels, and metadata. Two steps below body copy, never one pixel. */
+    --ui-font-size-sm: calc(var(--ui-font-size) * 0.875);
     --ui-font-size-md: var(--ui-font-size);
     --ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
     --ui-font-size-xl: calc(var(--ui-font-size) * 1.25);

package/vue/UiAvatar.vue

@@ -62,7 +62,7 @@ useComponentHost(controllerModule.default, {
   background: var(--ui-avatar-surface, var(--ui-accent-soft));
   color: var(--ui-avatar-text, var(--ui-accent-solid));
   font: inherit;
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
   font-weight: 600;
   text-transform: uppercase;
 }

package/vue/UiAvatarGroup.vue

@@ -85,7 +85,7 @@ useComponentHost(controllerModule.default, {
     var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
     var(--ui-avatar-group-edge-ring, var(--_edge-ring));
   font: inherit;
-  font-size: 0.75rem;
+  font-size: var(--ui-font-size-xs);
   font-weight: 600;
   flex-shrink: 0;
 }

package/vue/UiButton.vue

@@ -140,13 +140,13 @@ function attribute(value: unknown): any {
 [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="size=lg"] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
-  font-size: 1rem;
+  font-size: var(--ui-font-size-md);
 }
 
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that

package/vue/UiCombobox.vue

@@ -648,7 +648,7 @@ defineExpose({
 }
 label {
   color: var(--ui-combobox-label-text, var(--ui-text-primary));
-  font-size: var(--ui-combobox-label-font-size, 0.875rem);
+  font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,

package/vue/UiEditorSlashMenu.vue

@@ -246,7 +246,7 @@ useComponentHost(controllerModule.default, {
   align-items: center;
   justify-content: center;
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: 10px;
+  font-size: var(--ui-font-size-2xs);
   background: var(--ui-surface-hover);
   border: 1px solid var(--ui-border);
   border-radius: 3px;

package/vue/UiEditorTableContextMenu.vue

@@ -260,7 +260,7 @@ useComponentHost(controllerModule.default, {
 
 .heading {
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.6875rem;
+  font-size: var(--ui-font-size-2xs);
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;

package/vue/UiEditorTableToolbar.vue

@@ -356,7 +356,7 @@ useComponentHost(controllerModule.default, {
 
 .menu-heading {
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.6875rem;
+  font-size: var(--ui-font-size-2xs);
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;