@sableui/react 0.9.1 → 0.11.0

package/AGENTS.md

@@ -37,7 +37,7 @@ These are short on purpose. Each links to a foundations doc with the full vocabu
    **The same goes for everything below a component. Resolve in this order, and stop at the first that fits:** (1) a **component** → (2) a Sable **utility or recipe** — relative surfaces (`sable-surface*`, `sable-well`, `sable-surface-interactive`), state variants (`sable-selected:`, `sable-highlighted:`…), geometry (`rounded-concentric-*`, `popup-inset`, `rounded-popup-item`, `popup-bleed`), scroll policies, `motion-*` recipes → (3) a **semantic token** → (4) hand-written CSS, last, and reported as a gap. `npx sable search "<what you need>"` searches all of these; `registry.json → utilities` lists the utilities with intent and what each replaces. Mixing ink into a surface by hand (`color-mix(… var(--foreground) …)`) is the tell that you skipped step 2 — that is what the relative-surface utilities compute, in every theme and mode.
 
    **Never restyle a component with override classes to get a look it lacks.** `className` on a Sable component is for layout (width, margin, flex and grid placement, position); its look — fill, edge, corner, ring, shadow, ink — comes from a variant. Use the one that exists, and if none fits, that is a library gap to report, not a `className`. The common cases: a control floating over content is `<Button variant="floating">`, one on a coloured band `variant="on-color"`; a quiet chip is `<Pill appearance="outline" size="sm">`; a status label is `<Badge appearance="plain" tone="…" dot>`; a destructive menu row is `<MenuItem variant="destructive">` (never `className="text-destructive"`); a list of `Entity` rows in a card is `<CardList>`, and a table that runs edge to edge in a card is `<CardContent flush>`, which insets the outer columns to the card's padding (never `pl-6`/`pr-6` on cells). `sable-lint` flags these (`component-restyle`, `destructive-item-ink`, `table-edge-padding`, `popup-separator-bleed`). A component that is *broken*, not just missing a look, is patched in place with `sable patch <Component> --reason … --repro …` while the fix ships: the record is re-checked on every upgrade (`sable docs patching-a-component`).
-1. **Semantic tokens only.** `bg-card`, `text-muted-foreground`, `border-border`, `bg-primary` — never a palette step, never inline hex/`oklch()`. Tone fills take their paired ink (`bg-tone-success` + `text-tone-success-foreground`). → `sable docs token-intent`
+1. **Semantic tokens only.** `bg-card`, `text-muted-foreground`, `border-border`, `bg-primary` — never a theme's own palette step (`--zinc-500`), never inline hex/`oklch()`. For decorative or categorical colour beyond the tones (tags, avatars, labels, illustration), use the generated palette: `neutral`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple` and `pink`, plus a scale under every tone (`bg-tone-1-100`). It is built from the active theme and follows the mode, so `bg-blue-100 text-blue-800` reads in light and dark with no `dark:`. On Badge, Pill and StatusDot the family is the tone (`<Badge tone="teal">Research</Badge>`), never a `className` recolour. Surfaces, text and actions still take roles. → `sable token palette` Tone fills take their paired ink (`bg-tone-success` + `text-tone-success-foreground`). → `sable docs token-intent`
 2. **Type is a closed vocabulary.** One paired utility per text node (`text-heading-2`, `text-body-md`, `text-label-lg`, `text-mono-md`); never compose `text-* font-* tracking-*` by hand. Pick by **role**, not size. One `heading-1` per route. Two colors: `foreground` and `muted-foreground` — never opacity on text. → `sable docs typography`
 3. **Space on the 4px scale, by role.** Inset, stack, inline; related things closer than unrelated things. No off-scale `p-[15px]`. Padding, gaps and insets stay on the scale (a step, or `--spacing(n)` inside an arbitrary value) so the density control moves them; fixed `rem`/`px` only for what must not scale, like a hairline. Single-column content in a card is a flex column, not a grid. → `sable docs spacing`
 4. **Controls read the ladder.** Heights come from `--control-*`, so `<Density>` can retune a region at once. Never `h-[40px]`. → `sable docs spacing`

package/CHANGELOG.md

@@ -1,5 +1,114 @@
 # What's new
 
+## 0.11.0
+
+- **New: `PropertyGroup`, a collapsible group inside a PanelSection.** The
+  row names the group, summarises its value while closed (a word, a few
+  swatches, or both), and opens with +/− to the rows beneath. It's sized for
+  a tool panel, where an Accordion is page furniture. Groups open
+  independently and stack with a hairline between them.
+- **sableui.com's Customize panel: the Color section is rebuilt on it.**
+  It now reads Brand color, then Primary action (with colour dots), then
+  three groups: Color palette (the families and Pull to brand), Tones (tones
+  and status) and Neutrals. Each group summarises itself with its own
+  swatches, and Tones and Neutrals are chosen from a list that previews what
+  each option would paint. The section has its own Reset.
+
+## 0.10.0
+
+A palette generated from the theme, numbered extra tones, and sample content that isn't a marketplace.
+
+- **New: a generated palette for every theme.** Nine families (`neutral`,
+  `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple`, `pink`), each
+  50–950, plus a scale under every tone (`tone-1`…`3`, `tone-info`,
+  `tone-warning`, `success`, `destructive`; step 500 is the tone). They come
+  as utilities (`bg-blue-100`, `text-tone-1-700`) and variables. Each family
+  keeps its hue and leans toward the brand (half the gap, at most 15°), and
+  neutral is the theme's own page mixed toward its ink. It's all CSS computed
+  from the theme's tokens, so presets, customizer looks and an app's own
+  `--primary` carry into it. Steps follow the mode: `bg-blue-100
+  text-blue-800` reads in light and dark. `--theme-palette-harmony` (new
+  `PALETTE_TOKENS`, accepted in presets) sets how far the families lean, and
+  `PALETTE_COLORS`, `PALETTE_SCALES` and `PALETTE_STEPS` export the names.
+  See DESIGN.md → Generated palette.
+- **New: Badge, Pill and StatusDot take a palette family as `tone`.** For
+  a category with no meaning attached (a tag, a label, a project colour):
+  `<Badge tone="teal">Research</Badge>` or `<Pill tone="blue" selected>`.
+  Badge draws a family in every appearance. A Pill rests on the family's
+  wash and turns solid when selected. They paint from new `palette-*` slots
+  that `data-palette="<family>"` fills (`PALETTE_SLOT_TOKENS`), so no
+  component names a step, and an app can use the same hook. The
+  `sable token palette` command and `llms/reference/token-intent.md`
+  document the palette for agents.
+- **sableui.com's Customize panel has a Harmony control:** how far the
+  generated families lean toward the brand, from 0% to 200%. It's exported
+  as `--theme-palette-harmony`.
+- **Breaking: Tailwind's other colour families are switched off**, and
+  `neutral`, `red` and the rest now paint the theme's palette, not
+  Tailwind's. `slate`, `gray`, `zinc`, `stone`, `amber`, `lime`, `emerald`,
+  `cyan`, `sky`, `indigo`, `violet`, `fuchsia` and `rose` generate nothing.
+  `sable-lint`'s `palette-ref` now allows the generated palette in apps and
+  still flags theme-internal ramps and the switched-off families. Components
+  still use roles only.
+
+- **Breaking: `edition`, `collectible` and `standard` are now tones `1`,
+  `2` and `3`.** They were named for one product. They are the three extra
+  colours a theme defines beyond its status colours, and the product decides
+  what each means. Rename tokens `--tone-edition` → `--tone-1`,
+  `--tone-collectible` → `--tone-2` and `--tone-standard` → `--tone-3`, with
+  their `-foreground` and `-dark` partners and utilities (`bg-tone-1`,
+  `text-tone-1-foreground`). Rename the `tone` prop values the same way
+  (`tone="edition"` → `tone="1"`) on Badge, Banner, StatusDot, Meter,
+  SegmentedBar, CheckboxCard, RadioCard, GradientArt's `tones` and the chart
+  series. Tone 1 is the lead: the strongest of the three, and the first in a
+  chart's default cycle. Saved presets that use the old names are read under
+  the new ones, so they keep working.
+- **Blocks, patterns and examples use generic content.** The demo data was
+  written for an art marketplace (editions, collectors, mints, SOL prices).
+  It is now an ordinary SaaS workspace and store. Only copy changed.
+- **sableui.com's Color page follows the customizer.** Its tone swatches
+  re-declared the preset on themselves, so a customized brand never reached
+  them.
+
+Vertical rhythm: spacing is measured from the type.
+
+- **The baseline comes from the type.** `--baseline` is one line of body
+  text (size × leading) and `--baseline-step` divides it into thirds, 8px at
+  the default 15/24. Line heights round to the step (they rounded to 0.25rem),
+  and `--spacing` is half a step, which at Sable's defaults is exactly the
+  0.25rem it was, so the default theme does not move. `--rhythm-unit` is one
+  step and `--grid-gutter` is 2 or 3 steps, snapped. It is a rhythm, not a
+  lock: nothing pins text to lines. See DESIGN.md → Vertical rhythm.
+- **A theme picks how open its text is and how finely a line divides:**
+  `--theme-leading-scale` and `--theme-baseline-split` (new `RHYTHM_TOKENS`,
+  accepted in presets). **Breaking (visual):** Prism and Poppy set
+  `--spacing` by hand; they now set a leading scale instead, so their gaps
+  follow their type. Prism's body is 16/21 on a 7px step, Poppy's 15/27 on
+  9px. A preset that sets `--spacing` still works, but its gaps no longer
+  follow its type.
+- **Card's edge and row rules take no space.** The edge is an inset outline
+  and CardList / CardFooter rules are inset shadows, so the padding is whole
+  steps. A Card `className` that set `border-*` colours should set
+  `outline-*` instead (the pricing table's featured tier does).
+- **Section and page headers:** the title-to-description gap is one step
+  (`gap-2`, was `gap-1`).
+- **Lists:** `sable-list` items are one step apart (were 6px), `sable-list-dl`
+  rows two steps (were 12px).
+- **DisclosurePickerOption takes `onRemove`** (and `removeLabel`), for
+  options the person added: a trash glyph at the row's end on hover or focus,
+  and Delete or Backspace on the focused row. Removing never picks.
+- **sableui.com:** an imported preset can be removed from the Customize
+  panel's preset list. A page whose code fails to load (a tab opened before a
+  deploy) reloads onto the new deploy instead of going blank, and any page
+  that still fails says so with a Reload button.
+- **sableui.com:** pages load into a Skeleton of their own layout (the
+  header, the first section, the canvas grid, the homepage hero) instead of a
+  centred spinner, so the content lands where the placeholder stood.
+- **sableui.com:** Customize's Character pad moves the leading (Compact ↔
+  Airy) and every gap follows; Advanced shows the line and step and its step
+  anchor sets the step directly. Grid & layout shows the line and step live,
+  and no longer claims the grid folds 12 → 6 → 4 → 2 → 1 by itself.
+
 ## 0.9.1
 
 Fixes from a review of 0.9.0.

package/CONTRIBUTING.md

@@ -8,7 +8,7 @@ The checks are the specification. Every rule below names the gate that enforces
 
 > **These are enforced, not honor-system.** `pnpm design-lint` (`scripts/design-lint.mjs`, also a CI gate) fails the build on the drift below. A genuine rare exception needs an *auditable* comment that **requires** a reason: `// design-lint-disable-next-line <ruleId> -- <why>` (also `-line`, and block `disable`/`enable`). A disable with no reason is itself an error. Full table: `DESIGN.md → Enforcement`.
 
-1. **Components reference semantic tokens only.** Use `bg-card`, `text-muted-foreground`, `bg-tone-edition`, `text-primary`, etc. — never raw palette steps (`--purple-heart-700`) and never inline `oklch()`/hex. For text/icons on a tone fill use the theme-adaptive `text-tone-*-foreground` ink (no `dark:` variant); for scrims, media letterbox, and pills on imagery use `bg-overlay`/`text-overlay-foreground`. Palette names are theme-internal; a component that names a palette breaks themeability — and `design-lint`'s `palette-ref` rule now has **zero** sanctioned exceptions.
+1. **Components reference semantic tokens only.** Use `bg-card`, `text-muted-foreground`, `bg-tone-1`, `text-primary`, etc. — never raw palette steps (`--purple-heart-700`) and never inline `oklch()`/hex. For text/icons on a tone fill use the theme-adaptive `text-tone-*-foreground` ink (no `dark:` variant); for scrims, media letterbox, and pills on imagery use `bg-overlay`/`text-overlay-foreground`. Palette names are theme-internal; a component that names a palette breaks themeability — and `design-lint`'s `palette-ref` rule now has **zero** sanctioned exceptions.
 2. **Paired typography utilities, never decomposed.** Use `text-heading-1`, `text-body-md`, `text-label-lg`, … Each bundles size + weight + line-height + tracking. Do **not** combine `text-{size}` + `font-{weight}` + `tracking-{x}` by hand. (Icons are the exception — size them with `text-{size}` scales, never type utilities.)
 3. **Base UI is behavior; `components/` is the public API.** Each component wraps `@base-ui/react` directly inside its own folder (use the **`render` prop** for composition; read state from `data-[state=…]` attributes) and owns 100% of the styling. There is no separate primitives tier. Consumers import only from the package root barrel.
 4. **Semantic icons in components.** Use `<Icon name="…">`. Concrete icon-package imports belong only in `src/icon-sets/`, which nothing in the core graph imports. Apps supply the set through `<IconProvider>` (Reicon from `@sableui/react/icons/reicon`, or their own).
@@ -121,7 +121,7 @@ A theme is a CSS file that defines every token in `themes/_contract.ts` for `:ro
 
 **Themes are presets, not the unit of customization.** Every token a theme sets can also be set by an app (or by the docs customizer) on `:root` after the theme loads. A theme is the starting point a consumer picks; the customizer exports the deltas on top of it. Keep that working: a theme must not set a token with `!important` or under a selector more specific than `[data-sable-theme="<id>"]`, or a consumer override cannot win.
 
-`_contract.ts` exports five token groups: `SEMANTIC_TOKENS` (colors — **light + dark**, e.g. `--background`, `--primary`, `--tone-edition`), `MOTION_TOKENS` (duration/easing ladder), `RADIUS_TOKENS` (the 7 `--theme-radius-*` steps bridged to Tailwind's `radius-*` scale), `TYPE_SCALE_TOKENS` (display/heading/title size, weight, leading, and tracking vars consumed by the paired `text-*` typography utilities in styles.css), and `TYPE_OVERLINE_TOKENS` (the small, uppercase, letter-spaced eyebrow/overline/kicker tier — size/weight/leading/tracking/transform — consumed by the `text-overline` utility). `MOTION_TOKENS`, `RADIUS_TOKENS`, `TYPE_SCALE_TOKENS`, and `TYPE_OVERLINE_TOKENS` are **mode-independent** — declared once per theme (not duplicated under `.dark`), unlike `SEMANTIC_TOKENS`.
+`_contract.ts` exports five token groups: `SEMANTIC_TOKENS` (colors — **light + dark**, e.g. `--background`, `--primary`, `--tone-1`), `MOTION_TOKENS` (duration/easing ladder), `RADIUS_TOKENS` (the 7 `--theme-radius-*` steps bridged to Tailwind's `radius-*` scale), `TYPE_SCALE_TOKENS` (display/heading/title size, weight, leading, and tracking vars consumed by the paired `text-*` typography utilities in styles.css), and `TYPE_OVERLINE_TOKENS` (the small, uppercase, letter-spaced eyebrow/overline/kicker tier — size/weight/leading/tracking/transform — consumed by the `text-overline` utility). `MOTION_TOKENS`, `RADIUS_TOKENS`, `TYPE_SCALE_TOKENS`, and `TYPE_OVERLINE_TOKENS` are **mode-independent** — declared once per theme (not duplicated under `.dark`), unlike `SEMANTIC_TOKENS`.
 
 `TYPE_REFINEMENT_TOKENS` additionally exposes optional typography hooks for body,
 label, caption, mono, title sizes, and the largest display size. Retrieve

package/DESIGN.md

@@ -54,7 +54,7 @@ Three layers, outermost is what components use:
 | Layer | Example | Who uses it |
 |---|---|---|
 | **Palette** (theme-internal) | `--purple-heart-700`, `--zinc-950` | Only the theme CSS. Never components. |
-| **Semantic** (the contract) | `--primary`, `--card`, `--muted-foreground`, `--tone-edition`, `--ring` | **Components** (via `bg-*`/`text-*` utilities). |
+| **Semantic** (the contract) | `--primary`, `--card`, `--muted-foreground`, `--tone-1`, `--ring` | **Components** (via `bg-*`/`text-*` utilities). |
 | **Component** (local) | a cva variant string | Inside one component. |
 
 `themes/_contract.ts` enumerates the semantic tokens every theme must define. The default (Sable) palette is authored in **OKLCH** for perceptually-uniform ramps, locked hue, gamut-safe chroma, and dark-mode vibrancy.
@@ -62,9 +62,9 @@ Three layers, outermost is what components use:
 ### Semantic tokens (the contract)
 
 Surfaces & text: `background`, `foreground`, `card`, `card-foreground`, `popover`, `popover-foreground`, `muted`, `muted-foreground`, `border`, `input`, `ring`.
-Actions: `primary`, `primary-foreground`, `secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `destructive`, `destructive-foreground`, `success`, `success-foreground`. (`success` is the positive-state counterpart to `destructive` — a **flat** semantic token backed by caribbean-green; it is deliberately separate from the `tone-standard` post-type, and there is no `tone-success`.)
-Tones (semantic, carry meaning): `tone-standard`, `tone-collectible`, `tone-edition`, `tone-info`, `tone-warning`, `highlight`.
-Tone ink (legible text/icon on a tone fill, theme-adaptive): `tone-standard-foreground`, `tone-collectible-foreground`, `tone-edition-foreground`, `tone-info-foreground`, `tone-warning-foreground`, `highlight-foreground`.
+Actions: `primary`, `primary-foreground`, `secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `destructive`, `destructive-foreground`, `success`, `success-foreground`. (`success` is the positive-state counterpart to `destructive` — a **flat** semantic token backed by caribbean-green; it is deliberately separate from the numbered tones, and there is no `tone-success`.)
+Tones (semantic, carry meaning): `tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `highlight`.
+Tone ink (legible text/icon on a tone fill, theme-adaptive): `tone-1-foreground`, `tone-2-foreground`, `tone-3-foreground`, `tone-info-foreground`, `tone-warning-foreground`, `highlight-foreground`.
 Overlay (fixed dark surface over content — scrims, media letterbox, pills on imagery): `overlay`, `overlay-foreground`.
 Sidebar set: `sidebar`, `sidebar-foreground`, `sidebar-primary(-foreground)`, `sidebar-accent(-foreground)`, `sidebar-border`, `sidebar-ring`.
 
@@ -72,12 +72,25 @@ Sidebar set: `sidebar`, `sidebar-foreground`, `sidebar-primary(-foreground)`, `s
 
 ### Tone system
 
-Tones encode meaning, not decoration. Choose item categories for your product:
-- `tone-standard` — the default item category.
-- `tone-collectible` — a distinct item or collection category.
-- `tone-edition` — a limited edition or premium category.
+Tones encode meaning, not decoration. Beyond the status colours, a theme defines three extra colours, numbered so the product, not the library, decides what each means (plans, categories, series):
+- `tone-1` — the lead extra colour: the most prominent category, and chart series 1.
+- `tone-2` — a second, visually distinct category.
+- `tone-3` — a third category, usually the quietest: the baseline that means "nothing special".
 Plus `tone-info`, `tone-warning`, and `highlight` (selection). Dark mode uses dedicated, higher-chroma values so tones stay vivid on a near-black canvas. Text/icons ON a tone fill use the matching `tone-*-foreground` ink — a theme-adaptive intent token that flips lightness with the fill (light ink over the dark 600/700 fills in light mode; dark ink over the lighter dark-tuned fills in dark mode). A component never names a palette step for this; there is no longer a "media-overlay palette exception."
 
+### Generated palette
+
+Roles are the contract, and roles are not enough for a product: tags, avatars, labels and illustration need more colours than three tones. Raw Tailwind steps ignored the theme, so they were banned outright. Sable now generates a palette from whatever theme is painting (`src/lib/palette.ts`, written to `palette.css`):
+
+- **Nine families:** `neutral`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple` and `pink`, each 50–950, as Tailwind utilities (`bg-blue-100`, `text-pink-700`) and variables (`--teal-500`). Tailwind's other families are switched off.
+- **The lean.** A family keeps its own hue and leans toward the brand by half the gap, at most 15°, and only as far as the brand has colour (an ink-black primary pulls nothing). It's Material 3's harmonize, and the same lean the customizer gives status colours. `--theme-palette-harmony` scales it: 0 keeps the families' own hues, 2 doubles the pull.
+- **Neutral** is the theme's own `--background` mixed toward its `--foreground`, so it carries the surfaces' tint.
+- **Tone scales.** Every tone (tone-1…3, info, warning, success, destructive) gets a scale anchored on itself: step 500 is the tone, so `bg-tone-1-100` is its wash.
+- **Steps follow the mode.** A low step is always near the page and a high step always far from it, so a pair like `bg-blue-100 text-blue-800` reads in both modes with no `dark:`.
+- **Held, not hoped.** It's all relative-colour CSS computed where it is declared, so a preset, a customizer look or an app's `--primary` carries into it with no regeneration. Chroma is fitted under sRGB across the whole lean (piecewise, a knot every 5°), and `palette.test.ts` evaluates the shipped CSS for every built-in theme and mode: in gamut, steadily away from the page, `700` readable on the page, `800` readable on its own `100`, and neighbouring families apart.
+
+Components never name a step. They paint roles, which is what lets a theme restyle them. Where a component takes a family (Badge, Pill and StatusDot accept `tone="blue"`, a category with no meaning attached), it sets `data-palette` to the family and paints from the slots that fills: `palette-wash` (100), `palette-wash-strong` (200), `palette-edge` (300), `palette-dot` (500), `palette-solid` (700), `palette-text` (800) and `palette-solid-ink` (50). The classes are the same for every family, and each ink-on-fill pair is held to 4.5:1. An app can use `data-palette` the same way.
+
 **Status-tone vocabulary.** Every status-signaling component (StatusDot, Badge with `dot`, Note, Banner, InlineStatus, EmptyState) takes one canonical severity set on its `tone` prop: **`neutral` · `info` · `success` · `warning` · `destructive`** — exported as `STATUS_TONES` / `StatusTone`, with one icon per tone in `STATUS_TONE_ICON`. There is no `error` alias anywhere: use `destructive`. A state label (live, failed, draft) is `<Badge appearance="plain" tone="…" dot>`; map domain states (`ready`, `building`, `failed`, …) to tones once in the app. Consumers can therefore feed one app-level tone straight into any of these components without a translation shim; new status-flavored components must accept the canonical five (`tone-vocabulary.test.ts` holds this).
 
 ## Registers
@@ -309,7 +322,7 @@ Default theme families: **Figtree** (sans) + **DM Mono** (mono). Two weights per
 
 ## Spacing
 
-One scale, built on a **4px base** with an **8px rhythm**. Every margin, padding, and gap is a step on it — never a hand-picked px value — so vertical and horizontal rhythm stay locked together system-wide. Spacing, not borders, is the primary tool for grouping: **related things sit closer than unrelated things** (proximity does the work a divider line otherwise would).
+One scale, built on the **baseline**: one line of body text, split into steps (see *Vertical rhythm* below — 8px at the default 15/24 body, with Tailwind's spacing step half of it). Every margin, padding, and gap is a step on it — never a hand-picked px value — so vertical and horizontal rhythm stay locked together system-wide. Spacing, not borders, is the primary tool for grouping: **related things sit closer than unrelated things** (proximity does the work a divider line otherwise would).
 
 **The scale** (Tailwind's spacing utilities; the steps Sable actually leans on):
 `0` · `0.5` 2 (hairline / optical nudge) · `1` 4 · `1.5` 6 · `2` 8 (**the base rhythm unit**) · `3` 12 · `4` 16 (default control padding / gap) · `5` 20 · `6` 24 (group separation) · `8` 32 · `10` 40 · `12` 48 (sub-sections) · `16` 64 · `24` 96 (major sections). Steps below `2` are for optical correction only.
@@ -319,7 +332,8 @@ One scale, built on a **4px base** with an **8px rhythm**. Every margin, padding
 - **Stack** — vertical gap *between* blocks, the dominant rhythm: tight within a group (`gap-1.5`–`gap-2`), looser between groups (`gap-4`–`gap-6`), generous between sections (`gap-12`+).
 - **Inline** — horizontal gap between siblings (icon↔label, label↔control): `gap-2`–`gap-3`.
 - **Density** — a compact surface drops one step (inset `p-3`, stack `gap-1.5`); a spacious one adds one. Move in whole steps, never a custom px.
-- **On the scale, so density follows.** The docs' density ("Character") control and a consumer's override retune `--spacing`; every step and every `--spacing(n)` moves with it. A component's padding, gap or inset written as a literal (`p-[1.5rem]`, `padding: "12px"`) is the one measure that stays put. Even derived geometry sits on the scale: `popup-inset` floors at `--spacing(1)`, `sable-frame` pads `--spacing(4)`, Card's `--card-p` is `--spacing(6)` / `--spacing(4)`. Fixed units are for what must not scale (a 1px hairline, a ring width). *(CI-enforced in the package: `fixed-spacing`.)* Layout primitives follow too: `--rhythm-unit` is two spacing steps, so a `Stack`/`Row`/`Grid`/`Page` gap number moves with density like everything else.
+- **On the scale, so density follows.** `--spacing` derives from the baseline step, and the docs' density ("Character") control moves the leading the step comes from; every step and every `--spacing(n)` moves with it. A component's padding, gap or inset written as a literal (`p-[1.5rem]`, `padding: "12px"`) is the one measure that stays put. Even derived geometry sits on the scale: `popup-inset` floors at `--spacing(1)`, `sable-frame` pads `--spacing(4)`, Card's `--card-p` is `--spacing(6)` / `--spacing(4)`. Fixed units are for what must not scale (a 1px hairline, a ring width). *(CI-enforced in the package: `fixed-spacing`.)* Layout primitives follow too: `--rhythm-unit` is one baseline step (two spacing steps), so a `Stack`/`Row`/`Grid`/`Page` gap number moves with density like everything else.
+- **Vertical space in even steps, by habit.** With thirds, an even Tailwind step (`2`, `4`, `6`, `8`, `12`) is whole baseline steps; an odd one (`3`, `5`) is a half step. Inside a control it does not matter; between blocks prefer even steps.
 
 **Don't** invent off-scale values (`p-[15px]`), simulate a `gap` with per-child margins, or hang layout spacing on a text node (put it on the container).
 
@@ -342,7 +356,9 @@ The same 4px scale governs **sizes**, so controls, icons, and avatars all land o
 
 ## Grid & layout (fluid-first, no global max-width)
 
-Sable's layout foundation is deliberately fluid: **edge-to-edge, with a fluid page inset** rather than a centered fixed-width column. It keeps the surviving grid discipline — register every element to a column edge and an 8px (two spacing steps) vertical rhythm, cap the reading measure — while letting the canvas breathe across viewports and native shells.
+Sable's layout foundation is deliberately fluid: **edge-to-edge, with a fluid page inset** rather than a centered fixed-width column. It keeps the surviving grid discipline — register every element to a column edge and to the baseline rhythm, cap the reading measure — while letting the canvas breathe across viewports and native shells.
+
+**Flex or grid.** One direction is flex — `Stack` (column) and `Row` (row). Content that must line up across rows *and* columns is `Grid`/`Columns`. Width is a `Region`. A card's single column stacks with `Stack`, not a one-track grid (a grid track sizes to its widest min-content child). Grids are a tool for structure, not a requirement: a route with one reading measure needs no columns, and says so in its brief.
 
 **The doctrine — two roles, never conflated:**
 1. **A page's width is a `Region`** — a centered, opt-in, purpose-named cap. Pick by ROLE, not size.
@@ -351,9 +367,9 @@ Sable's layout foundation is deliberately fluid: **edge-to-edge, with a fluid pa
 4. **Measure ≠ width.** Cap text line-length (`prose`, in `ch`) independently of a region's layout width — a 1280px dashboard can still hold a 65ch reading column.
 
 **Layout tokens:**
-- `--rhythm-unit: 8px` — the relaxed baseline; every vertical measure is a multiple.
-- `--grid-columns: 12` — the proportioning resource; folds 12 → 6 → 4 → 2 → 1.
-- `--grid-gutter: clamp(1rem, …, 1.5rem)` — column gap, fluid 16 → 24px.
+- `--rhythm-unit` — one baseline step (8px at the default type); every vertical measure is a multiple. Derived, never set: see *Vertical rhythm*.
+- `--grid-columns: 12` — the proportioning resource. It does not fold on its own: pass a breakpoint map where the layout should change (`cols={{ base: 1, md: 6, lg: 12 }}`, `span={{ base: 12, lg: 8 }}`).
+- `--grid-gutter` — column and row gap: 2 baseline steps on phones, 3 on desktop, snapped to the step.
 - `--page-inset: clamp(16px, 4vw, 32px)` — fluid page margin; honors `env(safe-area-inset-*)`.
 
 **Content-width scale** — opt-in per `Region` (`max="…"`), named by purpose (**not** page-global):
@@ -375,6 +391,29 @@ Sable's layout foundation is deliberately fluid: **edge-to-edge, with a fluid pa
 
 Breakpoints are content-driven: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536. Keep reading + focus order logical; survive 400% zoom.
 
+## Vertical rhythm
+
+The page is set in **lines**, the way print is. The unit is one line of body text — body size × leading, `--baseline` — divided into equal **steps**, `--baseline-step`, that vertical space is measured in. It is derived, never set: a design with larger type has a larger line, and its gaps grow with it.
+
+```
+--baseline-step = round(body size × body leading × --leading-scale ÷ --baseline-split, 1px)
+--baseline      = --baseline-step × --baseline-split
+--spacing       = --baseline-step ÷ 2        (so p-4 is two steps)
+line-height     = round(tier ratio × 1em, --baseline-step)
+```
+
+At Sable's defaults (15px body on 1.55) that is a 24px line in 8px thirds, and `--spacing` comes out at exactly Tailwind's 0.25rem — nothing moved until the type does. On the docs' 14px root it is 21px in 7px steps.
+
+**What a theme chooses.** `--theme-baseline-split` — steps per line, thirds by default; halves read calmer and more editorial, and finer than thirds stops giving structure unless every value is chosen by eye. `--theme-leading-scale` — how open the reading text is set; Prism sets 0.86 (a 7px step), Poppy 1.1 (a 9px step). Density *is* leading: the customizer's Compact ↔ Airy moves `--leading-scale`, the line grows, and every gap, gutter and control gap follows. Setting `--spacing` by hand pulls the gaps off the lines.
+
+**A rhythm, not a lock.** The baseline is where spacing *comes from*, not a grid every letter is forced onto. Line heights are whole steps and the spacing scale is in steps, so a page built from Sable's tiers and gaps falls into a steady rhythm on its own. It is not enforced past that: content-sized things (a card with a 40px button, a code block, a demo stage) are as tall as they are, and pinning every baseline to a line on a responsive page breaks layouts rather than calming them.
+
+**Habits that keep the rhythm:**
+- Vertical space between blocks in even Tailwind steps (`gap-2`, `gap-4`, `py-6`, `mt-12`) or `Stack`/`Row`/`Grid` gap numbers. An odd step is half a baseline step — fine inside a control, a small drift between blocks.
+- Title to description one step; between groups one to two lines; between sections three or more.
+- A container's edge takes no space where it can: Card's edge is an inset outline and its row rules are inset shadows, so its padding stays whole steps.
+- One type size per line of text: a span of another tier inside a paragraph makes the line taller than its line height.
+
 ## Shape & borders
 
 **Radii.** Tight radii, pill actions, soft-square containers. `none` (media) · `xs` 4 · `sm` 8 (inputs) · `md` 12 (popovers/toasts) · `lg` 16 (cards/dialogs/sheets) · `xl` 20 (hero) · `full` (buttons, avatars, pills). Never mix radii within one component; actions are always `full` by default. Radius reads as **tone**: tighter corners feel precise/technical, fuller corners feel soft/friendly — Sable stays tight on containers and full on actions, so the contrast itself signals "this is a control." `Button`'s corner radius is theme-driven through a dedicated `--button-radius` var (falls back to full pill; see `button.variants.ts`) — a reference with a rectilinear shape language can flatten buttons without touching every other `rounded-full` use (avatars, pills, badges, dots) that should stay round.
@@ -471,7 +510,7 @@ The rules above are not honor-system. **`design-lint`** (`scripts/design-lint.mj
 | Rule id | Catches |
 |---|---|
 | `inline-color` | inline `oklch()` / hex literals |
-| `palette-ref` | raw palette-step refs (`--zinc-950`, `text-(--purple-heart-700)`) — **zero sanctioned exceptions** since the tone-foreground + overlay tokens landed |
+| `palette-ref` | palette-step refs. In a component, any of them (`--zinc-950`, `bg-blue-500`, `bg-tone-1-100`) — **zero sanctioned exceptions** since the tone-foreground + overlay tokens landed. In an app, only the ones that do not follow the theme: a theme's internal ramps and the Tailwind families Sable switches off (`bg-lime-500`) |
 | `raw-black-white` | `bg-black` / `text-white` etc. (use `overlay` / `overlay-foreground` or a semantic token) |
 | `transition-colors` | bare `transition-colors` (use the `motion-interactive` recipe) |
 | `transition-all` | `transition-all` / `transition: all` — it animates every property, including ones you never meant to move, and blocks the browser from optimizing. Name the properties, or use the recipe |
@@ -526,7 +565,7 @@ Not every removal is a regression; check for an **equivalent replacement** befor
 - Inline `oklch()`/hex or raw palette steps in components. *(CI-enforced: `inline-color`, `palette-ref`.)*
 - Decomposing paired typography utilities. *(CI-enforced: `decomposed-type`.)*
 - Pure `#000`/`#fff` (use `zinc-950`/`zinc-50`, or `overlay`/`overlay-foreground` for scrims). *(CI-enforced: `raw-black-white`.)*
-- In the Sable theme, purple/brand for primary CTAs (brand = editions + selection only). A different theme chooses its action palette through the semantic pair.
+- In the Sable theme, purple/brand for primary CTAs (brand = tone-1 + selection only). A different theme chooses its action palette through the semantic pair.
 - Gradient text, side-stripe borders, nested cards, mixed radii.
 - Concrete icon-package imports scattered through components. Reicon is an opt-in set behind the shared adapter; the app's IconProvider supplies it or a replacement.
 - A global page max-width (use opt-in region caps).

package/README.md

@@ -27,6 +27,18 @@ in Sable.
 
 A broad product component catalog, a fluid layout foundation, and a pluggable icon adapter — see [`registry.json`](./registry.json).
 
+## Colour
+
+Components paint roles (`bg-card`, `bg-primary`, `text-muted-foreground`), so a
+theme restyles everything at once. For colour beyond the roles, every theme also
+generates a palette: `neutral`, `red`, `orange`, `yellow`, `green`, `teal`,
+`blue`, `purple` and `pink` (50–950), plus a scale under every tone. The
+families lean toward the theme's brand, neutral is the theme's own page-to-ink
+ramp, and steps follow the mode, so `bg-blue-100 text-blue-800` reads in light and
+dark. Use it for tags, avatars, labels and illustration; Badge, Pill and StatusDot
+take a family as their tone (`<Badge tone="teal">`). Tailwind's other colour
+families are switched off. See DESIGN.md → Generated palette.
+
 ## Taste, style, and variety
 
 A project can keep its own visual atlas at `.sable/atlas/atlas.json`: annotated

package/dist/{_contract-C2M1SjBf.d.ts → _contract-CkqXDVww.d.ts}

@@ -7,7 +7,7 @@
  * To author a new theme: copy `themes/sable/`, keep these token names, and
  * supply your own palette + values. See CONTRIBUTING.md → "Theme contract".
  */
-declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "muted", "muted-foreground", "border", "border-strong", "input", "control-border", "ring", "primary", "primary-foreground", "secondary", "secondary-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "success", "success-foreground", "tone-standard", "tone-collectible", "tone-edition", "tone-info", "tone-warning", "highlight", "tone-standard-foreground", "tone-collectible-foreground", "tone-edition-foreground", "tone-info-foreground", "tone-warning-foreground", "highlight-foreground", "destructive-text", "success-text", "tone-warning-text", "tone-info-text", "overlay", "overlay-foreground", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
+declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "muted", "muted-foreground", "border", "border-strong", "input", "control-border", "ring", "primary", "primary-foreground", "secondary", "secondary-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "success", "success-foreground", "tone-3", "tone-2", "tone-1", "tone-info", "tone-warning", "highlight", "tone-3-foreground", "tone-2-foreground", "tone-1-foreground", "tone-info-foreground", "tone-warning-foreground", "highlight-foreground", "destructive-text", "success-text", "tone-warning-text", "tone-info-text", "overlay", "overlay-foreground", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
 type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
 /**
  * Motion tokens (mode-independent). A theme MAY override these to retune its
@@ -59,6 +59,20 @@ type TypeRefinementToken = (typeof TYPE_REFINEMENT_TOKENS)[number];
  */
 declare const TYPE_OVERLINE_TOKENS: readonly ["type-overline-size", "type-overline-weight", "type-overline-leading", "type-overline-tracking", "type-overline-transform"];
 type TypeOverlineToken = (typeof TYPE_OVERLINE_TOKENS)[number];
+/**
+ * Vertical rhythm hooks (mode-independent). The baseline itself is DERIVED in
+ * styles.css from the body text (size × leading), never set: a theme shapes it
+ * by how open it sets its reading text and how finely it divides a line.
+ *
+ * - `theme-leading-scale` — a multiple of the reading tiers' leading. Below 1
+ *   is a denser theme, above 1 an airier one; the step and every gap follow.
+ * - `theme-baseline-split` — steps per line. 3 (thirds) by default; 2 reads
+ *   calmer and more editorial.
+ *
+ * See DESIGN.md → Vertical rhythm.
+ */
+declare const RHYTHM_TOKENS: readonly ["theme-leading-scale", "theme-baseline-split"];
+type RhythmToken = (typeof RHYTHM_TOKENS)[number];
 /**
  * Density tokens (mode-independent) — the control ladder every sized component
  * renders from.
@@ -124,6 +138,15 @@ type WorkspaceSurfaceToken = (typeof WORKSPACE_SURFACE_TOKENS)[number];
  * …)`) where the art direction allows, so a brand change carries into the art.
  */
 declare const ART_TOKENS: readonly ["art-1", "art-2", "art-3", "art-4", "art-5", "art-6", "art-ground", "art-warp", "art-softness", "art-grain"];
+/**
+ * The generated palette's one hook (src/lib/palette.ts). A theme sets it as
+ * `--theme-palette-harmony`; it is optional, and derived like the art tokens.
+ *
+ * - `palette-harmony` is how far the colour families lean toward the brand:
+ *   0 keeps their own hues, 1 (the default) is half the gap capped at 15°, and
+ *   2 doubles it, for a theme that wants every colour to read as its own.
+ */
+declare const PALETTE_TOKENS: readonly ["palette-harmony"];
 /**
  * UI type tiers (mode-independent) — the chrome typography register.
  *
@@ -170,4 +193,4 @@ interface ThemeManifest {
     };
 }
 
-export { ART_TOKENS as A, DENSITY_TOKENS as D, MOTION_TOKENS as M, RADIUS_TOKENS as R, SEMANTIC_TOKENS as S, type ThemeManifest as T, WORKSPACE_SURFACE_TOKENS as W, type ThemeMode as a, type DensityToken as b, type MotionToken as c, type RadiusToken as d, type SemanticToken as e, TYPE_OVERLINE_TOKENS as f, TYPE_REFINEMENT_TOKENS as g, TYPE_SCALE_TOKENS as h, TYPE_UI_TOKENS as i, type TypeOverlineToken as j, type TypeRefinementToken as k, type TypeScaleToken as l, type TypeUiToken as m, type WorkspaceSurfaceToken as n };
+export { ART_TOKENS as A, DENSITY_TOKENS as D, MOTION_TOKENS as M, PALETTE_TOKENS as P, RADIUS_TOKENS as R, SEMANTIC_TOKENS as S, type ThemeManifest as T, WORKSPACE_SURFACE_TOKENS as W, type ThemeMode as a, type DensityToken as b, type MotionToken as c, RHYTHM_TOKENS as d, type RadiusToken as e, type RhythmToken as f, type SemanticToken as g, TYPE_OVERLINE_TOKENS as h, TYPE_REFINEMENT_TOKENS as i, TYPE_SCALE_TOKENS as j, TYPE_UI_TOKENS as k, type TypeOverlineToken as l, type TypeRefinementToken as m, type TypeScaleToken as n, type TypeUiToken as o, type WorkspaceSurfaceToken as p };

package/dist/blocks/danger-zone-block.js

@@ -5,14 +5,14 @@ import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "../com
 import { DestructiveActionModal } from "../components/destructive-action-modal/index.js";
 import { cn } from "../lib/cn.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var account = { handle: "ada", editions: 12 };
+var account = { handle: "ada", projects: 12 };
 function DangerZoneBlock({ className, framed = true, onDelete }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-2xl", className), children: [
       /* @__PURE__ */ jsxs(CardHeader, { children: [
         /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Delete account" }),
-        /* @__PURE__ */ jsx(CardDescription, { children: "Permanently remove your profile, editions, and sales history. Collectors keep the editions they own." })
+        /* @__PURE__ */ jsx(CardDescription, { children: "Permanently remove your profile, projects, and billing history. Files you shared stay with your team." })
       ] }),
       /* @__PURE__ */ jsx(CardFooter, { actions: true, className: "justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => setOpen(true), children: "Delete account" }) })
     ] }),
@@ -22,7 +22,7 @@ function DangerZoneBlock({ className, framed = true, onDelete }) {
         open,
         onOpenChange: setOpen,
         title: "Delete your account?",
-        description: `This permanently removes your profile, ${account.editions} editions, and sales history. Pending payouts are still sent. This can't be undone.`,
+        description: `This permanently removes your profile, ${account.projects} projects, and billing history. Your final invoice is still sent. This can't be undone.`,
         confirmLabel: "Delete account",
         confirmingLabel: "Deleting\u2026",
         confirmText: account.handle,

package/dist/blocks/danger-zone-block.meta.js

@@ -9,7 +9,7 @@ var dangerZoneBlockMeta = {
   notes: [
     "Copied from the SettingsPage page shell's Delete account section.",
     "The button never acts directly: it opens the modal, whose confirm stays disabled until the handle is typed.",
-    'The description says what is lost AND what is kept ("Collectors keep the editions they own"), which is what people want to know before they decide.'
+    'The description says what is lost AND what is kept ("Files you shared stay with your team"), which is what people want to know before they decide.'
   ],
   a11y: [
     "DestructiveActionModal is an alertdialog: focus opens on Cancel and the backdrop does not dismiss it.",

package/dist/blocks/faq-block.js

@@ -10,10 +10,10 @@ var intro = {
   contact: { label: "Write to us", href: "/contact" }
 };
 var questions = [
-  { q: "Is there a free plan?", a: "Yes. Starter is free forever for three live editions, with no fees on your first $1,000 in sales." },
+  { q: "Is there a free plan?", a: "Yes. Starter is free forever for three active projects, with no card needed to sign up." },
   { q: "Can I change plans later?", a: "Any time. Upgrades apply immediately and are prorated; downgrades take effect at the end of the billing period." },
-  { q: "Who owns the work I sell?", a: "You do. Collectors own the editions they buy, and you keep the rights to the work itself." },
-  { q: "How do payouts work?", a: "Sales clear after seven days and are paid out every Friday to the account you connect in settings." }
+  { q: "Who owns the data I add?", a: "You do. You can export everything in your workspace at any time, and we never sell it." },
+  { q: "How does billing work?", a: "Plans are billed per seat at the start of each period, to the card or account you add in settings." }
 ];
 function FaqBlock({ className }) {
   const titleId = useId();

package/dist/blocks/goal-progress-block.js

@@ -5,7 +5,7 @@ import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var goals = [
   { goal: "Releases", progress: 82 },
-  { goal: "Collectors", progress: 64 },
+  { goal: "Customers", progress: 64 },
   { goal: "Revenue", progress: 91 }
 ];
 function GoalProgressBlock({ className, framed = true }) {

package/dist/blocks/notification-list-block.js

@@ -6,7 +6,7 @@ import { StatusDot } from "../components/status-dot/index.js";
 import { cn } from "../lib/cn.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var notifications = [
-  { initials: "MO", name: "Mara Okafor", what: "collected your edition", when: "2m", unread: true },
+  { initials: "MO", name: "Mara Okafor", what: "invited you to Q3 planning", when: "2m", unread: true },
   { initials: "SR", name: "Sam Rivera", what: "left a comment on Dusk", when: "1h", unread: false }
 ];
 function NotificationListBlock({ className, framed = true }) {

package/dist/blocks/pricing-table-block.js

@@ -12,32 +12,32 @@ var tiers = [
   {
     id: "starter",
     name: "Starter",
-    blurb: "For one person shipping their first editions.",
+    blurb: "For one person getting a first project going.",
     monthly: 0,
     yearly: 0,
     cta: "Start for free",
     featured: false,
-    features: ["3 live editions", "Collector profiles", "Community support"]
+    features: ["3 active projects", "Shared docs", "Community support"]
   },
   {
     id: "studio",
     name: "Studio",
-    blurb: "For working artists with a steady release schedule.",
+    blurb: "For small teams shipping on a steady schedule.",
     monthly: 20,
     yearly: 16,
     cta: "Start free trial",
     featured: true,
-    features: ["Unlimited editions", "Scheduled drops", "Sales analytics", "Priority support"]
+    features: ["Unlimited projects", "Scheduled reports", "Usage analytics", "Priority support"]
   },
   {
-    id: "collective",
-    name: "Collective",
-    blurb: "For galleries and teams releasing together.",
+    id: "business",
+    name: "Business",
+    blurb: "For companies running several teams at once.",
     monthly: 48,
     yearly: 40,
     cta: "Talk to sales",
     featured: false,
-    features: ["Everything in Studio", "Up to 10 seats", "Shared payouts", "Roles and approvals"]
+    features: ["Everything in Studio", "Up to 10 seats", "SSO and audit log", "Roles and approvals"]
   }
 ];
 function PricingTableBlock({ className, onChoose }) {
@@ -45,8 +45,8 @@ function PricingTableBlock({ className, onChoose }) {
   const titleId = useId();
   return /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": titleId, max: "wide", className: cn("w-full py-16", className), children: /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
     /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "text-center", children: [
-      /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-balance text-heading-1", children: "Pricing that grows with your practice" }),
-      /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "Every plan includes unlimited collectors and no fees on your first $1,000 in sales." }),
+      /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-balance text-heading-1", children: "Pricing that grows with your team" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "Every plan includes unlimited guests, and you can switch plans at any time." }),
       /* @__PURE__ */ jsxs(ToggleGroup, { value: [period], onValueChange: (v) => v[0] && setPeriod(v[0]), "aria-label": "Billing period", children: [
         /* @__PURE__ */ jsx(Toggle, { value: "monthly", children: "Monthly" }),
         /* @__PURE__ */ jsx(Toggle, { value: "yearly", children: "Yearly \xB7 save 20%" })
@@ -56,12 +56,12 @@ function PricingTableBlock({ className, onChoose }) {
       Card,
       {
         render: /* @__PURE__ */ jsx("article", {}),
-        className: cn("flex flex-col", tier.featured && "border-primary ring-1 ring-primary"),
+        className: cn("flex flex-col", tier.featured && "outline-primary ring-1 ring-primary"),
         children: [
           /* @__PURE__ */ jsxs(CardHeader, { children: [
             /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h3", {}), children: tier.name }),
             /* @__PURE__ */ jsx(CardDescription, { children: tier.blurb }),
-            tier.featured ? /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "edition", size: "sm", children: "Most popular" }) }) : null
+            tier.featured ? /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "1", size: "sm", children: "Most popular" }) }) : null
           ] }),
           /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-1 flex-col gap-5", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [

package/dist/blocks/product-card-block.js

@@ -6,18 +6,18 @@ import { MediaImage } from "../components/media-image/index.js";
 import { AspectBox } from "../layout/AspectBox.js";
 import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var product = { title: "Untitled (gold rush)", maker: "Mara Okafor", image: "", edition: "12 of 50", price: "0.42 SOL" };
+var product = { title: "Linen throw blanket", maker: "Northfield Home", image: "", badge: "New", price: "$64.00" };
 function ProductCardBlock({ className, framed = true, onCollect }) {
   return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs overflow-hidden", className), children: [
     /* @__PURE__ */ jsx(AspectBox, { ratio: 4 / 3, children: /* @__PURE__ */ jsx(MediaImage, { src: product.image, seed: product.title }) }),
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsx(CardTitle, { children: product.title }),
       /* @__PURE__ */ jsx(CardDescription, { children: product.maker }),
-      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "edition", children: product.edition }) })
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "1", children: product.badge }) })
     ] }),
     /* @__PURE__ */ jsxs(CardFooter, { className: "justify-between pt-4", children: [
       /* @__PURE__ */ jsx("span", { className: "text-mono-lg", children: product.price }),
-      /* @__PURE__ */ jsx(Button, { onClick: onCollect, children: "Collect" })
+      /* @__PURE__ */ jsx(Button, { onClick: onCollect, children: "Add to cart" })
     ] })
   ] });
 }

package/dist/blocks/product-card-block.meta.js

@@ -4,10 +4,10 @@ var productCardBlockMeta = {
   family: "Commerce",
   kind: "card",
   width: { min: "16rem", max: "20rem" },
-  summary: "A product card: edge-to-edge artwork, title and maker, an edition Badge, and the price beside a single buy action.",
-  intent: "Reach for this for a product, edition or listing in a grid or a featured slot. For a row in a dense list, use an Entity with the image as `leading` instead.",
+  summary: "A product card: edge-to-edge product image, title and maker, a status Badge, and the price beside a single buy action.",
+  intent: "Reach for this for a product or listing in a grid or a featured slot. For a row in a dense list, use an Entity with the image as `leading` instead.",
   notes: [
-    "The artwork runs to the card's edges; the card clips it to its own corners (overflow-hidden).",
+    "The image runs to the card's edges; the card clips it to its own corners (overflow-hidden).",
     "Prices are `text-mono-lg` \u2014 the metric mono tier with tabular figures \u2014 never a heading tier.",
     "The placeholder art is painted from the palette's decorative tones so it follows the theme; swap it for the product image with real alt text."
   ],

package/dist/blocks/profile-card-block.js

@@ -11,7 +11,7 @@ var profile = {
   name: "Juno Avery",
   initials: "JA",
   handle: "@juno \xB7 Sound and light",
-  bio: "Field recordings, slowed down. New edition every full moon.",
+  bio: "Field recordings, slowed down. New track every full moon.",
   stats: [
     { value: "128", label: "posts" },
     { value: "4.2k", label: "followers" }