@starci/grammar 0.17.1 → 0.19.0

package/README.md

@@ -214,7 +214,7 @@ Each group below matches a Storybook group. Run `npm run storybook`: every story
 the family and theme chosen in the toolbar. It shows the default, disabled, invalid, pending and
 selected/current states where they apply. Overlay stories open by default.
 
-**Primitives (28).** Avatar, Badge, Button, CloseButton, Divider, GrammarRoot, Heading, Icon,
+**Primitives (29).** Avatar, Badge, Button, CloseButton, ConnectionStatus, Divider, GrammarRoot, Heading, Icon,
 IconButton, IconTile, Image, IncludedMark, Kbd, Label, LeadingNumber, Link, Mascot, Meter, PlainPressable,
 Progress, ProgressCircle, RankArtwork, RelativeTime, Skeleton, Spinner, StateMark, Text, TextAction.
 
@@ -409,8 +409,8 @@ The package requires Node 22 or newer, as does the pinned DiceBear engine.
 MarkdownTableFrame, MediaFrame, Rail, SectionHeader, StaticStateRow, SurfaceAccordionCard,
 SurfaceCard, SurfaceCopyGroup, SurfaceListCard, VerticalScrollRegion.
 
-**Compositions (12).** BottomNav, Footer, NavigationFeatureNav, Page, PageContainer, PageHeader,
-PaneGrid, PaneSection, PrimaryRailLayout, Sidebar, TopBar, WorkspaceShell. Storybook pins settings and data-list content
+**Compositions (15).** BottomNav, Cluster, Footer, Grid, NavigationFeatureNav, Page, PageContainer, PageHeader,
+PaneGrid, PaneSection, PrimaryRailLayout, Sidebar, Stack, TopBar, WorkspaceShell. Storybook pins settings and data-list content
 recipes to each family; the mobile app recipes reuse the fixed App shell with its left navigation drawer.
 
 `PageHeader` heads one page: `breadcrumbs`, `title` (the page's `h1`), `description`, `meta`, `status` chips beside the
@@ -444,9 +444,9 @@ exactly one `PaneGrid` attached flush to the band's separator, reaching both con
 and arrays of Panes are legal; anything else throws `PANE_GRID_CHILD_NOT_PANE` in development). A `Pane` owns its
 content inset (`inset="content"`, default, or `"flush"` for a nested PaneGrid or a full-bleed canvas) and takes no
 `className`: it never pads itself, it publishes the inset to its descendants so dividers and scrollbars stay full-bleed.
-The inline inset is `--grammar-pane-inset-inline` (1rem) on both sides at every breakpoint; the block start is
-`--grammar-pane-inset-block-start` (0.75rem); the block end is `--grammar-pane-inset-block-end-outer` (1rem) when the
-pane touches the grid's bottom edge and `--grammar-pane-inset-block-end-divider` (0.75rem) when it faces a divider.
+Every side takes the container inset `--grammar-inset` (0.75rem) at every breakpoint, through
+`--grammar-pane-inset-inline`, `--grammar-pane-inset-block-start`, `--grammar-pane-inset-block-end-outer` (the grid's
+bottom edge) and `--grammar-pane-inset-block-end-divider` (a divider below).
 A `collapse="drawer"` pane renders its children in the drawer under the same inset.
 
 `PaneSection` is the one band primitive of a pane: every child of a Pane is a `PaneSection` or one nested `PaneGrid`.
@@ -462,8 +462,26 @@ box keeps the vendor's own padding. In a Pane, `ListBox` resolves `inset="panel"
 padding so the row box and the selected pill start at the edge, and a `Tabs variant="secondary"` track drops its inline
 padding so the first pill does.
 
-Card padding has one place per axis too: `--grammar-card-padding-inline` and `--grammar-card-padding-block` (1rem each)
-pad the content of `SurfaceCard` and its kin.
+**Spacing.** One scale, 0 4 8 12 24 32 (`COMMON_SPACING_SCALE`), and every value is a root token named by its role:
+gaps `--grammar-identity-gap` (4), `--grammar-inline-gap` (8), `--grammar-row-gap` (12), `--grammar-section-gap` (24)
+and `--grammar-region-gap` (32) (`COMMON_GAP_ROLES`); insets `--grammar-inset` (12, every container: card, pane,
+overlay, band), `--grammar-inset-nested` (8, a box inside a card) and `--grammar-inset-open` (24, an empty state or a
+drop target); the page gutter `--grammar-page-inset` (12, 24 from 48rem, 32 from 70rem); and the control inline
+padding `--grammar-control-padding-inline-{sm,md,lg}` (8, 12, 24) with `--grammar-control-padding-glyph-*` one step
+less on a glyph's side. `--grammar-card-padding-inline`, `--grammar-card-padding-block` and `--grammar-overlay-inset`
+read `--grammar-inset`. Vendor parts take their step in `src/common/components-spacing.css`. Tabs are the underline
+bar everywhere, the first label on the content edge.
+
+An app writes no spacing value; it names the relation of the blocks it places:
+
+- `Stack` (`gap`: `identity` | `inline` | `row` | `section` | `region`, required; `align`; `measure`: `full` |
+  `reading` | `form`; `as`): blocks in the block axis.
+- `Cluster` (`gap`: `identity` | `inline` | `row` | `section`, the same on both axes; `wrap`, default true; `align`;
+  `justify`): items side by side that wrap, a chip set, a toolbar group.
+- `Grid` (`kind="cards"` with `columns?: 2 | 3 | 4`, the section gap on both axes; `kind="form"` renders `FormGrid`;
+  `kind="main-rail"` renders `PrimaryRailLayout` with its props).
+
+None takes a `className` or a `style`.
 
 ```tsx
 <Page measure="reading" header={{ breadcrumbs, title: "Profile", tabs: { label: "Profile", items, selectedKey, onSelect } }}>

package/dist/.build-stamp.json

@@ -1,9 +1,9 @@
 {
   "schema": "starci/grammar-build-stamp@1",
   "package": "@starci/grammar",
-  "version": "0.17.1",
+  "version": "0.19.0",
   "algorithm": "starci/grammar-source-digest@1",
-  "sourceDigest": "sha256:1415cc469a0bd9438d2bfe9cdbee3ba143d5c7d458ed3e10938f140f4e0b89f4",
-  "distDigest": "sha256:dc7ca20b82316d1cb1efa88121ad1d834ffa10f38948319079f1f2ffd8acfd38",
-  "builtAt": "2026-10-31T12:36:26.842Z"
+  "sourceDigest": "sha256:cbb2fa9919a6912261ffbebc3a6f3e5efe7aaa8110f1d928768d787c1d6d7ef1",
+  "distDigest": "sha256:6da9e874645d92ab40db8717793e26a5fa08aef70c7e9163716bafb2c95b9f36",
+  "builtAt": "2026-10-31T16:16:39.196Z"
 }

package/dist/common/components-forms.css

@@ -278,7 +278,7 @@
         inline-size: 100%;
         min-width: 0;
         flex-direction: column;
-        gap: var(--grammar-section-gap, 1rem);
+        gap: var(--grammar-row-gap, 0.75rem);
         container-type: inline-size;
     }
 
@@ -287,7 +287,7 @@
         min-width: 0;
         grid-template-columns: minmax(0, 1fr);
         grid-auto-rows: auto;
-        gap: 0 var(--grammar-section-gap, 1rem);
+        gap: 0 var(--grammar-row-gap, 0.75rem);
         align-items: start;
     }
 
@@ -302,7 +302,7 @@
     }
 
     :is(.starci-core-form-grid-row > [data-component]:not(:first-child), .starci-core-form-grid-row > .starci-core-field-skeleton-scope:not(:first-child) > [data-component]) {
-        margin-block-start: var(--grammar-section-gap, 1rem);
+        margin-block-start: var(--grammar-row-gap, 0.75rem);
     }
 
     :is(.starci-core-form-grid-row > [data-component], .starci-core-form-grid-row > .starci-core-field-skeleton-scope > [data-component]) > :is([data-slot="label"], [data-grammar-field-label]) {
@@ -426,7 +426,7 @@
 
     [data-grammar-orientation="horizontal"] > .starci-core-choice-group-options {
         flex-flow: row wrap;
-        gap: 0.75rem 1rem;
+        gap: var(--grammar-row-gap, 0.75rem);
     }
 
     /*
@@ -571,7 +571,7 @@
         display: flex;
         min-width: 0;
         flex-direction: column;
-        gap: var(--grammar-section-gap, 1rem);
+        gap: var(--grammar-row-gap, 0.75rem);
     }
 
     .starci-core-fieldset-actions {
@@ -586,7 +586,7 @@
         display: flex;
         min-width: 0;
         flex-direction: column;
-        gap: var(--grammar-region-gap, 1.5rem);
+        gap: var(--grammar-row-gap, 0.75rem);
     }
 
     /* --- FileDropzone: a native file input stretched over the drop target --- */
@@ -599,7 +599,7 @@
         justify-content: center;
         border: 2px dashed var(--border, ButtonBorder);
         border-radius: var(--field-radius, calc(var(--radius, 0.5rem) * 1.5));
-        padding: 1.5rem;
+        padding: var(--grammar-inset-open, 1.5rem);
         background: var(--field-background, var(--surface, Canvas));
         color: var(--muted, GrayText);
         text-align: center;
@@ -656,7 +656,7 @@
 
     .starci-core-file-dropzone-files {
         margin: 0;
-        padding-inline-start: 1rem;
+        padding-inline-start: var(--grammar-section-gap, 1.5rem);
         color: var(--foreground, CanvasText);
         font-size: 0.875rem;
         overflow-wrap: anywhere;

package/dist/common/components-navigation.css

@@ -303,6 +303,26 @@
         color: var(--danger-soft-foreground, var(--danger, CanvasText));
     }
 
+    /* A paused step: a dashed circle in the warning ink, so the state is a form as well as a colour. */
+    .starci-core-step[data-grammar-step-state="paused"] .starci-core-step-marker {
+        border-style: dashed;
+        border-color: var(--warning, Mark);
+        color: var(--warning-soft-foreground, var(--warning, CanvasText));
+    }
+
+    /* Dense (a list row): a 20px marker, 12px type, no copy padding, and the connector re-aimed at the smaller circle. */
+    .starci-core-stepper[data-grammar-stepper-size="dense"] .starci-core-step-body { padding: 0; gap: var(--grammar-identity-gap, 0.25rem); }
+    .starci-core-stepper[data-grammar-stepper-size="dense"] .starci-core-step-marker { width: 1.25rem; height: 1.25rem; border-width: 1.5px; font-size: 0.75rem; }
+    .starci-core-stepper[data-grammar-stepper-size="dense"] .starci-core-step-copy { padding-block-start: 0; gap: 0; }
+    .starci-core-stepper[data-grammar-stepper-size="dense"] .starci-core-step-label { font-size: 0.75rem; }
+    .starci-core-stepper[data-grammar-stepper-size="dense"] .starci-core-step-description { font-size: 0.75rem; }
+    .starci-core-stepper[data-grammar-stepper-size="dense"][data-grammar-stepper-orientation="horizontal"] .starci-core-step:not(:last-child)::after {
+        inset-block-start: calc(0.625rem - 1px);
+        inset-inline-start: calc(50% + 1rem);
+        inset-inline-end: calc(-50% + 1rem);
+    }
+    .starci-core-stepper[data-grammar-stepper-size="dense"] .starci-core-step-control { min-block-size: 0; }
+
     /* Loading stepper (knowledge STATE-8): a static Skeleton circle for the mark, labels stay real. */
     .starci-core-step-skeleton-marker { border: 0; background: transparent; }
     .starci-core-step-skeleton-label { display: block; inline-size: 5rem; }
@@ -313,7 +333,7 @@
         display: flex;
         min-width: 0;
         flex-direction: column;
-        gap: 0.125rem;
+        gap: var(--grammar-identity-gap, 0.25rem);
         padding-block-start: 0.25rem;
     }
 
@@ -354,9 +374,9 @@
         align-items: center;
         gap: var(--grammar-row-gap, 0.75rem);
         padding-block: 0.5rem;
-        padding-inline: var(--grammar-page-inset, 1rem);
-        padding-inline-start: max(var(--grammar-page-inset, 1rem), env(safe-area-inset-left));
-        padding-inline-end: max(var(--grammar-page-inset, 1rem), env(safe-area-inset-right));
+        padding-inline: var(--grammar-page-inset, 0.75rem);
+        padding-inline-start: max(var(--grammar-page-inset, 0.75rem), env(safe-area-inset-left));
+        padding-inline-end: max(var(--grammar-page-inset, 0.75rem), env(safe-area-inset-right));
         border-block-end: 1px solid var(--separator, var(--border, CanvasText));
         background: var(--surface, Canvas);
         color: var(--foreground, CanvasText);
@@ -466,11 +486,11 @@
     }
 
     .grammar-common-root:has(.starci-core-bottom-nav[data-grammar-bottom-nav-position="fixed"]) .starci-core-footer {
-        padding-block-end: calc(var(--grammar-section-gap, 1rem) + max(var(--starci-core-bottom-nav-offset), env(safe-area-inset-bottom, 0px)));
+        padding-block-end: calc(var(--grammar-inset, 0.75rem) + max(var(--starci-core-bottom-nav-offset), env(safe-area-inset-bottom, 0px)));
     }
 
     .grammar-common-root:has(.starci-core-bottom-nav[data-grammar-bottom-nav-position="fixed"]) .starci-core-toaster:is([data-placement="bottom-start"], [data-placement="bottom"], [data-placement="bottom-end"]) {
-        bottom: max(var(--grammar-page-inset, 1rem), env(safe-area-inset-bottom, 0px), calc(var(--starci-core-bottom-nav-offset) + var(--grammar-page-inset, 1rem)));
+        bottom: max(var(--grammar-page-inset, 0.75rem), env(safe-area-inset-bottom, 0px), calc(var(--starci-core-bottom-nav-offset) + var(--grammar-page-inset, 0.75rem)));
     }
 
     .starci-core-bottom-nav-list {
@@ -494,7 +514,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 0.125rem;
+        gap: var(--grammar-identity-gap, 0.25rem);
         padding: 0.25rem;
         border: 0;
         border-radius: var(--radius, 0.5rem);
@@ -570,9 +590,9 @@
         display: flex;
         min-width: 0;
         flex-direction: column;
-        gap: var(--grammar-region-gap, 1.5rem);
-        padding-block: var(--grammar-region-gap, 1.5rem) calc(var(--grammar-section-gap, 1rem) + env(safe-area-inset-bottom, 0px));
-        padding-inline: var(--grammar-page-inset, 1rem);
+        gap: var(--grammar-section-gap, 1.5rem);
+        padding-block: var(--grammar-section-gap, 1.5rem) calc(var(--grammar-inset, 0.75rem) + env(safe-area-inset-bottom, 0px));
+        padding-inline: var(--grammar-page-inset, 0.75rem);
         border-block-start: 1px solid var(--separator, var(--border, CanvasText));
         color: var(--foreground, CanvasText);
     }
@@ -581,7 +601,7 @@
         display: grid;
         min-width: 0;
         grid-template-columns: minmax(0, 1fr);
-        gap: var(--grammar-region-gap, 1.5rem);
+        gap: var(--grammar-region-gap, 2rem);
     }
 
     @media (min-width: 48rem) {
@@ -602,7 +622,7 @@
         display: grid;
         min-width: 0;
         grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-        gap: var(--grammar-section-gap, 1rem);
+        gap: var(--grammar-section-gap, 1.5rem);
     }
 
     .starci-core-footer-group {
@@ -945,7 +965,7 @@
         min-block-size: 8rem;
         align-items: center;
         justify-content: center;
-        padding: var(--grammar-section-gap, 1rem);
+        padding: var(--grammar-inset, 0.75rem);
         color: var(--muted, GrayText);
         white-space: normal;
         text-align: center;
@@ -990,7 +1010,7 @@
     .starci-core-data-table-secondary {
         display: flex;
         flex-direction: column;
-        gap: 0.125rem;
+        gap: var(--grammar-identity-gap, 0.25rem);
         margin-block-start: 0.25rem;
         color: var(--muted, GrayText);
         font-size: 0.875em;
@@ -1245,7 +1265,7 @@
         display: flex;
         align-items: center;
         padding-inline: 0.5rem;
-        padding-block: 0.375rem;
+        padding-block: var(--grammar-inset-nested, 0.5rem);
         pointer-events: none;
     }
 
@@ -1259,7 +1279,7 @@
     .starci-core-list-box-skeleton-option .starci-core-skeleton-group { gap: 0; }
 
     .starci-core-list-box-empty {
-        padding: var(--grammar-section-gap, 1rem);
+        padding: var(--grammar-inset, 0.75rem);
         color: var(--muted, GrayText);
     }
 
@@ -1442,7 +1462,7 @@
     .starci-core-rating {
         display: inline-flex;
         align-items: center;
-        gap: 0.125rem;
+        gap: var(--grammar-identity-gap, 0.25rem);
     }
 
     .starci-core-rating-item {
@@ -1519,7 +1539,7 @@
         min-width: 0;
         grid-template-columns: 1.5rem minmax(0, 1fr);
         gap: var(--grammar-row-gap, 0.75rem);
-        padding-block-end: var(--grammar-section-gap, 1rem);
+        padding-block-end: var(--grammar-row-gap, 0.75rem);
     }
 
     .starci-core-timeline-item:not(:last-child)::before {
@@ -1605,7 +1625,7 @@
         display: flex;
         min-width: 0;
         flex-direction: column;
-        gap: 0.125rem;
+        gap: var(--grammar-identity-gap, 0.25rem);
     }
 
     /* The list title scale (the ListBox and panel row label, text-sm), not whatever size the page body inherits. */
@@ -1777,7 +1797,7 @@
         align-items: center;
         gap: 0.5rem;
         max-inline-size: 14rem;
-        padding: 0.375rem 0.875rem;
+        padding: var(--grammar-inset-nested, 0.5rem) var(--grammar-inset, 0.75rem);
         border: 1px solid var(--separator, CanvasText);
         border-radius: 999px;
         background-color: var(--surface, Canvas);
@@ -1805,7 +1825,7 @@
     }
 
     .starci-core-flow-graph-header {
-        padding: 0.125rem 0.625rem;
+        padding: 0 var(--grammar-inset-nested, 0.5rem);
         color: var(--muted, GrayText);
         font-size: 0.6875rem;
         font-weight: 600;
@@ -1817,15 +1837,106 @@
 
     .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); }
-    .starci-core-flow-graph-node[data-tone="success"] { --starci-flow-tint: var(--success-soft, transparent); --starci-flow-ink: var(--success-soft-foreground, CanvasText); }
-    .starci-core-flow-graph-node[data-tone="warning"] { --starci-flow-tint: var(--warning-soft, transparent); --starci-flow-ink: var(--warning-soft-foreground, CanvasText); }
-    .starci-core-flow-graph-node[data-tone="danger"] { --starci-flow-tint: var(--danger-soft, transparent); --starci-flow-ink: var(--danger-soft-foreground, CanvasText); }
-    .starci-core-flow-graph-node[data-tone="muted"] { --starci-flow-tint: transparent; --starci-flow-ink: var(--muted, GrayText); }
+    .starci-core-flow-graph-node[data-size="sm"] { padding: var(--grammar-identity-gap, 0.25rem) var(--grammar-inset-nested, 0.5rem); font-size: 0.75rem; }
+    .starci-core-flow-graph-node[data-size="lg"] { padding: var(--grammar-inset, 0.75rem) var(--grammar-section-gap, 1.5rem); font-size: 1rem; font-weight: 600; }
+    /* A tone gives four values: its tint, its ink over the tint, its full colour (`base`) and the ink over the full colour. */
+    .starci-core-flow-graph-node[data-tone="neutral"] { --starci-flow-base: var(--muted, GrayText); --starci-flow-on-base: var(--surface, Canvas); }
+    .starci-core-flow-graph-node[data-tone="accent"] { --starci-flow-tint: var(--accent-soft, transparent); --starci-flow-ink: var(--accent-soft-foreground, CanvasText); --starci-flow-base: var(--accent, Highlight); --starci-flow-on-base: var(--accent-foreground, HighlightText); }
+    .starci-core-flow-graph-node[data-tone="success"] { --starci-flow-tint: var(--success-soft, transparent); --starci-flow-ink: var(--success-soft-foreground, CanvasText); --starci-flow-base: var(--success, CanvasText); --starci-flow-on-base: var(--success-foreground, Canvas); }
+    .starci-core-flow-graph-node[data-tone="warning"] { --starci-flow-tint: var(--warning-soft, transparent); --starci-flow-ink: var(--warning-soft-foreground, CanvasText); --starci-flow-base: var(--warning, CanvasText); --starci-flow-on-base: var(--warning-foreground, Canvas); }
+    .starci-core-flow-graph-node[data-tone="danger"] { --starci-flow-tint: var(--danger-soft, transparent); --starci-flow-ink: var(--danger-soft-foreground, CanvasText); --starci-flow-base: var(--danger, CanvasText); --starci-flow-on-base: var(--danger-foreground, Canvas); }
+    .starci-core-flow-graph-node[data-tone="info"] { --starci-flow-tint: color-mix(in oklab, var(--info, CanvasText) 15%, transparent); --starci-flow-ink: color-mix(in oklab, var(--info, CanvasText) 70%, var(--foreground, CanvasText) 30%); --starci-flow-base: var(--info, CanvasText); --starci-flow-on-base: var(--info-foreground, Canvas); }
+    .starci-core-flow-graph-node[data-tone="muted"] { --starci-flow-tint: transparent; --starci-flow-ink: var(--muted, GrayText); --starci-flow-base: color-mix(in oklab, var(--muted, GrayText) 55%, transparent); --starci-flow-on-base: var(--surface, Canvas); }
     .starci-core-flow-graph-node[data-placeholder="true"] { border-style: dashed; }
 
+    /*
+     * Bubbles (`form="bubble"`): a disc whose width is the node's `diameter`, carrying a short mark and a caption; its name
+     * shows in the tip. The text keeps one screen size: it is the 12px floor divided by the viewport zoom, which the figure
+     * publishes as `--starci-flow-zoom`, and it drops out when the zoom leaves no room for it (caption under 0.42, mark under 0.5).
+     */
+    .starci-core-flow-graph-node[data-form="bubble"] {
+        box-sizing: border-box;
+        inline-size: var(--starci-flow-diameter, 3rem);
+        block-size: var(--starci-flow-diameter, 3rem);
+        max-inline-size: none;
+        padding: 0;
+        justify-content: center;
+        border: 2px solid var(--starci-flow-base, var(--separator, CanvasText));
+        border-radius: 50%;
+        background-image: linear-gradient(var(--starci-flow-tint), var(--starci-flow-tint));
+        color: var(--starci-flow-ink);
+        font-variant-numeric: tabular-nums;
+        transition: opacity 0.2s ease;
+    }
+    .starci-core-flow-graph-disc {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        align-content: center;
+        border-radius: 50%;
+        overflow: hidden;
+        text-align: center;
+        font-size: calc(0.75rem / var(--starci-flow-zoom, 1));
+        font-weight: 600;
+        line-height: 1.2;
+    }
+    .starci-core-flow-graph-mark,
+    .starci-core-flow-graph-caption { display: block; max-inline-size: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
+    .starci-core-flow-graph-caption { font-weight: 500; }
+    .starci-core-flow-graph[data-grammar-flow-mark="off"] .starci-core-flow-graph-mark,
+    .starci-core-flow-graph[data-grammar-flow-caption="off"] .starci-core-flow-graph-caption { display: none; }
+    .starci-core-flow-graph-node[data-form="bubble"][data-root="true"] { --starci-flow-base: var(--foreground, CanvasText); --starci-flow-on-base: var(--surface, Canvas); }
+
+    /* A status never rests on colour alone: the fill is its form. */
+    .starci-core-flow-graph-node[data-fill="solid"] { background-color: var(--starci-flow-base, var(--foreground, CanvasText)); background-image: none; color: var(--starci-flow-on-base, var(--surface, Canvas)); }
+    .starci-core-flow-graph-node[data-fill="half"] { background-image: linear-gradient(to top, color-mix(in oklab, var(--starci-flow-base, var(--foreground, CanvasText)) 42%, transparent) 50%, var(--starci-flow-tint) 50%); }
+    .starci-core-flow-graph-node[data-fill="outline"] { border-style: dashed; background-image: none; color: var(--starci-flow-base, var(--foreground, CanvasText)); }
+    .starci-core-flow-graph-node[data-fill="hatched"] { border-style: dotted; background-image: repeating-linear-gradient(135deg, var(--starci-flow-tint) 0 3px, transparent 3px 6px); }
+
+    /* A status ring: the conic arcs fill the disc and the inner disc, on the surface, leaves a band of them. */
+    .starci-core-flow-graph-node[data-ring="true"] { border-color: transparent; background-color: transparent; background-image: var(--starci-flow-ring); }
+    .starci-core-flow-graph-node[data-ring="true"] > .starci-core-flow-graph-disc,
+    .starci-core-flow-graph-node[data-ring="true"] > .starci-core-flow-graph-link > .starci-core-flow-graph-disc {
+        inset: 7px;
+        background: var(--surface, Canvas);
+        color: var(--foreground, CanvasText);
+        box-shadow: var(--surface-shadow, none);
+    }
+
+    /* A filtered-out node stays in place and in the tab order. */
+    .starci-core-flow-graph-node[data-dimmed="true"] { opacity: 0.16; }
+    .starci-core-flow-graph .starci-core-flow-graph-edge-dimmed { opacity: 0.2; }
+    .starci-core-flow-graph .starci-core-flow-graph-edge-strong .react-flow__edge-path { stroke: var(--foreground, CanvasText); stroke-width: 2; }
+    .starci-core-flow-graph-node[data-form="bubble"][data-grammar-selected="true"] { outline: 3px solid var(--accent, Highlight); outline-offset: 3px; }
+    .starci-core-flow-graph-node[data-expandable="true"] { cursor: pointer; }
+
+    /* The orbit's dashed ring guides sit under the nodes and take no pointer. */
+    .starci-core-flow-graph .starci-core-flow-graph-guide-node { pointer-events: none; }
+    .starci-core-flow-graph-guide { display: block; pointer-events: none; }
+    .starci-core-flow-graph-guide circle { fill: none; stroke: var(--separator, CanvasText); stroke-width: 1; stroke-dasharray: 2 6; }
+
+    /* The tip names a bubble on hover and focus, painted from the Tooltip's tokens. */
+    .starci-core-flow-graph-tip {
+        position: absolute;
+        z-index: 8;
+        display: flex;
+        flex-direction: column;
+        max-inline-size: 16rem;
+        padding: var(--grammar-inset-nested, 0.5rem);
+        border-radius: min(32px, var(--radius-xl, 1rem));
+        background: var(--overlay, Canvas);
+        box-shadow: var(--overlay-shadow, none);
+        color: var(--overlay-foreground, CanvasText);
+        font-size: 0.75rem;
+        line-height: 1.4;
+        pointer-events: none;
+        transform: translate(-50%, calc(-100% - var(--grammar-inline-gap, 0.5rem)));
+    }
+    .starci-core-flow-graph-tip[data-placement="bottom"] { transform: translate(-50%, var(--grammar-inline-gap, 0.5rem)); }
+    .starci-core-flow-graph-tip-label { font-weight: 600; }
+    .starci-core-flow-graph-tip-description { color: var(--muted, GrayText); }
+
     /*
      * Node shapes (the flowchart outlines). `stadium` is the default pill above. A diamond cannot carry a CSS border, so
      * its outline and fill are two clipped layers behind the copy: the outer layer in the separator colour, the inner one
@@ -1847,7 +1958,7 @@
         isolation: isolate;
         justify-content: center;
         min-block-size: 4rem;
-        padding: 1rem 2rem;
+        padding: var(--grammar-inset, 0.75rem) var(--grammar-section-gap, 1.5rem);
         border-color: transparent;
         background: none;
         text-align: center;
@@ -1900,7 +2011,7 @@
     .starci-core-flow-graph-count {
         flex: 0 0 auto;
         min-inline-size: 1.25rem;
-        padding: 0 0.375rem;
+        padding: 0 var(--grammar-identity-gap, 0.25rem);
         border-radius: 999px;
         background: var(--surface, Canvas);
         color: var(--foreground, CanvasText);
@@ -1931,7 +2042,7 @@
         justify-content: center;
         inline-size: 2rem;
         block-size: 2rem;
-        padding: 0.375rem;
+        padding: var(--grammar-inset-nested, 0.5rem);
         border: 0;
         background: transparent;
         color: var(--foreground, CanvasText);
@@ -1945,6 +2056,7 @@
 
     @media (prefers-reduced-motion: reduce) {
         .starci-core-flow-graph .react-flow__edge.animated path { animation: none; }
+        .starci-core-flow-graph-node[data-form="bubble"] { transition: none; }
     }
 
     @media (forced-colors: active) {
@@ -1974,7 +2086,7 @@
         display: grid;
         min-block-size: var(--starci-mermaid-height);
         place-items: center;
-        padding: var(--grammar-section-gap, 1rem);
+        padding: var(--grammar-inset, 0.75rem);
         overflow-x: auto;
         border-radius: inherit;
         outline: none;
@@ -1987,7 +2099,7 @@
 
     .starci-core-mermaid-diagram-canvas > .starci-core-skeleton {
         inline-size: 100%;
-        block-size: calc(var(--starci-mermaid-height) - 2 * var(--grammar-section-gap, 1rem));
+        block-size: calc(var(--starci-mermaid-height) - 2 * var(--grammar-section-gap, 1.5rem));
         aspect-ratio: auto;
     }
 
@@ -2000,7 +2112,7 @@
         min-block-size: var(--starci-mermaid-height);
         flex-direction: column;
         gap: var(--grammar-row-gap, 0.75rem);
-        padding: var(--grammar-section-gap, 1rem);
+        padding: var(--grammar-inset, 0.75rem);
     }
 
     /*

package/dist/common/components-overlays.css

@@ -41,7 +41,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: var(--grammar-page-inset, 1rem);
+        padding: var(--grammar-page-inset, 0.75rem);
         background: color-mix(in srgb, var(--foreground, CanvasText) 40%, transparent);
         overscroll-behavior: contain;
     }
@@ -106,7 +106,7 @@
         min-width: 0;
         flex: 1;
         flex-direction: column;
-        gap: var(--grammar-section-gap, 1rem);
+        gap: var(--grammar-row-gap, 0.75rem);
         overflow: hidden;
         color: var(--surface-foreground, CanvasText);
     }
@@ -393,25 +393,25 @@
         position: fixed;
         z-index: 60;
         display: flex;
-        width: min(24rem, calc(100vw - 2 * var(--grammar-page-inset, 1rem)));
+        width: min(24rem, calc(100vw - 2 * var(--grammar-page-inset, 0.75rem)));
         flex-direction: column;
         pointer-events: none;
     }
 
     .starci-core-toaster:is([data-placement="top-start"], [data-placement="top"], [data-placement="top-end"]) {
-        top: var(--grammar-page-inset, 1rem);
+        top: var(--grammar-page-inset, 0.75rem);
     }
 
     .starci-core-toaster:is([data-placement="bottom-start"], [data-placement="bottom"], [data-placement="bottom-end"]) {
-        bottom: max(var(--grammar-page-inset, 1rem), env(safe-area-inset-bottom));
+        bottom: max(var(--grammar-page-inset, 0.75rem), env(safe-area-inset-bottom));
     }
 
     .starci-core-toaster:is([data-placement="top-start"], [data-placement="bottom-start"]) {
-        inset-inline-start: var(--grammar-page-inset, 1rem);
+        inset-inline-start: var(--grammar-page-inset, 0.75rem);
     }
 
     .starci-core-toaster:is([data-placement="top-end"], [data-placement="bottom-end"]) {
-        inset-inline-end: var(--grammar-page-inset, 1rem);
+        inset-inline-end: var(--grammar-page-inset, 0.75rem);
     }
 
     .starci-core-toaster:is([data-placement="top"], [data-placement="bottom"]) {
@@ -441,8 +441,6 @@
         display: grid;
         grid-template-columns: auto minmax(0, 1fr) auto auto;
         align-items: start;
-        gap: 0.5rem 0.75rem;
-        padding: 0.75rem 0.5rem 0.75rem 1rem;
         border-radius: var(--starci-core-surface-radius, 1rem);
         background: var(--surface, Canvas);
         color: var(--surface-foreground, CanvasText);
@@ -452,14 +450,14 @@
 
     .starci-core-toast-indicator {
         display: inline-flex;
-        margin-block-start: 0.125rem;
+        margin-block-start: var(--grammar-identity-gap, 0.25rem);
         color: var(--starci-core-overlay-tone);
     }
 
     .starci-core-toast-indicator[data-grammar-toast-indicator] {
         width: 0.625rem;
         height: 0.625rem;
-        margin-block-start: 0.375rem;
+        margin-block-start: var(--grammar-identity-gap, 0.25rem);
         border-radius: 999px;
         background: var(--starci-core-overlay-tone);
     }
@@ -468,7 +466,7 @@
         display: flex;
         min-width: 0;
         flex-direction: column;
-        gap: 0.125rem;
+        gap: var(--grammar-identity-gap, 0.25rem);
         align-self: center;
     }
 
@@ -493,7 +491,7 @@
 
     @media (max-width: 40rem) {
         .starci-core-toaster {
-            inset-inline: var(--grammar-page-inset, 1rem);
+            inset-inline: var(--grammar-page-inset, 0.75rem);
             width: auto;
             margin-inline: 0;
         }
@@ -622,7 +620,7 @@
         min-width: 1.5rem;
         align-items: center;
         justify-content: center;
-        gap: 0.125rem;
+        gap: var(--grammar-identity-gap, 0.25rem);
         border: 1px solid var(--border, CanvasText);
         white-space: nowrap;
     }
@@ -795,7 +793,7 @@
         width: 100%;
         min-width: 0;
         flex-direction: column;
-        gap: 0.375rem;
+        gap: var(--grammar-identity-gap, 0.25rem);
     }
 
     .starci-core-meter-header {