@starci/grammar 0.17.0 → 0.18.0

package/README.md

@@ -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.0",
+  "version": "0.18.0",
   "algorithm": "starci/grammar-source-digest@1",
-  "sourceDigest": "sha256:5087c93baaa926867d67affea734fc8bee110e3fbb45a8874a810534b26a5cdd",
-  "distDigest": "sha256:0c103298b00f8b8ab727c992b96bdd0b547c7db9c259d9732b3ee6201d39f071",
-  "builtAt": "2026-10-31T10:45:19.177Z"
+  "sourceDigest": "sha256:c20c88c86e2b076231df335a9877ea7e2300565183082bd4a0645d2d01706356",
+  "distDigest": "sha256:5cd2e2caf90d2f1d5fcba3511405b700be01881bbe31bed31b755763e845ca8b",
+  "builtAt": "2026-10-31T13:26:41.484Z"
 }

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

@@ -313,7 +313,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 +354,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 +466,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 +494,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 +570,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 +581,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 +602,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 +945,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 +990,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 +1245,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 +1259,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 +1442,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 +1519,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 +1605,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 +1777,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 +1805,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,8 +1817,8 @@
 
     .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-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; }
     .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); }
@@ -1847,7 +1847,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 +1900,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 +1931,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);
@@ -1974,7 +1974,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 +1987,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 +2000,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 {

package/dist/common/components-spacing.css

@@ -0,0 +1,97 @@
+/*
+ * VENDOR PART SPACING ON THE SCALE.
+ *
+ * HeroUI's parts carry their own padding and gap (`p-6` on a dialog, `px-4` on a button, `py-1.5` on a list option,
+ * `py-2.5` on a table column, a 3px body offset). The Grammar's scale is 0 4 8 12 24 32 (common/spacing.ts), so each
+ * part below takes the step its role names. These rules sit in the vendor's own `components` layer: there a compound
+ * selector of the Grammar class outranks the vendor's single class by specificity, whichever sheet loads first, so no
+ * declaration needs `!important`. The overrides are recorded in contexts/vendor/wrappers.yaml (ruling spacing-roles).
+ */
+@layer components {
+    /* Dialog and drawer: one inset on every side; header, body and footer are spaced by the dialog's row gap alone. */
+    .starci-core-overlay-backdrop > .starci-core-dialog-container {
+        padding: 0;
+    }
+
+    .starci-core-dialog-container > .starci-core-dialog,
+    .starci-core-drawer-content .starci-core-drawer {
+        padding: var(--grammar-overlay-inset, 0.75rem);
+    }
+
+    :is(.starci-core-dialog, .starci-core-drawer) > .starci-core-overlay-header ~ .starci-core-overlay-body,
+    :is(.starci-core-dialog, .starci-core-drawer) > .starci-core-overlay-header ~ .starci-core-overlay-footer {
+        margin-block: 0;
+    }
+
+    /* The body is the scroll owner: it keeps the identity step inline as focus clearance, drawn back over the inset. */
+    :is(.starci-core-dialog, .starci-core-drawer) > .starci-core-overlay-header ~ .starci-core-overlay-body {
+        margin-inline: calc(-1 * var(--grammar-identity-gap, 0.25rem));
+        padding: 0 var(--grammar-identity-gap, 0.25rem);
+    }
+
+    /* Buttons: the inline padding of the size step, one step less on the side a glyph stands on. */
+    .starci-core-button[data-size="sm"] {
+        padding-inline: var(--grammar-control-padding-inline-sm, 0.5rem);
+    }
+
+    .starci-core-button:is([data-size="md"], [data-size="control"]) {
+        padding-inline: var(--grammar-control-padding-inline-md, 0.75rem);
+    }
+
+    .starci-core-button[data-size="lg"] {
+        padding-inline: var(--grammar-control-padding-inline-lg, 1.5rem);
+    }
+
+    .starci-core-button[data-size="sm"][data-grammar-button-start="glyph"] {
+        padding-inline-start: var(--grammar-control-padding-glyph-sm, 0.25rem);
+    }
+
+    .starci-core-button[data-size="sm"][data-grammar-button-end="glyph"] {
+        padding-inline-end: var(--grammar-control-padding-glyph-sm, 0.25rem);
+    }
+
+    .starci-core-button:is([data-size="md"], [data-size="control"])[data-grammar-button-start="glyph"] {
+        padding-inline-start: var(--grammar-control-padding-glyph-md, 0.5rem);
+    }
+
+    .starci-core-button:is([data-size="md"], [data-size="control"])[data-grammar-button-end="glyph"] {
+        padding-inline-end: var(--grammar-control-padding-glyph-md, 0.5rem);
+    }
+
+    .starci-core-button[data-size="lg"][data-grammar-button-start="glyph"] {
+        padding-inline-start: var(--grammar-control-padding-glyph-lg, 0.75rem);
+    }
+
+    .starci-core-button[data-size="lg"][data-grammar-button-end="glyph"] {
+        padding-inline-end: var(--grammar-control-padding-glyph-lg, 0.75rem);
+    }
+
+    /* Alert and toast: a box inside a surface, the container inset on every side, glyph and copy an inline pair. */
+    .starci-core-alert[data-component="Alert"],
+    .starci-core-toast[data-component="Toast"] {
+        gap: var(--grammar-inline-gap, 0.5rem);
+        padding: var(--grammar-inset, 0.75rem);
+    }
+
+    /* An alert inside a card is one level in: the nested step on every side. */
+    .starci-core-surface-content .starci-core-alert[data-component="Alert"] {
+        padding: var(--grammar-inset-nested, 0.5rem);
+    }
+
+    /* The toast's end side holds its close action, which carries its own room: the nested step. */
+    .starci-core-toast[data-component="Toast"] {
+        padding-inline-end: var(--grammar-inset-nested, 0.5rem);
+    }
+
+    /* List option: the nested inset on every side (a one-line row is 8 + 24 + 8 = 40), the avatar a row step from the text. */
+    .starci-core-list-box .starci-core-list-box-item {
+        gap: var(--grammar-row-gap, 0.75rem);
+        padding: var(--grammar-inset-nested, 0.5rem);
+    }
+
+    /* Table: the container inset inline, the nested step in the block axis (a 40px row). */
+    .starci-core-data-table .starci-core-data-table-column,
+    .starci-core-data-table .starci-core-data-table-cell {
+        padding: var(--grammar-inset-nested, 0.5rem) var(--grammar-inset, 0.75rem);
+    }
+}

package/dist/common/index.d.ts

@@ -1,5 +1,5 @@
 export { PRESENTATION_STATES, assertPresentationState, isPresentationState, type PresentationState } from "./state.js";
-export { COMMON_SPACING_SCALE, COMMON_SPACING_TOKENS, type CommonSpacingStep, type CommonSpacingValue } from "./spacing.js";
+export { COMMON_GAP_ROLES, COMMON_SPACING_SCALE, COMMON_SPACING_TOKENS, type CommonGapRole, type CommonSpacingStep, type CommonSpacingValue, type GapRole } from "./spacing.js";
 export { COMMON_UI_RULE_IDS, defineGrammarRuleConformance, type GrammarRuleConformance } from "./conformance.js";
 export * from "./renderers.js";
 export { COMMON_GRAMMAR_COMPONENTS, defineGrammarFamily, type CommonGrammarComponentName, type GrammarComponentRenderer, type GrammarFamilyContract, type GrammarFamilyStyles, } from "./registry.js";

package/dist/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACtH,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAC3H,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AAChH,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,yBAAyB,EACzB,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,GAC3B,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACtH,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,KAAK,OAAO,EAAE,MAAM,cAAc,CAAA;AAC/K,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AAChH,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,yBAAyB,EACzB,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,GAC3B,MAAM,eAAe,CAAA"}

package/dist/common/index.js

@@ -1,5 +1,5 @@
 export { PRESENTATION_STATES, assertPresentationState, isPresentationState } from "./state.js";
-export { COMMON_SPACING_SCALE, COMMON_SPACING_TOKENS } from "./spacing.js";
+export { COMMON_GAP_ROLES, COMMON_SPACING_SCALE, COMMON_SPACING_TOKENS } from "./spacing.js";
 export { COMMON_UI_RULE_IDS, defineGrammarRuleConformance } from "./conformance.js";
 export * from "./renderers.js";
 export { COMMON_GRAMMAR_COMPONENTS, defineGrammarFamily, } from "./registry.js";

package/dist/common/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,mBAAmB,EAA0B,MAAM,YAAY,CAAA;AACtH,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAmD,MAAM,cAAc,CAAA;AAC3H,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAA+B,MAAM,kBAAkB,CAAA;AAChH,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,yBAAyB,EACzB,mBAAmB,GAKtB,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,mBAAmB,EAA0B,MAAM,YAAY,CAAA;AACtH,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,qBAAqB,EAAqF,MAAM,cAAc,CAAA;AAC/K,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAA+B,MAAM,kBAAkB,CAAA;AAChH,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,yBAAyB,EACzB,mBAAmB,GAKtB,MAAM,eAAe,CAAA"}

package/dist/common/registry.d.ts

@@ -128,6 +128,17 @@ export declare const COMMON_GRAMMAR_COMPONENTS: Readonly<{
     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 Stack: ({ children, gap, align, measure, as }: import("./renderers.js").StackProps) => import("react").DetailedReactHTMLElement<{
+        className: string;
+        "data-component": string;
+        "data-tier": string;
+        "data-grammar-gap": import("./spacing.js").GapRole;
+        "data-grammar-align": import("./renderers.js").StackAlign;
+        "data-grammar-measure": import("./renderers.js").StackMeasure;
+        "data-contract": string;
+    }, HTMLElement>;
+    readonly Cluster: ({ children, gap, wrap, align, justify }: import("./renderers.js").ClusterProps) => import("react").JSX.Element;
+    readonly Grid: (props: import("./renderers.js").GridProps) => 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;

package/dist/common/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/common/registry.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEvE,MAAM,MAAM,wBAAwB,CAAC,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;AAClE,KAAK,uBAAuB,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAA;AACpE,KAAK,sBAAsB,CAAC,MAAM,SAAS,uBAAuB,IAAI;IAClE,QAAQ,EAAE,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE,wBAAwB,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;CAC3F,CAAA;AACD,KAAK,gCAAgC,CAAC,MAAM,SAAS,uBAAuB,EAAE,UAAU,SAAS,uBAAuB,IACpH,UAAU,GAAG;IAAE,QAAQ,EAAE,IAAI,IAAI,OAAO,CAAC,MAAM,UAAU,EAAE,MAAM,MAAM,CAAC,GAAG,KAAK;CAAE,CAAA;AAEtF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAW3B,CAAA;AACX,MAAM,MAAM,0BAA0B,GAAG,MAAM,OAAO,yBAAyB,CAAA;AAE/E,MAAM,MAAM,mBAAmB,CAAC,QAAQ,SAAS,MAAM,IAAI;IACvD,QAAQ,CAAC,UAAU,EAAE,mBAAmB,MAAM,aAAa,CAAA;IAC3D,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,SAAS,EAAE,qBAAqB,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAA;KAAE,CAAA;CAC1F,CAAA;AAED,MAAM,MAAM,qBAAqB,CAAC,QAAQ,SAAS,MAAM,EAAE,UAAU,SAAS,uBAAuB,IAAI;IACrG,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAA;IACrB,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAC9C,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,yBAAyB,GAAG,UAAU,CAAC,CAAA;IAC5E,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC;QAAE,qBAAqB,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAA;CACrE,CAAA;AAED,yEAAyE;AACzE,eAAO,MAAM,mBAAmB,GAC5B,KAAK,CAAC,QAAQ,SAAS,MAAM,EAC7B,KAAK,CAAC,YAAY,SAAS,sBAAsB,CAAC,OAAO,yBAAyB,CAAC,EACnF,KAAK,CAAC,UAAU,SAAS,uBAAuB,EAClD,YAAY;IACV,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAA;IACrB,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAC9C,QAAQ,CAAC,UAAU,EAAE;QACjB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAA;QACnC,QAAQ,CAAC,UAAU,EAAE,gCAAgC,CAAC,OAAO,yBAAyB,EAAE,UAAU,CAAC,CAAA;KACtG,CAAA;CACJ,KAAG,qBAAqB,CAAC,QAAQ,EAAE,UAAU,CAuB7C,CAAA"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/common/registry.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEvE,MAAM,MAAM,wBAAwB,CAAC,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;AAClE,KAAK,uBAAuB,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAA;AACpE,KAAK,sBAAsB,CAAC,MAAM,SAAS,uBAAuB,IAAI;IAClE,QAAQ,EAAE,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE,wBAAwB,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;CAC3F,CAAA;AACD,KAAK,gCAAgC,CAAC,MAAM,SAAS,uBAAuB,EAAE,UAAU,SAAS,uBAAuB,IACpH,UAAU,GAAG;IAAE,QAAQ,EAAE,IAAI,IAAI,OAAO,CAAC,MAAM,UAAU,EAAE,MAAM,MAAM,CAAC,GAAG,KAAK;CAAE,CAAA;AAEtF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY3B,CAAA;AACX,MAAM,MAAM,0BAA0B,GAAG,MAAM,OAAO,yBAAyB,CAAA;AAE/E,MAAM,MAAM,mBAAmB,CAAC,QAAQ,SAAS,MAAM,IAAI;IACvD,QAAQ,CAAC,UAAU,EAAE,mBAAmB,MAAM,aAAa,CAAA;IAC3D,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,SAAS,EAAE,qBAAqB,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAA;KAAE,CAAA;CAC1F,CAAA;AAED,MAAM,MAAM,qBAAqB,CAAC,QAAQ,SAAS,MAAM,EAAE,UAAU,SAAS,uBAAuB,IAAI;IACrG,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAA;IACrB,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAC9C,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,yBAAyB,GAAG,UAAU,CAAC,CAAA;IAC5E,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC;QAAE,qBAAqB,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAA;CACrE,CAAA;AAED,yEAAyE;AACzE,eAAO,MAAM,mBAAmB,GAC5B,KAAK,CAAC,QAAQ,SAAS,MAAM,EAC7B,KAAK,CAAC,YAAY,SAAS,sBAAsB,CAAC,OAAO,yBAAyB,CAAC,EACnF,KAAK,CAAC,UAAU,SAAS,uBAAuB,EAClD,YAAY;IACV,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAA;IACrB,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAC9C,QAAQ,CAAC,UAAU,EAAE;QACjB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAA;QACnC,QAAQ,CAAC,UAAU,EAAE,gCAAgC,CAAC,OAAO,yBAAyB,EAAE,UAAU,CAAC,CAAA;KACtG,CAAA;CACJ,KAAG,qBAAqB,CAAC,QAAQ,EAAE,UAAU,CAuB7C,CAAA"}

package/dist/common/registry.js

@@ -1,5 +1,5 @@
 "use client";
-import { Backdrop, Badge, Button, Code, ChatBubble, PaneGrid, Pane, PaneSection, Divider, EmptyNotice, FencedCodeBlock, FillViewport, Freestyle, GrammarRoot, Heading, HorizontalScrollRegion, Icon, IconButton, IconTile, IncludedMark, Input, Label, LeadingNumber, List, ListItem, ListRow, MarkdownArticle, MarkdownTableFrame, Mascot, MediaFrame, NavigationFeatureNav, NavLandmark, OtpInput, Page, PageContainer, PageHeader, PinnedActionBar, PressableField, PrimaryRailLayout, Progress, Rail, RankArtwork, Region, RelativeTime, SectionHeader, Sidebar, StateMark, StaticStateRow, StatusDot, Subnav, SurfaceAccordionCard, SurfaceCard, SurfaceCopyGroup, SurfaceListCard, Tabs, Terminal, Text, TextAction, Tooltip, VerticalScrollRegion, WorkspaceShell, } from "./renderers.js";
+import { Backdrop, Badge, Button, Code, ChatBubble, PaneGrid, Pane, PaneSection, Divider, EmptyNotice, FencedCodeBlock, FillViewport, Freestyle, GrammarRoot, Heading, HorizontalScrollRegion, Icon, IconButton, IconTile, IncludedMark, Input, Label, LeadingNumber, List, ListItem, ListRow, MarkdownArticle, MarkdownTableFrame, Mascot, MediaFrame, NavigationFeatureNav, NavLandmark, OtpInput, Page, PageContainer, PageHeader, PinnedActionBar, PressableField, PrimaryRailLayout, Progress, Rail, RankArtwork, Region, RelativeTime, SectionHeader, Sidebar, StateMark, StaticStateRow, StatusDot, Subnav, Stack, Cluster, Grid, SurfaceAccordionCard, SurfaceCard, SurfaceCopyGroup, SurfaceListCard, Tabs, Terminal, Text, TextAction, Tooltip, VerticalScrollRegion, WorkspaceShell, } from "./renderers.js";
 import { COMMON_FORMS_COMPONENTS } from "./renderers-forms.js";
 import { COMMON_OVERLAYS_COMPONENTS } from "./renderers-overlays.js";
 import { COMMON_NAVIGATION_COMPONENTS } from "./renderers-navigation.js";
@@ -9,6 +9,7 @@ export const COMMON_GRAMMAR_COMPONENTS = Object.freeze({
     Label, LeadingNumber, List, ListItem, ListRow, MarkdownArticle, MarkdownTableFrame, Mascot, MediaFrame,
     NavigationFeatureNav, NavLandmark, OtpInput, Page, PageContainer, PageHeader, PinnedActionBar, PressableField, PrimaryRailLayout,
     Progress, Rail, RankArtwork, Region, RelativeTime, SectionHeader, Sidebar, StateMark, StaticStateRow, StatusDot, Subnav,
+    Stack, Cluster, Grid,
     SurfaceAccordionCard, SurfaceCard, SurfaceCopyGroup, SurfaceListCard, Tabs, Terminal, Text,
     TextAction, Tooltip, VerticalScrollRegion, WorkspaceShell,
     ...COMMON_FORMS_COMPONENTS,