@threadlabs/looma 0.23.21 → 0.23.22

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.22",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

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

@@ -20,6 +20,22 @@
       border-block-start: 0;
       border-inline-start: var(--ui-border-width) solid var(--ui-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]) {
 /* This component's hooks style the element they are set on, and never a nested one. */

package/vanilla/UiImage.d.ts

@@ -0,0 +1,21 @@
+// Generated by HTML Next 1.0.0-alpha.26 for Vanilla DOM. Do not edit.
+export interface UiImageEventMap {
+  resize: CustomEvent<{ readonly width: number; readonly height: number; readonly phase: "preview" | "commit" | "cancel"; readonly trigger: "pointer" | "keyboard" }>;
+}
+export interface UiImageElement extends HTMLElement {
+  addEventListener<K extends keyof UiImageEventMap>(type: K, listener: (this: UiImageElement, event: UiImageEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiImageEventMap>(type: K, listener: (this: UiImageElement, event: UiImageEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiImageProps {
+  alt?: string | null;
+  height?: number | null;
+  placement?: "block" | "center" | "wrap-left" | "wrap-right" | null;
+  resizable?: boolean | null;
+  selected?: boolean | null;
+  src?: string | null;
+  width?: number | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiImage(props?: UiImageProps): UiImageElement;

package/vanilla/UiImage.js

@@ -0,0 +1,84 @@
+// Generated by HTML Next 1.0.0-alpha.26 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import * as controller from "../components/ui-image/ui-image.js";
+import "../styles/ui-image.css";
+
+const definition = {...{"contract":{"tag":"ui-image","props":{"alt":{"type":"string","required":false,"target":{"attribute":"alt"},"default":""},"height":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"height"}},"placement":{"type":{"kind":"terminal","name":"keyword"},"values":["block","center","wrap-left","wrap-right"],"required":false,"target":{"attribute":"placement"},"default":"block"},"resizable":{"type":"boolean","required":false,"target":{"attribute":"resizable"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"selected"},"default":false},"src":{"type":"string","required":false,"target":{"attribute":"src"},"default":""},"width":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"width"}}}},"template":{"kind":"element","name":"figure","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"frame"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"img","attributes":[{"kind":"attribute","name":"src","expression":"src","expressionPlan":{"source":"src","ast":{"kind":"id","name":"src"},"dependencies":["src"]}},{"kind":"attribute","name":"alt","expression":"alt","expressionPlan":{"source":"alt","ast":{"kind":"id","name":"alt"},"dependencies":["alt"]}},{"kind":"attribute","name":"width","expression":"width","expressionPlan":{"source":"width","ast":{"kind":"id","name":"width"},"dependencies":["width"]}},{"kind":"attribute","name":"height","expression":"height","expressionPlan":{"source":"height","ast":{"kind":"id","name":"height"},"dependencies":["height"]}}],"children":[]}],"name":"media"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"handles"},{"kind":"attribute","name":"hidden","expression":"not (selected and resizable)","expressionPlan":{"source":"not (selected and resizable)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"selected"},"right":{"kind":"id","name":"resizable"}}},"dependencies":["resizable","selected"]}}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"literal","name":"data-corner","value":"top-left"},{"kind":"literal","name":"aria-label","value":"Resize image from top left"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"literal","name":"data-corner","value":"top-right"},{"kind":"literal","name":"aria-label","value":"Resize image from top right"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"literal","name":"data-corner","value":"bottom-left"},{"kind":"literal","name":"aria-label","value":"Resize image from bottom left"}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"handle"},{"kind":"literal","name":"data-corner","value":"bottom-right"},{"kind":"literal","name":"aria-label","value":"Resize image from bottom right"}],"children":[]}]},{"kind":"slot","fallback":[],"name":"controls"}],"ref":"frame"}]},"declarations":[{"kind":"event","name":"resize","type":"object","shape":{"kind":"object","fields":[{"name":"width","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"height","type":{"kind":"terminal","name":"integer"},"optional":false},{"name":"phase","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["preview","commit","cancel"]},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["pointer","keyboard"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"figure","choices":["figure"]}},source:{file:import.meta.url},css:""};
+
+export function createUiImage(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("figure");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-image");
+  const element0 = document.createElement("div");
+  element0.setAttribute("class", "frame");
+  if (slots["media"] ?? [].length > 0) {
+    for (const child of slots["media"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "media"]);
+      element0.append(node);
+    }
+  } else {
+  const element1 = document.createElement("img");
+  const value0 = componentProps["src"] === undefined ? "" : componentProps["src"];
+  if (value0 === null || value0 === undefined) element1.removeAttribute("src");
+  else element1.setAttribute("src", String(value0));
+  const value1 = componentProps["alt"] === undefined ? "" : componentProps["alt"];
+  if (value1 === null || value1 === undefined) element1.removeAttribute("alt");
+  else element1.setAttribute("alt", String(value1));
+  const value2 = componentProps["width"] === undefined ? null : componentProps["width"];
+  if (value2 === null || value2 === undefined) element1.removeAttribute("width");
+  else element1.setAttribute("width", String(value2));
+  const value3 = componentProps["height"] === undefined ? null : componentProps["height"];
+  if (value3 === null || value3 === undefined) element1.removeAttribute("height");
+  else element1.setAttribute("height", String(value3));
+  element0.append(element1);
+  }
+  const element2 = document.createElement("div");
+  element2.setAttribute("class", "handles");
+  const element3 = document.createElement("button");
+  element3.setAttribute("type", "button");
+  element3.setAttribute("class", "handle");
+  element3.setAttribute("data-corner", "top-left");
+  element3.setAttribute("aria-label", "Resize image from top left");
+  element2.append(element3);
+  const element4 = document.createElement("button");
+  element4.setAttribute("type", "button");
+  element4.setAttribute("class", "handle");
+  element4.setAttribute("data-corner", "top-right");
+  element4.setAttribute("aria-label", "Resize image from top right");
+  element2.append(element4);
+  const element5 = document.createElement("button");
+  element5.setAttribute("type", "button");
+  element5.setAttribute("class", "handle");
+  element5.setAttribute("data-corner", "bottom-left");
+  element5.setAttribute("aria-label", "Resize image from bottom left");
+  element2.append(element5);
+  const element6 = document.createElement("button");
+  element6.setAttribute("type", "button");
+  element6.setAttribute("class", "handle");
+  element6.setAttribute("data-corner", "bottom-right");
+  element6.setAttribute("aria-label", "Resize image from bottom right");
+  element2.append(element6);
+  element0.append(element2);
+  if (slots["controls"] ?? [].length > 0) {
+    for (const child of slots["controls"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      if (node.nodeType === 1) node.setAttribute("data-slotted", "");
+      projected.push([node, "controls"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  return element;
+}
+

package/vanilla/UiSeparator.d.ts

@@ -7,6 +7,8 @@ export interface UiSeparatorElement extends HTMLHRElement {
 }
 export interface UiSeparatorProps {
   orientation?: "horizontal" | "vertical" | null;
+  selectable?: boolean | null;
+  selected?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiSeparator.js

@@ -1,11 +1,13 @@
 // Generated by HTML Next 1.0.0-alpha.26 for Vanilla DOM. Do not edit.
-import { manageGeneratedProp } from "@nextwebwg/html-next/generated-runtime";
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-separator.css";
 
 export function createUiSeparator(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
   const prop0 = componentProps["orientation"] === undefined ? "horizontal" : componentProps["orientation"];
+  const prop1 = componentProps["selectable"] === undefined ? false : componentProps["selectable"];
+  const prop2 = componentProps["selected"] === undefined ? false : componentProps["selected"];
   const element = document.createElement("hr");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -15,9 +17,15 @@ export function createUiSeparator(options = {}) {
   if (value0 === null || value0 === undefined) element.removeAttribute("aria-orientation");
   else element.setAttribute("aria-orientation", String(value0));
   element.setAttribute("data-component", "ui-separator");
-  manageGeneratedProp(element, { name: "orientation", attribute: "data-orientation", value: componentProps["orientation"], default: "horizontal", type: ["horizontal","vertical"], required: false }, (value) => {
+  manageGeneratedProps(element, [
+    { name: "orientation", attribute: "data-orientation", value: componentProps["orientation"], default: "horizontal", type: ["horizontal","vertical"], required: false },
+    { name: "selectable", attribute: "data-selectable", value: componentProps["selectable"], default: false, type: "boolean", required: false },
+    { name: "selected", attribute: "data-selected", value: componentProps["selected"], default: false, type: "boolean", required: false },
+  ], (name, value) => {
+    if (name === "orientation") {
       if (value === null || value === undefined) element.removeAttribute("aria-orientation");
       else element.setAttribute("aria-orientation", String(value));
+    }
   });
   return element;
 }

package/vanilla/index.js

@@ -34,6 +34,7 @@ export * from "./UiFormField.js";
 export * from "./UiGrid.js";
 export * from "./UiIcon.js";
 export * from "./UiIconButton.js";
+export * from "./UiImage.js";
 export * from "./UiInput.js";
 export * from "./UiInputGroup.js";
 export * from "./UiList.js";