@uxelle/skills 0.2.1-beta.0 → 0.2.3

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
 

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

@@ -19,7 +19,8 @@ The first impression: one sentence of value, one clear action, and supporting me
 - One `h1` for the whole page lives here — later sections are `h2`.
 - Keep the media non-interactive; actions go in `contentSlot`.
 - Pass media as a **direct** `Image` / `img` / `picture` / `video` — no wrappers
-  (Hero owns the crop; a nested `Image.aspectRatio` has no effect).
+  (Hero owns the crop; nested `Image.aspectRatio` and box size — `width`,
+  `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight` — have no effect).
 
 ## Regions
 
@@ -27,16 +28,24 @@ The first impression: one sentence of value, one clear action, and supporting me
 
 ## Responsive
 
-`Hero` owns it: `contentDirection="Left" | "Right"` pins a side panel on tablet and
-up and drops to a full-width bottom panel below; `Bottom` is full-width at every
-size. The crop adapts automatically. If the two actions feel tight on mobile, switch
-the `ButtonGroup` `direction` to `column` (`useBreakpointUp("tablet")`).
+`Hero` owns the panel and crop: `contentDirection="Left" | "Right"` pins a side
+panel on tablet and up and drops to a full-width bottom panel below; `Bottom` is
+full-width at every size. The crop adapts automatically.
+
+The actions are **not** component-owned. Two text `Button`s take the tablet switch
+here exactly as anywhere else — `direction={tabletUp ? "row" : "column"}` with
+`fullWidth={!tabletUp}`, not a judgement call about whether they "feel tight"
+([how-to-page-layout.md](how-to-page-layout.md#action-clusters)). A hero with a
+single action passes no `direction`.
 
 ## Spacing
 
-Content-area spacing is component-owned. The hero is a full-bleed band, so it sits
-outside the capped content column — following sections resume the column
-([how-to-page-layout.md](how-to-page-layout.md)).
+Content-area spacing is component-owned and **density-invariant** — `Hero` owns its
+own band padding, so do not wrap it in compensating `p` to reach a mode. The hero is
+a full-bleed band, so it sits outside the capped content column — following sections
+resume the column at the page's **Section** gap (`large-14` on the `spacious`
+marketing page where a hero lives) ([how-to-page-layout.md](how-to-page-layout.md),
+[density.md](density.md)).
 
 ## A11y
 
@@ -53,7 +62,13 @@ dominant brand band; keep later sections calmer ([how-to-color.md](how-to-color.
 
 ## 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");
+
 <Hero
   contentDirection="Left"
   data-color-switcher="brand-1"
@@ -63,7 +78,7 @@ dominant brand band; keep later sections calmer ([how-to-color.md](how-to-color.
       <Lockup
         overline={<Text type="Overline" width={false}>New</Text>}
         title={
-          <Text type="Display Medium" as="h1" width={false}>
+          <Text type="Display Large" as="h1" width={false}>
             One workspace for every team
           </Text>
         }
@@ -73,9 +88,13 @@ dominant brand band; keep later sections calmer ([how-to-color.md](how-to-color.
           </Text>
         }
       />
-      <ButtonGroup aria-label="Get started">
-        <Button emphasis="high"><Text type="Button" width={false}>Start free</Text></Button>
-        <Button emphasis="medium"><Text type="Button" width={false}>Book a demo</Text></Button>
+      <ButtonGroup
+        direction={tabletUp ? "row" : "column"}
+        fullWidth={!tabletUp}
+        aria-label="Get started"
+      >
+        <Button emphasis="high"><Text type="Button" width>Start free</Text></Button>
+        <Button emphasis="medium"><Text type="Button" width>Book a demo</Text></Button>
       </ButtonGroup>
     </>
   }
@@ -84,6 +103,7 @@ dominant brand band; keep later sections calmer ([how-to-color.md](how-to-color.
 
 ## A2UI
 
-`A2uiHero` with a nested `A2uiImage` and a `contentSlot` of stacked `A2uiText`
-(no `Lockup` adapter) plus `A2uiButtonGroup`. Set the palette via the adapter's
-`data-color-switcher` ([a2ui.md](a2ui.md)).
+`A2uiHero` with a nested `A2uiImage` (`src` + `alt` only — omit `aspectRatio` and
+box size) and a `contentSlot` of stacked `A2uiText` (no `Lockup` adapter) plus
+`A2uiButtonGroup`. Set the palette via the adapter's `data-color-switcher`
+([a2ui.md](a2ui.md)).

package/skills/uxelle-design-harness/recipe-landing-page.md

@@ -41,8 +41,16 @@ clusters) — no page-level breakpoint logic. See
 
 ## Spacing
 
-`medium-12` between in-column sections; `large-13`+ block padding for full-bleed
-bands; `--uxl-breakpoints-gutter` inside grids ([spacing-steps.md](spacing-steps.md)).
+**Density: `spacious`** — generous whitespace is the argument on a public page, and
+one idea should land per band ([density.md](density.md)). **Section** gap between
+in-column sections is `large-14`; full-bleed bands take the **Band** step
+(`large-15`, or `large-16` for a deliberate full-viewport hero statement);
+`--uxl-breakpoints-gutter` stays the grid gap in every mode
+([spacing-steps.md](spacing-steps.md)).
+
+Hold one mode for the whole page. A dense piece inside it (a pricing comparison, an
+embedded table) keeps its own internals tight but still sits at the page's
+`large-14` **Section** gap — density describes the experience, not each component.
 
 ## A11y
 
@@ -56,9 +64,23 @@ One dominant brand band (usually the hero). Apply palettes per section with
 `data-color-switcher`, style with role tokens, keep the calmer sections on `default`
 / `default-subtle` ([how-to-color.md](how-to-color.md)).
 
+This page ships **two** full-bleed bands, so make the choice explicit rather than
+letting both default to `brand-1`: the hero takes the brand palette and the closing
+[cta-band](recipe-cta-band.md) drops to `default-subtle`. Flip it if the CTA is the
+louder moment. What you must not do is set both to a brand palette — that is the
+"stacked loud bands" this recipe's **when not** rules out, and it costs the hero its
+dominance.
+
 ## React
 
+`<main>` comes from [app-chrome](recipe-app-chrome.md) and is shown here only for
+context — this recipe owns what goes *inside* it
+([how-to-page-layout.md](how-to-page-layout.md#who-owns-the-content-column)). Note
+that a marketing page caps only its mid-page sections: the full-bleed bands are
+deliberately outside any column.
+
 ```tsx
+// Density: spacious (public marketing page) — see density.md
 <main id="main-content" tabIndex={-1} style={{ flexGrow: 1, minHeight: 0, overflow: "auto" }}>
   {/* Full-bleed hero — recipe-hero.md (contains the h1) */}
   <MarketingHero />
@@ -71,7 +93,7 @@ One dominant brand band (usually the hero). Apply palettes per section with
     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-large-14)"
   >
     <LogoWall />        {/* recipe-logo-wall.md */}
     <FeatureSections /> {/* recipe-feature-section.md (alternating) */}
@@ -80,7 +102,8 @@ One dominant brand band (usually the hero). Apply palettes per section with
     <Pricing />         {/* recipe-pricing.md */}
   </Layout>
 
-  {/* Full-bleed closing CTA — recipe-cta-band.md */}
+  {/* Full-bleed closing CTA — recipe-cta-band.md.
+      Hero above is the brand band, so this one runs default-subtle. */}
   <CtaBand />
 
   {/* Footer — recipe-footer.md (marketing: directory band + legal bar) */}

package/skills/uxelle-design-harness/recipe-logo-wall.md

@@ -29,9 +29,10 @@ fit — no JS, no breakpoint literals. Bound each mark's `width` so rows stay ev
 
 ## Spacing
 
-`gap="var(--uxl-theme-layout-spacing-medium-8)"` between marks; `small-4` under the
-eyebrow. As a band, add section breathing with `large-13`+ block padding
-([spacing-steps.md](spacing-steps.md)).
+**Group** step between marks and **Control** under the eyebrow — `medium-10` and
+`small-6` on the `spacious` marketing page where a trust bar lives (`medium-8` /
+`small-4` under `standard`). As a band, add breathing with the **Band** step
+(`large-15`) ([density.md](density.md), [spacing-steps.md](spacing-steps.md)).
 
 ## A11y
 
@@ -55,7 +56,7 @@ full-color marks on dark). Keep one dominant brand band per view
   display="flex"
   flexDirection="column"
   alignItems="center"
-  gap="var(--uxl-theme-layout-spacing-small-4)"
+  gap="var(--uxl-theme-layout-spacing-small-6)"
   aria-label="Trusted by leading teams"
 >
   <Text type="Overline" width={false}>Trusted by teams at</Text>
@@ -64,17 +65,18 @@ full-color marks on dark). Keep one dominant brand band per view
     flexWrap="wrap"
     justifyContent="center"
     alignItems="center"
-    gap="var(--uxl-theme-layout-spacing-medium-8)"
+    gap="var(--uxl-theme-layout-spacing-medium-10)"
   >
     <Logo name="generic" width={112} color="colorSwitcherIcon" aria-label="Northwind" />
     <Logo name="generic" width={112} color="colorSwitcherIcon" aria-label="Acme" />
-    {/* Logos not in the catalog use Image */}
-    <Image src="/logos/contoso.svg" alt="Contoso" />
+    {/* Logos not in the catalog use Image; bound height to match the row */}
+    <Image src="/logos/contoso.svg" alt="Contoso" height={40} />
   </Layout>
 </Layout>
 ```
 
 ## A2UI
 
-No `getUxelleRecipe("logo-wall")` — compose `A2uiLogo` / `A2uiImage` inside an
-`A2uiLayout` (single wrapping row, layout-spacing only) ([a2ui.md](a2ui.md)).
+No `getUxelleRecipe("logo-wall")` — compose `A2uiLogo` (`width`) / `A2uiImage`
+(`height` or `width` so marks stay even) inside an `A2uiLayout` (single wrapping
+row, layout-spacing only) ([a2ui.md](a2ui.md)).

package/skills/uxelle-design-harness/recipe-multi-step-flow.md

@@ -34,8 +34,10 @@ narrow. See [how-to-page-layout.md](how-to-page-layout.md#action-clusters).
 
 ## Spacing
 
-`medium-12` between the stepper, the step body, and the footer; the step form uses
-its own `medium-8` field stack ([spacing-steps.md](spacing-steps.md)).
+**Density: `standard`** — a flow asks for one decision at a time, so keep it calm
+even inside a `compact` app ([density.md](density.md)). **Section** gap between the
+stepper, the step body, and the footer (`medium-12`); the step form uses its own
+**Group** field stack (`medium-8`) ([spacing-steps.md](spacing-steps.md)).
 
 ## A11y
 
@@ -65,7 +67,7 @@ const isLast = step === steps.length;
   p="var(--uxl-breakpoints-margin)"
   gap="var(--uxl-theme-layout-spacing-medium-12)"
 >
-  <Text type="Display Extra Small" as="h1" width={false}>Create a workspace</Text>
+  <Text type="Display Small" as="h1" width={false}>Create a workspace</Text>
 
   <nav aria-label="Progress">
     <Stepper

package/skills/uxelle-design-harness/recipe-page-header.md

@@ -19,9 +19,16 @@ status, and the actions that operate on the whole page.
 ## When not
 
 - Not a `PageHeader` component — it is a `Layout` composition.
-- Page actions only (create, import, export, delete). Controls that filter a table
+- Page actions only (create, import, delete). Controls that filter a table
   belong to the [query-bar](recipe-query-bar.md); tabs that swap a table's rows
   belong on the `Table` ([data-table-page](recipe-data-table-page.md)).
+- **Export splits by scope.** Export of the *whole dataset* is a page action and
+  belongs here — label it for that scope ("Export all"). Export of the *rows
+  currently in view* (after filters and search) belongs on the
+  [query-bar](recipe-query-bar.md), labelled for the view ("Export view"). Never
+  put both on one page: pick the scope the user actually needs. A
+  [data-table-page](recipe-data-table-page.md) defaults to "Export view" — omit
+  export from this header when that query bar is present.
 - Do not wrap `Lockup` in a nested `Layout` to share the row — let it be the flex
   sibling that shrinks and put `flexShrink={0}` on the action cluster.
 
@@ -40,9 +47,12 @@ would claim the row and drop the actions).
 
 ## Spacing
 
-`small-4` gap between title and actions. Lockup internals are `micro-2`
-(component-owned). The header sits in the page column at the `medium-12` section gap
-([spacing-steps.md](spacing-steps.md)).
+**Control** step between title and actions. Lockup internals are component-owned
+(`micro-2`) and do not shift with the mode. The header sits in the page column at
+the **Section** gap ([spacing-steps.md](spacing-steps.md)).
+
+Inherits the host experience's mode — `micro-3` / `medium-9` under `compact`,
+`small-4` / `medium-12` under `standard` ([density.md](density.md)).
 
 ## A11y
 

package/skills/uxelle-design-harness/recipe-page-shell.md

@@ -19,7 +19,7 @@ host canvas → content column (`max-container-width`, `mh="auto"`, `p` = breakp
 
 ## Spacing
 
-React page column: [how-to-page-layout.md](how-to-page-layout.md). Section stacks: medium-8 or small-4. Intro lockup internals: micro-2. Form/dialog action groups: [how-to-page-layout.md](how-to-page-layout.md#action-clusters). A2UI: layout-spacing only (`p` large-13, `gap` medium-12).
+**Density: `standard`** unless the body is data-dense (then `compact`) or public marketing (then `spacious`) — [density.md](density.md). React page column: [how-to-page-layout.md](how-to-page-layout.md). **Section** gap between sections (`medium-12`); section stacks use **Group** (`medium-8`) or **Control** (`small-4`); intro lockup internals **Tight** (`micro-2`). Form/dialog action groups: [how-to-page-layout.md](how-to-page-layout.md#action-clusters). A2UI: layout-spacing only, `spacious` never applies (`p` **Band**-equivalent `large-13`, `gap` **Section** `medium-12`).
 
 ## A11y
 
@@ -43,7 +43,7 @@ React page column: [how-to-page-layout.md](how-to-page-layout.md). Section stack
   <Lockup
     topSlot={false}
     title={
-      <Text type="Display Extra Small" as="h1" width={false}>
+      <Text type="Display Small" as="h1" width={false}>
         Account settings
       </Text>
     }

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

@@ -33,8 +33,11 @@ comfortable tier. See [how-to-page-layout.md](how-to-page-layout.md#responsivene
 
 ## Spacing
 
-`--uxl-breakpoints-gutter` between tiers; feature rows are the `List` default;
-`large-13`+ block padding as a band ([spacing-steps.md](spacing-steps.md)).
+`--uxl-breakpoints-gutter` between tiers in every mode; feature rows keep the
+`List` default (component-owned, density-invariant); the **Band** step as a band —
+`large-15` on the `spacious` marketing page. A tier comparison is the one dense
+piece on an airy page: let its feature rows stay tight while the section still sits
+at the page's **Section** gap ([density.md](density.md), [spacing-steps.md](spacing-steps.md)).
 
 ## A11y