@threadlabs/looma 0.22.14 → 0.23.0

package/editor/icons.d.ts

@@ -22,6 +22,7 @@ export declare const LOOMA_ICONS: {
     'chevron-right': IconNode;
     'code-xml': IconNode;
     columns: IconNode;
+    compass: IconNode;
     'credit-card': IconNode;
     ellipsis: IconNode;
     eraser: IconNode;
@@ -34,6 +35,7 @@ export declare const LOOMA_ICONS: {
     'heading-3': IconNode;
     help: IconNode;
     highlighter: IconNode;
+    history: IconNode;
     image: IconNode;
     info: IconNode;
     italic: IconNode;

package/editor/index.js

@@ -1,7 +1,7 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { A as LoomaChip, C as LoomaMentionSuggestionPluginKey, D as filterLoomaMentionItems, E as MAX_MENTION_RESULT_LIMIT, F as LOOMA_ACTIVE_BLOCK_CLASS, I as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, L as LoomaActiveBlock, M as LOOMA_CALLOUT_TONES, N as LoomaCallout, O as normalizeMentionResultLimit, P as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, R as LoomaActiveBlockPluginKey, S as siteRelativeHref, T as DEFAULT_MENTION_RESULT_LIMIT, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as normalizeLoomaChipColor, k as LOOMA_CHIP_COLORS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as createLoomaMentionExtension, x as createSiteRelativeLinks, y as setActiveTableCellBackground } from "./chunks/extensions.js";
-import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, LayoutDashboard, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -26,6 +26,7 @@ var LOOMA_ICONS = {
 	"chevron-right": ChevronRight,
 	"code-xml": CodeXml,
 	columns: Columns3,
+	compass: Compass,
 	"credit-card": CreditCard,
 	ellipsis: Ellipsis,
 	eraser: Eraser,
@@ -38,6 +39,7 @@ var LOOMA_ICONS = {
 	"heading-3": Heading3,
 	help: CircleQuestionMark,
 	highlighter: Highlighter,
+	history: History,
 	image: Image,
 	info: Info,
 	italic: Italic,

package/package.json

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

package/styles/ui-avatar-group.css

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

package/styles/ui-avatar.css

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

package/styles/ui-badge.css

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

package/styles/ui-button.css

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

package/styles/ui-callout.css

@@ -64,8 +64,9 @@
       padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
       padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
       padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
-      border: var(--ui-callout-border-width, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
-      border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
+      border: var(--ui-callout-border-width, var(--ui-border-width)) solid
+        color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
+      border-inline-start: var(--ui-callout-leading-border-width, var(--ui-accent-line-width)) solid var(--ui-callout-border, var(--_callout-border));
       border-radius: var(--ui-radius-md);
       background: var(--ui-callout-surface, var(--_callout-surface));
       color: var(--ui-callout-text, var(--ui-text-primary));

package/styles/ui-card.css

@@ -9,7 +9,7 @@
       box-sizing: border-box;
       min-inline-size: 0;
       padding: var(--ui-space-5);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
       color: var(--ui-text-primary);
@@ -40,7 +40,7 @@
 
     :scope[data-ui-card-state~="tone=danger"] {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-      border-inline-start: 4px solid var(--ui-danger);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
       background: var(--ui-danger-soft);
     }
 

package/styles/ui-checkbox.css

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

package/styles/ui-combobox.css

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

package/styles/ui-context-menu.css

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

package/styles/ui-description-list.css

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

package/styles/ui-dialog.css

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

package/styles/ui-disclosure.css

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

package/styles/ui-editable.css

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

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

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

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

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

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

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

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

@@ -6,7 +6,7 @@
 
     :scope {
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-dialog);
       box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
       overflow: hidden;
@@ -26,7 +26,7 @@
       align-items: center;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-4);
-      border-bottom: 1px solid var(--ui-border-divider);
+      border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
       font-weight: var(--ui-font-semibold);
@@ -104,7 +104,7 @@
       width: 32px;
       height: 32px;
       background: var(--ui-surface-hover);
-      border: 1px solid var(--ui-border);
+      border: var(--ui-border-width) solid var(--ui-border);
       border-radius: var(--ui-radius-md);
       font-size: var(--ui-font-size-sm);
       font-weight: var(--ui-font-bold);
@@ -151,7 +151,7 @@
 
     .footer {
       padding: var(--ui-space-2) var(--ui-space-3);
-      border-top: 1px solid var(--ui-border-divider);
+      border-top: var(--ui-border-width) solid var(--ui-border-divider);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
     }
@@ -163,8 +163,8 @@
       font-family: var(--ui-font-family-mono, ui-monospace, monospace);
       font-size: var(--ui-font-size-2xs);
       background: var(--ui-surface-hover);
-      border: 1px solid var(--ui-border);
-      border-radius: 3px;
+      border: var(--ui-border-width) solid var(--ui-border);
+      border-radius: var(--ui-radius-sm);
       padding: 0 3px;
       color: var(--ui-text-secondary);
     }

package/styles/ui-editor-table-context-menu.css

@@ -8,7 +8,7 @@
       max-height: min(28rem, calc(100vh - 24px));
       padding: var(--ui-space-2);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       display: flex;
@@ -75,7 +75,7 @@
       width: 1rem;
       height: 1rem;
       border-radius: var(--ui-radius-round);
-      border: 1px solid var(--ui-border);
+      border: var(--ui-border-width) solid var(--ui-border);
       background: var(--_swatch, #fff);
       box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
       flex-shrink: 0;

package/styles/ui-editor-table-overlay.css

@@ -46,7 +46,7 @@
       width: 24px;
       height: 24px;
       padding: 0;
-      border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
+      border: var(--ui-border-width) solid var(--ui-affordance-near-color, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
       color: var(--ui-affordance-near-color, var(--ui-text-secondary));
@@ -89,8 +89,8 @@
     .handle:focus-visible,
     .selector:focus-visible,
     .cell-menu:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
     }
 
     .control.row {
@@ -123,13 +123,13 @@
     }
 
     .control.row .line {
-      inset: -1px 0 auto;
-      height: 2px;
+      inset: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
+      height: var(--ui-accent-line-width);
     }
 
     .control.col .line {
-      inset: 0 auto 0 -1px;
-      width: 2px;
+      inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
+      width: var(--ui-accent-line-width);
     }
 
     .control.active .line {
@@ -201,7 +201,7 @@
       align-items: center;
       justify-content: center;
       padding: 0;
-      border: 1px solid transparent;
+      border: var(--ui-border-width) solid transparent;
       background: transparent;
       color: var(--ui-text-secondary);
       box-shadow: none;
@@ -318,19 +318,19 @@
       position: absolute;
       z-index: 3;
       background: var(--ui-accent-solid);
-      box-shadow: 0 0 0 2px var(--ui-surface);
+      box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
       pointer-events: none;
     }
 
     .drop-indicator.row {
       left: 0;
       width: 100%;
-      height: 2px;
+      height: var(--ui-accent-line-width);
     }
 
     .drop-indicator.column {
       top: 0;
-      width: 2px;
+      width: var(--ui-accent-line-width);
       height: 100%;
     }
 

package/styles/ui-editor-table-toolbar.css

@@ -35,8 +35,8 @@
       gap: var(--ui-space-1);
       padding: var(--ui-space-1);
       background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
-      border: 1px solid var(--ui-border-strong);
-      border-radius: calc(var(--ui-radius-md) + 2px);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
+      border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       backdrop-filter: blur(10px);
     }
@@ -126,7 +126,7 @@
       max-width: min(17rem, calc(100vw - 24px));
       padding: var(--ui-space-1);
       background: var(--ui-surface);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
       display: flex;
@@ -141,7 +141,7 @@
     .menu-section + .menu-section {
       margin-top: var(--ui-space-1);
       padding-top: var(--ui-space-1);
-      border-top: 1px solid var(--ui-border-divider);
+      border-top: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     .menu-heading {
@@ -175,7 +175,7 @@
       width: 14px;
       height: 14px;
       flex: 0 0 14px;
-      border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
+      border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-border) 80%, #000);
       border-radius: var(--ui-radius-round);
       background: var(--_swatch);
     }

package/styles/ui-editor-toolbar.css

@@ -9,7 +9,7 @@
       padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
+      border-bottom: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
     }
 
     /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
@@ -64,7 +64,7 @@
       min-height: auto;
       padding: var(--ui-editor-toolbar-floating-padding, 4px);
       background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
-      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+      border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
       border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
       box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
       backdrop-filter: blur(10px);
@@ -78,7 +78,7 @@
         left: 0;
         right: 0;
         min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
+        border-top: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
         border-bottom: none;
         box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
       }
@@ -87,7 +87,7 @@
         position: relative;
         inset: auto;
         min-height: auto;
-        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+        border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
         border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
         box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
       }

package/styles/ui-floating-action-button.css

@@ -56,8 +56,8 @@
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
     }
 
     :scope:disabled {