@sableui/react 0.4.0 → 0.6.0

package/AGENTS.md

@@ -45,11 +45,11 @@ These are short on purpose. Each links to a foundations doc with the full vocabu
 6. **Motion has a reason and a recipe.** Apply a named `motion-*` recipe; drop to `duration-(--motion-duration-*)` + `ease-*` tokens only when none fits. Never Tailwind's `animate-*`, never a raw `duration-150`. Exits are faster than entrances and never overshoot. → `sable docs motion`
 7. **Icons by semantic name.** `<Icon name="check" />`; size with `text-{size}`, never type utilities. A mark attached to a line of type (dot, bullet, leading icon) sits in an `h-[1lh] items-center` box and is sized in em, never nudged with px. → `sable docs typography`
 8. **Every scroll container declares a policy:** `scrollbar-quiet` (vertical) or `scrollbar-hidden` (horizontal, with an edge fade carrying the affordance).
-9. **Accessible by construction.** WCAG AA contrast, 44px hit areas, visible focus, logical properties, live regions that exist before they speak. → `sable docs accessibility`
+9. **Accessible by construction.** WCAG AA contrast (and a label on a brand or status fill also clears APCA Lc 60 — `label-contrast`), 44px hit areas, visible focus, logical properties, live regions that exist before they speak. → `sable docs accessibility`
 
 ## Customizing: themes are presets
 
-Pick a theme as a starting point, then override tokens on top of it. Every token a theme sets can be reset by the app on `:root` (or any subtree) after the theme CSS loads — radius, density, type scale, motion scale, accent — and components follow, because they only read tokens. The docs site's **Customize** panel does exactly this live and exports the result as CSS; paste it after your Sable imports. Retrieve the overridable set with `npx sable token --list`.
+Pick a theme as a starting point, then override tokens on top of it. Every token a theme sets can be reset by the app on `:root` (or any subtree) after the theme CSS loads — radius, density, type scale, motion scale, accent — and components follow, because they only read tokens. The docs site's **Customize** panel does exactly this live and exports the result as CSS; paste it after your Sable imports. Retrieve the overridable set with `npx sable token --list`. When you retune a filled role (`--primary`, `--sidebar-primary`, `--highlight`, `--destructive`, `--success`, `--tone-warning`, `--tone-info`), check the label on it: `sable lint` measures the pair against the installed theme and suggests one that reads. If the pair is a deliberate brand choice, keep it with `/* design-lint-disable-next-line label-contrast -- <reason> */`. Status colours have a second token for the colour drawn on a surface — `--destructive-text`, `--success-text`, `--tone-warning-text`, `--tone-info-text` — which `text-`, `border-` and `ring-<status>` read; only `bg-<status>` reads the fill. Retune both.
 
 ## Wire it up
 

package/CHANGELOG.md

@@ -1,5 +1,194 @@
 # What's new
 
+## 0.6.0
+
+### Art from the theme
+
+- **`GradientArt`, placeholder artwork painted by a shader.** A static WebGL
+  mesh gradient (Paper Shaders' static mesh gradient; `variant="grain"` for
+  their grain gradient) painted from the theme, for covers, banners, tiles and
+  avatars with no image yet. `seed` fixes each item's composition and leading
+  colour, so a row of covers or avatars stays individually recognisable in
+  every theme; children render above the art. It paints once on mount, on
+  resize and when the theme changes, through one WebGL context shared by every
+  instance, so a page of avatars costs one context. A CSS gradient stays
+  underneath for prerendered pages and browsers without WebGL2.
+- **Each preset has its own art direction.** New optional `--art-*` tokens
+  (`art-1` … `art-6`, `art-ground`, `art-warp`, `art-softness`, `art-grain`;
+  `ART_TOKENS` in the contract) set the art's palette and character, through
+  `--theme-art-*` hooks like the workspace surfaces. Ember burns (fire falling
+  off into warm black), Poppy is candy blobs, Prism airbrushed pastels, Verdant
+  stained glass, Meridian grainy monochrome, Atelier a dark studio with one
+  amber glow; Sable keeps its tones. The colours derive from each theme's own
+  tokens where its art direction allows, so a brand change carries into the
+  art. Presets may declare the hooks too.
+- **`Avatar variant="art"`.** The fallback paints the initials over
+  `GradientArt` seeded by the person (the initials, then `alt`, or `seed`), so
+  everyone without a photo gets their own colour and keeps it wherever they
+  appear. The default stays `neutral`.
+- **Blocks and patterns use it.** The product card, media player and profile
+  card blocks and the auth page paint their placeholder art with
+  `GradientArt` instead of hand-written CSS gradients, and the avatars across
+  the blocks and page patterns use `variant="art"`.
+- **New dependency:** `@paper-design/shaders` 0.0.81 (Apache-2.0), pinned
+  exactly while it is pre-1.0. Only the two fragment shaders and the noise
+  texture are imported; the notice is in `THIRD_PARTY_NOTICES.md`.
+
+### Labels on filled colours
+
+- **Labels on brand and status fills now have to pass APCA as well as WCAG.** A
+  filled control's label is held to 4.5:1 and APCA Lc 60 in both modes, for
+  `primary`, `sidebar-primary`, `highlight`, `destructive`, `success`,
+  `tone-warning` and `tone-info`. The ratio alone let dark ink on a bright red
+  through at Lc 38–46, which reads muddy. Every shipped theme is tested against
+  both floors, with no exceptions.
+- **Status colours have a separate token for text.** `--destructive-text`,
+  `--success-text`, `--tone-warning-text` and `--tone-info-text`.
+  `text-destructive`, `border-destructive`, `ring-destructive`, `outline-`,
+  `decoration-`, `fill-` and `stroke-` now read the `-text` token; only
+  `bg-destructive` reads the fill. The class names are unchanged. A dark-mode
+  fill can now sit low enough for a white label while error text stays light
+  enough to read on a dark card. Badge's soft status tones and the destructive
+  Menu item mix their ink from the `-text` token too: from the fill, Meridian's
+  dark destructive menu item measured 3.8:1; every theme now clears 4.5:1.
+  **Migration:** if your app retunes `--destructive` (or `--success`,
+  `--tone-warning`, `--tone-info`), set its `-text` as well, or text, borders
+  and rings keep the theme's colour. Presets saved on 0.5 keep working: a
+  missing `-text` token takes its fill, which is what text read before.
+- **Destructive buttons have white labels in dark mode.** In Sable, Atelier,
+  Ember, Meridian and Verdant the dark destructive fill moved down (Sable
+  68%→59%, Meridian 66%→55%, Atelier 66%→58.5%, Verdant 64%→57.5%, Ember
+  62%→58%) and its label went from dark to white. Error text reads the lighter
+  `-text` value, so it is no darker than before.
+- **Dark highlights have white labels in Sable and Ember.** Sable's dark
+  `--highlight` went from 70% to 57% and Ember's from 65.2% to 58%; dark ink on
+  the brighter fill read at Lc 42–46.
+- **Small status fixes.** In Ember, Atelier, Meridian and Verdant, dark
+  `success` and `tone-info` are a little lighter so the dark label clears Lc
+  60. In light mode, Sable's `text-tone-info` is one step darker and Verdant's
+  `text-tone-warning` is 51%; both measured just under 4.5:1 on `muted`.
+
+### Lint and CLI
+
+- **New `sable lint` rule: `label-contrast`.** It finds an app's overrides of a
+  brand or status fill or its `-foreground`, completes the pair from the
+  installed theme and measures both modes. Findings carry file:line and the
+  nearest pair that reads: the fill's lightness moves, the hue stays. Keep a
+  deliberate brand pair with `/* design-lint-disable-next-line label-contrast
+  -- <reason> */`. `sable grade` runs the same rule. Apps that passed lint on
+  0.5 can fail it now.
+- **`sable preset --check` measures labels on fills.** A failing pair stops the
+  check with `ERR_PRESET_CONTRAST`, the suggested pair and a ready-to-paste
+  `exceptions` entry. Presets accept an optional `exceptions` array (`rule`,
+  `mode`, `token`, `reason`); an accepted pair is reported with its reason on
+  every check instead of failing. `@sableui/react/presets` exports
+  `presetLabelContrast()` and the measuring helpers (`checkLabelledFills`,
+  `fitFillToInk`, `inkFor`, `inkPolarity`, `labelContrast`, `LABELLED_FILLS`,
+  `BRAND_FILLS`, `STATUS_FILLS`).
+
+### Sheets own their actions
+
+- **A sheet lays out the actions inside it.** `CardFooter` has an `actions`
+  prop for a footer that holds only buttons. Inside a bottom `SheetContent` or
+  an `IosSheet`, that footer becomes a full-width stack pinned to the bottom:
+  the primary on top, every button at the cta height. On a page nothing
+  changes. `SheetFooter` stacks the same way in a bottom sheet, capped at
+  `max-w-sm` and centred; side sheets keep the right-aligned row.
+  DangerZoneBlock, FeedbackFormBlock and ProfileFormBlock mark their footers.
+- **Only the sheet's own content.** A Dialog, Popover or side Sheet opened from
+  inside a bottom sheet presents a page again, so its footer is a row. Only the
+  outermost flat Card in a sheet bleeds into the sheet's padding (lining its
+  content up with the sheet's title and close button), and only that card's
+  footer stacks; a card nested inside it is left alone.
+- **`PresentationProvider`, `usePresentation`** and the `Presentation` type let
+  a custom container declare itself a sheet.
+- **`IosSheet background="opaque"`** keeps the floating medium-detent shape but
+  fills it solid, like SwiftUI's `.presentationBackground`, for forms whose
+  fields would otherwise sit on whatever the glass blurs. In an iOS sheet, a
+  form or grid between the content and its action bar keeps its own layout.
+  The iOS target is marked beta, and `sable target ios` prints its layout rules.
+
+### Components
+
+- **Tab triggers space a badge or icon from the label.** Pill and underline
+  `TabsTrigger` use `--control-gap`, as Button does; the label's trimmed span
+  had dropped a typed space, so a badge touched the text.
+- **NotificationListBlock puts the unread dot before the time**, so the times
+  line up on one right edge.
+
+### On sableui.com
+
+- **Customize was redesigned.** Simple is gestures over previews: the character
+  pad, one shape preview for corners and depth together, a live palette strip
+  of what the page is painted with, single-line font rows. Advanced is a
+  property grid in the workspace register (compact density, `PanelSection`,
+  `PropertyRow`/`PropertyPair`, `ScrubField`, `Select`): one exact anchor per
+  domain with the ladder it resolves to beneath it. Mode, Reset all and Export
+  sit in a footer both views share, and every section resets on its own.
+- **Status colours lean toward the brand within their meaning.** Destructive,
+  warning and success each move toward the brand inside a hue range the
+  presets already ship (destructive 5–30°, warning 50–90°, success 140–175°),
+  warning keeps 30° from destructive, and saturation follows the brand at half
+  strength with a floor. Advanced has a Status lean control.
+- **Customize fits labels to brand and status fills**: the label ink is chosen
+  once, from the brand as picked, and each mode's fill moves to meet it.
+- The homepage now says what is true: Sable is open source under MIT and
+  installs from npm.
+
+## 0.5.0
+
+- **Stacked toasts.** `<ToastProvider stacked>` stacks toasts like a deck of
+  cards: the newest in front, older ones peeking out behind it a step smaller,
+  so a burst of toasts no longer takes over the corner of the page. Hovering
+  or focusing the stack fans it out into the list. It works at every
+  `position`. `ToastContent` is the new part that holds a toast's row; in a
+  stacked viewport it hides the cards behind the front one. Collapsed, the
+  deck casts one shadow rather than one per card, so a theme with hard offset
+  shadows (Poppy) stays clean.
+- **Depth in Customize.** On sableui.com, Customize has a Depth control (Flat ↔
+  Lifted) and a Shadow style (Preset, Soft, Crisp, Offset). They write the five
+  `--theme-shadow-*` tokens for light and dark, so the CSS export and preset
+  download carry them. Depth scales the reach and strength of every step
+  together; lifting a flat preset such as Meridian brings in soft shadows. The
+  shadow takes the preset's neutral hue. Advanced replaces the slider with
+  exact numbers set on the largest step, which the others follow: light angle
+  (90° is overhead), distance, blur and opacity. Blur takes one
+  blur-to-distance ratio, so an Offset shadow can be softened; opacity is set
+  in light mode and dark mode darkens in proportion.
+- **Knob shadows stay on their track.** The Switch thumb, Slider thumb and
+  ColorField handle used `shadow-sm`, the elevation step for raised surfaces.
+  Where a theme or a Depth setting made that a long offset (Poppy's hard
+  drops), the shadow fell outside the switch's track. Knobs now take
+  `--knob-shadow`, one small contact shadow that themes can set through
+  `--theme-knob-shadow`. In Sable it looks the same as before.
+- **Pill tabs take the theme's button shape.** `TabsList variant="pill"`
+  triggers used the small radius, so in Sable they were rounded rectangles
+  beside pill buttons. They now read `--button-radius`
+  as `Button` does: pills in Sable, 12px in Poppy, square in Meridian, and a
+  theme's own button shape wherever it sets one.
+- **CodeBlock no longer scrolls code under its copy button.** Without a
+  filename header, the copy button floated over the code, so on a narrow
+  screen a long line ran underneath it. It now has its own column beside the
+  code. The code's edges fade while there is more to scroll, like `Scroller`'s.
+- **Scroller's edge fades follow content and size changes.** They were measured
+  on mount and on scroll only, so a list that grew, shrank or was resized kept
+  the fade it started with until it was scrolled.
+- **Icons no longer redraw on every render.** The default Reicon set and the
+  brand set rewrote their SVG each time a parent re-rendered (React 19
+  re-applies `dangerouslySetInnerHTML` when the object changes). Inside a
+  toast that never settled and froze the page.
+- **A card that is only a header keeps its bottom padding.** `CardHeader` leaves
+  the bottom padding to the content that follows it; with nothing after it (a
+  stat card: label, number, sparkline) the number sat on the card's edge.
+- **Line and area sparklines span their own range.** They used to include zero,
+  so a run from 12 to 26 used only the top half of the box: a flat squiggle over
+  a solid block. Bar sparklines keep the zero baseline, since a bar's length is
+  the value.
+- **Combobox chips are balanced.** The remove button was a full 28px icon
+  button, which swelled each chip into a 34px pill and left more room after the
+  label than before it. It is now drawn to the chip (20px, with a 14px X) and
+  keeps a 28px pointer target, so the label and the X sit evenly in a 23px chip.
+
 ## 0.4.0
 
 ### The default theme is now called Sable

package/CONTRIBUTING.md

@@ -117,7 +117,7 @@ deliberately reverses: `DESIGN.md → Registers`. What a contributor needs to kn
 
 ## Theme contract
 
-A theme is a CSS file that defines every token in `themes/_contract.ts` for `:root` (light) and `.dark` (dark), plus an optional TS manifest. Components depend on the **semantic** layer; each theme supplies its own palette underneath. Alternate themes activate through the root `data-sable-theme` attribute; consuming apps should usually let `<SableThemeProvider>` own that wiring and read/update it through `useSableTheme()`. To make a new theme: copy `themes/sable/`, swap the palette + semantic values, keep the token names identical, add the manifest to `themes/registry.ts`, import its CSS from `src/themes.css`, add `./theme/<id>` + `./theme/<id>.css` to both `exports` and `publishConfig.exports`, and cover it in `themes.test.ts`. `build-registry` fails on a theme missing from any of those, and generates `registry.json → themes.available` from the manifests — never hand-edit that list. Re-skinning never touches component code.
+A theme is a CSS file that defines every token in `themes/_contract.ts` for `:root` (light) and `.dark` (dark), plus an optional TS manifest. Components depend on the **semantic** layer; each theme supplies its own palette underneath. Alternate themes activate through the root `data-sable-theme` attribute; consuming apps should usually let `<SableThemeProvider>` own that wiring and read/update it through `useSableTheme()`. To make a new theme: copy `themes/sable/`, swap the palette + semantic values, keep the token names identical, add the manifest to `themes/registry.ts`, import its CSS from `src/themes.css`, add `./theme/<id>` + `./theme/<id>.css` to both `exports` and `publishConfig.exports`, and cover it in `themes.test.ts` — which holds every label on a brand or status fill (`primary`, `sidebar-primary`, `highlight`, `destructive`, `success`, `tone-warning`, `tone-info`) to 4.5:1 **and** APCA Lc 60 with no exceptions; apps and presets may record exceptions, Sable's own themes may not. Each status colour also has a `-text` token (the colour on a surface, read by `text-`/`border-`/`ring-<status>` through Tailwind's per-property namespaces in styles.css), gated as text on `background`, `card`, `popover` and `muted`. `build-registry` fails on a theme missing from any of those, and generates `registry.json → themes.available` from the manifests — never hand-edit that list. Re-skinning never touches component code.
 
 **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.
 

package/THIRD_PARTY_NOTICES.md

@@ -16,10 +16,21 @@ Third-party software, fonts, and trademarks retain their own terms.
 | [React](https://github.com/facebook/react) | MIT | Component runtime |
 | [Reicon](https://github.com/dqev/reicon) | MIT | Default interface icons and bundled brand icons |
 | [Konsta UI](https://github.com/konstaui/konsta) | MIT | Optional native controls for iOS prototypes |
+| [Paper Shaders](https://github.com/paper-design/shaders) | Apache-2.0 | GradientArt's mesh and grain fragment shaders |
 
 Library dependencies are external to Sable's library build and carry their
 license notices in their distributions.
 
+## Paper Shaders
+
+GradientArt renders fragment shaders from `@paper-design/shaders` 0.0.81, a
+dependency. Its vertex shader is adapted from that package's
+`dist/vertex-shader.js` (outputs the two fragment shaders do not read are
+removed) and lives in `src/components/gradient-art/renderer.ts`. Copyright 2026
+Paper, "Powered by Paper Shaders" (https://shaders.paper.design); the license
+and NOTICE are included as `third-party/paper-shaders-LICENSE.txt` and
+`third-party/paper-shaders-NOTICE.txt`.
+
 ## Brand icons
 
 The 23 bundled brand marks come from `reicon-brands` 1.0.2. Sable normalizes them

package/bin/sable-lint.mjs

@@ -27,6 +27,7 @@ import { existsSync, readdirSync, readFileSync, statSync } from "node:fs"
 import { dirname, join, relative, resolve, sep } from "node:path"
 import { fileURLToPath } from "node:url"
 import { ignoreGlob, lintText, makeRules, report } from "../scripts/lint-rules.mjs"
+import { labelContrastScanner } from "../scripts/label-contrast.mjs"
 
 const HERE = dirname(fileURLToPath(import.meta.url))
 const PKG_ROOT = join(HERE, "..")
@@ -53,7 +54,7 @@ const motionTokens = new Set([
 	REGISTRY.tokens?.motion?.scale,
 ].filter(Boolean))
 
-const rules = makeRules({ semanticTokens, motionTokens }).filter((r) => r.scope !== "package")
+const rules = makeRules({ semanticTokens, motionTokens, labelContrast: await labelContrastScanner(PKG_ROOT, REGISTRY.themes?.default) }).filter((r) => r.scope !== "package")
 
 /* ── Args. ─────────────────────────────────────────────────────────────────── */
 const args = process.argv.slice(2)

package/bin/sable.mjs

@@ -84,7 +84,7 @@ const COMMANDS = [
 		arg: null,
 		flags: [
 			{ name: "--template", value: null, describe: "Print a complete editable Sable preset JSON record." },
-			{ name: "--check", value: "file.json", describe: "Validate the schema and Sable token contract." },
+			{ name: "--check", value: "file.json", describe: "Validate the schema, the Sable token contract, and labels on brand and status fills (accept a pair with `exceptions`)." },
 			{ name: "--css", value: "file.json", describe: "Generate scoped theme CSS from a validated preset." },
 		],
 		returns: ["preset.template", "preset.check", "preset.css"],
@@ -282,6 +282,7 @@ const COMMANDS = [
 const ERROR_CODES = [
 	{ code: "ERR_TARGET_MISSING", when: "The installed package is missing its optional target mapping artifact." },
 	{ code: "ERR_PRESET_INVALID", when: "A preset is missing required metadata, semantic values, or uses unsupported tokens or CSS." },
+	{ code: "ERR_PRESET_CONTRAST", when: "A label on a brand or status fill (primary, sidebar-primary, highlight, destructive, success, tone-warning, tone-info) misses 4.5:1 or APCA Lc 60. Apply the suggested pair, or record an `exceptions` entry with a reason." },
 	{ code: "ERR_AGENT_SETUP", when: "The packaged skill is missing, the destination is linked, or existing local edits would be overwritten." },
 	{ code: "ERR_UNKNOWN_COMMAND", when: "The first argument is not a command." },
 	{ code: "ERR_MISSING_ARGUMENT", when: "A command that requires an argument got none." },
@@ -1213,7 +1214,7 @@ const HANDLERS = {
 			const contexts = (match.contexts ?? []).map(c => `${c.role}: ${c.strategy} → ${c.importFrom} (${c.components.join(" + ")})`).join("\n")
 			ok("target.component", match, `${match.source}: ${match.strategy}\n${contexts || `${match.importFrom ?? "app"} → ${match.components.join(" + ") || match.strategy}`}\n${match.guidance}`)
 		}
-		ok("target", target, `iOS ${target.platformVersion}: ${target.designPolicy.principle}\n${target.designPolicy.rule}\n` + Object.values(target.components).map(c => `${c.source}: ${c.strategy} → ${c.strategy === "contextual" ? "choose by role" : c.components.join(" + ") || "redesign for phone"}`).join("\n"))
+		ok("target", target, `iOS ${target.platformVersion}${target.status ? ` (${target.status})` : ""}: ${target.designPolicy.principle}\n${target.statusNote ? `${target.statusNote}\n` : ""}${target.designPolicy.rule}\n${(target.designPolicy.layout ?? []).map((l) => `Layout: ${l}\n`).join("")}` + Object.values(target.components).map(c => `${c.source}: ${c.strategy} → ${c.strategy === "contextual" ? "choose by role" : c.components.join(" + ") || "redesign for phone"}`).join("\n"))
 	},
 	preset: () => cmdDesignTool("design-presets.mjs"),
 	setup: () => {

package/dist/{_contract-Cn3lUpih.d.ts → _contract-C2M1SjBf.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", "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-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"];
 type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
 /**
  * Motion tokens (mode-independent). A theme MAY override these to retune its
@@ -106,6 +106,24 @@ type DensityToken = (typeof DENSITY_TOKENS)[number];
  */
 declare const WORKSPACE_SURFACE_TOKENS: readonly ["canvas", "canvas-foreground", "panel", "panel-foreground", "panel-raised", "panel-field", "panel-field-hover", "hairline", "hairline-strong"];
 type WorkspaceSurfaceToken = (typeof WORKSPACE_SURFACE_TOKENS)[number];
+/**
+ * Art direction for generated imagery (GradientArt) — like the workspace
+ * surfaces, every theme gets them from styles.css with a `--theme-*` hook, so a
+ * theme declares only what makes its art its own.
+ *
+ * - `art-1` … `art-6` are the colours the art is painted from, in placement
+ *   order; unset slots are transparent and skipped. The default is the four
+ *   decorative tones, lifted to an art strength.
+ * - `art-ground` is what the colours glow over (grain's ground, the CSS
+ *   fallback's base). The default is the brand steeped in the first tone.
+ * - `art-warp` (0–1) bends the field; `art-softness` (0–1) is how far colours
+ *   melt into each other, 0 crisp blobs to 1 one wash; `art-grain` (0–1) is a
+ *   film-grain overlay for themes whose imagery carries one.
+ *
+ * Derive the colours from the theme's own tokens (`oklch(from var(--primary)
+ * …)`) 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"];
 /**
  * UI type tiers (mode-independent) — the chrome typography register.
  *
@@ -152,4 +170,4 @@ interface ThemeManifest {
     };
 }
 
-export { 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, 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 };

package/dist/blocks/index.js

@@ -1,9 +1,10 @@
-import { Kbd, CommandMenuPanel, ToggleGroup, Toggle, BarChart, DateTile, Accordion, AccordionItem, AccordionTrigger, AccordionPanel, RadialChart, Sparkline, Slider, Stepper, StepperItem, SegmentedBar, Checkbox, PieChart, AreaChart, OtpField } from '../chunk-FBSL2LZQ.js';
-import { Card, CardHeader, CardTitle, CardDescription, CardAction, Button, CardList, Entity, OverflowMenu, MenuItem, MenuSeparator, Code, CardContent, Message, Bubble, CardFooter, DestructiveActionModal, Badge, AvatarGroup, Avatar, Textarea, CodeBlock, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, StatusDot, Switch, Form, Field, Select, SelectTrigger, SelectContent, SelectItem, Separator, Label, Attachment } from '../chunk-CCUDFLU3.js';
+import { Kbd, CommandMenuPanel, ToggleGroup, Toggle, BarChart, DateTile, Accordion, AccordionItem, AccordionTrigger, AccordionPanel, RadialChart, Sparkline, Slider, Stepper, StepperItem, SegmentedBar, Checkbox, PieChart, AreaChart, OtpField } from '../chunk-EDXLM7YL.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardAction, Button, CardList, Entity, OverflowMenu, MenuItem, MenuSeparator, Code, CardContent, Message, Bubble, CardFooter, DestructiveActionModal, Badge, AvatarGroup, Avatar, Textarea, CodeBlock, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, GradientArt, StatusDot, Switch, Form, Field, Select, SelectTrigger, SelectContent, SelectItem, Separator, Label, Attachment } from '../chunk-7QSDYBXO.js';
+import '../chunk-FKZXAFIY.js';
 import { Region, Stack, Row, Grid } from '../chunk-3IWZYBGH.js';
 import { cn } from '../chunk-SRQWQUTW.js';
-import { Icon } from '../chunk-NGBDP3BM.js';
-import '../chunk-TH563WLW.js';
+import { Icon } from '../chunk-QJ6FWTUG.js';
+import '../chunk-XAZGMY73.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId, useState } from 'react';
 
@@ -162,7 +163,7 @@ function DangerZoneBlock({ className, framed = true, onDelete }) {
         /* @__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(CardFooter, { className: "justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => setOpen(true), children: "Delete account" }) })
+      /* @__PURE__ */ jsx(CardFooter, { actions: true, className: "justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => setOpen(true), children: "Delete account" }) })
     ] }),
     /* @__PURE__ */ jsx(
       DestructiveActionModal,
@@ -300,7 +301,7 @@ function EventCardBlock({ className, framed = true, onRespond }) {
       ] })
     ] }),
     /* @__PURE__ */ jsxs(CardFooter, { className: "flex-wrap justify-between gap-3", children: [
-      /* @__PURE__ */ jsx(AvatarGroup, { "aria-label": `${event.total} attendees`, total: event.total, size: "sm", surface: framed ? "card" : void 0, fit: true, children: event.attendees.map((initials) => /* @__PURE__ */ jsx(Avatar, { fallback: initials, alt: initials }, initials)) }),
+      /* @__PURE__ */ jsx(AvatarGroup, { "aria-label": `${event.total} attendees`, total: event.total, size: "sm", surface: framed ? "card" : void 0, fit: true, children: event.attendees.map((initials) => /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: initials, alt: initials }, initials)) }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => onRespond?.("decline"), children: "Decline" }),
         /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => onRespond?.("join"), children: "Join" })
@@ -434,7 +435,7 @@ function FeedbackFormBlock({ className, framed = true, onDone }) {
       /* @__PURE__ */ jsx(ToggleGroup, { value: [score], onValueChange: (v) => v[0] && setScore(String(v[0])), "aria-label": "Rating", className: "w-full", children: scale.map((n) => /* @__PURE__ */ jsx(Toggle, { value: n, className: "flex-1", children: n }, n)) }),
       /* @__PURE__ */ jsx(Textarea, { placeholder: "What worked, what didn\u2019t\u2026", "aria-label": "Notes", rows: 3, value: notes, onChange: (e) => setNotes(e.target.value) })
     ] }),
-    /* @__PURE__ */ jsxs(CardFooter, { className: "justify-end", children: [
+    /* @__PURE__ */ jsxs(CardFooter, { actions: true, className: "justify-end", children: [
       /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDone?.(false), children: "Skip" }),
       /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => onDone?.(true, { score: Number(score), notes }), children: "Send feedback" })
     ] })
@@ -543,7 +544,7 @@ function InviteTeamBlock({ className, framed = true, onSend }) {
       /* @__PURE__ */ jsx(CardDescription, { children: "Collaborators can edit every project." })
     ] }),
     /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx(AvatarGroup, { "aria-label": `${collaborators.length} collaborators`, size: "sm", surface: framed ? "card" : void 0, children: collaborators.map((initials) => /* @__PURE__ */ jsx(Avatar, { fallback: initials, alt: initials }, initials)) }),
+      /* @__PURE__ */ jsx(AvatarGroup, { "aria-label": `${collaborators.length} collaborators`, size: "sm", surface: framed ? "card" : void 0, children: collaborators.map((initials) => /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: initials, alt: initials }, initials)) }),
       /* @__PURE__ */ jsxs(
         "form",
         {
@@ -665,17 +666,6 @@ var kpiSparklineBlockMeta = {
   ]
 };
 var track = { title: "Low tide, high noon", artist: "Juno Avery", position: 38, elapsed: "1:24", remaining: "-2:16" };
-var ART_TONES = ["info", "collectible", "edition"];
-var ART_SPOTS = [[20, 20, 70], [85, 30, 60], [60, 90, 65]];
-var cover = [
-  ...ART_SPOTS.map(
-    ([x, y, reach], i) => (
-      // design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
-      `radial-gradient(in oklab at ${x}% ${y}%, oklch(from var(--tone-${ART_TONES[i % ART_TONES.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`
-    )
-  ),
-  "var(--primary)"
-].join(", ");
 function MediaPlayerBlock({ className, framed = true, onPlayingChange, onPrevious, onNext }) {
   const [playing, setPlaying] = useState(true);
   return /* @__PURE__ */ jsx(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
@@ -683,7 +673,7 @@ function MediaPlayerBlock({ className, framed = true, onPlayingChange, onPreviou
       Entity,
       {
         className: "p-0",
-        leading: /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "size-14 rounded-md", style: { background: cover } }),
+        leading: /* @__PURE__ */ jsx(GradientArt, { "aria-hidden": true, seed: track.title, className: "size-14 rounded-md" }),
         title: track.title,
         subtitle: track.artist,
         action: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Like", children: /* @__PURE__ */ jsx(Icon, { name: "heart" }) })
@@ -821,15 +811,15 @@ function NotificationListBlock({ className, framed = true }) {
   return /* @__PURE__ */ jsx(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs overflow-hidden", className), children: /* @__PURE__ */ jsx(CardList, { children: notifications.map((n) => /* @__PURE__ */ jsx(
     Entity,
     {
-      leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: n.initials, alt: n.name }),
+      leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: n.initials, alt: n.name }),
       title: /* @__PURE__ */ jsxs(Fragment, { children: [
         n.name,
         n.unread ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (unread)" }) : null
       ] }),
       subtitle: n.what,
       action: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-caption text-muted-foreground", children: [
-        n.when,
-        n.unread ? /* @__PURE__ */ jsx(StatusDot, { tone: "info" }) : null
+        n.unread ? /* @__PURE__ */ jsx(StatusDot, { tone: "info" }) : null,
+        n.when
       ] })
     },
     n.name
@@ -846,7 +836,7 @@ var notificationListBlockMeta = {
   intent: "Reach for this for a notifications popover, a recent-activity card or an inbox preview. A full inbox with selection and bulk actions is a ListDetailPage.",
   notes: [
     "Rows are Card + CardList + Entity, inset from the card's padding at any density.",
-    "Unread is a quiet info dot after the time \u2014 the list stays calm when most items are unread.",
+    "Unread is a quiet info dot before the time, so the times keep one right edge \u2014 the list stays calm when most items are unread.",
     "framed={false} drops the surface for a Popover, which already is one."
   ],
   a11y: [
@@ -1071,20 +1061,9 @@ var pricingTableBlockMeta = {
   ]
 };
 var product = { title: "Untitled (gold rush)", maker: "Mara Okafor", edition: "12 of 50", price: "0.42 SOL" };
-var ART_TONES2 = ["info", "collectible", "edition", "standard"];
-var ART_SPOTS2 = [[18, 22, 58], [82, 18, 55], [70, 88, 60], [12, 92, 55]];
-var artwork = [
-  ...ART_SPOTS2.map(
-    ([x, y, reach], i) => (
-      // design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
-      `radial-gradient(in oklab at ${x}% ${y}%, oklch(from var(--tone-${ART_TONES2[i % ART_TONES2.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`
-    )
-  ),
-  "var(--primary)"
-].join(", ");
 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("div", { "aria-hidden": true, className: "aspect-[4/3]", style: { background: artwork } }),
+    /* @__PURE__ */ jsx(GradientArt, { "aria-hidden": true, seed: product.title, className: "aspect-[4/3]" }),
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsx(CardTitle, { children: product.title }),
       /* @__PURE__ */ jsx(CardDescription, { children: product.maker }),
@@ -1125,24 +1104,13 @@ var profile = {
     { value: "4.2k", label: "followers" }
   ]
 };
-var ART_TONES3 = ["info", "collectible", "edition", "standard"];
-var ART_SPOTS3 = [[10, 50, 60], [50, 0, 55], [90, 60, 60], [40, 100, 50]];
-var banner = [
-  ...ART_SPOTS3.map(
-    ([x, y, reach], i) => (
-      // design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
-      `radial-gradient(in oklab at ${x}% ${y}%, oklch(from var(--tone-${ART_TONES3[i % ART_TONES3.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`
-    )
-  ),
-  "var(--primary)"
-].join(", ");
 function ProfileCardBlock({ className, framed = true, onFollowChange, onShare }) {
   const [following, setFollowing] = useState(false);
   return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs overflow-hidden", className), children: [
-    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-20", style: { background: banner } }),
+    /* @__PURE__ */ jsx(GradientArt, { "aria-hidden": true, seed: profile.handle, className: "h-20" }),
     /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3 pt-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-        /* @__PURE__ */ jsx(Avatar, { size: "lg", fallback: profile.initials, alt: profile.name, className: "-mt-6 ring-4 ring-card" }),
+        /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: profile.initials, alt: profile.name, className: "-mt-6 ring-4 ring-card" }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 pt-3", children: [
           /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Share profile", onClick: onShare, children: /* @__PURE__ */ jsx(Icon, { name: "share" }) }),
           /* @__PURE__ */ jsx(
@@ -1222,7 +1190,7 @@ function ProfileFormBlock({ className, framed = true, onSave }) {
         children: [
           /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
             /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
-              /* @__PURE__ */ jsx(Avatar, { size: "lg", fallback: profile2.initials, alt: profile2.name }),
+              /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: profile2.initials, alt: profile2.name }),
               /* @__PURE__ */ jsxs(Stack, { gap: 0.5, align: "start", children: [
                 /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
                   /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", children: "Upload photo" }),
@@ -1241,7 +1209,7 @@ function ProfileFormBlock({ className, framed = true, onSave }) {
               /* @__PURE__ */ jsx(SelectContent, { children: timezones.map((zone) => /* @__PURE__ */ jsx(SelectItem, { value: zone.value, children: zone.label }, zone.value)) })
             ] }) }) })
           ] }) }),
-          /* @__PURE__ */ jsx(CardFooter, { className: "justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save profile" }) })
+          /* @__PURE__ */ jsx(CardFooter, { actions: true, className: "justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save profile" }) })
         ]
       }
     )
@@ -1639,7 +1607,7 @@ function TeamMembersBlock({ className, framed = true, onInvite, onMemberAction }
     /* @__PURE__ */ jsx(CardList, { children: members.map((m) => /* @__PURE__ */ jsx(
       Entity,
       {
-        leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: m.initials, alt: m.name }),
+        leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: m.initials, alt: m.name }),
         title: m.name,
         subtitle: m.email,
         action: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -1697,7 +1665,7 @@ function TestimonialBlock({ className }) {
         ] })
       ] }),
       /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(Avatar, { size: "lg", fallback: story.initials, alt: story.name }),
+        /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: story.initials, alt: story.name }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "text-title-sm", children: story.name }),
           /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: story.role })