@cueplusplus/ui 0.14.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,420 @@
 # @cueplusplus/ui
 
+## 0.16.0
+
+### Minor Changes
+
+- 42021e4: Every overlay draws its shadow from a composite a look pack can move.
+
+  Dialogs, menus, popovers, tooltips, toasts, drawers, sheets, the command palette, the
+  select and combobox popups and the log viewer's jump button all drew
+  `shadow-[0_8px_24px_rgba(0,0,0,0.4)]` — the same literal in four places. They now share
+  one four-layer recipe: a hairline, a contact shadow, a bloom and an inset top light.
+
+  **Nothing looks different.** At the defaults three of the four layers are transparent and
+  the bloom is that exact literal. Measured rather than asserted: in Chromium the recipe and
+  the literal render byte for byte; in WebKit 42 channels of roughly 264,000 differ by 1/255,
+  which is compositing rounding and below what a display can show.
+
+  What it buys is that `--cue-paint-shadow-scale` moves the whole ladder at once and any
+  layer switches off by letting its ink resolve to `transparent` — so a pack can give every
+  floating surface a deeper shadow, a tighter one, or a lit top edge, without touching a
+  component.
+
+  Overlays also adopt the gradient stroke deferred from the previous release, and keep their
+  own rim colour while doing it: the recipe's stops fall back to `--cue-border-overlay`, not
+  `--cue-border`, because some themes match that token to the surface on purpose so the rim
+  vanishes.
+
+  `AppWindowFrame` keeps its literal shadow. Its bloom is twice as dark as every other
+  surface's, and giving it the shared recipe would have lightened it.
+
+- 6e2fd3b: Every edge fade in the library follows one token.
+
+  `Tabs`, `Toolbar`, `SegmentedControl`, `ScrollableTabsList` and `AppBar` soften their
+  overflowing edges with a mask that reached in a fixed 24px. That distance is
+  `--cue-paint-fade-length` now, so a `[data-paint]` pack can make every one of them
+  shorter or longer at once.
+
+  **Nothing looks different.** The token's default is the same 24px, measured pixel for
+  pixel in Chromium and WebKit — with a 64px override in the same test, so the comparison
+  is one that could have failed.
+
+  `edgeFadeMask(edges, fadePx)` is unchanged when you pass a reach of your own: an explicit
+  number still wins, because a caller that has measured its own fade is not asking for the
+  axis's.
+
+- 40c9de0: `AppBar`'s frosted glass is a look pack's to change, and a consumer's backdrop utilities still work.
+
+  The bar drew `bg-surface-1/95 backdrop-blur`. It now spends `--cue-paint-glass-filter` and
+  `--cue-paint-glass-ink`, so a `[data-paint]` pack can make the chrome heavier, clearer, or
+  tinted — or turn the blur off entirely — without touching the component.
+
+  **Nothing looks different**, measured pixel for pixel against what the bar drew before, in
+  Chromium and WebKit, over a hard-edged background so the blur has something to smear.
+
+  **And `className` still composes.** This is the part worth knowing if you style `AppBar`
+  from outside: passing `backdrop-brightness-50` or `backdrop-saturate-150` through
+  `className` adds to the bar's blur rather than replacing it. The obvious implementation —
+  a plain `backdrop-filter` declaration — would have silently deleted the blur the moment you
+  passed any backdrop utility of your own. That case is now a test.
+
+  The opaque fallback behind `@supports not (backdrop-filter: …)` is unchanged: a browser
+  without backdrop filters still gets a solid bar rather than a translucent one over the page.
+
+- e53619a: The first look pack: `halo`, and the glow it paints.
+
+  `<ThemeProvider paint="halo">` — or `data-paint="halo"` on any element — gives primary
+  buttons a soft two-stop glow in the theme's own accent, doubling on hover. It is the first
+  value the paint axis has other than `none`, so it is also the first time the axis changes
+  what a page looks like rather than only standing ready to.
+
+  **Nothing changes unless you ask.** Unstamped, both stops have zero blur and a transparent
+  ink, so the button renders exactly as it did — measured pixel for pixel in Chromium and
+  WebKit, alongside the other half of the same test: that stamping `halo` does change it.
+
+  A pack names no colour of its own. `halo`'s two inks are a share of `--cue-accent`, so it
+  reads correctly under all ten shipped themes rather than carrying one palette's blue into
+  the others.
+
+  Two fixes ride along. `--cue-paint-glow-blur` and `-blur-far` were validated against the
+  rim's 0–4px rule, so no usable halo radius was accepted — the first pack to set one was
+  refused at 12px. They take 0–64px now. And `Button`'s `primary` tone is the only component
+  that spends the glow; every other tone is untouched.
+
+- 3d0c3fd: A seventh look pack: `grain`, a fine fractal noise over every surface.
+
+  `<ThemeProvider paint="grain">`, or `<Density paint="grain">` over a subtree, lays a
+  200×200 fractal-noise tile across the surfaces that carry the texture recipe. It is the
+  quietest pack in the catalogue by design — 12% opacity, no blend mode — and it is the
+  only one that spends `--cue-paint-texture`, a name the library has carried since the
+  texture slice with nothing able to use it.
+
+  Measured from greptile.com, whose ground is an `feTurbulence fractalNoise` data URI at
+  0.85 baseFrequency over five octaves, composited at roughly 12% effective opacity across
+  every pixel of the site. The tile here is that filter at those parameters, generated
+  rather than copied: it is 331 bytes of SVG inline in the pack, so nothing is fetched and
+  no asset ships.
+
+  **It is deliberately below the bar.** Every other pack clears the threshold this system
+  sets for shipping one; `grain` reaches about 62% of its site and ships anyway, as the
+  proof that a pack is worth having for what it refuses as much as for what it paints. Its
+  `refuses` note names the four of six screens it cannot claim, the twelve divider forms
+  and the band-frame furniture that belong to components rather than to a finish, the
+  hexagon control silhouette, and the handwriting type stack.
+
+  Nothing changes for a page that does not ask for it: `grain` is opt-in like every pack,
+  and the provider still stamps no `data-paint` at all.
+
+- 4d851a0: `Panel` and `Card` can take an inset ring, and a `Band`'s ground can take a repeating pattern.
+
+  Two more devices reach the paint axis, which means every one of its thirty-one names is now
+  spent by something: `--cue-paint-rim-width` and `-rim-ink` draw a hairline ring inside a
+  panel's or a card's radius, and `--cue-paint-ground-pattern` with `-size` lays a repeating
+  geometry under a band's content.
+
+  **Nothing changes unless you ask.** The ring's width is `0px` and its ink is transparent;
+  the pattern is `none`. Measured pixel for pixel in Chromium and WebKit, with both devices
+  switched on in the same tests so the comparisons are ones that could have failed.
+
+  The ring is a `box-shadow`, so a `Band` or a `Card` that already draws one cannot take it —
+  and **form controls deliberately do not**. `forced-colors: active` discards shadows
+  entirely, and a control's ring is a focus indicator: it stays a real outline, which is what
+  a forced-colors user actually sees.
+
+  A pattern and a texture are different layers and compose: a pattern is the host's own
+  background image, a texture is noise on a pseudo-element above it.
+
+- 5fcc6b4: Form controls and cards draw their border as a gradient stroke, so a look pack can tint it.
+
+  `Input`, `Textarea`, `Select`, `Combobox`, `Autocomplete`, `SearchInput`, `OTPField`,
+  `InputGroup`, the date and colour fields, `MusicalTimeInput` and the rest of the recessed
+  control family — and `Card` — now paint their line from two background layers with a
+  transparent border between them, rather than from `border border-border`.
+
+  **Nothing looks different.** At the defaults both gradient stops are `--cue-border` and a
+  one-colour gradient paints a flat field, so the line is the same one device-pixel of the
+  same colour over the same fill. That is measured rather than asserted: the straight edges
+  and the interior are pixel-identical in Chromium and WebKit, and with square corners the
+  two are identical everywhere. On a rounded corner they differ by sub-pixel antialiasing —
+  invisible at 1×, and bounded by the test rather than claimed away.
+
+  What it buys is that `--cue-paint-stroke-from`, `-to`, `-angle` and `-width` now reach
+  every one of those surfaces, so a `[data-paint]` pack can give the whole family a gradient
+  edge, a thicker rule or a different angle without touching a component.
+
+  A seamed `Card` keeps its old border: its fill is `--cue-border` — the gaps between its
+  rows _are_ the line — and the recipe is keyed by fill.
+
+  `Toggle` and `ToggleGroup` also lose ten custom properties from their published manifests.
+  They never painted them: the entries came from a type-only import of the control chassis,
+  and the manifest lists what a component spends. `--cue-sunken`, `--cue-focus` and
+  `--cue-border` were among them, so this was wrong before the gradient stroke existed.
+
+- bcd0738: A `Band`'s ground can carry a grain or pattern overlay.
+
+  `<Band separation="ground">` now spends `--cue-paint-texture`, `-texture-size`,
+  `-texture-opacity` and `-texture-blend`, so a `[data-paint]` pack can lay a noise tile or
+  a repeating pattern over the band's ground without touching the component.
+
+  **Nothing changes unless you ask.** At the defaults `texture` is `none` and the overlay
+  paints nothing — measured against the same band with _no_ overlay element at all, which is
+  the comparison that matters, since the change adds a `::before` where there was none.
+
+  The overlay is `pointer-events-none` and covers its host exactly, so it never intercepts a
+  click or disturbs the band's own background.
+
+  `--cue-paint-texture` takes a `data:` URI or an absolute `https://` URL and nothing else —
+  the token layer ships no binary, and the build says so by name if you try something else.
+
+### Patch Changes
+
+- ac712b3: `ThemeProvider`'s `nonce` now documents what it does not reach, which matters more than what it does.
+
+  Nothing about the prop's behaviour changes. What changes is that its documentation — the prop's
+  own docblock, and so the manifest an agent reads — stops promising coverage it never had. If you
+  serve a nonce-based Content-Security-Policy, five things are worth checking:
+
+  - **Your pre-paint `<script>` needs the nonce by hand.** `prepaintScript()` returns the script's
+    text; the element is yours, and Next.js never nonces a plain `<script>`.
+  - **The density layer reads the nonce from this prop only.** Not from an outer `CSPProvider`, and
+    not from an outer `ThemeProvider` — a nested provider that sets its own `overrides.densities`
+    needs its own `nonce`. If you render your own `CSPProvider` and leave this prop unset, Base UI's
+    pre-hydration `<script>` takes its nonce in server-rendered HTML and its scrollbar rule takes it
+    wherever React creates that rule in the browser; the density layer, if you set
+    `overrides.densities`, is not covered.
+  - **A server-rendered ScrollArea's Base UI style ships without a nonce under Next.js 16**, whatever
+    this prop or your own `CSPProvider` says: React's server renderer (19.2, and the canary Next.js 16
+    bundles) writes that element's nonce only from a style-specific render option that Next does not
+    pass. Allow it by hash —
+    `'sha256-kLmvWqfziFavKtqHqRsb90f006UAK2Dmd0It5Iz2KFA='` for Base UI 1.7.0 — or switch Base UI's
+    element off and ship its two rules yourself.
+  - **Re-rendering your own `CSPProvider` inside needs the nonce on it.** If you turn on Base UI's
+    `disableStyleElements`, render `<CSPProvider nonce={nonce} disableStyleElements>` inside
+    `ThemeProvider`'s children — with the nonce, or Base UI's pre-hydration `<script>` below it loses
+    it.
+  - **A policy whose `style-src` (or, without one, `default-src`) carries a nonce or a hash, or lacks
+    `'unsafe-inline'`, needs an explicit `style-src-attr 'unsafe-inline'`.** A nonce cannot cover a
+    style attribute, the provider root and many components carry one, and a nonce or hash in the
+    governing list makes the browser ignore `'unsafe-inline'`.
+
+  This also corrects three earlier notes. 0.14.1 said Base UI's element appears wherever a Select, a
+  Popover or a ScrollArea does: a Popover never renders it, and a Select renders it only once its popup
+  mounts in the browser. 0.14.0 said nothing else in this library emits a `<style>` element:
+  `ThemeConfigurator` does, with no nonce. And 0.14.0 said `style-src-attr` is `'unsafe-inline'` or
+  `'none'` and that only `'none'` drops the root's declarations: a nonce in `style-src` drops them too
+  when no `style-src-attr` is set, and `'unsafe-hashes'` with a hash of each value is a third form. `docs/CONSUMING.md` §4.5 has the whole of it, including
+  `paint="grain"` needing `img-src data:`, statically rendered pages, and rolling out under
+  `Content-Security-Policy-Report-Only` first.
+
+- 3fc83a6: Four more look packs: `hatch`, `lift`, `frost` and `bevel`.
+
+  `<ThemeProvider paint="frost">` — or `data-paint` on any element — now picks from six
+  finishes rather than two:
+
+  - **`hatch`** lays a faint diagonal weave under a band's ground and puts a hairline ring on
+    the panels and cards above it.
+  - **`lift`** deepens the shadow ladder and adds a lit top edge, so overlays read as sitting
+    above the page rather than in it.
+  - **`frost`** is heavy glass on the chrome, a long edge fade, and a shadow that reads as
+    distance.
+  - **`bevel`** gives surfaces a gradient edge that catches light at the top and loses it at
+    the bottom, with a lighter glass over the chrome.
+
+  **No pack names a colour of its own.** Every ink is a share of the theme's own palette, so
+  each of the six reads correctly under all ten shipped themes rather than carrying one
+  site's blue into the others — and the build refuses a literal hue by name if one is ever
+  written.
+
+  Each pack is a complete statement of a finish rather than a diff against whatever is above
+  it, so switching between them — or nesting one inside another — changes only what the pack
+  is for. `paint="none"` inside a packed subtree really does reset it, and still renders
+  identically to no pack at all.
+
+  `@cueplusplus/ui`'s manifest records the four new pack values against the three components that stamp the axis, which is how the studio and the docs playground know to offer them.
+
+- f12d280: The READMEs now describe the package you install, not the one from three releases ago.
+
+  `@cueplusplus/tokens`'s README opened by calling itself "two of the system's three DOM axes" and
+  called `axes.css` "the two axes". It is four of five — density, font, style set and paint live
+  here, and the fifth, `[data-theme]`, is the theme packages' — so its axis table gains `[data-style]`
+  (page composition, 13 names) and `[data-paint]` (the finish, 18 names and 13 inks, off until a page
+  stamps it), its export table names `STYLE_SETS`, `PAINTS`, the style and paint contracts and the
+  paint inks beside the rest, and its quick start says the rule that applies to `DENSITIES` applies
+  to all four: build a picker from the exported list, never a hand-written one.
+
+  `@cueplusplus/ui`'s quick start now says what the provider's four axes each change, that `paint` is
+  off until you pass a pack, and where the seven packs and a nonce-based Content-Security-Policy are
+  written up — including that `paint="grain"` needs `img-src data:`. It also says which axes a
+  subtree can change: `<Density>` re-scopes `density`, `styleSet` and `paint`, and the font pairing is
+  the root's alone, because it lives on `<html>`.
+
+- Updated dependencies [e53619a]
+- Updated dependencies [840aa92]
+- Updated dependencies [4eb3b42]
+- Updated dependencies [3fc83a6]
+- Updated dependencies [3d0c3fd]
+- Updated dependencies [0371094]
+- Updated dependencies [f12d280]
+  - @cueplusplus/tokens@0.16.0
+
+## 0.15.0
+
+### Minor Changes
+
+- 5493c5a: A style set can now say what colour the line between two bands is.
+
+  `band-rule` was only ever its WIDTH. The colour was the literal string
+  `border-border`, spelled twice — once in `SEPARATION_PAINT` and once in
+  `Footer`'s own class list — so a set could say how thick the rule is and had no
+  way to say what it was made of.
+
+  `--cue-band-rule-color` joins the style-set contract, which becomes six required
+  names. It takes `var(--cue-border)`, `var(--cue-border-subtle)`,
+  `var(--cue-border-strong)` or `transparent` — structural inks only, because a
+  brand colour on a structural line belongs to a different axis. The `:root`
+  default and all three shipped sets declare `var(--cue-border)`, which is
+  byte-for-byte what both call sites drew before, so this is a no-op until a set
+  spends it.
+
+  Measured across thirteen reference sites on 2026-09-22: every one that separates
+  bands by a line picks a line lighter than its box edge. `--cue-border` is a box
+  edge, and repeating a box edge between sections is what `--cue-border-subtle`'s
+  own docblock argues against one layer down. Until now no axis could express the
+  difference.
+
+- c6e26c0: `Density`, `Preview` and portals carry the paint axis
+
+  `<Density paint>` and `<Preview paint>` stamp `data-paint` on their subtree, and
+  a portal opened inside either follows it — the same three-publisher arrangement
+  the style axis already has, for the same reason: a portal mounts on `<body>` and
+  inherits nothing from the DOM it was written in, so it has to be told.
+
+  ```tsx
+  <Density density="compact" paint="none">
+    <Toolbar />
+  </Density>
+
+  <Preview paint="none">
+    <Card>…</Card>
+  </Preview>
+  ```
+
+  **Absent means inherit, and `none` is a value rather than an absence.** An island
+  that names no pack stamps no attribute and passes the ambient pack straight
+  through; `none` restates the `:root` defaults, which is what a subtree stamps to
+  opt _out_ of a pack its parent set. Collapsing the two would make every unpainted
+  subtree override its parent instead of inheriting from it.
+
+  New: `PaintContext`, and a `paint` prop on `DensityProps` and `PreviewProps`.
+  `CuePortalStamp` gains a `paint` field.
+
+  The provider half — a `paint` prop on `<ThemeProvider>`, persistence, and the
+  blocking prepaint script — is not here. This is the island path, which works on
+  its own: a subtree can re-scope the axis without a provider, exactly as
+  `<Density styleSet>` does.
+
+- e7a2405: `ThemeProvider` carries the paint axis, and persists it
+
+  `<ThemeProvider paint>` stamps `data-paint`, `useTheme()` reports it and
+  `setPaint()` switches it, and the blocking pre-paint script puts it on `<html>`
+  before the first frame — so a page restored from storage does not flash an
+  unpainted frame before React commits.
+
+  ```tsx
+  <ThemeProvider theme="cue" paint="none">
+    …
+  </ThemeProvider>;
+
+  const { paint, setPaint } = useTheme();
+  ```
+
+  **An app that never touches the axis writes the object it always wrote, byte for
+  byte.** The pack is persisted only when there is one — the rule `styleSet`
+  already follows — because a `"paint": null` in storage would be a value the
+  pre-paint script has to hold an opinion about for ever, for a preference nobody
+  expressed.
+
+  **The root never promotes an ambient pack.** `useTheme().paint` reports the pack
+  in force, but the `data-paint` stamp stays on the provider's own state, so a
+  `<Density paint>` island cannot become a document-wide attribute and from there
+  reach storage and the next load.
+
+  New: `paint` on `ThemeProviderProps` and `PrepaintDefaults`, `paint` and
+  `setPaint` on the `useTheme()` value, `isPaint()` beside `isStyleSet()`, and
+  `paint` on `PersistedPreferences`.
+
+  The skills learn the axis too: `ui-theming` documents five axes rather than four,
+  and the generated token reference carries the eighteen paint names — so an agent
+  asked to compose a page can find `--cue-paint-glow-blur` instead of spelling a
+  shadow literal by hand.
+
+- d5c4183: Letter spacing becomes a token a style set can retune.
+
+  The system had already decided this and never finished it. `leading-ui` is spent
+  63 times through a token against 2 literals. The only tracking name that existed,
+  `tracking-label`, was spent **zero** times — while 34 hard-coded `tracking-[…]`
+  literals sat across 27 chassis files at six distinct values.
+
+  Three names join the style-set contract, at the values those literals already
+  held: `tracking-caps` (0.15em, 23 call sites), `tracking-caps-tight` (0.1em, 5)
+  and `tracking-caps-loose` (0.2em, 1 — `Eyebrow`, the one place the system spends
+  the accent on pure typography, so a set that wants a different kicker has
+  nowhere else to say so). Two optional names join beside `style-display`:
+  `style-tracking-display` and `style-leading-display`, the latter a second name
+  rather than a widened `leading-prose` because a display register routinely sits
+  under 1 and a paragraph must not.
+
+  32 literals become token spends. Two survive deliberately: `tracking-[inherit]`
+  on `Stepper`, which is a pass-through rather than a value, and `tracking-[0.06em]`
+  on `Chip`'s tag, one call site at a value no other rung shares.
+
+  `tracking-label` stays in the frozen base and does **not** move. Its three call
+  sites now spend `--cue-tracking-label` instead of a literal, which finally makes
+  a declared-and-never-spent token do its job.
+
+  Measured across thirteen reference sites on 2026-09-22: a display tracking is
+  missing in twelve of them — more than any single paint device. Apple's curve is
+  non-monotone (-0.022em at 17px, +0.012em at 19px, 0 at 40px, -0.015em at 80px);
+  vercel wants -0.02/-0.04/-0.06em; stripe -0.025em. None of it was expressible.
+
+  Every value is unchanged. The defaults restate the literals they replace.
+
+### Patch Changes
+
+- 9c7041a: The dot screen and the app bar's glass spend paint tokens
+
+  `Preview` and `Frames`' dots ground reads `--cue-paint-screen` and
+  `--cue-paint-screen-size` instead of spelling the gradient out.
+
+  **Nothing renders differently, and that is proved in a browser rather than
+  argued.** Each token's `:root` default is the value its literal held, so a page
+  that never stamps `data-paint` computes exactly what it computed before.
+  `tests/browser/paint-noop.spec.ts` measures it on the built site: the adopted
+  utility and the literal it replaced compute the same `background-image` and
+  `background-size`, and every value is required to be non-`none` first — because two absences would satisfy an equality, and "the dots
+  stopped painting" is the regression that guards against.
+
+  A pack can now retune the finish without touching a component.
+
+  **One duplicate collapsed.** `apps/docs`' ground picker carried a hand-copied
+  second spelling of the same gradient, with a comment saying it was "the same
+  gradient `Preview`'s own `dots` ground paints" — and nothing tied the two
+  together. Both spend the token now, so they are the same value rather than the
+  same text.
+
+  **`AppBar` keeps `backdrop-blur`.** Adopting `--cue-paint-glass-filter` there was
+  tried and reverted: Tailwind composes every backdrop utility into one
+  declaration, so a raw `[backdrop-filter:var(…)]` would stop a consumer's
+  `backdrop-brightness-50` from combining with the bar's blur. The glass slice
+  owns that decision.
+
+- Updated dependencies [a20e98e]
+- Updated dependencies [5493c5a]
+- Updated dependencies [96f6f6b]
+- Updated dependencies [d5c4183]
+  - @cueplusplus/tokens@0.15.0
+
 ## 0.14.1
 
 ### Patch Changes

package/README.md

@@ -53,6 +53,32 @@ To stop the defaults flashing on first paint, add `prepaintScript()` beside the
 both the same array — [§4 of `CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#4-the-provider)
 is the whole layout.
 
+Beside `theme` and `mode`, the provider takes four axes, and each one changes a single thing:
+`density` the geometry, `font` the typeface pairing, `styleSet` the page composition, and `paint`
+the finish — rims, strokes, elevation, glow, glass, texture and edge fades. `paint` is off unless
+you ask for it: the provider stamps no `data-paint`, so a page looks exactly as it did until you
+pass one of `none`, `halo`, `hatch`, `lift`, `frost`, `bevel` or `grain`. Any subtree can take its
+own with `<Density paint="frost">` — the same island that re-scopes `density` and `styleSet`. The
+font pairing is the one axis a subtree cannot change: it lives on `<html>`, so it is the root's.
+
+```tsx
+import cue from "@cueplusplus/theme-cue";
+import { ThemeProvider } from "@cueplusplus/ui/system";
+
+export function App({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider themes={[cue]} theme="cue" density="compact" mode="system" paint="halo">
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+The seven packs, where each was measured from and what each refuses:
+<https://ui.cueplusplus.com/docs/paint>. Serving a nonce-based Content-Security-Policy? Read
+[§4.5 of `CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#45-content-security-policy-the-nonce-prop-and-what-it-does-not-reach)
+before you ship it — `paint="grain"` alone needs `img-src data:`.
+
 ## What it ships
 
 Common components come from the root entry. Groups that need an optional peer have a subpath of

package/dist/agent-runtime/tool-call-card.js

@@ -25,7 +25,7 @@ const DANGER_TONES = {
 */
 const HEADER = "flex min-w-0 items-center gap-(--cue-space-2) border-0 bg-transparent p-0 text-start font-mono text-(length:--cue-text-ui) text-fg-muted outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent";
 /** The label over a block in the body, in the same eyebrow as a message header. */
-const EYEBROW = "font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase text-fg-subtle";
+const EYEBROW = "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase text-fg-subtle";
 /**
 * An LLM's own tool call, shown while it runs and after.
 *

package/dist/chat/message-list.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { ChevronDownGlyph } from "./_glyphs.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/message-list.tsx
@@ -131,7 +132,7 @@ const MessageList = React.forwardRef(function MessageList({ className, children,
 		}), behind ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-slot": "message-list-jump",
-			className: "absolute bottom-(--cue-space-4) left-1/2 flex -translate-x-1/2 cursor-pointer items-center gap-(--cue-space-2) rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+			className: `absolute bottom-(--cue-space-4) left-1/2 flex -translate-x-1/2 cursor-pointer items-center gap-(--cue-space-2) rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg ${ELEVATION_2} outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent`,
 			onClick: jumpToLatest,
 			children: [/* @__PURE__ */ jsx(ChevronDownGlyph, { className: "size-icon-sm" }), jumpLabel]
 		}) : null]

package/dist/chat/message.js

@@ -72,7 +72,7 @@ const Message = React.forwardRef(function Message({ className, role = "agent", a
 		children: [
 			hasHeader ? /* @__PURE__ */ jsxs("div", {
 				"data-slot": "message-header",
-				className: "flex min-w-0 items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase",
+				className: "flex min-w-0 items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase",
 				children: [name === void 0 ? null : /* @__PURE__ */ jsx("span", {
 					"data-slot": "message-author",
 					className: cn("min-w-0 truncate", role === "user" ? "text-accent-fg opacity-70" : "text-(--agent-color)"),

package/dist/chrome/_tabs-scroll.d.ts

@@ -56,8 +56,24 @@ declare function computeScrollEdges(scrollLeft: number, scrollWidth: number, cli
  * overflowing edge is often the gap between two tabs, and fading empty space is
  * invisible — hence the chevron buttons in the component.
  *
+ * **The default reach is a custom property, not a number**, so a look pack can
+ * lengthen or shorten every edge fade in the library at once. It is written as
+ * `var(--cue-paint-fade-length,24px)` with the fallback spelled out, because an
+ * ink or a paint name is declared with a `:root` default here but the mask is
+ * also built by this function in isolation — a test calling it with no DOM
+ * would otherwise produce a gradient with an unresolvable stop.
+ *
+ * `--cue-paint-fade-length` is `24px` at `:root` and {@link TAB_FADE_PX} is 24,
+ * so the swap renders identically: measured pixel for pixel in Chromium and
+ * WebKit, with a 64px pack changing 15,360 channels to prove the probe could
+ * see a difference.
+ *
+ * An explicit `fadePx` still wins, and stays a plain number: a caller that has
+ * measured its own reach is not asking for the axis's.
+ *
  * @param edges Which edges overflow, from {@link computeScrollEdges}.
- * @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+ * @param fadePx How far the fade reaches in. Omitted, it follows
+ * `--cue-paint-fade-length`, whose own default is {@link TAB_FADE_PX}.
  * @returns A `linear-gradient(...)` value, or `undefined` when nothing
  * overflows — no mask property at all, rather than a fully opaque one, so the
  * common case creates no compositing layer.

package/dist/chrome/_tabs-scroll.js

@@ -59,15 +59,32 @@ function computeScrollEdges(scrollLeft, scrollWidth, clientWidth) {
 * overflowing edge is often the gap between two tabs, and fading empty space is
 * invisible — hence the chevron buttons in the component.
 *
+* **The default reach is a custom property, not a number**, so a look pack can
+* lengthen or shorten every edge fade in the library at once. It is written as
+* `var(--cue-paint-fade-length,24px)` with the fallback spelled out, because an
+* ink or a paint name is declared with a `:root` default here but the mask is
+* also built by this function in isolation — a test calling it with no DOM
+* would otherwise produce a gradient with an unresolvable stop.
+*
+* `--cue-paint-fade-length` is `24px` at `:root` and {@link TAB_FADE_PX} is 24,
+* so the swap renders identically: measured pixel for pixel in Chromium and
+* WebKit, with a 64px pack changing 15,360 channels to prove the probe could
+* see a difference.
+*
+* An explicit `fadePx` still wins, and stays a plain number: a caller that has
+* measured its own reach is not asking for the axis's.
+*
 * @param edges Which edges overflow, from {@link computeScrollEdges}.
-* @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+* @param fadePx How far the fade reaches in. Omitted, it follows
+* `--cue-paint-fade-length`, whose own default is {@link TAB_FADE_PX}.
 * @returns A `linear-gradient(...)` value, or `undefined` when nothing
 * overflows — no mask property at all, rather than a fully opaque one, so the
 * common case creates no compositing layer.
 */
-function edgeFadeMask(edges, fadePx = 24) {
+function edgeFadeMask(edges, fadePx) {
 	if (!edges.start && !edges.end) return void 0;
-	return `linear-gradient(to right, ${edges.start ? `transparent 0px, black ${fadePx}px` : "black 0px"}, ${edges.end ? `black calc(100% - ${fadePx}px), transparent 100%` : "black 100%"})`;
+	const reach = fadePx === void 0 ? `var(--cue-paint-fade-length,24px)` : `${fadePx}px`;
+	return `linear-gradient(to right, ${edges.start ? `transparent 0px, black ${reach}` : "black 0px"}, ${edges.end ? `black calc(100% - ${reach}), transparent 100%` : "black 100%"})`;
 }
 //#endregion
 export { TAB_FADE_PX, computeScrollEdges, edgeFadeMask };

package/dist/chrome/app-bar.js

@@ -2,6 +2,7 @@ import { cn } from "../lib/cn.js";
 import { Link } from "../layout/link.js";
 import { Separator } from "../primitives/separator.js";
 import { EdgeScrollNav } from "./_edge-scroller.js";
+import { GLASS_CLASSES } from "../system/_paint-glass.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/app-bar.tsx
@@ -53,7 +54,7 @@ const AppBarRoot = React.forwardRef(function AppBarRoot({ className, sticky = tr
 	return /* @__PURE__ */ jsx("header", {
 		ref,
 		"data-slot": "app-bar",
-		className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-4) border-b border-border bg-surface-1/95 px-(--cue-space-5) backdrop-blur", sticky ? "sticky top-0 z-40" : null, className),
+		className: cn(`flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-4) border-b border-border px-(--cue-space-5) ${GLASS_CLASSES}`, sticky ? "sticky top-0 z-40" : null, className),
 		...elementProps
 	});
 });

package/dist/chrome/band.js

@@ -1,6 +1,8 @@
 import { cn } from "../lib/cn.js";
 import { Container } from "../layout/container.js";
 import { bandClasses } from "./_band.js";
+import { TEXTURE_CLASSES } from "../system/_paint-texture.js";
+import { GROUND_PATTERN_CLASSES } from "../system/_paint-ground-pattern.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/band.tsx
@@ -16,13 +18,19 @@ import { jsx } from "react/jsx-runtime";
 * the argument.
 *
 * `rule`'s entry is the colour and not the width: the width is
-* `--cue-band-rule` and belongs to the chassis, and both elements name
-* `border-border` in their own class list rather than inheriting it from the
-* other.
+* `--cue-band-rule` and belongs to the chassis, and both elements name the ink
+* in their own class list rather than inheriting it from the other.
+*
+* That ink is now a token. It was the literal `border-border`, spelled here and
+* again in `Footer`, which meant a style set could say how THICK the line
+* between two bands is and had no way to say what colour it was — and every
+* site measured in the 2026-09-22 corpus that separates bands by a line picks
+* one lighter than its box edge. `--cue-band-rule-color` defaults to
+* `var(--cue-border)` on `:root`, which is byte-for-byte what this drew before.
 */
 const SEPARATION_PAINT = {
-	rule: "border-border",
-	ground: "bg-(--cue-band-ground)",
+	rule: "border-(--cue-band-rule-color)",
+	ground: `bg-(--cue-band-ground) ${GROUND_PATTERN_CLASSES} ${TEXTURE_CLASSES}`,
 	bleed: null,
 	none: null
 };

package/dist/chrome/eyebrow.js

@@ -22,7 +22,7 @@ const Eyebrow = React.forwardRef(function Eyebrow({ className, slashes = true, c
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		"data-slot": "eyebrow",
-		className: cn("inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-[0.2em] text-accent uppercase", className),
+		className: cn("inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-loose) text-accent uppercase", className),
 		...elementProps,
 		children: [slashes ? /* @__PURE__ */ jsx("span", {
 			"data-slot": "eyebrow-glyph",

package/dist/chrome/footer.js

@@ -66,7 +66,7 @@ const Footer = React.forwardRef(function Footer({ className, columnClassName, wi
 		ref,
 		"data-slot": "footer",
 		"data-separation": "rule",
-		className: cn(bandClasses("rule"), "border-border", className),
+		className: cn(bandClasses("rule"), "border-(--cue-band-rule-color)", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsxs(Container, {
 			width,

package/dist/chrome/panel.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { RIM_INSET } from "../system/_paint-rim.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/panel.tsx
@@ -28,7 +29,7 @@ const Panel = React.forwardRef(function Panel({ className, ...elementProps }, re
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "panel",
-		className: cn("overflow-hidden rounded-(--radius-surface) border border-border bg-surface-1", className),
+		className: cn(`overflow-hidden rounded-(--radius-surface) border border-border bg-surface-1 ${RIM_INSET}`, className),
 		...elementProps
 	});
 });