@threadlabs/looma 0.22.13 → 0.23.0

package/editor/chunks/extensions.js

@@ -7,6 +7,7 @@ import { dropCursor } from "@tiptap/pm/dropcursor";
 import { gapCursor } from "@tiptap/pm/gapcursor";
 import { createLowlight } from "lowlight";
 import { DOMParser, Node as Node$2, Slice } from "@tiptap/pm/model";
+import { Mapping } from "@tiptap/pm/transform";
 import MarkdownIt from "markdown-it";
 import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, columnResizing, deleteCellSelection, deleteColumn, deleteRow, deleteTable, fixTables, goToNextCell, mergeCells, moveTableColumn, moveTableRow, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
 //#region src/editor/extensions/active-block.ts
@@ -6198,6 +6199,57 @@ function createLoomaMentionExtension(options = {}) {
 	});
 }
 //#endregion
+//#region src/editor/extensions/relative-links.ts
+/** Keep other origins and non-web schemes intact; same-origin links retain path, query, and fragment. */
+function siteRelativeHref(href, baseUrl) {
+	if (!/^(https?:\/\/|\/\/)/i.test(href.trim())) return href;
+	try {
+		const base = new URL(baseUrl);
+		const url = new URL(href, base);
+		if (!/^https?:$/.test(base.protocol) || url.origin !== base.origin || url.username || url.password) return href;
+		return `${url.pathname}${url.search}${url.hash}`;
+	} catch {
+		return href;
+	}
+}
+/** Normalize newly created links in the same transaction batch, including paste rules and the picker.
+* @contract Existing document links are preserved until replaced; undo/redo keeps the original editing step.
+* @ownership The editor owns normalization; callers supply a site URL rather than a host callback.
+*/
+function createSiteRelativeLinks(baseUrl) {
+	const key = new PluginKey("looma-site-relative-links");
+	return Extension.create({
+		name: "loomaSiteRelativeLinks",
+		addProseMirrorPlugins() {
+			const editor = this.editor;
+			return [new Plugin({
+				key,
+				appendTransaction(transactions, oldState, newState) {
+					if (!editor.isEditable || !transactions.some((transaction) => transaction.docChanged) || transactions.some((transaction) => transaction.getMeta(key))) return null;
+					const mapping = new Mapping();
+					for (const transaction of transactions) mapping.appendMapping(transaction.mapping);
+					const inverse = mapping.invert();
+					const tr = newState.tr;
+					newState.doc.descendants((node, position) => {
+						if (!node.isText) return;
+						const mark = node.marks.find((candidate) => candidate.type.name === "link");
+						if (!mark || typeof mark.attrs.href !== "string") return;
+						const href = siteRelativeHref(mark.attrs.href, baseUrl);
+						if (href === mark.attrs.href) return;
+						const before = inverse.mapResult(position, 1);
+						if ((before.deleted ? null : oldState.doc.nodeAt(before.pos)?.marks.find((candidate) => candidate.type.name === "link"))?.attrs.href === mark.attrs.href) return;
+						tr.addMark(position, position + node.nodeSize, mark.type.create({
+							...mark.attrs,
+							href
+						}));
+					});
+					return tr.docChanged ? tr.setMeta(key, true) : null;
+				}
+			})];
+		}
+	});
+}
+//#endregion
 //#region ../../node_modules/.pnpm/dompurify@3.4.15/node_modules/dompurify/dist/purify.es.mjs
 /*! @license DOMPurify 3.4.15 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.15/LICENSE */
 function _arrayLikeToArray(r, a) {
@@ -9290,7 +9342,7 @@ function getLoomaTableExtensions() {
 * the code and explicit language stay in the document schema.
 */
 function getDefaultEditorExtensions(options = {}) {
-	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages, codeLowlight, codeBlockNodeView } = options;
+	const { placeholder = "Type “/” for commands, or start writing…", linkOpenOnClick = false, linkBaseUrl, imageInline = false, mention = createLoomaMentionExtension(), disableHighlight = false, codeLanguages, codeLowlight, codeBlockNodeView } = options;
 	const codeBlock = LoomaCodeBlock.configure({ lowlight: codeLowlight ?? createLowlight(codeLanguages) });
 	return [
 		Document,
@@ -9325,6 +9377,7 @@ function getDefaultEditorExtensions(options = {}) {
 				target: "_blank"
 			}
 		}),
+		...linkBaseUrl ? [createSiteRelativeLinks(linkBaseUrl)] : [],
 		Image.configure({ inline: imageInline }),
 		(disableHighlight ? StoredOnlyHighlight : Highlight).configure({ multicolor: false }),
 		Code,
@@ -10103,4 +10156,4 @@ function createLoomaSlashCommandExtension(options = {}) {
 	});
 }
 //#endregion
-export { LOOMA_CALLOUT_TONES as A, DEFAULT_MENTION_RESULT_LIMIT as C, LOOMA_CHIP_COLORS as D, normalizeMentionResultLimit as E, LoomaActiveBlock as F, LoomaActiveBlockPluginKey as I, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS as M, LOOMA_ACTIVE_BLOCK_CLASS as N, LoomaChip as O, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS as P, 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, LoomaCallout as j, normalizeLoomaChipColor 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 { LoomaChip as A, LoomaMentionSuggestionPluginKey as C, filterLoomaMentionItems as D, MAX_MENTION_RESULT_LIMIT as E, LOOMA_ACTIVE_BLOCK_CLASS as F, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS as I, LoomaActiveBlock as L, LOOMA_CALLOUT_TONES as M, LoomaCallout as N, normalizeMentionResultLimit as O, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS as P, LoomaActiveBlockPluginKey as R, siteRelativeHref as S, DEFAULT_MENTION_RESULT_LIMIT 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, normalizeLoomaChipColor as j, LOOMA_CHIP_COLORS 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, createLoomaMentionExtension as w, createSiteRelativeLinks as x, setActiveTableCellBackground as y };

package/editor/extensions/index.d.ts

@@ -15,3 +15,4 @@ export { getActiveTableUiState, handleTableAction, handleTableOverlayAction, ins
 export { LoomaTable, getActiveTableCellAlignment, getActiveTableCellBackground, LoomaTableCell, LoomaTableHeader, setActiveTableCellAlignment, setActiveTableCellBackground, TABLE_CELL_BACKGROUND_PRESETS, type TableCellAlignment, type TableCellBackground, } from "./table-formatting.js";
 export { createLoomaMentionExtension, DEFAULT_MENTION_RESULT_LIMIT, filterLoomaMentionItems, LoomaMentionSuggestionPluginKey, MAX_MENTION_RESULT_LIMIT, normalizeMentionResultLimit, type LoomaMentionItem, type LoomaMentionMenuSnapshot, type LoomaMentionOptions, type LoomaMentionProvider, type LoomaMentionProviderContext, } from "./mention.js";
 export { createLoomaSlashCommandExtension, getDefaultSlashCommands, LoomaSlashCommand, type LoomaSlashCommand as LoomaSlashCommandItem, type LoomaSlashCommandContext, type LoomaSlashCommandOptions, type LoomaSlashMenuSnapshot, } from "./slash-command.js";
+export { siteRelativeHref, createSiteRelativeLinks } from "./relative-links.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 LOOMA_CALLOUT_TONES, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CHIP_COLORS, E as normalizeMentionResultLimit, F as LoomaActiveBlock, I as LoomaActiveBlockPluginKey, M as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, N as LOOMA_ACTIVE_BLOCK_CLASS, O as LoomaChip, P as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, 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 LoomaCallout, k as normalizeLoomaChipColor, 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, LOOMA_CHIP_COLORS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaChip, 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, normalizeLoomaChipColor, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+import { A as LoomaChip, C as LoomaMentionSuggestionPluginKey, D as filterLoomaMentionItems, E as MAX_MENTION_RESULT_LIMIT, F as LOOMA_ACTIVE_BLOCK_CLASS, I as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, L as LoomaActiveBlock, M as LOOMA_CALLOUT_TONES, N as LoomaCallout, O as normalizeMentionResultLimit, P as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, R as LoomaActiveBlockPluginKey, S as siteRelativeHref, T as DEFAULT_MENTION_RESULT_LIMIT, _ 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 normalizeLoomaChipColor, k as LOOMA_CHIP_COLORS, 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 createLoomaMentionExtension, x as createSiteRelativeLinks, 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, LOOMA_CHIP_COLORS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaChip, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, createSiteRelativeLinks, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };

package/editor/extensions/preset.d.ts

@@ -16,6 +16,8 @@ export interface DefaultEditorExtensionsOptions {
     placeholder?: string;
     /** Passed to Tiptap Link; defaults false to keep editing clicks in the editor. */
     linkOpenOnClick?: boolean;
+    /** Site origin whose newly inserted links become relative, across paste and editor commands. */
+    linkBaseUrl?: string;
     /** Passed to Tiptap Image; block images are the default document policy. */
     imageInline?: boolean;
     /** Custom mention extension, the Looma default, or false to omit mentions. */

package/editor/extensions/relative-links.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from '@tiptap/core';
+/** Keep other origins and non-web schemes intact; same-origin links retain path, query, and fragment. */
+export declare function siteRelativeHref(href: string, baseUrl: string): string;
+/** Normalize newly created links in the same transaction batch, including paste rules and the picker.
+ * @contract Existing document links are preserved until replaced; undo/redo keeps the original editing step.
+ * @ownership The editor owns normalization; callers supply a site URL rather than a host callback.
+ */
+export declare function createSiteRelativeLinks(baseUrl: string): Extension<any, any>;

package/editor/icons.d.ts

@@ -7,6 +7,10 @@ export declare const LOOMA_ICONS: {
     'arrow-left': IconNode;
     bold: IconNode;
     'book-user': IconNode;
+    search: IconNode;
+    'external-link': IconNode;
+    pencil: IconNode;
+    unlink: IconNode;
     braces: IconNode;
     calculator: IconNode;
     check: IconNode;
@@ -18,6 +22,7 @@ export declare const LOOMA_ICONS: {
     'chevron-right': IconNode;
     'code-xml': IconNode;
     columns: IconNode;
+    compass: IconNode;
     'credit-card': IconNode;
     ellipsis: IconNode;
     eraser: IconNode;
@@ -30,6 +35,7 @@ export declare const LOOMA_ICONS: {
     'heading-3': IconNode;
     help: IconNode;
     highlighter: IconNode;
+    history: IconNode;
     image: IconNode;
     info: IconNode;
     italic: IconNode;

package/editor/index.js

@@ -1,7 +1,7 @@
 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 LOOMA_CALLOUT_TONES, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CHIP_COLORS, E as normalizeMentionResultLimit, F as LoomaActiveBlock, I as LoomaActiveBlockPluginKey, M as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, N as LOOMA_ACTIVE_BLOCK_CLASS, O as LoomaChip, P as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, 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 LoomaCallout, k as normalizeLoomaChipColor, 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, ArrowLeft, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, CreditCard, Ellipsis, Eraser, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, LayoutDashboard, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Settings, Split, Strikethrough, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, UserRound, Users, X } from "lucide";
+import { A as LoomaChip, C as LoomaMentionSuggestionPluginKey, D as filterLoomaMentionItems, E as MAX_MENTION_RESULT_LIMIT, F as LOOMA_ACTIVE_BLOCK_CLASS, I as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, L as LoomaActiveBlock, M as LOOMA_CALLOUT_TONES, N as LoomaCallout, O as normalizeMentionResultLimit, P as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, R as LoomaActiveBlockPluginKey, S as siteRelativeHref, T as DEFAULT_MENTION_RESULT_LIMIT, _ 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 normalizeLoomaChipColor, k as LOOMA_CHIP_COLORS, 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 createLoomaMentionExtension, x as createSiteRelativeLinks, y as setActiveTableCellBackground } from "./chunks/extensions.js";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -11,6 +11,10 @@ var LOOMA_ICONS = {
 	"arrow-left": ArrowLeft,
 	bold: Bold,
 	"book-user": BookUser,
+	"search": Search,
+	"external-link": ExternalLink,
+	"pencil": Pencil,
+	"unlink": Unlink,
 	braces: Braces,
 	calculator: Calculator,
 	check: Check,
@@ -22,6 +26,7 @@ var LOOMA_ICONS = {
 	"chevron-right": ChevronRight,
 	"code-xml": CodeXml,
 	columns: Columns3,
+	compass: Compass,
 	"credit-card": CreditCard,
 	ellipsis: Ellipsis,
 	eraser: Eraser,
@@ -34,6 +39,7 @@ var LOOMA_ICONS = {
 	"heading-3": Heading3,
 	help: CircleQuestionMark,
 	highlighter: Highlighter,
+	history: History,
 	image: Image,
 	info: Info,
 	italic: Italic,
@@ -114,4 +120,4 @@ function getVisualViewportRect(owner = window) {
 	};
 }
 //#endregion
-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_CHIP_COLORS, LOOMA_ICONS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaChip, 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, normalizeLoomaChipColor, 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_CHIP_COLORS, LOOMA_ICONS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaChip, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, createSiteRelativeLinks, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeMentionResultLimit, resolveTableCellAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };

package/package.json

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

package/styles/ui-avatar-group.css

@@ -40,7 +40,7 @@
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-radius-round);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
       box-shadow:

package/styles/ui-avatar.css

@@ -30,7 +30,7 @@
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-      border: 1px solid var(--ui-avatar-border, color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default)));
+      border: var(--ui-border-width) solid var(--ui-avatar-border, color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default)));
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
       font: inherit;
@@ -68,8 +68,8 @@
     /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
        outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
     :scope[data-ui-avatar-state~="active"] {
-      outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
-      outline-offset: 1px;
+      outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-border-width);
     }
 
     .fallback {

package/styles/ui-badge.css

@@ -67,7 +67,7 @@
       justify-content: center;
       max-width: 100%;
       padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
-      border: 1px solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
+      border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       border-radius: var(--ui-radius-round);
       background: var(--_badge-outline-surface);
       color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-text)));

package/styles/ui-button.css

@@ -108,7 +108,7 @@
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
-      border-width: 1px;
+      border-width: var(--ui-border-width);
       border-color: var(--ui-button-border, var(--_tone));
       border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
       background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
@@ -371,8 +371,8 @@
     :scope[data-ui-button-state~="variant=link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-callout.css

@@ -64,8 +64,9 @@
       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, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-      border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
+      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-accent-line-width)) solid var(--ui-callout-border, var(--_callout-border));
       border-radius: var(--ui-radius-md);
       background: var(--ui-callout-surface, var(--_callout-surface));
       color: var(--ui-callout-text, var(--ui-text-primary));

package/styles/ui-card.css

@@ -9,12 +9,16 @@
       box-sizing: border-box;
       min-inline-size: 0;
       padding: var(--ui-space-5);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
       color: var(--ui-text-primary);
     }
 
+    :scope[data-ui-card-state~="padding=xs"] {
+      gap: var(--ui-space-1);
+      padding: var(--ui-space-2);
+    }
     :scope[data-ui-card-state~="padding=sm"] {
       gap: var(--ui-space-2);
       padding: var(--ui-space-3);
@@ -36,10 +40,23 @@
 
     :scope[data-ui-card-state~="tone=danger"] {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-      border-inline-start: 4px solid var(--ui-danger);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
       background: var(--ui-danger-soft);
     }
 
+    :scope[data-ui-card-state~="size=sm"] {
+      inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :scope[data-ui-card-state~="size=md"] {
+      inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :scope[data-ui-card-state~="size=lg"] {
+      inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;

package/styles/ui-checkbox.css

@@ -72,7 +72,7 @@
       inline-size: var(--_ui-checkbox-size, 1.125rem);
       block-size: var(--_ui-checkbox-size, 1.125rem);
       margin: 0.125em 0 0;
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-sm);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
@@ -134,8 +134,8 @@
     }
 
     input:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
     }
 
     :scope[data-ui-checkbox-state~="invalid"] input {

package/styles/ui-combobox.css

@@ -109,7 +109,7 @@
       flex: 1 1 auto;
       display: flex;
       min-inline-size: 0;
-      border: 1px solid var(--ui-control-border, var(--ui-border-default));
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
       border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
@@ -224,7 +224,7 @@
     button:focus-visible {
       outline: none;
       background: var(--ui-surface-muted);
-      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+      box-shadow: inset 0 0 0 var(--ui-focus-width) color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
     }
     input:disabled, button:disabled {
       color: var(--ui-disabled-text);
@@ -245,7 +245,7 @@
       overflow: auto;
       margin: 0;
       padding: var(--ui-space-1);
-      border: 1px solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
@@ -260,7 +260,7 @@
     }
     .primary {
       display: block;
-      color: var(--_ui-combobox-option-text, var(--ui-text-primary));
+      color: var(--_ui-combobox-option-text, inherit);
       font-weight: 500;
     }
     /* A row with a tag or a description: the label and its tag on one line, the description under them. */
@@ -349,7 +349,7 @@
       padding: var(--ui-space-0-5);
     }
     :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=sm"] input {
-      min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
       padding: 0 var(--ui-space-1);
     }
     /* A large multiple field starts at the large control height, as sm starts at the small one. */
@@ -357,7 +357,7 @@
       min-block-size: 0;
     }
     :scope[data-ui-combobox-state~="multiple"]:scope[data-ui-combobox-state~="size=lg"] input {
-      min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
+      min-block-size: calc(var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1));
     }
     .item {
       appearance: none;
@@ -375,8 +375,8 @@
       cursor: default;
     }
     .item:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 1px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-border-width);
     }
     .item:disabled {
       color: var(--ui-disabled-text);

package/styles/ui-context-menu.css

@@ -42,7 +42,7 @@
       box-sizing: border-box;
       padding: var(--ui-space-1);
       background: var(--_ui-context-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       box-shadow: var(--_ui-context-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       outline: 0;
@@ -63,7 +63,7 @@
       block-size: 0;
       margin: var(--ui-space-1) 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-border-divider);
+      border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     .menu:popover-open {

package/styles/ui-description-list.css

@@ -41,7 +41,7 @@
       --_ui-description-align: flex-start;
       --_ui-description-value-size: var(--ui-font-size-lg);
       --_ui-description-padding: var(--_tile-padding);
-      --_ui-description-border-width: 1px;
+      --_ui-description-border-width: var(--ui-border-width);
       --_ui-description-border-color: var(--ui-border-strong);
       --_gap: var(--ui-space-3);
       --_gap-compact: var(--ui-space-2);

package/styles/ui-dialog.css

@@ -59,7 +59,7 @@
       overflow: hidden;
       flex-direction: column;
       background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
       box-shadow: var(--ui-dialog-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
       visibility: hidden;
@@ -165,8 +165,8 @@
     }
 
     .close:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
     }
 
     /* A touch target, like Button on coarse pointers. */

package/styles/ui-disclosure.css

@@ -38,7 +38,7 @@
       display: block;
       inline-size: 100%;
       overflow: clip;
-      border-block-end: 1px solid var(--ui-border-divider);
+      border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
       color: var(--ui-text-primary);
     }
 
@@ -67,7 +67,7 @@
     }
     .trigger:focus-visible {
       outline: none;
-      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+      box-shadow: inset 0 0 0 var(--ui-focus-width) color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
     }
     .trigger:disabled {
       color: var(--ui-disabled-text);
@@ -105,6 +105,43 @@
       transform: rotate(225deg) translate(-1px, -1px);
     }
 
+    /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
+     * normal content-sized layout and its animation remain unchanged when fill is omitted. */
+    :scope[data-ui-disclosure-state~="fill"] {
+      display: flex;
+      flex-direction: column;
+      flex: none;
+      min-block-size: 0;
+      border-block-end: 0;
+      border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+    }
+    :scope[data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"] {
+      flex: 1;
+    }
+    :scope[data-ui-disclosure-state~="fill"] .heading {
+      flex: none;
+    }
+    :scope[data-ui-disclosure-state~="fill"] .trigger {
+      border-radius: 0;
+    }
+    :scope[data-ui-disclosure-state~="fill"] .panel {
+      display: flex;
+      flex: 1;
+      min-block-size: 0;
+      transition: none;
+    }
+    :scope[data-ui-disclosure-state~="fill"] .panel[hidden] {
+      flex: none;
+      block-size: 0;
+    }
+    :scope[data-ui-disclosure-state~="fill"] .panel-inner {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-block-size: 0;
+      padding: 0;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .panel,
       .chevron {
@@ -125,6 +162,9 @@
     /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */
 
+    /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
+     * normal content-sized layout and its animation remain unchanged when fill is omitted. */
+
     @media (prefers-reduced-motion: reduce) {
     }
 

package/styles/ui-editable.css

@@ -24,7 +24,7 @@
       min-block-size: var(--ui-control-size-sm);
       margin: 0;
       padding: var(--ui-space-1) var(--ui-space-2);
-      border: 1px solid transparent;
+      border: var(--ui-border-width) solid transparent;
       border-radius: var(--ui-radius-md);
       font: inherit;
       line-height: var(--ui-line-height-md);
@@ -97,7 +97,7 @@
     .actions button {
       min-block-size: var(--ui-control-size-sm);
       padding: 0 var(--ui-space-3);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       background: var(--ui-surface-elevated);
       background-image: var(--ui-raised-highlight);

package/styles/ui-editor-insert-table-grid.css

@@ -3,7 +3,7 @@
 :scope {
       padding: var(--ui-space-3);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
     }
@@ -48,8 +48,8 @@
       width: 1.25rem;
       height: 1.25rem;
       padding: 0;
-      border: 1px solid var(--ui-control-border);
-      border-radius: 2px;
+      border: var(--ui-border-width) solid var(--ui-control-border);
+      border-radius: var(--ui-radius-sm);
       background: var(--ui-surface);
       cursor: pointer;
     }
@@ -60,8 +60,8 @@
     }
 
     .cell:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: -2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
     .header {

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

@@ -9,7 +9,7 @@
       overflow: hidden;
       flex-direction: column;
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-dialog);
       box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
     }
@@ -21,7 +21,7 @@
       gap: var(--ui-space-3);
       padding: var(--ui-space-2) var(--ui-space-3);
       color: var(--ui-text-secondary);
-      border-bottom: 1px solid var(--ui-border-divider);
+      border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
     }

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

@@ -32,7 +32,7 @@
       flex: 0 0 auto;
       color: var(--ui-text-secondary);
       background: var(--ui-surface-hover);
-      border: 1px solid var(--ui-border);
+      border: var(--ui-border-width) solid var(--ui-border);
       border-radius: var(--ui-radius-md);
     }