@sableui/react 0.1.0 → 0.2.0

package/llms-full.txt

@@ -1,6 +1,6 @@
 # Sable (@sableui/react)
 
-> An owned, themeable React component system. Default theme: **Base** (dark-by-default, content-first, fluid product UI). Behavior from Base UI; styling via Tailwind v4 + semantic CSS-variable tokens; Reicon icons via a pluggable adapter. 97 components, 13 layout primitives, and a **patterns** tier of canonical page shells. The full, per-component contract is the generated `registry.json`.
+> An owned, themeable React component system. Default theme: **Base** (dark-by-default, content-first, fluid product UI). Behavior from Base UI; styling via Tailwind v4 + semantic CSS-variable tokens; Reicon icons via a pluggable adapter. 96 components, 13 layout primitives, and a **patterns** tier of canonical page shells. The full, per-component contract is the generated `registry.json`.
 
 ## Start here — brief, composition, evidence
 
@@ -2573,7 +2573,7 @@ Each step is 4px apart, so common insets land on a real step. Themes and the cus
 ## Rules
 
 1. **Nested corners are concentric: inner radius = outer radius − inset. Write it as rounded-concentric-<outer>/<inset>, not a hardcoded step.** A 12px popover with 4px padding takes 8px items. The utility computes the subtraction from the live tokens, so the pair stays concentric when a theme or the customizer rescales the radius ladder; a hardcoded rounded-sm drifts.
-2. **A list of rows inside a rounded popup uses popup-inset on the popup, rounded-popup-item on the rows and popup-bleed on a separator.** All three derive from the popup's radius: the inset grows to a third of it (never below --spacing(1), so density moves it too), the rows take what is left, and a separator bleeds by exactly the inset. A rounder look gets more room instead of rows that round into pills, and the default ladder still lands on the familiar 4px inset and 8px rows. *Enforced by sable-lint: popup-separator-bleed.*
+2. **A list of rows inside a rounded popup uses popup-inset on the popup, rounded-popup-item on the rows and popup-bleed on a separator.** All three derive from the popup's radius: the inset grows to a third of it (never below --spacing(1), so density moves it too), the rows take what is left after the inset and the 1px border, and a separator bleeds by exactly the inset. A rounder look gets more room instead of rows that round into pills; the default ladder lands on a 4px inset and 7px rows. *Enforced by sable-lint: popup-separator-bleed.*
 3. **A Button, Pill or Badge gets its look from a variant, never from override classes.** border, bg, rounded, ring and shadow classes on a component fight the variant's own hover, selected and focus states, and give one call site a look no other site can ask for. Use the variant that exists (Button variant="floating" over content, "on-color" on a fill; Pill appearance="outline"; Badge appearance and tone) or add one to the component. *Enforced by sable-lint: component-restyle.*
 4. **The outer radius is always at least the inner radius.** If the inset is larger than the outer radius, square the inner element or step the container up.
 5. **Never mix radii within one component.** A component reads as one object when its corners agree.
@@ -2897,68 +2897,158 @@ The region is in the accessibility tree before its text changes, so the change i
 
 # AuthPage
 
-Centered auth card: a form-width region vertically centered in the viewport, one Card holding the Form, an alternate-action divider, and a quiet switch-to-sign-up link beneath it.
+Split sign-in page: a form column (brand mark, heading, email + password, primary sign-in, passkey and wallet alternatives, sign-up switch, terms) beside a brand panel painted from the theme's tones with a featured release card. Below lg the panel drops away and the form is the whole screen.
 
 **Intent:** Reach for this for sign-in, sign-up, forgot-password, and any single-purpose one-column form route (invite accept, unsubscribe). Not for multi-section forms (use SettingsPage).
 
 ## Notes
 
-- Region cap is `form` (480px) — the narrowest named cap; auth never needs more.
-- The card is the only surface on the page: no app chrome, no sidebar — minimal exit paths.
-- min-h-dvh + grid place-items-center centers the card without magic offsets.
-- Field handles label/error wiring; the submit button is full-width — the primary (and only) action.
-- Secondary actions (here, switch to sign-up; add forgot password the same way) are quiet `link-underline` links, never competing buttons.
+- The form column is a `form`-capped Region (480px), so the controls keep the same measure whether the panel is present or not.
+- No card around the form: the page itself is the surface, and the brand panel carries the identity. A card on a blank page reads as a template.
+- The heading is `text-heading-1` in an h1 — it is the page outline, so it takes a heading tier, not a card title.
+- Brand mark, form and terms are a three-part column: mark pinned to the top, form vertically centred in the remaining space, terms pinned to the bottom.
+- Forgot password sits under the password field, right-aligned, before the submit button — so it comes right after the field in tab order. Field has no label-row action slot yet.
+- One primary action. Passkey and wallet are outline buttons under an `or` Separator; switching to sign-up is a quiet `link-underline` link.
+- Validation uses Field `validate` for product copy instead of the browser's generic required message. A rejected sign-in comes back through Form `errors` on the password field; the submit Button shows `loading` while the request is in flight.
+- The brand panel artwork is a mesh of the theme's decorative tones over `--primary`, so it re-paints for every theme and mode. The relative-colour `oklch(from var(--tone-*) …)` lift needs an `inline-color` disable with a reason.
+- The panel is `hidden lg:flex`: on a phone the form is the whole screen, with no decorative scroll above it.
 
 ## Accessibility
 
-- The route renders inside <main> with the page h1 in the card header (an h1 inside CardTitle, which carries the type).
-- Field auto-wires labels, describedby, and invalid state onto the inputs.
-- Autocomplete attributes (email, current-password) keep password managers working.
+- The route renders inside <main> with one h1; the brand panel is an <aside> labelled "Featured release".
+- Field auto-wires labels, describedby, and invalid state onto the inputs; on submit, the first invalid field is focused.
+- Autocomplete attributes (`email webauthn`, `current-password`) keep password managers and passkey autofill working.
+- The Forgot password and Create one links use `hit-target` to meet the 44px touch floor without changing layout.
+- The artwork swatches are aria-hidden decoration; the brand link's accessible name is the wordmark.
 
 ## Source
 
 ```tsx
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Field, Form, Input, Region, Separator, Stack } from "@sableui/react"
+import { useState } from "react"
+import { Avatar, Badge, Button, Card, CardContent, Entity, Field, Form, Icon, Input, Region, Separator, Stack } from "@sableui/react"
+
+// A soft mesh of the theme's decorative tones over its brand colour, so the
+// artwork follows every theme and mode. Each tone is lifted from its text
+// strength (dark, restrained) to an art strength.
+const artwork = [
+	// 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 18% 22%, oklch(from var(--tone-info) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent 58%)",
+	// 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 82% 18%, oklch(from var(--tone-collectible) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent 55%)",
+	// 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 70% 88%, oklch(from var(--tone-edition) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent 60%)",
+	// 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 12% 92%, oklch(from var(--tone-standard) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent 55%)",
+	"var(--primary)",
+].join(", ")
 
 export function AuthPage() {
+	const [pending, setPending] = useState(false)
+	const [errors, setErrors] = useState<Record<string, string>>({})
+
 	return (
-		<main className="grid min-h-dvh place-items-center bg-background">
-			<Region max="form" safeArea={["top", "bottom"]}>
-				<Stack gap={3}>
-					<Card>
-						<CardHeader>
-							{/* CardTitle carries the type; the h1 inside it is the page heading. */}
-							<CardTitle>
-								<h1>Sign in</h1>
-							</CardTitle>
-							<CardDescription>Welcome back — pick up where you left off.</CardDescription>
-						</CardHeader>
-						<CardContent>
-							<Form onSubmit={(event) => event.preventDefault()}>
-								<Field label="Email" required>
-									<Input type="email" name="email" autoComplete="email" placeholder="you@example.com" />
-								</Field>
-								<Field label="Password" required>
-									<Input type="password" name="password" autoComplete="current-password" />
+		<main className="grid min-h-dvh bg-background lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]">
+			<Region max="form" safeArea={["top", "bottom"]} className="flex flex-col">
+				{/* safeArea owns the region's own padding, so the breathing room sits one level in. */}
+				<Stack gap={0} className="flex-1 py-8 sm:py-10">
+					<a href="/" className="flex items-center gap-2.5 self-start rounded-sm motion-interactive motion-press">
+						{/* The same mark the app shell's sidebar and header carry. */}
+						<Icon name="gem" variant="solid" className="text-2xl" />
+						<span className="text-title-lg">Atelier</span>
+					</a>
+
+					<Stack gap={4} justify="center" className="flex-1 py-12">
+						<Stack gap={1.5}>
+							<h1 className="text-heading-1">Welcome back</h1>
+							<p className="text-body-lg text-muted-foreground">
+								Sign in to collect new releases and manage your editions.
+							</p>
+						</Stack>
+
+						<Form
+							className="gap-5"
+							errors={errors}
+							onFormSubmit={() => {
+								setPending(true)
+								// Replace with your auth call; a rejected sign-in comes back as a field error.
+								setTimeout(() => {
+									setPending(false)
+									setErrors({ password: "That email and password don’t match. Try again or reset your password." })
+								}, 900)
+							}}
+						>
+							<Field label="Email" name="email" validate={(value) => (value ? null : "Enter your email address.")}>
+								<Input type="email" autoComplete="email webauthn" placeholder="you@example.com" />
+							</Field>
+							<Stack gap={1.5}>
+								<Field label="Password" name="password" validate={(value) => (value ? null : "Enter your password.")}>
+									<Input type="password" autoComplete="current-password" />
 								</Field>
-								<Button type="submit" className="w-full">
-									Sign in
-								</Button>
-								<Separator label="or" />
-								<Button variant="outline" className="w-full">
-									Continue with wallet
-								</Button>
-							</Form>
-						</CardContent>
-					</Card>
-					<p className="text-center text-body-sm text-muted-foreground">
-						No account?{" "}
-						<a href="/signup" className="link-underline motion-interactive text-foreground">
-							Create one
+								<a href="/forgot-password" className="hit-target self-end text-body-sm text-muted-foreground link-underline motion-interactive">
+									Forgot password?
+								</a>
+							</Stack>
+							<Button type="submit" size="cta" loading={pending} loadingLabel="Signing in" className="w-full">
+								Sign in
+							</Button>
+						</Form>
+
+						<Separator label="or" />
+
+						<Stack gap={1.5}>
+							<Button variant="outline" size="cta" className="w-full">
+								Sign in with a passkey
+							</Button>
+							<Button variant="outline" size="cta" className="w-full">
+								Connect a wallet
+							</Button>
+						</Stack>
+
+						<p className="text-body-md text-muted-foreground">
+							No account?{" "}
+							<a href="/signup" className="hit-target link-underline motion-interactive text-foreground">
+								Create one
+							</a>
+						</p>
+					</Stack>
+
+					<p className="text-body-xs text-muted-foreground">
+						By signing in you agree to the{" "}
+						<a href="/terms" className="link-underline motion-interactive">
+							Terms
+						</a>{" "}
+						and{" "}
+						<a href="/privacy" className="link-underline motion-interactive">
+							Privacy Policy
 						</a>
+						.
 					</p>
 				</Stack>
 			</Region>
+
+			{/* The brand panel is decoration: on a phone the form is the whole screen. */}
+			<aside aria-label="Featured release" className="hidden p-3 lg:flex">
+				<div className="flex flex-1 flex-col justify-end rounded-xl p-8" style={{ background: artwork }}>
+					<Card className="max-w-md">
+						<CardContent>
+							<Stack gap={3}>
+								<Badge tone="edition" className="self-start">
+									Edition of 50
+								</Badge>
+								<p className="text-title-lg">
+									“Every edition is a conversation with whoever holds it next.”
+								</p>
+								<Entity
+									className="p-0"
+									leading={<Avatar fallback="MO" />}
+									title="Mara Okafor"
+									subtitle="Untitled (gold rush), 2026"
+								/>
+							</Stack>
+						</CardContent>
+					</Card>
+				</div>
+			</aside>
 		</main>
 	)
 }
@@ -2968,80 +3058,114 @@ export function AuthPage() {
 
 # BrandLandingPage
 
-High-fidelity brand/product landing page: pill navigation, editorial hero type, a dark product scene, calm status tones, CTA pair, feature cards, metrics, and a complete branded footer.
+High-fidelity brand/product landing page: pill navigation, editorial hero type, a dark product scene, a value section, a how-it-works sequence, a customer story with outcomes, a closing CTA band, and a complete branded footer.
 
 **Intent:** Use this for a polished product marketing route that still needs to show a credible app surface. It is warmer and more tactile than the canonical LandingPage, but avoids trend-driven neon and generic hype cues.
 
 ## Notes
 
-- One display headline owns the first viewport; supporting copy stays in body-lg at prose measure.
+- The story runs promise → product → value → process → proof → ask: hero, product scene, 'Why Cove' value cards, a three-step how-it-works list, a customer story with outcome figures, then one closing CTA. Each section adds new evidence; no number is repeated from the product scene.
+- One display headline owns the first viewport; supporting copy stays in body-lg at prose measure. Section headings are heading-1 under a `text-overline` eyebrow.
 - The nav spends one compact pill surface, with a clear brand signal and two primary paths: sign in and request access.
-- The product scene uses overlay tokens for a stable dark media surface, then semantic tones for status and chart signals.
-- The footer closes the page with brand reassurance, a three-column sitemap, a digest signup, operational mini-metrics, and legal links.
-- Every surface outside the product scene is a real Card (feature, metric and digest cards); status marks are StatusDot. The scene's nested panels take `rounded-concentric-xl/<inset>` from the shell's radius, so the corners stay parallel at any radius preset.
-- Radius and shadow are theme-controlled. In Cove the same rounded-lg/xl classes read larger and softer; in other themes the structure still holds.
-- Color is intentionally broad: porcelain/plum/lavender/blue/mint/saffron/coral through semantic roles, not a one-note purple gradient.
+- The product scene and the closing CTA band are dark islands: a `dark` class on the wrapper re-scopes every semantic token, so surfaces, muted ink, Badge tones and Buttons take the theme's own dark values in either page mode. Never fake a dark panel with overlay ink at reduced opacity — status tones tuned for a light page vanish on it.
+- The scene is a picture of the product: `aria-hidden` + `inert` keep its sample button and figures out of the tab order and the outline. On narrow screens it drops the side column and keeps the signal map, so it scales instead of stacking into a second page.
+- The chart keeps past weeks on the quiet `secondary` fill and gives the current week the one accent, so the signal reads at a glance.
+- Value cards are real Cards with a neutral `sable-well` icon tile; the customer story is a Card rendered as a figure, with outcome figures split by Separator. The scene's nested panels take `rounded-concentric-xl/<inset>` from the shell's radius, so the corners stay parallel at any radius preset.
+- The footer closes the page with brand reassurance, a plain status Badge, a three-column sitemap (three columns at every width), a digest signup, and legal links.
+- All figures, names and the testimonial are sample content; replace them with real, verifiable claims.
 
 ## Accessibility
 
 - The brand nav is a labeled nav landmark with real links and visible text.
+- Each content section is a labelled region (by its h2, or aria-label for the customer story); the decorative product scene is hidden from assistive tech and inert.
+- The how-it-works steps are an ordered list; the testimonial is a figure with a blockquote and a figcaption naming the speaker.
 - The footer is a real footer landmark with a labeled footer nav, visible link text, and a labeled email field.
-- TextReveal preserves the full headline as one accessible label and honors reduced-motion policy.
-- Status dots are paired with visible text labels so color is never the only signal.
+- TextReveal preserves the full headline as one accessible label and honors reduced-motion policy; Reveal shows the value cards immediately when motion is off.
+- Status dots and the status Badge are paired with visible text labels so color is never the only signal.
 
 ## Source
 
 ```tsx
-import { Badge, Button, Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, Icon, Input, Region, Row, Stack, StatusDot, TextReveal } from "@sableui/react"
+import { Avatar, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Grid, Icon, Input, Region, Reveal, Row, Separator, Stack, StatusDot, TextReveal } from "@sableui/react"
 
-const navItems = ["Platform", "Signals", "Security", "Company"]
+const navItems = [
+	{ label: "Platform", href: "#platform" },
+	{ label: "How it works", href: "#how-it-works" },
+	{ label: "Customers", href: "#customers" },
+	{ label: "Pricing", href: "/pricing" },
+]
 
-const metrics = [
-	{ label: "Checks cleared", value: "1.8M", detail: "in the last 30 days" },
-	{ label: "Review time", value: "42s", detail: "median approval path" },
-	{ label: "Spaces online", value: "284", detail: "across active teams" },
+const spaces = [
+	{ name: "Waypoint", value: "98.4%", label: "clear routes" },
+	{ name: "Fielddesk", value: "12", label: "open holds" },
+	{ name: "Archive", value: "4.8k", label: "sealed records" },
 ]
 
-const workflow = [
+const routes = [
 	{ label: "Intake", state: "Open", tone: "info" as const },
 	{ label: "Review", state: "Live", tone: "edition" as const },
 	{ label: "Archive", state: "Safe", tone: "success" as const },
 ]
 
+// Weekly approvals: past weeks recede, the current week carries the signal.
 const bars = [
-	{ height: "38%", tone: "bg-tone-info" },
-	{ height: "56%", tone: "bg-tone-edition" },
-	{ height: "44%", tone: "bg-tone-standard" },
-	{ height: "68%", tone: "bg-success" },
-	{ height: "52%", tone: "bg-tone-info" },
-	{ height: "78%", tone: "bg-highlight" },
-	{ height: "60%", tone: "bg-tone-edition" },
-	{ height: "86%", tone: "bg-success" },
-	{ height: "64%", tone: "bg-tone-standard" },
+	{ week: "w1", height: "38%", current: false },
+	{ week: "w2", height: "56%", current: false },
+	{ week: "w3", height: "44%", current: false },
+	{ week: "w4", height: "68%", current: false },
+	{ week: "w5", height: "52%", current: false },
+	{ week: "w6", height: "78%", current: false },
+	{ week: "w7", height: "60%", current: false },
+	{ week: "w8", height: "72%", current: false },
+	{ week: "w9", height: "88%", current: true },
 ]
 
-const features = [
+const sceneMetrics = [
+	{ label: "Cleared", value: "1.8M", detail: "last 30 days" },
+	{ label: "Review", value: "42s", detail: "median path" },
+	{ label: "Spaces", value: "284", detail: "active teams" },
+]
+
+const values = [
 	{
 		icon: "lock" as const,
 		title: "Private by default",
-		body: "Workspace roles, approval trails, and handoff history stay clear without turning the interface into compliance fog.",
+		body: "Roles, approvals, and handoff history stay with the people who need them. No shared inboxes, no forwarded screenshots.",
 	},
 	{
-		icon: "layout" as const,
-		title: "Brand and product together",
-		body: "Editorial sections and dense console views share the same semantic tokens, radius, and motion contract.",
+		icon: "bell" as const,
+		title: "Signals before surprises",
+		body: "Cove watches every route and surfaces stalled reviews and expiring approvals while there is still time to act.",
 	},
 	{
-		icon: "circle-check" as const,
-		title: "Calm confidence",
-		body: "Large type, tactile controls, and focused status tones make complex work feel understandable on first pass.",
+		icon: "clock" as const,
+		title: "A trail for every decision",
+		body: "Each approval keeps its context, reviewer, and timestamp, so an audit takes an afternoon instead of a quarter.",
 	},
 ]
 
-const reviews = [
-	{ name: "Waypoint", value: "98.4%", label: "clear routes" },
-	{ name: "Fielddesk", value: "12", label: "open holds" },
-	{ name: "Archive", value: "4.8k", label: "sealed records" },
+const steps = [
+	{
+		number: "01",
+		title: "Connect your spaces",
+		body: "Bring teams, vendors, and record stores into one workspace, with roles that mirror how you already work.",
+	},
+	{
+		number: "02",
+		title: "Route every approval",
+		body: "Requests follow the path you define, with reviewers, deadlines, and escalation built in from the start.",
+	},
+	{
+		number: "03",
+		title: "Seal the record",
+		body: "Approved work is archived with its full context and is ready for review the moment it closes.",
+	},
+]
+
+const outcomes = [
+	{ value: "3.2×", label: "faster approvals in the first quarter" },
+	{ value: "68%", label: "fewer follow-ups on handoffs" },
+	{ value: "1 day", label: "to prepare a quarterly audit" },
 ]
 
 const footerGroups = [
@@ -3049,9 +3173,9 @@ const footerGroups = [
 		title: "Platform",
 		links: [
 			{ label: "Overview", href: "#platform" },
-			{ label: "Signals", href: "#signals" },
-			{ label: "Approvals", href: "#approvals" },
-			{ label: "Records", href: "#records" },
+			{ label: "Signals", href: "/signals" },
+			{ label: "Approvals", href: "/approvals" },
+			{ label: "Records", href: "/records" },
 		],
 	},
 	{
@@ -3059,7 +3183,7 @@ const footerGroups = [
 		links: [
 			{ label: "About", href: "/about" },
 			{ label: "Security", href: "/security" },
-			{ label: "Customers", href: "/customers" },
+			{ label: "Customers", href: "#customers" },
 			{ label: "Careers", href: "/careers" },
 		],
 	},
@@ -3074,10 +3198,10 @@ const footerGroups = [
 	},
 ]
 
-const footerSignals = [
-	{ label: "Uptime", value: "99.98%" },
-	{ label: "Regions", value: "12" },
-	{ label: "Response", value: "42s" },
+const legalLinks = [
+	{ label: "Privacy", href: "/privacy" },
+	{ label: "Terms", href: "/terms" },
+	{ label: "Contact", href: "/contact" },
 ]
 
 export function BrandLandingPage() {
@@ -3098,8 +3222,8 @@ export function BrandLandingPage() {
 						<div className="hidden lg:block">
 							<Row gap={1}>
 								{navItems.map((item) => (
-									<Button key={item} variant="ghost" size="sm" render={<a href={`#${item.toLowerCase()}`} />}>
-										{item}
+									<Button key={item.label} variant="ghost" size="sm" render={<a href={item.href} />}>
+										{item.label}
 									</Button>
 								))}
 							</Row>
@@ -3117,16 +3241,16 @@ export function BrandLandingPage() {
 			</header>
 
 			<main>
-				<Region as="section" max="wide" className="pb-16 pt-14 sm:pt-20 lg:pb-24">
-					<div className="grid items-center gap-10 lg:grid-cols-[0.92fr_1.08fr]">
-						<Stack gap={4} className="max-w-3xl">
+				<Region as="section" max="wide" className="pb-20 pt-14 sm:pt-20 lg:pb-28">
+					<div className="grid items-center gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-10">
+						<Stack gap={3} className="max-w-2xl">
 							<Badge appearance="outline" icon={<Icon name="lock" className="text-sm" />}>
 								Private operations, made legible
 							</Badge>
 							<TextReveal
 								as="h1"
-								text="A calmer command center for high-trust digital work"
-								className="max-w-4xl text-balance text-display-xl sm:text-display-3xl"
+								text="A calmer command center for high-trust work"
+								className="text-balance text-display-lg sm:text-display-2xl"
 								once
 							/>
 							<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">
@@ -3134,89 +3258,96 @@ export function BrandLandingPage() {
 								surface: approvals, signals, records, and handoffs in one
 								understandable flow.
 							</p>
-							<Row gap={2} wrap>
+							<Row gap={2} wrap className="pt-3">
 								<Button size="cta" render={<a href="/demo" />}>
 									Book a walkthrough
 								</Button>
 								<Button size="cta" variant="outline" render={<a href="#platform" />}>
-									Explore platform
+									Explore the platform
 								</Button>
 							</Row>
 						</Stack>
 
-						<div className="relative">
-							{/* Nested surfaces take concentric corners: each level's radius is
-							    the shell's xl minus every inset between it and the shell edge. */}
-							<div className="overflow-hidden rounded-xl border border-border-floating bg-overlay p-3 text-overlay-foreground shadow-xl">
-								<div className="rounded-concentric-xl/3 border border-overlay-foreground/10 bg-overlay-foreground/8">
-									<div className="flex items-center justify-between border-b border-overlay-foreground/10 px-4 py-3">
+						{/* The product scene is a dark island: `dark` re-scopes every
+						    semantic token, so its surfaces, muted ink and status tones
+						    are the theme's own dark values in either page mode. It is a
+						    picture of the product, so it stays out of the tab order and
+						    the accessibility tree; the hero copy carries its meaning. */}
+						<div className="dark" aria-hidden inert>
+							<div className="overflow-hidden rounded-xl border border-border-floating bg-popover p-3 text-popover-foreground shadow-xl">
+								{/* Nested surfaces take concentric corners: each level's radius is
+								    the shell's xl minus every inset between it and the shell edge. */}
+								<div className="rounded-concentric-xl/3 border border-border bg-card">
+									<div className="flex items-center justify-between border-b border-border px-4 py-3">
 										<Row gap={1}>
 											<StatusDot tone="warning" />
 											<StatusDot tone="edition" />
 											<StatusDot tone="success" />
 										</Row>
-										<span className="text-label-sm text-overlay-foreground/70">Live workspace</span>
+										<span className="text-label-sm text-muted-foreground">Live workspace</span>
 									</div>
 									<div className="grid gap-3 p-3 md:grid-cols-[0.7fr_1.3fr]">
-										<div className="space-y-3">
-											<div className="rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4">
-												<p className="text-label-sm text-overlay-foreground/60">Spaces</p>
+										<div className="space-y-3 max-md:hidden">
+											<div className="rounded-concentric-xl/6 border border-border bg-background p-4">
+												<p className="text-label-sm text-muted-foreground">Spaces</p>
 												<div className="mt-4 space-y-2">
-													{reviews.map((review) => (
-														<div key={review.name} className="rounded-concentric-xl/10 bg-overlay p-3">
+													{spaces.map((space) => (
+														<div key={space.name} className="rounded-concentric-xl/10 bg-card p-3">
 															<Row justify="between">
-																<span className="text-title-sm">{review.name}</span>
-																<span className="text-mono-sm text-overlay-foreground">{review.value}</span>
+																<span className="text-title-sm">{space.name}</span>
+																<span className="text-mono-sm">{space.value}</span>
 															</Row>
-															<p className="mt-1 text-body-xs text-overlay-foreground/60">{review.label}</p>
+															<p className="mt-1 text-body-xs text-muted-foreground">{space.label}</p>
 														</div>
 													))}
 												</div>
 											</div>
-											<div className="rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4">
+											<div className="rounded-concentric-xl/6 border border-border bg-background p-4">
 												<Row justify="between">
 													<span className="text-title-sm">Route status</span>
-													<Badge tone="success" size="sm">Healthy</Badge>
+													<Badge tone="success" size="sm" dot>
+														Healthy
+													</Badge>
 												</Row>
 												<div className="mt-4 space-y-2">
-													{workflow.map((item) => (
-														<Row key={item.label} justify="between" className="rounded-full bg-overlay px-3 py-2">
+													{routes.map((route) => (
+														<Row key={route.label} justify="between" className="rounded-full bg-card px-3 py-2">
 															<Row gap={1}>
-																<StatusDot tone={item.tone} />
-																<span className="text-body-sm">{item.label}</span>
+																<StatusDot tone={route.tone} />
+																<span className="text-body-sm">{route.label}</span>
 															</Row>
-															<span className="text-label-sm text-overlay-foreground/60">{item.state}</span>
+															<span className="text-label-sm text-muted-foreground">{route.state}</span>
 														</Row>
 													))}
 												</div>
 											</div>
 										</div>
 
-										<div className="rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4">
-											<Row justify="between" className="border-b border-overlay-foreground/10 pb-4">
+										<div className="rounded-concentric-xl/6 border border-border bg-background p-4">
+											<Row justify="between" className="border-b border-border pb-4">
 												<div>
-													<p className="text-label-sm text-overlay-foreground/60">Signal map</p>
-													<h2 className="mt-1 text-heading-3">Every approval path in view</h2>
+													<p className="text-label-sm text-muted-foreground">Signal map</p>
+													<p className="mt-1 text-heading-4 sm:text-heading-3">Every approval path in view</p>
 												</div>
 												<Button variant="secondary" size="sm">Review</Button>
 											</Row>
-											<div className="mt-6 grid min-h-72 grid-rows-[1fr_auto] gap-5">
-												<div className="grid grid-cols-9 items-end gap-2 rounded-concentric-xl/10 bg-overlay p-4">
-													{bars.map((bar, index) => (
-														<div key={`${bar.tone}-${index}`} className="flex h-56 items-end">
+											<div className="mt-5 grid gap-4 sm:mt-6 sm:gap-5">
+												<div className="grid grid-cols-9 items-end gap-1.5 rounded-concentric-xl/10 bg-card p-4 sm:gap-2">
+													{bars.map((bar) => (
+														<div key={bar.week} className="flex h-36 items-end sm:h-56">
 															<div
-																className={`w-full rounded-full ${bar.tone}`}
+																className={`w-full rounded-full ${bar.current ? "bg-success" : "bg-secondary"}`}
 																style={{ height: bar.height }}
 															/>
 														</div>
 													))}
 												</div>
-												<div className="grid gap-2 sm:grid-cols-3">
-													{metrics.map((metric) => (
-														<div key={metric.label} className="rounded-concentric-xl/10 border border-overlay-foreground/10 bg-overlay p-3">
-															<p className="text-label-sm text-overlay-foreground/60">{metric.label}</p>
-															<p className="mt-2 text-heading-3">{metric.value}</p>
-															<p className="mt-1 text-body-xs text-overlay-foreground/60">{metric.detail}</p>
+												<div className="grid grid-cols-3 gap-2">
+													{sceneMetrics.map((metric) => (
+														<div key={metric.label} className="rounded-concentric-xl/10 border border-border bg-card p-3">
+															<p className="truncate text-label-sm text-muted-foreground">{metric.label}</p>
+															<p className="mt-2 text-heading-4 sm:text-heading-3">{metric.value}</p>
+															<p className="mt-1 text-body-xs text-muted-foreground max-sm:hidden">{metric.detail}</p>
 														</div>
 													))}
 												</div>
@@ -3229,54 +3360,136 @@ export function BrandLandingPage() {
 					</div>
 				</Region>
 
-				<section id="platform" className="border-y border-border bg-muted/40 py-14">
+				<section id="platform" aria-labelledby="brand-platform-title" className="border-y border-border bg-muted/40 py-20 lg:py-28">
 					<Region max="wide">
-						<div className="grid gap-5 lg:grid-cols-[0.8fr_1.2fr]">
-							<Stack gap={3}>
-								<Badge>Design mood</Badge>
-								<h2 className="text-heading-1">Marketing warmth, product discipline.</h2>
-								<p className="max-w-(--measure-prose) text-body-md text-muted-foreground">
-									The page uses a pill nav, tactile surfaces, soft status tones, and
-									slower ease-out movement. It stays broad in color so it does not
-									collapse into purple-brand sameness.
+						<Stack gap={6}>
+							<Stack gap={2} className="max-w-2xl">
+								<p className="text-overline text-muted-foreground">Why Cove</p>
+								<h2 id="brand-platform-title" className="text-balance text-heading-1">
+									One private workspace for the decisions that matter.
+								</h2>
+								<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">
+									Most operations work lives in threads, spreadsheets, and memory.
+									Cove gives it a home: every request routed, every signal visible,
+									every outcome on the record.
 								</p>
 							</Stack>
-							<div className="grid gap-3 md:grid-cols-3">
-								{features.map((feature) => (
-									<Card key={feature.title} render={<article />} className="h-full">
-										<CardContent>
-											<span className="grid size-10 place-items-center rounded-md bg-highlight text-highlight-foreground">
-												<Icon name={feature.icon} className="text-xl" />
-											</span>
-											<h3 className="mt-5 text-title-lg">{feature.title}</h3>
-											<p className="mt-2 text-body-sm text-muted-foreground">{feature.body}</p>
-										</CardContent>
-									</Card>
-								))}
-							</div>
-						</div>
+							<Reveal>
+								<Grid minItemWidth="calc(var(--spacing) * 64)" gap={2}>
+									{values.map((value) => (
+										<Card key={value.title} render={<article />} className="h-full">
+											<CardContent className="flex flex-col gap-2">
+												<span className="mb-4 grid size-11 place-items-center rounded-md border border-border sable-well">
+													<Icon name={value.icon} className="text-xl" />
+												</span>
+												<h3 className="text-title-lg">{value.title}</h3>
+												<p className="text-body-sm text-muted-foreground">{value.body}</p>
+											</CardContent>
+										</Card>
+									))}
+								</Grid>
+							</Reveal>
+						</Stack>
 					</Region>
 				</section>
 
-				<Region as="section" max="wide" className="py-14">
-					<div className="grid gap-3 md:grid-cols-3">
-						{metrics.map((metric) => (
-							<Card key={metric.label}>
-								<CardContent>
-									<p className="text-label-md text-muted-foreground">{metric.label}</p>
-									<p className="mt-3 text-display-lg">{metric.value}</p>
-									<p className="mt-1 text-body-sm text-muted-foreground">{metric.detail}</p>
+				<Region as="section" id="how-it-works" aria-labelledby="brand-steps-title" max="wide" className="py-20 lg:py-28">
+					<div className="grid gap-12 lg:grid-cols-[1fr_2fr] lg:gap-16">
+						<Stack gap={2} className="max-w-md">
+							<p className="text-overline text-muted-foreground">How it works</p>
+							<h2 id="brand-steps-title" className="text-balance text-heading-1">
+								From request to sealed record.
+							</h2>
+							<p className="text-body-md text-muted-foreground">
+								Teams are usually live within a week. Cove adapts to the routes
+								you already run instead of asking you to start over.
+							</p>
+							<div className="pt-3">
+								<Button variant="outline" iconEnd={<Icon name="arrow-right" />} render={<a href="/guides/rollout" />}>
+									Read the rollout guide
+								</Button>
+							</div>
+						</Stack>
+						<ol className="grid gap-10 sm:grid-cols-3 sm:gap-6">
+							{steps.map((step) => (
+								<li key={step.number} className="flex flex-col gap-2 border-t border-border-strong pt-6">
+									<span className="text-mono-sm text-muted-foreground">{step.number}</span>
+									<h3 className="mt-3 text-title-lg sm:mt-6">{step.title}</h3>
+									<p className="text-body-sm text-muted-foreground">{step.body}</p>
+								</li>
+							))}
+						</ol>
+					</div>
+				</Region>
+
+				<Region as="section" id="customers" aria-label="Customer story" max="wide" className="pb-20 lg:pb-28">
+					<Card render={<figure />}>
+						<div className="grid lg:grid-cols-[1.5fr_1fr]">
+							<CardContent className="flex flex-col justify-between gap-10 sm:p-10">
+								<Stack gap={3}>
+									<p className="text-overline text-muted-foreground">Customer story</p>
+									<blockquote className="text-balance text-heading-3 sm:text-heading-2">
+										“We used to chase approvals across four tools. Now every request
+										has an owner, a deadline, and a record, and our auditors stopped
+										asking for screenshots.”
+									</blockquote>
+								</Stack>
+								<figcaption className="flex items-center gap-3">
+									<Avatar size="lg" fallback="MO" />
+									<div>
+										<p className="text-title-sm">Maya Okafor</p>
+										<p className="text-body-sm text-muted-foreground">Head of operations, Fielddesk</p>
+									</div>
+								</figcaption>
+							</CardContent>
+							<div className="border-border max-lg:border-t lg:border-s">
+								<CardContent className="flex h-full flex-col justify-center gap-6 sm:p-10">
+									{outcomes.map((outcome, index) => (
+										<Stack key={outcome.label} gap={3}>
+											{index > 0 && <Separator />}
+											<div>
+												<p className="text-heading-1 sm:text-display-lg">{outcome.value}</p>
+												<p className="mt-1 text-body-sm text-muted-foreground">{outcome.label}</p>
+											</div>
+										</Stack>
+									))}
 								</CardContent>
-							</Card>
-						))}
+							</div>
+						</div>
+					</Card>
+				</Region>
+
+				<Region as="section" aria-labelledby="brand-cta-title" max="wide" className="pb-20 lg:pb-28">
+					<div className="dark">
+						<div className="rounded-xl border border-border bg-card px-6 py-12 text-card-foreground sm:px-12 sm:py-16">
+							<div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
+								<Stack gap={3} className="max-w-2xl">
+									<h2 id="brand-cta-title" className="text-balance text-heading-1">
+										See your own approval paths in Cove.
+									</h2>
+									<p className="text-body-lg text-muted-foreground">
+										A 30-minute walkthrough with your routes, your roles, and your
+										records. No slides.
+									</p>
+								</Stack>
+								<Row gap={2} wrap>
+									<Button size="cta" render={<a href="/demo" />}>
+										Book a walkthrough
+									</Button>
+									<Button size="cta" variant="ghost" render={<a href="/pricing" />}>
+										View pricing
+									</Button>
+								</Row>
+							</div>
+						</div>
 					</div>
 				</Region>
 			</main>
 
 			<footer className="border-t border-border bg-muted/35">
-				<Region max="wide" className="py-10 sm:py-12">
-					<div className="grid gap-8 lg:grid-cols-[1fr_1.35fr_1fr]">
-						<Stack gap={3} className="max-w-md">
+				<Region max="wide" className="py-12 sm:py-16">
+					<div className="grid gap-10 lg:grid-cols-[1fr_1.35fr_1fr] lg:gap-8">
+						<Stack gap={4} className="max-w-sm">
 							<a href="/" className="flex w-fit items-center gap-2 rounded-full motion-interactive motion-press">
 								<span className="grid size-9 place-items-center rounded-full bg-primary text-primary-foreground">
 									<Icon name="sparkles" className="text-sm" />
@@ -3287,20 +3500,15 @@ export function BrandLandingPage() {
 								A calm operating surface for teams that need trust, speed, and
 								context without the noise.
 							</p>
-							<Row gap={1} wrap>
-								<Badge size="sm" icon={<Icon name="lock" />}>
-									Private
-								</Badge>
-								<Badge tone="success" size="sm" icon={<Icon name="circle-check" />}>
-									Live
-								</Badge>
-							</Row>
+							<Badge appearance="plain" tone="success" dot>
+								All systems normal
+							</Badge>
 						</Stack>
 
-						<nav aria-label="Footer" className="grid gap-6 sm:grid-cols-3">
+						<nav aria-label="Footer" className="grid grid-cols-3 gap-6">
 							{footerGroups.map((group) => (
 								<div key={group.title}>
-									<h2 className="text-label-md text-muted-foreground">{group.title}</h2>
+									<h2 className="text-label-md">{group.title}</h2>
 									<ul className="mt-3 space-y-1">
 										{group.links.map((link) => (
 											<li key={link.label}>
@@ -3317,22 +3525,17 @@ export function BrandLandingPage() {
 							))}
 						</nav>
 
-						<Card>
+						<Card className="h-fit">
 							<CardHeader>
 								{/* CardTitle carries the type; the h2 inside it keeps the outline. */}
 								<CardTitle>
-									<h2>Signal digest</h2>
+									<h2>The Cove digest</h2>
 								</CardTitle>
 								<CardDescription>
-									One weekly note on trusted workflows and product releases.
+									One note a month on trusted workflows and product releases.
 								</CardDescription>
-								<CardAction>
-									<span className="grid size-9 place-items-center rounded-full bg-highlight text-highlight-foreground">
-										<Icon name="sparkles" className="text-sm" />
-									</span>
-								</CardAction>
 							</CardHeader>
-							<CardContent className="flex flex-col gap-4">
+							<CardContent>
 								<form action="/newsletter" className="grid gap-2 sm:grid-cols-[1fr_auto]">
 									<label htmlFor="brand-footer-email" className="sr-only">
 										Work email
@@ -3345,42 +3548,25 @@ export function BrandLandingPage() {
 										placeholder="you@company.com"
 									/>
 									<Button type="submit" className="w-full sm:w-auto">
-										Join
+										Subscribe
 									</Button>
 								</form>
-								<div className="grid grid-cols-3 gap-2">
-									{footerSignals.map((signal) => (
-										<div key={signal.label} className="rounded-md bg-muted p-3">
-											<p className="text-mono-sm">{signal.value}</p>
-											<p className="mt-1 text-caption text-muted-foreground">{signal.label}</p>
-										</div>
-									))}
-								</div>
 							</CardContent>
 						</Card>
 					</div>
 
-					<div className="mt-10 flex flex-col gap-3 border-t border-border pt-5 text-caption text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+					<div className="mt-12 flex flex-col gap-3 border-t border-border pt-6 text-caption text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
 						<p>© 2026 Cove. All rights reserved.</p>
-						<Row gap={3} wrap>
-							<a
-								href="/privacy"
-								className="flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground"
-							>
-								Privacy
-							</a>
-							<a
-								href="/terms"
-								className="flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground"
-							>
-								Terms
-							</a>
-							<a
-								href="/contact"
-								className="flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground"
-							>
-								Contact
-							</a>
+						<Row gap={4} wrap>
+							{legalLinks.map((link) => (
+								<a
+									key={link.label}
+									href={link.href}
+									className="flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground"
+								>
+									{link.label}
+								</a>
+							))}
 						</Row>
 					</div>
 				</Region>
@@ -3406,7 +3592,11 @@ A full-height conversation surface: titled header, scrolling transcript, and a c
 - Region cap is `feed` (640px) — a conversation is a reading column, and the Bubble measure cap is tuned to the same assumption.
 - The composer sits outside the scroll region, in a bordered CardFooter, so it stays put while the transcript moves.
 - Grouping is derived from the data (`turns[i - 1].mine === turn.mine`) rather than hand-set, and the tail is dropped on continuations — that pairing is what makes a run read as one block.
-- The assistant's long-form answer uses `variant="plain"`. A tinted box around a code block reads as a quote rather than as a turn.
+- What the assistant did before answering — a doc it read, a tool it ran — is a `Marker variant="note"` in that message's `header`, so it reads as part of the turn rather than as an event between turns.
+- The assistant's long-form answer uses `variant="plain"` and continues the same grouped run. A tinted box around a code block reads as a quote rather than as a turn. A plain Bubble sizes to its content with no measure cap, so it takes `max-w-full` here: bounded by the column, a wide code line scrolls inside the CodeBlock instead of pushing the transcript sideways on a phone.
+- A settled answer carries its actions (copy, regenerate) in the Message `footer` as a `Toolbar` of icon `ToolbarButton`s with tooltips — one tab stop, arrow keys between them. The answer still streaming has none: there is nothing to copy or regenerate until it settles, and Stop lives in the composer.
+- One turn, one Message: the reader's question and the file it refers to stack inside a single end-aligned Message rather than being sent as two.
+- Assistant turns share one Avatar with a glyph fallback and `alt="Assistant"` — initials like "AI" read as a person, and a fallback-only avatar is otherwise unnamed.
 - The answer in flight is a `StreamingText` in a `plain` Bubble, and ONE `pending` flag drives both it and the composer's `busy`. They are the same wait reported at the two ends of the panel; letting them drift gives you a composer still saying 'sending' under an answer that already finished.
 - A spinner `Marker` (or `ThinkingOrb`) belongs BEFORE the first token and is replaced once tokens land, not kept alongside. Two indicators for one wait read as two things happening — which is also why `StreamingText` takes `caret={false}` when something adjacent already reports it.
 - MessageScroller needs no configuring for this: it re-follows on "a message grew" (ResizeObserver) as well as "a message arrived", so the newest token stays pinned while a reader who has scrolled up is left alone.
@@ -3416,12 +3606,12 @@ A full-height conversation surface: titled header, scrolling transcript, and a c
 
 - The panel header's title is the page's <h1> (an h1 inside CardTitle, which carries the type); the transcript is a scroll region with native overflow, so keyboard scrolling works unchanged.
 - The answer in flight carries `aria-busy` rather than sitting in a live region. That is deliberate: a live region around streamed text announces every token, which is unusable. Announce once when the turn settles, from whatever owns the turn — the incomplete state is still exposed, just not narrated.
-- The composer is a real <form> whose Enter handling skips IME composition, and every icon-only control in the panel carries an accessible label.
+- The composer is a real <form> whose Enter handling skips IME composition, and every icon-only control in the panel carries an accessible label — the answer actions also carry a tooltip, and the stop control is named for what it stops (`stopLabel="Stop answering"`).
 
 ## Source
 
 ```tsx
-import { Attachment, Avatar, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, ChatComposer, CodeBlock, Icon, Marker, MenuRadioGroup, MenuRadioItem, Message, MessageScroller, Page, SettingsMenu, SettingsRow, StreamingText } from "@sableui/react"
+import { Attachment, Avatar, Bubble, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, ChatComposer, CodeBlock, Icon, Marker, MenuRadioGroup, MenuRadioItem, Message, MessageScroller, Page, SettingsMenu, SettingsRow, SimpleTooltip, StreamingText, Toolbar, ToolbarButton } from "@sableui/react"
 
 /**
  * The request is in flight. In an app this is your send state — from `useChat`,
@@ -3434,9 +3624,14 @@ const pending = true
 
 /** The answer so far. Append tokens to this; `StreamingText` assumes it only grows. */
 const streamed =
-	"Anchor on the oldest rendered message and add back however far it moved. Appends"
+	"Yes, appends are already safe: your layout effect measures before paint. The jump is on the prepend path, which reads scrollHeight after the new rows"
 
-const turns = [
+/**
+ * The opening exchange. `step` is what the assistant did before answering — a
+ * doc it read, a tool it ran — and it rides in that message's header, so it
+ * reads as part of the turn rather than as an event between turns.
+ */
+const turns: { id: string; mine: boolean; step?: string; body: string }[] = [
 	{
 		id: "t_01",
 		mine: true,
@@ -3445,6 +3640,7 @@ const turns = [
 	{
 		id: "t_02",
 		mine: false,
+		step: "Read message-scroller.md",
 		body: "Almost always the anchor. If you preserve the scroll position by measuring the container, prepending history moves everything under the reader.",
 	},
 	{
@@ -3455,6 +3651,19 @@ const turns = [
 ]
 
 export function ChatPanel() {
+	// One identity for every assistant turn. A glyph rather than initials: "AI"
+	// in a circle reads as a person called A. I. The glyph is sized to the
+	// circle (the fallback's own size is tuned for two letters, and a lone icon
+	// at that size reads as a speck); `alt` names it for a screen reader, which
+	// otherwise gets nothing from a fallback-only avatar.
+	const assistant = (
+		<Avatar
+			size="sm"
+			alt="Assistant"
+			fallback={<Icon name="sparkles" className="text-base" />}
+		/>
+	)
+
 	return (
 		<Page as="main" max="feed" gap={0} className="py-6">
 			{/* h-dvh minus the page's own padding (py-6 = 12 spacing units, in
@@ -3473,8 +3682,12 @@ export function ChatPanel() {
 					</CardTitle>
 					<CardDescription>Assistant · answers from your team's docs</CardDescription>
 					<CardAction>
-						<Button variant="outline" size="icon-sm" aria-label="Start a new chat">
-							<Icon name="plus" />
+						{/* Labelled, not a bare plus: the composer already has a plus
+						    (attach), and two identical glyphs a panel apart that do
+						    different things is a guessing game. */}
+						<Button variant="ghost" size="sm">
+							<Icon name="edit" />
+							New chat
 						</Button>
 					</CardAction>
 				</CardHeader>
@@ -3484,32 +3697,67 @@ export function ChatPanel() {
 				<MessageScroller className="min-h-0 flex-1 p-(--card-p)">
 					<Marker variant="separator">Today</Marker>
 
-					{turns.map((turn, i) => (
-						<Message
-							key={turn.id}
-							messageId={turn.id}
-							align={turn.mine ? "end" : "start"}
-							grouped={i > 0 && turns[i - 1].mine === turn.mine}
-							avatar={turn.mine ? undefined : <Avatar size="sm" fallback="AI" />}
-						>
-							<Bubble
-								variant={turn.mine ? "primary" : "muted"}
+					{turns.map((turn, i) => {
+						// Derived, not hand-set: a turn continues a run when the one
+						// before it has the same author. A continuation drops its
+						// avatar (Message keeps the column) AND its tail (Bubble keeps
+						// the ear's space) — together, that makes the run one block.
+						const continues = i > 0 && turns[i - 1].mine === turn.mine
+						return (
+							<Message
+								key={turn.id}
+								messageId={turn.id}
 								align={turn.mine ? "end" : "start"}
-								tail={i === 0 || turns[i - 1].mine !== turn.mine}
+								grouped={continues}
+								avatar={turn.mine ? undefined : assistant}
+								header={
+									turn.step ? (
+										<Marker variant="note" icon="book" className="justify-start">
+											{turn.step}
+										</Marker>
+									) : undefined
+								}
 							>
-								{turn.body}
-							</Bubble>
-						</Message>
-					))}
-
-					<Marker variant="note" icon="sparkles">
-						Read message-scroller.md
-					</Marker>
-
-					{/* An assistant's long-form answer: no bubble, because a tinted box
-					    around a code block reads as a quote rather than as a turn. */}
-					<Message messageId="t_04" avatar={<Avatar size="sm" fallback="AI" />}>
-						<Bubble variant="plain">
+								<Bubble
+									variant={turn.mine ? "primary" : "muted"}
+									align={turn.mine ? "end" : "start"}
+									tail={!continues}
+								>
+									{turn.body}
+								</Bubble>
+							</Message>
+						)
+					})}
+
+					{/* The same run, continued: long-form output with no bubble,
+					    because a tinted box around a code block reads as a quote
+					    rather than as a turn. Its footer carries what the reader does
+					    WITH a settled answer, as a Toolbar: one tab stop, arrow keys
+					    between the actions. */}
+					<Message
+						messageId="t_04"
+						grouped
+						avatar={assistant}
+						footer={
+							<Toolbar aria-label="Answer actions">
+								<SimpleTooltip content="Copy answer">
+									<ToolbarButton size="icon-sm" aria-label="Copy answer">
+										<Icon name="copy" />
+									</ToolbarButton>
+								</SimpleTooltip>
+								<SimpleTooltip content="Regenerate">
+									<ToolbarButton size="icon-sm" aria-label="Regenerate answer">
+										<Icon name="refresh" />
+									</ToolbarButton>
+								</SimpleTooltip>
+							</Toolbar>
+						}
+					>
+						{/* max-w-full: a plain Bubble sizes to its content with no
+						    measure cap, and a code line is wider than a phone. Bounded
+						    by the column, the CodeBlock scrolls inside itself instead of
+						    pushing the whole transcript sideways. */}
+						<Bubble variant="plain" className="max-w-full">
 							<p className="text-body-md text-foreground">
 								Here is the shape of it:
 							</p>
@@ -3520,28 +3768,46 @@ export function ChatPanel() {
 								filename="preserve.ts"
 							/>
 						</Bubble>
-						<BubbleReactions>
-							<BubbleReaction emoji="🎯" count={2} active />
-						</BubbleReactions>
 					</Message>
 
+					{/* The reader's follow-up is one turn: the question and the file
+					    it refers to stack in a single Message, so they share a side, an
+					    edge and a timestamp rather than reading as two sends. */}
 					<Message messageId="t_05" align="end">
-						<Attachment name="scroller.tsx" meta="4.2 KB · TSX" />
+						<Bubble variant="primary" align="end">
+							Here's ours. Does the same fix cover new messages arriving?
+						</Bubble>
+						<Attachment
+							name="scroller.tsx"
+							meta="4.2 KB · TSX"
+							onOpen={() => undefined}
+						/>
 					</Message>
 
 					{/* The answer arriving. A `Marker` with a spinner — or ThinkingOrb —
 					    is what sits here BEFORE the first token; once tokens land it is
 					    replaced rather than kept, because two indicators for one wait
-					    read as two things happening.
+					    read as two things happening. What stays is the step it took,
+					    as a finished note in the header.
 
-					    No bubble, same as the long-form answer above: a tinted box around
-					    a growing paragraph makes the reflow look like the box breathing.
+					    No bubble, same as the long-form answer above: a tinted box
+					    around a growing paragraph makes the reflow look like the box
+					    breathing. And no answer actions yet — there is nothing to copy
+					    or regenerate until it settles; Stop lives in the composer.
 
 					    MessageScroller needs no help with this — it already re-follows on
 					    "a message grew" (ResizeObserver), not just on "a message arrived",
 					    so the newest token stays pinned while the reader can still scroll
 					    up without being yanked back. */}
-					<Message messageId="t_06" avatar={<Avatar size="sm" fallback="AI" />}>
+					<Message
+						messageId="t_06"
+						avatar={assistant}
+						header={
+							<Marker variant="note" icon="file" className="justify-start">
+								Read scroller.tsx
+							</Marker>
+						}
+					>
 						<Bubble variant="plain">
 							<StreamingText text={streamed} streaming={pending} />
 						</Bubble>
@@ -3557,6 +3823,7 @@ export function ChatPanel() {
 						// second request on top of the one still running.
 						busy={pending}
 						onStop={() => undefined}
+						stopLabel="Stop answering"
 						onAttach={() => undefined}
 						footer="Enter to send · Shift+Enter for a new line"
 						// Model and effort sit in `actions`, at the send end of the row:
@@ -3607,59 +3874,102 @@ export function ChatPanel() {
 
 # DashboardPage
 
-App-shell dashboard: sidebar chrome (AppHeader + BottomNav below lg), a wide content region, a stat-card row that breathes, and a data table — the default shape for operator/analytics home routes.
+App-shell creator dashboard: a branded Sidebar with an account footer (AppHeader + BottomNav below lg), a KPI row, an edge-to-edge editions table with sell-through Meters, and supporting payout, collector, release and activity cards — the default shape for an operator or analytics home route.
 
-**Intent:** Reach for this when a route's job is monitoring or managing many records (metrics, deployments, orders, posts). Not for reading-focused routes (use FeedPage) or single-record routes (use ListDetailPage's detail side).
+**Intent:** Reach for this when a route's job is monitoring or managing many records (sales, orders, editions, posts) with a few headline numbers. Not for reading-focused routes (use FeedPage) or single-record routes (use ListDetailPage's detail side).
 
 ## Notes
 
 - Region cap is `wide` (1280px): dashboards hold tables and multi-column grids, never a reading column.
-- Stat cards: CardHeader carries label (CardDescription) + value + trend badge (CardAction pins it top-right); KPI values are `text-mono-xl` — the metric mono tier, tabular figures — never a heading tier.
-- Stat cards use an explicit cols map (1 → 2 → 4) — a 4-stat row must fold to 2×2, never strand an orphan the way auto-fit can.
-- The table runs flush to the card edges with `<CardContent flush>`, which hands the card's padding to the table (`--table-edge-px`), so the first and last columns line up with the CardHeader at any card density — never hand-set pl-6/pr-6. Numeric columns align end in mono.
-- The Activity list is Entity rows in CardList, inset to the card padding and divided by hairlines — the same list shape as ListDetailPage, never CardContent with hand-tuned px.
-- Believable density is part of the pattern: 7 rows, commit hashes in mono-caption, RelativeTime muted — never 3 rows of filler.
+- Hierarchy runs headline → records → context: KPI row, then the primary table beside its two closest companions (payout, top collectors), then the lower-priority lists (upcoming, activity). Every row of the grid is filled so the route ends on content, not empty canvas.
+- Stat cards: CardHeader carries the label (CardDescription) and the value; KPI values are `text-mono-xl` — the metric mono tier, tabular figures — never a heading tier. The trend Badge sits with its comparison note in CardContent, so the value keeps the full card width when the row folds to 2×2 on a phone.
+- Stat cards use an explicit cols map (2 → 4) — a 4-stat row must fold to 2×2, never strand an orphan the way auto-fit can.
+- The table runs flush to the card edges with `<CardContent flush>`, which hands the card's padding to the table (`--table-edge-px`), so the first and last columns line up with the CardHeader at any card density — never hand-set pl-6/pr-6. Numeric columns align end in mono; Table scrolls horizontally inside the card on narrow screens.
+- Sold / supply is a `Meter` (how full a known range is), not `Progress` (task progress). Status is `Badge appearance="plain" dot`, with the app's own states mapped to tones once at the top of the file.
+- Lists are Entity rows in CardList, inset to the card padding and divided by hairlines — never CardContent with hand-tuned px. A card that shares a grid row with a taller one becomes `flex flex-col` and pins its CardFooter with `mt-auto`.
+- Brand and account live in the Sidebar: SidebarHeader holds the mark + wordmark, SidebarFooter holds the signed-in Entity with a DotsMenu. The footer rebinds `--foreground` to `--sidebar-foreground`, because Entity's title and the ghost trigger ink with page tokens and a theme may paint the rail dark on a light page; it keeps to a title line, since there is no sidebar-muted ink for a subtitle.
 - The page has exactly one heading-1 (PageHeader); card titles are Title tier, not headings.
 - Chrome (Sidebar) is outside the content grid; the Page region caps only content.
-- Sidebar hides below lg, so the shell's header carries an AppHeader and its footer a BottomNav with the same destinations — never strand mobile users without navigation.
+- Sidebar hides below lg, so the shell's header carries an AppHeader (brand + account) and its footer a BottomNav with the same destinations — never strand mobile users without navigation.
 
 ## Accessibility
 
 - AppShell provides the skip link and <main id="main-content"> landmark.
 - The active SidebarItem and BottomNavItem carry aria-current via `active`.
 - DataTable headers are real <th>; sortable columns are announced.
+- Each sell-through Meter has an aria-label naming the edition and aria-valuetext reading "184 of 250 sold".
+- Avatars beside a visible name use an empty alt so the name is not read twice.
 
 ## Source
 
 ```tsx
-import { AppHeader, AppShell, Avatar, Badge, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardHeader, CardList, CardTitle, DataTable, Entity, Grid, Icon, Page, PageHeader, RelativeTime, Row, Sidebar, SidebarHeader, SidebarItem, SidebarNav } from "@sableui/react"
+import { AppHeader, AppShell, Avatar, Badge, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, DataTable, DotsMenu, Entity, Grid, Icon, MenuItem, MenuSeparator, Meter, NotificationBadge, Page, PageHeader, RelativeTime, Row, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Stack } from "@sableui/react"
+
+// Edition status → Badge tone. Sable has no status vocabulary of its own;
+// an app maps ITS states onto tones once, here, and every badge follows.
+const STATUS_TONE = { live: "success", scheduled: "info", "sold-out": "edition", closed: "neutral" } as const
+const STATUS_LABEL = { live: "Live", scheduled: "Scheduled", "sold-out": "Sold out", closed: "Closed" } as const
+type EditionStatus = keyof typeof STATUS_TONE
 
 const MIN = 60 * 1000
 const HOUR = 60 * MIN
+const DAY = 24 * HOUR
+
+const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })
+const usdCents = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
+const shortDate = (offset: number) =>
+	new Date(Date.now() + offset).toLocaleDateString("en-US", { month: "short", day: "numeric" })
 
 const stats = [
-	{ label: "Revenue", value: "$12,480", delta: "+8.2%", up: true, note: "vs. previous 30 days" },
-	{ label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 from new collectors" },
-	{ label: "New collectors", value: "312", delta: "+12.4%", up: true, note: "best month this year" },
-	{ label: "Sell-through", value: "64%", delta: "−1.8%", up: false, note: "across 48 active editions" },
+	{ label: "Revenue", value: "$18,240", delta: "+8.2%", up: true, note: "vs. $16,857" },
+	{ label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 first-time" },
+	{ label: "Collectors", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
+	{ label: "Sell-through", value: "64%", delta: "−1.8%", up: false, note: "6 open editions" },
 ]
 
-const deployments = [
-	{ id: "dp_01", project: "storefront", commit: "a41f2c9", status: "ready" as const, duration: "42s", updated: 2 * MIN },
-	{ id: "dp_02", project: "api", commit: "7c03bd1", status: "building" as const, duration: "1m 08s", updated: 9 * MIN },
-	{ id: "dp_03", project: "docs", commit: "e992a70", status: "queued" as const, duration: "—", updated: 12 * MIN },
-	{ id: "dp_04", project: "worker", commit: "51b8e04", status: "failed" as const, duration: "18s", updated: 1 * HOUR },
-	{ id: "dp_05", project: "storefront", commit: "90cc41a", status: "ready" as const, duration: "39s", updated: 3 * HOUR },
-	{ id: "dp_06", project: "renderer", commit: "b7714dd", status: "ready" as const, duration: "2m 31s", updated: 5 * HOUR },
-	{ id: "dp_07", project: "api", commit: "f30a9e2", status: "ready" as const, duration: "1m 02s", updated: 8 * HOUR },
+const editions = [
+	{ id: "ed_01", title: "Gold Rush", status: "live" as const, sold: 184, supply: 250, price: 48, released: -6 * DAY },
+	{ id: "ed_02", title: "Quiet Harbor", status: "sold-out" as const, sold: 100, supply: 100, price: 120, released: -19 * DAY },
+	{ id: "ed_03", title: "Dusk, no. 4", status: "live" as const, sold: 61, supply: 150, price: 64, released: -2 * DAY },
+	{ id: "ed_04", title: "Tidewater", status: "live" as const, sold: 212, supply: 300, price: 36, released: -27 * DAY },
+	{ id: "ed_05", title: "Salt Study", status: "closed" as const, sold: 38, supply: 75, price: 90, released: -44 * DAY },
+	{ id: "ed_06", title: "Paper Moon", status: "sold-out" as const, sold: 50, supply: 50, price: 220, released: -58 * DAY },
+	{ id: "ed_07", title: "Night Signal", status: "scheduled" as const, sold: 0, supply: 200, price: 56, released: 3 * DAY },
+	{ id: "ed_08", title: "Low Tide, Blue", status: "closed" as const, sold: 72, supply: 120, price: 42, released: -71 * DAY },
+	{ id: "ed_09", title: "Ember Field", status: "sold-out" as const, sold: 80, supply: 80, price: 140, released: -86 * DAY },
+]
+const editionCount = 24
+
+const payout = {
+	amount: 8214.6,
+	date: 5 * DAY,
+	lines: [
+		{ label: "Sales", value: 9127.33 },
+		{ label: "Platform fee (10%)", value: -912.73 },
+		{ label: "Deposits to", value: "Checking ••4821" },
+	],
+}
+
+const collectors = [
+	{ id: "co_01", name: "Nina Simone", handle: "@nina", initials: "NS", pieces: 14, spent: 1460 },
+	{ id: "co_02", name: "Grace Hopper", handle: "@grace", initials: "GH", pieces: 11, spent: 1128 },
+	{ id: "co_03", name: "Frida Kahlo", handle: "@frida", initials: "FK", pieces: 9, spent: 942 },
+	{ id: "co_04", name: "Mary Shelley", handle: "@mary", initials: "MS", pieces: 6, spent: 588 },
+]
+
+const upcoming = [
+	{ id: "up_01", title: "Night Signal", detail: "Edition of 200 · $56", at: 3 * DAY },
+	{ id: "up_02", title: "Tidewater, second printing", detail: "Edition of 100 · $40", at: 12 * DAY },
+	{ id: "up_03", title: "Dusk, no. 5", detail: "Edition of 150 · $64", at: 26 * DAY },
+	{ id: "up_04", title: "Quiet Harbor, artist proofs", detail: "Edition of 10 · $480", at: 34 * DAY },
 ]
 
 const activity = [
-	{ id: "ac_01", who: "Nina Simone", initials: "NS", what: "collected Gold Rush #42", when: 2 * MIN },
-	{ id: "ac_02", who: "Grace Hopper", initials: "GH", what: "minted a 100-run edition", when: 26 * MIN },
-	{ id: "ac_03", who: "Ada Lovelace", initials: "AL", what: "followed you", when: 1 * HOUR },
-	{ id: "ac_04", who: "Mary Shelley", initials: "MS", what: "collected Quiet Harbor", when: 3 * HOUR },
-	{ id: "ac_05", who: "Frida Kahlo", initials: "FK", what: "tipped 0.2 SOL on Process", when: 6 * HOUR },
+	{ id: "ac_01", who: "Nina Simone", initials: "NS", what: "collected Gold Rush · 185 of 250", when: 2 * MIN },
+	{ id: "ac_02", who: "Grace Hopper", initials: "GH", what: "collected Dusk, no. 4 · 61 of 150", when: 26 * MIN },
+	{ id: "ac_03", who: "Frida Kahlo", initials: "FK", what: "tipped $20 on Tidewater", when: 1 * HOUR },
+	{ id: "ac_04", who: "Mary Shelley", initials: "MS", what: "started following you", when: 3 * HOUR },
+	{ id: "ac_05", who: "Nina Simone", initials: "NS", what: "set a reminder for Night Signal", when: 6 * HOUR },
 ]
 
 export function DashboardPage() {
@@ -3667,7 +3977,17 @@ export function DashboardPage() {
 		<AppShell
 			// Sidebar hides below lg, so the same destinations ride in the shell's
 			// mobile slots — without them the route has no navigation under 1024px.
-			header={<AppHeader title={<span className="text-title-sm">Atelier</span>} />}
+			header={
+				<AppHeader
+					title={
+						<Row gap={1} align="center">
+							<Icon name="gem" variant="solid" className="text-xl" />
+							<span className="text-title-sm">Atelier</span>
+						</Row>
+					}
+					actions={<Avatar size="sm" fallback="AL" alt="Ada Lovelace" />}
+				/>
+			}
 			bottomNav={
 				<BottomNav aria-label="Primary">
 					<BottomNavItem icon={<Icon name="grid" />} label="Overview" showLabel active render={<a href="/" />} />
@@ -3680,90 +4000,249 @@ export function DashboardPage() {
 			sidebar={
 				<Sidebar>
 					<SidebarHeader>
-						<span className="text-title-sm">Atelier</span>
+						<Row gap={1} align="center" className="px-3">
+							<Icon name="gem" variant="solid" className="text-xl" />
+							<span className="text-title-sm">Atelier</span>
+						</Row>
 					</SidebarHeader>
 					<SidebarNav>
 						<SidebarItem icon={<Icon name="grid" />} label="Overview" active render={<a href="/" />} />
 						<SidebarItem icon={<Icon name="image-stack" />} label="Editions" render={<a href="/editions" />} />
 						<SidebarItem icon={<Icon name="user" />} label="Collectors" render={<a href="/collectors" />} />
-						<SidebarItem icon={<Icon name="bell" />} label="Activity" render={<a href="/activity" />} />
+						<SidebarItem
+							icon={<Icon name="bell" />}
+							label="Activity"
+							badge={<NotificationBadge count={4} tone="neutral" />}
+							render={<a href="/activity" />}
+						/>
 						<SidebarItem icon={<Icon name="gear" />} label="Settings" render={<a href="/settings" />} />
 					</SidebarNav>
+					{/* Entity and DotsMenu ink with page tokens; a theme can paint the rail
+					    dark on a light page, so this subtree reads the rail's ink instead. */}
+					<SidebarFooter className="[--foreground:var(--sidebar-foreground)]">
+						<Entity
+							className="[--entity-py:0]"
+							leading={<Avatar size="sm" fallback="AL" alt="" />}
+							title="Ada Lovelace"
+							action={
+								<DotsMenu label="Account" size="icon-sm">
+									<MenuItem render={<a href="/@ada" />}>View profile</MenuItem>
+									<MenuItem render={<a href="/settings" />}>Settings</MenuItem>
+									<MenuSeparator />
+									<MenuItem>Sign out</MenuItem>
+								</DotsMenu>
+							}
+						/>
+					</SidebarFooter>
 				</Sidebar>
 			}
 		>
 			<Page max="wide" gap={4} className="py-6">
 				<PageHeader
 					title="Overview"
-					description="Sales, collects, and edition activity for the last 30 days."
+					description="Sales and collector activity for the last 30 days."
 					actions={
 						<Row gap={2}>
-							<Button variant="outline">Export</Button>
-							<Button>New edition</Button>
+							<Button variant="outline">
+								<Icon name="download" />
+								Export
+							</Button>
+							<Button>
+								<Icon name="plus" />
+								New edition
+							</Button>
 						</Row>
 					}
 				/>
-				<Grid cols={{ base: 1, sm: 2, xl: 4 }} gap={3}>
+				<Grid cols={{ base: 2, xl: 4 }} gap={3}>
 					{stats.map((stat) => (
 						<Card key={stat.label}>
 							<CardHeader>
 								<CardDescription>{stat.label}</CardDescription>
 								<CardTitle className="text-mono-xl">{stat.value}</CardTitle>
-								<CardAction>
-									<Badge tone={stat.up ? "success" : "neutral"} size="sm">
-										<Icon name={stat.up ? "chevron-up" : "chevron-down"} />
-										{stat.delta}
-									</Badge>
-								</CardAction>
 							</CardHeader>
 							<CardContent>
-								<p className="text-caption text-muted-foreground">{stat.note}</p>
+								<Row gap={1} wrap>
+									<Badge
+										tone={stat.up ? "success" : "warning"}
+										size="sm"
+										icon={<Icon name={stat.up ? "arrow-up" : "arrow-down"} />}
+									>
+										{stat.delta}
+									</Badge>
+									<span className="text-caption text-muted-foreground">{stat.note}</span>
+								</Row>
 							</CardContent>
 						</Card>
 					))}
 				</Grid>
 				<Grid cols={{ base: 1, xl: 3 }} gap={3}>
-					<Card className="xl:col-span-2">
+					<Card className="flex flex-col xl:col-span-2">
 						<CardHeader>
-							<CardTitle>Recent deployments</CardTitle>
-							<CardDescription>Builds across every project, newest first.</CardDescription>
-							<CardAction>
-								<Button variant="ghost" size="sm" render={<a href="/deployments" />}>
-									View all
-								</Button>
-							</CardAction>
+							<CardTitle>Editions</CardTitle>
+							<CardDescription>Sales across your releases, newest first.</CardDescription>
 						</CardHeader>
-						<CardContent flush>
+						<CardContent flush className="mt-4 flex-1">
 							<DataTable
-								data={deployments}
+								data={editions}
 								rowKey={(row) => row.id}
+								defaultSort={{ key: "released", direction: "desc" }}
 								columns={[
-									{ key: "project", header: "Project", sortable: true, className: "text-label-md" },
-									{ key: "commit", header: "Commit", cell: (row) => <span className="text-mono-caption text-muted-foreground">{row.commit}</span> },
-									{ key: "status", header: "Status", cell: (row) => <Badge appearance="plain" tone={statusTone(row.status)} dot>{row.status}</Badge> },
-									{ key: "duration", header: "Duration", align: "end", cell: (row) => <span className="text-mono-caption">{row.duration}</span> },
-									{ key: "updated", header: "Updated", align: "end", cell: (row) => <RelativeTime date={Date.now() - row.updated} className="text-body-xs text-muted-foreground" /> },
+									{ key: "title", header: "Edition", sortable: true, className: "text-label-md whitespace-nowrap" },
+									{
+										key: "status",
+										header: "Status",
+										cell: (row) => (
+											<Badge appearance="plain" tone={STATUS_TONE[row.status as EditionStatus]} dot>
+												{STATUS_LABEL[row.status as EditionStatus]}
+											</Badge>
+										),
+									},
+									{
+										key: "sold",
+										header: "Sold",
+										sortable: true,
+										sortValue: (row) => row.sold / row.supply,
+										cell: (row) => (
+											<Row gap={3} align="center" className="min-w-40">
+												<Meter
+													value={row.sold}
+													max={row.supply}
+													size="sm"
+													tone={row.sold === row.supply ? "success" : "primary"}
+													aria-label={`${row.title} sold`}
+													getAriaValueText={(_, v) => `${v} of ${row.supply} sold`}
+													className="flex-1"
+												/>
+												<span className="text-mono-caption whitespace-nowrap text-muted-foreground">
+													{row.sold}/{row.supply}
+												</span>
+											</Row>
+										),
+									},
+									{
+										key: "revenue",
+										header: "Revenue",
+										align: "end",
+										sortable: true,
+										sortValue: (row) => row.sold * row.price,
+										cell: (row) =>
+											row.sold > 0 ? (
+												<span className="text-mono-sm">{usd.format(row.sold * row.price)}</span>
+											) : (
+												<span className="text-mono-sm text-muted-foreground">—</span>
+											),
+									},
+									{
+										key: "released",
+										header: "Release",
+										align: "end",
+										sortable: true,
+										cell: (row) => (
+											<span className="text-body-sm whitespace-nowrap text-muted-foreground">{shortDate(row.released)}</span>
+										),
+									},
 								]}
 							/>
 						</CardContent>
+						<CardFooter className="justify-between">
+							<span className="text-caption text-muted-foreground">
+								Showing {editions.length} of {editionCount} editions
+							</span>
+							<Button variant="ghost" size="sm" render={<a href="/editions" />}>
+								View all editions
+								<Icon name="arrow-right" />
+							</Button>
+						</CardFooter>
 					</Card>
-					<Card>
+					<Stack gap={3}>
+						<Card>
+							<CardHeader>
+								<CardDescription>Next payout</CardDescription>
+								<CardTitle className="text-mono-xl">{usdCents.format(payout.amount)}</CardTitle>
+								<CardAction>
+									<Badge tone="info" size="sm" icon={<Icon name="calendar" />}>
+										{shortDate(payout.date)}
+									</Badge>
+								</CardAction>
+							</CardHeader>
+							<CardContent>
+								<dl className="sable-list-dl text-body-sm">
+									{payout.lines.map((line) => (
+										<div key={line.label} className="contents">
+											<dt>{line.label}</dt>
+											<dd className={typeof line.value === "number" ? "text-end text-mono-sm" : "text-end"}>
+												{typeof line.value === "number" ? usdCents.format(line.value) : line.value}
+											</dd>
+										</div>
+									))}
+								</dl>
+							</CardContent>
+						</Card>
+						<Card>
+							<CardHeader>
+								<CardTitle>Top collectors</CardTitle>
+								<CardDescription>By spend this month.</CardDescription>
+								<CardAction>
+									<Button variant="ghost" size="sm" render={<a href="/collectors" />}>
+										View all
+									</Button>
+								</CardAction>
+							</CardHeader>
+							<CardList>
+								{collectors.map((person) => (
+									<Entity
+										key={person.id}
+										leading={<Avatar size="sm" fallback={person.initials} alt="" />}
+										title={person.name}
+										subtitle={`${person.handle} · ${person.pieces} pieces`}
+										action={<span className="text-mono-sm">{usd.format(person.spent)}</span>}
+									/>
+								))}
+							</CardList>
+						</Card>
+					</Stack>
+				</Grid>
+				<Grid cols={{ base: 1, xl: 3 }} gap={3}>
+					<Card className="flex flex-col">
+						<CardHeader>
+							<CardTitle>Upcoming releases</CardTitle>
+							<CardDescription>Scheduled to open to collectors.</CardDescription>
+						</CardHeader>
+						<CardList>
+							{upcoming.map((release) => (
+								<Entity
+									key={release.id}
+									title={release.title}
+									subtitle={release.detail}
+									action={<RelativeTime date={Date.now() + release.at} className="text-caption text-muted-foreground" />}
+								/>
+							))}
+						</CardList>
+						<CardFooter className="mt-auto">
+							<Button variant="outline" size="sm" render={<a href="/editions/new" />}>
+								<Icon name="calendar" />
+								Schedule a release
+							</Button>
+						</CardFooter>
+					</Card>
+					<Card className="xl:col-span-2">
 						<CardHeader>
 							<CardTitle>Activity</CardTitle>
-							<CardDescription>Collects, mints, and follows.</CardDescription>
+							<CardDescription>Collects, tips, and follows.</CardDescription>
+							<CardAction>
+								<Button variant="ghost" size="sm" render={<a href="/activity" />}>
+									View all
+								</Button>
+							</CardAction>
 						</CardHeader>
 						<CardList>
 							{activity.map((item) => (
 								<Entity
 									key={item.id}
-									density="compact"
-									leading={<Avatar size="sm" fallback={item.initials} alt={item.who} />}
-									title={
-										<span className="text-body-sm">
-											<span className="text-label-md">{item.who}</span>{" "}
-											<span className="text-muted-foreground">{item.what}</span>
-										</span>
-									}
+									leading={<Avatar size="sm" fallback={item.initials} alt="" />}
+									title={item.who}
+									subtitle={item.what}
 									action={<RelativeTime date={Date.now() - item.when} className="text-caption text-muted-foreground" />}
 								/>
 							))}
@@ -3780,103 +4259,284 @@ export function DashboardPage() {
 
 # FeedPage
 
-Single-column reading feed: a feed-width region, one Card per post (Entity byline, zero-shift media, body copy, quiet action row), and explicit load-more pagination.
+Social reading feed with a side rail: a feed-width main column (composer, For you / Following Tabs, one Card per post, an edition drop with price, supply Meter and Collect, a Skeleton for the next page) beside a sticky rail of who-to-follow and upcoming drops that drops away below lg.
 
-**Intent:** Reach for this for timelines, activity streams, and any reverse-chronological reading surface. Not for record management (DashboardPage) or side-by-side browsing (ListDetailPage).
+**Intent:** Reach for this for timelines, activity streams, and any reverse-chronological reading surface where people also act on what they read. Not for record management (DashboardPage) or side-by-side browsing (ListDetailPage).
 
 ## Notes
 
-- Region cap is `feed` (640px) — a single reading column; media and copy share one measure.
-- Post media sits in an AspectBox so late-loading images never shift the column.
-- The byline is Entity (Avatar + name + handle) in a CardList — the same row primitive as everywhere else, inset to the card padding by CardList rather than by zeroing paddings on CardHeader and Entity.
-- Actions are ghost sm Buttons (icon + count) in a Row, pulled out by the button's own padding (`-ms-3`) so the first icon sits on the text edge: quiet chrome under content, not competing pills.
-- Pagination is an explicit load-more Button (secondary; set `loading` while the next page fetches — `loadingLabel` names that state), not infinite scroll — predictable for keyboard and AT users.
+- The main column is capped at `--region-feed` (640px) inside a `wide` page, so posts keep a reading measure while the rail fills the desktop width. The rail is a fixed `w-80` aside, `sticky` at lg and `hidden` below it — its content is supplementary, so nothing is lost on mobile.
+- Feed scope is `Tabs` (underline, stretched to the column with `flex`): peer views of the same feed. The composer sits above them because posting applies to both.
+- The composer is a Card holding `Textarea autoResize` plus ghost icon Buttons and a secondary `Post` — not ChatComposer, which submits on Enter and is for conversations.
+- Each post is a Card: an Entity byline in a CardList (with a DotsMenu for post actions), body copy, then media in an AspectBox at the asset's own ratio, inset with `rounded-concentric-lg/6` so its corners follow the card's in every theme.
+- An edition drop adds a `Badge appearance="overlay"` on the artwork, title and price, the one primary Button on the page (`Collect`), and a `Meter` for supply — collected against a known maximum is a level, not task progress.
+- Actions are ghost sm Buttons (icon + count) in a Row pulled out by the button's own padding (`-ms-3`) so the first icon sits on the text edge.
+- Loading the next page shows a Skeleton post in the shape the post will land in, above the explicit load-more Button in its `loading` state — predictable for keyboard and AT users, unlike infinite scroll.
 
 ## Accessibility
 
-- Each post is an <article>, so AT users can jump between posts.
-- Icon-only action buttons carry aria-labels.
-- Media images get meaningful alt text from the post, empty alt only if decorative.
+- Each post is an <article>, so AT users can jump between posts; the rail is a labelled <aside> landmark.
+- Rail card titles carry role="heading" aria-level=2 under the page's one h1.
+- Icon-only buttons and every Follow / Remind button carry aria-labels naming their target; counts stay in the accessible name.
+- The supply Meter is role=meter with a getAriaValueText reading ("62 of 100 collected").
+- The Skeleton card is aria-busy; the loading Button keeps its label ("Loading posts").
 
 ## Source
 
 ```tsx
-import { AspectBox, Avatar, Button, Card, CardContent, CardList, Entity, Icon, Page, PageHeader, Row, Stack } from "@sableui/react"
+import { AspectBox, Avatar, Badge, Button, Card, CardContent, CardHeader, CardList, CardTitle, DotsMenu, Entity, Icon, MenuItem, MenuSeparator, Meter, MeterLabel, MeterTrack, MeterValue, Page, PageHeader, Row, Skeleton, Stack, Tabs, TabsList, TabsPanel, TabsTrigger, Textarea } from "@sableui/react"
+
+type Post = {
+	id: string
+	author: string
+	handle: string
+	initials: string
+	time: string
+	following: boolean
+	body: string
+	media?: { src: string; alt: string }
+	drop?: { title: string; price: string; collected: number; supply: number }
+	likes: number
+	comments: number
+}
 
-const posts = [
+const posts: Post[] = [
 	{
 		id: "p_01",
 		author: "Ada Lovelace",
-		handle: "@ada · 2h",
+		handle: "@ada",
 		initials: "AL",
-		body: "New edition drops Friday — 100 signed prints, each with the on-chain original.",
-		image: "/media/edition-cover.svg",
-		alt: "Edition cover — Gold Rush series",
+		time: "2h",
+		following: true,
+		body: "Gold Rush is live. 100 signed prints, each paired with the on-chain original. Thank you for waiting.",
+		media: { src: "/media/edition-cover.svg", alt: "Gold Rush, a gold-leaf study in overlapping arcs" },
+		drop: { title: "Gold Rush", price: "$120", collected: 62, supply: 100 },
 		likes: 128,
 		comments: 24,
 	},
 	{
 		id: "p_02",
 		author: "Grace Hopper",
-		handle: "@grace · 5h",
+		handle: "@grace",
 		initials: "GH",
-		body: "Process shot from this week's series. Compilers and copper ink.",
-		image: "/media/process-shot.svg",
-		alt: "Work-in-progress plotter drawing in copper ink",
+		time: "5h",
+		following: true,
+		body: "Process shot from this week. Compilers and copper ink — the plotter ran for eleven hours on this one.",
+		media: { src: "/media/process-shot.svg", alt: "Work-in-progress plotter drawing in copper ink" },
 		likes: 86,
 		comments: 9,
 	},
+	{
+		id: "p_03",
+		author: "Nina Simone",
+		handle: "@nina",
+		initials: "NS",
+		time: "8h",
+		following: false,
+		body: "Collectors of Dusk, no. 3 — your unlockable score is now in your library. Headphones on for this one.",
+		likes: 214,
+		comments: 31,
+	},
+]
+
+const suggestions = [
+	{ id: "u_01", name: "Mary Shelley", handle: "@mary", initials: "MS" },
+	{ id: "u_02", name: "Nina Simone", handle: "@nina", initials: "NS" },
+]
+
+const upcoming = [
+	{ id: "d_01", title: "Quiet Harbor", artist: "Mary Shelley", initials: "MS", date: "Sat, Oct 12" },
+	{ id: "d_02", title: "Dusk, no. 4", artist: "Nina Simone", initials: "NS", date: "Tue, Oct 15" },
 ]
 
+const renderPost = (post: Post) => (
+	<article key={post.id}>
+		<Card>
+			<CardList>
+				<Entity
+					leading={<Avatar fallback={post.initials} alt={post.author} />}
+					title={post.author}
+					subtitle={`${post.handle} · ${post.time}`}
+					action={
+						<DotsMenu label={`Post options for ${post.author}`} size="icon-sm">
+							<MenuItem>Copy link</MenuItem>
+							<MenuItem>Mute {post.handle}</MenuItem>
+							<MenuSeparator />
+							<MenuItem variant="destructive">Report post</MenuItem>
+						</DotsMenu>
+					}
+				/>
+			</CardList>
+			<CardContent className="flex flex-col gap-4 pt-0">
+				<p className="text-body-md text-foreground">{post.body}</p>
+				{post.media ? (
+					<AspectBox ratio={16 / 9} className="overflow-hidden rounded-concentric-lg/6 bg-muted">
+						<img src={post.media.src} alt={post.media.alt} className="size-full object-cover" />
+						{post.drop ? (
+							<div className="absolute start-3 top-3">
+								<Badge appearance="overlay" size="sm" dot>
+									Live drop
+								</Badge>
+							</div>
+						) : null}
+					</AspectBox>
+				) : null}
+				{post.drop ? (
+					<Stack gap={1.5}>
+						<Row gap={2} align="center" justify="between">
+							<div className="min-w-0">
+								<p className="text-title-md text-foreground">{post.drop.title}</p>
+								<p className="text-body-sm text-muted-foreground">
+									{`${post.drop.price} · Edition of ${post.drop.supply}`}
+								</p>
+							</div>
+							<Button>{`Collect for ${post.drop.price}`}</Button>
+						</Row>
+						<Meter
+							value={post.drop.collected}
+							max={post.drop.supply}
+							size="sm"
+							getAriaValueText={(_, value) => `${value} of ${post.drop?.supply} collected`}
+						>
+							<Row gap={2} align="center" justify="between" className="mb-2">
+								<MeterLabel>{`${post.drop.collected} collected`}</MeterLabel>
+								<MeterValue>{(_, value) => `${(post.drop?.supply ?? 0) - value} left`}</MeterValue>
+							</Row>
+							<MeterTrack />
+						</Meter>
+					</Stack>
+				) : null}
+				{/* Pulled out by exactly a sm Button's own padding (px-3), so the
+				    first icon lands on the text edge above it. */}
+				<Row gap={0.5} className="-ms-3">
+					<Button variant="ghost" size="sm" aria-label={`Like, ${post.likes} likes`}>
+						<Icon name="heart" />
+						{post.likes}
+					</Button>
+					<Button variant="ghost" size="sm" aria-label={`Comment, ${post.comments} comments`}>
+						<Icon name="comment" />
+						{post.comments}
+					</Button>
+					<Button variant="ghost" size="sm" aria-label="Share">
+						<Icon name="share" />
+					</Button>
+				</Row>
+			</CardContent>
+		</Card>
+	</article>
+)
+
 export function FeedPage() {
 	return (
-		<Page as="main" max="feed" gap={4} className="py-6">
-			<PageHeader title="Home" description="Latest posts from artists you follow." />
-			<Stack gap={3}>
-				{posts.map((post) => (
-					<article key={post.id}>
-						<Card className="overflow-hidden">
-							{/* The byline is an Entity row in CardList, which insets it to the
-							    card's own padding on every side — no hand-zeroed paddings. */}
-							<CardList>
-								<Entity
-									leading={<Avatar fallback={post.initials} alt={post.author} />}
-									title={post.author}
-									subtitle={post.handle}
-									action={
-										<Button variant="ghost" size="icon-sm" aria-label="Post options">
-											<Icon name="ellipsis" />
+		<Page as="main" max="wide" gap={4} className="py-6">
+			<Row gap={4} align="start" justify="center">
+				<Stack gap={3} className="min-w-0 max-w-(--region-feed) flex-1">
+					<PageHeader title="Home" />
+					<Card>
+						<CardContent>
+							<Row gap={1.5} align="start">
+								<Avatar fallback="AL" alt="Ada Lovelace" />
+								<Stack gap={1.5} className="min-w-0 flex-1">
+									<Textarea
+										autoResize
+										rows={2}
+										aria-label="New post"
+										placeholder="Share a process shot or an upcoming drop"
+									/>
+									<Row gap={1} align="center" justify="between">
+										<Row gap={0.5}>
+											<Button variant="ghost" size="icon-sm" aria-label="Add images">
+												<Icon name="image-stack" />
+											</Button>
+											<Button variant="ghost" size="icon-sm" aria-label="Attach an edition">
+												<Icon name="gem" />
+											</Button>
+										</Row>
+										<Button variant="secondary" size="sm">
+											Post
 										</Button>
-									}
-								/>
+									</Row>
+								</Stack>
+							</Row>
+						</CardContent>
+					</Card>
+					<Tabs defaultValue="for-you">
+						<TabsList className="flex">
+							<TabsTrigger value="for-you">For you</TabsTrigger>
+							<TabsTrigger value="following">Following</TabsTrigger>
+						</TabsList>
+						<TabsPanel value="for-you">
+							<Stack gap={3}>
+								{posts.map(renderPost)}
+								{/* The next page, in the shape it will land in, while it fetches. */}
+								<Card aria-busy="true">
+									<CardContent className="flex flex-col gap-4">
+										<Row gap={1.5} align="center">
+											<Skeleton className="size-10 rounded-full" />
+											<Stack gap={1}>
+												<Skeleton className="h-3 w-32" />
+												<Skeleton className="h-3 w-20" />
+											</Stack>
+										</Row>
+										<Skeleton className="h-3 w-full" />
+										<Skeleton className="h-3 w-2/3" />
+									</CardContent>
+								</Card>
+								<Button variant="secondary" loading loadingLabel="Loading posts">
+									Load more posts
+								</Button>
+							</Stack>
+						</TabsPanel>
+						<TabsPanel value="following">
+							<Stack gap={3}>{posts.filter((post) => post.following).map(renderPost)}</Stack>
+						</TabsPanel>
+					</Tabs>
+				</Stack>
+				<aside aria-label="Suggestions" className="sticky top-6 hidden w-80 shrink-0 lg:block">
+					<Stack gap={3}>
+						<Card>
+							<CardHeader>
+								<CardTitle role="heading" aria-level={2}>Who to follow</CardTitle>
+							</CardHeader>
+							<CardList>
+								{suggestions.map((person) => (
+									<Entity
+										key={person.id}
+										leading={<Avatar fallback={person.initials} alt={person.name} />}
+										title={person.name}
+										subtitle={person.handle}
+										action={
+											<Button variant="secondary" size="sm" aria-label={`Follow ${person.name}`}>
+												Follow
+											</Button>
+										}
+									/>
+								))}
 							</CardList>
-							<AspectBox ratio={16 / 9}>
-								<img src={post.image} alt={post.alt} className="size-full object-cover" />
-							</AspectBox>
-							<CardContent className="flex flex-col gap-2">
-								<p className="text-body-md text-foreground">{post.body}</p>
-								{/* Pulled out by exactly a sm Button's own padding (px-3), so the
-								    first icon lands on the text edge above it. Both are on the
-								    spacing scale, so they stay aligned at every density. */}
-								<Row gap={1} className="-ms-3">
-									<Button variant="ghost" size="sm" aria-label={`Like — ${post.likes}`}>
-										<Icon name="heart" />
-										{post.likes}
-									</Button>
-									<Button variant="ghost" size="sm" aria-label={`Comments — ${post.comments}`}>
-										<Icon name="comment" />
-										{post.comments}
-									</Button>
-									<Button variant="ghost" size="sm" aria-label="Share">
-										<Icon name="share" />
-									</Button>
-								</Row>
-							</CardContent>
 						</Card>
-					</article>
-				))}
-			</Stack>
-			<Button variant="secondary" loadingLabel="Loading…">Load more posts</Button>
+						<Card>
+							<CardHeader>
+								<CardTitle role="heading" aria-level={2}>Upcoming drops</CardTitle>
+							</CardHeader>
+							<CardList>
+								{upcoming.map((drop) => (
+									<Entity
+										key={drop.id}
+										leading={<Avatar fallback={drop.initials} alt={drop.artist} />}
+										title={drop.title}
+										subtitle={`${drop.artist} · ${drop.date}`}
+										action={
+											<Button variant="ghost" size="icon-sm" aria-label={`Remind me about ${drop.title}`}>
+												<Icon name="bell" />
+											</Button>
+										}
+									/>
+								))}
+							</CardList>
+						</Card>
+					</Stack>
+				</aside>
+			</Row>
 		</Page>
 	)
 }
@@ -3886,120 +4546,518 @@ export function FeedPage() {
 
 # LandingPage
 
-Marketing hero + feature grid: display-tier headline as the page's single loud moment, an eyebrow kicker, a two-action CTA row, and a three-up feature grid that reveals on scroll.
+Product / open-source landing page: a centered hero with an eyebrow Badge, one display headline, lede, two CTAs and a copyable install command; a Browser-framed product preview composed from real components; a six-up feature grid; a setup section with tabbed code; an agent-workflow section with terminal output; a CTA card; and a link-column footer.
 
-**Intent:** Reach for this for the marketing/landing route of a product — the one page where Display type and scroll reveals belong. Not for product UI (display type and one-per-view rules forbid it inside the app).
+**Intent:** Reach for this for the marketing route of a developer product, library, or tool: the page where the product shows itself working and the reader installs or signs up. For a branded, editorial marketing site use BrandLandingPage. Not for product UI (display type and one-per-view rules forbid it inside the app).
 
 ## Notes
 
-- Display type is the marketing voice: exactly one display headline per page, tight leading, weight 700+.
-- The eyebrow is a small outline Badge (`size="sm"`) — the badge's own size, never a type class forced onto its label; hierarchy above the headline is eyebrow → display → lede.
-- The lede is body-lg capped at the prose measure — the headline may be wide, reading text may not.
-- Two CTAs max: one primary, one quiet outline. More actions dilute the hero.
-- Reveal wraps below-the-fold sections only; it no-ops under reduced motion via the motion policy.
-- Feature cards are Cards in a Grid with minItemWidth (three-up that reflows on its own width), each icon + title + body-sm copy.
+- Display type is the marketing voice: exactly one display headline per page (`text-display-lg` on phones, `text-display-2xl` from `sm`). Every section below uses `text-heading-1` with a `text-overline` kicker.
+- The eyebrow is a small outline Badge (`size="sm"`): the badge's own size, never a type class forced onto its label. Hierarchy above the fold is eyebrow, display, lede, CTAs, install command.
+- The lede is body-lg capped at the prose measure. The headline may be wide; reading text may not.
+- Two CTAs max per row: one primary, one quiet outline. The install line is a `CodeBlock` with `prompt="$"`, so it truncates on one line and copy takes only the command.
+- Show the product instead of describing it. The preview is real components (PageHeader, metric Cards, a Meter, a CardList of Entity rows, Message and Bubble, ChatComposer) inside `Browser`, wrapped in an `inert` div so the picture's controls never take focus. Secondary columns hide on small screens rather than stacking into a long mock.
+- Features are Cards in a fixed `Grid cols={{ base: 1, sm: 2, lg: 3 }}`, so six items always land as full rows (3 x 2, 2 x 3, 1 x 6) without an orphan.
+- Multi-line code uses `CodeBlock` with a filename; switch related snippets with `Tabs`, defaulting to the most complete one. Terminal output passes `highlight={false}` so a code highlighter does not colour prose.
+- Reveal wraps below-the-fold blocks only (features, code, CTA). It no-ops under reduced motion via the motion policy.
+- Hide nav groups on narrow screens by wrapping them in a `max-md:hidden` div: a `Row` or `Button` sets its own display, which a `hidden` class on the same element does not reliably override.
 
 ## Accessibility
 
-- The hero headline is the page h1; feature titles are h2s restyled with the Title tier.
+- The hero headline is the page h1; section titles are h2s and feature and step titles are h3s. Footer column labels are h2s inside the footer nav.
+- The product preview is a `figure` with a visible figcaption. Its content is `inert`, which removes it from the tab order and the accessibility tree, so its headings and buttons do not pollute the outline.
 - Reveal renders content immediately (no animation) when prefers-reduced-motion is set.
-- CTA buttons are real links or buttons with visible text — no icon-only CTAs.
+- CTA buttons are real links with visible text, with no icon-only CTAs. Footer links keep a 36px minimum row height for touch.
 
 ## Source
 
 ```tsx
-import { Badge, Button, Card, CardContent, Grid, Icon, Region, Reveal, Row, Stack } from "@sableui/react"
+import { Avatar, Badge, Browser, Bubble, Button, Card, CardAction, CardContent, CardDescription, CardHeader, CardList, CardTitle, ChatComposer, Code, CodeBlock, Entity, Grid, Icon, Message, Meter, MeterLabel, MeterTrack, MeterValue, PageHeader, Region, Reveal, Row, Stack, Tabs, TabsList, TabsPanel, TabsTrigger } from "@sableui/react"
 
-const features = [
+const navLinks = [
+	{ label: "Docs", href: "/docs" },
+	{ label: "Components", href: "/components" },
+	{ label: "Patterns", href: "/patterns" },
+	{ label: "Themes", href: "/themes" },
+]
+
+const deploys = [
 	{
-		icon: "sparkles" as const,
-		title: "Own the surface",
-		body: "Semantic tokens end-to-end — re-theme the whole product without touching a component.",
+		initials: "MO",
+		name: "Maya Ortiz",
+		title: "Add usage-based billing",
+		meta: "main · a3f9c21 · 2m ago",
+		status: "Building",
+		tone: "info" as const,
+		pulse: true,
 	},
+	{
+		initials: "SR",
+		name: "Sam Reyes",
+		title: "Fix search ranking for long queries",
+		meta: "main · 81be04d · 18m ago",
+		status: "Ready",
+		tone: "success" as const,
+		pulse: false,
+	},
+	{
+		initials: "JL",
+		name: "Jun Lee",
+		title: "Rotate webhook signing keys",
+		meta: "main · 5c7e9aa · 1h ago",
+		status: "Ready",
+		tone: "success" as const,
+		pulse: false,
+	},
+]
+
+const features = [
 	{
 		icon: "component" as const,
-		title: "Behavior included",
-		body: "Focus, keyboard nav, and ARIA ride on Base UI primitives under every surface.",
+		title: "Behavior built in",
+		body: "Focus management, keyboard navigation, and ARIA come from Base UI primitives under every control.",
+	},
+	{
+		icon: "eyedropper" as const,
+		title: "Semantic tokens end to end",
+		body: "Re-theme the whole product, light and dark, from one preset without touching a component.",
 	},
 	{
 		icon: "layout" as const,
 		title: "Pages, not just parts",
-		body: "Purpose-named regions, an 8px rhythm, and canonical page shells for the routes every product needs.",
+		body: "Landing, dashboard, settings, auth, and list-detail shells to copy and adapt.",
+	},
+	{
+		icon: "book" as const,
+		title: "A contract agents can read",
+		body: "registry.json, llms.txt, and a CLI hand agents the exact props, examples, and rules.",
+	},
+	{
+		icon: "circle-check" as const,
+		title: "Lint that knows the design",
+		body: "sable-lint flags raw colors, hand-built controls, and motion that ignores reduced motion.",
+	},
+	{
+		icon: "play" as const,
+		title: "Motion with an off switch",
+		body: "Named recipes run on one scale variable, so reduced motion stops every transition at once.",
+	},
+]
+
+const steps = [
+	{
+		title: "Install the package",
+		body: "One dependency. React 19 and Tailwind v4 are the only peers.",
+	},
+	{
+		title: "Import the styles",
+		body: "Tailwind first, then Sable's tokens, then a source glob over the package.",
+	},
+	{
+		title: "Compose your screens",
+		body: "Build from components and layout primitives. Your theme does the rest.",
+	},
+]
+
+const stylesCode = `@import "tailwindcss";
+@import "@sableui/react/styles.css";
+@source "../node_modules/@sableui/react/dist/**/*.{js,mjs}";`
+
+// design-lint-disable-next-line self-import -- a consumer code sample displayed on the page, not an import
+const composeCode = `import { Button, Card, CardContent, CardHeader, CardTitle } from "@sableui/react"
+
+export function DeployCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Production</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Deploy</Button>
+      </CardContent>
+    </Card>
+  )
+}`
+
+const terminalCode = `$ npx sable search "confirm before deleting"
+component  DestructiveActionModal
+component  Dialog
+
+$ npx sable component DestructiveActionModal --props
+props, a11y contract, composed examples
+
+$ npx sable lint src
+0 findings in 42 files`
+
+const agentPoints = [
+	"Search ranks components, patterns, tokens, and docs for a plain-language need.",
+	"Every component ships its props, accessibility contract, and composed examples.",
+	"The same lint runs in the editor, in CI, and inside the agent's own loop.",
+]
+
+const footerGroups = [
+	{
+		title: "Product",
+		links: [
+			{ label: "Components", href: "/components" },
+			{ label: "Patterns", href: "/patterns" },
+			{ label: "Themes", href: "/themes" },
+			{ label: "Canvas", href: "/canvas" },
+		],
+	},
+	{
+		title: "Resources",
+		links: [
+			{ label: "Documentation", href: "/docs" },
+			{ label: "Changelog", href: "/changelog" },
+			{ label: "llms.txt", href: "/llms.txt" },
+			{ label: "registry.json", href: "/registry.json" },
+		],
+	},
+	{
+		title: "Community",
+		links: [
+			{ label: "GitHub", href: "/github" },
+			{ label: "npm", href: "/npm" },
+			{ label: "Discussions", href: "/discussions" },
+		],
 	},
 ]
 
 export function LandingPage() {
 	return (
-		<div className="min-h-dvh bg-background">
-			<header>
-				<Region as="nav" aria-label="Main" className="grid h-16 grid-cols-[1fr_auto_1fr] items-center">
-					<span className="justify-self-start text-title-sm">Sable</span>
-					<Row gap={1} className="justify-self-center max-sm:hidden">
-						<Button variant="ghost" size="sm" render={<a href="/docs" />}>
-							Docs
-						</Button>
-						<Button variant="ghost" size="sm" render={<a href="/patterns" />}>
-							Patterns
-						</Button>
-						<Button variant="ghost" size="sm" render={<a href="/themes" />}>
-							Themes
+		<div className="min-h-dvh bg-background text-foreground">
+			<header className="border-b border-border">
+				<Region as="nav" aria-label="Main" max="wide" className="grid h-16 grid-cols-[1fr_auto_1fr] items-center">
+					<a href="/" className="justify-self-start text-title-lg motion-interactive hover:text-muted-foreground">
+						Sable
+					</a>
+					<div className="justify-self-center max-md:hidden">
+						<Row gap={1}>
+							{navLinks.map((link) => (
+								<Button key={link.label} variant="ghost" size="sm" render={<a href={link.href} />}>
+									{link.label}
+								</Button>
+							))}
+						</Row>
+					</div>
+					<Row gap={1} className="col-start-3 justify-self-end">
+						<div className="max-sm:hidden">
+							<Button variant="ghost" size="sm" render={<a href="/github" />}>
+								GitHub
+							</Button>
+						</div>
+						<Button size="sm" render={<a href="/docs/getting-started" />}>
+							Get started
 						</Button>
 					</Row>
-					<Button size="sm" className="justify-self-end" render={<a href="/signup" />}>
-						Get started
-					</Button>
 				</Region>
 			</header>
+
 			<main>
-				<Region as="section" max="wide" className="py-24">
-					<Stack gap={4} align="center" className="text-center">
-						<Badge appearance="outline" size="sm">
-							Now in beta
-						</Badge>
-						<h1 className="max-w-4xl text-balance text-display-2xl">
-							Ship product UI your agents can't get wrong
-						</h1>
-						<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">
-							An owned, themeable component system with enforced tokens, typography,
-							and motion — documented for machines as carefully as for people.
-						</p>
-						<Row gap={2} justify="center">
-							<Button size="cta">Get started</Button>
-							<Button size="cta" variant="outline">
-								Read the docs
-							</Button>
-						</Row>
+				<Region as="section" max="wide" className="pb-16 pt-16 sm:pt-24">
+					<Stack gap={8} align="center">
+						<Stack gap={4} align="center" className="text-center">
+							<Badge appearance="outline" size="sm" icon={<Icon name="sparkles" />}>
+								Open source · MIT licensed
+							</Badge>
+							<h1 className="max-w-4xl text-balance text-display-lg sm:text-display-2xl">
+								Product UI your agents can't get wrong
+							</h1>
+							<p className="max-w-(--measure-prose) text-pretty text-body-lg text-muted-foreground">
+								Sable is a themeable React component library with enforced tokens,
+								typography, and motion, documented for coding agents as carefully
+								as for people.
+							</p>
+							<Row gap={2} justify="center" wrap className="pt-2">
+								<Button size="cta" render={<a href="/docs/getting-started" />}>
+									Get started
+								</Button>
+								<Button size="cta" variant="outline" render={<a href="/components" />}>
+									Browse components
+								</Button>
+							</Row>
+						</Stack>
+						<div className="w-full max-w-sm">
+							<CodeBlock prompt="$" code="pnpm add @sableui/react" />
+						</div>
 					</Stack>
 				</Region>
-				<Region as="section" max="wide" className="pb-24">
-					<Reveal>
-						{/* Three-up that reflows on its own width (minItemWidth), one Card
-						    per feature — never a hand-drawn bordered grid. */}
-						<Grid minItemWidth="calc(var(--spacing) * 64)">
-							{features.map((feature) => (
-								<Card key={feature.title}>
-									<CardContent className="flex flex-col gap-2">
-										<Icon name={feature.icon} className="text-xl text-muted-foreground" />
-										<h2 className="text-title-lg">{feature.title}</h2>
-										<p className="text-body-sm text-muted-foreground">{feature.body}</p>
+
+				<Region as="section" aria-label="Product preview" max="wide" className="pb-20 sm:pb-28">
+					<figure>
+						<Browser url="atlas.example/deploys" className="shadow-xl">
+							{/* A picture of software, not live UI: inert keeps its controls
+							    out of the tab order and the accessibility tree. */}
+							<div inert className="grid gap-4 p-4 sm:p-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
+								<Stack gap={4} className="min-w-0">
+									<PageHeader
+										titleAs="h2"
+										title="Deployments"
+										description="atlas-web · production"
+										actions={
+											<Row gap={2}>
+												<Button variant="outline" size="sm">
+													View logs
+												</Button>
+												<Button size="sm" iconStart={<Icon name="upload" />}>
+													Deploy
+												</Button>
+											</Row>
+										}
+									/>
+									<Grid cols={{ base: 2, md: 3 }} gap={3}>
+										<Card density="compact">
+											<CardHeader>
+												<CardTitle>Uptime</CardTitle>
+												<CardDescription>Last 30 days</CardDescription>
+											</CardHeader>
+											<CardContent>
+												<p className="text-heading-3">99.98%</p>
+											</CardContent>
+										</Card>
+										<Card density="compact">
+											<CardHeader>
+												<CardTitle>p95 latency</CardTitle>
+												<CardDescription>Edge, all regions</CardDescription>
+											</CardHeader>
+											<CardContent>
+												<p className="text-heading-3">182 ms</p>
+											</CardContent>
+										</Card>
+										<Card density="compact" className="max-md:hidden">
+											<CardHeader>
+												<CardTitle>Build minutes</CardTitle>
+												<CardDescription>Team plan</CardDescription>
+											</CardHeader>
+											<CardContent>
+												<Meter value={64} tone="standard">
+													<Row justify="between" wrap className="mb-2">
+														<MeterLabel>Used</MeterLabel>
+														<MeterValue>{(_, value) => `${(value * 30).toLocaleString("en-US")} of 3,000`}</MeterValue>
+													</Row>
+													<MeterTrack />
+												</Meter>
+											</CardContent>
+										</Card>
+									</Grid>
+									<Card>
+										<CardHeader>
+											<CardTitle>Recent deploys</CardTitle>
+											<CardDescription>Production branch</CardDescription>
+											<CardAction>
+												<Badge appearance="plain" tone="success" dot>
+													Healthy
+												</Badge>
+											</CardAction>
+										</CardHeader>
+										<CardList>
+											{deploys.map((deploy) => (
+												<Entity
+													key={deploy.meta}
+													leading={<Avatar size="sm" fallback={deploy.initials} alt={deploy.name} />}
+													title={deploy.title}
+													subtitle={deploy.meta}
+													action={
+														<Badge appearance="plain" tone={deploy.tone} dot pulse={deploy.pulse}>
+															{deploy.status}
+														</Badge>
+													}
+												/>
+											))}
+										</CardList>
+									</Card>
+								</Stack>
+								<Card className="max-lg:hidden">
+									<CardHeader>
+										<CardTitle>Release assistant</CardTitle>
+										<CardDescription>Summaries from today's deploys</CardDescription>
+									</CardHeader>
+									<CardContent className="flex flex-col gap-4">
+										<Message align="end">
+											<Bubble variant="primary" align="end">
+												What shipped to production today?
+											</Bubble>
+										</Message>
+										<Message>
+											<Bubble>
+												Three deploys. Search ranking is fixed, webhook keys are
+												rotated, and usage-based billing is building now.
+											</Bubble>
+										</Message>
+										<ChatComposer placeholder="Ask about a deploy" />
 									</CardContent>
 								</Card>
-							))}
-						</Grid>
+							</div>
+						</Browser>
+						<figcaption className="mt-4 text-center text-body-sm text-muted-foreground">
+							Every surface in this preview is a Sable component, styled by the active theme.
+						</figcaption>
+					</figure>
+				</Region>
+
+				<section aria-labelledby="landing-features" className="border-y border-border bg-muted/40 py-20 sm:py-28">
+					<Region max="wide">
+						<Stack gap={10}>
+							<Stack gap={3} className="max-w-2xl">
+								<p className="text-overline text-muted-foreground">Why Sable</p>
+								<h2 id="landing-features" className="text-balance text-heading-1">
+									A design system with the rules written down
+								</h2>
+								<p className="text-body-lg text-muted-foreground">
+									The decisions a senior designer would make are encoded once, so every
+									screen your team or your agent builds starts from them.
+								</p>
+							</Stack>
+							<Reveal>
+								<Grid cols={{ base: 1, sm: 2, lg: 3 }} gap={4}>
+									{features.map((feature) => (
+										<Card key={feature.title} render={<article />} className="h-full">
+											<CardContent className="flex flex-col gap-3">
+												<span className="grid size-10 place-items-center rounded-md sable-well">
+													<Icon name={feature.icon} className="text-xl" />
+												</span>
+												<h3 className="pt-2 text-title-lg">{feature.title}</h3>
+												<p className="text-body-sm text-muted-foreground">{feature.body}</p>
+											</CardContent>
+										</Card>
+									))}
+								</Grid>
+							</Reveal>
+						</Stack>
+					</Region>
+				</section>
+
+				<Region as="section" aria-labelledby="landing-setup" max="wide" className="py-20 sm:py-28">
+					<div className="grid items-start gap-10 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16">
+						<Stack gap={8}>
+							<Stack gap={3}>
+								<p className="text-overline text-muted-foreground">Setup</p>
+								<h2 id="landing-setup" className="text-balance text-heading-1">
+									From install to first screen in three steps
+								</h2>
+							</Stack>
+							<ol className="flex flex-col gap-6">
+								{steps.map((step, index) => (
+									<li key={step.title} className="grid grid-cols-[auto_1fr] gap-4">
+										<span className="pt-0.5 text-mono-md text-muted-foreground">0{index + 1}</span>
+										<div>
+											<h3 className="text-title-lg">{step.title}</h3>
+											<p className="mt-1 text-body-md text-muted-foreground">{step.body}</p>
+										</div>
+									</li>
+								))}
+							</ol>
+						</Stack>
+						<Reveal className="min-w-0">
+							<Tabs defaultValue="compose">
+								<TabsList>
+									<TabsTrigger value="install">Install</TabsTrigger>
+									<TabsTrigger value="styles">Styles</TabsTrigger>
+									<TabsTrigger value="compose">Compose</TabsTrigger>
+								</TabsList>
+								<TabsPanel value="install" className="pt-4">
+									<CodeBlock prompt="$" code="pnpm add @sableui/react" />
+								</TabsPanel>
+								<TabsPanel value="styles" className="pt-4">
+									<CodeBlock filename="app.css" code={stylesCode} />
+								</TabsPanel>
+								<TabsPanel value="compose" className="pt-4">
+									<CodeBlock filename="deploy-card.tsx" code={composeCode} />
+								</TabsPanel>
+							</Tabs>
+						</Reveal>
+					</div>
+				</Region>
+
+				<section aria-labelledby="landing-agents" className="border-t border-border py-20 sm:py-28">
+					<Region max="wide">
+						<div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
+							<Stack gap={5}>
+								<Stack gap={3}>
+									<p className="text-overline text-muted-foreground">Built for agents</p>
+									<h2 id="landing-agents" className="text-balance text-heading-1">
+										Your agent reads the same contract you do
+									</h2>
+									<p className="text-body-lg text-muted-foreground">
+										Point Claude Code, Codex, or Cursor at the installed package. The{" "}
+										<Code>sable</Code> CLI answers what to use, how to use it, and whether
+										the result holds up.
+									</p>
+								</Stack>
+								<ul className="sable-list">
+									{agentPoints.map((point) => (
+										<li key={point}>{point}</li>
+									))}
+								</ul>
+							</Stack>
+							<Reveal className="min-w-0">
+								<CodeBlock filename="Terminal" code={terminalCode} highlight={false} />
+							</Reveal>
+						</div>
+					</Region>
+				</section>
+
+				<Region as="section" aria-labelledby="landing-cta" max="wide" className="pb-20 sm:pb-28">
+					<Reveal>
+						<Card>
+							<CardContent>
+								<Stack gap={4} align="center" className="py-8 text-center sm:py-12">
+									<h2 id="landing-cta" className="max-w-2xl text-balance text-heading-1">
+										Build the product, not another component library
+									</h2>
+									<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">
+										Install Sable, pick a preset, and ship the first screen today.
+									</p>
+									<Row gap={2} justify="center" wrap className="pt-2">
+										<Button size="cta" render={<a href="/docs/getting-started" />}>
+											Get started
+										</Button>
+										<Button size="cta" variant="outline" render={<a href="/github" />}>
+											Star on GitHub
+										</Button>
+									</Row>
+								</Stack>
+							</CardContent>
+						</Card>
 					</Reveal>
 				</Region>
 			</main>
+
 			<footer className="border-t border-border">
-				<Region className="flex h-16 items-center justify-between">
-					<span className="text-caption text-muted-foreground">© 2026 Sable</span>
-					<Row gap={3}>
-						<a href="/github" className="text-caption text-muted-foreground motion-interactive hover:text-foreground">
-							GitHub
-						</a>
-						<a href="/changelog" className="text-caption text-muted-foreground motion-interactive hover:text-foreground">
-							Changelog
-						</a>
-					</Row>
+				<Region max="wide" className="py-12">
+					<div className="grid gap-10 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
+						<Stack gap={3} className="max-w-xs">
+							<a href="/" className="w-fit text-title-lg motion-interactive hover:text-muted-foreground">
+								Sable
+							</a>
+							<p className="text-body-sm text-muted-foreground">
+								React components, patterns, and tokens for products built with AI agents.
+							</p>
+						</Stack>
+						<nav aria-label="Footer" className="grid grid-cols-2 gap-8 sm:grid-cols-3">
+							{footerGroups.map((group) => (
+								<div key={group.title}>
+									<h2 className="text-label-md text-muted-foreground">{group.title}</h2>
+									<ul className="mt-3 flex flex-col gap-1">
+										{group.links.map((link) => (
+											<li key={link.label}>
+												<a
+													href={link.href}
+													className="flex min-h-9 items-center text-body-sm motion-interactive hover:text-muted-foreground"
+												>
+													{link.label}
+												</a>
+											</li>
+										))}
+									</ul>
+								</div>
+							))}
+						</nav>
+					</div>
+					<div className="mt-12 border-t border-border pt-6">
+						<p className="text-caption text-muted-foreground">© 2026 Sable. Released under the MIT license.</p>
+					</div>
 				</Region>
 			</footer>
 		</div>
@@ -4011,98 +5069,415 @@ export function LandingPage() {
 
 # ListDetailPage
 
-Two-column list-detail: a wide region split 8/4, the record list as Entity rows in the main column, and a sticky supporting rail (detail, filters, or summary) beside it.
+Searchable list beside the selected record's detail: interactive Entity rows in a CardList (5 of 12 columns) and a sticky detail pane (7) with an editable field, a label/value list, record actions with a destructive confirmation, and recent activity. Below lg it becomes a drill-in.
 
-**Intent:** Reach for this when a route lists records AND keeps one selected/summarized in view (members + member detail, inbox + message, orders + order). For pure browsing with no rail, a single-column FeedPage or DashboardPage table is simpler.
+**Intent:** Reach for this when a route lists records AND works on one at a time (members + member, inbox + message, orders + order). For pure browsing with no selection, a single-column FeedPage or a DashboardPage table is simpler.
 
 ## Notes
 
-- Region cap is `wide`; the split is Columns 12 → Col 8 + Col 4, collapsing to stacked full-width columns below lg via breakpoint maps.
-- List rows are Entity inside one bordered Card, in CardList: it insets each row to the card padding and divides them with hairlines — on a dark canvas rows need an anchoring surface, not a flat float.
-- Pending records live in the same list, muted (muted title + `Invited` badge), instead of a separate section.
-- The rail card holds label/value pairs as a Description list — muted terms, mono (tabular) values — plus one quiet action. Never hand-built `justify-between` rows.
-- The rail is sticky (top on the 4px scale) so the summary stays in view while the list scrolls.
+- Region cap is `wide`; Columns 12 → Col 5 (list) + Col 7 (detail). Below lg the list and detail share one column as a drill-in: selecting a row shows the detail with an `All members` back button (lg:hidden), and the back button returns to the list. The panes swap with `max-lg:hidden`, so desktop always shows both.
+- Rows are interactive Entity inside one Card + CardList. Selection is `data-selected` on the row painted by `sable-surface-interactive`; `sable-surface` on the list card makes that step 12% ink off the card, so a selected row stays distinct from its muted avatar.
+- Search filters the list in place (name, email, role). No matches swap the CardList for an EmptyState with a Clear search action; the selected detail stays open.
+- A pending invite lives in the same list: a mail glyph in the Avatar, an `Invited` Badge, and an invite-specific detail (role on joining, sent, expires, invited by; Resend and Revoke actions).
+- The role Select edits the record in place; its Field description states what the role can do. The owner's role is read-only and the owner has no remove action.
+- Read-only facts are a native `<dl className="sable-list-dl sable-list-dl-2">` inside an `@container`, so pairs go two-up only when the pane is wide enough.
+- Remove / revoke run through DestructiveActionModal; on confirm the next row is selected. Page-level counts (members, pending, seats) live in the PageHeader description and update with the list.
+- The detail pane is sticky (lg:top-6) so it stays in view while a long list scrolls.
 
 ## Accessibility
 
-- Entity rows given `interactive` + `onSelect` (to open a member's detail) render as real buttons; keyboard focus follows list order. Rows here are presentational.
-- The rail is an <aside> landmark; the list column is the main content.
+- Each row is a real button (Entity `interactive` + `onSelect`): Tab moves through rows, Enter/Space selects. The selected row carries visually hidden `(selected)` text in its name; list avatars are aria-hidden so initials are not read before the name.
+- The detail pane is a labelled region (`Member details`) whose title is a level-2 heading.
+- On a phone, drilling in moves focus to the back button; going back returns focus to the row that was open. After a remove, focus lands on the newly selected row; after Clear search, on the search field.
 
 ## Source
 
 ```tsx
-import { Avatar, Badge, Button, Card, CardContent, CardHeader, CardList, CardTitle, Col, Columns, Description, DescriptionItem, Entity, Page, PageHeader, SearchInput, Stack } from "@sableui/react"
+import { useState, useEffect } from "react"
+import { Avatar, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Col, Columns, DestructiveActionModal, EmptyState, Entity, Field, Icon, Page, PageHeader, Row, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, Stack, StatusDot } from "@sableui/react"
+
+type Role = "owner" | "admin" | "editor" | "viewer"
+
+const roles: { value: Role; label: string }[] = [
+	{ value: "owner", label: "Owner" },
+	{ value: "admin", label: "Admin" },
+	{ value: "editor", label: "Editor" },
+	{ value: "viewer", label: "Viewer" },
+]
+
+const roleLabel: Record<Role, string> = {
+	owner: "Owner",
+	admin: "Admin",
+	editor: "Editor",
+	viewer: "Viewer",
+}
 
-const members = [
-	{ id: "u_01", name: "Ada Lovelace", handle: "@ada", role: "Owner", initials: "AL", pending: false },
-	{ id: "u_02", name: "Grace Hopper", handle: "@grace", role: "Admin", initials: "GH", pending: false },
-	{ id: "u_03", name: "Mary Shelley", handle: "@mary", role: "Member", initials: "MS", pending: false },
-	{ id: "u_04", name: "Nina Simone", handle: "@nina", role: "Member", initials: "NS", pending: false },
-	{ id: "u_05", name: "Frida Kahlo", handle: "@frida", role: "Member", initials: "FK", pending: false },
-	{ id: "u_06", name: "hopper@navy.mil", handle: "invited 2 days ago", role: "Member", initials: "?", pending: true },
+const roleSummary: Record<Role, string> = {
+	owner: "Full access, including payouts and billing. Transfer ownership in studio settings.",
+	admin: "Manages members, editions and payouts.",
+	editor: "Drafts, prices and releases editions.",
+	viewer: "Sees editions and sales, but can't change them.",
+}
+
+type Activity = { id: string; icon: string; text: string; when: string }
+
+type Member = {
+	id: string
+	name: string
+	email: string
+	initials: string
+	role: Role
+	pending: boolean
+	handle?: string
+	joined?: string
+	lastActive?: string
+	editions?: number
+	invitedBy?: string
+	sent?: string
+	expires?: string
+	resent?: boolean
+	activity: Activity[]
+}
+
+const seats = 10
+
+const initialMembers: Member[] = [
+	{
+		id: "u_01", name: "Ada Lovelace", handle: "@ada", email: "ada@atelier.art", initials: "AL", role: "owner", pending: false,
+		joined: "Mar 4, 2024", lastActive: "Online now", editions: 12,
+		activity: [
+			{ id: "a1", icon: "gem", text: "Released Analytical Engine No. 3 — edition of 50", when: "2 hours ago" },
+			{ id: "a2", icon: "mail", text: "Invited louise@bourgeois.studio as Editor", when: "2 days ago" },
+		],
+	},
+	{
+		id: "u_02", name: "Grace Hopper", handle: "@grace", email: "grace@atelier.art", initials: "GH", role: "admin", pending: false,
+		joined: "Mar 9, 2024", lastActive: "20 minutes ago", editions: 4,
+		activity: [
+			{ id: "a1", icon: "user", text: "Changed Frida Kahlo's role to Viewer", when: "Yesterday" },
+			{ id: "a2", icon: "edit", text: "Updated pricing on First Compiler — edition of 10", when: "3 days ago" },
+			{ id: "a3", icon: "gem", text: "Released First Compiler — edition of 10", when: "Sep 28" },
+		],
+	},
+	{
+		id: "u_03", name: "Mary Shelley", handle: "@mary", email: "mary@atelier.art", initials: "MS", role: "editor", pending: false,
+		joined: "Jun 18, 2024", lastActive: "3 hours ago", editions: 7,
+		activity: [
+			{ id: "a1", icon: "calendar", text: "Scheduled Frankenstein Studies for Oct 14", when: "3 hours ago" },
+			{ id: "a2", icon: "gem", text: "Released The Last Man — edition of 25", when: "Sep 21" },
+		],
+	},
+	{
+		id: "u_04", name: "Nina Simone", handle: "@nina", email: "nina@atelier.art", initials: "NS", role: "editor", pending: false,
+		joined: "Jan 12, 2025", lastActive: "Yesterday", editions: 3,
+		activity: [
+			{ id: "a1", icon: "upload", text: "Uploaded artwork for Little Girl Blue", when: "Yesterday" },
+			{ id: "a2", icon: "gem", text: "Released Feeling Good — edition of 100", when: "Aug 30" },
+		],
+	},
+	{
+		id: "u_05", name: "Frida Kahlo", handle: "@frida", email: "frida@atelier.art", initials: "FK", role: "viewer", pending: false,
+		joined: "Jul 2, 2025", lastActive: "4 days ago", editions: 0,
+		activity: [{ id: "a1", icon: "comment", text: "Commented on the Las Dos Fridas draft", when: "4 days ago" }],
+	},
+	{
+		id: "i_01", name: "louise@bourgeois.studio", email: "louise@bourgeois.studio", initials: "", role: "editor", pending: true,
+		invitedBy: "Ada Lovelace", sent: "2 days ago", expires: "In 5 days",
+		activity: [],
+	},
 ]
 
 export function ListDetailPage() {
+	const [members, setMembers] = useState(initialMembers)
+	const [selectedId, setSelectedId] = useState<string | null>("u_02")
+	const [query, setQuery] = useState("")
+	// Below lg the list and the detail share one column: selecting drills in.
+	const [showDetail, setShowDetail] = useState(false)
+	const [confirming, setConfirming] = useState(false)
+	const listRef = useRef<HTMLDivElement>(null)
+	const backRef = useRef<HTMLButtonElement>(null)
+	const searchRef = useRef<HTMLInputElement>(null)
+
+	const needle = query.trim().toLowerCase()
+	const visible = members.filter((m) =>
+		[m.name, m.email, m.handle ?? "", roleLabel[m.role]].some((v) => v.toLowerCase().includes(needle)),
+	)
+	const selected = members.find((m) => m.id === selectedId) ?? null
+	const active = members.filter((m) => !m.pending).length
+	const pending = members.length - active
+
+	// Drilling in on a phone moves focus to the detail's back control; the
+	// control is display:none at lg, so desktop focus stays on the list.
+	useEffect(() => {
+		if (showDetail && backRef.current?.offsetParent) backRef.current.focus()
+	}, [showDetail, selectedId])
+
+	function select(id: string) {
+		setSelectedId(id)
+		setShowDetail(true)
+	}
+
+	function focusRow(id: string | undefined) {
+		requestAnimationFrame(() => {
+			listRef.current?.querySelector<HTMLButtonElement>(`[data-member-id="${id}"] button`)?.focus()
+		})
+	}
+
+	function backToList() {
+		setShowDetail(false)
+		focusRow(selectedId ?? undefined)
+	}
+
+	function setRole(id: string, role: Role) {
+		setMembers((list) => list.map((m) => (m.id === id ? { ...m, role } : m)))
+	}
+
+	function resend(id: string) {
+		setMembers((list) =>
+			list.map((m) => (m.id === id ? { ...m, sent: "Just now", expires: "In 7 days", resent: true } : m)),
+		)
+	}
+
+	function remove(id: string) {
+		const index = members.findIndex((m) => m.id === id)
+		const rest = members.filter((m) => m.id !== id)
+		setMembers(rest)
+		const next = rest[Math.min(index, rest.length - 1)]?.id
+		setSelectedId(next ?? null)
+		setShowDetail(false)
+		// The control that opened the confirmation is gone; land on the next row.
+		focusRow(next)
+	}
+
 	return (
 		<Page as="main" max="wide" gap={4} className="py-6">
 			<PageHeader
 				title="Members"
-				description="Everyone with access to this workspace."
-				actions={<Button>Invite member</Button>}
+				description={`${active} members · ${pending} pending ${pending === 1 ? "invite" : "invites"} · ${members.length} of ${seats} seats used`}
+				actions={<Button iconStart={<Icon name="plus" />}>Invite member</Button>}
 			/>
 			<Columns count={{ base: 1, lg: 12 }}>
-				<Col span={{ base: 1, lg: 8 }}>
+				<Col span={{ base: 1, lg: 5 }} className={showDetail ? "max-lg:hidden" : undefined}>
 					<Stack gap={3}>
-						<SearchInput placeholder="Search members" aria-label="Search members" />
-						<Card className="overflow-hidden">
-							<CardList>
-									{members.map((member) => (
-										<Entity
-											key={member.id}
-											leading={
-												<Avatar
-													fallback={member.pending ? "•" : member.initials}
-													alt={member.pending ? "" : member.name}
-												/>
-											}
-											title={
-												<span className={member.pending ? "text-muted-foreground" : undefined}>
-													{member.name}
-												</span>
-											}
-											subtitle={member.handle}
-											action={
-												member.pending ? (
-													<Badge>Invited</Badge>
-												) : (
-													<Badge appearance="outline">{member.role}</Badge>
-												)
-											}
-										/>
-									))}
-							</CardList>
+						<SearchInput
+							ref={searchRef}
+							value={query}
+							onValueChange={setQuery}
+							placeholder="Search name, email or role"
+							aria-label="Search members"
+						/>
+						{/* sable-surface derives the rows' selected step from the card (12% ink),
+						    so a selected row stays distinct from its muted avatar. */}
+						<Card ref={listRef} className="sable-surface">
+							{visible.length > 0 ? (
+								<CardList aria-label="Members">
+									{visible.map((m) => {
+										const isSelected = m.id === selectedId
+										return (
+											<Entity
+												key={m.id}
+												data-member-id={m.id}
+												data-selected={isSelected ? "" : undefined}
+												// No selected variant on Entity yet: the relative-surface recipe paints
+												// data-selected one step off the card.
+												className="sable-surface-interactive"
+												interactive
+												onSelect={() => select(m.id)}
+												leading={
+													<Avatar
+														fallback={m.pending ? <Icon name="mail" className="size-5" /> : m.initials}
+														status={m.lastActive === "Online now" ? <StatusDot tone="success" /> : undefined}
+														// The row's title already names it: keep the initials out of the row's name.
+														aria-hidden
+													/>
+												}
+												title={
+													<>
+														{m.name}
+														{isSelected ? <span className="sr-only"> (selected)</span> : null}
+													</>
+												}
+												subtitle={
+													m.pending
+														? `${roleLabel[m.role]} · invite sent ${m.sent?.toLowerCase()}`
+														: `${roleLabel[m.role]} · ${m.handle}`
+												}
+												action={m.pending ? <Badge tone="info">Invited</Badge> : undefined}
+											/>
+										)
+									})}
+								</CardList>
+							) : (
+								<CardContent>
+									<EmptyState
+										icon={<Icon name="search" />}
+										title="No members found"
+										description={`Nobody matches “${query.trim()}”. Try a name, email or role.`}
+										action={
+											<Button variant="secondary" size="sm" onClick={() => {
+												setQuery("")
+												searchRef.current?.focus()
+											}}>
+												Clear search
+											</Button>
+										}
+									/>
+								</CardContent>
+							)}
 						</Card>
 					</Stack>
 				</Col>
-				<Col span={{ base: 1, lg: 4 }}>
-					<aside className="sticky top-6">
-						<Card>
-							<CardHeader>
-								<CardTitle>Workspace</CardTitle>
-							</CardHeader>
-							<CardContent className="flex flex-col gap-3">
-								{/* Label/value pairs are a Description list, not hand-built rows. */}
-								<Description>
-									<DescriptionItem term="Members" detail={<span className="text-mono-md">5</span>} />
-									<DescriptionItem term="Pending invites" detail={<span className="text-mono-md">1</span>} />
-									<DescriptionItem term="Seats used" detail={<span className="text-mono-md">6 / 10</span>} />
-								</Description>
-								<Button variant="outline" size="sm" className="mt-1 self-start">
-									Manage plan
-								</Button>
-							</CardContent>
-						</Card>
-					</aside>
+				<Col span={{ base: 1, lg: 7 }} className={showDetail ? undefined : "max-lg:hidden"}>
+					<Stack role="region" aria-label="Member details" gap={3} className="lg:sticky lg:top-6">
+						<Button
+							ref={backRef}
+							variant="ghost"
+							size="sm"
+							iconStart={<Icon name="chevron-left" />}
+							onClick={backToList}
+							className="self-start lg:hidden"
+						>
+							All members
+						</Button>
+						{selected === null ? (
+							<EmptyState
+								surface="card"
+								icon={<Icon name="user" />}
+								title="No member selected"
+								description="Choose someone from the list to see their role and activity."
+							/>
+						) : (
+							<>
+								<Card>
+									<CardHeader>
+										<Row gap={2}>
+											<Avatar
+												size="lg"
+												fallback={selected.pending ? <Icon name="mail" className="size-6" /> : selected.initials}
+												status={selected.lastActive === "Online now" ? <StatusDot tone="success" /> : undefined}
+												alt={selected.pending ? "Pending invite" : selected.name}
+											/>
+											<Stack gap={0} className="min-w-0">
+												<CardTitle role="heading" aria-level={2} className="truncate">
+													{selected.name}
+												</CardTitle>
+												<CardDescription className="truncate">
+													{selected.pending ? "Hasn't joined yet" : `${selected.handle} · ${selected.email}`}
+												</CardDescription>
+											</Stack>
+										</Row>
+										{selected.pending ? (
+											<CardAction>
+												<Badge tone="info">Invited</Badge>
+											</CardAction>
+										) : null}
+									</CardHeader>
+									<CardContent>
+										<Stack gap={5}>
+											<Field
+												label={selected.pending ? "Role on joining" : "Role"}
+												description={roleSummary[selected.role]}
+											>
+												<Select
+													items={roles}
+													value={selected.role}
+													onValueChange={(value) => setRole(selected.id, value as Role)}
+													disabled={selected.role === "owner"}
+												>
+													<SelectTrigger className="max-w-72" />
+													<SelectContent>
+														{roles
+															.filter((r) => r.value !== "owner" || selected.role === "owner")
+															.map((r) => (
+																<SelectItem key={r.value} value={r.value}>
+																	{r.label}
+																</SelectItem>
+															))}
+													</SelectContent>
+												</Select>
+											</Field>
+											<div className="@container">
+												{selected.pending ? (
+													<dl className="sable-list-dl sable-list-dl-2">
+														<dt>Sent</dt>
+														<dd>{selected.sent}</dd>
+														<dt>Expires</dt>
+														<dd>{selected.expires}</dd>
+														<dt>Invited by</dt>
+														<dd>{selected.invitedBy}</dd>
+													</dl>
+												) : (
+													<dl className="sable-list-dl sable-list-dl-2">
+														<dt>Email</dt>
+														<dd>{selected.email}</dd>
+														<dt>Joined</dt>
+														<dd>{selected.joined}</dd>
+														<dt>Last active</dt>
+														<dd className={selected.lastActive === "Online now" ? "text-success" : undefined}>
+															{selected.lastActive}
+														</dd>
+														<dt>Editions released</dt>
+														<dd>{selected.editions}</dd>
+													</dl>
+												)}
+											</div>
+										</Stack>
+									</CardContent>
+									{selected.role !== "owner" ? (
+										<CardFooter>
+											<Row gap={2} wrap>
+												{selected.pending ? (
+													<Button
+														variant="secondary"
+														size="sm"
+														iconStart={<Icon name={selected.resent ? "check" : "send"} />}
+														disabled={selected.resent}
+														onClick={() => resend(selected.id)}
+													>
+														{selected.resent ? "Invite resent" : "Resend invite"}
+													</Button>
+												) : null}
+												<Button variant="outline" size="sm" onClick={() => setConfirming(true)}>
+													{selected.pending ? "Revoke invite" : "Remove from studio"}
+												</Button>
+											</Row>
+										</CardFooter>
+									) : null}
+								</Card>
+								{selected.activity.length > 0 ? (
+									<Card>
+										<CardHeader>
+											<CardTitle role="heading" aria-level={3}>
+												Recent activity
+											</CardTitle>
+										</CardHeader>
+										<CardList>
+											{selected.activity.map((a) => (
+												<Entity
+													key={a.id}
+													leading={<Icon name={a.icon} className="text-muted-foreground" />}
+													title={a.text}
+													subtitle={a.when}
+												/>
+											))}
+										</CardList>
+									</Card>
+								) : null}
+								<DestructiveActionModal
+									open={confirming}
+									onOpenChange={setConfirming}
+									title={selected.pending ? "Revoke this invite?" : `Remove ${selected.name}?`}
+									description={
+										selected.pending
+											? `${selected.email} won't be able to join with the link they were sent.`
+											: "They lose access to the studio right away. Editions they released stay on sale."
+									}
+									confirmLabel={selected.pending ? "Revoke invite" : "Remove member"}
+									onConfirm={() => remove(selected.id)}
+								/>
+							</>
+						)}
+					</Stack>
 				</Col>
 			</Columns>
 		</Page>
@@ -4114,37 +5489,84 @@ export function ListDetailPage() {
 
 # SettingsPage
 
-Stacked settings sections inside the app shell: a content-width region, one Fieldset card per concern (each with its own save), auto-wired Form/Field rows, and a destructive zone last.
+Account settings inside the app shell: a sticky SideNav section rail beside a column of section Cards — a Profile form with the page's one explicit save, Card + CardList + Entity rows with Switches that apply instantly, a read-only payouts summary, account rows, and a delete card confirmed through DestructiveActionModal.
 
 **Intent:** Reach for this for account/profile/workspace settings and any 'edit a handful of grouped preferences' route. Not for a single short form (use AuthPage's centered form shape) or bulk record editing (use DashboardPage + DataTable).
 
 ## Notes
 
-- Region cap is `content` (896px): settings panes hold labeled rows and the occasional 2-up field, never a full grid.
-- One Fieldset per concern, each with its own footer save — per-section saves beat one page-wide submit for settings.
-- Field wires label/description/error a11y automatically; never hand-roll <label> + <input> pairs here.
-- The destructive section is visually last, isolated in its own Fieldset with a destructive-variant action.
-- Toggles use orientation="horizontal" Fields so the label sits beside the Switch.
+- Region cap is `wide`, split on a 12-column track: a 3-column SideNav rail and a 9-column section column. The rail fills the space a lone content-width column would leave empty and gives the page its table of contents.
+- The rail is `SideNav` (the documented settings sub-nav), sticky, with in-page anchor items; it hides below lg, where the sections simply stack and the shell's BottomNav carries app navigation.
+- One save model, stated in the copy: drafted text (the Profile form) commits through its single footer save; toggles apply the moment they change, and the Notifications description says so. Never pair a Switch with a Save button.
+- Settings rows are Card + CardList + Entity with the Switch in `action` — the row owns its title and one-line description; keep descriptions short, because Entity truncates its subtitle.
+- Each section is a Card whose CardTitle holds an h2, so the page has a real heading outline under PageHeader's h1; Cards carry the anchor id and `scroll-mt-*` so anchor jumps clear the top edge.
+- Field wires label/description/error a11y automatically; never hand-roll <label> + <input> pairs. Pair fields side by side with Grid cols={{ base: 1, sm: 2 }}.
+- The destructive action is last and isolated in its own Card, and it never acts directly: it opens DestructiveActionModal with type-to-confirm on the handle.
 - Lives in the same AppShell as DashboardPage: Sidebar from lg up, AppHeader + BottomNav below it, with Settings marked active in both.
 
 ## Accessibility
 
 - AppShell provides the skip link and <main id="main-content"> landmark; the active SidebarItem and BottomNavItem carry aria-current.
-- Each section is a real <fieldset> with a <legend> (FieldsetLegend).
+- The section rail is a labelled <nav> ("Settings sections") distinct from the primary navigation; its active item carries aria-current.
+- Every section has an h2, so screen-reader heading navigation mirrors the rail.
+- Each Switch takes its row title as aria-label, since the Entity title is not a <label>.
 - Field auto-wires htmlFor/id, aria-describedby (description + error), aria-invalid, and required.
-- The danger action is a real button labeled by its visible text — no icon-only destructive controls.
+- DestructiveActionModal is an alertdialog: focus opens on Cancel, the backdrop does not dismiss, and the confirm stays disabled until the handle is typed.
 
 ## Source
 
 ```tsx
-import { AppHeader, AppShell, BottomNav, BottomNavItem, Button, Field, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, Form, Icon, Input, Page, PageHeader, Select, SelectContent, SelectItem, SelectTrigger, Sidebar, SidebarHeader, SidebarItem, SidebarNav, Switch, Textarea } from "@sableui/react"
+import { useState } from "react"
+import { AppHeader, AppShell, Avatar, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Col, Columns, DestructiveActionModal, DotsMenu, Entity, Field, Form, Grid, Icon, Input, MenuItem, MenuSeparator, NotificationBadge, Page, PageHeader, Row, Select, SelectContent, SelectItem, SelectTrigger, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, SideNav, SideNavItem, Stack, Switch, Textarea } from "@sableui/react"
+
+const sections = [
+	{ id: "profile", label: "Profile" },
+	{ id: "notifications", label: "Notifications" },
+	{ id: "payouts", label: "Payouts" },
+	{ id: "account", label: "Account" },
+]
+
+const timezones = [
+	{ value: "europe-london", label: "London (GMT+1)" },
+	{ value: "europe-paris", label: "Paris (GMT+2)" },
+	{ value: "america-new-york", label: "New York (GMT−4)" },
+	{ value: "america-los-angeles", label: "Los Angeles (GMT−7)" },
+	{ value: "asia-tokyo", label: "Tokyo (GMT+9)" },
+]
+
+const notifications = [
+	{ name: "notifyCollects", title: "New collects", description: "When someone collects your work", on: true },
+	{ name: "notifySoldOut", title: "Sold out", description: "When an edition sells its last copy", on: true },
+	{ name: "notifyFollowers", title: "New followers", description: "When a collector follows you", on: false },
+	{ name: "notifyDigest", title: "Weekly digest", description: "Sales and collectors, every Monday", on: true },
+	{ name: "notifyProduct", title: "Product updates", description: "New Atelier features", on: false },
+]
+
+const payouts = [
+	{ label: "Next payout", value: "$1,284.60", note: "Friday, Oct 16" },
+	{ label: "Pending", value: "$412.00", note: "Clears in 7 days" },
+	{ label: "Paid this year", value: "$18,920.00", note: "Across 214 collects" },
+]
 
 export function SettingsPage() {
+	const [activeSection, setActiveSection] = useState("profile")
+	const [deleteOpen, setDeleteOpen] = useState(false)
+
 	return (
 		<AppShell
 			// Sidebar hides below lg, so the same destinations ride in the shell's
 			// mobile slots — without them the route has no navigation under 1024px.
-			header={<AppHeader title={<span className="text-title-sm">Atelier</span>} />}
+			header={
+				<AppHeader
+					title={
+						<Row gap={1} align="center">
+							<Icon name="gem" variant="solid" className="text-xl" />
+							<span className="text-title-sm">Atelier</span>
+						</Row>
+					}
+					actions={<Avatar size="sm" fallback="AL" alt="Ada Lovelace" />}
+				/>
+			}
 			bottomNav={
 				<BottomNav aria-label="Primary">
 					<BottomNavItem icon={<Icon name="grid" />} label="Overview" showLabel render={<a href="/" />} />
@@ -4157,78 +5579,243 @@ export function SettingsPage() {
 			sidebar={
 				<Sidebar>
 					<SidebarHeader>
-						<span className="text-title-sm">Atelier</span>
+						<Row gap={1} align="center" className="px-3">
+							<Icon name="gem" variant="solid" className="text-xl" />
+							<span className="text-title-sm">Atelier</span>
+						</Row>
 					</SidebarHeader>
 					<SidebarNav>
 						<SidebarItem icon={<Icon name="grid" />} label="Overview" render={<a href="/" />} />
 						<SidebarItem icon={<Icon name="image-stack" />} label="Editions" render={<a href="/editions" />} />
 						<SidebarItem icon={<Icon name="user" />} label="Collectors" render={<a href="/collectors" />} />
-						<SidebarItem icon={<Icon name="bell" />} label="Activity" render={<a href="/activity" />} />
+						<SidebarItem
+							icon={<Icon name="bell" />}
+							label="Activity"
+							badge={<NotificationBadge count={4} tone="neutral" />}
+							render={<a href="/activity" />}
+						/>
 						<SidebarItem icon={<Icon name="gear" />} label="Settings" active render={<a href="/settings" />} />
 					</SidebarNav>
+					{/* Entity and DotsMenu ink with page tokens; a theme can paint the rail
+					    dark on a light page, so this subtree reads the rail's ink instead. */}
+					<SidebarFooter className="[--foreground:var(--sidebar-foreground)]">
+						<Entity
+							className="[--entity-py:0]"
+							leading={<Avatar size="sm" fallback="AL" alt="" />}
+							title="Ada Lovelace"
+							action={
+								<DotsMenu label="Account" size="icon-sm">
+									<MenuItem render={<a href="/@ada" />}>View profile</MenuItem>
+									<MenuItem render={<a href="/settings" />}>Settings</MenuItem>
+									<MenuSeparator />
+									<MenuItem>Sign out</MenuItem>
+								</DotsMenu>
+							}
+						/>
+					</SidebarFooter>
 				</Sidebar>
 			}
 		>
 			{/* No `as="main"`: AppShell already renders <main id="main-content">. */}
-			<Page max="content" gap={4} className="py-6">
+			<Page max="wide" gap={4} className="py-6">
 				<PageHeader
 					title="Settings"
-					description="Your profile, notifications, and account controls."
+					description="Manage your profile, notifications, and payouts."
 				/>
-				<Form onSubmit={(event) => event.preventDefault()}>
-					<Fieldset>
-						<FieldsetLegend>Profile</FieldsetLegend>
-						<FieldsetDescription>How you appear across the app.</FieldsetDescription>
-						<FieldsetContent>
-							<Field label="Display name" required>
-								<Input name="displayName" defaultValue="ada" />
-							</Field>
-							<Field label="Bio" description="Shown on your public profile.">
-								<Textarea name="bio" rows={3} placeholder="Tell collectors who you are" />
-							</Field>
-							<Field label="Timezone">
-								<Select defaultValue="utc" name="timezone">
-									<SelectTrigger />
-									<SelectContent>
-										<SelectItem value="utc">UTC</SelectItem>
-										<SelectItem value="est">Eastern (UTC−5)</SelectItem>
-										<SelectItem value="pst">Pacific (UTC−8)</SelectItem>
-									</SelectContent>
-								</Select>
-							</Field>
-						</FieldsetContent>
-						<FieldsetFooter>
-							<Button type="submit">Save profile</Button>
-						</FieldsetFooter>
-					</Fieldset>
-				</Form>
-				<Form onSubmit={(event) => event.preventDefault()}>
-					<Fieldset>
-						<FieldsetLegend>Notifications</FieldsetLegend>
-						<FieldsetDescription>What we email you about.</FieldsetDescription>
-						<FieldsetContent>
-							<Field label="New collector alerts" orientation="horizontal">
-								<Switch name="collectorAlerts" defaultChecked />
-							</Field>
-							<Field label="Weekly digest" orientation="horizontal">
-								<Switch name="weeklyDigest" />
-							</Field>
-						</FieldsetContent>
-						<FieldsetFooter>
-							<Button type="submit">Save notifications</Button>
-						</FieldsetFooter>
-					</Fieldset>
-				</Form>
-				<Fieldset>
-					<FieldsetLegend>Danger zone</FieldsetLegend>
-					<FieldsetDescription>
-						Deleting your account removes your posts and collections permanently.
-					</FieldsetDescription>
-					<FieldsetFooter>
-						<Button variant="destructive">Delete account</Button>
-					</FieldsetFooter>
-				</Fieldset>
+				<Columns gap={4}>
+					{/* The section rail is a desktop aid; on mobile the sections simply stack. */}
+					<Col span={{ base: 12, lg: 3 }} className="hidden lg:block">
+						<SideNav aria-label="Settings sections" className="sticky top-6">
+							{sections.map((section) => (
+								<SideNavItem
+									key={section.id}
+									label={section.label}
+									active={activeSection === section.id}
+									onClick={() => setActiveSection(section.id)}
+									render={<a href={`#${section.id}`} />}
+								/>
+							))}
+						</SideNav>
+					</Col>
+					<Col span={{ base: 12, lg: 9 }}>
+						<Stack gap={3}>
+							<Card id="profile" className="scroll-mt-6">
+								<CardHeader>
+									<CardTitle>
+										<h2>Profile</h2>
+									</CardTitle>
+									<CardDescription>How collectors see you on Atelier.</CardDescription>
+								</CardHeader>
+								{/* The one explicit save on the page: profile text is drafted, then
+								    committed. Toggles below apply the moment they change. */}
+								<Form onSubmit={(event) => event.preventDefault()} className="gap-0">
+									<CardContent>
+										<Stack gap={3}>
+											<Row gap={2}>
+												<Avatar size="lg" fallback="AL" alt="Ada Lovelace" />
+												<Stack gap={0.5} align="start">
+													<Row gap={1}>
+														<Button type="button" variant="outline" size="sm">
+															Upload photo
+														</Button>
+														<Button type="button" variant="ghost" size="sm">
+															Remove
+														</Button>
+													</Row>
+													<p className="text-caption text-muted-foreground">
+														Square PNG or JPG, at least 400 px.
+													</p>
+												</Stack>
+											</Row>
+											<Grid cols={{ base: 1, sm: 2 }} gap={3}>
+												<Field label="Display name" name="displayName" required>
+													<Input defaultValue="Ada Lovelace" autoComplete="name" />
+												</Field>
+												<Field label="Handle" name="handle" description="atelier.com/@ada" required>
+													<Input defaultValue="ada" autoComplete="username" spellCheck={false} />
+												</Field>
+											</Grid>
+											<Field label="Bio" name="bio" description="Shown on your profile and edition pages.">
+												<Textarea
+													rows={3}
+													defaultValue="Generative artist working in plotted ink and code. New editions of 25 to 100 every month."
+												/>
+											</Field>
+											<Grid cols={{ base: 1, sm: 2 }} gap={3}>
+												<Field label="Timezone" name="timezone" description="Release times use this zone.">
+													<Select defaultValue="europe-london" items={timezones}>
+														<SelectTrigger />
+														<SelectContent>
+															{timezones.map((zone) => (
+																<SelectItem key={zone.value} value={zone.value}>
+																	{zone.label}
+																</SelectItem>
+															))}
+														</SelectContent>
+													</Select>
+												</Field>
+											</Grid>
+										</Stack>
+									</CardContent>
+									<CardFooter className="justify-end">
+										<Button type="submit">Save profile</Button>
+									</CardFooter>
+								</Form>
+							</Card>
+
+							<Card id="notifications" className="scroll-mt-6">
+								<CardHeader>
+									<CardTitle>
+										<h2>Notifications</h2>
+									</CardTitle>
+									<CardDescription>
+										Email updates about your editions. Changes save automatically.
+									</CardDescription>
+								</CardHeader>
+								<CardList>
+									{notifications.map((item) => (
+										<Entity
+											key={item.name}
+											title={item.title}
+											subtitle={item.description}
+											action={
+												<Switch
+													name={item.name}
+													defaultChecked={item.on}
+													aria-label={item.title}
+												/>
+											}
+										/>
+									))}
+								</CardList>
+							</Card>
+
+							<Card id="payouts" className="scroll-mt-6">
+								<CardHeader>
+									<CardTitle>
+										<h2>Payouts</h2>
+									</CardTitle>
+									<CardDescription>Paid in USD every Friday to Chase checking ••4821.</CardDescription>
+									<CardAction>
+										<Button variant="outline" size="sm" render={<a href="/settings/payouts" />}>
+											Manage payouts
+										</Button>
+									</CardAction>
+								</CardHeader>
+								<CardContent>
+									<Grid cols={{ base: 1, sm: 3 }} gap={3}>
+										{payouts.map((stat) => (
+											<Stack key={stat.label} gap={0.5}>
+												<p className="text-body-sm text-muted-foreground">{stat.label}</p>
+												<p className="text-mono-lg text-foreground">{stat.value}</p>
+												<p className="text-caption text-muted-foreground">{stat.note}</p>
+											</Stack>
+										))}
+									</Grid>
+								</CardContent>
+							</Card>
+
+							<Card id="account" className="scroll-mt-6">
+								<CardHeader>
+									<CardTitle>
+										<h2>Account</h2>
+									</CardTitle>
+									<CardDescription>Sign-in details and your data.</CardDescription>
+								</CardHeader>
+								<CardList>
+									<Entity
+										leading={<Icon name="mail" className="text-lg text-muted-foreground" />}
+										title="Email"
+										subtitle="ada@atelier.art"
+										action={
+											<Button variant="outline" size="sm">
+												Change
+											</Button>
+										}
+									/>
+									<Entity
+										leading={<Icon name="download" className="text-lg text-muted-foreground" />}
+										title="Export data"
+										subtitle="Editions, sales, and collectors"
+										action={
+											<Button variant="outline" size="sm">
+												Export
+											</Button>
+										}
+									/>
+								</CardList>
+							</Card>
+
+							<Card>
+								<CardHeader>
+									<CardTitle>
+										<h2>Delete account</h2>
+									</CardTitle>
+									<CardDescription>
+										Permanently remove your profile, editions, and sales history. Collectors keep
+										the editions they own.
+									</CardDescription>
+								</CardHeader>
+								<CardFooter className="justify-end">
+									<Button variant="destructive" onClick={() => setDeleteOpen(true)}>
+										Delete account
+									</Button>
+								</CardFooter>
+							</Card>
+						</Stack>
+					</Col>
+				</Columns>
 			</Page>
+			<DestructiveActionModal
+				open={deleteOpen}
+				onOpenChange={setDeleteOpen}
+				title="Delete your account?"
+				description="This permanently removes your profile, 12 editions, and sales history. Pending payouts are still sent. This can't be undone."
+				confirmLabel="Delete account"
+				confirmingLabel="Deleting…"
+				confirmText="ada"
+				onConfirm={() => setDeleteOpen(false)}
+			/>
 		</AppShell>
 	)
 }
@@ -5820,7 +7407,7 @@ import { Browser, Region } from "@sableui/react"
 
 **Status:** stable
 
-The surface a message's content sits on: four treatments, an align-aware tail corner, a readable measure cap, and an optional row of reaction pills.
+The surface a message's content sits on: four treatments, an align-aware tail, a readable measure cap, and an optional row of reaction pills.
 
 **Keywords:** chat bubble, message bubble, speech bubble, reactions, conversation, messaging, ai chat
 
@@ -5832,7 +7419,7 @@ The tinted (or untinted) surface a turn's content sits on. Kept separate from Me
 
 - Do: Use `muted` for the other party and `primary` for the reader's own messages. Two treatments is the whole vocabulary a conversation needs to say who is speaking.
 - Do: Reach for `variant="plain"` for long-form assistant output — rendered markdown, code blocks, tables. A tinted box around three paragraphs reads as a quote block rather than as a turn, and `plain` drops the measure cap with the surface.
-- Do: Pass the same `align` you gave the enclosing Message, so the flattened corner lands on the speaker's side.
+- Do: Pass the same `align` you gave the enclosing Message, so the tail lands on the speaker's side.
 - Do: Set `tail={false}` on the continuation bubbles in a grouped run — the tail marks where a speaker starts, and repeating it on every line makes a block of one person's messages look like four separate turns.
 - Do: Let the register size it. Inside `<Density value="compact">` a Bubble sets itself in the workspace prose tier automatically — a docked agent panel needs no per-call-site sizing, and hardcoding one defeats the mechanism.
 - Don't: Do not remove the measure cap to fill a wide window. ~42rem is a reading measure; a bubble spanning a 1600px viewport is a paragraph at 140 characters per line.
@@ -5844,7 +7431,7 @@ The tinted (or untinted) surface a turn's content sits on. Kept separate from Me
 
 | Part | Required | Description |
 | --- | --- | --- |
-| Bubble | yes | The surface itself. Holds the variant, the side, and the flattened tail corner. |
+| Bubble | yes | The surface itself. Holds the variant, the side, and the tail. |
 | BubbleReactions | no | The row of reaction pills, just under the bubble at the message column's small gap, so it reads as belonging to that message rather than the next row. |
 | BubbleReaction | no | One reaction pill — emoji, count (hidden at 1), and pressed state. |
 
@@ -5860,8 +7447,8 @@ The tinted (or untinted) surface a turn's content sits on. Kept separate from Me
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | variant | "muted" \| "primary" \| "outline" \| "plain" | "muted" | Surface treatment. `muted` for the other party, `primary` for the reader's own messages, `outline` for a quieter own-side, `plain` for long-form output that should not sit in a box (also drops the measure cap and padding). |
-| align | "start" \| "end" | "start" | Which side of the conversation the bubble is on — flattens the corner nearest the speaker. Match it to the enclosing Message. |
-| tail | boolean | true | Flatten the speaker-side corner. A flattened corner rather than a drawn arrow, so it holds up in every theme's radius language (flat through fully pilled) with no per-theme geometry. Turn it off for the continuation bubbles in a grouped run. |
+| align | "start" \| "end" | "start" | Which side of the conversation the bubble is on — puts the tail on the speaker's side. Match it to the enclosing Message. |
+| tail | boolean | true | Draw the tail: a small ear off the speaker-side top corner, which goes square to meet it. The same 5px in every theme's radius language, flat through fully pilled. The bubble keeps the ear's space either way, so turning it off for the continuation bubbles in a grouped run keeps the run aligned. |
 | ...div props | ComponentPropsWithRef<"div"> | — | Spread onto the surface element. |
 
 ## Variants
@@ -6709,7 +8296,7 @@ Use CheckboxCard when an option needs more visual weight, supporting text, or ic
 | onCheckedChange | (checked: boolean, eventDetails) => void | — | Fires with the next checked state (Base UI passes eventDetails second). Pair with `checked` for a controlled card; omit both to let it manage its own state. |
 | title | ReactNode | — | The card's primary label (text-title-sm). |
 | description | ReactNode | — | Optional supporting copy beneath the title (text-body-sm, muted). |
-| icon | ReactNode | — | Optional leading glyph (a solid <Icon>); takes the tone colour. |
+| icon | ReactNode | — | Optional glyph (a solid <Icon>) in the tone colour. Its presence switches to the two-dimensional card RadioCard uses — icon top-left, checkbox top-right, copy below — so the two cards match in one form. |
 | tone | "neutral" \| "standard" \| "collectible" \| "edition" \| "info" \| "warning" | "neutral" | Semantic colour the checked state carries across the border, checkbox box, and icon. |
 | value | string | — | Names the card inside a group-owned CheckboxGroup: the card is checked when the group's value array includes it. Also the value submitted with a form. Inside a CheckboxGroup, `name` stands in for `value` when `value` is omitted. |
 | checked / onCheckedChange / defaultChecked / disabled | Base UI Checkbox.Root props | — | Standard checkbox state. Without a group-owned value, each card is independent — drive checked/onCheckedChange per item for multi-select. |
@@ -7459,9 +9046,9 @@ import { Avatar, ContextCard, ContextCardContent, ContextCardTrigger, Entity } f
 ### With stat row
 
 ```tsx
-import { Avatar, ContextCard, ContextCardContent, ContextCardTrigger, Description, DescriptionItem, Entity } from "@sableui/react"
+import { Avatar, ContextCard, ContextCardContent, ContextCardTrigger, Entity } from "@sableui/react"
 
-<ContextCard><ContextCardTrigger render={<a href='/u/nyx' className='text-title-sm underline-offset-2 hover:underline'>@nyx</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='NY' size='lg' />} title='Nyx' subtitle='@nyx' /><Description cols='2' className='mt-4 border-t border-border pt-3'><DescriptionItem term='Posts' detail='128' /><DescriptionItem term='Followers' detail='4.2k' /></Description></ContextCardContent></ContextCard>
+<ContextCard><ContextCardTrigger render={<a href='/u/nyx' className='text-title-sm underline-offset-2 hover:underline'>@nyx</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='NY' size='lg' />} title='Nyx' subtitle='@nyx' /><div className='@container mt-4 border-t border-border pt-3'><dl className='sable-list-dl sable-list-dl-2'><dt>Posts</dt><dd>128</dd><dt>Followers</dt><dd>4.2k</dd></dl></div></ContextCardContent></ContextCard>
 ```
 
 ---
@@ -7750,105 +9337,6 @@ import { DatePicker } from "@sableui/react"
 
 ---
 
-# Description
-
-**Status:** stable
-
-A labeled key/value list (definition list). Compose with DescriptionTerm + DescriptionDetail, or the ergonomic DescriptionItem shorthand. Aligns terms and details into a grid; cols="2" packs pairs two-wide.
-
-**Keywords:** description list, metadata, details, key value
-
-## Usage
-
-Use Description to present label-value details where each term needs a clear corresponding value.
-
-### Best practices
-
-- Do: Use it for object metadata, settings summaries, and read-only record details.
-- Do: Keep terms brief and values scannable so the list works as reference material.
-- Don't: Do not use Description for editable forms; pair Label and form controls instead.
-- Don't: Do not use it for a single key/value. A definition list of one is a labelled value — use a Label and the value, and keep the list semantics for actual lists.
-
-### Anatomy
-
-| Part | Required | Description |
-| --- | --- | --- |
-| DescriptionItem | yes | One term and detail pair. |
-| DescriptionTerm | yes | The label for the value. |
-| DescriptionDetail | yes | The value or explanatory detail. |
-
-## Subcomponents
-
-| Name | Type | Description |
-| --- | --- | --- |
-| DescriptionTerm | <dt> props + className | The key. Muted label tier; sits in the first grid column. |
-| DescriptionDetail | <dd> props + tone?: "default" \| "muted" \| "success" \| "warning" \| "destructive" + className | The value. Body tier on the foreground; sits in the second grid column. tone colors the value to encode a status (e.g. Ended → muted, Active → success), replacing inline conditional color classes; defaults to "default". |
-| DescriptionItem | { term: ReactNode; detail?: ReactNode; tone?: "default" \| "muted" \| "success" \| "warning" \| "destructive"; children? } | Ergonomic shorthand for one term/detail pair — renders a DescriptionTerm followed by a DescriptionDetail. Pass the value via detail or children; tone (defaults to "default") colors the detail value the same way it does on DescriptionDetail. |
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| cols | "1" \| "2" | "1" | Column density. One term/detail column, or two pairs per row once the list's container is at least @md (28rem) wide; narrower, it stays one column. A container query, not a viewport breakpoint, so a narrow card on a wide screen stays one column. With cols="2" the <dl> is wrapped in an @container div. |
-
-## Variants
-
-- **cols**: 1, 2
-- **tone**: default, muted, success, warning, destructive
-
-## Tokens used
-
-`muted-foreground`, `foreground`, `success`, `tone-warning`, `destructive`
-
-## Accessibility
-
-- Renders semantic <dl>/<dt>/<dd> elements so assistive tech announces the term/detail relationship.
-- tone is a visual emphasis only — keep the value text itself meaningful (e.g. "Ended"), never color alone.
-
-## Related
-
-- Components: Fieldset, Entity
-
-## Examples
-
-### Metadata list
-
-```tsx
-import { Description, DescriptionItem } from "@sableui/react"
-
-<Description>
-	<DescriptionItem term="Network" detail="Solana" />
-	<DescriptionItem term="Supply" detail="100" />
-	<DescriptionItem term="Royalty" detail="5%" />
-</Description>
-```
-
-### Composed term/detail
-
-```tsx
-import { Description, DescriptionDetail, DescriptionTerm } from "@sableui/react"
-
-<Description>
-	<DescriptionTerm>Network</DescriptionTerm>
-	<DescriptionDetail>Solana</DescriptionDetail>
-	<DescriptionTerm>Contract</DescriptionTerm>
-	<DescriptionDetail className="text-mono-sm">7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU</DescriptionDetail>
-</Description>
-```
-
-### Toned status value
-
-```tsx
-import { Description, DescriptionItem } from "@sableui/react"
-
-<Description>
-	<DescriptionItem term="Edition" detail="Midnight Archive" />
-	<DescriptionItem term="Status" detail={isEnded ? "Ended" : "Active"} tone={isEnded ? "muted" : "success"} />
-</Description>
-```
-
----
-
 # DestructiveActionModal
 
 **Status:** stable
@@ -7968,7 +9456,7 @@ Use Dialog for focused decisions, short modal forms, confirmations, and content
 | Name | Type | Description |
 | --- | --- | --- |
 | DialogContent | Base UI Popup props + size?: "default" \| "fullscreen" + showCloseButton?: boolean + scroll?: boolean + className | Backdrop + popup; portals to <body>. Composes DialogOverlay by default. size="fullscreen" is the media viewer: a near-opaque scrim (bg-overlay/95), an edge-to-edge popup that centres its children with no card chrome, motion-fade instead of motion-pop, and a safe-area-aware floating close button (Button variant="floating"); at that size showCloseButton defaults to true and scroll to false, and the media fits itself with max-h-full max-w-full object-contain. At the default size, showCloseButton (defaults to false) renders a built-in close (X) button in the top-end corner, and the header leaves room for it (Icon name="xmark"). The popup caps at the viewport height less a 1rem margin and wraps its children in a scrolling region, so a tall dialog scrolls instead of overflowing a viewport whose own scroll is locked; pass scroll={false} when the dialog owns its internal layout (a pinned header over a scrolling body) and supplies its own min-h-0 scroll region. |
-| DialogOverlay | Base UI Backdrop props + size?: "default" \| "fullscreen" + className | The styleable scrim/backdrop — bg-overlay/50 by default, near-opaque bg-overlay/95 at size="fullscreen". Composed into DialogContent (at the matching size) by default; exported for manual styling. |
+| DialogOverlay | Base UI Backdrop props + size?: "default" \| "fullscreen" + className | The styleable scrim/backdrop — bg-overlay/(--scrim-alpha) by default (50% light, 72% dark, so it dims a near-black page as visibly as a white one), near-opaque bg-overlay/95 at size="fullscreen". Composed into DialogContent (at the matching size) by default; exported for manual styling. |
 | DialogTrigger | Base UI Dialog.Trigger props (render) | Element that opens the dialog. Compose via render prop. |
 | DialogClose | Base UI Dialog.Close props (render) | Element that dismisses the dialog. Compose via render prop. |
 | DialogHeader | ComponentProps<"div"> | Top section holding DialogTitle/DialogDescription. |
@@ -8129,7 +9617,7 @@ import { DotsMenu, Icon, MenuItem, MenuSeparator } from "@sableui/react"
 
 **Status:** stable
 
-The centered empty / error block: optional icon disc or error code, title, description and an action. tone="destructive" makes it an announced error, size="lg" a page-level state, surface="card" a self-contained card.
+The centered empty / error block: optional icon or error code, title, description and an action. tone="destructive" makes it an announced error, size="lg" a page-level state, surface="card" a self-contained card.
 
 **Keywords:** empty, zero state, blank slate, no results, placeholder, onboarding, no data
 
@@ -8160,12 +9648,12 @@ Use EmptyState when a content area has no items, no search results, or no first-
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| icon | ReactNode | — | Optional leading glyph — pass an `<Icon />`. Rendered in a soft muted disc. |
+| icon | ReactNode | — | Optional glyph above the title — an `<Icon />` takes the muted ink at 3xl; an image or illustration renders as given. |
 | title | ReactNode | — | The headline. Short and direct. |
 | description | ReactNode | — | Optional supporting line beneath the title. |
 | action | ReactNode | — | Optional action below the copy — typically a `<Button />`. |
 | code | ReactNode | — | A large figure above the title, such as an error code (404). |
-| tone | "neutral" \| "destructive" | "neutral" | destructive is an error state: a destructive icon disc (a warning by default) and role="alert" so it is announced. |
+| tone | "neutral" \| "destructive" | "neutral" | destructive is an error state: a destructive icon (a warning by default) and role="alert" so it is announced. |
 | size | "md" \| "lg" | "md" | lg is page-level: the title is an h2 and the block takes more room. md sits in a panel, list or card. |
 | surface | "none" \| "card" | "none" | card draws it as a Card, for an error or empty block standing on its own in a page. |
 
@@ -8181,7 +9669,7 @@ Use EmptyState when a content area has no items, no search results, or no first-
 
 ## Accessibility
 
-- Decorative icon discs should not carry meaning the title doesn't already convey.
+- Decorative icons should not carry meaning the title doesn't already convey.
 - Pair with an actionable next step so the zero-state is a path forward, not a dead end.
 
 ## Related
@@ -8289,7 +9777,7 @@ Use Entity to show a compact identity block for a person, organization, file, pr
 
 ## Related
 
-- Components: Avatar, Badge, Description
+- Components: Avatar, Badge
 
 ## Examples
 
@@ -8435,7 +9923,7 @@ Use Fieldset to group related controls under a shared label or explanation.
 
 ## Related
 
-- Components: Form, Label, Description
+- Components: Form, Label
 
 ## Examples
 
@@ -8992,7 +10480,7 @@ import { Input } from "@sableui/react"
 
 **Status:** stable
 
-A keyboard key indicator. Renders a styled <kbd> key cap in monospace; compose several with a + between to show a shortcut combo. `mod` renders the platform modifier (⌘ or Ctrl).
+A keyboard key indicator. Renders a raised <kbd> key cap sized from the surrounding text, so one Kbd fits body copy, menus and tooltips; KbdGroup sets one cap per key for a combo. `mod` renders the platform modifier (⌘ or Ctrl); `variant="ghost"` is the bare label for menu rows and tooltips.
 
 **Keywords:** keyboard, shortcut, key, kbd
 
@@ -9003,8 +10491,10 @@ Use Kbd to display keyboard keys or shortcuts in help text, menus, and docs.
 ### Best practices
 
 - Do: Use it only for literal keyboard input such as Cmd, Enter, or Esc.
-- Do: Keep multi-key shortcuts readable by separating individual keys.
+- Do: Show a combo as one cap per key inside KbdGroup — `<KbdGroup><Kbd mod /><Kbd>K</Kbd></KbdGroup>` — not several keys typed into one cap.
+- Do: Use `variant="ghost"` where the shortcut sits on a surface of its own — a menu row's trailing slot, a tooltip — so it reads as a hint, not a second control.
 - Don't: Do not use Kbd as a decorative badge or button replacement.
+- Don't: Do not set a text size on a Kbd. It sizes itself from the text around it.
 - Don't: Do not hardcode ⌘ or Ctrl. The modifier differs by platform; use `<Kbd mod />`, which renders ⌘ on macOS/iOS and Ctrl elsewhere, or Windows users read Mac keys.
 
 ## Props
@@ -9012,17 +10502,19 @@ Use Kbd to display keyboard keys or shortcuts in help text, menus, and docs.
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | mod | boolean | false | Render the platform's shortcut modifier in place of children: ⌘ on macOS and iOS, Ctrl everywhere else. Server-rendered as Ctrl and corrected on hydration. |
+| variant | "key" \| "ghost" | "key" | `key`: a raised cap on the surface it sits on, with a heavier bottom edge as the key's lip. `ghost`: the bare label, for menu rows, tooltips and other surfaces that are already a frame. |
 | className | string | — | Merge additional classes onto the key cap. |
 | ...props | ComponentPropsWithRef<"kbd"> | — | All native <kbd> attributes (children, ref, etc.). |
 
 ## Tokens used
 
-`border`, `muted`, `muted-foreground`
+`border`, `border-strong`, `background`, `muted-foreground`
 
 ## Accessibility
 
 - Uses the semantic <kbd> element so assistive tech announces keyboard input.
-- Monospace key text keeps single keys and symbols legible at small sizes.
+- KbdGroup is itself a <kbd> around the per-key caps — the HTML spelling of one key combination — so the combo is announced as a single piece of input.
+- Sized in em from the surrounding text, so it scales with the user's text size and never shrinks below 12px.
 
 ## Related
 
@@ -9041,9 +10533,17 @@ import { Kbd } from "@sableui/react"
 ### Combo
 
 ```tsx
-import { Kbd, Row } from "@sableui/react"
+import { Kbd, KbdGroup } from "@sableui/react"
+
+<KbdGroup><Kbd mod /><Kbd>K</Kbd></KbdGroup>
+```
+
+### In a menu row
+
+```tsx
+import { Kbd, MenuItem } from "@sableui/react"
 
-<Row gap={1}><Kbd mod /><span>+</span><Kbd>K</Kbd></Row>
+<MenuItem>Search<KbdGroup className="ms-auto"><Kbd variant="ghost" mod /><Kbd variant="ghost">K</Kbd></KbdGroup></MenuItem>
 ```
 
 ---
@@ -10764,7 +12264,7 @@ Use Pill for a row of filters or choices a person clicks to narrow or toggle wha
 | --- | --- | --- | --- |
 | selected | boolean | false | Marks the pill as chosen. Solid lifts onto the primary surface; outline takes a primary tint and soft primary edge. Sets aria-pressed. |
 | appearance | "solid" \| "outline" | "solid" | solid for a filter row; outline for quiet chips that annotate other content (a reaction under a message, a tag on a card), where a filled chip would compete with what it annotates. |
-| size | "md" \| "sm" | "md" | sm sits on the density ladder's xs control height, for chips under or inside other content. |
+| size | "md" \| "sm" | "md" | md sits on the density ladder's xs control height (28px); sm is 24px, for chips under or inside other content. |
 | icon | ReactNode | — | Optional leading glyph (e.g. <Icon name="lock" />), rendered before the children with the base gap. |
 
 ## Variants
@@ -12113,7 +13613,7 @@ Use SideNav for vertical navigation inside a settings page, documentation area,
 - Do: Use aria-label on SideNav when a page contains more than one nav landmark.
 - Do: Group related items with SideNavGroup when the rail has more than one conceptual area.
 - Do: Use size='lg' and activeVariant='sidebar' when the nav is part of persistent app chrome.
-- Do: Inside a rounded, padded frame, give each item rounded-concentric-<outer>/<inset> (e.g. rounded-concentric-lg/2 in a rounded-lg p-2 box). The rows' own radius is fixed per size, and a same-radius row inset into a frame reads as a second system.
+- Do: Rows are rounded-sm, which nests in the usual rounded-lg p-2 frame. In any other rounded, padded frame give each item rounded-concentric-<outer>/<inset> — a same-radius row inset into a frame reads as a second system.
 - Don't: Use SideNav for bottom mobile navigation; use BottomNav in AppShell's bottomNav slot.
 - Don't: Mix content and sidebar active variants in the same rail unless individual items intentionally override the group.
 
@@ -12239,7 +13739,7 @@ Use Skeleton to reserve space and hint at the shape of content while data is loa
 - **arrival** · Root · _no motion_ — A skeleton stands in for content that has not arrived; fading the placeholder in adds a wait before the wait.
 - **response** · Root · _no motion_ — Nothing here is interactive. A skeleton that reacted to the pointer would invite a click on a thing that cannot be clicked.
 - **transition** · Root · _no motion_ — The skeleton has one state. Swapping it for real content is the parent's job, and the parent decides whether that swap is animated.
-- **activity** · Root · `motion-shimmer` — The sweep is the entire point of the component: it is what separates 'still loading' from 'loaded, and empty'. A static grey block is indistinguishable from a broken layout, which is why users reload the page.
+- **activity** · Root · `motion-shimmer` — The sweep is the entire point of the component: it is what separates 'still loading' from 'loaded, and empty'. A static grey block is indistinguishable from a broken layout, which is why users reload the page. It is one band of light against the viewport, so every skeleton in a loading layout lights in sequence as a single wave rather than each block flashing at its own speed; each pass eases in, glides and settles, then rests off-screen before the next.
 
 ## Accessibility
 
@@ -13258,7 +14758,7 @@ Use ThemeSelector wherever a person picks a theme. The default `cards` layout is
 
 ### Best practices
 
-- Do: Use layout="list" in a popover, a menu, or a docked panel. Rows sit on the --control-sm ladder and still show each theme's swatch strip, so the choice stays visible rather than described. Rows take `sable-frame-inner`, so host the list in a sable-frame (a Popover, or `sable-frame sable-surface sable-surface-popover sable-frame-popover`) and their corners nest concentrically.
+- Do: Use layout="list" in a popover, a menu, or a docked panel. Rows sit on the --control-sm ladder and still show each theme's swatch strip, so the choice stays visible rather than described. Rows take `sable-frame-inner`, so host the list in a sable-frame (`sable-frame sable-surface sable-surface-popover sable-frame-popover` — PopoverContent is not one; give it that class list, or its p-4 leaves the rows unnested) and their corners nest concentrically.
 - Do: Pass mode={useSableTheme().mode} so every preview renders in the colour mode actually in use, rather than in each theme's manifest default.
 - Do: Load each theme's fonts in the host app. Every card carries a type specimen in that theme's own face so people can compare typography as well as color. A theme whose fonts are not loaded falls back to system-ui, and its specimen stops telling the truth.
 - Don't: Add a viewport breakpoint to force a column count — `className="sm:grid-cols-1"` or similar. `sm:` keys off the VIEWPORT, not this component's container, so on a wide screen it does nothing for a narrow parent. The cards grid already reflows on its own width via auto-fit.
@@ -14452,7 +15952,7 @@ import { PanelGroup, Workspace, WorkspaceBar, WorkspaceCanvas } from "@sableui/r
 
 Which token to reach for, and what it is most often confused with. Generated from `src/themes/token-docs.ts`; the full data is `registry.json → tokens`.
 
-### semantic (44)
+### semantic (45)
 
 - **`background`** — The page. The furthest-back surface in the page register. *Use for:* The document body, and any surface meant to read as 'the page itself'. Never anything that floats: background is the BOTTOM of the surface stack (background < card < popover in every dark mode), so a floating panel painted with it reads as a hole beneath the cards it hovers over.
     - **Not** `popover` for anything floating, `card` for a bounded block on the page. `canvas`. `canvas` is the *work* surface in a tool — the artboard being edited — which is not the page behind the UI. Using `background` for an artboard makes the thing being edited indistinguishable from the chrome around it.
@@ -14474,8 +15974,10 @@ Which token to reach for, and what it is most often confused with. Generated fro
     - **Not** `border-strong`. Reach for `border-strong` when the line carries *structure* (a grid rule, a table divider, a section separator) and for `border` when it merely bounds a control.
 - **`border-strong`** — A structural divider. Visibly stronger than `border`. *Use for:* Grid lines, table rules, separators between major sections.
     - **Not** `border`. If removing the line would make the layout ambiguous, it is structural and belongs here.
-- **`input`** — The outline of a form control specifically. *Use for:* Text inputs, textareas, selects, and the resting edge of a checkbox or radio.
+- **`input`** — The outline of a form control specifically. *Use for:* Text inputs, textareas and selects. Not the edge of a checkbox, radio or switch — that is `control-border`.
     - **Not** `border`. They are often the same value, but a theme is entitled to make form controls read differently from other chrome, and only this token gives it the hook.
+- **`control-border`** — The resting edge of a control whose outline is the whole control. Held to 3:1 (WCAG 1.4.11) on every surface. *Use for:* An unchecked checkbox, an unselected radio, an off switch track, a selection card's check or radio mark — anywhere removing the edge would make the control disappear.
+    - **Not** `input`. A text field is also found by its fill, caret and placeholder, so its outline may stay quiet; a checkbox has nothing else, and at `input`'s strength it measures about 1.4:1.
 - **`ring`** — The focus indicator colour. *Use for:* Only for `focus-visible`. Nothing else.
     - **Not** `primary`. Focus must remain distinguishable from selection; if the ring is the same colour as a selected state, a keyboard user cannot tell where focus is.
 - **`primary`** — The one high-emphasis action colour. *Use for:* The single most important action on a surface — one per view. A submit button, the primary CTA.
@@ -14803,7 +16305,7 @@ The `@utility` and `@custom-variant` layer in `styles.css`: what each one is, wh
     - **Instead of** `bg-muted`, which is fixed: inside a popover it can sit within a step of the panel in some dark modes. And never a hand-mixed `color-mix(… var(--foreground) …)` or an outline on every well to compensate — that turns a panel into a stack of boxes. For a segmented control itself, use `ToggleGroup`; the well is for what no component draws.
     - `<div className="sable-well rounded-md p-1">…</div>`
 
-### frame (6)
+### frame (7)
 
 - **`sable-frame`** — A bordered, padded, rounded container that computes the radius its children need: `--sable-frame-inner-radius` = radius − padding − border width, floored at `radius-sm`. *Use for:* A container whose children have their own rounded backgrounds (rows, tiles, a nested preview), so the corners nest concentrically and keep doing so when the radius ladder is rescaled. Defaults: `radius-lg`, `--spacing(4)` padding (1rem at the default scale, and it follows the density control), a 1px edge from the surface (`--sable-surface-edge`, else `border`). Size it with `sable-frame-r-*` / `sable-frame-p-*`; children take `sable-frame-inner`.
     - **Instead of** `rounded-lg p-4 border` on the parent plus a guessed `rounded-sm` on each child — the guess is concentric only at the default ladder. For a one-off nested corner without a frame, `rounded-concentric-*`.
@@ -14811,6 +16313,9 @@ The `@utility` and `@custom-variant` layer in `styles.css`: what each one is, wh
 - **`sable-frame-popover`** — The popup frame recipe: `radius-md`, `--spacing(1)` padding, the `border-floating` edge and `shadow-lg`, applied over `sable-frame`. *Use for:* A hand-composed floating list or panel that must match Sable's menus (with `sable-frame sable-surface sable-surface-popover`); rows inside take `sable-frame-inner`.
     - **Instead of** Copying a Menu's class string. And use `Menu`, `Select`, `Popover` or `Combobox` first — they own focus and dismissal; this is only for floating chrome no component covers.
     - `<div className="sable-frame sable-surface sable-surface-popover sable-frame-popover">…</div>`
+- **`sable-frame-tool`** — The frame for edge-to-edge tool chrome at the theme's radius, with no padding. It publishes concentric geometry for what's inside: `--panel-inset` (row side padding, grown so rows clear the corner), `--panel-field-radius` (compact fields curve parallel to the frame) and `--panel-edge` (the first and last section's extra top and bottom). PanelSection and the xs field shell read them. Applied over `sable-frame`. *Use for:* Framing PanelSections, ScrubFields, a Tree, a StatusBar or a PanelGroup outside a Workspace (a docs demo, a floating inspector). Add `overflow-hidden` to clip to the corners.
+    - **Instead of** `rounded-lg border overflow-hidden` by hand: the panel keeps its square-column 8px inset and small field radius, so a rounded preset crowds the first label and last field into the curve.
+    - `<div className="sable-frame sable-frame-tool overflow-hidden bg-panel" data-density="compact"><PanelSection title="Layer">…</PanelSection></div>`
 - **`sable-frame-borderless`** — Sets a `sable-frame`'s border width to 0 while keeping the inner-radius math correct. *Use for:* A frame that separates by fill or space rather than an edge (a well, a tinted group) but still needs concentric children.
     - **Instead of** `border-0` on a `sable-frame`, which removes the border but leaves 1px in the inner-radius calculation.
     - `<div className="sable-frame sable-frame-borderless sable-well sable-frame-r-md sable-frame-p-1">…</div>`
@@ -14826,14 +16331,14 @@ The `@utility` and `@custom-variant` layer in `styles.css`: what each one is, wh
 
 ### geometry (4)
 
-- **`rounded-concentric-*`** — A border radius computed as an outer radius minus an inset: `rounded-concentric-<radius>/<spacing>`, clamped at zero. `rounded-concentric-md/1` = `radius-md` − `spacing-1`. *Use for:* A one-off rounded element nested inside another — a tab trigger inside a tab list, a thumb inside a track, a row inside a well — where a `sable-frame` would be overkill. The outer radius and the inset are the parent's.
+- **`rounded-concentric-*`** — A border radius computed as an outer radius minus an inset: `rounded-concentric-<radius>/<spacing>`, floored at `radius-xs` so a deep inset never leaves a 1-2px sliver. `rounded-concentric-md/1` = `radius-md` − `spacing-1`. *Use for:* A one-off rounded element nested inside another — a tab trigger inside a tab list, a thumb inside a track, a row inside a well — where a `sable-frame` would be overkill. The outer radius and the inset are the parent's.
     - **Instead of** Picking the next ladder step down by eye (`rounded-sm` inside `rounded-md p-1`). That is concentric only at the default ladder; the utility recomputes from live tokens. Registered in `cn()` as a radius, so it correctly overrides a component's own `rounded-*`.
     - `<div className="sable-well rounded-md p-1"><button className="rounded-concentric-md/1 px-2 py-1">…</button></div>`
 - **`popup-inset`** — The padding of a popup list, derived from the popup's radius: a third of `radius-md`, at least `--spacing(1)`. A rounder popup gets more room, and the floor is on the spacing scale, so the density control moves it. *Use for:* On a hand-composed rounded-md popup that holds a list of rows. Sable's Menu, Select, Combobox and ContextMenu already use it.
     - **Instead of** `p-1`. A fixed inset at a larger radius preset leaves the rows' corners approaching half their height, so every row turns into a pill.
     - `<div className="rounded-md bg-popover popup-inset shadow-md">…</div>`
 - **`rounded-popup-item`** — The row radius that nests inside a `popup-inset` popup: `radius-md` minus the popup inset, clamped at zero. *Use for:* On every row inside a `popup-inset` container.
-    - **Instead of** `rounded-sm` on menu rows, which matches only the default ladder (12px popup, 4px inset, 8px rows).
+    - **Instead of** `rounded-sm` on menu rows, which matches no ladder exactly (a 12px popup with a 4px inset and 1px border wants 7px rows).
     - `<div role="option" className="rounded-popup-item px-2 py-1.5 sable-highlighted:bg-accent">…</div>`
 - **`popup-bleed`** — A negative inline margin of exactly one `popup-inset`, so a separator inside a padded popup runs edge to edge at every radius and density. *Use for:* On a hand-composed separator (a 1px rule) inside a `popup-inset` popup. Sable's MenuSeparator, ContextMenuSeparator and SelectSeparator already use it.
     - **Instead of** `-mx-1`, which matches the inset only at the default ladder and stops short of both edges once a rounder preset or a roomier density grows it. design-lint flags it (`popup-separator-bleed`).
@@ -14866,8 +16371,20 @@ The `@utility` and `@custom-variant` layer in `styles.css`: what each one is, wh
     - **Instead of** `scrollbar-quiet` on a vertical list. A vertical region with no bar and no fade tells a reader nothing about how far through they are.
     - `<div className="flex gap-3 overflow-x-auto scrollbar-hidden">…</div>`
 
-### text (8)
-
+### text (12)
+
+- **`sable-list`** — A bulleted list as typography: body type, a hanging muted marker, and item rhythm. Put it on a native `<ul>`. *Use for:* Running content with bullets: release notes, a feature list, steps that are not ordered.
+    - **Instead of** A stack of `<div>`s with a hand-drawn dot, or an unstyled `<ul>` that inherits the reset (no markers, no indent).
+    - `<ul className="sable-list"><li>Faster sync</li><li>Offline drafts</li></ul>`
+- **`sable-list-numbered`** — A numbered list as typography: `sable-list` with decimal markers in tabular figures. Put it on a native `<ol>`. *Use for:* Ordered content in running text: setup steps, a ranked list. For a stepped flow with state, use Stepper.
+    - **Instead of** Numbers typed into the text, which neither renumber nor read as a list to assistive tech.
+    - `<ol className="sable-list-numbered"><li>Install</li><li>Import the styles</li></ol>`
+- **`sable-list-dl`** — Label/value pairs on a native `<dl>`: muted label-tier `<dt>`s and body-tier `<dd>`s on a baseline-aligned two-column grid; long values wrap inside their column. Colour a status value with a `text-*` utility on its `<dd>`. *Use for:* Read-only details: an order summary, a record's metadata, a settings summary, profile stats.
+    - **Instead of** A grid of `<div>`s (screen readers lose the term/value pairing), or Table for a single record. For editable values use Form and Field.
+    - `<dl className="sable-list-dl"><dt>Network</dt><dd>Solana</dd><dt>Status</dt><dd className="text-success">Active</dd></dl>`
+- **`sable-list-dl-2`** — Two label/value pairs a row once the nearest `@container` ancestor is at least 28rem wide. Add to `sable-list-dl`. *Use for:* A compact metadata block in a wide card or panel. Put `@container` on a parent so it measures the room it actually has.
+    - **Instead of** A viewport breakpoint, which gives a narrow card on a wide screen four columns it cannot fit.
+    - `<div className="@container"><dl className="sable-list-dl sable-list-dl-2">…</dl></div>`
 - **`text-overline`** — The eyebrow / overline / kicker tier: small, letter-spaced, uppercase by default (a theme may set sentence case via `--type-overline-transform`). *Use for:* A section eyebrow above a heading, a stat's label, a badge-style category line. Sits ABOVE and categorises.
     - **Instead of** `text-label-xs uppercase tracking-wider` assembled by hand, or `text-caption`, which sits BELOW and explains. In tool chrome, panel headers use `text-ui-section` instead.
     - `<p className="text-overline text-muted-foreground">Latest news</p>`