@threadlabs/looma 0.23.21 → 0.23.23

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

@@ -0,0 +1,6 @@
+import { Extension } from "@tiptap/core";
+/** Selects atomic visual blocks by pointer and keeps text Tab input in the document.
+ * @contract List and table keymaps run first; Shift-Tab outside a list remains
+ * browser navigation so keyboard users can leave the editing surface.
+ */
+export declare const LoomaBlockSelection: Extension<any, any>;

package/editor/extensions/expand.d.ts

@@ -0,0 +1,31 @@
+import { Node, type Editor, type NodeViewRenderer } from "@tiptap/core";
+/** Saved presentation; a reader's temporary toggle never changes these values. */
+export interface LoomaExpandAttributes {
+    summary: string;
+    open: boolean;
+}
+interface ExpandOptions {
+    nodeView: NodeViewRenderer | null;
+}
+/**
+ * Reveals collapsed ancestors before a host navigates to a document position.
+ * @contract Navigation changes presentation only, including in read-only mode.
+ */
+export declare function revealLoomaExpandAt(editor: Editor, position: number): Promise<void>;
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        loomaExpand: {
+            /** Insert an independent section and place the caret in its body. */
+            insertLoomaExpand: (attributes?: Partial<LoomaExpandAttributes>) => ReturnType;
+            /** Leave an enclosing section by creating an ordinary paragraph after it. */
+            exitLoomaExpand: () => ReturnType;
+        };
+    }
+}
+/**
+ * A block container whose summary and initial expansion survive serialization.
+ * @ownership The document owns attributes/body; node views own reader toggles.
+ * @lifecycle Default views unregister their editor subscriptions on destroy.
+ */
+export declare const LoomaExpand: Node<ExpandOptions, any>;
+export {};

package/editor/extensions/image.d.ts

@@ -0,0 +1,12 @@
+import { type AnyExtension } from "@tiptap/core";
+/** Durable image placement; wrapping applies to block images in reading content. */
+export type LoomaImagePlacement = "block" | "center" | "wrap-left" | "wrap-right";
+/** Accepts only positive, integral CSS-pixel dimensions. */
+export declare function normalizeImageDimension(value: unknown): number | undefined;
+/** Unknown legacy values retain ordinary block placement. */
+export declare function normalizeImagePlacement(value: unknown): LoomaImagePlacement;
+/** Portable image attributes shared by every editor adapter.
+ * @contract Keeps Tiptap's existing `image` name and insertion command. Delivery
+ * attributes stay transient; dimensions and placement survive HTML and JSON.
+ */
+export declare const LoomaImage: AnyExtension;

package/editor/extensions/index.d.ts

@@ -9,10 +9,13 @@
 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 { LoomaExpand, revealLoomaExpandAt, type LoomaExpandAttributes } from "./expand.js";
+export { LoomaTableOfContents, getTableOfContentsEntries, normalizeTableOfContentsConfig, type LoomaTableOfContentsConfig, type LoomaTableOfContentsEntry, type LoomaTableOfContentsFormat, } from "./table-of-contents.js";
 export { getDefaultEditorExtensions, getLoomaTableExtensions, LoomaTableKit, type DefaultEditorExtensionsOptions, type LoomaCodeLanguages, } 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";
 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 { createLoomaSlashCommandExtension, getDefaultSlashCommands, filterLoomaSlashCommands, LoomaSlashCommand, type LoomaSlashCommand as LoomaSlashCommandItem, type LoomaSlashCommandContext, type LoomaSlashCommandOptions, type LoomaSlashMenuSnapshot, } from "./slash-command.js";
 export { siteRelativeHref, createSiteRelativeLinks } from "./relative-links.js";
+export { LoomaImage, normalizeImageDimension, normalizeImagePlacement, type LoomaImagePlacement } from "./image.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 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 };
+import { A as LoomaImage, B as normalizeLoomaChipColor, C as siteRelativeHref, D as MAX_MENTION_RESULT_LIMIT, E as DEFAULT_MENTION_RESULT_LIMIT, F as normalizeTableOfContentsConfig, G as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, H as LoomaCallout, I as LoomaExpand, K as LoomaActiveBlock, L as revealLoomaExpandAt, M as normalizeImagePlacement, N as LoomaTableOfContents, O as filterLoomaMentionItems, P as getTableOfContentsEntries, R as LOOMA_CHIP_COLORS, S as createSiteRelativeLinks, T as createLoomaMentionExtension, U as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, V as LOOMA_CALLOUT_TONES, W as LOOMA_ACTIVE_BLOCK_CLASS, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeImageDimension, k as normalizeMentionResultLimit, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, o as handleTableAction, p as getLoomaTableExtensions, q as LoomaActiveBlockPluginKey, r as filterLoomaSlashCommands, s as handleTableOverlayAction, t as LoomaSlashCommand, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as LoomaMentionSuggestionPluginKey, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as LoomaChip } 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, LoomaExpand, LoomaImage, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, LoomaTableOfContents, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, createSiteRelativeLinks, filterLoomaMentionItems, filterLoomaSlashCommands, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getTableOfContentsEntries, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeImageDimension, normalizeImagePlacement, normalizeLoomaChipColor, normalizeMentionResultLimit, normalizeTableOfContentsConfig, revealLoomaExpandAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };

package/editor/extensions/preset.d.ts

@@ -20,6 +20,10 @@ export interface DefaultEditorExtensionsOptions {
     linkBaseUrl?: string;
     /** Passed to Tiptap Image; block images are the default document policy. */
     imageInline?: boolean;
+    /** Optional image selection and sizing UI; durable formatting stays in the shared schema. */
+    imageNodeView?: NodeViewRenderer;
+    /** Optional selected-state UI for document dividers. */
+    dividerNodeView?: NodeViewRenderer;
     /** Custom mention extension, the Looma default, or false to omit mentions. */
     mention?: AnyExtension | false;
     /**
@@ -35,6 +39,10 @@ export interface DefaultEditorExtensionsOptions {
     codeLowlight?: ReturnType<typeof createLowlight>;
     /** Optional presentation for a code block; the Vue editor supplies its language control. */
     codeBlockNodeView?: NodeViewRenderer;
+    /** Optional TOC settings UI; schema, entries, and heading anchors remain shared. */
+    tableOfContentsNodeView?: NodeViewRenderer;
+    /** Optional section settings; the shared schema owns summary and body content. */
+    expandNodeView?: NodeViewRenderer;
 }
 /**
  * Complete Looma table schema as one Tiptap extension.

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

@@ -13,11 +13,17 @@ export interface LoomaSlashCommandContext {
  * built-ins without coupling the headless suggestion lifecycle to Tiptap nodes.
  */
 export interface LoomaSlashCommand {
+    /** Stable identity, especially when two commands share a visible title. */
+    id?: string;
+    /** Optional visible category; absent categories render as ordinary rows. */
+    group?: string;
     title: string;
     description: string;
     icon: LoomaIconName;
     keywords: string[];
     command: (context: LoomaSlashCommandContext) => void;
+    /** Pure capability/context check. An unavailable command is omitted. */
+    isAvailable?: (context: LoomaSlashCommandContext) => boolean;
 }
 /**
  * Ephemeral render model published to any slash-menu UI.
@@ -34,6 +40,8 @@ export interface LoomaSlashMenuSnapshot {
     query: string;
     rect: DOMRect | null;
     select: ((index: number) => void) | null;
+    /** Keeps editor keyboard selection synchronized with a UI's hovered row. */
+    highlight?: ((index: number) => void) | null;
 }
 /**
  * Application-owned command inventory and integration callbacks.
@@ -51,16 +59,32 @@ export interface LoomaSlashCommandOptions {
     onOpenChipEditor?: (editor: Editor, position: number) => void;
     onOpenLinkEditor?: () => void;
 }
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        loomaSlashCommand: {
+            /** Dismiss current suggestions without removing the writer's query. */
+            dismissLoomaSlashMenu: () => ReturnType;
+        };
+    }
+}
 /**
  * Builds Looma's default command policy as fresh objects for one editor.
  * Image and link commands delegate their picker because Looma does not own
  * upload, persistence, or destination search. Link appears only when a picker
- * callback is supplied, so a headless default inventory has no dead action.
+ * callback is supplied. Image follows the same rule, so a headless inventory
+ * has no dead picker actions.
  *
  * @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, onOpenChipEditor?: (editor: Editor, position: number) => void, onOpenLinkEditor?: () => void): LoomaSlashCommand[];
+/**
+ * Ranks exact names/aliases before partial matches, then matching categories.
+ * Other ties retain inventory order.
+ * @contract Capability checks run against the current range; a failing host
+ * predicate omits that command rather than exposing an action that may destroy text.
+ */
+export declare function filterLoomaSlashCommands(commands: LoomaSlashCommand[], query: string, context?: LoomaSlashCommandContext): LoomaSlashCommand[];
 /**
  * Framework-neutral slash-command extension used by the turnkey editor.
  * Consumers embedding Looma into their own Tiptap instance can configure the
@@ -71,7 +95,9 @@ export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void,
  * @lifecycle Snapshot callbacks are valid only for the suggestion range that
  * produced them and are replaced on every update or exit.
  */
-export declare const LoomaSlashCommand: Extension<LoomaSlashCommandOptions, any>;
+export declare const LoomaSlashCommand: Extension<LoomaSlashCommandOptions, {
+    dismiss: () => void;
+}>;
 /**
  * Creates an independently configured extension instance.
  * Prefer this factory when callbacks or commands are editor-specific; the
@@ -80,4 +106,6 @@ export declare const LoomaSlashCommand: Extension<LoomaSlashCommandOptions, any>
  * @ownership The caller owns supplied commands and callbacks. The returned
  * extension captures them for one configuration without mutating the inventory.
  */
-export declare function createLoomaSlashCommandExtension(options?: Partial<LoomaSlashCommandOptions>): Extension<LoomaSlashCommandOptions, any>;
+export declare function createLoomaSlashCommandExtension(options?: Partial<LoomaSlashCommandOptions>): Extension<LoomaSlashCommandOptions, {
+    dismiss: () => void;
+}>;

package/editor/extensions/table-of-contents.d.ts

@@ -0,0 +1,58 @@
+import { Node, type NodeViewRenderer } from "@tiptap/core";
+import { type Node as ProseMirrorNode } from "@tiptap/pm/model";
+/** Formatting affects presentation only; heading order remains document order. */
+export type LoomaTableOfContentsFormat = "plain" | "bulleted" | "numbered";
+/** Persisted TOC choices; entries themselves are always derived from headings. */
+export interface LoomaTableOfContentsConfig {
+    format: LoomaTableOfContentsFormat;
+    depth: 1 | 2 | 3;
+}
+/**
+ * One current heading for navigation or host projections.
+ * @lifecycle Positions belong to the supplied document; recompute after edits.
+ * IDs stay with headings across renames and moves once a TOC assigns anchors.
+ */
+export interface LoomaTableOfContentsEntry {
+    id: string;
+    text: string;
+    level: number;
+    depth: number;
+    position: number;
+}
+/** Normalize loaded configuration without persisting unsupported presentation values. */
+export declare function normalizeTableOfContentsConfig(attributes: Record<string, unknown>): LoomaTableOfContentsConfig;
+/**
+ * Derives nonempty headings throughout the document, independent of TOC placement.
+ * @contract Depth is a maximum heading level. Relative nesting follows existing
+ * ancestors rather than inserting artificial entries for skipped levels.
+ */
+export declare function getTableOfContentsEntries(doc: ProseMirrorNode, depth?: number): LoomaTableOfContentsEntry[];
+interface Branch {
+    entry: LoomaTableOfContentsEntry;
+    children: Branch[];
+}
+/** Shared nesting for semantic HTML and the adapter's component composition. */
+export declare function tableOfContentsTree(entries: LoomaTableOfContentsEntry[]): Branch[];
+/**
+ * Scrolls within this editor so multiple documents cannot cross-navigate by ID.
+ * @contract Reader navigation does not edit content or invoke link-editing UI.
+ */
+export declare function navigateTableOfContents(editor: import("@tiptap/core").Editor, id: string): Promise<void>;
+interface TableOfContentsOptions {
+    nodeView: NodeViewRenderer | null;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        loomaTableOfContents: {
+            /** Insert configuration; headings and links are derived from the document. */
+            insertLoomaTableOfContents: (config?: Partial<LoomaTableOfContentsConfig>) => ReturnType;
+        };
+    }
+}
+/**
+ * Automatic whole-document navigation with durable configuration only.
+ * @ownership The schema owns configuration/anchors; node views derive entries.
+ * @lifecycle Headless views subscribe to transactions and unsubscribe on destroy.
+ */
+export declare const LoomaTableOfContents: Node<TableOfContentsOptions, any>;
+export {};

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 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 { A as LoomaImage, B as normalizeLoomaChipColor, C as siteRelativeHref, D as MAX_MENTION_RESULT_LIMIT, E as DEFAULT_MENTION_RESULT_LIMIT, F as normalizeTableOfContentsConfig, G as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, H as LoomaCallout, I as LoomaExpand, K as LoomaActiveBlock, L as revealLoomaExpandAt, M as normalizeImagePlacement, N as LoomaTableOfContents, O as filterLoomaMentionItems, P as getTableOfContentsEntries, R as LOOMA_CHIP_COLORS, S as createSiteRelativeLinks, T as createLoomaMentionExtension, U as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, V as LOOMA_CALLOUT_TONES, W as LOOMA_ACTIVE_BLOCK_CLASS, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeImageDimension, k as normalizeMentionResultLimit, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, o as handleTableAction, p as getLoomaTableExtensions, q as LoomaActiveBlockPluginKey, r as filterLoomaSlashCommands, s as handleTableOverlayAction, t as LoomaSlashCommand, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as LoomaMentionSuggestionPluginKey, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as LoomaChip } from "./chunks/extensions.js";
 import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, 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. */
@@ -121,4 +121,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, createSiteRelativeLinks, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, normalizeMentionResultLimit, resolveTableCellAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };
+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, LoomaExpand, LoomaImage, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, LoomaTableOfContents, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, createSiteRelativeLinks, filterLoomaMentionItems, filterLoomaSlashCommands, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeImageDimension, normalizeImagePlacement, normalizeLoomaChipColor, normalizeMentionResultLimit, normalizeTableOfContentsConfig, resolveTableCellAt, revealLoomaExpandAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };

package/package.json

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

package/styles/ui-button.css

@@ -172,6 +172,42 @@
       font-size: var(--ui-font-size-md);
     }
 
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+    :scope[data-ui-button-state~="variant=card"] {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: start;
+      gap: var(--ui-space-3);
+      inline-size: 100%;
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
+      text-align: start;
+      white-space: normal;
+      box-shadow: none;
+      background-image: none;
+    }
+    :scope[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
+    }
+    :scope[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    .card-icon {
+      display: flex;
+      align-items: flex-start;
+    }
+    .card-icon:empty {
+      display: none;
+    }
+    .card-content {
+      min-inline-size: 0;
+    }
+    .card-action {
+      display: flex;
+      align-items: center;
+      align-self: center;
+    }
+
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
     :scope:hover:not(:disabled, [aria-disabled="true"]) {
@@ -388,6 +424,9 @@
     @supports (text-box-trim: trim-both) {
     }
 
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
 

package/styles/ui-image.css

@@ -0,0 +1,153 @@
+/* Generated by HTML Next 1.0.0-alpha.26. Do not edit. */
+@scope ([data-component~="ui-image"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: flex;
+      justify-content: flex-start;
+      box-sizing: border-box;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      margin: 0;
+      padding: var(--ui-space-3) 0;
+    }
+    :scope[data-ui-image-state~="placement=center"] {
+      justify-content: center;
+    }
+    :scope[data-ui-image-state~="placement=wrap-left"] {
+      float: left;
+      padding-inline-end: var(--ui-space-4);
+    }
+    :scope[data-ui-image-state~="placement=wrap-right"] {
+      float: right;
+      padding-inline-start: var(--ui-space-4);
+    }
+    :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) {
+      inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
+    }
+    :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) .frame {
+      inline-size: 100%;
+    }
+    .frame {
+      position: relative;
+      flex: 0 1 auto;
+      inline-size: var(--_ui-image-width, fit-content);
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      align-self: flex-start;
+      border-radius: var(--ui-radius-md);
+    }
+    :scope[data-ui-image-state~="selected"] .frame {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-border-width);
+    }
+    .handle {
+      position: absolute;
+      z-index: 1;
+      inline-size: 24px;
+      block-size: 24px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      touch-action: none;
+    }
+    .handle::after {
+      content: "";
+      position: absolute;
+      inset: 8px;
+      background: var(--ui-surface);
+      border: var(--ui-border-width) solid var(--ui-focus-ring);
+      border-radius: var(--ui-radius-sm);
+    }
+    .handle:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      border-radius: var(--ui-radius-sm);
+    }
+    .handle[data-corner="top-left"] {
+      top: -12px;
+      left: -12px;
+      cursor: nwse-resize;
+    }
+    .handle[data-corner="top-right"] {
+      top: -12px;
+      right: -12px;
+      cursor: nesw-resize;
+    }
+    .handle[data-corner="bottom-left"] {
+      bottom: -12px;
+      left: -12px;
+      cursor: nesw-resize;
+    }
+    .handle[data-corner="bottom-right"] {
+      bottom: -12px;
+      right: -12px;
+      cursor: nwse-resize;
+    }
+    .handles[hidden], :scope[hidden] {
+      display: none;
+    }
+    @media (max-width: 767px) {
+      :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) {
+        float: none;
+        inline-size: 100%;
+        padding-inline: 0;
+      }
+      :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) .handles {
+        display: none;
+      }
+    }
+    @media (pointer: coarse) {
+      .handle {
+        inline-size: 44px;
+        block-size: 44px;
+      }
+      .handle::after {
+        inset: 18px;
+      }
+      .handle[data-corner="top-left"] {
+        top: -22px;
+        left: -22px;
+      }
+      .handle[data-corner="top-right"] {
+        top: -22px;
+        right: -22px;
+      }
+      .handle[data-corner="bottom-left"] {
+        bottom: -22px;
+        left: -22px;
+      }
+      .handle[data-corner="bottom-right"] {
+        bottom: -22px;
+        right: -22px;
+      }
+    }
+    @media (forced-colors: active) {
+      :scope[data-ui-image-state~="selected"] .frame, .handle:focus-visible {
+        outline-color: Highlight;
+      }
+      .handle::after {
+        border-color: Highlight;
+        background: Canvas;
+      }
+    }
+}
+@scope ([data-component~="ui-image"]) to ([data-component]) {
+:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) .frame img,
+    :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) .frame :where([data-slotted], [data-slotted] *):is(img) {
+      inline-size: 100%;
+    }
+    .frame img, .frame :where([data-slotted], [data-slotted] *):is(img) {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+      margin: 0;
+      border-radius: inherit;
+    }
+    :scope[data-resizing] .frame img, :scope[data-resizing] .frame :where([data-slotted], [data-slotted] *):is(img) {
+      inline-size: 100%;
+    }
+    @media (max-width: 767px) {
+    }
+    @media (pointer: coarse) {
+    }
+    @media (forced-colors: active) {
+    }
+}

package/styles/ui-separator.css

@@ -12,13 +12,33 @@
       align-self: stretch;
       margin: 0;
       border: 0;
-      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
+      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+    }
+
+    :scope[data-ui-separator-state~="emphasis=strong"] {
+      --_separator-color: var(--ui-border-strong);
     }
 
     :scope[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
-      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
+      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+    }
+
+    :scope[data-ui-separator-state~="selectable"] {
+      min-block-size: var(--ui-control-size-sm);
+      border: 0;
+      background: linear-gradient(var(--ui-separator-color, var(--ui-border-divider)), var(--ui-separator-color, var(--ui-border-divider))) center / 100%
+        var(--ui-border-width) no-repeat;
+      cursor: pointer;
+    }
+    :scope[data-ui-separator-state~="selectable"]:hover {
+      background-color: var(--ui-surface-hover);
+    }
+    :scope[data-ui-separator-state~="selected"] {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
+      border-radius: var(--ui-radius-sm);
     }
 }
 @scope ([data-component~="ui-separator"]) to ([data-component]) {

package/vanilla/UiButton.d.ts

@@ -19,7 +19,7 @@ export interface UiButtonProps {
   target?: string | null;
   tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null;
   type?: "button" | "submit" | "reset" | null;
-  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
+  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | "card" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;