@cueplusplus/ui 0.18.2 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @cueplusplus/ui
 
+## 0.19.0
+
+### Minor Changes
+
+- 8cf9ebb: Five page blocks join `chrome` — `Hero`, `StatBand`, `LogoStrip`, `AnnouncementBar` and `Keyword` — and four motifs join `brand` behind one `Motif`: `Ribbon`, `Halftone`, `GlossObject` and `ParticleMark`. A style set chooses a hero's arrangement, a stat band's rule and numeral ink, a keyword's fill and which motif shows, through new optional tokens that fall back to today's rendering while unset; `AppBar.Nav`, `Sidebar` and `Stat` read the same set for their alignment, numbered rail and numeral ink. `StillProvider` and `useStill` hold a subtree's animation still, and `ParticleMark` draws nothing while hidden, off screen, in a background tab, held still or under reduced motion. `Hero surface="inverse"` draws a dark card on any page, and `axes.css` restates each set's and pack's inks on `[data-cue-rescope]` so the card is right before it hydrates. `Hero` takes a `level` (1 by default) for a hero that opens a section or sits in a preview under a page's own heading, `AnnouncementBar`'s link is the exported `AnnouncementBarAction` type, and `StillProvider`'s `children` are optional, as `ThemeProvider`'s are. The package manifest now lists a numeric union's members in ascending order — `Grid`'s `cols` reads 1 to 6 — rather than in the order the type checker happened to create them.
+- 1f539dc: The five measured style sets — `graphite`, `tender`, `zine`, `kiln` and `porcelain` — now carry their sources' page structure, not only their voices, re-measured on 2026-10-03:
+
+  - **`graphite`:** column rules at the content's edges, and a one-column hero centred over a soft info-ink glow, with its title at its own 56px size. The nav's links sit beside the brand.
+  - **`tender`:** column rules, and an editorial hero: the words left, the ribbon right, and a muted second title line. The links sit beside the brand.
+  - **`zine`:** filled calls to action cut with a chevron, dashed frame lines round the content over a 24px dotted ground, and a two-column hero with the halftone right. The nav is centred, and a focused field's ring sits 1px outside its edge, as its buttons' already does.
+  - **`kiln`:** a centred one-column hero with its media below. The links sit beside the brand.
+  - **`porcelain`:** column rules, and a one-column hero aligned to the start.
+
+  A set that does not declare these names draws as before. None of the five sets authors a corner, because each source's measured corners are already its theme's density ladder, which keeps scaling them.
+
+  **`Hero`'s title now speaks in the display voice.** It reads the set's display rung (face, size, weight, tracking and leading), falling back name by name to the page title's voice, so a set with no display rung draws the hero it drew before. One new optional name, `style-hero-title-size`, sits in front of the size, for a source whose hero is larger than its section headings.
+
+  **Two shipped sets change on purpose.** `editorial` and `marketing` declare a display size and no page-title size, so their heroes now grow to their display rung:
+
+  | set         | at scale 1 | at a 1.15 scale |
+  | ----------- | ---------- | --------------- |
+  | `editorial` | 22 → 52px  | 25.3 → 59.8px   |
+  | `marketing` | 22 → 64px  | 25.3 → 73.6px   |
+
+- 27887a6: Style sets may now shape controls and surfaces, cut filled buttons into chevrons, and draw page and band grounds and frame or grid lines, each falling back to today's rendering while unset. Glows and the shadows some packs draw in the foreground ink now scale by a per-palette glow gain — 1 in light, 0.35 in dark — so packs no longer glow in dark mode; every theme regenerates with the gain. The chevron cut is two stylesheet classes, `cue-cut` and `cue-cut-secondary`, shipped in `styles.css`.
+- aa3056c: `FontScope` sets a subtree in another type pairing and carries it to every dialog and menu opened inside it, without moving the root's pairing: a `ThemeProvider`'s `font` stays root-level. A portal opened under a scope that names a pairing, `FontScope` or a `Preview` stage, now asks for the family again, so its unclassed text follows the pairing rather than the family `<body>` computed. Every component that schedules its own frames, `ChannelMatrix`, `DmxStrip`, `AnimatedNumber`, `Replay`, `TerminalFrame` and `ScrollAnchor`, now takes its static path under `StillProvider still` as it does under reduced motion.
+- b09a663: Four style sets — `ledger`, `command`, `monolith` and `prism` — and a thirteenth font pairing, `fraunces-mono`. Each set carries a whole page structure, not only a voice: its controls' and cards' shape (pills, 8px, squares, 24px glass), a page or band ground drawn from the theme's own inks, the hero's columns, alignment and art, the stat band's rule and numerals, the navigation's alignment, and which motif shows. `fraunces-mono` sets everything in JetBrains Mono and routes a set's display rung to Fraunces, a variable serif.
+
+  Three style names are new, each optional and falling back to what an unset page renders: `style-display-case` uppercases a page title or a hero's title; `style-primary-fill` paints a primary button's resting fill with a gradient of the theme's own inks, which gives way to the solid hover fill under the pointer and to the disabled fill when disabled; and a set whose `style-hero-title-ink-2` names the keyword fill now has `Hero`'s second title line painted with that gradient through `background-clip: text`, with the accent as the colour a browser that cannot clip — or forced colours — keeps. Before this, the keyword fill there was an invalid colour and the line fell back to the inherited ink.
+
+  `<Motif>` takes no room under a set that shows no motif: the build derives `style-motif-shown` from the four motif names, and the container's own display reads it. A stage that turns a motif on with an inline variable sets `--cue-style-motif-shown: block` beside it. `ParticleMark` fits its word to the canvas's width as well as its height, so a long word or a wide monospace face is no longer cut at the edges.
+
+  The four new sets rule their links in `currentColor`, as every measured set does, so an in-copy link keeps a visible underline in its own ink. `@cueplusplus/theme-base`'s manifest schema knows `fraunces-mono` as a base pairing: a theme may retune it under `fontPairings.overrides`, and may not add a pairing of that name.
+
+- 439a832: Phase 5 measured the structural Looks on twelve new reference pages, on rendered pixels. Every fix below was made where the problem came from, not on a page.
+
+  **Status chips clear 4.5:1 in every theme.** A toned chip used to set its status ink as small text on its own 10% tint, which measured 4.2–4.4:1 in light under most themes and 3.6:1 under Kiln. The ink is now the tone mixed 30% toward `fg`. That raises it in both modes and keeps the hue the tone is read by.
+
+  **Labels fall back to `fg-muted`, not `fg-subtle`.** A label names what sits beside it, so it is held to 4.5:1 like body text. Ten readers used to fall back to `fg-subtle` when no style set gave a label ink: `Stat`'s label, a table head and group row, a `Sidebar` section label, a menu or command palette group label, the labels of `CodeBlock`, `TerminalFrame` and `Frames`, and `Footer`'s meta row. Under the default theme that ink is 2.4:1 in dark and 3.1:1 in light. They now read `fg-muted`, so they are brighter wherever no set declares `--cue-style-label-ink`. A set that declares it is unchanged, and `console` still renders exactly what no set renders.
+
+  **`LogoStrip` follows the set's label ink.** Its caption used to hard-code `fg-subtle`, and its names `fg-muted`.
+
+  **`Grid` with `minItemWidth` no longer overflows a narrower column.** The track's minimum is capped at the grid's own width, so a 22rem minimum on a 390px phone draws one full-width column. It used to draw one that ran 2px past its container. Wide layouts are unchanged.
+
+  **The structural sets declare inks their fallbacks failed with:**
+  - `zine`, `ledger`, `command` and `monolith` take `fg-muted` for labels, and `prism` takes `fg`.
+  - `prism`, `command` and `tender` mix the accent 40% toward `fg` for a selected row, a pressed segment and (prism, command) an eyebrow.
+  - `prism`'s icy band tints a quarter of its busy ink at its foot, where it used to tint half.
+
+  **`command`'s rhythm is measured.** Its source stacks its panels 10–13px apart, so its `band-y` is a fifth of `space-7`. The unmeasured clamp it replaces drew bands 64px apart.
+
+### Patch Changes
+
+- Updated dependencies [8cf9ebb]
+- Updated dependencies [1f539dc]
+- Updated dependencies [27887a6]
+- Updated dependencies [b09a663]
+- Updated dependencies [439a832]
+  - @cueplusplus/tokens@0.19.0
+  - @cueplusplus/theme-base@1.2.0
+
 ## 0.18.2
 
 ### Patch Changes

package/dist/brand/_motif-seed.js

@@ -0,0 +1,20 @@
+//#region src/brand/_motif-seed.ts
+/**
+* A seeded random stream (mulberry32): the same seed draws the same picture on the
+* server and in the browser, which is what keeps a motif's markup identical across
+* hydration (spec 2026-10-02 §3.4).
+*/
+function seeded(seed) {
+	let a = seed >>> 0;
+	return () => {
+		a = a + 1831565813 >>> 0;
+		let t = a;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+/** A number rounded to two decimals, so path data stays short and stable. */
+const r2 = (n) => Math.round(n * 100) / 100;
+//#endregion
+export { r2, seeded };

package/dist/brand/gloss-object.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/brand/gloss-object.d.ts
+interface GlossObjectProps extends React.SVGProps<SVGSVGElement> {
+  /** The object: a ring, a knot of two rings, or a rounded mark. Defaults to `"torus"`. */
+  shape?: "torus" | "knot" | "mark";
+  /** Tilts the highlight. Defaults to `1`. */
+  seed?: number;
+}
+/**
+ * A glossy, iridescent object for a marketing hero — the chrome-ring and gloss
+ * lettermark look (spec 2026-10-02 §3.4). Drawn with layered radial and linear
+ * gradients of the theme's accent against the foreground's mix, plus a specular
+ * highlight in the accent's own ink (`--cue-accent-fg`), so it is the Look's own colour and never a copied render.
+ * Decorative: hidden from assistive technology.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <GlossObject shape="knot" className="h-48 w-48" />
+ */
+declare function GlossObject({ shape, seed, ...svgProps }: GlossObjectProps): React.JSX.Element;
+//#endregion
+export { GlossObject, GlossObjectProps };

package/dist/brand/gloss-object.js

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/gloss-object.tsx
+/**
+* A glossy, iridescent object for a marketing hero — the chrome-ring and gloss
+* lettermark look (spec 2026-10-02 §3.4). Drawn with layered radial and linear
+* gradients of the theme's accent against the foreground's mix, plus a specular
+* highlight in the accent's own ink (`--cue-accent-fg`), so it is the Look's own colour and never a copied render.
+* Decorative: hidden from assistive technology.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <GlossObject shape="knot" className="h-48 w-48" />
+*/
+function GlossObject({ shape = "torus", seed = 1, ...svgProps }) {
+	const id = React.useId().replace(/:/gu, "");
+	const tilt = seed * 37 % 90 - 45;
+	const ring = (cx, cy, key) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: "28",
+		fill: "none",
+		stroke: `url(#${id}-body)`,
+		strokeWidth: "16"
+	}), /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: "28",
+		fill: "none",
+		stroke: `url(#${id}-sheen)`,
+		strokeWidth: "6",
+		strokeDasharray: "40 136",
+		transform: `rotate(${tilt} ${cx} ${cy})`
+	})] }, key);
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 100 100",
+		"aria-hidden": "true",
+		focusable: "false",
+		...svgProps,
+		children: [
+			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+				id: `${id}-body`,
+				x1: "0",
+				y1: "0",
+				x2: "1",
+				y2: "1",
+				children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "color-mix(in oklch, var(--cue-accent) 70%, var(--cue-accent-fg))"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "50%",
+						stopColor: "var(--cue-accent)"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "color-mix(in oklch, var(--cue-accent) 55%, var(--cue-fg))"
+					})
+				]
+			}), /* @__PURE__ */ jsxs("linearGradient", {
+				id: `${id}-sheen`,
+				x1: "0",
+				y1: "0",
+				x2: "1",
+				y2: "0",
+				children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "var(--cue-accent-fg)",
+						stopOpacity: "0"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "50%",
+						stopColor: "var(--cue-accent-fg)",
+						stopOpacity: "0.85"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: "var(--cue-accent-fg)",
+						stopOpacity: "0"
+					})
+				]
+			})] }),
+			shape === "knot" ? [ring(40, 50, "a"), ring(60, 50, "b")] : null,
+			shape === "torus" ? ring(50, 50, "a") : null,
+			shape === "mark" ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				x: "18",
+				y: "18",
+				width: "64",
+				height: "64",
+				rx: "18",
+				fill: `url(#${id}-body)`
+			}), /* @__PURE__ */ jsx("rect", {
+				x: "24",
+				y: "22",
+				width: "40",
+				height: "10",
+				rx: "5",
+				fill: `url(#${id}-sheen)`,
+				transform: `rotate(${tilt / 4} 44 27)`
+			})] }) : null
+		]
+	});
+}
+//#endregion
+export { GlossObject };

package/dist/brand/halftone.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/brand/halftone.d.ts
+interface HalftoneProps extends React.SVGProps<SVGSVGElement> {
+  /** The generated form the dots describe. Defaults to `"ridge"`. */
+  shape?: "wave" | "orb" | "ridge";
+  /** Which variant of the form. Defaults to `1`. */
+  seed?: number;
+}
+/**
+ * A halftone dot screen over a generated form — the engraved, printed look of a
+ * developer-tool landing page (spec 2026-10-02 §3.4). Every dot's size is the
+ * form's density at that cell, so the picture is drawn by the screen itself
+ * rather than filtered from an image, and nothing is fetched. Dots are the
+ * foreground ink. Decorative: hidden from assistive technology.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Halftone shape="orb" className="h-72 w-72" />
+ */
+declare function Halftone({ shape, seed, ...svgProps }: HalftoneProps): React.JSX.Element;
+//#endregion
+export { Halftone, HalftoneProps };

package/dist/brand/halftone.js

@@ -0,0 +1,54 @@
+import { seeded } from "./_motif-seed.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/brand/halftone.tsx
+/**
+* A halftone dot screen over a generated form — the engraved, printed look of a
+* developer-tool landing page (spec 2026-10-02 §3.4). Every dot's size is the
+* form's density at that cell, so the picture is drawn by the screen itself
+* rather than filtered from an image, and nothing is fetched. Dots are the
+* foreground ink. Decorative: hidden from assistive technology.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Halftone shape="orb" className="h-72 w-72" />
+*/
+function Halftone({ shape = "ridge", seed = 1, ...svgProps }) {
+	const phase = seeded(seed)() * Math.PI * 2;
+	const density = (x, y) => {
+		if (shape === "orb") {
+			const d = Math.hypot(x - .5, y - .5) / .5;
+			return Math.max(0, 1 - d) * (.6 + .4 * (1 - y));
+		}
+		if (shape === "wave") return Math.max(0, Math.min(1, .5 + .45 * Math.sin(x * 9 + phase) * (1 - y) + (y - .5) * .6));
+		const ridge = .55 + .25 * Math.sin(x * 5 + phase) + .1 * Math.sin(x * 13 + phase * 2);
+		return y > ridge ? Math.min(1, (y - ridge) * 2.4) : 0;
+	};
+	const step = 4;
+	const sizes = [
+		[],
+		[],
+		[],
+		[]
+	];
+	for (let y = step / 2; y < 100; y += step) for (let x = step / 2; x < 100; x += step) {
+		const size = Math.ceil(density(x / 100, y / 100) * 4);
+		if (size >= 1) sizes[size - 1].push(`M${x} ${y}h0`);
+	}
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 100 100",
+		"aria-hidden": "true",
+		focusable: "false",
+		...svgProps,
+		children: sizes.map((dots, index) => dots.length === 0 ? null : /* @__PURE__ */ jsx("path", {
+			d: dots.join(""),
+			fill: "none",
+			stroke: "var(--cue-fg)",
+			strokeLinecap: "round",
+			strokeWidth: (index + 1) * step / 4
+		}, index))
+	});
+}
+//#endregion
+export { Halftone };

package/dist/brand/index.d.ts

@@ -2,4 +2,9 @@ import { BrandAssetProps, BrandSize, BrandTone } from "./_chassis.js";
 import { CueLogotype, CueLogotypeProps } from "./cue-logotype.js";
 import { CueMark, CueMarkProps } from "./cue-mark.js";
 import { Plussie, PlussieExpression, PlussieProps } from "./plussie.js";
-export { type BrandAssetProps, type BrandSize, type BrandTone, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, Plussie, type PlussieExpression, type PlussieProps };
+import { GlossObject, GlossObjectProps } from "./gloss-object.js";
+import { Halftone, HalftoneProps } from "./halftone.js";
+import { Motif, MotifProps, MotifVariant } from "./motif.js";
+import { ParticleMark, ParticleMarkProps } from "./particle-mark.js";
+import { Ribbon, RibbonProps } from "./ribbon.js";
+export { type BrandAssetProps, type BrandSize, type BrandTone, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, GlossObject, type GlossObjectProps, Halftone, type HalftoneProps, Motif, type MotifProps, type MotifVariant, ParticleMark, type ParticleMarkProps, Plussie, type PlussieExpression, type PlussieProps, Ribbon, type RibbonProps };

package/dist/brand/motif.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+//#region src/brand/motif.d.ts
+type MotifVariant = "ribbon" | "halftone" | "gloss" | "particles";
+interface MotifProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The variants this page offers. The Look shows at most one of them. Defaults to all four. */
+  variants?: readonly MotifVariant[];
+  /** The same seed draws the same picture, on the server and in the browser. Defaults to `1`. */
+  seed?: number;
+  /** The word the particle variant draws. Defaults to `"CUE"`. */
+  word?: string;
+}
+/**
+ * The art a Look draws in a hero: a ribbon, a halftone, a gloss object or a
+ * particle word, whichever the style set chooses (spec 2026-10-02 §3.4).
+ *
+ * **The Look chooses, at the CSS layer.** Every offered variant is rendered, each
+ * in a wrapper whose `display` is the set's `style-motif-*` token, `none` unless
+ * the set turns it on. So switching the Look switches the art with no re-render,
+ * the server and the browser draw the same markup, and the paint pack `none` stays
+ * empty. A Look that turns none on draws nothing here and takes no room: the
+ * container's own `display` is `style-motif-shown`, which the build derives as
+ * `block` for a set that shows a motif and which is `none` everywhere else. The
+ * particle variant animates only while it is the one displayed.
+ *
+ * Static markup — no `"use client"`; the particle variant is its own client island.
+ *
+ * @example
+ * <Hero title="Payments infrastructure" media={<Motif seed={2} />} />
+ */
+declare const Motif: React.ForwardRefExoticComponent<MotifProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Motif, MotifProps, MotifVariant };

package/dist/brand/motif.js

@@ -0,0 +1,71 @@
+import { cn } from "../lib/cn.js";
+import { GlossObject } from "./gloss-object.js";
+import { Halftone } from "./halftone.js";
+import { ParticleMark } from "./particle-mark.js";
+import { Ribbon } from "./ribbon.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/motif.tsx
+const DISPLAY = {
+	ribbon: "[display:var(--cue-style-motif-ribbon,none)]",
+	halftone: "[display:var(--cue-style-motif-halftone,none)]",
+	gloss: "[display:var(--cue-style-motif-gloss,none)]",
+	particles: "[display:var(--cue-style-motif-particles,none)]"
+};
+/**
+* The art a Look draws in a hero: a ribbon, a halftone, a gloss object or a
+* particle word, whichever the style set chooses (spec 2026-10-02 §3.4).
+*
+* **The Look chooses, at the CSS layer.** Every offered variant is rendered, each
+* in a wrapper whose `display` is the set's `style-motif-*` token, `none` unless
+* the set turns it on. So switching the Look switches the art with no re-render,
+* the server and the browser draw the same markup, and the paint pack `none` stays
+* empty. A Look that turns none on draws nothing here and takes no room: the
+* container's own `display` is `style-motif-shown`, which the build derives as
+* `block` for a set that shows a motif and which is `none` everywhere else. The
+* particle variant animates only while it is the one displayed.
+*
+* Static markup — no `"use client"`; the particle variant is its own client island.
+*
+* @example
+* <Hero title="Payments infrastructure" media={<Motif seed={2} />} />
+*/
+const Motif = React.forwardRef(function Motif({ className, variants = [
+	"ribbon",
+	"halftone",
+	"gloss",
+	"particles"
+], seed = 1, word = "CUE", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "motif",
+		"aria-hidden": "true",
+		className: cn("relative aspect-[4/3] w-full [display:var(--cue-style-motif-shown,none)]", className),
+		...elementProps,
+		children: variants.map((variant) => /* @__PURE__ */ jsxs("div", {
+			"data-motif": variant,
+			className: cn("absolute inset-0", DISPLAY[variant]),
+			children: [
+				variant === "ribbon" ? /* @__PURE__ */ jsx(Ribbon, {
+					seed,
+					className: "size-full"
+				}) : null,
+				variant === "halftone" ? /* @__PURE__ */ jsx(Halftone, {
+					seed,
+					className: "size-full"
+				}) : null,
+				variant === "gloss" ? /* @__PURE__ */ jsx(GlossObject, {
+					seed,
+					className: "size-full"
+				}) : null,
+				variant === "particles" ? /* @__PURE__ */ jsx(ParticleMark, {
+					word,
+					seed,
+					className: "size-full"
+				}) : null
+			]
+		}, variant))
+	});
+});
+//#endregion
+export { Motif };

package/dist/brand/particle-mark.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+//#region src/brand/particle-mark.d.ts
+interface ParticleMarkProps extends React.ComponentPropsWithoutRef<"canvas"> {
+  /** The word the dots draw, short: a name or a mark. */
+  word: string;
+  /** Which scatter. Defaults to `1`. */
+  seed?: number;
+}
+/**
+ * A word drawn as a field of dots that drift and settle — a studio site's mark
+ * (spec 2026-10-02 §3.4). The dots are the accent, read from the canvas's own
+ * computed style, so they follow the Look.
+ *
+ * **It costs nothing at rest.** It animates only while its element is displayed,
+ * on screen and in a visible tab, and while {@link useStill} is false (a still
+ * thumbnail, or a reader who prefers reduced motion). Otherwise it draws one
+ * still frame. That frame is redrawn whenever any theme axis changes anywhere above
+ * it, the system colour scheme flips, a face finishes loading, or it resizes, so a
+ * paused mark is never left in an old palette. Unmounting disconnects every
+ * observer and cancels every frame.
+ *
+ * Decorative: hidden from assistive technology.
+ *
+ * @example
+ * <ParticleMark word="CUE" className="h-40 w-full" />
+ */
+declare function ParticleMark({ word, seed, ...canvasProps }: ParticleMarkProps): React.JSX.Element;
+//#endregion
+export { ParticleMark, ParticleMarkProps };

package/dist/brand/particle-mark.js

@@ -0,0 +1,137 @@
+"use client";
+import { seeded } from "./_motif-seed.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/brand/particle-mark.tsx
+/** The six axes a motif's colours follow (spec 2026-10-02 §3.4). */
+const AXES = [
+	"data-theme",
+	"data-font",
+	"data-mode",
+	"data-style",
+	"data-paint",
+	"data-density"
+];
+/**
+* A word drawn as a field of dots that drift and settle — a studio site's mark
+* (spec 2026-10-02 §3.4). The dots are the accent, read from the canvas's own
+* computed style, so they follow the Look.
+*
+* **It costs nothing at rest.** It animates only while its element is displayed,
+* on screen and in a visible tab, and while {@link useStill} is false (a still
+* thumbnail, or a reader who prefers reduced motion). Otherwise it draws one
+* still frame. That frame is redrawn whenever any theme axis changes anywhere above
+* it, the system colour scheme flips, a face finishes loading, or it resizes, so a
+* paused mark is never left in an old palette. Unmounting disconnects every
+* observer and cancels every frame.
+*
+* Decorative: hidden from assistive technology.
+*
+* @example
+* <ParticleMark word="CUE" className="h-40 w-full" />
+*/
+function ParticleMark({ word, seed = 1, ...canvasProps }) {
+	const ref = React.useRef(null);
+	const held = useStill();
+	const reduced = usePrefersReducedMotion();
+	const still = held || reduced;
+	React.useEffect(() => {
+		const canvas = ref.current;
+		if (canvas === null) return;
+		const ctx = canvas.getContext("2d");
+		if (ctx === null) return;
+		let frame = 0;
+		let visible = false;
+		let points = [];
+		const layout = () => {
+			const rect = canvas.getBoundingClientRect();
+			const scale = window.devicePixelRatio || 1;
+			canvas.width = Math.max(1, Math.round(rect.width * scale));
+			canvas.height = Math.max(1, Math.round(rect.height * scale));
+			const off = document.createElement("canvas");
+			off.width = canvas.width;
+			off.height = canvas.height;
+			const o = off.getContext("2d");
+			if (o === null) return;
+			o.fillStyle = getComputedStyle(canvas).getPropertyValue("--cue-accent").trim() || "currentColor";
+			const family = getComputedStyle(canvas).fontFamily;
+			o.font = `700 100px ${family}`;
+			const advance = o.measureText(word).width / 100;
+			const size = Math.min(canvas.height * .62, advance > 0 ? canvas.width * .9 / advance : canvas.height * .62);
+			o.font = `700 ${Math.round(size)}px ${family}`;
+			o.textAlign = "center";
+			o.textBaseline = "middle";
+			o.fillText(word, canvas.width / 2, canvas.height / 2);
+			const data = o.getImageData(0, 0, off.width, off.height).data;
+			const rand = seeded(seed);
+			const step = Math.max(3, Math.round(4 * scale));
+			points = [];
+			for (let y = 0; y < off.height; y += step) for (let x = 0; x < off.width; x += step) if (data[(y * off.width + x) * 4 + 3] > 128) points.push({
+				x,
+				y,
+				dx: (rand() - .5) * step,
+				dy: (rand() - .5) * step
+			});
+		};
+		const draw = (t) => {
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			ctx.fillStyle = getComputedStyle(canvas).getPropertyValue("--cue-accent").trim() || "currentColor";
+			const size = Math.max(1, (window.devicePixelRatio || 1) * 1.4);
+			const k = still ? 0 : Math.sin(t / 900);
+			for (const p of points) ctx.fillRect(p.x + p.dx * k, p.y + p.dy * k, size, size);
+		};
+		const rendered = () => typeof canvas.checkVisibility === "function" ? canvas.checkVisibility() : canvas.getClientRects().length > 0;
+		const shown = () => rendered() && visible && document.visibilityState === "visible";
+		const tick = (t) => {
+			draw(t);
+			frame = shown() && !still ? requestAnimationFrame(tick) : 0;
+		};
+		const refresh = () => {
+			cancelAnimationFrame(frame);
+			frame = 0;
+			layout();
+			draw(0);
+			if (shown() && !still) frame = requestAnimationFrame(tick);
+		};
+		const intersection = new IntersectionObserver(([entry]) => {
+			visible = entry?.isIntersecting ?? false;
+			refresh();
+		});
+		intersection.observe(canvas);
+		const resize = new ResizeObserver(refresh);
+		resize.observe(canvas);
+		const axes = new MutationObserver(refresh);
+		axes.observe(document.documentElement, {
+			subtree: true,
+			attributes: true,
+			attributeFilter: AXES
+		});
+		const scheme = window.matchMedia("(prefers-color-scheme: dark)");
+		scheme.addEventListener("change", refresh);
+		document.addEventListener("visibilitychange", refresh);
+		document.fonts?.addEventListener?.("loadingdone", refresh);
+		refresh();
+		return () => {
+			cancelAnimationFrame(frame);
+			intersection.disconnect();
+			resize.disconnect();
+			axes.disconnect();
+			scheme.removeEventListener("change", refresh);
+			document.removeEventListener("visibilitychange", refresh);
+			document.fonts?.removeEventListener?.("loadingdone", refresh);
+		};
+	}, [
+		word,
+		seed,
+		still
+	]);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref,
+		"aria-hidden": "true",
+		...canvasProps
+	});
+}
+//#endregion
+export { ParticleMark };

package/dist/brand/ribbon.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+//#region src/brand/ribbon.d.ts
+interface RibbonProps extends React.SVGProps<SVGSVGElement> {
+  /** Which ribbon: the same seed draws the same bands. Defaults to `1`. */
+  seed?: number;
+}
+/**
+ * A flowing ribbon of layered bands in the theme's own inks — the payments-page
+ * motif (spec 2026-10-02 §3.4). Five bezier bands cross the frame on a diagonal,
+ * each a gradient from the accent to the foreground's mix, so it reads in every
+ * theme and both modes. Decorative: hidden from assistive technology.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Ribbon seed={3} className="h-64 w-full" />
+ */
+declare function Ribbon({ seed, ...svgProps }: RibbonProps): React.JSX.Element;
+//#endregion
+export { Ribbon, RibbonProps };

package/dist/brand/ribbon.js

@@ -0,0 +1,54 @@
+import { r2, seeded } from "./_motif-seed.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/ribbon.tsx
+/**
+* A flowing ribbon of layered bands in the theme's own inks — the payments-page
+* motif (spec 2026-10-02 §3.4). Five bezier bands cross the frame on a diagonal,
+* each a gradient from the accent to the foreground's mix, so it reads in every
+* theme and both modes. Decorative: hidden from assistive technology.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Ribbon seed={3} className="h-64 w-full" />
+*/
+function Ribbon({ seed = 1, ...svgProps }) {
+	const id = React.useId().replace(/:/gu, "");
+	const rand = seeded(seed);
+	const bands = Array.from({ length: 5 }, (_, i) => {
+		const y0 = r2(40 + i * 14 + rand() * 10);
+		const c1 = r2(rand() * 60 - 10);
+		const c2 = r2(70 + rand() * 40);
+		const y1 = r2(i * 8 + rand() * 12);
+		const w = r2(10 + rand() * 8);
+		return `M0 ${y0} C 30 ${c1} 60 ${c2} 100 ${y1} L 100 ${r2(y1 + w)} C 60 ${r2(c2 + w)} 30 ${r2(c1 + w)} 0 ${r2(y0 + w)} Z`;
+	});
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 100 100",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		focusable: "false",
+		...svgProps,
+		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+			id: `${id}-g`,
+			x1: "0",
+			y1: "0",
+			x2: "1",
+			y2: "1",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0%",
+				stopColor: "var(--cue-accent)"
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "100%",
+				stopColor: "color-mix(in oklch, var(--cue-accent) 40%, var(--cue-fg))"
+			})]
+		}) }), bands.map((d, i) => /* @__PURE__ */ jsx("path", {
+			d,
+			fill: `url(#${id}-g)`,
+			opacity: r2(.35 + i * .12)
+		}, i))]
+	});
+}
+//#endregion
+export { Ribbon };