@starci/grammar 0.13.0 → 0.14.0

package/README.md

@@ -144,6 +144,32 @@ offset shadow and a pink decision accent. Text that uses the accent is drawn in
 `OFFSET_POP_TOKEN_DEFAULTS`, `OFFSET_POP_DARK_TOKEN_DEFAULTS`, `OFFSET_POP_BAND_TOKEN_NAMES`,
 `offsetPopGrammar` and `offsetPopRuleConformance`.
 
+## Client-side navigation
+
+Every Grammar root (`GrammarRoot`, `CoreGrammarRoot`, `OffsetPopGrammarRoot`) accepts `navigate(path)` and `useHref(href)` and
+mounts react-aria's `RouterProvider`. Pass your router's functions once at the root and every Grammar `Link`, `Button href`,
+`Breadcrumbs` item, `ListBox`/`Menu` item `href` and `FlowGraph` node `href` navigates inside the app without a reload.
+
+```tsx
+import { useHref, useNavigate } from "react-router-dom"
+import { CoreGrammarRoot } from "@starci/grammar/core"
+
+export const Root = ({ children }: { children: React.ReactNode }) => {
+  const navigate = useNavigate()
+  return <CoreGrammarRoot navigate={(path) => navigate(path)} useHref={useHref}>{children}</CoreGrammarRoot>
+}
+```
+
+Mount the root inside the router. Without `navigate` the links behave as plain anchors.
+
+### FlowGraph layouts
+
+`FlowGraph` places nodes with `layout`: `radial` (the default), `layered` (a DAG in layers) or `manual` (each node's `position`).
+`direction="TB" | "LR"` puts the target handle on the entering side and the source handle on the leaving side so edges run along the
+layout, and selects `layered` when no layout is given. `headers={[{ label, at }]}` draws a column header above each layer for `LR` and
+a lane header beside it for `TB` (`at` is the layer index in `layered`, graph units in `manual`). `height` takes `sm | md | lg`, a number
+(pixels) or any CSS length. A node with `href` is a link through the root's router and one keyboard stop.
+
 ## Family scope and the overlay portal rule
 
 A family paints only inside its root. Each family stylesheet is scoped to

package/dist/.build-stamp.json

@@ -1,9 +1,9 @@
 {
   "schema": "starci/grammar-build-stamp@1",
   "package": "@starci/grammar",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "algorithm": "starci/grammar-source-digest@1",
-  "sourceDigest": "sha256:8a06b89d40ec531120f934a25402aa13182983037e8727b1f8973a3fb24332e4",
-  "distDigest": "sha256:1ef67bc0b8b06f2fb022946ab6b449a7df3a9850e552f4a694b746ee11854136",
-  "builtAt": "2026-10-27T15:45:07.025Z"
+  "sourceDigest": "sha256:abe48ef178e3f654d64eda3138e1bbc98b0d48d7f8fd27c09432d9966a6a99ec",
+  "distDigest": "sha256:d0879914392be475eacac5872c11615e3528982f7bae31376fc96801d23c97c9",
+  "builtAt": "2026-10-27T19:22:38.977Z"
 }

package/dist/common/components-forms.css

@@ -124,58 +124,42 @@
     }
 
     /*
-     * Loading field (knowledge STATE-8, Select and Textarea `isSkeleton`): the label stays real, the control is one
-     * Skeleton block of the loaded control's height (the select trigger 2.5rem, with the touch floor below; the textarea
-     * `rows` at 1.25rem a line plus its padding, never under the 5rem field minimum). Not focusable: no control exists.
+     * Loading field (knowledge STATE-8) with skeleton parity: the control renders its ready anatomy inside
+     * `.starci-core-field-skeleton-scope` (layout-neutral, inert), so label, description and control box keep the ready
+     * geometry by construction. Every control box in the scope is painted as a Skeleton (the vendor skeleton tint and
+     * shimmer); what it holds - a value, a placeholder, an indicator, a thumb - is not drawn. Its border stays, so a
+     * family's outline keeps the field box.
      */
-    /* The loading root (Field, Select, NumberField, SearchField, SegmentedControl, CheckboxGroup, Switch, Textarea): inert geometry that can shrink inside its row or column. */
-    .starci-core-field-skeleton {
-        min-width: 0;
-        pointer-events: none;
-        user-select: none;
-    }
-
-    .starci-core-field-skeleton-control { display: block; min-width: 0; }
+    .starci-core-field-skeleton-scope { display: contents; }
 
-    .starci-core-field-skeleton-control > .starci-core-skeleton {
-        block-size: 100%;
-        aspect-ratio: auto;
+    .starci-core-field-skeleton-scope :is([data-grammar-field-control="true"]:not(.starci-core-choice-group-options), .starci-core-input-field, [data-grammar-choice-control], [data-grammar-tag-id]) {
+        position: relative;
+        overflow: hidden;
+        background: color-mix(in oklab, var(--surface-tertiary, #e4e4e7) 70%, transparent) !important;
+        color: transparent !important;
+        user-select: none;
     }
 
-    .starci-core-field-skeleton-control:is([data-grammar-field-skeleton="input"]) { block-size: 2.5rem; }
-
-    /* The select trigger is HeroUI's own (min-h-9). */
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="select"] { block-size: var(--starci-core-control-min-size, 2.5rem); }
-
-    /* Joined segments: one block, a segment-width (5rem) per option, never wider than the field; `fill` takes the whole row. */
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="segmented"] {
-        block-size: 2.5rem;
-        inline-size: min(100%, calc(var(--starci-core-skeleton-segments, 2) * 5rem));
+    /* A control box whose rounded part is inside it (a ComboBox or SegmentedControl group, a Field control slot) takes the field radius. */
+    .starci-core-field-skeleton-scope [data-grammar-field-control="true"]:is(.starci-core-combo-box-group, .starci-core-segmented-control-group, .starci-core-field-control) {
+        border-radius: var(--field-radius, calc(var(--radius, 0.5rem) * 1.5));
     }
 
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="segmented"][data-width="fill"] { inline-size: 100%; }
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="segmented"][data-grammar-segmented-size="control"] { block-size: var(--starci-core-control-min-size, 2.75rem); }
-
-    /* A checkbox box and a switch track beside their real labels. */
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="choice"] { flex: none; block-size: 1rem; inline-size: 1rem; }
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="switch"] { flex: none; block-size: 1.25rem; inline-size: 2rem; }
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="switch"][data-grammar-switch-size="lg"] { block-size: 1.5rem; inline-size: 3rem; }
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="switch"][data-grammar-switch-size="control"] { block-size: var(--starci-core-control-min-size, 2.5rem); inline-size: 4.5rem; }
+    .starci-core-field-skeleton-scope :is([data-grammar-field-control="true"]:not(.starci-core-choice-group-options), [data-grammar-choice-control], [data-grammar-tag-id]) > * { visibility: hidden; }
+    .starci-core-field-skeleton-scope :is(input, textarea)::placeholder { color: transparent; }
 
-    .starci-core-field-skeleton-choice-label {
-        color: var(--foreground, CanvasText);
-        font-size: 0.875rem;
-        line-height: 1.25;
-    }
-
-    .starci-core-field-skeleton-control[data-grammar-field-skeleton="textarea"] {
-        block-size: max(5rem, calc(var(--starci-core-skeleton-rows, 4) * 1.25rem + 1rem));
+    .starci-core-field-skeleton-scope :is([data-grammar-field-control="true"]:not(.starci-core-choice-group-options, textarea), [data-grammar-choice-control], [data-grammar-tag-id])::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        visibility: visible;
+        background-image: linear-gradient(to right, transparent, var(--surface-tertiary, #e4e4e7), transparent);
+        translate: -100%;
+        animation: skeleton 2s linear infinite;
     }
 
-    @media (pointer: coarse), (max-width: 40rem) {
-        .starci-core-field-skeleton-control:is([data-grammar-field-skeleton="select"], [data-grammar-field-skeleton="input"], [data-grammar-field-skeleton="segmented"]) {
-            min-block-size: var(--starci-core-control-min-size, 2.5rem);
-        }
+    @media (prefers-reduced-motion: reduce) {
+        .starci-core-field-skeleton-scope :is([data-grammar-field-control="true"], [data-grammar-choice-control])::after { animation: none; content: none; }
     }
 
     .starci-core-combo-box-group,

package/dist/common/components-list-panel.css

@@ -21,6 +21,14 @@
         line-clamp: 2;
     }
 
+    .grammar-common-root [data-slot="description"][data-grammar-description-lines="wrap"] {
+        display: block;
+        -webkit-line-clamp: none;
+        line-clamp: none;
+        overflow: visible;
+        overflow-wrap: anywhere;
+    }
+
     .grammar-common-root [data-slot="description"][data-grammar-description-lines="3"] {
         -webkit-line-clamp: 3;
         line-clamp: 3;

package/dist/common/components-navigation.css

@@ -112,7 +112,7 @@
     /* A crumb whose label is not known yet (knowledge STATE-8): a short Skeleton text line of the label's size. */
     .starci-core-breadcrumb-skeleton { display: inline-block; inline-size: 6rem; }
     .starci-core-breadcrumb-skeleton > .starci-core-skeleton-group { gap: 0; }
-    .starci-core-breadcrumb-skeleton .starci-core-skeleton { block-size: 0.875rem; }
+    .starci-core-breadcrumb-skeleton .starci-core-skeleton { --starci-core-skeleton-line: 0.875rem; }
 
     @media (max-width: 30rem) {
         .starci-core-breadcrumb-label {
@@ -269,7 +269,7 @@
     .starci-core-step-skeleton-marker { border: 0; background: transparent; }
     .starci-core-step-skeleton-label { display: block; inline-size: 5rem; }
     .starci-core-step-skeleton-label > .starci-core-skeleton-group { gap: 0; }
-    .starci-core-step-skeleton-label .starci-core-skeleton { block-size: 0.875rem; }
+    .starci-core-step-skeleton-label .starci-core-skeleton { --starci-core-skeleton-line: 0.875rem; }
 
     .starci-core-step-copy {
         display: flex;
@@ -779,6 +779,26 @@
         white-space: nowrap;
     }
 
+    /* The reorder layer's event wrapper takes no box: the TagGroup lays out as if it were not there. */
+    .starci-core-tag-group-reorder {
+        display: contents;
+    }
+
+    /* Reorderable tags: the grab cursor, the lifted tag and the tag a drop would replace. */
+    .starci-core-tag-group[data-grammar-tag-reorderable="true"] .starci-core-tag[draggable="true"] {
+        cursor: grab;
+    }
+
+    .starci-core-tag-group[data-grammar-tag-reorderable="true"] .starci-core-tag[data-grammar-tag-dragging="true"] {
+        opacity: 0.5;
+        cursor: grabbing;
+    }
+
+    .starci-core-tag-group[data-grammar-tag-reorderable="true"] .starci-core-tag[data-grammar-tag-drop-target="true"] {
+        outline: 2px solid var(--accent, Highlight);
+        outline-offset: 2px;
+    }
+
     /*
      * Selectable chips (0.9.6, selectionMode single or multiple): a group of choices carries a 1px inset ring,
      * --border when unselected and --accent when selected. The chip face, hover and selected paint are HeroUI's own.
@@ -850,6 +870,15 @@
         width: max-content;
     }
 
+    /*
+     * A table that hosts editors, or has folded its low columns for a narrow container, fits the container instead:
+     * at max-content an editor's TagGroup never wraps its chips and the folded text never wraps, so the table ran
+     * past its container. It still scrolls sideways once its columns cannot shrink further.
+     */
+    .starci-core-data-table:is([data-grammar-table-editors="true"], [data-grammar-table-narrow="true"]) .starci-core-data-table-content {
+        width: 100%;
+    }
+
     .starci-core-data-table[data-grammar-table-sticky="true"] .starci-core-data-table-header {
         position: sticky;
         z-index: 1;
@@ -892,6 +921,65 @@
         box-sizing: border-box;
     }
 
+    /* A whole-row link target reads as one pressable row. */
+    .starci-core-data-table-row[data-grammar-table-row-link="true"] {
+        cursor: pointer;
+    }
+
+    /* An editor cell hosts a field; the field keeps its own control height and fills the column, never wider. */
+    .starci-core-data-table-editor {
+        display: flex;
+        min-width: 0;
+        max-inline-size: 100%;
+        align-items: center;
+        white-space: normal;
+    }
+
+    .starci-core-data-table-editor > * {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    /*
+     * A text input's intrinsic width is its `size` (20 characters, about 11rem), which an auto-layout table takes as the
+     * column's minimum: a NumberField editor alone pushed the table past its container, even in narrow mode. In an editor
+     * cell the input asks for no width of its own and fills its track through its minimum (a percentage minimum does not
+     * count toward the column's intrinsic width), so the column can shrink to the room the table has and the input still
+     * fills what it gets, never less than three characters beside its own inline padding.
+     */
+    .starci-core-data-table-editor input {
+        inline-size: 0;
+        min-inline-size: max(calc(3ch + 1.5rem), 100%);
+    }
+
+    /* Narrow mode: low-priority columns stack under the first column's content as secondary text. */
+    .starci-core-data-table-secondary {
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+        margin-block-start: 0.25rem;
+        color: var(--muted, GrayText);
+        font-size: 0.875em;
+        white-space: normal;
+    }
+
+    /* A long value (an email, an id) may break anywhere, so the folded text never sets the first column's minimum. */
+    .starci-core-data-table-secondary-item {
+        display: flex;
+        min-width: 0;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        overflow-wrap: anywhere;
+    }
+
+    .starci-core-data-table-secondary-value {
+        min-width: 0;
+    }
+
+    .starci-core-data-table-secondary-label::after {
+        content: ":";
+    }
+
     .starci-core-drag-item {
         display: flex;
         min-width: 0;
@@ -1021,6 +1109,9 @@
         line-height: 1.25rem;
     }
 
+    /* A loading stat keeps its unit's place, unseen (skeleton parity). */
+    .starci-core-description-list[data-loading="true"] .starci-core-description-unit { visibility: hidden; }
+
     .starci-core-description-meta {
         min-width: 0;
         margin: 0;
@@ -1112,12 +1203,12 @@
         display: flex;
         min-width: 0;
         flex-direction: column;
+        gap: 0.25rem;
     }
 
     /* Loading options (knowledge STATE-8): a label line and a description line, at the loaded option's height. */
     .starci-core-list-box-skeleton-option {
         display: flex;
-        min-block-size: 2.25rem;
         align-items: center;
         padding-inline: 0.5rem;
         padding-block: 0.375rem;
@@ -1128,8 +1219,10 @@
     .starci-core-list-box-skeleton-option .starci-core-list-box-description { display: block; }
     .starci-core-list-box-skeleton-option .starci-core-list-box-label > .starci-core-skeleton-group { inline-size: 55%; }
     .starci-core-list-box-skeleton-option .starci-core-list-box-description > .starci-core-skeleton-group { inline-size: 80%; }
-    .starci-core-list-box-skeleton-option .starci-core-skeleton { block-size: 0.75rem; }
-    .starci-core-list-box-skeleton-option .starci-core-skeleton-group { gap: 0; margin-block: 0.125rem; }
+    /* Skeleton parity: each line takes the line box of the vendor label (0.875rem / 1.25rem) and description (0.75rem / 1rem). */
+    .starci-core-list-box-skeleton-option .starci-core-list-box-label { font-size: 0.875rem; line-height: 1.25rem; }
+    .starci-core-list-box-skeleton-option .starci-core-list-box-description { font-size: 0.75rem; line-height: 1rem; }
+    .starci-core-list-box-skeleton-option .starci-core-skeleton-group { gap: 0; }
 
     .starci-core-list-box-empty {
         padding: var(--grammar-section-gap, 1rem);
@@ -1379,6 +1472,34 @@
         background: currentColor;
     }
 
+    /*
+     * Attention entry: the whole row takes a tone background (the marker alone is too small to catch the eye). The
+     * row grows 0.5rem each side and gives the same back as negative margin, so the markers and the copy keep their
+     * column; the connector moves with the padding and reaches the next entry.
+     */
+    .starci-core-timeline-item[data-grammar-attention="true"] {
+        --starci-core-timeline-attention-tone: var(--warning, CanvasText);
+        margin-inline: -0.5rem;
+        margin-block-end: 0.5rem;
+        padding: 0.5rem;
+        border-radius: 0.75rem;
+        background: color-mix(in oklab, var(--starci-core-timeline-attention-tone) 14%, transparent);
+    }
+
+    .starci-core-timeline-item[data-grammar-attention="true"][data-grammar-timeline-state="negative"] { --starci-core-timeline-attention-tone: var(--danger, CanvasText); }
+    .starci-core-timeline-item[data-grammar-attention="true"][data-grammar-timeline-state="affirmative"] { --starci-core-timeline-attention-tone: var(--success, CanvasText); }
+    .starci-core-timeline-item[data-grammar-attention="true"][data-grammar-timeline-state="informative"] { --starci-core-timeline-attention-tone: var(--info, CanvasText); }
+
+    .starci-core-timeline-item[data-grammar-attention="true"]:not(:last-child)::before {
+        top: 2rem;
+        bottom: -0.5rem;
+        inset-inline-start: calc(1.25rem - 1px);
+    }
+
+    .starci-core-timeline-item[data-grammar-attention="true"] .starci-core-timeline-marker {
+        background: transparent;
+    }
+
     /* Loading timeline (knowledge STATE-8): static mark and connector tint, three Skeleton lines of the entry's rhythm. */
     .starci-core-timeline-skeleton-marker > .starci-core-skeleton { inline-size: 1rem; block-size: 1rem; }
     .starci-core-timeline[data-loading="true"] .starci-core-timeline-item:not(:last-child)::before { background: color-mix(in srgb, var(--foreground, CanvasText) 9%, transparent); }
@@ -1386,7 +1507,7 @@
     .starci-core-timeline-item[data-grammar-skeleton="true"] .starci-core-timeline-time > .starci-core-skeleton-group { inline-size: 25%; }
     .starci-core-timeline-item[data-grammar-skeleton="true"] .starci-core-timeline-description > .starci-core-skeleton-group { inline-size: 80%; }
     .starci-core-timeline-item[data-grammar-skeleton="true"] .starci-core-skeleton-group { gap: 0; }
-    .starci-core-timeline-item[data-grammar-skeleton="true"] .starci-core-skeleton { block-size: 0.8125rem; }
+    .starci-core-timeline-item[data-grammar-skeleton="true"] .starci-core-skeleton { --starci-core-skeleton-line: 0.8125rem; }
 
     .starci-core-timeline-copy {
         display: flex;
@@ -1395,10 +1516,13 @@
         gap: 0.125rem;
     }
 
+    /* The list title scale (the ListBox and panel row label, text-sm), not whatever size the page body inherits. */
     .starci-core-timeline-title {
         margin: 0;
         overflow-wrap: anywhere;
+        font-size: 0.875rem;
         font-weight: 600;
+        line-height: 1.25rem;
     }
 
     .starci-core-timeline-time,
@@ -1479,6 +1603,9 @@
 
     .starci-core-flow-graph[data-grammar-flow-height="sm"] .starci-core-flow-graph-canvas { block-size: 16rem; }
     .starci-core-flow-graph[data-grammar-flow-height="lg"] .starci-core-flow-graph-canvas { block-size: 32rem; }
+    .starci-core-flow-graph[data-grammar-flow-height="custom"] .starci-core-flow-graph-canvas { block-size: var(--starci-flow-height, 24rem); }
+    /* The readable fit grew the canvas to the graph's aspect at its width rather than shrink the text below 12px. */
+    .starci-core-flow-graph[data-grammar-flow-grown="true"] .starci-core-flow-graph-canvas { block-size: var(--starci-flow-grown-height); }
 
     .starci-core-flow-graph-loading > .starci-core-skeleton { block-size: 100%; aspect-ratio: auto; }
 
@@ -1568,6 +1695,36 @@
         line-height: 1.25;
     }
 
+    .starci-core-flow-graph-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        min-inline-size: 0;
+        border-radius: inherit;
+        color: inherit;
+        text-decoration: none;
+        outline: none;
+        cursor: pointer;
+    }
+
+    .starci-core-flow-graph-node:has(.starci-core-flow-graph-link:focus-visible) {
+        outline: 2px solid var(--focus, var(--starci-core-focus, Highlight));
+        outline-offset: 2px;
+    }
+
+    .starci-core-flow-graph-header {
+        padding: 0.125rem 0.625rem;
+        color: var(--muted, GrayText);
+        font-size: 0.6875rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        pointer-events: none;
+    }
+
+    .starci-core-flow-graph-header[data-direction="TB"] { text-align: end; }
+
     .starci-core-flow-graph-node[data-size="sm"] { padding: 0.25rem 0.625rem; font-size: 0.75rem; }
     .starci-core-flow-graph-node[data-size="lg"] { padding: 0.625rem 1.25rem; font-size: 1rem; font-weight: 600; }
     .starci-core-flow-graph-node[data-tone="accent"] { --starci-flow-tint: var(--accent-soft, transparent); --starci-flow-ink: var(--accent-soft-foreground, CanvasText); }

package/dist/common/components-overlays.css

@@ -547,6 +547,14 @@
         flex: none;
     }
 
+    /* A loading Alert (skeleton parity): the glyph keeps its place as a round Skeleton tint. */
+    .starci-core-alert[data-loading="true"] .starci-core-alert-indicator {
+        border-radius: 999px;
+        background: color-mix(in oklab, var(--surface-tertiary, #e4e4e7) 70%, transparent);
+    }
+
+    .starci-core-alert[data-loading="true"] .starci-core-alert-indicator > * { visibility: hidden; }
+
     .starci-core-alert-title {
         margin: 0;
     }
@@ -663,11 +671,16 @@
     }
 
     /* ---------------------------------------------------------------- skeleton */
+    /*
+     * Skeleton parity: a text skeleton takes the line box of the copy it stands for. Each line occupies exactly `1lh` of
+     * the inherited type (the bar, `--starci-core-skeleton-line` tall, is centred in it by its margins), so `lines={n}`
+     * is as tall as n lines of that copy. A context sizes the bar through the variable, never the block size.
+     */
     .starci-core-skeleton-group {
         display: flex;
         width: 100%;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: 0;
     }
 
     .starci-core-skeleton {
@@ -678,9 +691,32 @@
 
     .starci-core-skeleton-group > .starci-core-skeleton {
         width: 100%;
-        height: 0.875em;
+        height: var(--starci-core-skeleton-line, 0.875em);
+        margin-block: calc((1lh - var(--starci-core-skeleton-line, 0.875em)) / 2);
     }
 
+    /*
+     * The measured placeholder (internal `SkeletonPlaceholder`): the ready content is laid out unseen and the shimmer
+     * paints its box. A text run is an inline block one line box per line (`vertical-align: top` keeps it from growing
+     * the line box); a block or circle sizes to its control or mark.
+     */
+    .starci-core-skeleton-placeholder {
+        display: inline-block;
+        max-inline-size: 100%;
+        vertical-align: top;
+        color: transparent;
+        user-select: none;
+    }
+
+    .starci-core-skeleton-placeholder > * { visibility: hidden; }
+    .starci-core-skeleton-placeholder[data-shape="block"] { display: inline-flex; }
+    .starci-core-skeleton-placeholder[data-shape="circle"] { display: inline-flex; border-radius: 999px; }
+    .starci-core-skeleton-placeholder[data-shape="region"] { display: block; }
+    .starci-core-skeleton-placeholder[data-shape="text"]:empty { inline-size: min(100%, 8rem); block-size: 1lh; }
+
+    /* A skeleton root that keeps its content as a measured placeholder (Button, Badge, StatusDot) paints none of it. */
+    :is(.starci-core-button, [data-component="Badge"], [data-component="StatusDot"])[data-loading="true"] > * { visibility: hidden; }
+
     .starci-core-skeleton[data-grammar-skeleton-line="last"] {
         width: 60%;
     }
@@ -793,6 +829,9 @@
     /* Loading meter (knowledge STATE-8, `isSkeleton`): the label stays real, the bar is a static Skeleton bar of the track height. */
     .starci-core-meter-skeleton-bar { display: block; block-size: 0.5rem; overflow: hidden; border-radius: 999px; }
 
+    /* `size="sm"`: the thin track is HeroUI's own `.meter--sm` (h-1); only the loading bar, which is ours, follows it. */
+    .starci-core-meter-skeleton[data-size="sm"] .starci-core-meter-skeleton-bar { block-size: 0.25rem; }
+
     .starci-core-meter-skeleton-bar > .starci-core-skeleton {
         block-size: 100%;
         aspect-ratio: auto;

package/dist/common/registry.d.ts

@@ -15,21 +15,21 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     readonly BottomNav: ({ label, items, currentId, onSelect, position, visibility, className }: import("./renderers-navigation.js").BottomNavProps) => import("react").JSX.Element;
     readonly Breadcrumbs: ({ label, items, separator, onAction, className }: import("./renderers-navigation.js").BreadcrumbsProps) => import("react").JSX.Element;
     readonly Calendar: ({ label, value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, isDisabled, isReadOnly, previousLabel, nextLabel, className, }: import("./renderers-navigation.js").CalendarProps) => import("react").JSX.Element;
-    readonly DataTable: <Row extends import("./renderers-navigation.js").DataTableRow>({ label, columns, rows, renderCell, getCellInteraction, sort, onSortChange, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel, selectRowLabel, isLoading, loadingContent, loadingRows, emptyContent, stickyHeader, maxBlockSize, onRowAction, className, }: import("./renderers-navigation.js").DataTableProps<Row>) => import("react").JSX.Element;
+    readonly DataTable: <Row extends import("./renderers-navigation.js").DataTableRow>({ label, columns, rows, renderCell, getCellInteraction, sort, onSortChange, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel, selectRowLabel, isLoading, loadingContent, loadingRows, emptyContent, stickyHeader, maxBlockSize, onRowAction, collapseBelow, className, }: import("./renderers-navigation.js").DataTableProps<Row>) => import("react").JSX.Element;
     readonly DescriptionList: (props: import("./renderers-navigation.js").DescriptionListProps) => import("react").JSX.Element;
     readonly Disclosure: ({ title, children, summary, isExpanded, defaultExpanded, onExpandedChange, isDisabled, headingLevel, className, }: import("./renderers-navigation.js").DisclosureProps) => import("react").JSX.Element;
     readonly DragItem: ({ children, isDisabled, onDragStart, onDragEnd, isSelected, isInvalid, isDashed, leadingColor }: import("./renderers-navigation.js").DragItemProps) => import("react").JSX.Element;
-    readonly FlowGraph: ({ label, nodes, edges, selectedId, onSelect, height, isInteractive, showControls, layout, emptyLabel, isLoading, className, }: import("./renderers-navigation.js").FlowGraphProps) => import("react").JSX.Element;
+    readonly FlowGraph: ({ label, nodes, edges, selectedId, onSelect, height, fit, isInteractive, showControls, layout: layoutProp, direction, headers, emptyLabel, isLoading, className, }: import("./renderers-navigation.js").FlowGraphProps) => import("react").JSX.Element;
     readonly Footer: ({ label, brand, groups, legal, externalHint, children, className }: import("./renderers-navigation.js").FooterProps) => import("react").JSX.Element;
     readonly IdentityLockup: ({ title, subtitle, logoSrc, markShape, size, onPress, isDisabled }: import("./renderers-navigation.js").IdentityLockupProps) => import("react").JSX.Element;
     readonly Image: ({ src, alt, aspect, fit, fallback, loading, srcSet, sizes, width, height, onLoadStateChange, plate, className, ...assetSlot }: import("./renderers-navigation.js").ImageProps) => import("react").JSX.Element;
     readonly Link: ({ children, href, kind, isCurrent, visited, externalHint, externalIcon, isDisabled, onFollow, className, }: import("./renderers-navigation.js").LinkProps) => import("react").JSX.Element;
-    readonly ListBox: ({ label, items, sections, inset, size, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onAction, selectionIndicator, emptyContent, isLoading, loadingRows, className, }: import("./renderers-navigation.js").ListBoxProps) => import("react").JSX.Element;
+    readonly ListBox: ({ label, items, sections, inset, size, descriptionLines, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onAction, selectionIndicator, emptyContent, isLoading, loadingRows, className, }: import("./renderers-navigation.js").ListBoxProps) => import("react").JSX.Element;
     readonly Pagination: ({ label, page, pageCount, onPageChange, siblingCount, previousLabel, nextLabel, pageLabel, summary, className, }: import("./renderers-navigation.js").PaginationProps) => import("react").JSX.Element;
     readonly PlainPressable: ({ children, "aria-label": ariaLabel, onPress, isDisabled, shape, size, className }: import("./renderers-navigation.js").PlainPressableProps) => import("react").JSX.Element;
     readonly Rating: ({ label, value, defaultValue, onChange, max, isReadOnly, isDisabled, valueLabel, icon, name, className, }: import("./renderers-navigation.js").RatingProps) => import("react").JSX.Element;
     readonly Stepper: ({ label, steps, currentStepId, orientation, onStepSelect, stateLabel, renderMarker, className, isLoading, }: import("./renderers-navigation.js").StepperProps) => import("react").JSX.Element;
-    readonly TagGroup: ({ label, items, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onRemove, removeLabel, emptyContent, size, className, }: import("./renderers-navigation.js").TagGroupProps) => import("react").JSX.Element;
+    readonly TagGroup: (props: import("./renderers-navigation.js").TagGroupProps) => import("react").JSX.Element;
     readonly Timeline: ({ label, items, className, isLoading, loadingRows }: import("./renderers-navigation.js").TimelineProps) => import("react").JSX.Element;
     readonly TopBar: ({ brand, navigation, actions, menu, position, className, ...headerProps }: import("./renderers-navigation.js").TopBarProps) => import("react").JSX.Element;
     readonly Video: ({ src, title, poster, captions, crossOrigin, className }: import("./renderers-navigation.js").VideoProps) => import("react").JSX.Element;
@@ -40,7 +40,7 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     readonly Drawer: ({ title, description, children, footer, trigger, closeLabel, placement, showHandle, isDismissable, isKeyboardDismissDisabled, ...openState }: import("./renderers-overlays.js").DrawerProps) => import("react").JSX.Element;
     readonly DropdownMenu: ({ trigger, entries, onAction, placement, ...openState }: import("./renderers-overlays.js").DropdownMenuProps) => import("react").JSX.Element;
     readonly Kbd: ({ keys }: import("./renderers-overlays.js").KbdProps) => import("react").JSX.Element;
-    readonly Meter: ({ label, value, minValue, maxValue, valueLabel, tone, isLabelHidden, segments, isSkeleton, }: import("./renderers-overlays.js").MeterProps) => import("react").JSX.Element;
+    readonly Meter: ({ label, value, minValue, maxValue, valueLabel, tone, isLabelHidden, segments, isSkeleton, size, }: import("./renderers-overlays.js").MeterProps) => import("react").JSX.Element;
     readonly Popover: ({ trigger, children, placement, showArrow, title, label, ...openState }: import("./renderers-overlays.js").PopoverProps) => import("react").JSX.Element;
     readonly ProgressCircle: ({ label, value, isIndeterminate, size }: import("./renderers-overlays.js").ProgressCircleProps) => import("react").JSX.Element;
     readonly Skeleton: ({ shape, lines, ratio, size }: import("./renderers-overlays.js").SkeletonProps) => import("react").JSX.Element;
@@ -48,41 +48,42 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     readonly Toast: ({ toast, dismissLabel, onDismiss, isPaused }: import("./renderers-overlays.js").ToastProps) => import("react").JSX.Element;
     readonly Toaster: ({ label, dismissLabel, queue, placement, maxVisible }: import("./renderers-overlays.js").ToasterProps) => import("react").JSX.Element;
     readonly ButtonGroup: ({ label, children, orientation, isDisabled, width }: import("./renderers-forms.js").ButtonGroupProps) => import("react").JSX.Element;
-    readonly Checkbox: ({ value, isSelected, defaultSelected, onSelectedChange, isIndeterminate, variant: requestedVariant, ...field }: import("./renderers-forms.js").CheckboxProps) => import("react").JSX.Element;
-    readonly CheckboxGroup: ({ options, value, defaultValue, onValueChange, orientation, variant: requestedVariant, isSkeleton, ...field }: import("./renderers-forms.js").CheckboxGroupProps) => import("react").JSX.Element;
-    readonly ComboBox: ({ id, options, placeholder, value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue, emptyState, isPending, menuTrigger, variant: requestedVariant, ...field }: import("./renderers-forms.js").ComboBoxProps) => import("react").JSX.Element;
+    readonly Checkbox: ({ isSkeleton, ...props }: import("./renderers-forms.js").CheckboxProps) => import("react").JSX.Element;
+    readonly CheckboxGroup: ({ isSkeleton, ...props }: import("./renderers-forms.js").CheckboxGroupProps) => import("react").JSX.Element;
+    readonly ComboBox: ({ isSkeleton, ...props }: import("./renderers-forms.js").ComboBoxProps) => import("react").JSX.Element;
     readonly DateField: ({ value, defaultValue, onValueChange, minValue, maxValue, granularity, variant: requestedVariant, ...field }: import("./renderers-forms.js").DateFieldProps) => import("react").JSX.Element;
     readonly DatePicker: ({ value, defaultValue, onValueChange, minValue, maxValue, isDateUnavailable, granularity, variant: requestedVariant, ...field }: import("./renderers-forms.js").DatePickerProps) => import("react").JSX.Element;
     readonly DateRangePicker: ({ value, defaultValue, onValueChange, minValue, maxValue, isDateUnavailable, allowsNonContiguousRanges, granularity, startName, endName, variant: requestedVariant, ...field }: import("./renderers-forms.js").DateRangePickerProps) => import("react").JSX.Element;
-    readonly Field: ({ id: idProp, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, children, }: import("./renderers-forms.js").FieldProps) => import("react").JSX.Element;
+    readonly Field: ({ isSkeleton, ...props }: import("./renderers-forms.js").FieldProps) => import("react").JSX.Element;
     readonly Fieldset: ({ legend, isLegendHidden, description, errorMessage, children, actions, isDisabled }: import("./renderers-forms.js").FieldsetProps) => import("react").JSX.Element;
     readonly FileDropzone: ({ id: idProp, accept, multiple, onFilesChange, prompt, icon, hideFileList, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, }: import("./renderers-forms.js").FileDropzoneProps) => import("react").JSX.Element;
     readonly Form: ({ children, label, id, onSubmit, onReset, action, method, validationErrors, validationBehavior, isPending, }: import("./renderers-forms.js").FormProps) => import("react").JSX.Element;
-    readonly NumberField: ({ id, placeholder, value, defaultValue, onValueChange, minValue, maxValue, step, formatOptions, hideSteppers, variant: requestedVariant, isSkeleton, ...field }: import("./renderers-forms.js").NumberFieldProps) => import("react").JSX.Element;
-    readonly RadioGroup: ({ options, value, defaultValue, onValueChange, orientation, variant: requestedVariant, ...field }: import("./renderers-forms.js").RadioGroupProps) => import("react").JSX.Element;
-    readonly SearchField: ({ id, placeholder, value, defaultValue, onValueChange, onSubmit, onClear, isPending, clearLabel, variant: requestedVariant, size, isSkeleton, onBlur, onPaste, autoFocus, ...field }: import("./renderers-forms.js").SearchFieldProps) => import("react").JSX.Element;
-    readonly SegmentedControl: ({ options, value, defaultValue, onValueChange, width, size, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, isSkeleton, }: import("./renderers-forms.js").SegmentedControlProps) => import("react").JSX.Element;
-    readonly Select: ({ options, placeholder, value, defaultValue, onValueChange, isPending, isSkeleton, variant: requestedVariant, ...field }: import("./renderers-forms.js").SelectProps) => import("react").JSX.Element;
+    readonly NumberField: ({ isSkeleton, ...props }: import("./renderers-forms.js").NumberFieldProps) => import("react").JSX.Element;
+    readonly RadioGroup: ({ isSkeleton, ...props }: import("./renderers-forms.js").RadioGroupProps) => import("react").JSX.Element;
+    readonly SearchField: ({ isSkeleton, ...props }: import("./renderers-forms.js").SearchFieldProps) => import("react").JSX.Element;
+    readonly SegmentedControl: ({ isSkeleton, ...props }: import("./renderers-forms.js").SegmentedControlProps) => import("react").JSX.Element;
+    readonly Select: ({ isSkeleton, ...props }: import("./renderers-forms.js").SelectProps) => import("react").JSX.Element;
     readonly Slider: ({ value, defaultValue, onValueChange, onValueCommit, minValue, maxValue, step, formatOptions, thumbLabels, orientation, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, }: import("./renderers-forms.js").SliderProps) => import("react").JSX.Element;
-    readonly Switch: ({ value, isSelected, defaultSelected, onSelectedChange, size, thumbIcon, selectedThumbIcon, isSkeleton, ...field }: import("./renderers-forms.js").SwitchProps) => import("react").JSX.Element;
-    readonly Textarea: ({ id, placeholder, value, defaultValue, rows, isSkeleton, maxLength, minLength, onValueChange, variant: requestedVariant, onSubmitShortcut, mentions, onBlur, onPaste, autoFocus, ...field }: import("./renderers-forms.js").TextareaProps) => import("react").JSX.Element;
+    readonly Switch: ({ isSkeleton, ...props }: import("./renderers-forms.js").SwitchProps) => import("react").JSX.Element;
+    readonly Textarea: ({ isSkeleton, ...props }: import("./renderers-forms.js").TextareaProps) => import("react").JSX.Element;
     readonly TimeField: ({ value, defaultValue, onValueChange, minValue, maxValue, granularity, hourCycle, variant: requestedVariant, ...field }: import("./renderers-forms.js").TimeFieldProps) => import("react").JSX.Element;
     readonly Badge: ({ children, startContent, tone, isDot, isSkeleton }: import("./renderers.js").BadgeProps) => import("react").JSX.Element;
     readonly Button: (props: import("./renderers.js").ButtonProps) => import("react").JSX.Element;
+    readonly Code: ({ children, isSkeleton }: import("./renderers.js").CodeProps) => import("react").JSX.Element;
     readonly ChatBubble: ({ children, side, author, avatar, meta, status, actions, footer, isHighlight, id, isSkeleton, }: import("./renderers.js").ChatBubbleProps) => import("react").JSX.Element;
     readonly ChatWorkspace: (props: import("./renderers.js").ChatWorkspaceProps) => import("react").JSX.Element;
     readonly Divider: (props: import("./renderers.js").DividerProps) => import("react").JSX.Element;
     readonly EmptyNotice: ({ message, description, iconSource, actionLabel, actionStartContent, actionVariant, isActionPending, onAction, }: import("./renderers.js").EmptyNoticeProps) => import("react").JSX.Element;
     readonly FencedCodeBlock: (props: import("./renderers.js").FencedCodeBlockProps) => import("react").JSX.Element;
     readonly FillViewport: ({ children, minHeight, bottomInset, label }: import("./renderers.js").FillViewportProps) => import("react").JSX.Element;
-    readonly GrammarRoot: ({ className, theme, ...props }: import("./renderers.js").GrammarRootProps) => import("react").JSX.Element;
+    readonly GrammarRoot: ({ className, theme, navigate, useHref, ...props }: import("./renderers.js").GrammarRootProps) => import("react").JSX.Element;
     readonly Heading: ({ children, level, scale, isSkeleton, isVisuallyHidden, }: import("./renderers.js").HeadingProps) => import("react").JSX.Element;
     readonly HorizontalScrollRegion: import("react").ForwardRefExoticComponent<Omit<import("./renderers.js").HorizontalScrollRegionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     readonly Icon: ({ source: Source, usage, ariaLabel, isSkeleton }: import("./renderers.js").IconProps) => import("react").JSX.Element;
     readonly IconButton: ({ source, label, intent, step, variant: legacyVariant, size, isFloating, isActive, isDisabled, isSkeleton, onPress, href, "aria-controls": controls, "aria-expanded": expanded, badge, badgeLabel, badgeMax, }: import("./renderers.js").IconButtonProps) => import("react").JSX.Element;
     readonly IconTile: ({ source, artwork, ariaLabel, tone, size, isSkeleton, }: import("./renderers.js").IconTileProps) => import("react").JSX.Element;
     readonly IncludedMark: ({ className, label, ...props }: import("./renderers.js").IncludedMarkProps) => import("react").JSX.Element;
-    readonly Input: ({ id, name, label, isLabelHidden, kind: kindName, variant: requestedVariant, size, placeholder, defaultValue, value, hint, errorMessage, isError, isDisabled, isRequired, isSkeleton, isReadOnly, isCopyable, copyLabel, copiedLabel, copyIcon: CopyIcon, copiedIcon: CopiedIcon, onCopy, revealLabel, hideLabel, revealIcon: RevealIcon, hideIcon: HideIcon, onValueChange, onBlur, onPaste, autoFocus, }: import("./renderers.js").InputProps) => import("react").JSX.Element;
+    readonly Input: ({ isSkeleton, ...props }: import("./renderers.js").InputProps) => import("react").JSX.Element;
     readonly Label: ({ id, children, depth, as }: import("./renderers.js").LabelProps) => import("react").DetailedReactHTMLElement<{
         readonly id: string | undefined;
         readonly className: string;
@@ -103,7 +104,7 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     readonly NavLandmark: (props: import("./renderers.js").NavLandmarkProps) => import("react").JSX.Element;
     readonly OtpInput: (props: import("./renderers.js").OtpInputProps) => import("react").JSX.Element;
     readonly PageContainer: ({ className, measure, ...props }: import("./renderers.js").PageContainerProps) => import("react").JSX.Element;
-    readonly PinnedActionBar: ({ children, label, visibility }: import("./renderers.js").PinnedActionBarProps) => import("react").JSX.Element;
+    readonly PinnedActionBar: (props: import("./renderers.js").PinnedActionBarProps) => import("react").JSX.Element;
     readonly PressableField: ({ label, placeholder, source, shortcut, variant: requestedVariant, isDisabled, onPress }: import("./renderers.js").PressableFieldProps) => import("react").JSX.Element;
     readonly PrimaryRailLayout: ({ primary, rail, railWidth, align, collapsedOrder, railPosition, className, }: import("./renderers.js").PrimaryRailLayoutProps) => import("react").JSX.Element;
     readonly Progress: ({ label, value, isSkeleton, steps, valueText }: import("./renderers.js").ProgressProps) => import("react").JSX.Element;
@@ -115,15 +116,17 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     readonly Sidebar: ({ label, groups, selectedKey, presentation, isCollapsed, collapseLabel, expandLabel, toggleSource, header, footer, onAction, onCollapsedChange, }: import("./renderers.js").SidebarProps) => import("react").JSX.Element;
     readonly StateMark: (props: import("./renderers.js").StateMarkProps) => import("react").JSX.Element | null;
     readonly StaticStateRow: (props: import("./renderers.js").StaticStateRowProps) => import("react").JSX.Element;
+    readonly StatusDot: (props: import("./renderers.js").StatusDotProps) => import("react").JSX.Element;
     readonly Subnav: ({ label, title, leading, menuIcon, openMenuLabel, closeMenuLabel, isMenuOpen, onMenuOpenChange, position, visibility, className, ...navProps }: import("./renderers.js").SubnavProps) => import("react").JSX.Element;
     readonly SurfaceAccordionCard: <Summary, Body>(props: import("./renderers.js").SurfaceAccordionCardProps<Summary, Body>) => import("react").JSX.Element;
     readonly SurfaceCard: (props: import("./renderers.js").SurfaceCardProps) => import("react").JSX.Element;
     readonly SurfaceCopyGroup: ({ className, density, ...props }: import("./renderers.js").SurfaceCopyGroupProps) => import("react").JSX.Element;
     readonly SurfaceListCard: (props: import("./renderers.js").SurfaceListCardProps) => import("react").JSX.Element;
     readonly Tabs: (props: import("./renderers.js").TabsProps) => import("react").JSX.Element;
-    readonly Text: ({ as: Element, id, children, startContent, size, tone, weight, live, overflow, isSkeleton, isSuperseded, parentEmphasis, }: import("./renderers.js").TextProps) => import("react").JSX.Element;
+    readonly Terminal: ({ lines, title, label, isSkeleton }: import("./renderers.js").TerminalProps) => import("react").JSX.Element;
+    readonly Text: ({ as: Element, id, children, startContent, size, tone, weight, live, overflow, mono, tabular, isSkeleton, isSuperseded, parentEmphasis, }: import("./renderers.js").TextProps) => import("react").JSX.Element;
     readonly TextAction: (props: import("./renderers.js").TextActionProps) => import("react").JSX.Element;
-    readonly Tooltip: ({ content, children, placement }: import("./renderers.js").TooltipProps) => import("react").JSX.Element;
+    readonly Tooltip: ({ content, children, placement, isDisabledTrigger, triggerDescribedBy }: import("./renderers.js").TooltipProps) => import("react").JSX.Element;
     readonly VerticalScrollRegion: (props: import("./renderers.js").VerticalScrollRegionProps) => import("react").JSX.Element;
     readonly WorkspaceShell: (props: import("./renderers.js").WorkspaceShellProps) => import("react").JSX.Element;
 }>;