@sableui/react 0.1.0 → 0.2.0

package/dist/patterns/index.js

@@ -1,103 +1,199 @@
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, Form, Field, Input, Button, Separator, Badge, TextReveal, StatusDot, CardAction, MessageScroller, Marker, Message, Bubble, Avatar, CodeBlock, BubbleReactions, BubbleReaction, Attachment, StreamingText, CardFooter, ChatComposer, SettingsMenu, SettingsRow, MenuRadioGroup, MenuRadioItem, AppShell, PageHeader, DataTable, RelativeTime, CardList, Entity, Sidebar, SidebarHeader, SidebarNav, SidebarItem, BottomNav, BottomNavItem, AppHeader, Reveal, SearchInput, Description, DescriptionItem, Fieldset, FieldsetLegend, FieldsetDescription, FieldsetContent, Textarea, Select, SelectTrigger, SelectContent, SelectItem, FieldsetFooter, Switch } from '../chunk-J23ELQQZ.js';
-import { Region, Stack, Row, Page, Grid, AspectBox, Columns, Col } from '../chunk-3IWZYBGH.js';
+import { Form, Field, Input, Button, Separator, Card, CardContent, Badge, Entity, Avatar, TextReveal, StatusDot, Reveal, CardHeader, CardTitle, CardDescription, CardAction, MessageScroller, Marker, Message, Bubble, CodeBlock, Toolbar, SimpleTooltip, ToolbarButton, Attachment, StreamingText, CardFooter, ChatComposer, SettingsMenu, SettingsRow, MenuRadioGroup, MenuRadioItem, AppShell, PageHeader, DataTable, Meter, CardList, RelativeTime, Sidebar, SidebarHeader, SidebarNav, SidebarItem, NotificationBadge, SidebarFooter, DotsMenu, MenuItem, MenuSeparator, BottomNav, BottomNavItem, AppHeader, Textarea, Tabs, TabsList, TabsTrigger, TabsPanel, Skeleton, Browser, MeterLabel, MeterValue, MeterTrack, Code, SearchInput, EmptyState, Select, SelectTrigger, SelectContent, SelectItem, DestructiveActionModal, SideNav, SideNavItem, Switch } from '../chunk-AOWBYEQ6.js';
+import { Region, Stack, Row, Grid, Page, Columns, Col, AspectBox } from '../chunk-3IWZYBGH.js';
 import '../chunk-SRQWQUTW.js';
 import { Icon } from '../chunk-PAOZBZME.js';
 import '../chunk-5Z5KLOAU.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+var 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(", ");
 function AuthPage() {
-  return /* @__PURE__ */ jsx("main", { className: "grid min-h-dvh place-items-center bg-background", children: /* @__PURE__ */ jsx(Region, { max: "form", safeArea: ["top", "bottom"], children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsxs(CardHeader, { children: [
-        /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h1", { children: "Sign in" }) }),
-        /* @__PURE__ */ jsx(CardDescription, { children: "Welcome back \u2014 pick up where you left off." })
+  const [pending2, setPending] = useState(false);
+  const [errors, setErrors] = useState({});
+  return /* @__PURE__ */ jsxs("main", { className: "grid min-h-dvh bg-background lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]", children: [
+    /* @__PURE__ */ jsx(Region, { max: "form", safeArea: ["top", "bottom"], className: "flex flex-col", children: /* @__PURE__ */ jsxs(Stack, { gap: 0, className: "flex-1 py-8 sm:py-10", children: [
+      /* @__PURE__ */ jsxs("a", { href: "/", className: "flex items-center gap-2.5 self-start rounded-sm motion-interactive motion-press", children: [
+        /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-2xl" }),
+        /* @__PURE__ */ jsx("span", { className: "text-title-lg", children: "Atelier" })
       ] }),
-      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Form, { onSubmit: (event) => event.preventDefault(), children: [
-        /* @__PURE__ */ jsx(Field, { label: "Email", required: true, children: /* @__PURE__ */ jsx(Input, { type: "email", name: "email", autoComplete: "email", placeholder: "you@example.com" }) }),
-        /* @__PURE__ */ jsx(Field, { label: "Password", required: true, children: /* @__PURE__ */ jsx(Input, { type: "password", name: "password", autoComplete: "current-password" }) }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", children: "Sign in" }),
+      /* @__PURE__ */ jsxs(Stack, { gap: 4, justify: "center", className: "flex-1 py-12", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-heading-1", children: "Welcome back" }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: "Sign in to collect new releases and manage your editions." })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Form,
+          {
+            className: "gap-5",
+            errors,
+            onFormSubmit: () => {
+              setPending(true);
+              setTimeout(() => {
+                setPending(false);
+                setErrors({ password: "That email and password don\u2019t match. Try again or reset your password." });
+              }, 900);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Field, { label: "Email", name: "email", validate: (value) => value ? null : "Enter your email address.", children: /* @__PURE__ */ jsx(Input, { type: "email", autoComplete: "email webauthn", placeholder: "you@example.com" }) }),
+              /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+                /* @__PURE__ */ jsx(Field, { label: "Password", name: "password", validate: (value) => value ? null : "Enter your password.", children: /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "current-password" }) }),
+                /* @__PURE__ */ jsx("a", { href: "/forgot-password", className: "hit-target self-end text-body-sm text-muted-foreground link-underline motion-interactive", children: "Forgot password?" })
+              ] }),
+              /* @__PURE__ */ jsx(Button, { type: "submit", size: "cta", loading: pending2, loadingLabel: "Signing in", className: "w-full", children: "Sign in" })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(Separator, { label: "or" }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", className: "w-full", children: "Continue with wallet" })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs("p", { className: "text-center text-body-sm text-muted-foreground", children: [
-      "No account?",
-      " ",
-      /* @__PURE__ */ jsx("a", { href: "/signup", className: "link-underline motion-interactive text-foreground", children: "Create one" })
-    ] })
-  ] }) }) });
+        /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", children: "Sign in with a passkey" }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", children: "Connect a wallet" })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-body-md text-muted-foreground", children: [
+          "No account?",
+          " ",
+          /* @__PURE__ */ jsx("a", { href: "/signup", className: "hit-target link-underline motion-interactive text-foreground", children: "Create one" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-body-xs text-muted-foreground", children: [
+        "By signing in you agree to the",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: "/terms", className: "link-underline motion-interactive", children: "Terms" }),
+        " ",
+        "and",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: "/privacy", className: "link-underline motion-interactive", children: "Privacy Policy" }),
+        "."
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("aside", { "aria-label": "Featured release", className: "hidden p-3 lg:flex", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col justify-end rounded-xl p-8", style: { background: artwork }, children: /* @__PURE__ */ jsx(Card, { className: "max-w-md", children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      /* @__PURE__ */ jsx(Badge, { tone: "edition", className: "self-start", children: "Edition of 50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-title-lg", children: "\u201CEvery edition is a conversation with whoever holds it next.\u201D" }),
+      /* @__PURE__ */ jsx(
+        Entity,
+        {
+          className: "p-0",
+          leading: /* @__PURE__ */ jsx(Avatar, { fallback: "MO" }),
+          title: "Mara Okafor",
+          subtitle: "Untitled (gold rush), 2026"
+        }
+      )
+    ] }) }) }) }) })
+  ] });
 }
 
 // src/patterns/auth-page.meta.ts
 var authPageMeta = {
   name: "AuthPage",
-  summary: "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.",
+  summary: "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) \u2014 the narrowest named cap; auth never needs more.",
-    "The card is the only surface on the page: no app chrome, no sidebar \u2014 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 \u2014 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 \u2014 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 \u2014 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-*) \u2026)` 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."
   ],
   a11y: [
-    "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."
   ]
 };
-var navItems = ["Platform", "Signals", "Security", "Company"];
-var 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" }
+var navItems = [
+  { label: "Platform", href: "#platform" },
+  { label: "How it works", href: "#how-it-works" },
+  { label: "Customers", href: "#customers" },
+  { label: "Pricing", href: "/pricing" }
 ];
-var workflow = [
+var spaces = [
+  { name: "Waypoint", value: "98.4%", label: "clear routes" },
+  { name: "Fielddesk", value: "12", label: "open holds" },
+  { name: "Archive", value: "4.8k", label: "sealed records" }
+];
+var routes = [
   { label: "Intake", state: "Open", tone: "info" },
   { label: "Review", state: "Live", tone: "edition" },
   { label: "Archive", state: "Safe", tone: "success" }
 ];
 var 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 }
 ];
-var features = [
+var sceneMetrics = [
+  { label: "Cleared", value: "1.8M", detail: "last 30 days" },
+  { label: "Review", value: "42s", detail: "median path" },
+  { label: "Spaces", value: "284", detail: "active teams" }
+];
+var values = [
   {
     icon: "lock",
     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",
-    title: "Brand and product together",
-    body: "Editorial sections and dense console views share the same semantic tokens, radius, and motion contract."
+    icon: "bell",
+    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",
-    title: "Calm confidence",
-    body: "Large type, tactile controls, and focused status tones make complex work feel understandable on first pass."
+    icon: "clock",
+    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."
   }
 ];
-var reviews = [
-  { name: "Waypoint", value: "98.4%", label: "clear routes" },
-  { name: "Fielddesk", value: "12", label: "open holds" },
-  { name: "Archive", value: "4.8k", label: "sealed records" }
+var 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."
+  }
+];
+var outcomes = [
+  { value: "3.2\xD7", label: "faster approvals in the first quarter" },
+  { value: "68%", label: "fewer follow-ups on handoffs" },
+  { value: "1 day", label: "to prepare a quarterly audit" }
 ];
 var 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" }
     ]
   },
   {
@@ -105,7 +201,7 @@ var footerGroups = [
     links: [
       { label: "About", href: "/about" },
       { label: "Security", href: "/security" },
-      { label: "Customers", href: "/customers" },
+      { label: "Customers", href: "#customers" },
       { label: "Careers", href: "/careers" }
     ]
   },
@@ -119,10 +215,10 @@ var footerGroups = [
     ]
   }
 ];
-var footerSignals = [
-  { label: "Uptime", value: "99.98%" },
-  { label: "Regions", value: "12" },
-  { label: "Response", value: "42s" }
+var legalLinks = [
+  { label: "Privacy", href: "/privacy" },
+  { label: "Terms", href: "/terms" },
+  { label: "Contact", href: "/contact" }
 ];
 function BrandLandingPage() {
   return /* @__PURE__ */ jsxs("div", { className: "min-h-dvh overflow-hidden bg-background text-foreground", children: [
@@ -136,7 +232,7 @@ function BrandLandingPage() {
             /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-sm" }) }),
             /* @__PURE__ */ jsx("span", { className: "text-title-lg", children: "Cove" })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(Row, { gap: 1, children: navItems.map((item) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: `#${item.toLowerCase()}` }), children: item }, item)) }) }),
+          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(Row, { gap: 1, children: navItems.map((item) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: item.href }), children: item.label }, item.label)) }) }),
           /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
             /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "max-sm:hidden", render: /* @__PURE__ */ jsx("a", { href: "/login" }), children: "Sign in" }),
             /* @__PURE__ */ jsx(Button, { size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/demo" }), children: "Request access" })
@@ -145,118 +241,155 @@ function BrandLandingPage() {
       }
     ) }) }),
     /* @__PURE__ */ jsxs("main", { children: [
-      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "pb-16 pt-14 sm:pt-20 lg:pb-24", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-10 lg:grid-cols-[0.92fr_1.08fr]", children: [
-        /* @__PURE__ */ jsxs(Stack, { gap: 4, className: "max-w-3xl", children: [
+      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "pb-20 pt-14 sm:pt-20 lg:pb-28", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-10", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-2xl", children: [
           /* @__PURE__ */ jsx(Badge, { appearance: "outline", icon: /* @__PURE__ */ jsx(Icon, { name: "lock", className: "text-sm" }), children: "Private operations, made legible" }),
           /* @__PURE__ */ jsx(
             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: true
             }
           ),
           /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "Cove gives teams a polished front door and a serious operating surface: approvals, signals, records, and handoffs in one understandable flow." }),
-          /* @__PURE__ */ jsxs(Row, { gap: 2, wrap: true, children: [
+          /* @__PURE__ */ jsxs(Row, { gap: 2, wrap: true, className: "pt-3", children: [
             /* @__PURE__ */ jsx(Button, { size: "cta", render: /* @__PURE__ */ jsx("a", { href: "/demo" }), children: "Book a walkthrough" }),
-            /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", render: /* @__PURE__ */ jsx("a", { href: "#platform" }), children: "Explore platform" })
+            /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", render: /* @__PURE__ */ jsx("a", { href: "#platform" }), children: "Explore the platform" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl border border-border-floating bg-overlay p-3 text-overlay-foreground shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/3 border border-overlay-foreground/10 bg-overlay-foreground/8", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-overlay-foreground/10 px-4 py-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "dark", "aria-hidden": true, inert: true, children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl border border-border-floating bg-popover p-3 text-popover-foreground shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/3 border border-border bg-card", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
             /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
               /* @__PURE__ */ jsx(StatusDot, { tone: "warning" }),
               /* @__PURE__ */ jsx(StatusDot, { tone: "edition" }),
               /* @__PURE__ */ jsx(StatusDot, { tone: "success" })
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-label-sm text-overlay-foreground/70", children: "Live workspace" })
+            /* @__PURE__ */ jsx("span", { className: "text-label-sm text-muted-foreground", children: "Live workspace" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "grid gap-3 p-3 md:grid-cols-[0.7fr_1.3fr]", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-label-sm text-overlay-foreground/60", children: "Spaces" }),
-                /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: reviews.map((review) => /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/10 bg-overlay p-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3 max-md:hidden", children: [
+              /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-border bg-background p-4", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-label-sm text-muted-foreground", children: "Spaces" }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: spaces.map((space) => /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/10 bg-card p-3", children: [
                   /* @__PURE__ */ jsxs(Row, { justify: "between", children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: review.name }),
-                    /* @__PURE__ */ jsx("span", { className: "text-mono-sm text-overlay-foreground", children: review.value })
+                    /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: space.name }),
+                    /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: space.value })
                   ] }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-xs text-overlay-foreground/60", children: review.label })
-                ] }, review.name)) })
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-xs text-muted-foreground", children: space.label })
+                ] }, space.name)) })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-border bg-background p-4", children: [
                 /* @__PURE__ */ jsxs(Row, { justify: "between", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Route status" }),
-                  /* @__PURE__ */ jsx(Badge, { tone: "success", size: "sm", children: "Healthy" })
+                  /* @__PURE__ */ jsx(Badge, { tone: "success", size: "sm", dot: true, children: "Healthy" })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: workflow.map((item) => /* @__PURE__ */ jsxs(Row, { justify: "between", className: "rounded-full bg-overlay px-3 py-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: routes.map((route) => /* @__PURE__ */ jsxs(Row, { justify: "between", className: "rounded-full bg-card px-3 py-2", children: [
                   /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
-                    /* @__PURE__ */ jsx(StatusDot, { tone: item.tone }),
-                    /* @__PURE__ */ jsx("span", { className: "text-body-sm", children: item.label })
+                    /* @__PURE__ */ jsx(StatusDot, { tone: route.tone }),
+                    /* @__PURE__ */ jsx("span", { className: "text-body-sm", children: route.label })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: "text-label-sm text-overlay-foreground/60", children: item.state })
-                ] }, item.label)) })
+                  /* @__PURE__ */ jsx("span", { className: "text-label-sm text-muted-foreground", children: route.state })
+                ] }, route.label)) })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4", children: [
-              /* @__PURE__ */ jsxs(Row, { justify: "between", className: "border-b border-overlay-foreground/10 pb-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-border bg-background p-4", children: [
+              /* @__PURE__ */ jsxs(Row, { justify: "between", className: "border-b border-border pb-4", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-label-sm text-overlay-foreground/60", children: "Signal map" }),
-                  /* @__PURE__ */ jsx("h2", { className: "mt-1 text-heading-3", children: "Every approval path in view" })
+                  /* @__PURE__ */ jsx("p", { className: "text-label-sm text-muted-foreground", children: "Signal map" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-heading-4 sm:text-heading-3", children: "Every approval path in view" })
                 ] }),
                 /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Review" })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "mt-6 grid min-h-72 grid-rows-[1fr_auto] gap-5", children: [
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 items-end gap-2 rounded-concentric-xl/10 bg-overlay p-4", children: bars.map((bar, index) => /* @__PURE__ */ jsx("div", { className: "flex h-56 items-end", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs("div", { className: "mt-5 grid gap-4 sm:mt-6 sm:gap-5", children: [
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 items-end gap-1.5 rounded-concentric-xl/10 bg-card p-4 sm:gap-2", children: bars.map((bar) => /* @__PURE__ */ jsx("div", { className: "flex h-36 items-end sm:h-56", children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: `w-full rounded-full ${bar.tone}`,
+                    className: `w-full rounded-full ${bar.current ? "bg-success" : "bg-secondary"}`,
                     style: { height: bar.height }
                   }
-                ) }, `${bar.tone}-${index}`)) }),
-                /* @__PURE__ */ jsx("div", { className: "grid gap-2 sm:grid-cols-3", children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/10 border border-overlay-foreground/10 bg-overlay p-3", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-label-sm text-overlay-foreground/60", children: metric.label }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-2 text-heading-3", children: metric.value }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-xs text-overlay-foreground/60", children: metric.detail })
+                ) }, bar.week)) }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: sceneMetrics.map((metric) => /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/10 border border-border bg-card p-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-label-sm text-muted-foreground", children: metric.label }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-2 text-heading-4 sm:text-heading-3", children: metric.value }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-xs text-muted-foreground max-sm:hidden", children: metric.detail })
                 ] }, metric.label)) })
               ] })
             ] })
           ] })
         ] }) }) })
       ] }) }),
-      /* @__PURE__ */ jsx("section", { id: "platform", className: "border-y border-border bg-muted/40 py-14", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-[0.8fr_1.2fr]", children: [
-        /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-          /* @__PURE__ */ jsx(Badge, { children: "Design mood" }),
-          /* @__PURE__ */ jsx("h2", { className: "text-heading-1", children: "Marketing warmth, product discipline." }),
-          /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-md text-muted-foreground", children: "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." })
+      /* @__PURE__ */ jsx("section", { id: "platform", "aria-labelledby": "brand-platform-title", className: "border-y border-border bg-muted/40 py-20 lg:py-28", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, className: "max-w-2xl", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Why Cove" }),
+          /* @__PURE__ */ jsx("h2", { id: "brand-platform-title", className: "text-balance text-heading-1", children: "One private workspace for the decisions that matter." }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "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." })
+        ] }),
+        /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx(Grid, { minItemWidth: "calc(var(--spacing) * 64)", gap: 2, children: values.map((value) => /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("article", {}), className: "h-full", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "mb-4 grid size-11 place-items-center rounded-md border border-border sable-well", children: /* @__PURE__ */ jsx(Icon, { name: value.icon, className: "text-xl" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "text-title-lg", children: value.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: value.body })
+        ] }) }, value.title)) }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", id: "how-it-works", "aria-labelledby": "brand-steps-title", max: "wide", className: "py-20 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-[1fr_2fr] lg:gap-16", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, className: "max-w-md", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "How it works" }),
+          /* @__PURE__ */ jsx("h2", { id: "brand-steps-title", className: "text-balance text-heading-1", children: "From request to sealed record." }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-md text-muted-foreground", children: "Teams are usually live within a week. Cove adapts to the routes you already run instead of asking you to start over." }),
+          /* @__PURE__ */ jsx("div", { className: "pt-3", children: /* @__PURE__ */ jsx(Button, { variant: "outline", iconEnd: /* @__PURE__ */ jsx(Icon, { name: "arrow-right" }), render: /* @__PURE__ */ jsx("a", { href: "/guides/rollout" }), children: "Read the rollout guide" }) })
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "grid gap-10 sm:grid-cols-3 sm:gap-6", children: steps.map((step) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-2 border-t border-border-strong pt-6", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-mono-sm text-muted-foreground", children: step.number }),
+          /* @__PURE__ */ jsx("h3", { className: "mt-3 text-title-lg sm:mt-6", children: step.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: step.body })
+        ] }, step.number)) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", id: "customers", "aria-label": "Customer story", max: "wide", className: "pb-20 lg:pb-28", children: /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("figure", {}), children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1.5fr_1fr]", children: [
+        /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col justify-between gap-10 sm:p-10", children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Customer story" }),
+            /* @__PURE__ */ jsx("blockquote", { className: "text-balance text-heading-3 sm:text-heading-2", children: "\u201CWe 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.\u201D" })
+          ] }),
+          /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(Avatar, { size: "lg", fallback: "MO" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-title-sm", children: "Maya Okafor" }),
+              /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "Head of operations, Fielddesk" })
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-3 md:grid-cols-3", children: features.map((feature) => /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("article", {}), className: "h-full", children: /* @__PURE__ */ jsxs(CardContent, { children: [
-          /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-md bg-highlight text-highlight-foreground", children: /* @__PURE__ */ jsx(Icon, { name: feature.icon, className: "text-xl" }) }),
-          /* @__PURE__ */ jsx("h3", { className: "mt-5 text-title-lg", children: feature.title }),
-          /* @__PURE__ */ jsx("p", { className: "mt-2 text-body-sm text-muted-foreground", children: feature.body })
-        ] }) }, feature.title)) })
+        /* @__PURE__ */ jsx("div", { className: "border-border max-lg:border-t lg:border-s", children: /* @__PURE__ */ jsx(CardContent, { className: "flex h-full flex-col justify-center gap-6 sm:p-10", children: outcomes.map((outcome, index) => /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-heading-1 sm:text-display-lg", children: outcome.value }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-sm text-muted-foreground", children: outcome.label })
+          ] })
+        ] }, outcome.label)) }) })
       ] }) }) }),
-      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "py-14", children: /* @__PURE__ */ jsx("div", { className: "grid gap-3 md:grid-cols-3", children: metrics.map((metric) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsx("p", { className: "text-label-md text-muted-foreground", children: metric.label }),
-        /* @__PURE__ */ jsx("p", { className: "mt-3 text-display-lg", children: metric.value }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-sm text-muted-foreground", children: metric.detail })
-      ] }) }, metric.label)) }) })
+      /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": "brand-cta-title", max: "wide", className: "pb-20 lg:pb-28", children: /* @__PURE__ */ jsx("div", { className: "dark", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border bg-card px-6 py-12 text-card-foreground sm:px-12 sm:py-16", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-2xl", children: [
+          /* @__PURE__ */ jsx("h2", { id: "brand-cta-title", className: "text-balance text-heading-1", children: "See your own approval paths in Cove." }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: "A 30-minute walkthrough with your routes, your roles, and your records. No slides." })
+        ] }),
+        /* @__PURE__ */ jsxs(Row, { gap: 2, wrap: true, children: [
+          /* @__PURE__ */ jsx(Button, { size: "cta", render: /* @__PURE__ */ jsx("a", { href: "/demo" }), children: "Book a walkthrough" }),
+          /* @__PURE__ */ jsx(Button, { size: "cta", variant: "ghost", render: /* @__PURE__ */ jsx("a", { href: "/pricing" }), children: "View pricing" })
+        ] })
+      ] }) }) }) })
     ] }),
-    /* @__PURE__ */ jsx("footer", { className: "border-t border-border bg-muted/35", children: /* @__PURE__ */ jsxs(Region, { max: "wide", className: "py-10 sm:py-12", children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[1fr_1.35fr_1fr]", children: [
-        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-md", children: [
+    /* @__PURE__ */ jsx("footer", { className: "border-t border-border bg-muted/35", children: /* @__PURE__ */ jsxs(Region, { max: "wide", className: "py-12 sm:py-16", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[1fr_1.35fr_1fr] lg:gap-8", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, className: "max-w-sm", children: [
           /* @__PURE__ */ jsxs("a", { href: "/", className: "flex w-fit items-center gap-2 rounded-full motion-interactive motion-press", children: [
             /* @__PURE__ */ jsx("span", { className: "grid size-9 place-items-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-sm" }) }),
             /* @__PURE__ */ jsx("span", { className: "text-title-lg", children: "Cove" })
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "A calm operating surface for teams that need trust, speed, and context without the noise." }),
-          /* @__PURE__ */ jsxs(Row, { gap: 1, wrap: true, children: [
-            /* @__PURE__ */ jsx(Badge, { size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: "lock" }), children: "Private" }),
-            /* @__PURE__ */ jsx(Badge, { tone: "success", size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: "circle-check" }), children: "Live" })
-          ] })
+          /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: "success", dot: true, children: "All systems normal" })
         ] }),
-        /* @__PURE__ */ jsx("nav", { "aria-label": "Footer", className: "grid gap-6 sm:grid-cols-3", children: footerGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-label-md text-muted-foreground", children: group.title }),
+        /* @__PURE__ */ jsx("nav", { "aria-label": "Footer", className: "grid grid-cols-3 gap-6", children: footerGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-label-md", children: group.title }),
           /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             "a",
             {
@@ -266,62 +399,38 @@ function BrandLandingPage() {
             }
           ) }, link.label)) })
         ] }, group.title)) }),
-        /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
           /* @__PURE__ */ jsxs(CardHeader, { children: [
-            /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Signal digest" }) }),
-            /* @__PURE__ */ jsx(CardDescription, { children: "One weekly note on trusted workflows and product releases." }),
-            /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx("span", { className: "grid size-9 place-items-center rounded-full bg-highlight text-highlight-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-sm" }) }) })
+            /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "The Cove digest" }) }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "One note a month on trusted workflows and product releases." })
           ] }),
-          /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsxs("form", { action: "/newsletter", className: "grid gap-2 sm:grid-cols-[1fr_auto]", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "brand-footer-email", className: "sr-only", children: "Work email" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  id: "brand-footer-email",
-                  name: "email",
-                  type: "email",
-                  autoComplete: "email",
-                  placeholder: "you@company.com"
-                }
-              ),
-              /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full sm:w-auto", children: "Join" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: footerSignals.map((signal) => /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-muted p-3", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-mono-sm", children: signal.value }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-muted-foreground", children: signal.label })
-            ] }, signal.label)) })
-          ] })
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { action: "/newsletter", className: "grid gap-2 sm:grid-cols-[1fr_auto]", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "brand-footer-email", className: "sr-only", children: "Work email" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "brand-footer-email",
+                name: "email",
+                type: "email",
+                autoComplete: "email",
+                placeholder: "you@company.com"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full sm:w-auto", children: "Subscribe" })
+          ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("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", children: [
+      /* @__PURE__ */ jsxs("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", children: [
         /* @__PURE__ */ jsx("p", { children: "\xA9 2026 Cove. All rights reserved." }),
-        /* @__PURE__ */ jsxs(Row, { gap: 3, wrap: true, children: [
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: "/privacy",
-              className: "flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground",
-              children: "Privacy"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: "/terms",
-              className: "flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground",
-              children: "Terms"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: "/contact",
-              className: "flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground",
-              children: "Contact"
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx(Row, { gap: 4, wrap: true, children: legalLinks.map((link) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: link.href,
+            className: "flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground",
+            children: link.label
+          },
+          link.label
+        )) })
       ] })
     ] }) })
   ] });
@@ -330,26 +439,30 @@ function BrandLandingPage() {
 // src/patterns/brand-landing-page.meta.ts
 var brandLandingPageMeta = {
   name: "BrandLandingPage",
-  summary: "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.",
+  summary: "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 \u2192 product \u2192 value \u2192 process \u2192 proof \u2192 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 \u2014 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."
   ],
   a11y: [
     "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."
   ]
 };
 var pending = true;
-var streamed = "Anchor on the oldest rendered message and add back however far it moved. Appends";
+var streamed = "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";
 var turns = [
   {
     id: "t_01",
@@ -359,6 +472,7 @@ var 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."
   },
   {
@@ -368,6 +482,14 @@ var turns = [
   }
 ];
 function ChatPanel() {
+  const assistant = /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      size: "sm",
+      alt: "Assistant",
+      fallback: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-base" })
+    }
+  );
   return /* @__PURE__ */ jsx(Page, { as: "main", max: "feed", gap: 0, className: "py-6", children: /* @__PURE__ */ jsxs(
     Card,
     {
@@ -377,45 +499,78 @@ function ChatPanel() {
         /* @__PURE__ */ jsxs(CardHeader, { className: "border-b border-border pb-(--card-p)", children: [
           /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h1", { id: "chat-title", children: "Scroll behaviour" }) }),
           /* @__PURE__ */ jsx(CardDescription, { children: "Assistant \xB7 answers from your team's docs" }),
-          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Start a new chat", children: /* @__PURE__ */ jsx(Icon, { name: "plus" }) }) })
+          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "edit" }),
+            "New chat"
+          ] }) })
         ] }),
         /* @__PURE__ */ jsxs(MessageScroller, { className: "min-h-0 flex-1 p-(--card-p)", children: [
           /* @__PURE__ */ jsx(Marker, { variant: "separator", children: "Today" }),
-          turns.map((turn, i) => /* @__PURE__ */ jsx(
+          turns.map((turn, i) => {
+            const continues = i > 0 && turns[i - 1].mine === turn.mine;
+            return /* @__PURE__ */ jsx(
+              Message,
+              {
+                messageId: turn.id,
+                align: turn.mine ? "end" : "start",
+                grouped: continues,
+                avatar: turn.mine ? void 0 : assistant,
+                header: turn.step ? /* @__PURE__ */ jsx(Marker, { variant: "note", icon: "book", className: "justify-start", children: turn.step }) : void 0,
+                children: /* @__PURE__ */ jsx(
+                  Bubble,
+                  {
+                    variant: turn.mine ? "primary" : "muted",
+                    align: turn.mine ? "end" : "start",
+                    tail: !continues,
+                    children: turn.body
+                  }
+                )
+              },
+              turn.id
+            );
+          }),
+          /* @__PURE__ */ jsx(
             Message,
             {
-              messageId: turn.id,
-              align: turn.mine ? "end" : "start",
-              grouped: i > 0 && turns[i - 1].mine === turn.mine,
-              avatar: turn.mine ? void 0 : /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AI" }),
-              children: /* @__PURE__ */ jsx(
-                Bubble,
-                {
-                  variant: turn.mine ? "primary" : "muted",
-                  align: turn.mine ? "end" : "start",
-                  tail: i === 0 || turns[i - 1].mine !== turn.mine,
-                  children: turn.body
-                }
-              )
-            },
-            turn.id
-          )),
-          /* @__PURE__ */ jsx(Marker, { variant: "note", icon: "sparkles", children: "Read message-scroller.md" }),
-          /* @__PURE__ */ jsxs(Message, { messageId: "t_04", avatar: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AI" }), children: [
-            /* @__PURE__ */ jsxs(Bubble, { variant: "plain", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-body-md text-foreground", children: "Here is the shape of it:" }),
-              /* @__PURE__ */ jsx(
-                CodeBlock,
-                {
-                  code: "const shift = anchor.offsetTop - lastTop\nif (shift !== 0) viewport.scrollTop += shift",
-                  filename: "preserve.ts"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(BubbleReactions, { children: /* @__PURE__ */ jsx(BubbleReaction, { emoji: "\u{1F3AF}", count: 2, active: true }) })
+              messageId: "t_04",
+              grouped: true,
+              avatar: assistant,
+              footer: /* @__PURE__ */ jsxs(Toolbar, { "aria-label": "Answer actions", children: [
+                /* @__PURE__ */ jsx(SimpleTooltip, { content: "Copy answer", children: /* @__PURE__ */ jsx(ToolbarButton, { size: "icon-sm", "aria-label": "Copy answer", children: /* @__PURE__ */ jsx(Icon, { name: "copy" }) }) }),
+                /* @__PURE__ */ jsx(SimpleTooltip, { content: "Regenerate", children: /* @__PURE__ */ jsx(ToolbarButton, { size: "icon-sm", "aria-label": "Regenerate answer", children: /* @__PURE__ */ jsx(Icon, { name: "refresh" }) }) })
+              ] }),
+              children: /* @__PURE__ */ jsxs(Bubble, { variant: "plain", className: "max-w-full", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-body-md text-foreground", children: "Here is the shape of it:" }),
+                /* @__PURE__ */ jsx(
+                  CodeBlock,
+                  {
+                    code: "const shift = anchor.offsetTop - lastTop\nif (shift !== 0) viewport.scrollTop += shift",
+                    filename: "preserve.ts"
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Message, { messageId: "t_05", align: "end", children: [
+            /* @__PURE__ */ jsx(Bubble, { variant: "primary", align: "end", children: "Here's ours. Does the same fix cover new messages arriving?" }),
+            /* @__PURE__ */ jsx(
+              Attachment,
+              {
+                name: "scroller.tsx",
+                meta: "4.2 KB \xB7 TSX",
+                onOpen: () => void 0
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(Message, { messageId: "t_05", align: "end", children: /* @__PURE__ */ jsx(Attachment, { name: "scroller.tsx", meta: "4.2 KB \xB7 TSX" }) }),
-          /* @__PURE__ */ jsx(Message, { messageId: "t_06", avatar: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AI" }), children: /* @__PURE__ */ jsx(Bubble, { variant: "plain", children: /* @__PURE__ */ jsx(StreamingText, { text: streamed, streaming: pending }) }) })
+          /* @__PURE__ */ jsx(
+            Message,
+            {
+              messageId: "t_06",
+              avatar: assistant,
+              header: /* @__PURE__ */ jsx(Marker, { variant: "note", icon: "file", className: "justify-start", children: "Read scroller.tsx" }),
+              children: /* @__PURE__ */ jsx(Bubble, { variant: "plain", children: /* @__PURE__ */ jsx(StreamingText, { text: streamed, streaming: pending }) })
+            }
+          )
         ] }),
         /* @__PURE__ */ jsx(CardFooter, { className: "border-t border-border pt-(--card-p)", children: /* @__PURE__ */ jsx(
           ChatComposer,
@@ -424,6 +579,7 @@ function ChatPanel() {
             placeholder: "Ask a follow-up\u2026",
             busy: pending,
             onStop: () => void 0,
+            stopLabel: "Stop answering",
             onAttach: () => void 0,
             footer: "Enter to send \xB7 Shift+Enter for a new line",
             actions: /* @__PURE__ */ jsxs(
@@ -473,7 +629,11 @@ var chatPanelMeta = {
     "Region cap is `feed` (640px) \u2014 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 \u2014 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 \u2014 a doc it read, a tool it ran \u2014 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 \u2014 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"` \u2014 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 \u2014 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.',
@@ -482,40 +642,77 @@ var chatPanelMeta = {
   a11y: [
     "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 \u2014 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 \u2014 the answer actions also carry a tooltip, and the stop control is named for what it stops (`stopLabel="Stop answering"`).'
   ]
 };
-var STATUS_TONE = { ready: "standard", building: "warning", queued: "neutral", failed: "destructive" };
-var statusTone = (status) => STATUS_TONE[status];
+var STATUS_TONE = { live: "success", scheduled: "info", "sold-out": "edition", closed: "neutral" };
+var STATUS_LABEL = { live: "Live", scheduled: "Scheduled", "sold-out": "Sold out", closed: "Closed" };
 var MIN = 60 * 1e3;
 var HOUR = 60 * MIN;
+var DAY = 24 * HOUR;
+var usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+var usdCents = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+var shortDate = (offset) => new Date(Date.now() + offset).toLocaleDateString("en-US", { month: "short", day: "numeric" });
 var 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: "\u22121.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: "\u22121.8%", up: false, note: "6 open editions" }
 ];
-var deployments = [
-  { id: "dp_01", project: "storefront", commit: "a41f2c9", status: "ready", duration: "42s", updated: 2 * MIN },
-  { id: "dp_02", project: "api", commit: "7c03bd1", status: "building", duration: "1m 08s", updated: 9 * MIN },
-  { id: "dp_03", project: "docs", commit: "e992a70", status: "queued", duration: "\u2014", updated: 12 * MIN },
-  { id: "dp_04", project: "worker", commit: "51b8e04", status: "failed", duration: "18s", updated: 1 * HOUR },
-  { id: "dp_05", project: "storefront", commit: "90cc41a", status: "ready", duration: "39s", updated: 3 * HOUR },
-  { id: "dp_06", project: "renderer", commit: "b7714dd", status: "ready", duration: "2m 31s", updated: 5 * HOUR },
-  { id: "dp_07", project: "api", commit: "f30a9e2", status: "ready", duration: "1m 02s", updated: 8 * HOUR }
+var editions = [
+  { id: "ed_01", title: "Gold Rush", status: "live", sold: 184, supply: 250, price: 48, released: -6 * DAY },
+  { id: "ed_02", title: "Quiet Harbor", status: "sold-out", sold: 100, supply: 100, price: 120, released: -19 * DAY },
+  { id: "ed_03", title: "Dusk, no. 4", status: "live", sold: 61, supply: 150, price: 64, released: -2 * DAY },
+  { id: "ed_04", title: "Tidewater", status: "live", sold: 212, supply: 300, price: 36, released: -27 * DAY },
+  { id: "ed_05", title: "Salt Study", status: "closed", sold: 38, supply: 75, price: 90, released: -44 * DAY },
+  { id: "ed_06", title: "Paper Moon", status: "sold-out", sold: 50, supply: 50, price: 220, released: -58 * DAY },
+  { id: "ed_07", title: "Night Signal", status: "scheduled", sold: 0, supply: 200, price: 56, released: 3 * DAY },
+  { id: "ed_08", title: "Low Tide, Blue", status: "closed", sold: 72, supply: 120, price: 42, released: -71 * DAY },
+  { id: "ed_09", title: "Ember Field", status: "sold-out", sold: 80, supply: 80, price: 140, released: -86 * DAY }
+];
+var editionCount = 24;
+var 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 \u2022\u20224821" }
+  ]
+};
+var 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 }
+];
+var upcoming = [
+  { id: "up_01", title: "Night Signal", detail: "Edition of 200 \xB7 $56", at: 3 * DAY },
+  { id: "up_02", title: "Tidewater, second printing", detail: "Edition of 100 \xB7 $40", at: 12 * DAY },
+  { id: "up_03", title: "Dusk, no. 5", detail: "Edition of 150 \xB7 $64", at: 26 * DAY },
+  { id: "up_04", title: "Quiet Harbor, artist proofs", detail: "Edition of 10 \xB7 $480", at: 34 * DAY }
 ];
 var 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 \xB7 185 of 250", when: 2 * MIN },
+  { id: "ac_02", who: "Grace Hopper", initials: "GH", what: "collected Dusk, no. 4 \xB7 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 }
 ];
 function DashboardPage() {
   return /* @__PURE__ */ jsx(
     AppShell,
     {
-      header: /* @__PURE__ */ jsx(AppHeader, { title: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" }) }),
+      header: /* @__PURE__ */ jsx(
+        AppHeader,
+        {
+          title: /* @__PURE__ */ jsxs(Row, { gap: 1, align: "center", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-xl" }),
+            /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" })
+          ] }),
+          actions: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "Ada Lovelace" })
+        }
+      ),
       bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
         /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", showLabel: true, active: true, render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
         /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
@@ -524,75 +721,215 @@ function DashboardPage() {
         /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
       ] }),
       sidebar: /* @__PURE__ */ jsxs(Sidebar, { children: [
-        /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" }) }),
+        /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsxs(Row, { gap: 1, align: "center", className: "px-3", children: [
+          /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-xl" }),
+          /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" })
+        ] }) }),
         /* @__PURE__ */ jsxs(SidebarNav, { children: [
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", active: true, render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Collectors", render: /* @__PURE__ */ jsx("a", { href: "/collectors" }) }),
-          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }), label: "Activity", render: /* @__PURE__ */ jsx("a", { href: "/activity" }) }),
+          /* @__PURE__ */ jsx(
+            SidebarItem,
+            {
+              icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }),
+              label: "Activity",
+              badge: /* @__PURE__ */ jsx(NotificationBadge, { count: 4, tone: "neutral" }),
+              render: /* @__PURE__ */ jsx("a", { href: "/activity" })
+            }
+          ),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx(SidebarFooter, { className: "[--foreground:var(--sidebar-foreground)]", children: /* @__PURE__ */ jsx(
+          Entity,
+          {
+            className: "[--entity-py:0]",
+            leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "" }),
+            title: "Ada Lovelace",
+            action: /* @__PURE__ */ jsxs(DotsMenu, { label: "Account", size: "icon-sm", children: [
+              /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/@ada" }), children: "View profile" }),
+              /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/settings" }), children: "Settings" }),
+              /* @__PURE__ */ jsx(MenuSeparator, {}),
+              /* @__PURE__ */ jsx(MenuItem, { children: "Sign out" })
+            ] })
+          }
+        ) })
       ] }),
       children: /* @__PURE__ */ jsxs(Page, { max: "wide", gap: 4, className: "py-6", children: [
         /* @__PURE__ */ jsx(
           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: /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
-              /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Export" }),
-              /* @__PURE__ */ jsx(Button, { children: "New edition" })
+              /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+                /* @__PURE__ */ jsx(Icon, { name: "download" }),
+                "Export"
+              ] }),
+              /* @__PURE__ */ jsxs(Button, { children: [
+                /* @__PURE__ */ jsx(Icon, { name: "plus" }),
+                "New edition"
+              ] })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 2, xl: 4 }, gap: 3, children: stats.map((stat) => /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(Grid, { cols: { base: 2, xl: 4 }, gap: 3, children: stats.map((stat) => /* @__PURE__ */ jsxs(Card, { children: [
           /* @__PURE__ */ jsxs(CardHeader, { children: [
             /* @__PURE__ */ jsx(CardDescription, { children: stat.label }),
-            /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: stat.value }),
-            /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs(Badge, { tone: stat.up ? "success" : "neutral", size: "sm", children: [
-              /* @__PURE__ */ jsx(Icon, { name: stat.up ? "chevron-up" : "chevron-down" }),
-              stat.delta
-            ] }) })
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: stat.value })
           ] }),
-          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: stat.note }) })
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Row, { gap: 1, wrap: true, children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                tone: stat.up ? "success" : "warning",
+                size: "sm",
+                icon: /* @__PURE__ */ jsx(Icon, { name: stat.up ? "arrow-up" : "arrow-down" }),
+                children: stat.delta
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: stat.note })
+          ] }) })
         ] }, stat.label)) }),
         /* @__PURE__ */ jsxs(Grid, { cols: { base: 1, xl: 3 }, gap: 3, children: [
-          /* @__PURE__ */ jsxs(Card, { className: "xl:col-span-2", children: [
+          /* @__PURE__ */ jsxs(Card, { className: "flex flex-col xl:col-span-2", children: [
             /* @__PURE__ */ jsxs(CardHeader, { children: [
-              /* @__PURE__ */ jsx(CardTitle, { children: "Recent deployments" }),
-              /* @__PURE__ */ jsx(CardDescription, { children: "Builds across every project, newest first." }),
-              /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/deployments" }), children: "View all" }) })
+              /* @__PURE__ */ jsx(CardTitle, { children: "Editions" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Sales across your releases, newest first." })
             ] }),
-            /* @__PURE__ */ jsx(CardContent, { flush: true, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(CardContent, { flush: true, className: "mt-4 flex-1", children: /* @__PURE__ */ jsx(
               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) => /* @__PURE__ */ jsx("span", { className: "text-mono-caption text-muted-foreground", children: row.commit }) },
-                  { key: "status", header: "Status", cell: (row) => /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: statusTone(row.status), dot: true, children: row.status }) },
-                  { key: "duration", header: "Duration", align: "end", cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-mono-caption", children: row.duration }) },
-                  { key: "updated", header: "Updated", align: "end", cell: (row) => /* @__PURE__ */ jsx(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) => /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: STATUS_TONE[row.status], dot: true, children: STATUS_LABEL[row.status] })
+                  },
+                  {
+                    key: "sold",
+                    header: "Sold",
+                    sortable: true,
+                    sortValue: (row) => row.sold / row.supply,
+                    cell: (row) => /* @__PURE__ */ jsxs(Row, { gap: 3, align: "center", className: "min-w-40", children: [
+                      /* @__PURE__ */ jsx(
+                        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"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "text-mono-caption whitespace-nowrap text-muted-foreground", children: [
+                        row.sold,
+                        "/",
+                        row.supply
+                      ] })
+                    ] })
+                  },
+                  {
+                    key: "revenue",
+                    header: "Revenue",
+                    align: "end",
+                    sortable: true,
+                    sortValue: (row) => row.sold * row.price,
+                    cell: (row) => row.sold > 0 ? /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: usd.format(row.sold * row.price) }) : /* @__PURE__ */ jsx("span", { className: "text-mono-sm text-muted-foreground", children: "\u2014" })
+                  },
+                  {
+                    key: "released",
+                    header: "Release",
+                    align: "end",
+                    sortable: true,
+                    cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-body-sm whitespace-nowrap text-muted-foreground", children: shortDate(row.released) })
+                  }
                 ]
               }
-            ) })
+            ) }),
+            /* @__PURE__ */ jsxs(CardFooter, { className: "justify-between", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted-foreground", children: [
+                "Showing ",
+                editions.length,
+                " of ",
+                editionCount,
+                " editions"
+              ] }),
+              /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/editions" }), children: [
+                "View all editions",
+                /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardDescription, { children: "Next payout" }),
+                /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: usdCents.format(payout.amount) }),
+                /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "info", size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: "calendar" }), children: shortDate(payout.date) }) })
+              ] }),
+              /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("dl", { className: "sable-list-dl text-body-sm", children: payout.lines.map((line) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+                /* @__PURE__ */ jsx("dt", { children: line.label }),
+                /* @__PURE__ */ jsx("dd", { className: typeof line.value === "number" ? "text-end text-mono-sm" : "text-end", children: typeof line.value === "number" ? usdCents.format(line.value) : line.value })
+              ] }, line.label)) }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardTitle, { children: "Top collectors" }),
+                /* @__PURE__ */ jsx(CardDescription, { children: "By spend this month." }),
+                /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/collectors" }), children: "View all" }) })
+              ] }),
+              /* @__PURE__ */ jsx(CardList, { children: collectors.map((person) => /* @__PURE__ */ jsx(
+                Entity,
+                {
+                  leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: person.initials, alt: "" }),
+                  title: person.name,
+                  subtitle: `${person.handle} \xB7 ${person.pieces} pieces`,
+                  action: /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: usd.format(person.spent) })
+                },
+                person.id
+              )) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Grid, { cols: { base: 1, xl: 3 }, gap: 3, children: [
+          /* @__PURE__ */ jsxs(Card, { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsx(CardTitle, { children: "Upcoming releases" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Scheduled to open to collectors." })
+            ] }),
+            /* @__PURE__ */ jsx(CardList, { children: upcoming.map((release) => /* @__PURE__ */ jsx(
+              Entity,
+              {
+                title: release.title,
+                subtitle: release.detail,
+                action: /* @__PURE__ */ jsx(RelativeTime, { date: Date.now() + release.at, className: "text-caption text-muted-foreground" })
+              },
+              release.id
+            )) }),
+            /* @__PURE__ */ jsx(CardFooter, { className: "mt-auto", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/editions/new" }), children: [
+              /* @__PURE__ */ jsx(Icon, { name: "calendar" }),
+              "Schedule a release"
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Card, { className: "xl:col-span-2", children: [
             /* @__PURE__ */ jsxs(CardHeader, { children: [
               /* @__PURE__ */ jsx(CardTitle, { children: "Activity" }),
-              /* @__PURE__ */ jsx(CardDescription, { children: "Collects, mints, and follows." })
+              /* @__PURE__ */ jsx(CardDescription, { children: "Collects, tips, and follows." }),
+              /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/activity" }), children: "View all" }) })
             ] }),
             /* @__PURE__ */ jsx(CardList, { children: activity.map((item) => /* @__PURE__ */ jsx(
               Entity,
               {
-                density: "compact",
-                leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: item.initials, alt: item.who }),
-                title: /* @__PURE__ */ jsxs("span", { className: "text-body-sm", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-label-md", children: item.who }),
-                  " ",
-                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.what })
-                ] }),
+                leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: item.initials, alt: "" }),
+                title: item.who,
+                subtitle: item.what,
                 action: /* @__PURE__ */ jsx(RelativeTime, { date: Date.now() - item.when, className: "text-caption text-muted-foreground" })
               },
               item.id
@@ -607,150 +944,561 @@ function DashboardPage() {
 // src/patterns/dashboard-page.meta.ts
 var dashboardPageMeta = {
   name: "DashboardPage",
-  summary: "App-shell dashboard: sidebar chrome (AppHeader + BottomNav below lg), a wide content region, a stat-card row that breathes, and a data table \u2014 the default shape for operator/analytics home routes.",
-  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).",
+  summary: "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 \u2014 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 (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` \u2014 the metric mono tier, tabular figures \u2014 never a heading tier.",
-    "Stat cards use an explicit cols map (1 \u2192 2 \u2192 4) \u2014 a 4-stat row must fold to 2\xD72, 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 \u2014 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 \u2014 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 \u2014 never 3 rows of filler.",
+    "Hierarchy runs headline \u2192 records \u2192 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` \u2014 the metric mono tier, tabular figures \u2014 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\xD72 on a phone.",
+    "Stat cards use an explicit cols map (2 \u2192 4) \u2014 a 4-stat row must fold to 2\xD72, 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 \u2014 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 \u2014 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 \u2014 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 \u2014 never strand mobile users without navigation."
   ],
   a11y: [
     '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."
+    "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."
   ]
 };
 var posts = [
   {
     id: "p_01",
     author: "Ada Lovelace",
-    handle: "@ada \xB7 2h",
+    handle: "@ada",
     initials: "AL",
-    body: "New edition drops Friday \u2014 100 signed prints, each with the on-chain original.",
-    image: "/media/edition-cover.svg",
-    alt: "Edition cover \u2014 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 \xB7 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 \u2014 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 \u2014 your unlockable score is now in your library. Headphones on for this one.",
+    likes: 214,
+    comments: 31
   }
 ];
-function FeedPage() {
-  return /* @__PURE__ */ jsxs(Page, { as: "main", max: "feed", gap: 4, className: "py-6", children: [
-    /* @__PURE__ */ jsx(PageHeader, { title: "Home", description: "Latest posts from artists you follow." }),
-    /* @__PURE__ */ jsx(Stack, { gap: 3, children: posts.map((post) => /* @__PURE__ */ jsx("article", { children: /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
-      /* @__PURE__ */ jsx(CardList, { children: /* @__PURE__ */ jsx(
-        Entity,
+var suggestions = [
+  { id: "u_01", name: "Mary Shelley", handle: "@mary", initials: "MS" },
+  { id: "u_02", name: "Nina Simone", handle: "@nina", initials: "NS" }
+];
+var upcoming2 = [
+  { 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" }
+];
+var renderPost = (post) => /* @__PURE__ */ jsx("article", { children: /* @__PURE__ */ jsxs(Card, { children: [
+  /* @__PURE__ */ jsx(CardList, { children: /* @__PURE__ */ jsx(
+    Entity,
+    {
+      leading: /* @__PURE__ */ jsx(Avatar, { fallback: post.initials, alt: post.author }),
+      title: post.author,
+      subtitle: `${post.handle} \xB7 ${post.time}`,
+      action: /* @__PURE__ */ jsxs(DotsMenu, { label: `Post options for ${post.author}`, size: "icon-sm", children: [
+        /* @__PURE__ */ jsx(MenuItem, { children: "Copy link" }),
+        /* @__PURE__ */ jsxs(MenuItem, { children: [
+          "Mute ",
+          post.handle
+        ] }),
+        /* @__PURE__ */ jsx(MenuSeparator, {}),
+        /* @__PURE__ */ jsx(MenuItem, { variant: "destructive", children: "Report post" })
+      ] })
+    }
+  ) }),
+  /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4 pt-0", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-body-md text-foreground", children: post.body }),
+    post.media ? /* @__PURE__ */ jsxs(AspectBox, { ratio: 16 / 9, className: "overflow-hidden rounded-concentric-lg/6 bg-muted", children: [
+      /* @__PURE__ */ jsx("img", { src: post.media.src, alt: post.media.alt, className: "size-full object-cover" }),
+      post.drop ? /* @__PURE__ */ jsx("div", { className: "absolute start-3 top-3", children: /* @__PURE__ */ jsx(Badge, { appearance: "overlay", size: "sm", dot: true, children: "Live drop" }) }) : null
+    ] }) : null,
+    post.drop ? /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+      /* @__PURE__ */ jsxs(Row, { gap: 2, align: "center", justify: "between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-title-md text-foreground", children: post.drop.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: `${post.drop.price} \xB7 Edition of ${post.drop.supply}` })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { children: `Collect for ${post.drop.price}` })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Meter,
         {
-          leading: /* @__PURE__ */ jsx(Avatar, { fallback: post.initials, alt: post.author }),
-          title: post.author,
-          subtitle: post.handle,
-          action: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Post options", children: /* @__PURE__ */ jsx(Icon, { name: "ellipsis" }) })
+          value: post.drop.collected,
+          max: post.drop.supply,
+          size: "sm",
+          getAriaValueText: (_, value) => `${value} of ${post.drop?.supply} collected`,
+          children: [
+            /* @__PURE__ */ jsxs(Row, { gap: 2, align: "center", justify: "between", className: "mb-2", children: [
+              /* @__PURE__ */ jsx(MeterLabel, { children: `${post.drop.collected} collected` }),
+              /* @__PURE__ */ jsx(MeterValue, { children: (_, value) => `${(post.drop?.supply ?? 0) - value} left` })
+            ] }),
+            /* @__PURE__ */ jsx(MeterTrack, {})
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsx(AspectBox, { ratio: 16 / 9, children: /* @__PURE__ */ jsx("img", { src: post.image, alt: post.alt, className: "size-full object-cover" }) }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-body-md text-foreground", children: post.body }),
-        /* @__PURE__ */ jsxs(Row, { gap: 1, className: "-ms-3", children: [
-          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", "aria-label": `Like \u2014 ${post.likes}`, children: [
-            /* @__PURE__ */ jsx(Icon, { name: "heart" }),
-            post.likes
-          ] }),
-          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", "aria-label": `Comments \u2014 ${post.comments}`, children: [
-            /* @__PURE__ */ jsx(Icon, { name: "comment" }),
-            post.comments
-          ] }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Share", children: /* @__PURE__ */ jsx(Icon, { name: "share" }) })
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs(Row, { gap: 0.5, className: "-ms-3", children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", "aria-label": `Like, ${post.likes} likes`, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "heart" }),
+        post.likes
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", "aria-label": `Comment, ${post.comments} comments`, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "comment" }),
+        post.comments
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Share", children: /* @__PURE__ */ jsx(Icon, { name: "share" }) })
+    ] })
+  ] })
+] }) }, post.id);
+function FeedPage() {
+  return /* @__PURE__ */ jsx(Page, { as: "main", max: "wide", gap: 4, className: "py-6", children: /* @__PURE__ */ jsxs(Row, { gap: 4, align: "start", justify: "center", children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "min-w-0 max-w-(--region-feed) flex-1", children: [
+      /* @__PURE__ */ jsx(PageHeader, { title: "Home" }),
+      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Row, { gap: 1.5, align: "start", children: [
+        /* @__PURE__ */ jsx(Avatar, { fallback: "AL", alt: "Ada Lovelace" }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 1.5, className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              autoResize: true,
+              rows: 2,
+              "aria-label": "New post",
+              placeholder: "Share a process shot or an upcoming drop"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Row, { gap: 1, align: "center", justify: "between", children: [
+            /* @__PURE__ */ jsxs(Row, { gap: 0.5, children: [
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Add images", children: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }) }),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Attach an edition", children: /* @__PURE__ */ jsx(Icon, { name: "gem" }) })
+            ] }),
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Post" })
+          ] })
         ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs(Tabs, { defaultValue: "for-you", children: [
+        /* @__PURE__ */ jsxs(TabsList, { className: "flex", children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "for-you", children: "For you" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "following", children: "Following" })
+        ] }),
+        /* @__PURE__ */ jsx(TabsPanel, { value: "for-you", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          posts.map(renderPost),
+          /* @__PURE__ */ jsx(Card, { "aria-busy": "true", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxs(Row, { gap: 1.5, align: "center", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "size-10 rounded-full" }),
+              /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-2/3" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", loading: true, loadingLabel: "Loading posts", children: "Load more posts" })
+        ] }) }),
+        /* @__PURE__ */ jsx(TabsPanel, { value: "following", children: /* @__PURE__ */ jsx(Stack, { gap: 3, children: posts.filter((post) => post.following).map(renderPost) }) })
       ] })
-    ] }) }, post.id)) }),
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", loadingLabel: "Loading\u2026", children: "Load more posts" })
-  ] });
+    ] }),
+    /* @__PURE__ */ jsx("aside", { "aria-label": "Suggestions", className: "sticky top-6 hidden w-80 shrink-0 lg:block", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { role: "heading", "aria-level": 2, children: "Who to follow" }) }),
+        /* @__PURE__ */ jsx(CardList, { children: suggestions.map((person) => /* @__PURE__ */ jsx(
+          Entity,
+          {
+            leading: /* @__PURE__ */ jsx(Avatar, { fallback: person.initials, alt: person.name }),
+            title: person.name,
+            subtitle: person.handle,
+            action: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", "aria-label": `Follow ${person.name}`, children: "Follow" })
+          },
+          person.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { role: "heading", "aria-level": 2, children: "Upcoming drops" }) }),
+        /* @__PURE__ */ jsx(CardList, { children: upcoming2.map((drop) => /* @__PURE__ */ jsx(
+          Entity,
+          {
+            leading: /* @__PURE__ */ jsx(Avatar, { fallback: drop.initials, alt: drop.artist }),
+            title: drop.title,
+            subtitle: `${drop.artist} \xB7 ${drop.date}`,
+            action: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Remind me about ${drop.title}`, children: /* @__PURE__ */ jsx(Icon, { name: "bell" }) })
+          },
+          drop.id
+        )) })
+      ] })
+    ] }) })
+  ] }) });
 }
 
 // src/patterns/feed-page.meta.ts
 var feedPageMeta = {
   name: "FeedPage",
-  summary: "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.",
-  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).",
+  summary: "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 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) \u2014 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 \u2014 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 \u2014 `loadingLabel` names that state), not infinite scroll \u2014 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 \u2014 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` \u2014 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 \u2014 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 \u2014 predictable for keyboard and AT users, unlike infinite scroll."
   ],
   a11y: [
-    "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").'
   ]
 };
-var features2 = [
+var navLinks = [
+  { label: "Docs", href: "/docs" },
+  { label: "Components", href: "/components" },
+  { label: "Patterns", href: "/patterns" },
+  { label: "Themes", href: "/themes" }
+];
+var deploys = [
+  {
+    initials: "MO",
+    name: "Maya Ortiz",
+    title: "Add usage-based billing",
+    meta: "main \xB7 a3f9c21 \xB7 2m ago",
+    status: "Building",
+    tone: "info",
+    pulse: true
+  },
   {
-    icon: "sparkles",
-    title: "Own the surface",
-    body: "Semantic tokens end-to-end \u2014 re-theme the whole product without touching a component."
+    initials: "SR",
+    name: "Sam Reyes",
+    title: "Fix search ranking for long queries",
+    meta: "main \xB7 81be04d \xB7 18m ago",
+    status: "Ready",
+    tone: "success",
+    pulse: false
   },
+  {
+    initials: "JL",
+    name: "Jun Lee",
+    title: "Rotate webhook signing keys",
+    meta: "main \xB7 5c7e9aa \xB7 1h ago",
+    status: "Ready",
+    tone: "success",
+    pulse: false
+  }
+];
+var features = [
   {
     icon: "component",
-    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",
+    title: "Semantic tokens end to end",
+    body: "Re-theme the whole product, light and dark, from one preset without touching a component."
   },
   {
     icon: "layout",
     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",
+    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",
+    title: "Lint that knows the design",
+    body: "sable-lint flags raw colors, hand-built controls, and motion that ignores reduced motion."
+  },
+  {
+    icon: "play",
+    title: "Motion with an off switch",
+    body: "Named recipes run on one scale variable, so reduced motion stops every transition at once."
+  }
+];
+var steps2 = [
+  {
+    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."
+  }
+];
+var stylesCode = `@import "tailwindcss";
+@import "@sableui/react/styles.css";
+@source "../node_modules/@sableui/react/dist/**/*.{js,mjs}";`;
+var 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>
+  )
+}`;
+var 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`;
+var 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."
+];
+var footerGroups2 = [
+  {
+    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" }
+    ]
   }
 ];
 function LandingPage() {
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-dvh bg-background", children: [
-    /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs(Region, { as: "nav", "aria-label": "Main", className: "grid h-16 grid-cols-[1fr_auto_1fr] items-center", children: [
-      /* @__PURE__ */ jsx("span", { className: "justify-self-start text-title-sm", children: "Sable" }),
-      /* @__PURE__ */ jsxs(Row, { gap: 1, className: "justify-self-center max-sm:hidden", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/docs" }), children: "Docs" }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/patterns" }), children: "Patterns" }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/themes" }), children: "Themes" })
-      ] }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", className: "justify-self-end", render: /* @__PURE__ */ jsx("a", { href: "/signup" }), children: "Get started" })
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-dvh bg-background text-foreground", children: [
+    /* @__PURE__ */ jsx("header", { className: "border-b border-border", children: /* @__PURE__ */ jsxs(Region, { as: "nav", "aria-label": "Main", max: "wide", className: "grid h-16 grid-cols-[1fr_auto_1fr] items-center", children: [
+      /* @__PURE__ */ jsx("a", { href: "/", className: "justify-self-start text-title-lg motion-interactive hover:text-muted-foreground", children: "Sable" }),
+      /* @__PURE__ */ jsx("div", { className: "justify-self-center max-md:hidden", children: /* @__PURE__ */ jsx(Row, { gap: 1, children: navLinks.map((link) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: link.href }), children: link.label }, link.label)) }) }),
+      /* @__PURE__ */ jsxs(Row, { gap: 1, className: "col-start-3 justify-self-end", children: [
+        /* @__PURE__ */ jsx("div", { className: "max-sm:hidden", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/github" }), children: "GitHub" }) }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/docs/getting-started" }), children: "Get started" })
+      ] })
     ] }) }),
     /* @__PURE__ */ jsxs("main", { children: [
-      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "py-24", children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "text-center", children: [
-        /* @__PURE__ */ jsx(Badge, { appearance: "outline", size: "sm", children: "Now in beta" }),
-        /* @__PURE__ */ jsx("h1", { className: "max-w-4xl text-balance text-display-2xl", children: "Ship product UI your agents can't get wrong" }),
-        /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "An owned, themeable component system with enforced tokens, typography, and motion \u2014 documented for machines as carefully as for people." }),
-        /* @__PURE__ */ jsxs(Row, { gap: 2, justify: "center", children: [
-          /* @__PURE__ */ jsx(Button, { size: "cta", children: "Get started" }),
-          /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", children: "Read the docs" })
-        ] })
+      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "pb-16 pt-16 sm:pt-24", children: /* @__PURE__ */ jsxs(Stack, { gap: 8, align: "center", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "text-center", children: [
+          /* @__PURE__ */ jsx(Badge, { appearance: "outline", size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: "sparkles" }), children: "Open source \xB7 MIT licensed" }),
+          /* @__PURE__ */ jsx("h1", { className: "max-w-4xl text-balance text-display-lg sm:text-display-2xl", children: "Product UI your agents can't get wrong" }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-pretty text-body-lg text-muted-foreground", children: "Sable is a themeable React component library with enforced tokens, typography, and motion, documented for coding agents as carefully as for people." }),
+          /* @__PURE__ */ jsxs(Row, { gap: 2, justify: "center", wrap: true, className: "pt-2", children: [
+            /* @__PURE__ */ jsx(Button, { size: "cta", render: /* @__PURE__ */ jsx("a", { href: "/docs/getting-started" }), children: "Get started" }),
+            /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", render: /* @__PURE__ */ jsx("a", { href: "/components" }), children: "Browse components" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(CodeBlock, { prompt: "$", code: "pnpm add @sableui/react" }) })
       ] }) }),
-      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "pb-24", children: /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx(Grid, { minItemWidth: "calc(var(--spacing) * 64)", children: features2.map((feature) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx(Icon, { name: feature.icon, className: "text-xl text-muted-foreground" }),
-        /* @__PURE__ */ jsx("h2", { className: "text-title-lg", children: feature.title }),
-        /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: feature.body })
-      ] }) }, feature.title)) }) }) })
+      /* @__PURE__ */ jsx(Region, { as: "section", "aria-label": "Product preview", max: "wide", className: "pb-20 sm:pb-28", children: /* @__PURE__ */ jsxs("figure", { children: [
+        /* @__PURE__ */ jsx(Browser, { url: "atlas.example/deploys", className: "shadow-xl", children: /* @__PURE__ */ jsxs("div", { inert: true, className: "grid gap-4 p-4 sm:p-6 lg:grid-cols-[minmax(0,1fr)_20rem]", children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 4, className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              PageHeader,
+              {
+                titleAs: "h2",
+                title: "Deployments",
+                description: "atlas-web \xB7 production",
+                actions: /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
+                  /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "View logs" }),
+                  /* @__PURE__ */ jsx(Button, { size: "sm", iconStart: /* @__PURE__ */ jsx(Icon, { name: "upload" }), children: "Deploy" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Grid, { cols: { base: 2, md: 3 }, gap: 3, children: [
+              /* @__PURE__ */ jsxs(Card, { density: "compact", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: "Uptime" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Last 30 days" })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-heading-3", children: "99.98%" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { density: "compact", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: "p95 latency" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Edge, all regions" })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-heading-3", children: "182 ms" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { density: "compact", className: "max-md:hidden", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: "Build minutes" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Team plan" })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Meter, { value: 64, tone: "standard", children: [
+                  /* @__PURE__ */ jsxs(Row, { justify: "between", wrap: true, className: "mb-2", children: [
+                    /* @__PURE__ */ jsx(MeterLabel, { children: "Used" }),
+                    /* @__PURE__ */ jsx(MeterValue, { children: (_, value) => `${(value * 30).toLocaleString("en-US")} of 3,000` })
+                  ] }),
+                  /* @__PURE__ */ jsx(MeterTrack, {})
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardTitle, { children: "Recent deploys" }),
+                /* @__PURE__ */ jsx(CardDescription, { children: "Production branch" }),
+                /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: "success", dot: true, children: "Healthy" }) })
+              ] }),
+              /* @__PURE__ */ jsx(CardList, { children: deploys.map((deploy) => /* @__PURE__ */ jsx(
+                Entity,
+                {
+                  leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: deploy.initials, alt: deploy.name }),
+                  title: deploy.title,
+                  subtitle: deploy.meta,
+                  action: /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: deploy.tone, dot: true, pulse: deploy.pulse, children: deploy.status })
+                },
+                deploy.meta
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Card, { className: "max-lg:hidden", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsx(CardTitle, { children: "Release assistant" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Summaries from today's deploys" })
+            ] }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx(Message, { align: "end", children: /* @__PURE__ */ jsx(Bubble, { variant: "primary", align: "end", children: "What shipped to production today?" }) }),
+              /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsx(Bubble, { children: "Three deploys. Search ranking is fixed, webhook keys are rotated, and usage-based billing is building now." }) }),
+              /* @__PURE__ */ jsx(ChatComposer, { placeholder: "Ask about a deploy" })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("figcaption", { className: "mt-4 text-center text-body-sm text-muted-foreground", children: "Every surface in this preview is a Sable component, styled by the active theme." })
+      ] }) }),
+      /* @__PURE__ */ jsx("section", { "aria-labelledby": "landing-features", className: "border-y border-border bg-muted/40 py-20 sm:py-28", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-2xl", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Why Sable" }),
+          /* @__PURE__ */ jsx("h2", { id: "landing-features", className: "text-balance text-heading-1", children: "A design system with the rules written down" }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: "The decisions a senior designer would make are encoded once, so every screen your team or your agent builds starts from them." })
+        ] }),
+        /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 2, lg: 3 }, gap: 4, children: features.map((feature) => /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("article", {}), className: "h-full", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-md sable-well", children: /* @__PURE__ */ jsx(Icon, { name: feature.icon, className: "text-xl" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "pt-2 text-title-lg", children: feature.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: feature.body })
+        ] }) }, feature.title)) }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": "landing-setup", max: "wide", className: "py-20 sm:py-28", children: /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-10 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 8, children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Setup" }),
+            /* @__PURE__ */ jsx("h2", { id: "landing-setup", className: "text-balance text-heading-1", children: "From install to first screen in three steps" })
+          ] }),
+          /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-6", children: steps2.map((step, index) => /* @__PURE__ */ jsxs("li", { className: "grid grid-cols-[auto_1fr] gap-4", children: [
+            /* @__PURE__ */ jsxs("span", { className: "pt-0.5 text-mono-md text-muted-foreground", children: [
+              "0",
+              index + 1
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-title-lg", children: step.title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-md text-muted-foreground", children: step.body })
+            ] })
+          ] }, step.title)) })
+        ] }),
+        /* @__PURE__ */ jsx(Reveal, { className: "min-w-0", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "compose", children: [
+          /* @__PURE__ */ jsxs(TabsList, { children: [
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "install", children: "Install" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "styles", children: "Styles" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "compose", children: "Compose" })
+          ] }),
+          /* @__PURE__ */ jsx(TabsPanel, { value: "install", className: "pt-4", children: /* @__PURE__ */ jsx(CodeBlock, { prompt: "$", code: "pnpm add @sableui/react" }) }),
+          /* @__PURE__ */ jsx(TabsPanel, { value: "styles", className: "pt-4", children: /* @__PURE__ */ jsx(CodeBlock, { filename: "app.css", code: stylesCode }) }),
+          /* @__PURE__ */ jsx(TabsPanel, { value: "compose", className: "pt-4", children: /* @__PURE__ */ jsx(CodeBlock, { filename: "deploy-card.tsx", code: composeCode }) })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("section", { "aria-labelledby": "landing-agents", className: "border-t border-border py-20 sm:py-28", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-10 lg:grid-cols-2 lg:gap-16", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Built for agents" }),
+            /* @__PURE__ */ jsx("h2", { id: "landing-agents", className: "text-balance text-heading-1", children: "Your agent reads the same contract you do" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-body-lg text-muted-foreground", children: [
+              "Point Claude Code, Codex, or Cursor at the installed package. The",
+              " ",
+              /* @__PURE__ */ jsx(Code, { children: "sable" }),
+              " CLI answers what to use, how to use it, and whether the result holds up."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "sable-list", children: agentPoints.map((point) => /* @__PURE__ */ jsx("li", { children: point }, point)) })
+        ] }),
+        /* @__PURE__ */ jsx(Reveal, { className: "min-w-0", children: /* @__PURE__ */ jsx(CodeBlock, { filename: "Terminal", code: terminalCode, highlight: false }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": "landing-cta", max: "wide", className: "pb-20 sm:pb-28", children: /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "py-8 text-center sm:py-12", children: [
+        /* @__PURE__ */ jsx("h2", { id: "landing-cta", className: "max-w-2xl text-balance text-heading-1", children: "Build the product, not another component library" }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "Install Sable, pick a preset, and ship the first screen today." }),
+        /* @__PURE__ */ jsxs(Row, { gap: 2, justify: "center", wrap: true, className: "pt-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "cta", render: /* @__PURE__ */ jsx("a", { href: "/docs/getting-started" }), children: "Get started" }),
+          /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", render: /* @__PURE__ */ jsx("a", { href: "/github" }), children: "Star on GitHub" })
+        ] })
+      ] }) }) }) }) })
     ] }),
-    /* @__PURE__ */ jsx("footer", { className: "border-t border-border", children: /* @__PURE__ */ jsxs(Region, { className: "flex h-16 items-center justify-between", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: "\xA9 2026 Sable" }),
-      /* @__PURE__ */ jsxs(Row, { gap: 3, children: [
-        /* @__PURE__ */ jsx("a", { href: "/github", className: "text-caption text-muted-foreground motion-interactive hover:text-foreground", children: "GitHub" }),
-        /* @__PURE__ */ jsx("a", { href: "/changelog", className: "text-caption text-muted-foreground motion-interactive hover:text-foreground", children: "Changelog" })
-      ] })
+    /* @__PURE__ */ jsx("footer", { className: "border-t border-border", children: /* @__PURE__ */ jsxs(Region, { max: "wide", className: "py-12", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-10 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-xs", children: [
+          /* @__PURE__ */ jsx("a", { href: "/", className: "w-fit text-title-lg motion-interactive hover:text-muted-foreground", children: "Sable" }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "React components, patterns, and tokens for products built with AI agents." })
+        ] }),
+        /* @__PURE__ */ jsx("nav", { "aria-label": "Footer", className: "grid grid-cols-2 gap-8 sm:grid-cols-3", children: footerGroups2.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-label-md text-muted-foreground", children: group.title }),
+          /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-col gap-1", children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: link.href,
+              className: "flex min-h-9 items-center text-body-sm motion-interactive hover:text-muted-foreground",
+              children: link.label
+            }
+          ) }, link.label)) })
+        ] }, group.title)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: "\xA9 2026 Sable. Released under the MIT license." }) })
     ] }) })
   ] });
 }
@@ -758,71 +1506,367 @@ function LandingPage() {
 // src/patterns/landing-page.meta.ts
 var landingPageMeta = {
   name: "LandingPage",
-  summary: "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.",
-  intent: "Reach for this for the marketing/landing route of a product \u2014 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).",
+  summary: "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 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"`) \u2014 the badge\'s own size, never a type class forced onto its label; hierarchy above the headline is eyebrow \u2192 display \u2192 lede.',
-    "The lede is body-lg capped at the prose measure \u2014 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."
   ],
   a11y: [
-    "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 \u2014 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."
   ]
 };
-var 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 }
+var roles = [
+  { value: "owner", label: "Owner" },
+  { value: "admin", label: "Admin" },
+  { value: "editor", label: "Editor" },
+  { value: "viewer", label: "Viewer" }
+];
+var roleLabel = {
+  owner: "Owner",
+  admin: "Admin",
+  editor: "Editor",
+  viewer: "Viewer"
+};
+var roleSummary = {
+  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."
+};
+var seats = 10;
+var initialMembers = [
+  {
+    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 \u2014 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 \u2014 edition of 10", when: "3 days ago" },
+      { id: "a3", icon: "gem", text: "Released First Compiler \u2014 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 \u2014 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 \u2014 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: []
+  }
 ];
 function ListDetailPage() {
+  const [members, setMembers] = useState(initialMembers);
+  const [selectedId, setSelectedId] = useState("u_02");
+  const [query, setQuery] = useState("");
+  const [showDetail, setShowDetail] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const listRef = useRef(null);
+  const backRef = useRef(null);
+  const searchRef = useRef(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 pending2 = members.length - active;
+  useEffect(() => {
+    if (showDetail && backRef.current?.offsetParent) backRef.current.focus();
+  }, [showDetail, selectedId]);
+  function select(id) {
+    setSelectedId(id);
+    setShowDetail(true);
+  }
+  function focusRow(id) {
+    requestAnimationFrame(() => {
+      listRef.current?.querySelector(`[data-member-id="${id}"] button`)?.focus();
+    });
+  }
+  function backToList() {
+    setShowDetail(false);
+    focusRow(selectedId ?? void 0);
+  }
+  function setRole(id, role) {
+    setMembers((list) => list.map((m) => m.id === id ? { ...m, role } : m));
+  }
+  function resend(id) {
+    setMembers(
+      (list) => list.map((m) => m.id === id ? { ...m, sent: "Just now", expires: "In 7 days", resent: true } : m)
+    );
+  }
+  function remove(id) {
+    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);
+    focusRow(next);
+  }
   return /* @__PURE__ */ jsxs(Page, { as: "main", max: "wide", gap: 4, className: "py-6", children: [
     /* @__PURE__ */ jsx(
       PageHeader,
       {
         title: "Members",
-        description: "Everyone with access to this workspace.",
-        actions: /* @__PURE__ */ jsx(Button, { children: "Invite member" })
+        description: `${active} members \xB7 ${pending2} pending ${pending2 === 1 ? "invite" : "invites"} \xB7 ${members.length} of ${seats} seats used`,
+        actions: /* @__PURE__ */ jsx(Button, { iconStart: /* @__PURE__ */ jsx(Icon, { name: "plus" }), children: "Invite member" })
       }
     ),
     /* @__PURE__ */ jsxs(Columns, { count: { base: 1, lg: 12 }, children: [
-      /* @__PURE__ */ jsx(Col, { span: { base: 1, lg: 8 }, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-        /* @__PURE__ */ jsx(SearchInput, { placeholder: "Search members", "aria-label": "Search members" }),
-        /* @__PURE__ */ jsx(Card, { className: "overflow-hidden", children: /* @__PURE__ */ jsx(CardList, { children: members.map((member) => /* @__PURE__ */ jsx(
-          Entity,
+      /* @__PURE__ */ jsx(Col, { span: { base: 1, lg: 5 }, className: showDetail ? "max-lg:hidden" : void 0, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+        /* @__PURE__ */ jsx(
+          SearchInput,
           {
-            leading: /* @__PURE__ */ jsx(
-              Avatar,
-              {
-                fallback: member.pending ? "\u2022" : member.initials,
-                alt: member.pending ? "" : member.name
-              }
-            ),
-            title: /* @__PURE__ */ jsx("span", { className: member.pending ? "text-muted-foreground" : void 0, children: member.name }),
-            subtitle: member.handle,
-            action: member.pending ? /* @__PURE__ */ jsx(Badge, { children: "Invited" }) : /* @__PURE__ */ jsx(Badge, { appearance: "outline", children: member.role })
-          },
-          member.id
-        )) }) })
+            ref: searchRef,
+            value: query,
+            onValueChange: setQuery,
+            placeholder: "Search name, email or role",
+            "aria-label": "Search members"
+          }
+        ),
+        /* @__PURE__ */ jsx(Card, { ref: listRef, className: "sable-surface", children: visible.length > 0 ? /* @__PURE__ */ jsx(CardList, { "aria-label": "Members", children: visible.map((m) => {
+          const isSelected = m.id === selectedId;
+          return /* @__PURE__ */ jsx(
+            Entity,
+            {
+              "data-member-id": m.id,
+              "data-selected": isSelected ? "" : void 0,
+              className: "sable-surface-interactive",
+              interactive: true,
+              onSelect: () => select(m.id),
+              leading: /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  fallback: m.pending ? /* @__PURE__ */ jsx(Icon, { name: "mail", className: "size-5" }) : m.initials,
+                  status: m.lastActive === "Online now" ? /* @__PURE__ */ jsx(StatusDot, { tone: "success" }) : void 0,
+                  "aria-hidden": true
+                }
+              ),
+              title: /* @__PURE__ */ jsxs(Fragment, { children: [
+                m.name,
+                isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (selected)" }) : null
+              ] }),
+              subtitle: m.pending ? `${roleLabel[m.role]} \xB7 invite sent ${m.sent?.toLowerCase()}` : `${roleLabel[m.role]} \xB7 ${m.handle}`,
+              action: m.pending ? /* @__PURE__ */ jsx(Badge, { tone: "info", children: "Invited" }) : void 0
+            },
+            m.id
+          );
+        }) }) : /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: /* @__PURE__ */ jsx(Icon, { name: "search" }),
+            title: "No members found",
+            description: `Nobody matches \u201C${query.trim()}\u201D. Try a name, email or role.`,
+            action: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
+              setQuery("");
+              searchRef.current?.focus();
+            }, children: "Clear search" })
+          }
+        ) }) })
       ] }) }),
-      /* @__PURE__ */ jsx(Col, { span: { base: 1, lg: 4 }, children: /* @__PURE__ */ jsx("aside", { className: "sticky top-6", children: /* @__PURE__ */ jsxs(Card, { children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Workspace" }) }),
-        /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsxs(Description, { children: [
-            /* @__PURE__ */ jsx(DescriptionItem, { term: "Members", detail: /* @__PURE__ */ jsx("span", { className: "text-mono-md", children: "5" }) }),
-            /* @__PURE__ */ jsx(DescriptionItem, { term: "Pending invites", detail: /* @__PURE__ */ jsx("span", { className: "text-mono-md", children: "1" }) }),
-            /* @__PURE__ */ jsx(DescriptionItem, { term: "Seats used", detail: /* @__PURE__ */ jsx("span", { className: "text-mono-md", children: "6 / 10" }) })
+      /* @__PURE__ */ jsx(Col, { span: { base: 1, lg: 7 }, className: showDetail ? void 0 : "max-lg:hidden", children: /* @__PURE__ */ jsxs(Stack, { role: "region", "aria-label": "Member details", gap: 3, className: "lg:sticky lg:top-6", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref: backRef,
+            variant: "ghost",
+            size: "sm",
+            iconStart: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" }),
+            onClick: backToList,
+            className: "self-start lg:hidden",
+            children: "All members"
+          }
+        ),
+        selected === null ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            surface: "card",
+            icon: /* @__PURE__ */ jsx(Icon, { name: "user" }),
+            title: "No member selected",
+            description: "Choose someone from the list to see their role and activity."
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Card, { children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    size: "lg",
+                    fallback: selected.pending ? /* @__PURE__ */ jsx(Icon, { name: "mail", className: "size-6" }) : selected.initials,
+                    status: selected.lastActive === "Online now" ? /* @__PURE__ */ jsx(StatusDot, { tone: "success" }) : void 0,
+                    alt: selected.pending ? "Pending invite" : selected.name
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Stack, { gap: 0, className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx(CardTitle, { role: "heading", "aria-level": 2, className: "truncate", children: selected.name }),
+                  /* @__PURE__ */ jsx(CardDescription, { className: "truncate", children: selected.pending ? "Hasn't joined yet" : `${selected.handle} \xB7 ${selected.email}` })
+                ] })
+              ] }),
+              selected.pending ? /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "info", children: "Invited" }) }) : null
+            ] }),
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
+              /* @__PURE__ */ jsx(
+                Field,
+                {
+                  label: selected.pending ? "Role on joining" : "Role",
+                  description: roleSummary[selected.role],
+                  children: /* @__PURE__ */ jsxs(
+                    Select,
+                    {
+                      items: roles,
+                      value: selected.role,
+                      onValueChange: (value) => setRole(selected.id, value),
+                      disabled: selected.role === "owner",
+                      children: [
+                        /* @__PURE__ */ jsx(SelectTrigger, { className: "max-w-72" }),
+                        /* @__PURE__ */ jsx(SelectContent, { children: roles.filter((r) => r.value !== "owner" || selected.role === "owner").map((r) => /* @__PURE__ */ jsx(SelectItem, { value: r.value, children: r.label }, r.value)) })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "@container", children: selected.pending ? /* @__PURE__ */ jsxs("dl", { className: "sable-list-dl sable-list-dl-2", children: [
+                /* @__PURE__ */ jsx("dt", { children: "Sent" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.sent }),
+                /* @__PURE__ */ jsx("dt", { children: "Expires" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.expires }),
+                /* @__PURE__ */ jsx("dt", { children: "Invited by" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.invitedBy })
+              ] }) : /* @__PURE__ */ jsxs("dl", { className: "sable-list-dl sable-list-dl-2", children: [
+                /* @__PURE__ */ jsx("dt", { children: "Email" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.email }),
+                /* @__PURE__ */ jsx("dt", { children: "Joined" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.joined }),
+                /* @__PURE__ */ jsx("dt", { children: "Last active" }),
+                /* @__PURE__ */ jsx("dd", { className: selected.lastActive === "Online now" ? "text-success" : void 0, children: selected.lastActive }),
+                /* @__PURE__ */ jsx("dt", { children: "Editions released" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.editions })
+              ] }) })
+            ] }) }),
+            selected.role !== "owner" ? /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsxs(Row, { gap: 2, wrap: true, children: [
+              selected.pending ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  iconStart: /* @__PURE__ */ jsx(Icon, { name: selected.resent ? "check" : "send" }),
+                  disabled: selected.resent,
+                  onClick: () => resend(selected.id),
+                  children: selected.resent ? "Invite resent" : "Resend invite"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setConfirming(true), children: selected.pending ? "Revoke invite" : "Remove from studio" })
+            ] }) }) : null
           ] }),
-          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "mt-1 self-start", children: "Manage plan" })
+          selected.activity.length > 0 ? /* @__PURE__ */ jsxs(Card, { children: [
+            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { role: "heading", "aria-level": 3, children: "Recent activity" }) }),
+            /* @__PURE__ */ jsx(CardList, { children: selected.activity.map((a) => /* @__PURE__ */ jsx(
+              Entity,
+              {
+                leading: /* @__PURE__ */ jsx(Icon, { name: a.icon, className: "text-muted-foreground" }),
+                title: a.text,
+                subtitle: a.when
+              },
+              a.id
+            )) })
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            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)
+            }
+          )
         ] })
-      ] }) }) })
+      ] }) })
     ] })
   ] });
 }
@@ -830,25 +1874,65 @@ function ListDetailPage() {
 // src/patterns/list-detail-page.meta.ts
 var listDetailPageMeta = {
   name: "ListDetailPage",
-  summary: "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.",
-  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.",
+  summary: "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 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 \u2192 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 \u2014 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 \u2014 muted terms, mono (tabular) values \u2014 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 \u2192 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."
   ],
   a11y: [
-    "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."
   ]
 };
+var sections = [
+  { id: "profile", label: "Profile" },
+  { id: "notifications", label: "Notifications" },
+  { id: "payouts", label: "Payouts" },
+  { id: "account", label: "Account" }
+];
+var timezones = [
+  { value: "europe-london", label: "London (GMT+1)" },
+  { value: "europe-paris", label: "Paris (GMT+2)" },
+  { value: "america-new-york", label: "New York (GMT\u22124)" },
+  { value: "america-los-angeles", label: "Los Angeles (GMT\u22127)" },
+  { value: "asia-tokyo", label: "Tokyo (GMT+9)" }
+];
+var 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 }
+];
+var 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" }
+];
 function SettingsPage() {
-  return /* @__PURE__ */ jsx(
+  const [activeSection, setActiveSection] = useState("profile");
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
     AppShell,
     {
-      header: /* @__PURE__ */ jsx(AppHeader, { title: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" }) }),
+      header: /* @__PURE__ */ jsx(
+        AppHeader,
+        {
+          title: /* @__PURE__ */ jsxs(Row, { gap: 1, align: "center", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-xl" }),
+            /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" })
+          ] }),
+          actions: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "Ada Lovelace" })
+        }
+      ),
       bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
         /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
         /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
@@ -857,55 +1941,181 @@ function SettingsPage() {
         /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", showLabel: true, active: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
       ] }),
       sidebar: /* @__PURE__ */ jsxs(Sidebar, { children: [
-        /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" }) }),
+        /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsxs(Row, { gap: 1, align: "center", className: "px-3", children: [
+          /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-xl" }),
+          /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" })
+        ] }) }),
         /* @__PURE__ */ jsxs(SidebarNav, { children: [
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Collectors", render: /* @__PURE__ */ jsx("a", { href: "/collectors" }) }),
-          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }), label: "Activity", render: /* @__PURE__ */ jsx("a", { href: "/activity" }) }),
+          /* @__PURE__ */ jsx(
+            SidebarItem,
+            {
+              icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }),
+              label: "Activity",
+              badge: /* @__PURE__ */ jsx(NotificationBadge, { count: 4, tone: "neutral" }),
+              render: /* @__PURE__ */ jsx("a", { href: "/activity" })
+            }
+          ),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", active: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
-        ] })
-      ] }),
-      children: /* @__PURE__ */ jsxs(Page, { max: "content", gap: 4, className: "py-6", children: [
-        /* @__PURE__ */ jsx(
-          PageHeader,
+        ] }),
+        /* @__PURE__ */ jsx(SidebarFooter, { className: "[--foreground:var(--sidebar-foreground)]", children: /* @__PURE__ */ jsx(
+          Entity,
           {
-            title: "Settings",
-            description: "Your profile, notifications, and account controls."
+            className: "[--entity-py:0]",
+            leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "" }),
+            title: "Ada Lovelace",
+            action: /* @__PURE__ */ jsxs(DotsMenu, { label: "Account", size: "icon-sm", children: [
+              /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/@ada" }), children: "View profile" }),
+              /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/settings" }), children: "Settings" }),
+              /* @__PURE__ */ jsx(MenuSeparator, {}),
+              /* @__PURE__ */ jsx(MenuItem, { children: "Sign out" })
+            ] })
           }
-        ),
-        /* @__PURE__ */ jsx(Form, { onSubmit: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs(Fieldset, { children: [
-          /* @__PURE__ */ jsx(FieldsetLegend, { children: "Profile" }),
-          /* @__PURE__ */ jsx(FieldsetDescription, { children: "How you appear across the app." }),
-          /* @__PURE__ */ jsxs(FieldsetContent, { children: [
-            /* @__PURE__ */ jsx(Field, { label: "Display name", required: true, children: /* @__PURE__ */ jsx(Input, { name: "displayName", defaultValue: "ada" }) }),
-            /* @__PURE__ */ jsx(Field, { label: "Bio", description: "Shown on your public profile.", children: /* @__PURE__ */ jsx(Textarea, { name: "bio", rows: 3, placeholder: "Tell collectors who you are" }) }),
-            /* @__PURE__ */ jsx(Field, { label: "Timezone", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "utc", name: "timezone", children: [
-              /* @__PURE__ */ jsx(SelectTrigger, {}),
-              /* @__PURE__ */ jsxs(SelectContent, { children: [
-                /* @__PURE__ */ jsx(SelectItem, { value: "utc", children: "UTC" }),
-                /* @__PURE__ */ jsx(SelectItem, { value: "est", children: "Eastern (UTC\u22125)" }),
-                /* @__PURE__ */ jsx(SelectItem, { value: "pst", children: "Pacific (UTC\u22128)" })
+        ) })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs(Page, { max: "wide", gap: 4, className: "py-6", children: [
+          /* @__PURE__ */ jsx(
+            PageHeader,
+            {
+              title: "Settings",
+              description: "Manage your profile, notifications, and payouts."
+            }
+          ),
+          /* @__PURE__ */ jsxs(Columns, { gap: 4, children: [
+            /* @__PURE__ */ jsx(Col, { span: { base: 12, lg: 3 }, className: "hidden lg:block", children: /* @__PURE__ */ jsx(SideNav, { "aria-label": "Settings sections", className: "sticky top-6", children: sections.map((section) => /* @__PURE__ */ jsx(
+              SideNavItem,
+              {
+                label: section.label,
+                active: activeSection === section.id,
+                onClick: () => setActiveSection(section.id),
+                render: /* @__PURE__ */ jsx("a", { href: `#${section.id}` })
+              },
+              section.id
+            )) }) }),
+            /* @__PURE__ */ jsx(Col, { span: { base: 12, lg: 9 }, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+              /* @__PURE__ */ jsxs(Card, { id: "profile", className: "scroll-mt-6", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Profile" }) }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "How collectors see you on Atelier." })
+                ] }),
+                /* @__PURE__ */ jsxs(Form, { onSubmit: (event) => event.preventDefault(), className: "gap-0", children: [
+                  /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+                    /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
+                      /* @__PURE__ */ jsx(Avatar, { size: "lg", fallback: "AL", alt: "Ada Lovelace" }),
+                      /* @__PURE__ */ jsxs(Stack, { gap: 0.5, align: "start", children: [
+                        /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
+                          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", children: "Upload photo" }),
+                          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", children: "Remove" })
+                        ] }),
+                        /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: "Square PNG or JPG, at least 400 px." })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Grid, { cols: { base: 1, sm: 2 }, gap: 3, children: [
+                      /* @__PURE__ */ jsx(Field, { label: "Display name", name: "displayName", required: true, children: /* @__PURE__ */ jsx(Input, { defaultValue: "Ada Lovelace", autoComplete: "name" }) }),
+                      /* @__PURE__ */ jsx(Field, { label: "Handle", name: "handle", description: "atelier.com/@ada", required: true, children: /* @__PURE__ */ jsx(Input, { defaultValue: "ada", autoComplete: "username", spellCheck: false }) })
+                    ] }),
+                    /* @__PURE__ */ jsx(Field, { label: "Bio", name: "bio", description: "Shown on your profile and edition pages.", children: /* @__PURE__ */ jsx(
+                      Textarea,
+                      {
+                        rows: 3,
+                        defaultValue: "Generative artist working in plotted ink and code. New editions of 25 to 100 every month."
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 2 }, gap: 3, children: /* @__PURE__ */ jsx(Field, { label: "Timezone", name: "timezone", description: "Release times use this zone.", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "europe-london", items: timezones, children: [
+                      /* @__PURE__ */ jsx(SelectTrigger, {}),
+                      /* @__PURE__ */ jsx(SelectContent, { children: timezones.map((zone) => /* @__PURE__ */ jsx(SelectItem, { value: zone.value, children: zone.label }, zone.value)) })
+                    ] }) }) })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(CardFooter, { className: "justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save profile" }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { id: "notifications", className: "scroll-mt-6", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Notifications" }) }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Email updates about your editions. Changes save automatically." })
+                ] }),
+                /* @__PURE__ */ jsx(CardList, { children: notifications.map((item) => /* @__PURE__ */ jsx(
+                  Entity,
+                  {
+                    title: item.title,
+                    subtitle: item.description,
+                    action: /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        name: item.name,
+                        defaultChecked: item.on,
+                        "aria-label": item.title
+                      }
+                    )
+                  },
+                  item.name
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { id: "payouts", className: "scroll-mt-6", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Payouts" }) }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Paid in USD every Friday to Chase checking \u2022\u20224821." }),
+                  /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/settings/payouts" }), children: "Manage payouts" }) })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 3 }, gap: 3, children: payouts.map((stat) => /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: stat.label }),
+                  /* @__PURE__ */ jsx("p", { className: "text-mono-lg text-foreground", children: stat.value }),
+                  /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: stat.note })
+                ] }, stat.label)) }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { id: "account", className: "scroll-mt-6", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Account" }) }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Sign-in details and your data." })
+                ] }),
+                /* @__PURE__ */ jsxs(CardList, { children: [
+                  /* @__PURE__ */ jsx(
+                    Entity,
+                    {
+                      leading: /* @__PURE__ */ jsx(Icon, { name: "mail", className: "text-lg text-muted-foreground" }),
+                      title: "Email",
+                      subtitle: "ada@atelier.art",
+                      action: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Change" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Entity,
+                    {
+                      leading: /* @__PURE__ */ jsx(Icon, { name: "download", className: "text-lg text-muted-foreground" }),
+                      title: "Export data",
+                      subtitle: "Editions, sales, and collectors",
+                      action: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Export" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Delete account" }) }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Permanently remove your profile, editions, and sales history. Collectors keep the editions they own." })
+                ] }),
+                /* @__PURE__ */ jsx(CardFooter, { className: "justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => setDeleteOpen(true), children: "Delete account" }) })
               ] })
             ] }) })
-          ] }),
-          /* @__PURE__ */ jsx(FieldsetFooter, { children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save profile" }) })
-        ] }) }),
-        /* @__PURE__ */ jsx(Form, { onSubmit: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs(Fieldset, { children: [
-          /* @__PURE__ */ jsx(FieldsetLegend, { children: "Notifications" }),
-          /* @__PURE__ */ jsx(FieldsetDescription, { children: "What we email you about." }),
-          /* @__PURE__ */ jsxs(FieldsetContent, { children: [
-            /* @__PURE__ */ jsx(Field, { label: "New collector alerts", orientation: "horizontal", children: /* @__PURE__ */ jsx(Switch, { name: "collectorAlerts", defaultChecked: true }) }),
-            /* @__PURE__ */ jsx(Field, { label: "Weekly digest", orientation: "horizontal", children: /* @__PURE__ */ jsx(Switch, { name: "weeklyDigest" }) })
-          ] }),
-          /* @__PURE__ */ jsx(FieldsetFooter, { children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save notifications" }) })
-        ] }) }),
-        /* @__PURE__ */ jsxs(Fieldset, { children: [
-          /* @__PURE__ */ jsx(FieldsetLegend, { children: "Danger zone" }),
-          /* @__PURE__ */ jsx(FieldsetDescription, { children: "Deleting your account removes your posts and collections permanently." }),
-          /* @__PURE__ */ jsx(FieldsetFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "destructive", children: "Delete account" }) })
-        ] })
-      ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          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\u2026",
+            confirmText: "ada",
+            onConfirm: () => setDeleteOpen(false)
+          }
+        )
+      ]
     }
   );
 }
@@ -913,21 +2123,25 @@ function SettingsPage() {
 // src/patterns/settings-page.meta.ts
 var settingsPageMeta = {
   name: "SettingsPage",
-  summary: "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.",
+  summary: "Account settings inside the app shell: a sticky SideNav section rail beside a column of section Cards \u2014 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 \u2014 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` \u2014 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."
   ],
   a11y: [
     '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 \u2014 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."
   ]
 };