@threadlabs/looma 0.1.16 → 0.1.18

package/editor/{chunk-CX4QDKSV.js → chunk-ZOUKEZ77.js}

@@ -16,7 +16,27 @@ var TABLE_CELL_BACKGROUND_OPTIONS = [
   { action: "background-red", label: "Red", value: TABLE_CELL_BACKGROUND_PRESETS.red, swatch: TABLE_CELL_BACKGROUND_PRESETS.red }
 ];
 
+// src/mention-contract.ts
+var DEFAULT_MENTION_RESULT_LIMIT = 8;
+var MAX_MENTION_RESULT_LIMIT = 20;
+function normalizeMentionResultLimit(limit = DEFAULT_MENTION_RESULT_LIMIT) {
+  if (!Number.isFinite(limit)) return DEFAULT_MENTION_RESULT_LIMIT;
+  return Math.min(MAX_MENTION_RESULT_LIMIT, Math.max(1, Math.trunc(limit)));
+}
+function filterLoomaMentionItems(items, query, limit = DEFAULT_MENTION_RESULT_LIMIT) {
+  const normalized = query.trim().toLocaleLowerCase();
+  const boundedLimit = normalizeMentionResultLimit(limit);
+  return items.filter((item) => {
+    if (!normalized) return true;
+    return item.label.toLocaleLowerCase().includes(normalized) || item.detail?.toLocaleLowerCase().includes(normalized);
+  }).slice(0, boundedLimit);
+}
+
 export {
   TABLE_CELL_BACKGROUND_PRESETS,
-  TABLE_CELL_BACKGROUND_OPTIONS
+  TABLE_CELL_BACKGROUND_OPTIONS,
+  DEFAULT_MENTION_RESULT_LIMIT,
+  MAX_MENTION_RESULT_LIMIT,
+  normalizeMentionResultLimit,
+  filterLoomaMentionItems
 };

package/editor/extensions/index.d.ts

@@ -1,6 +1,7 @@
 import { AnyExtension, Editor, Range, Extension } from '@tiptap/core';
 import { d as TableContextMenuActionEventDetail, g as TableOverlayActionEventDetail } from '../table-overlay-DoiLie4h.js';
 export { a as TABLE_CELL_BACKGROUND_PRESETS } from '../table-overlay-DoiLie4h.js';
+import { PluginKey } from '@tiptap/pm/state';
 import { LoomaIconName } from '@threadlabs/looma/core';
 
 /**
@@ -12,6 +13,7 @@ interface DefaultEditorExtensionsOptions {
     placeholder?: string;
     linkOpenOnClick?: boolean;
     imageInline?: boolean;
+    mention?: AnyExtension | false;
 }
 /** Complete Looma table support as one Tiptap extension. */
 declare const LoomaTableKit: AnyExtension;
@@ -93,6 +95,52 @@ declare function normalizeActiveTableColumnWidths(editor: Editor, tableElement:
  */
 declare function handleTableOverlayAction(editor: Editor, detail: TableOverlayActionEventDetail): boolean;
 
+declare const DEFAULT_MENTION_RESULT_LIMIT = 8;
+declare const MAX_MENTION_RESULT_LIMIT = 20;
+interface LoomaMentionItem {
+    id: string;
+    label: string;
+    detail?: string;
+    initials?: string;
+}
+interface LoomaMentionProviderContext {
+    limit: number;
+}
+type LoomaMentionProvider = (query: string, context: LoomaMentionProviderContext) => readonly LoomaMentionItem[] | Promise<readonly LoomaMentionItem[]>;
+interface LoomaMentionMenuSnapshot {
+    active: boolean;
+    items: LoomaMentionItem[];
+    selectedIndex: number;
+    query: string;
+    rect: DOMRect | null;
+    loading: boolean;
+    highlight: ((index: number) => void) | null;
+    select: ((index: number) => void) | null;
+}
+interface LoomaMentionOptions {
+    items?: readonly LoomaMentionItem[] | LoomaMentionProvider;
+    limit?: number;
+    menuId?: string;
+    onStateChange?: (state: LoomaMentionMenuSnapshot) => void;
+}
+declare function normalizeMentionResultLimit(limit?: number): number;
+declare function filterLoomaMentionItems(items: readonly LoomaMentionItem[], query: string, limit?: number): LoomaMentionItem[];
+
+interface MentionPluginState {
+    active?: boolean;
+    query?: string | null;
+    range?: {
+        from: number;
+        to: number;
+    };
+}
+declare const LoomaMentionSuggestionPluginKey: PluginKey<MentionPluginState>;
+/**
+ * Domain-neutral Tiptap mention node and suggestion lifecycle. Applications
+ * provide either a small static list or a bounded async directory provider.
+ */
+declare function createLoomaMentionExtension(options?: LoomaMentionOptions): AnyExtension;
+
 interface LoomaSlashCommandContext {
     editor: Editor;
     range: Range;
@@ -126,4 +174,4 @@ interface LoomaSlashCommand {
 declare const LoomaSlashCommand: Extension<LoomaSlashCommandOptions, any>;
 declare function createLoomaSlashCommandExtension(options?: Partial<LoomaSlashCommandOptions>): Extension<LoomaSlashCommandOptions, any>;
 
-export { type ActiveTableUiState, type DefaultEditorExtensionsOptions, type InsertTableAtRangeOptions, LoomaSlashCommand, type LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, type LoomaSlashCommandOptions, type LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, type TableActionCapabilities, type TableCellAlignment, type TableCellBackground, createLoomaSlashCommandExtension, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+export { type ActiveTableUiState, DEFAULT_MENTION_RESULT_LIMIT, type DefaultEditorExtensionsOptions, type InsertTableAtRangeOptions, type LoomaMentionItem, type LoomaMentionMenuSnapshot, type LoomaMentionOptions, type LoomaMentionProvider, type LoomaMentionProviderContext, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, type LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, type LoomaSlashCommandOptions, type LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, type TableActionCapabilities, type TableCellAlignment, type TableCellBackground, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/editor/extensions/index.js

@@ -1,9 +1,11 @@
 import {
+  LoomaMentionSuggestionPluginKey,
   LoomaSlashCommand,
   LoomaTable,
   LoomaTableCell,
   LoomaTableHeader,
   LoomaTableKit,
+  createLoomaMentionExtension,
   createLoomaSlashCommandExtension,
   getActiveTableCellAlignment,
   getActiveTableCellBackground,
@@ -18,18 +20,27 @@ import {
   setActiveTableCellAlignment,
   setActiveTableCellBackground,
   shouldShowTextFormattingToolbar
-} from "../chunk-OHD4OS32.js";
+} from "../chunk-OXFYYLUC.js";
 import {
-  TABLE_CELL_BACKGROUND_PRESETS
-} from "../chunk-CX4QDKSV.js";
+  DEFAULT_MENTION_RESULT_LIMIT,
+  MAX_MENTION_RESULT_LIMIT,
+  TABLE_CELL_BACKGROUND_PRESETS,
+  filterLoomaMentionItems,
+  normalizeMentionResultLimit
+} from "../chunk-ZOUKEZ77.js";
 export {
+  DEFAULT_MENTION_RESULT_LIMIT,
+  LoomaMentionSuggestionPluginKey,
   LoomaSlashCommand,
   LoomaTable,
   LoomaTableCell,
   LoomaTableHeader,
   LoomaTableKit,
+  MAX_MENTION_RESULT_LIMIT,
   TABLE_CELL_BACKGROUND_PRESETS,
+  createLoomaMentionExtension,
   createLoomaSlashCommandExtension,
+  filterLoomaMentionItems,
   getActiveTableCellAlignment,
   getActiveTableCellBackground,
   getActiveTableUiState,
@@ -40,6 +51,7 @@ export {
   handleTableOverlayAction,
   insertTableAtRange,
   normalizeActiveTableColumnWidths,
+  normalizeMentionResultLimit,
   setActiveTableCellAlignment,
   setActiveTableCellBackground,
   shouldShowTextFormattingToolbar

package/editor/index.d.ts

@@ -1,5 +1,6 @@
 export { A as ActiveCellRect, T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableInsertionAction, f as TableOverlayAction, g as TableOverlayActionEventDetail, h as TableOverlayGeometry, d as TableToolbarActionEventDetail, m as measureTableOverlayGeometry, r as resolveTableCellAt } from './table-overlay-DoiLie4h.js';
-export { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail } from './ui.js';
-export { ActiveTableUiState, DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LoomaSlashCommand, LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, LoomaSlashCommandOptions, LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, TableActionCapabilities, TableCellAlignment, TableCellBackground, createLoomaSlashCommandExtension, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar } from './extensions/index.js';
+export { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail } from './ui.js';
+export { ActiveTableUiState, DEFAULT_MENTION_RESULT_LIMIT, DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LoomaMentionItem, LoomaMentionMenuSnapshot, LoomaMentionOptions, LoomaMentionProvider, LoomaMentionProviderContext, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, LoomaSlashCommandOptions, LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TableActionCapabilities, TableCellAlignment, TableCellBackground, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar } from './extensions/index.js';
 import '@threadlabs/looma/core';
 import '@tiptap/core';
+import '@tiptap/pm/state';

package/editor/index.js

@@ -1,13 +1,15 @@
 import {
   measureTableOverlayGeometry,
   resolveTableCellAt
-} from "./chunk-RTHHTPWK.js";
+} from "./chunk-3QMBK3XZ.js";
 import {
+  LoomaMentionSuggestionPluginKey,
   LoomaSlashCommand,
   LoomaTable,
   LoomaTableCell,
   LoomaTableHeader,
   LoomaTableKit,
+  createLoomaMentionExtension,
   createLoomaSlashCommandExtension,
   getActiveTableCellAlignment,
   getActiveTableCellBackground,
@@ -22,20 +24,29 @@ import {
   setActiveTableCellAlignment,
   setActiveTableCellBackground,
   shouldShowTextFormattingToolbar
-} from "./chunk-OHD4OS32.js";
+} from "./chunk-OXFYYLUC.js";
 import {
+  DEFAULT_MENTION_RESULT_LIMIT,
+  MAX_MENTION_RESULT_LIMIT,
   TABLE_CELL_BACKGROUND_OPTIONS,
-  TABLE_CELL_BACKGROUND_PRESETS
-} from "./chunk-CX4QDKSV.js";
+  TABLE_CELL_BACKGROUND_PRESETS,
+  filterLoomaMentionItems,
+  normalizeMentionResultLimit
+} from "./chunk-ZOUKEZ77.js";
 export {
+  DEFAULT_MENTION_RESULT_LIMIT,
+  LoomaMentionSuggestionPluginKey,
   LoomaSlashCommand,
   LoomaTable,
   LoomaTableCell,
   LoomaTableHeader,
   LoomaTableKit,
+  MAX_MENTION_RESULT_LIMIT,
   TABLE_CELL_BACKGROUND_OPTIONS,
   TABLE_CELL_BACKGROUND_PRESETS,
+  createLoomaMentionExtension,
   createLoomaSlashCommandExtension,
+  filterLoomaMentionItems,
   getActiveTableCellAlignment,
   getActiveTableCellBackground,
   getActiveTableUiState,
@@ -47,6 +58,7 @@ export {
   insertTableAtRange,
   measureTableOverlayGeometry,
   normalizeActiveTableColumnWidths,
+  normalizeMentionResultLimit,
   resolveTableCellAt,
   setActiveTableCellAlignment,
   setActiveTableCellBackground,

package/editor/ui.d.ts

@@ -12,6 +12,14 @@ interface InsertTableEventDetail {
     withHeaderRow: boolean;
 }
 
+/** ui-editor-mention-menu — bounded, accessible mention suggestions. */
+interface MentionMenuHighlightEventDetail {
+    index: number;
+}
+interface MentionMenuSelectEventDetail {
+    index: number;
+}
+
 /**
  * ui-editor-slash-menu — floating slash-command menu.
  * Apps own the command list and suggestion state; Looma owns the chrome.
@@ -37,4 +45,4 @@ interface SlashMenuSelectEventDetail {
  */
 type SlashMenuAnchorRect = Pick<DOMRectReadOnly, "left" | "top" | "right" | "bottom"> | Pick<DOMRectReadOnly, "x" | "y" | "width" | "height">;
 
-export type { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail };
+export type { InsertTableEventDetail, MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail };

package/editor/ui.js

@@ -1,11 +1,11 @@
 import {
   measureTableOverlayGeometry,
   resolveTableCellAt
-} from "./chunk-RTHHTPWK.js";
+} from "./chunk-3QMBK3XZ.js";
 import {
   TABLE_CELL_BACKGROUND_OPTIONS,
   TABLE_CELL_BACKGROUND_PRESETS
-} from "./chunk-CX4QDKSV.js";
+} from "./chunk-ZOUKEZ77.js";
 export {
   TABLE_CELL_BACKGROUND_OPTIONS,
   TABLE_CELL_BACKGROUND_PRESETS,

package/editor.css

@@ -239,10 +239,6 @@
   stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
 
-.looma-editor__table-picker-anchor {
-  display: inline-flex;
-}
-
 .looma-editor__table-picker-popover,
 .looma-editor__table-toolbar-shell,
 .looma-editor__table-menu-shell {
@@ -251,6 +247,9 @@
 
 .looma-editor__table-picker-popover {
   min-width: 220px;
+  padding: 0;
+  border: 0;
+  background: transparent;
 }
 
 .looma-editor__table-toolbar-shell,
@@ -385,6 +384,127 @@ ui-editor-slash-menu {
   user-select: none;
 }
 
+/* Mention menu */
+ui-editor-mention-menu {
+  user-select: none;
+}
+
+.ui-editor-mention-menu {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--ui-surface, #fff);
+  border: 1px solid var(--ui-border, #e5e7eb);
+  border-radius: var(--ui-radius-xl, 1rem);
+  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+}
+
+.ui-editor-mention-menu__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-3, 12px);
+  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+  color: var(--ui-text-secondary, #4b5563);
+  border-bottom: 1px solid var(--ui-border, #e5e7eb);
+  font-size: var(--ui-font-size-xs, 0.75rem);
+  font-weight: var(--ui-font-semibold, 600);
+}
+
+.ui-editor-mention-menu__hint {
+  overflow: hidden;
+  color: var(--ui-text-muted, #6b7280);
+  font-weight: var(--ui-font-normal, 400);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-editor-mention-menu__list {
+  max-height: 280px;
+  padding: var(--ui-space-1, 4px) 0;
+  margin: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+
+.ui-editor-mention-menu__item {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  padding: var(--ui-space-1-5, 6px) var(--ui-space-3, 12px);
+  gap: var(--ui-space-3, 12px);
+  cursor: pointer;
+}
+
+.ui-editor-mention-menu__item--active {
+  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+}
+
+.ui-editor-mention-menu__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  color: var(--ui-accent-active, var(--ui-accent-solid, #2563eb));
+  background: var(--ui-accent-soft, var(--ui-accent-subtle, #eff6ff));
+  border-radius: 999px;
+  font-size: var(--ui-font-size-xs, 0.75rem);
+  font-weight: var(--ui-font-semibold, 600);
+}
+
+.ui-editor-mention-menu__body {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.ui-editor-mention-menu__label,
+.ui-editor-mention-menu__detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-editor-mention-menu__label {
+  color: var(--ui-text-primary, #111827);
+  font-size: var(--ui-font-size-sm, 0.875rem);
+  font-weight: var(--ui-font-medium, 500);
+}
+
+.ui-editor-mention-menu__detail,
+.ui-editor-mention-menu__loading {
+  color: var(--ui-text-muted, #6b7280);
+  font-size: var(--ui-font-size-xs, 0.75rem);
+}
+
+.ui-editor-mention-menu__loading {
+  min-height: 44px;
+  padding: var(--ui-space-3, 12px);
+}
+
+.looma-editor .ProseMirror .looma-mention {
+  padding: 0.08em 0.28em;
+  color: var(--ui-editor-mention-color, var(--ui-accent-active, var(--ui-accent-solid)));
+  background: var(--ui-editor-mention-bg, var(--ui-accent-soft, var(--ui-accent-subtle)));
+  border-radius: var(--ui-radius-sm, 4px);
+  font-weight: var(--ui-font-medium, 500);
+  white-space: nowrap;
+}
+
+@media (max-width: 767px) {
+  .ui-editor-mention-menu {
+    border-bottom: 0;
+    border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+  }
+
+  .ui-editor-mention-menu__list {
+    max-height: calc(60dvh - 48px);
+  }
+}
+
 /* Toolbar shell */
 ui-editor-toolbar {
   position: sticky;
@@ -1178,11 +1298,39 @@ ui-editor-table-overlay {
   border-radius: var(--ui-radius-round, 999px);
 }
 
+.ui-editor-table-overlay__selector::before {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  border-radius: var(--ui-radius-round, 999px);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
+  opacity: var(--ui-affordance-guide-opacity, 0.42);
+  transform: translate(-50%, -50%);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+  pointer-events: none;
+}
+
 .ui-editor-table-overlay__selector .looma-icon {
   display: block;
   width: 14px;
   height: 14px;
   stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+  opacity: 0;
+  transform: scale(0.72);
+  transition:
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
+    transform var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+}
+
+.ui-editor-table-overlay__selector:hover::before,
+.ui-editor-table-overlay__selector:focus-visible::before {
+  opacity: 0;
+}
+
+.ui-editor-table-overlay__selector:hover .looma-icon,
+.ui-editor-table-overlay__selector:focus-visible .looma-icon {
+  opacity: 1;
+  transform: scale(1);
 }
 
 .ui-editor-table-overlay__selector--row {
@@ -1192,6 +1340,11 @@ ui-editor-table-overlay {
   transform: translateY(-50%);
 }
 
+.ui-editor-table-overlay__selector--row::before {
+  width: 2px;
+  height: 16px;
+}
+
 .ui-editor-table-overlay__selector--column {
   top: -9px;
   width: 32px;
@@ -1199,6 +1352,22 @@ ui-editor-table-overlay {
   transform: translateX(-50%);
 }
 
+.ui-editor-table-overlay__selector--column::before {
+  width: 16px;
+  height: 2px;
+}
+
+@media (hover: none), (pointer: coarse) {
+  .ui-editor-table-overlay__selector::before {
+    opacity: 0;
+  }
+
+  .ui-editor-table-overlay__selector .looma-icon {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 .ui-editor-table-overlay__cell-menu {
   width: 24px;
   height: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

package/styles.css

@@ -446,13 +446,7 @@
   }
 
   ui-context-menu {
-    position: fixed;
-    z-index: var(--ui-z-overlay, 1000);
-    min-width: 12rem;
-  }
-
-  ui-context-menu:not([data-open]) {
-    display: none !important;
+    display: contents;
   }
 
   ui-tabs {

package/tokens.css

@@ -1,6 +1,16 @@
 @layer tokens {
   :root {
-    --ui-font-stack-system: system-ui, sans-serif;
+    --ui-font-stack-system:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji";
     --ui-font-stack-neo-grotesque:
       Inter,
       Roboto,
@@ -28,9 +38,11 @@
       Calibri,
       source-sans-pro,
       sans-serif;
-    --ui-font-family-sans: var(--ui-font-stack-neo-grotesque);
+    --ui-font-family-sans: var(--ui-font-stack-system);
     --ui-font-size-xs: 0.75rem;
     --ui-font-size-sm: 0.875rem;
+    /* Dense interactive text: legible at 15px without body-copy spacing. */
+    --ui-font-size-ui: 0.9375rem;
     --ui-font-size-md: 1rem;
     --ui-font-size-lg: 1.125rem;
     --ui-font-size-xl: 1.25rem;