@uxelle/skills 0.2.0-beta.2 → 0.2.2

package/skills/uxelle-design-harness/recipe-app-chrome.md

@@ -7,18 +7,25 @@ React app frame: skip link, [`Navigation`](../uxelle-components/Navigation.md),
 ## When not
 
 - Not an `AppChrome` / `PageShell` component.
+- **Chrome does not render the content column.** `<main>` here is only the
+  scrollport — the **experience** inside it owns the capped column
+  ([how-to-page-layout.md](how-to-page-layout.md#who-owns-the-content-column)). Do
+  not emit a `maxWidth` + `--uxl-breakpoints-margin` wrapper from this recipe *and*
+  from the experience recipe, or the page is padded and capped twice.
 - Theme CSS and `data-*`: [how-to-host.md](how-to-host.md).
 - A2UI chat surfaces: skip link, 100% viewport shell, and html `data-*` are host-owned. Do not emit this recipe as A2UI. Optional `A2uiNavigation` / `A2uiFooter` only when the host already has a surface.
 
 ## Regions
 
-skip link → `Navigation` (header) and/or `NavigationSide` (side rail wrapping `NavigationSideGroup` rows) → `<main id="main-content">` → content column ([how-to-page-layout.md](how-to-page-layout.md)) → optional `Footer` **inside that same `<main>`**
+skip link → `Navigation` (header) and/or `NavigationSide` (side rail wrapping `NavigationSideGroup` rows) → `<main id="main-content">` → *the experience's* content column ([how-to-page-layout.md](how-to-page-layout.md#who-owns-the-content-column)) → optional `Footer` **inside that same `<main>`**
 
 ## Spacing
 
-Nav is a catalog component (its own tokens). Main is the scrollport (no page padding). The **page column inside main** uses breakpoint margin / max-container-width (one-column settings may use `600px` — [recipe-settings-page.md](recipe-settings-page.md)). When present, `Footer` sits after that column in the same scrollport.
+Chrome is **density-invariant**: nav and footer are catalog components with their own tokens, and the margin / max-container-width on the experience's column never shift with the mode either. The experience picks the density mode and renders that column ([density.md](density.md)) — chrome does neither.
 
-Do not wrap `Footer` in extra `Layout` padding. Band padding is catalog-owned: two-band footers use `--uxl-breakpoints-padding-large-13`; a **single** band (legal-only, unused slot `null`) uses `--uxl-theme-layout-spacing-small-4` on the block axis. That is the related-controls step, not page-section (`medium-12`) or hero (`large-13`).
+Nav is a catalog component (its own tokens). Main is the scrollport — **no page padding and no column cap here**; the experience's own column supplies breakpoint margin / max-container-width (one-column settings may use `600px` — [recipe-settings-page.md](recipe-settings-page.md)). When present, `Footer` sits after that column in the same scrollport.
+
+Do not wrap `Footer` in extra `Layout` padding. Band padding is catalog-owned: two-band footers use `--uxl-breakpoints-padding-large-13`; a **single** band (legal-only, unused slot `null`) uses `--uxl-theme-layout-spacing-small-4` on the block axis. That is the **Control** step, not **Section** or **Band**.
 
 ## A11y
 
@@ -73,17 +80,14 @@ Import from `@uxelle/components`. Put skip-link CSS in the host stylesheet.
     />
   </Layout>
   <main id="main-content" tabIndex={-1} style={{ flexGrow: 1, minHeight: 0, overflow: "auto" }}>
-    <Layout
-      display="flex"
-      flexDirection="column"
-      width="100%"
-      maxWidth="var(--uxl-breakpoints-max-container-width)"
-      mh="auto"
-      p="var(--uxl-breakpoints-margin)"
-      gap="var(--uxl-theme-layout-spacing-medium-12)"
-    >
-      {/* page body — recipe-page-shell.md / recipe-form-section.md / recipe-data-table-page.md / recipe-settings-page.md */}
-    </Layout>
+    {/*
+      The experience renders its own capped column here — chrome does not.
+      It owns maxWidth / mh / p / gap so it can set its density mode and, for a
+      one-column form or settings view, the 600px reading measure.
+      recipe-page-shell.md / recipe-dashboard-overview.md / recipe-data-table-page.md /
+      recipe-settings-page.md
+    */}
+    <PageBody />
     <Footer
       topMainContent={null}
       bottomMainContent={
@@ -108,7 +112,7 @@ When-not for this recipe. Host owns chrome (skip link, viewport shell, html `dat
 
 ## Help and marketing chrome
 
-Use the same `Navigation` when there are **no** primary app links (help center, marketing). Pass `bottomSlot={null}` to hide the secondary bar. Unused **primary** slots must not be omitted — omitted (`undefined`) or `null` on leading/center/trailing still fill catalog demo content (`??`). Pass `centerSlot={false}` when there is no center nav.
+Use the same `Navigation` when there are **no** primary app links (help center, marketing). Pass `bottomSlot={null}` to hide the secondary bar. Unused **primary** slots must not be omitted — an omitted (`undefined`) `leadingSlot` / `centerSlot` / `trailingSlot` fills catalog demo content. Pass **`null`** to drop a slot entirely (`centerSlot={null}` when there is no center nav) — the same pattern as `bottomSlot={null}`. Do not pass `false`: it clears the content but still renders an empty slot wrapper in the flex row.
 
 Nav trailing (search, language, Log in / Register) stays a **row** at every width — [how-to-page-layout.md](how-to-page-layout.md#action-clusters). Do not stack those controls on mobile.
 
@@ -122,7 +126,7 @@ Nav trailing (search, language, Log in / Register) stays a **row** at every widt
       <Logo name="generic" width={40} interactive aria-hidden />
     </a>
   }
-  centerSlot={false}
+  centerSlot={null}
   trailingSlot={
     <>
       <LanguageSelector value="EN" />

package/skills/uxelle-design-harness/recipe-card-grid.md

@@ -35,13 +35,20 @@ minmax(MIN, 1fr))` drops from 3-up to 2-up to 1-up as width shrinks; pick `MIN`
 
 ## Spacing
 
-`gap="var(--uxl-breakpoints-gutter)"`. Card inner padding is component-owned. The
-page column still uses [how-to-page-layout.md](how-to-page-layout.md).
+`gap="var(--uxl-breakpoints-gutter)"`. Card inner padding is component-owned. Both
+are **density-invariant** — a card grid looks the same in every mode, so do not
+tighten the gutter for a `compact` dashboard or pad it out for a marketing page
+([density.md](density.md)). Stacks *inside* a card use the host's **Control** or
+**Group** step. The page column still uses [how-to-page-layout.md](how-to-page-layout.md).
 
 ## A11y
 
 Name the group when the cards are a set (`aria-label` on the grid `Layout`).
-Headings inside cards continue page rank (`h2` under the page `h1`). A `ProductCard`
+Headings inside cards continue page rank (`h2` under the page `h1`) but take the
+type **one stop below** that rank's default, since the card already supplies the
+separation — with `Display Extra Small` as the floor. A `spacious` card `h2` is
+`Display Small`; a product card `h2` is already at the floor and stays
+`Display Extra Small`, as shown ([density.md](density.md)). A `ProductCard`
 CTA names itself; if the whole card is the link, the heading text is the name. See
 [how-to-accessibility.md](how-to-accessibility.md).
 
@@ -100,5 +107,7 @@ Case-study / product tiles (`ProductCard`, media + CTA):
 ## A2UI
 
 `A2uiLayout` has no `gridTemplateColumns` — stack `A2uiCard` / `A2uiProductCard` in
-a column with `var(--uxl-theme-layout-spacing-*)` `gap`. No
-`getUxelleRecipe("card-grid")` ([a2ui.md](a2ui.md)).
+a column with `var(--uxl-theme-layout-spacing-*)` `gap`. Media in
+`A2uiProductCard` `centerSlotContent` is `A2uiImage` with `aspectRatio` (omit
+`width` so it fills the card). No `getUxelleRecipe("card-grid")`
+([a2ui.md](a2ui.md)).

package/skills/uxelle-design-harness/recipe-cta-band.md

@@ -16,8 +16,10 @@ A single, decisive conversion moment: "Start free," "Talk to sales."
 
 - One primary action (an optional secondary is fine) — not a menu of links.
 - Section heading is `h2`, not another `h1`.
-- Keep it to one dominant brand band per page; if the hero is loud, this can be
-  quieter, or vice versa.
+- Keep it to one dominant brand band per page, and make that concrete rather than
+  vague: if the hero already carries a brand palette, set this band to
+  `default-subtle`. Only one of the two gets a `brand-*` palette
+  ([recipe-landing-page.md](recipe-landing-page.md)).
 
 ## Regions
 
@@ -33,8 +35,10 @@ viewports and stack `fullWidth` below tablet (`useBreakpointUp("tablet")`). See
 
 ## Spacing
 
-`large-13`+ block padding for the band; `medium-8` between the lockup and actions
-([spacing-steps.md](spacing-steps.md)).
+**Band** step for the band's block padding and **Group** between the lockup and the
+actions — `large-15` and `medium-10` on a `spacious` marketing page, its usual home
+([density.md](density.md), [spacing-steps.md](spacing-steps.md)). A CTA closing a
+`standard` product surface resolves to `large-13` / `medium-8`.
 
 ## A11y
 
@@ -50,20 +54,26 @@ role tokens — never hardcode hex. Pick the brand palette by the look you want
 
 ## React
 
+`tabletUp` is the shared `useBreakpointUp("tablet")` helper — copy it from
+[how-to-page-layout.md](how-to-page-layout.md#3-token-driven-js-narrow-fallback),
+do not reimplement it or inline a px literal.
+
 ```tsx
+const tabletUp = useBreakpointUp("tablet");
+
 <Layout
   as="section"
   data-color-switcher="brand-1"
   display="flex"
   justifyContent="center"
-  p="var(--uxl-theme-layout-spacing-large-13)"
+  p="var(--uxl-theme-layout-spacing-large-15)"
   style={{ backgroundColor: "var(--uxl-color-switcher-background)" }}
 >
   <Layout
     display="flex"
     flexDirection="column"
     alignItems="center"
-    gap="var(--uxl-theme-layout-spacing-medium-8)"
+    gap="var(--uxl-theme-layout-spacing-medium-10)"
     width="100%"
     maxWidth="var(--uxl-breakpoints-max-container-width)"
   >

package/skills/uxelle-design-harness/recipe-dashboard-overview.md

@@ -36,10 +36,16 @@ when narrow. See [how-to-page-layout.md](how-to-page-layout.md#responsiveness).
 
 ## Spacing
 
-`medium-12` between page sections (header / KPIs / primary / supporting);
-`--uxl-breakpoints-gutter` inside the grids. Section intros are `micro-2`
+**Density: `compact`** — a dashboard's job is to show more at a glance, so the
+column tightens ([density.md](density.md)). **Section** gap between page sections
+(header / KPIs / primary / supporting) is `medium-9`; subgroups inside a section
+use **Group** (`small-6`); section intros use **Tight** (`micro-1`).
+`--uxl-breakpoints-gutter` stays the grid gap in every mode
 ([spacing-steps.md](spacing-steps.md)).
 
+Step up to `standard` when the overview is a light landing page with two or three
+KPIs rather than a dense monitoring surface — but pick one mode and hold it.
+
 ## A11y
 
 One `main`, one `h1`. Name each region (KPIs `aria-label="Key metrics"`, the primary
@@ -55,6 +61,7 @@ alerts, never as decoration ([how-to-color.md](how-to-color.md)).
 ## React
 
 ```tsx
+// Density: compact (data-dense dashboard) — see density.md
 <Layout
   display="flex"
   flexDirection="column"
@@ -62,7 +69,7 @@ alerts, never as decoration ([how-to-color.md](how-to-color.md)).
   maxWidth="var(--uxl-breakpoints-max-container-width)"
   mh="auto"
   p="var(--uxl-breakpoints-margin)"
-  gap="var(--uxl-theme-layout-spacing-medium-12)"
+  gap="var(--uxl-theme-layout-spacing-medium-9)"
 >
   {/* Page header — recipe-page-header.md */}
   <DashboardHeader />
@@ -90,18 +97,23 @@ alerts, never as decoration ([how-to-color.md](how-to-color.md)).
         <LabelBadge label="+4" dataColorSwitcher="success" emphasis="low" leadingIcon leadingIconName="trending_up" />
       }
     />
+    {/*
+      Palette tracks whether the change is *good*, not whether the number rose.
+      Fewer open tickets is an improvement, so this delta is `success` while
+      trending down — say so in the label rather than relying on the arrow.
+    */}
     <StatTile
       label="Open tickets"
       value="18"
       trailingSlot
       trailingSlotContent={
-        <LabelBadge label="-6" dataColorSwitcher="success" emphasis="low" leadingIcon leadingIconName="trending_down" />
+        <LabelBadge label="6 fewer" dataColorSwitcher="success" emphasis="low" leadingIcon leadingIconName="trending_down" />
       }
     />
   </Layout>
 
   {/* Primary surface — recipe-data-table-page.md (with states) */}
-  <Layout as="section" display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-small-4)">
+  <Layout as="section" display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-micro-3)">
     <Text type="Display Extra Small" as="h2" width={false}>Recent activity</Text>
     {isLoading ? <ActivitySkeleton /> : rows.length ? <ActivityTable rows={rows} /> : <ActivityEmpty />}
   </Layout>

package/skills/uxelle-design-harness/recipe-data-table-page.md

@@ -11,7 +11,8 @@ Composes [`Table`](../uxelle-components/Table.md), [`TabsCompact`](../uxelle-com
 - Not a `DataTablePage` / `TablePage` component.
 - Do not invent a toolbar component. Two bands, two jobs — do not mix them:
   - **Page actions** (add, invite, import, delete, re-upload) sit with the title, in a `ButtonGroup`.
-  - **Query controls** (filter, facets, search, export) sit on the table, in `Table` `topSlot`.
+  - **Query controls** (filter, facets, search, view-scoped export) sit on the table, in `Table` `topSlot`.
+  - **Export splits by scope — pick one.** "Export view" (what the filters leave on screen) rides the query bar; "Export all" (the whole dataset) is a page action beside the title ([recipe-page-header.md](recipe-page-header.md)). Never both on one page. This records page defaults to **Export view**.
 - **Data tabs are not page navigation.** `Navigation` / `NavLink` change pages (Referrals vs Earnings). `TabsCompact` that switch which rows are in **this** table (referrals vs connections, active vs invited) live in `Table` `topSlot`, immediately above the query bar and grid. Do not park them under the page title.
 - Do not put a `Banner` (or any other page section) between data tabs and the grid.
 - `ButtonGroup` only renders `Button` children — do not nest `Sheet` or `Textfield` in it.
@@ -20,7 +21,7 @@ Composes [`Table`](../uxelle-components/Table.md), [`TabsCompact`](../uxelle-com
 - Do not put table search in `Navigation`.
 - `Lockup` and `Textfield` are `width: 100%` of the parent. Do not put them in a `flexWrap="wrap"` row with actions — they take the line and stack siblings underneath. Keep `flexWrap="nowrap"` (Layout default). Do **not** wrap `Lockup` in another `Layout` (`flexGrow` / `flexBasis={0}`) to sit beside a `ButtonGroup`. Do not put `minWidth` on the actions to invent a wrap threshold. Size a search field (`width="16rem"`, `flexShrink={0}`). Actions: `Layout` `flexShrink={0}` around the `ButtonGroup` only. Stack the header with `flexDirection="column"` below tablet.
 - Table has no expandable / nested-row API. v1 is **flat rows**.
-- A2UI: no `getUxelleRecipe("data-table-page")` yet. Compose `A2uiTable*` / `A2uiSheet` / `A2uiTabGroup` / `A2uiTextfield`. `Lockup` has no adapter — stack `A2uiText`. Layout-spacing only (no breakpoint chrome).
+- A2UI: no `getUxelleRecipe("data-table-page")` yet. Compose `A2uiTable*` / `A2uiSheet` / `A2uiTabGroup` / `A2uiTextfield` / `A2uiChoiceChip` / `A2uiFilterChipGroup`. `Lockup` has no adapter — stack `A2uiText`. Layout-spacing only (no breakpoint chrome).
 
 ## Regions
 
@@ -30,13 +31,13 @@ page column → **header** (title left, page actions right) → optional `Banner
 ┌ Title + optional subtitle                    [Delete] [Upload] ┐
 ├ optional Banner                                                ┤
 ├ Table.topSlot:  Tabs (this dataset / that dataset)             ┤
-├                 [Filter] [facet]     [Search……] [Export]       ┤
+├            [Filter] [facet]   [Search……] [Export view]        ┤
 ├                 [FilterChip] [FilterChip]                      ┤
 ├ Table.tableSlot: grid, or empty copy                           ┤
 └ Table.bottomSlot: Pagination                                   ┘
 ```
 
-Page `gap` (`medium-12`) is between **page sections** (header vs table). Inside `topSlot`, use `small-4` so tabs sit on the table, not in a previous section.
+Page `gap` (the **Section** step — `medium-9` under this recipe's `compact` mode) is between **page sections** (header vs table). Inside `topSlot`, use the **Control** step (`micro-3`) so tabs sit on the table, not in a previous section.
 
 ## What goes where
 
@@ -49,13 +50,13 @@ Page `gap` (`medium-12`) is between **page sections** (header vs table). Inside
 **Query bar — narrow the current view.** Next in `topSlot`, one row, `justifyContent="space-between"`:
 
 - **Left — constrain:** Filter `Button` → `Sheet`. Name the trigger after a single dimension (`Status`, `Role`); use `Filter` when the sheet has several groups. Optional `ChoiceChip` for a sticky facet. Applied values: `FilterChipGroup` **under** this row.
-- **Right — find:** search and utilities **on one line**. Wrapper around `Textfield` with a bounded `width` (e.g. `16rem`) and `flexShrink={0}`. `Export all` / Refresh as `emphasis="low"` `Button` siblings, cluster `flexWrap="nowrap"`. Not inside the Filter `ButtonGroup`.
+- **Right — find:** search and utilities **on one line**. Wrapper around `Textfield` with a bounded `width` (e.g. `16rem`) and `flexShrink={0}`. `Export view` / Refresh as `emphasis="low"` `Button` siblings, cluster `flexWrap="nowrap"`. Not inside the Filter `ButtonGroup`. Default is `Export view` here. If the page needs the whole dataset instead, put `Export all` beside the title and omit this control — never both.
 
 **Footer — page the result.** `Pagination` in `bottomSlot`.
 
 ## Spacing
 
-Page column: [how-to-page-layout.md](how-to-page-layout.md). Header and query bar: `small-4` gap, `space-between`. `topSlot` stack (tabs → query bar → chips): `small-4`. Do not wrap `Table` in extra padding. Placement rules: [how-to-page-layout.md](how-to-page-layout.md#keep-controls-with-what-they-operate).
+**Density: `compact`** — a records page exists to show rows ([density.md](density.md)). Page column: [how-to-page-layout.md](how-to-page-layout.md). Header and query bar use the **Control** step (`micro-3`) with `space-between`; the `topSlot` stack (tabs → query bar → chips) uses the same **Control** step; the **Section** gap between page sections is `medium-9`. Do not wrap `Table` in extra padding — row height is component-owned and does not shift with the mode, so never claw back space by shrinking hit areas. Placement rules: [how-to-page-layout.md](how-to-page-layout.md#keep-controls-with-what-they-operate).
 
 ## A11y
 
@@ -69,6 +70,9 @@ Set `alignment` on **both** `TableHeaderCell` and `TableCell`:
 - Money, counts, numeric → `right`
 - Category / visibility / status (`LabelBadge`) → `center`
 - A column that is only a CTA (`Button` / `IconButton` / `Link`) → `center`
+- Selection / checkbox: `center`, and set `flex: 0` with `maxWidth` (e.g. 72) on that column track so leftover `fr` space does not stretch it on a wide viewport. `flex: 0` without a pixel `minWidth` or `maxWidth` sizes the track to content. `maxWidth` on a growing (`flex > 0`) column is a resize ceiling only.
+
+Cell copy wraps and the row height follows the tallest cell. Header titles stay on one line and ellipsize when the column is narrower than the name (native tooltip shows the full title). Do not pass `truncation` on body `Text` unless a dense single-line column is required.
 
 Identity cells: stack `Text type="Body Small Alt"` (name) and `Text type="Condensed"` (email) with `gap={0}`. Line boxes already separate the lines — do not add `micro-2` (or any layout-spacing) between them. Do not invent an Avatar component.
 
@@ -81,62 +85,27 @@ Keep `Table`, data tabs, and the query bar in `topSlot`. Put a `role="status"` s
 ## Responsive
 
 - **Header** stacks below tablet: switch the header `Layout` `flexDirection` to `column` and let the `ButtonGroup` go `direction="column"` `fullWidth` (`useBreakpointUp("tablet")`, [how-to-page-layout.md](how-to-page-layout.md#action-clusters)).
-- **Query bar** stays a row of controls; when very tight, the search field can take the full line above the filter/export cluster. Applied `FilterChipGroup` wraps.
-- **Table** scrolls horizontally when narrower than its columns — there is no stacked-row API. Keep the query bar and tabs above it.
+- **Query bar** stays a row of controls; when very tight, the search field can take the full line above the filter/export cluster. Applied `FilterChipGroup` wraps whole chips; a too-wide chip ellipsizes so dismiss stays visible.
+- **Table** scrolls horizontally when narrower than its columns — there is no stacked-row API. Keep the query bar and tabs above it. Before any column is resized, header titles stay unwrapped and the grid’s min width is the sum of those titles (plus column mins). After a resize, every column is a pixel track at the widths on screen (siblings do not reflow to fill the container). Header titles in a squeezed track ellipsize. Call `useResetTableColumnWidths()` to restore every column to its template.
 - **Pagination** swaps to [`PaginationSimple`](../uxelle-components/PaginationSimple.md) where the full control is too wide.
 
 ## React
 
-Import from `@uxelle/components`. Data tabs and the query bar both go in `topSlot` — tabs first. `tabletUp` comes from `useBreakpointUp("tablet")` ([how-to-page-layout.md](how-to-page-layout.md#action-clusters)).
+Import from `@uxelle/components`. Data tabs and the query bar both go in `topSlot` — tabs first.
+
+`RecordsHeader` is [recipe-page-header.md](recipe-page-header.md) as-is, with two deltas for this page: the `h1` is `Display Small` and the row gap is the `compact` **Control** step (`micro-3`). Do not add `Export all` to that header when the query bar already has `Export view`. `TableQueryBar` is [recipe-query-bar.md](recipe-query-bar.md), with its gaps at `micro-3` and its export labelled `Export view`. Build both from their own recipes rather than copying them here — the rules that differ are in **Regions** above.
 
 ```tsx
-<Layout as="section" display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-small-4)">
-  <Layout
-    display="flex"
-    flexDirection={tabletUp ? "row" : "column"}
-    flexWrap="nowrap"
-    justifyContent="space-between"
-    alignItems={tabletUp ? "flex-end" : "stretch"}
-    gap="var(--uxl-theme-layout-spacing-small-4)"
-  >
-    <Lockup
-      topSlot={false}
-      title={
-        <Text type="Display Extra Small" as="h1" width={false}>
-          Referrals
-        </Text>
-      }
-      body={
-        <Text type="Body Medium" width={false}>
-          Connections, matches, and potential earnings in one register.
-        </Text>
-      }
-    />
-    <Layout flexShrink={0}>
-      <ButtonGroup
-        direction={tabletUp ? "row" : "column"}
-        fullWidth={!tabletUp}
-        aria-label="Referral actions"
-      >
-        <Button emphasis="medium">
-          <Text type="Button" width>
-            Delete
-          </Text>
-        </Button>
-        <Button emphasis="high">
-          <Text type="Button" width>
-            Upload
-          </Text>
-        </Button>
-      </ButtonGroup>
-    </Layout>
-  </Layout>
+// Density: compact (records page — rows are the point) — see density.md
+<Layout as="section" display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-micro-3)">
+  {/* Page header — recipe-page-header.md (h1 + collection actions; no Export all) */}
+  <RecordsHeader />
 
   {/* optional Banner — here, not inside Table */}
 
   <Table
     topSlot={
-      <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-small-4)">
+      <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-micro-3)">
         <TabsCompact
           amount={2}
           tabLabels={["Referrals (12)", "Connections (6)"]}
@@ -167,85 +136,6 @@ Import from `@uxelle/components`. Data tabs and the query bar both go in `topSlo
 </Layout>
 ```
 
-Query bar (filters left; search and export **nowrap** on the right):
-
-```tsx
-function TableQueryBar() {
-  return (
-    <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-small-4)">
-      <Layout
-        display="flex"
-        flexDirection="row"
-        flexWrap="nowrap"
-        justifyContent="space-between"
-        alignItems="center"
-        gap="var(--uxl-theme-layout-spacing-small-4)"
-        aria-label="Table filters and search"
-      >
-        <Layout
-          display="flex"
-          flexDirection="row"
-          flexWrap="nowrap"
-          alignItems="center"
-          gap="var(--uxl-theme-layout-spacing-small-4)"
-        >
-          <Sheet
-            direction="Right"
-            title="Filters"
-            closeLabel="Close filters"
-            trigger={
-              <Button emphasis="medium" leadingIcon leadingIconName="filter_list">
-                <Text type="Button" width>
-                  Status
-                </Text>
-              </Button>
-            }
-          >
-            <CheckboxGroup name="status" label labelText="Status">
-              <Checkbox value="open">
-                <Text type="Body Medium">Open</Text>
-              </Checkbox>
-              <Checkbox value="matched">
-                <Text type="Body Medium">Matched</Text>
-              </Checkbox>
-            </CheckboxGroup>
-          </Sheet>
-          <ChoiceChip label="Top match" onChange={() => {}} />
-        </Layout>
-        <Layout
-          display="flex"
-          flexDirection="row"
-          flexWrap="nowrap"
-          alignItems="center"
-          gap="var(--uxl-theme-layout-spacing-small-4)"
-          flexShrink={0}
-        >
-          <Layout width="16rem" flexShrink={0}>
-            <Textfield
-              label={false}
-              aria-label="Search by name"
-              name="table-search"
-              autoComplete="off"
-              placeholder="Search by name"
-              leadingIcon
-              leadingIconName="search"
-            />
-          </Layout>
-          <Layout flexShrink={0}>
-            <Button emphasis="low">
-              <Text type="Button" width>
-                Export all
-              </Text>
-            </Button>
-          </Layout>
-        </Layout>
-      </Layout>
-      {/* Optional: FilterChipGroup of applied filters */}
-    </Layout>
-  );
-}
-```
-
 Grid cells (alignment on header and body):
 
 ```tsx
@@ -266,7 +156,10 @@ Grid cells (alignment on header and body):
 </TableCell>
 ```
 
-Confirm / upload `Dialog` (page actions, not on the table):
+Confirm / upload `Dialog` (page actions, not on the table). `tabletUp` is the shared
+`useBreakpointUp("tablet")` helper — copy it from
+[how-to-page-layout.md](how-to-page-layout.md#3-token-driven-js-narrow-fallback),
+do not reimplement it or inline a px literal:
 
 ```tsx
 <Dialog
@@ -296,11 +189,11 @@ Confirm / upload `Dialog` (page actions, not on the table):
     </Text>
   }
   bottomSlotContent={
-          <ButtonGroup
-            direction={tabletUp ? "row" : "column"}
-            fullWidth={!tabletUp}
-            aria-label="Delete confirmation"
-          >
+    <ButtonGroup
+      direction={tabletUp ? "row" : "column"}
+      fullWidth={!tabletUp}
+      aria-label="Delete confirmation"
+    >
       <Button emphasis="low" size="medium" onClick={() => setDeleteOpen(false)}>
         <Text type="Button" width>
           Cancel
@@ -320,4 +213,4 @@ Upload dialogs put `FileUpload` `fullWidth` in `centerSlotContent`. Title `Text`
 
 ## A2UI
 
-Same region order and layout-spacing strings. Bind row data and search/filter state. Runtime: no `getUxelleRecipe("data-table-page")` yet — compose `A2uiTable*` / `A2uiSheet` / `A2uiTabGroup` / `A2uiTextfield` ([a2ui.md](a2ui.md)). `Lockup` has no adapter — stack `A2uiText`. `A2uiText` in `A2uiDialog` slots uses `"width": false`.
+Same region order and layout-spacing strings. Bind row data and search/filter state. Runtime: no `getUxelleRecipe("data-table-page")` yet — compose `A2uiTable*` / `A2uiSheet` / `A2uiTabGroup` / `A2uiTextfield` / `A2uiChoiceChip` / `A2uiFilterChipGroup` ([a2ui.md](a2ui.md)). `Lockup` has no adapter — stack `A2uiText`. `A2uiText` in `A2uiDialog` slots uses `"width": false`. Chip labels stay on the adapter (`label`); do not nest `A2uiText` inside chips. Exclusive `A2uiChoiceChip` selection is one checked value in host state; use `A2uiRadioGroup` or `A2uiSegmentedControl` for radio semantics.

package/skills/uxelle-design-harness/recipe-feature-section.md

@@ -35,9 +35,10 @@ Two columns from tablet up, single column (media over copy) below — use
 
 ## Spacing
 
-`--uxl-breakpoints-gutter` between the columns; `medium-12` between stacked feature
-sections; `large-13`+ block padding if the section is its own band
-([spacing-steps.md](spacing-steps.md)).
+`--uxl-breakpoints-gutter` between the columns in every mode. **Section** step
+between stacked feature sections and the **Band** step if the section is its own
+band — `large-14` and `large-15` on the `spacious` marketing page where these live
+([density.md](density.md), [spacing-steps.md](spacing-steps.md)).
 
 ## A11y
 
@@ -61,7 +62,7 @@ const tabletUp = useBreakpointUp("tablet");
 >
   <Lockup
     overline={<Text type="Overline" width={false}>Automation</Text>}
-    title={<Text type="Display Small" as="h2" width={false}>Ship without the busywork</Text>}
+    title={<Text type="Display Medium" as="h2" width={false}>Ship without the busywork</Text>}
     body={<Text type="Body Medium" width={false}>Rules handle the repetitive steps so your team ships.</Text>}
   />
   <Image src="/features/automation.png" alt="Automation rules editor" aspectRatio="4:3" />
@@ -74,7 +75,7 @@ alternates sides.
 Switched variant (capabilities behind a control):
 
 ```tsx
-<Layout as="section" display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-medium-8)">
+<Layout as="section" display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-medium-10)">
   <SegmentedControl
     labelText="Capabilities"
     value={feature}
@@ -92,5 +93,6 @@ Switched variant (capabilities behind a control):
 ## A2UI
 
 No `getUxelleRecipe("feature-section")` and no `gridTemplateColumns` — stack
-`A2uiText` copy then `A2uiImage` in one column; the switched variant uses
-`A2uiSegmentedControl` or `A2uiTabGroup` ([a2ui.md](a2ui.md)).
+`A2uiText` copy then `A2uiImage` (`aspectRatio` to crop; omit `width` so it fills
+the column) in one column; the switched variant uses `A2uiSegmentedControl` or
+`A2uiTabGroup` ([a2ui.md](a2ui.md)).

package/skills/uxelle-design-harness/recipe-footer.md

@@ -107,10 +107,13 @@ leads. The legal bar wraps its links. See
 
 ## Spacing
 
-`--uxl-breakpoints-gutter` between columns; `micro-2` within a link list; `small-4`
-inside the brand block and the legal bar. Band padding is component-owned — a single
-remaining band is compact (`small-4`), two bands use the large step; do not wrap
-`Footer` in extra `p` / `gap`.
+`--uxl-breakpoints-gutter` between columns; the **Tight** step within a link list;
+the **Control** step inside the brand block and the legal bar (`micro-2` / `small-4`
+under `standard`) — [density.md](density.md).
+
+Band padding is **component-owned and density-invariant**: a single remaining band
+is tight (`small-4`), two bands use the large step. Do not wrap `Footer` in extra
+`p` / `gap` to hit a density mode.
 
 ## A11y
 

package/skills/uxelle-design-harness/recipe-form-section.md

@@ -23,9 +23,9 @@ Any catalog field: [`Textfield`](../uxelle-components/Textfield.md), [`Textarea`
 
 ## Spacing
 
-`gap="var(--uxl-theme-layout-spacing-medium-8)"` between fields (or field **rows**). Header stack `var(--uxl-theme-layout-spacing-micro-2)`. Actions in `ButtonGroup` (not ad-hoc `Layout` for two buttons) — row from tablet up, column below tablet ([how-to-page-layout.md](how-to-page-layout.md#action-clusters)). Parts of one value on one row: `small-4` inside the grid.
+**Density: `standard`** — a form is read and filled, so it stays legible; a form embedded in a `compact` console may take that mode, but never tighten a public marketing form ([density.md](density.md)). The **Group** step goes between fields (or field **rows**) — `gap="var(--uxl-theme-layout-spacing-medium-8)"` under `standard`. Header stack uses **Tight** (`var(--uxl-theme-layout-spacing-micro-2)`). Parts of one value on one row use **Control** (`small-4`) inside the grid. Actions in `ButtonGroup` (not ad-hoc `Layout` for two buttons) — row from tablet up, column below tablet ([how-to-page-layout.md](how-to-page-layout.md#action-clusters)).
 
-**Separate the actions from the fields.** The submit / action cluster is a decision point, not one more field — give it `medium-12` from the last field (the page-section gap), not the `medium-8` field gap. At the field gap the primary button reads as grouped with the control above it (e.g. a submit sitting right under the last `Select`). Group the heading + fields in one stack and make the actions a sibling at `medium-12` (see the React example).
+**Separate the actions from the fields.** The submit / action cluster is a decision point, not one more field — give it the **Section** step from the last field (`medium-12` under `standard`), not the **Group** field gap. At the field gap the primary button reads as grouped with the control above it (e.g. a submit sitting right under the last `Select`). Group the heading + fields in one stack and make the actions a sibling at the **Section** step (see the React example). This separation must survive every mode: under `compact` it is `medium-9` against a `small-6` field gap — still the required ~1.5x apart.
 
 ## Measure