@threadlabs/looma 0.15.7 → 0.16.1

package/editor/chunks/extensions.js

@@ -172,6 +172,110 @@ var LoomaCallout = Node$1.create({
 	}
 });
 //#endregion
+//#region src/editor/extensions/chip.ts
+/** The six palette values a chip may persist; other values fall back to neutral. */
+var LOOMA_CHIP_COLORS = [
+	"neutral",
+	"blue",
+	"green",
+	"yellow",
+	"red",
+	"purple"
+];
+var CHIP_PLACEHOLDER = "Set a label";
+/** Keep imported or programmatic colors within the supported palette. */
+function normalizeLoomaChipColor(value) {
+	return LOOMA_CHIP_COLORS.includes(value) ? value : "neutral";
+}
+/**
+* An inline, atomic label. The editor's popover edits its attributes; its text
+* remains available in serialized HTML and plain-text copy.
+*
+* @invariant Only the label and a supported palette color enter document state;
+* the clickable node view never stores its transient popover controls.
+*/
+var LoomaChip = Node$1.create({
+	name: "loomaChip",
+	group: "inline",
+	inline: true,
+	atom: true,
+	selectable: true,
+	addAttributes() {
+		return {
+			label: {
+				default: "",
+				parseHTML: (element) => element.getAttribute("data-label") ?? (element.hasAttribute("data-placeholder") ? "" : element.textContent ?? "")
+			},
+			color: {
+				default: "neutral",
+				parseHTML: (element) => normalizeLoomaChipColor(element.getAttribute("data-color"))
+			}
+		};
+	},
+	parseHTML() {
+		return [{ tag: "span[data-looma-chip]" }];
+	},
+	renderHTML({ node }) {
+		const label = String(node.attrs.label ?? "");
+		return [
+			"span",
+			{
+				"data-looma-chip": "",
+				"data-label": label,
+				"data-color": normalizeLoomaChipColor(node.attrs.color),
+				...label ? {} : { "data-placeholder": "" }
+			},
+			label || CHIP_PLACEHOLDER
+		];
+	},
+	renderText({ node }) {
+		return String(node.attrs.label ?? "");
+	},
+	addNodeView() {
+		return ({ node, editor }) => {
+			const dom = document.createElement("span");
+			dom.dataset.loomaChip = "";
+			dom.contentEditable = "false";
+			dom.setAttribute("role", "button");
+			dom.setAttribute("aria-disabled", String(!editor.isEditable));
+			dom.tabIndex = 0;
+			const update = (next) => {
+				if (next.type !== node.type) return false;
+				const label = String(next.attrs.label ?? "");
+				if (dom.dataset.label !== label) {
+					dom.dataset.label = label;
+					dom.textContent = label || CHIP_PLACEHOLDER;
+					dom.setAttribute("aria-label", label ? `Edit chip: ${label}` : "Set chip label");
+					if (label) delete dom.dataset.placeholder;
+					else dom.dataset.placeholder = "";
+				}
+				const color = normalizeLoomaChipColor(next.attrs.color);
+				if (dom.dataset.color !== color) dom.dataset.color = color;
+				return true;
+			};
+			update(node);
+			return {
+				dom,
+				update,
+				stopEvent: (event) => event.type === "click" || event.type === "keydown"
+			};
+		};
+	},
+	addCommands() {
+		return { insertLoomaChip: (attributes = {}) => ({ commands, state }) => {
+			const selection = state.selection;
+			const label = attributes.label ?? state.doc.textBetween(selection.from, selection.to);
+			return commands.insertContent({
+				type: this.name,
+				attrs: {
+					label,
+					color: normalizeLoomaChipColor(attributes.color)
+				}
+			});
+		} };
+	}
+});
+//#endregion
 //#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.
@@ -9132,6 +9236,7 @@ function getDefaultEditorExtensions(options = {}) {
 		TaskItem.configure({ nested: false }),
 		Blockquote,
 		LoomaCallout,
+		LoomaChip,
 		HorizontalRule,
 		HardBreak,
 		History,
@@ -9582,7 +9687,7 @@ var CALLOUT_COMMANDS = [
 * @ownership Returned command objects belong to the caller and are recreated
 * per call so one editor cannot mutate another editor's command inventory.
 */
-function getDefaultSlashCommands(onOpenImagePicker) {
+function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor) {
 	return [
 		{
 			title: "Text",
@@ -9679,6 +9784,20 @@ function getDefaultSlashCommands(onOpenImagePicker) {
 				editor.chain().focus().deleteRange(range).setLoomaCallout(tone).run();
 			}
 		})),
+		{
+			title: "Chip",
+			description: "Inline label with text and color",
+			icon: "tag",
+			keywords: [
+				"chip",
+				"label",
+				"badge",
+				"tag"
+			],
+			command: ({ editor, range }) => {
+				if (editor.chain().focus().deleteRange(range).setTextSelection(range.from).insertLoomaChip({ label: "" }).run()) onOpenChipEditor?.(editor, range.from);
+			}
+		},
 		{
 			title: "Inline code",
 			description: "Monospace code span",
@@ -9801,7 +9920,7 @@ var LoomaSlashCommand = Extension.create({
 			startOfLine: false,
 			items: ({ query }) => {
 				const normalized = query.toLowerCase().trim();
-				const commands = this.options.commands.length > 0 ? this.options.commands : getDefaultSlashCommands(this.options.onOpenImagePicker);
+				const commands = this.options.commands.length > 0 ? this.options.commands : getDefaultSlashCommands(this.options.onOpenImagePicker, this.options.onOpenChipEditor);
 				if (!normalized) return commands;
 				return commands.filter((command) => command.title.toLowerCase().includes(normalized) || command.keywords.some((keyword) => keyword.includes(normalized)));
 			},
@@ -9864,10 +9983,11 @@ var LoomaSlashCommand = Extension.create({
 */
 function createLoomaSlashCommandExtension(options = {}) {
 	const onOpenImagePicker = options.onOpenImagePicker;
+	const onOpenChipEditor = options.onOpenChipEditor;
 	return LoomaSlashCommand.configure({
 		...options,
-		commands: options.commands ?? getDefaultSlashCommands(onOpenImagePicker)
+		commands: options.commands ?? getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor)
 	});
 }
 //#endregion
-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 };
+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 };

package/editor/extensions/chip.d.ts

@@ -0,0 +1,26 @@
+import { Node } from "@tiptap/core";
+/** The six palette values a chip may persist; other values fall back to neutral. */
+export declare const LOOMA_CHIP_COLORS: readonly ["neutral", "blue", "green", "yellow", "red", "purple"];
+/** A persisted chip color shared by the headless extension and its editor UI. */
+export type LoomaChipColor = typeof LOOMA_CHIP_COLORS[number];
+/** Keep imported or programmatic colors within the supported palette. */
+export declare function normalizeLoomaChipColor(value: unknown): LoomaChipColor;
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        loomaChip: {
+            /** Replace selected text, or insert at the caret, with an inline chip. */
+            insertLoomaChip: (attributes?: {
+                label?: string;
+                color?: LoomaChipColor;
+            }) => ReturnType;
+        };
+    }
+}
+/**
+ * An inline, atomic label. The editor's popover edits its attributes; its text
+ * remains available in serialized HTML and plain-text copy.
+ *
+ * @invariant Only the label and a supported palette color enter document state;
+ * the clickable node view never stores its transient popover controls.
+ */
+export declare const LoomaChip: Node<any, any>;

package/editor/extensions/index.d.ts

@@ -8,6 +8,7 @@
  */
 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 { LoomaChip, LOOMA_CHIP_COLORS, normalizeLoomaChipColor, type LoomaChipColor } from "./chip.js";
 export { getDefaultEditorExtensions, getLoomaTableExtensions, LoomaTableKit, type DefaultEditorExtensionsOptions, } from "./preset.js";
 export { LoomaSmartPaste } from "./smart-paste.js";
 export { getActiveTableUiState, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, shouldShowTextFormattingToolbar, type ActiveTableUiState, type InsertTableAtRangeOptions, type TableActionCapabilities, } from "./table-commands.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_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 };
+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 };

package/editor/extensions/slash-command.d.ts

@@ -48,6 +48,7 @@ export interface LoomaSlashCommandOptions {
     commands: LoomaSlashCommand[];
     onStateChange?: (state: LoomaSlashMenuSnapshot) => void;
     onOpenImagePicker?: () => void;
+    onOpenChipEditor?: (editor: Editor, position: number) => void;
 }
 /**
  * Builds Looma's default command policy as fresh objects for one editor.
@@ -57,7 +58,7 @@ export interface LoomaSlashCommandOptions {
  * @ownership Returned command objects belong to the caller and are recreated
  * per call so one editor cannot mutate another editor's command inventory.
  */
-export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void): LoomaSlashCommand[];
+export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void, onOpenChipEditor?: (editor: Editor, position: number) => void): LoomaSlashCommand[];
 /**
  * Framework-neutral slash-command extension used by the turnkey editor.
  * Consumers embedding Looma into their own Tiptap instance can configure the

package/editor/icons.d.ts

@@ -56,6 +56,7 @@ export declare const LOOMA_ICONS: {
     settings: IconNode;
     split: IconNode;
     strikethrough: IconNode;
+    tag: IconNode;
     table: IconNode;
     trash: IconNode;
     'triangle-alert': 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_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, 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, Trash2, TriangleAlert, Truck, Underline, Undo2, UserRound, Users, X } from "lucide";
+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";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -60,6 +60,7 @@ var LOOMA_ICONS = {
 	settings: Settings,
 	split: Split,
 	strikethrough: Strikethrough,
+	tag: Tag,
 	table: Table2,
 	trash: Trash2,
 	"triangle-alert": TriangleAlert,
@@ -113,4 +114,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_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_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 };

package/package.json

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

package/styles/ui-badge.css

@@ -49,8 +49,8 @@
     :scope {
       --_badge-surface: var(--ui-surface-subtle);
       --_badge-text: var(--ui-text-secondary);
-      /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
-      --_badge-border: var(--ui-surface-subtle);
+      /* Sit between the soft fill and its stronger theme ink. */
+      --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
       /* --ui-badge-color derives a wash and an ink from one colour, between the tone and the explicit
          surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
          mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
@@ -58,7 +58,7 @@
       --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
       --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
       --_badge-color-surface: var(--_badge-color-wash);
-      --_badge-color-border: var(--_badge-color-wash);
+      --_badge-color-border: color-mix(in srgb, var(--_badge-color-wash) 75%, var(--_badge-color-ink) 25%);
       --_badge-color-text: var(--_badge-color-ink);
       --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-surface)));
 
@@ -124,31 +124,26 @@
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
       --_badge-surface: var(--ui-accent-soft);
-      --_badge-border: var(--ui-accent-soft);
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
       --_badge-surface: var(--ui-danger-soft);
-      --_badge-border: var(--ui-danger-soft);
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
       --_badge-surface: var(--ui-success-soft);
-      --_badge-border: var(--ui-success-soft);
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
       --_badge-surface: var(--ui-warning-soft);
-      --_badge-border: var(--ui-warning-soft);
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
     :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
       --_badge-surface: var(--ui-info-soft);
-      --_badge-border: var(--ui-info-soft);
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 

package/vanilla/UiDialog.d.ts

@@ -12,6 +12,7 @@ export interface UiDialogProps {
   closedby?: "any" | "closerequest" | "none" | null;
   for?: string | null;
   label?: string | null;
+  modal?: boolean | null;
   modeless?: boolean | null;
   open?: boolean | null;
   size?: "sm" | "md" | "lg" | "fullscreen" | null;

package/vanilla/UiDialog.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-dialog/ui-dialog.js";
 import "../styles/ui-dialog.css";
 
-const definition = {...{"contract":{"tag":"ui-dialog","props":{"alert":{"type":"boolean","required":false,"target":{"attribute":"alert"},"default":false},"closedby":{"type":{"enum":["any","closerequest","none"]},"required":false,"target":{"attribute":"closedby"},"default":"closerequest"},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"label"}},"modeless":{"type":"boolean","required":false,"target":{"attribute":"modeless"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"size":{"type":{"enum":["sm","md","lg","fullscreen"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"accessibleLabel","expressionPlan":{"source":"accessibleLabel","ast":{"kind":"id","name":"accessibleLabel"},"dependencies":["accessibleLabel"]}}],"children":[{"kind":"element","name":"header","attributes":[],"children":[{"kind":"element","name":"h2","attributes":[{"kind":"literal","name":"class","value":"title"},{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[],"flow":{"kind":"if","test":"label","testPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"close"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Close"}],"children":[],"ref":"close"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"footer","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"accessibleLabel","expression":{"source":"'Dialog'","ast":{"kind":"literal","value":"Dialog"},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"dialog","choices":["dialog"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-dialog","props":{"alert":{"type":"boolean","required":false,"target":{"attribute":"alert"},"default":false},"closedby":{"type":{"enum":["any","closerequest","none"]},"required":false,"target":{"attribute":"closedby"}},"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"label"}},"modal":{"type":"boolean","required":false,"target":{"attribute":"modal"},"default":false},"modeless":{"type":"boolean","required":false,"target":{"attribute":"modeless"},"default":false},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false},"size":{"type":{"enum":["sm","md","lg","fullscreen"]},"required":false,"target":{"attribute":"size"},"default":"md"}}},"template":{"kind":"element","name":"dialog","attributes":[{"kind":"attribute","name":"aria-label","expression":"accessibleLabel","expressionPlan":{"source":"accessibleLabel","ast":{"kind":"id","name":"accessibleLabel"},"dependencies":["accessibleLabel"]}}],"children":[{"kind":"element","name":"header","attributes":[],"children":[{"kind":"element","name":"h2","attributes":[{"kind":"literal","name":"class","value":"title"},{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[],"flow":{"kind":"if","test":"label","testPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"close"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Close"}],"children":[],"ref":"close"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"body"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"footer","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}]}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"accessibleLabel","expression":{"source":"'Dialog'","ast":{"kind":"literal","value":"Dialog"},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"dialog","choices":["dialog"]}},source:{file:import.meta.url},css:""};
 
 export function createUiDialog(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;