@sableui/react 0.9.0 → 0.10.0

package/llms/components/tooltip.md

@@ -73,7 +73,7 @@ Use Tooltip for brief nonessential hints tied to a specific control or piece of
 ```tsx
 import { Button, Icon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@sableui/react"
 
-<TooltipProvider><Tooltip><TooltipTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button>} /><TooltipContent>Stored permanently on Arweave.</TooltipContent></Tooltip></TooltipProvider>
+<TooltipProvider><Tooltip><TooltipTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button>} /><TooltipContent>Saved to your workspace.</TooltipContent></Tooltip></TooltipProvider>
 ```
 
 ### Sides
@@ -89,5 +89,5 @@ import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@sableui/react"
 ```tsx
 import { Button, Icon, SimpleTooltip } from "@sableui/react"
 
-<SimpleTooltip content="Stored permanently on Arweave."><Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button></SimpleTooltip>
+<SimpleTooltip content="Saved to your workspace."><Button variant="ghost" size="icon-sm" aria-label="Info"><Icon name="info" /></Button></SimpleTooltip>
 ```

package/llms/foundations/spacing.md

@@ -1,8 +1,8 @@
 # Spacing & sizing
 
-One 4px scale governs every gap, inset and size, and space is assigned by role. Controls read a height ladder that a density scope can retune all at once.
+One scale, derived from the type: the baseline is one line of body text, split into steps every gap, inset and line height lands on. Space is assigned by role. Controls read a height ladder that a density scope can retune all at once.
 
-**4px base · 8px rhythm · 3 roles · 1 control ladder**
+**Baseline from the type · 8px steps · 3 roles · 1 control ladder**
 
 ## Spacing by role
 
@@ -11,8 +11,8 @@ Steps below 2 (8px) are optical correction only.
 | Name | Value | Use |
 |---|---|---|
 | `Inset  p-4` | 16px | Padding inside a surface. p-3 for a dense card, px-3 py-2 for a row. |
-| `Stack, within a group  gap-1.5 – gap-2` | 6–8px | Label to field, title to description. |
-| `Stack, between groups  gap-4 – gap-6` | 16–24px | Field to field, card to card. |
+| `Stack, within a group  gap-2` | 1 step · 8px | Label to field, title to description. |
+| `Stack, between groups  gap-4 – gap-6` | 2–3 steps · 16–24px | Field to field, card to card. |
 | `Stack, between sections  gap-12+` | 48px+ | Major regions of a page. |
 | `Inline  gap-2 – gap-3` | 8–12px | Icon to label, control to control. |
 
@@ -38,8 +38,8 @@ Comfortable values; data-density="compact" (or <Density>) redefines every step f
 
 ## Rules
 
-1. **Every margin, padding and gap is a step on the 4px scale.** Off-scale values break the rhythm that lets adjacent components line up without coordination.
-2. **Padding, gaps and insets in a component sit on the spacing scale: a step (p-4, gap-2) or --spacing(n) inside an arbitrary value (p-[var(--card-p,--spacing(6))]).** The density (Character) control works by retuning --spacing, so anything on the scale moves with it. A literal p-[1.5rem] or padding: "12px" stays put while everything around it tightens. Keep fixed rem/px for what must not scale: a 1px hairline, a ring width. *Enforced by design-lint: fixed-spacing (library source).*
+1. **Every margin, padding and gap is a step on the scale, and vertical space between blocks is whole baseline steps: an even Tailwind step (2, 4, 6, 8, 12) or a Stack/Row/Grid gap number.** The baseline is one line of body text split into steps; line heights round to it. An odd step (3, 5) is half a baseline step. It is a rhythm to keep, not a grid to force: components stay as tall as their content.
+2. **Padding, gaps and insets in a component sit on the spacing scale: a step (p-4, gap-2) or --spacing(n) inside an arbitrary value (p-[var(--card-p,--spacing(6))]).** --spacing derives from the baseline step and the density (Character) control moves the leading it comes from, so anything on the scale moves with it. A literal p-[1.5rem] or padding: "12px" stays put while everything around it tightens. Keep fixed rem/px for what must not scale: a 1px hairline, a ring width. *Enforced by design-lint: fixed-spacing (library source).*
 3. **Related things sit closer than unrelated things.** Proximity groups content without a divider line. Use space first; reach for a border only when space is not enough.
 4. **Space lives on the container (gap), not on children (margins).** gap survives reordering, conditional children and RTL; per-child margins do not.
 5. **Control heights read the --control-* ladder.** A density scope retunes every control at once. A hardcoded height has to be found and overridden by hand. *Enforced by sable-lint: raw-control-height.*
@@ -77,6 +77,6 @@ Every control, menu and popup inside retunes, including portaled overlays.
 <Stack gap={3}> between groups (24px), <Stack gap={1}> inside a group (8px)
 ```
 
-Two spacing steps do the work of every divider, with less ink. Stack's numeric gap counts --rhythm-unit — two spacing steps — so it follows the density control like every other spacing value.
+Spacing steps do the work of every divider, with less ink. Stack's numeric gap counts --rhythm-unit — one baseline step — so it follows the type and the density control like every other spacing value.
 
 **Related:** `sable docs shape` · `sable docs typography` · `sable docs building-a-tool` · `sable token layout`

package/llms/layout/grid.md

@@ -64,5 +64,5 @@ import { Card, CardDescription, CardHeader, Grid } from "@sableui/react"
 ```tsx
 import { Badge, Grid } from "@sableui/react"
 
-<Grid cols={{ base: 1, md: 2, lg: 4 }}><Badge appearance="plain" tone="standard" dot /><Badge appearance="plain" tone="warning" dot /><Badge appearance="plain" tone="neutral" dot /><Badge appearance="plain" tone="destructive" dot /></Grid>
+<Grid cols={{ base: 1, md: 2, lg: 4 }}><Badge appearance="plain" tone="3" dot /><Badge appearance="plain" tone="warning" dot /><Badge appearance="plain" tone="neutral" dot /><Badge appearance="plain" tone="destructive" dot /></Grid>
 ```

package/llms/layout/page.md

@@ -35,5 +35,5 @@ Use Page as a route content shell that combines Region sizing with vertical rhyt
 ```tsx
 import { Card, CardContent, Page, PageHeader } from "@sableui/react"
 
-<Page as="main" max="feed"><PageHeader title="Home" description="Latest posts from artists you follow." /><Card><CardContent><p className="text-body-md">First post.</p></CardContent></Card></Page>
+<Page as="main" max="feed"><PageHeader title="Home" description="Latest posts from people you follow." /><Card><CardContent><p className="text-body-md">First post.</p></CardContent></Card></Page>
 ```

package/llms/layout/region.md

@@ -50,7 +50,7 @@ import { PageHeader, Region } from "@sableui/react"
 ```tsx
 import { Card, CardHeader, CardTitle, Grid, Region } from "@sableui/react"
 
-<Region max="wide"><Grid minItemWidth="16rem"><Card><CardHeader><CardTitle>Revenue</CardTitle></CardHeader></Card><Card><CardHeader><CardTitle>Collects</CardTitle></CardHeader></Card></Grid></Region>
+<Region max="wide"><Grid minItemWidth="16rem"><Card><CardHeader><CardTitle>Revenue</CardTitle></CardHeader></Card><Card><CardHeader><CardTitle>Orders</CardTitle></CardHeader></Card></Grid></Region>
 ```
 
 ### Fluid workspace: the queue's table takes the extra width

package/llms/layout/split-pane.md

@@ -37,5 +37,5 @@ Use SplitPane for responsive two-pane layouts where a primary pane and supportin
 ```tsx
 import { AspectBox, Button, SplitPane, Stack } from "@sableui/react"
 
-<SplitPane ratio="2/1" primary={<AspectBox ratio={1}><img src={post.imageUrl} alt={post.title} className="size-full object-cover" /></AspectBox>} secondary={<Stack gap={2}><h1 className="text-heading-1">{post.title}</h1><p className="text-body-md text-muted-foreground">{post.description}</p><Button>Collect</Button></Stack>} />
+<SplitPane ratio="2/1" primary={<AspectBox ratio={1}><img src={post.imageUrl} alt={post.title} className="size-full object-cover" /></AspectBox>} secondary={<Stack gap={2}><h1 className="text-heading-1">{post.title}</h1><p className="text-body-md text-muted-foreground">{post.description}</p><Button>Add to cart</Button></Stack>} />
 ```

package/llms/patterns/auth-page.md

@@ -1,6 +1,6 @@
 # AuthPage
 
-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.
+Split sign-in page: a form column (brand mark, heading, email + password, primary sign-in, passkey and email-link alternatives, sign-up switch, terms) beside a brand panel painted from the theme's tones with a customer story 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).
 
@@ -11,14 +11,14 @@ Split sign-in page: a form column (brand mark, heading, email + password, primar
 - The heading is `text-heading-1` in an h1 — it is the page outline, so it takes a heading tier, not a card title.
 - Brand mark, form and terms are a three-part column: mark pinned to the top, form vertically centred in the remaining space, terms pinned to the bottom.
 - Forgot password sits under the password field, right-aligned, before the submit button — so it comes right after the field in tab order. Field has no label-row action slot yet.
-- One primary action. Passkey and wallet are outline buttons under an `or` Separator; switching to sign-up is a quiet `link-underline` link.
+- One primary action. Passkey and email link are outline buttons under an `or` Separator; switching to sign-up is a quiet `link-underline` link.
 - Validation uses Field `validate` for product copy instead of the browser's generic required message. A rejected sign-in comes back through Form `errors` on the password field; the submit Button shows `loading` while the request is in flight.
 - The brand panel artwork is a mesh of the theme's decorative tones over `--primary`, so it re-paints for every theme and mode. The relative-colour `oklch(from var(--tone-*) …)` lift needs an `inline-color` disable with a reason.
 - The panel is `hidden lg:flex`: on a phone the form is the whole screen, with no decorative scroll above it.
 
 ## Accessibility
 
-- The route renders inside <main> with one h1; the brand panel is an <aside> labelled "Featured release".
+- The route renders inside <main> with one h1; the brand panel is an <aside> labelled "Customer story".
 - 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.
@@ -49,7 +49,7 @@ export function AuthPage() {
 						<Stack gap={1.5}>
 							<h1 className="text-heading-1">Welcome back</h1>
 							<p className="text-body-lg text-muted-foreground">
-								Sign in to collect new releases and manage your editions.
+								Sign in to pick up where you and your team left off.
 							</p>
 						</Stack>
 
@@ -87,8 +87,8 @@ export function AuthPage() {
 							<Button variant="outline" size="cta" className="w-full" iconStart={<Icon name="key" />}>
 								Sign in with a passkey
 							</Button>
-							<Button variant="outline" size="cta" className="w-full" iconStart={<Icon name="wallet" />}>
-								Connect a wallet
+							<Button variant="outline" size="cta" className="w-full" iconStart={<Icon name="mail" />}>
+								Email me a sign-in link
 							</Button>
 						</Stack>
 
@@ -115,23 +115,23 @@ export function AuthPage() {
 			</Region>
 
 			{/* The brand panel is decoration: on a phone the form is the whole screen. */}
-			<aside aria-label="Featured release" className="hidden p-3 lg:flex">
+			<aside aria-label="Customer story" className="hidden p-3 lg:flex">
 				{/* Art painted from the theme's tones over its brand, so it follows every look. */}
 				<GradientArt seed="Untitled (gold rush)" className="flex flex-1 flex-col justify-end rounded-xl p-8">
 					<Card className="max-w-md">
 						<CardContent>
 							<Stack gap={3}>
-								<Badge tone="edition" className="self-start">
-									Edition of 50
+								<Badge tone="1" className="self-start">
+									Customer story
 								</Badge>
 								<p className="text-title-lg">
-									“Every edition is a conversation with whoever holds it next.”
+									“We moved three teams over in a week, and nobody asked for the old tool back.”
 								</p>
 								<Entity
 									className="p-0"
 									leading={<Avatar variant="art" fallback="MO" />}
 									title="Mara Okafor"
-									subtitle="Untitled (gold rush), 2026"
+									subtitle="Head of Design, Northwind"
 								/>
 							</Stack>
 						</CardContent>

package/llms/patterns/brand-landing-page.md

@@ -45,7 +45,7 @@ const spaces = [
 
 const routes = [
 	{ label: "Intake", state: "Open", tone: "info" as const },
-	{ label: "Review", state: "Live", tone: "edition" as const },
+	{ label: "Review", state: "Live", tone: "1" as const },
 	{ label: "Archive", state: "Safe", tone: "success" as const },
 ]
 
@@ -223,7 +223,7 @@ export function BrandLandingPage() {
 									<div className="flex items-center justify-between border-b border-border px-4 py-3">
 										<Row gap={1}>
 											<StatusDot tone="warning" />
-											<StatusDot tone="edition" />
+											<StatusDot tone="1" />
 											<StatusDot tone="success" />
 										</Row>
 										<span className="text-label-sm text-muted-foreground">Live workspace</span>

package/llms/patterns/chat-panel.md

@@ -95,7 +95,7 @@ export function ChatPanel() {
 				render={<section aria-labelledby="chat-title" />}
 				className="flex h-[calc(100dvh_-_--spacing(12))] flex-col overflow-hidden"
 			>
-				<CardHeader className="border-b border-border pb-(--card-p)">
+				<CardHeader className="pb-(--card-p) shadow-[inset_0_-1px_0_var(--border)]">
 					{/* CardTitle carries the type; the h1 inside it is the page heading. */}
 					<CardTitle>
 						<h1 id="chat-title">Scroll behaviour</h1>
@@ -234,7 +234,7 @@ export function ChatPanel() {
 					</Message>
 				</MessageScroller>
 
-				<CardFooter className="border-t border-border pt-(--card-p)">
+				<CardFooter className="pt-(--card-p) shadow-[inset_0_1px_0_var(--border)]">
 					<ChatComposer
 						className="flex-1"
 						placeholder="Ask a follow-up…"

package/llms/patterns/dashboard-page.md

@@ -1,17 +1,17 @@
 # DashboardPage
 
-App-shell creator dashboard: a branded Sidebar with an account footer (AppHeader + BottomNav below lg), a KPI row, an edge-to-edge editions table with sell-through Meters, and supporting payout, collector, release and activity cards — the default shape for an operator or analytics home route.
+App-shell admin dashboard: a branded Sidebar with an account footer (AppHeader + BottomNav below lg), a KPI row, an edge-to-edge accounts table with seat-usage Meters, and supporting payout, top-customer, release and activity cards — the default shape for an operator or analytics home route.
 
-**Intent:** Reach for this when a route's job is monitoring or managing many records (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).
+**Intent:** Reach for this when a route's job is monitoring or managing many records (sales, orders, accounts, 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.
-- Hierarchy runs headline → records → context: KPI row, then the primary table beside its two closest companions (payout, top collectors), then the lower-priority lists (upcoming, activity). Every row of the grid is filled so the route ends on content, not empty canvas.
+- Hierarchy runs headline → records → context: KPI row, then the primary table beside its two closest companions (payout, top customers), then the lower-priority lists (upcoming, activity). Every row of the grid is filled so the route ends on content, not empty canvas.
 - Stat cards: CardHeader carries the label (CardDescription) and the value; KPI values are `text-mono-xl` — the metric mono tier, tabular figures — never a heading tier. The trend Badge sits with its comparison note in CardContent, so the value keeps the full card width when the row folds to 2×2 on a phone.
 - Stat cards use an explicit cols map (2 → 4) — a 4-stat row must fold to 2×2, never strand an orphan the way auto-fit can.
 - The table runs flush to the card edges with `<CardContent flush>`, which hands the card's padding to the table (`--table-edge-px`), so the first and last columns line up with the CardHeader at any card density — never hand-set pl-6/pr-6. Numeric columns align end in mono; Table scrolls horizontally inside the card on narrow screens.
-- Sold / supply is a `Meter` (how full a known range is), not `Progress` (task progress). Status is `Badge appearance="plain" dot`, with the app's own states mapped to tones once at the top of the file.
+- Seats used / seats is a `Meter` (how full a known range is), not `Progress` (task progress). Status is `Badge appearance="plain" dot`, with the app's own states mapped to tones once at the top of the file.
 - Lists are Entity rows in CardList, inset to the card padding and divided by hairlines — never CardContent with hand-tuned px. A card that shares a grid row with a taller one becomes `flex flex-col` and pins its CardFooter with `mt-auto`.
 - Brand and account live in the Sidebar: SidebarHeader holds the mark + wordmark, SidebarFooter holds the signed-in Entity with an OverflowMenu. Sidebar rebinds the page ink tokens to its own, so the Entity and OverflowMenu read correctly even when a theme paints the rail dark on a light page.
 - The page has exactly one heading-1 (PageHeader); card titles are Title tier, not headings.
@@ -23,7 +23,7 @@ App-shell creator dashboard: a branded Sidebar with an account footer (AppHeader
 - AppShell provides the skip link and <main id="main-content"> landmark.
 - The active SidebarItem and BottomNavItem carry aria-current via `active`.
 - DataTable headers are real <th>; sortable columns are announced.
-- Each sell-through Meter has an aria-label naming the edition and aria-valuetext reading "184 of 250 sold".
+- Each seat-usage Meter has an aria-label naming the account and aria-valuetext reading "184 of 250 seats used".
 - Avatars beside a visible name use an empty alt so the name is not read twice.
 
 ## Source
@@ -31,11 +31,11 @@ App-shell creator dashboard: a branded Sidebar with an account footer (AppHeader
 ```tsx
 import { AppHeader, AppShell, Avatar, Badge, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, DataTable, Entity, Grid, Icon, MenuItem, MenuSeparator, Meter, NotificationBadge, OverflowMenu, Page, PageHeader, RelativeTime, Row, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Stack } from "@sableui/react"
 
-// Edition status → Badge tone. Sable has no status vocabulary of its own;
+// Account status → Badge tone. Sable has no status vocabulary of its own;
 // an app maps ITS states onto tones once, here, and every badge follows.
-const STATUS_TONE = { live: "success", scheduled: "info", "sold-out": "edition", closed: "neutral" } as const
-const STATUS_LABEL = { live: "Live", scheduled: "Scheduled", "sold-out": "Sold out", closed: "Closed" } as const
-type EditionStatus = keyof typeof STATUS_TONE
+const STATUS_TONE = { active: "success", onboarding: "info", full: "1", cancelled: "neutral" } as const
+const STATUS_LABEL = { active: "Active", onboarding: "Onboarding", full: "Seats full", cancelled: "Cancelled" } as const
+type AccountStatus = keyof typeof STATUS_TONE
 
 const MIN = 60 * 1000
 const HOUR = 60 * MIN
@@ -48,54 +48,54 @@ const shortDate = (offset: number) =>
 
 const stats = [
 	{ label: "Revenue", value: "$18,240", delta: "+8.2%", up: true, note: "vs. $16,857" },
-	{ label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 first-time" },
-	{ label: "Collectors", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
-	{ label: "Sell-through", value: "64%", delta: "−1.8%", up: false, note: "6 open editions" },
+	{ label: "Active seats", value: "1,284", delta: "+3.1%", up: true, note: "182 added" },
+	{ label: "Accounts", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
+	{ label: "Seat usage", value: "64%", delta: "−1.8%", up: false, note: "6 near their limit" },
 ]
 
-const editions = [
-	{ id: "ed_01", title: "Gold Rush", status: "live" as const, sold: 184, supply: 250, price: 48, released: -6 * DAY },
-	{ id: "ed_02", title: "Quiet Harbor", status: "sold-out" as const, sold: 100, supply: 100, price: 120, released: -19 * DAY },
-	{ id: "ed_03", title: "Dusk, no. 4", status: "live" as const, sold: 61, supply: 150, price: 64, released: -2 * DAY },
-	{ id: "ed_04", title: "Tidewater", status: "live" as const, sold: 212, supply: 300, price: 36, released: -27 * DAY },
-	{ id: "ed_05", title: "Salt Study", status: "closed" as const, sold: 38, supply: 75, price: 90, released: -44 * DAY },
-	{ id: "ed_06", title: "Paper Moon", status: "sold-out" as const, sold: 50, supply: 50, price: 220, released: -58 * DAY },
-	{ id: "ed_07", title: "Night Signal", status: "scheduled" as const, sold: 0, supply: 200, price: 56, released: 3 * DAY },
-	{ id: "ed_08", title: "Low Tide, Blue", status: "closed" as const, sold: 72, supply: 120, price: 42, released: -71 * DAY },
-	{ id: "ed_09", title: "Ember Field", status: "sold-out" as const, sold: 80, supply: 80, price: 140, released: -86 * DAY },
+const accounts = [
+	{ id: "ac_01", title: "Northwind", status: "active" as const, used: 184, seats: 250, price: 16, started: -6 * DAY },
+	{ id: "ac_02", title: "Harbor Labs", status: "full" as const, used: 100, seats: 100, price: 20, started: -19 * DAY },
+	{ id: "ac_03", title: "Brightline", status: "active" as const, used: 61, seats: 150, price: 16, started: -2 * DAY },
+	{ id: "ac_04", title: "Tidewater Co.", status: "active" as const, used: 212, seats: 300, price: 12, started: -27 * DAY },
+	{ id: "ac_05", title: "Saltworks", status: "cancelled" as const, used: 38, seats: 75, price: 20, started: -44 * DAY },
+	{ id: "ac_06", title: "Paper Moon", status: "full" as const, used: 50, seats: 50, price: 24, started: -58 * DAY },
+	{ id: "ac_07", title: "Signal Studio", status: "onboarding" as const, used: 0, seats: 200, price: 16, started: 3 * DAY },
+	{ id: "ac_08", title: "Bluewater", status: "cancelled" as const, used: 72, seats: 120, price: 12, started: -71 * DAY },
+	{ id: "ac_09", title: "Ember & Field", status: "full" as const, used: 80, seats: 80, price: 20, started: -86 * DAY },
 ]
-const editionCount = 24
+const accountCount = 312
 
 const payout = {
-	amount: 8214.6,
+	amount: 8862.64,
 	date: 5 * DAY,
 	lines: [
-		{ label: "Sales", value: 9127.33 },
-		{ label: "Platform fee (10%)", value: -912.73 },
+		{ label: "Subscriptions", value: 9127.33 },
+		{ label: "Processing (2.9%)", value: -264.69 },
 		{ label: "Deposits to", value: "Checking ••4821" },
 	],
 }
 
-const collectors = [
-	{ id: "co_01", name: "Nina Simone", handle: "@nina", initials: "NS", pieces: 14, spent: 1460 },
-	{ id: "co_02", name: "Grace Hopper", handle: "@grace", initials: "GH", pieces: 11, spent: 1128 },
-	{ id: "co_03", name: "Frida Kahlo", handle: "@frida", initials: "FK", pieces: 9, spent: 942 },
-	{ id: "co_04", name: "Mary Shelley", handle: "@mary", initials: "MS", pieces: 6, spent: 588 },
+const customers = [
+	{ id: "cu_01", name: "Northwind", handle: "northwind.io", initials: "NW", seats: 184, spent: 2944 },
+	{ id: "cu_02", name: "Tidewater Co.", handle: "tidewater.co", initials: "TC", seats: 212, spent: 2544 },
+	{ id: "cu_03", name: "Harbor Labs", handle: "harborlabs.com", initials: "HL", seats: 100, spent: 2000 },
+	{ id: "cu_04", name: "Ember & Field", handle: "emberfield.com", initials: "EF", seats: 80, spent: 1600 },
 ]
 
 const upcoming = [
-	{ id: "up_01", title: "Night Signal", detail: "Edition of 200 · $56", at: 3 * DAY },
-	{ id: "up_02", title: "Tidewater, second printing", detail: "Edition of 100 · $40", at: 12 * DAY },
-	{ id: "up_03", title: "Dusk, no. 5", detail: "Edition of 150 · $64", at: 26 * DAY },
-	{ id: "up_04", title: "Quiet Harbor, artist proofs", detail: "Edition of 10 · $480", at: 34 * DAY },
+	{ id: "up_01", title: "Version 2.4", detail: "Shared reports · All plans", at: 3 * DAY },
+	{ id: "up_02", title: "Audit log export", detail: "Business plan · Beta", at: 12 * DAY },
+	{ id: "up_03", title: "Version 2.5", detail: "Offline mode · All plans", at: 26 * DAY },
+	{ id: "up_04", title: "Usage-based billing", detail: "Studio and Business · Beta", at: 34 * DAY },
 ]
 
 const activity = [
-	{ id: "ac_01", who: "Nina Simone", initials: "NS", what: "collected Gold Rush · 185 of 250", when: 2 * MIN },
-	{ id: "ac_02", who: "Grace Hopper", initials: "GH", what: "collected Dusk, no. 4 · 61 of 150", when: 26 * MIN },
-	{ id: "ac_03", who: "Frida Kahlo", initials: "FK", what: "tipped $20 on Tidewater", when: 1 * HOUR },
-	{ id: "ac_04", who: "Mary Shelley", initials: "MS", what: "started following you", when: 3 * HOUR },
-	{ id: "ac_05", who: "Nina Simone", initials: "NS", what: "set a reminder for Night Signal", when: 6 * HOUR },
+	{ id: "ev_01", who: "Nina Simone", initials: "NS", what: "added 12 seats to Northwind · 184 of 250", when: 2 * MIN },
+	{ id: "ev_02", who: "Grace Hopper", initials: "GH", what: "upgraded Brightline to Studio", when: 26 * MIN },
+	{ id: "ev_03", who: "Frida Kahlo", initials: "FK", what: "paid invoice INV-0042 for Tidewater Co.", when: 1 * HOUR },
+	{ id: "ev_04", who: "Mary Shelley", initials: "MS", what: "joined the Harbor Labs workspace", when: 3 * HOUR },
+	{ id: "ev_05", who: "Nina Simone", initials: "NS", what: "booked onboarding for Signal Studio", when: 6 * HOUR },
 ]
 
 export function DashboardPage() {
@@ -117,8 +117,8 @@ export function DashboardPage() {
 			bottomNav={
 				<BottomNav aria-label="Primary">
 					<BottomNavItem icon={<Icon name="grid" />} label="Overview" showLabel active render={<a href="/" />} />
-					<BottomNavItem icon={<Icon name="image-stack" />} label="Editions" showLabel render={<a href="/editions" />} />
-					<BottomNavItem icon={<Icon name="user" />} label="Collectors" showLabel render={<a href="/collectors" />} />
+					<BottomNavItem icon={<Icon name="folder" />} label="Accounts" showLabel render={<a href="/accounts" />} />
+					<BottomNavItem icon={<Icon name="user" />} label="Customers" showLabel render={<a href="/customers" />} />
 					<BottomNavItem icon={<Icon name="bell" />} label="Activity" showLabel render={<a href="/activity" />} />
 					<BottomNavItem icon={<Icon name="gear" />} label="Settings" showLabel render={<a href="/settings" />} />
 				</BottomNav>
@@ -130,8 +130,8 @@ export function DashboardPage() {
 					</SidebarHeader>
 					<SidebarNav>
 						<SidebarItem icon={<Icon name="grid" />} label="Overview" active render={<a href="/" />} />
-						<SidebarItem icon={<Icon name="image-stack" />} label="Editions" render={<a href="/editions" />} />
-						<SidebarItem icon={<Icon name="user" />} label="Collectors" render={<a href="/collectors" />} />
+						<SidebarItem icon={<Icon name="folder" />} label="Accounts" render={<a href="/accounts" />} />
+						<SidebarItem icon={<Icon name="user" />} label="Customers" render={<a href="/customers" />} />
 						<SidebarItem
 							icon={<Icon name="bell" />}
 							label="Activity"
@@ -162,7 +162,7 @@ export function DashboardPage() {
 			<Page max="wide" gap={4} className="py-6">
 				<PageHeader
 					title="Overview"
-					description="Sales and collector activity for the last 30 days."
+					description="Revenue and account activity for the last 30 days."
 					actions={
 						<Row gap={2}>
 							<Button variant="outline">
@@ -171,7 +171,7 @@ export function DashboardPage() {
 							</Button>
 							<Button>
 								<Icon name="plus" />
-								New edition
+								New account
 							</Button>
 						</Row>
 					}
@@ -201,43 +201,43 @@ export function DashboardPage() {
 				<Grid cols={{ base: 1, xl: 3 }} gap={3}>
 					<Card className="flex flex-col xl:col-span-2">
 						<CardHeader>
-							<CardTitle>Editions</CardTitle>
-							<CardDescription>Sales across your releases, newest first.</CardDescription>
+							<CardTitle>Accounts</CardTitle>
+							<CardDescription>Seats across your customers, newest first.</CardDescription>
 						</CardHeader>
 						<CardContent flush className="mt-4 flex-1">
 							<DataTable
-								data={editions}
+								data={accounts}
 								rowKey={(row) => row.id}
-								defaultSort={{ key: "released", direction: "desc" }}
+								defaultSort={{ key: "started", direction: "desc" }}
 								columns={[
-									{ key: "title", header: "Edition", sortable: true, className: "text-label-md whitespace-nowrap" },
+									{ key: "title", header: "Account", sortable: true, className: "text-label-md whitespace-nowrap" },
 									{
 										key: "status",
 										header: "Status",
 										cell: (row) => (
-											<Badge appearance="plain" tone={STATUS_TONE[row.status as EditionStatus]} dot>
-												{STATUS_LABEL[row.status as EditionStatus]}
+											<Badge appearance="plain" tone={STATUS_TONE[row.status as AccountStatus]} dot>
+												{STATUS_LABEL[row.status as AccountStatus]}
 											</Badge>
 										),
 									},
 									{
-										key: "sold",
-										header: "Sold",
+										key: "used",
+										header: "Seats",
 										sortable: true,
-										sortValue: (row) => row.sold / row.supply,
+										sortValue: (row) => row.used / row.seats,
 										cell: (row) => (
 											<Row gap={3} align="center" className="min-w-40">
 												<Meter
-													value={row.sold}
-													max={row.supply}
+													value={row.used}
+													max={row.seats}
 													size="sm"
-													tone={row.sold === row.supply ? "success" : "primary"}
-													aria-label={`${row.title} sold`}
-													getAriaValueText={(_, v) => `${v} of ${row.supply} sold`}
+													tone={row.used === row.seats ? "success" : "primary"}
+													aria-label={`${row.title} seats used`}
+													getAriaValueText={(_, v) => `${v} of ${row.seats} seats used`}
 													className="flex-1"
 												/>
 												<span className="text-mono-caption whitespace-nowrap text-muted-foreground">
-													{row.sold}/{row.supply}
+													{row.used}/{row.seats}
 												</span>
 											</Row>
 										),
@@ -247,21 +247,21 @@ export function DashboardPage() {
 										header: "Revenue",
 										align: "end",
 										sortable: true,
-										sortValue: (row) => row.sold * row.price,
+										sortValue: (row) => row.used * row.price,
 										cell: (row) =>
-											row.sold > 0 ? (
-												<span className="text-mono-sm">{usd.format(row.sold * row.price)}</span>
+											row.used > 0 ? (
+												<span className="text-mono-sm">{usd.format(row.used * row.price)}</span>
 											) : (
 												<span className="text-mono-sm text-muted-foreground">—</span>
 											),
 									},
 									{
-										key: "released",
-										header: "Release",
+										key: "started",
+										header: "Started",
 										align: "end",
 										sortable: true,
 										cell: (row) => (
-											<span className="text-body-sm whitespace-nowrap text-muted-foreground">{shortDate(row.released)}</span>
+											<span className="text-body-sm whitespace-nowrap text-muted-foreground">{shortDate(row.started)}</span>
 										),
 									},
 								]}
@@ -269,10 +269,10 @@ export function DashboardPage() {
 						</CardContent>
 						<CardFooter className="justify-between">
 							<span className="text-caption text-muted-foreground">
-								Showing {editions.length} of {editionCount} editions
+								Showing {accounts.length} of {accountCount} accounts
 							</span>
-							<Button variant="ghost" size="sm" bleed="end" render={<a href="/editions" />}>
-								View all editions
+							<Button variant="ghost" size="sm" bleed="end" render={<a href="/accounts" />}>
+								View all accounts
 								<Icon name="arrow-right" />
 							</Button>
 						</CardFooter>
@@ -303,21 +303,21 @@ export function DashboardPage() {
 						</Card>
 						<Card>
 							<CardHeader>
-								<CardTitle>Top collectors</CardTitle>
+								<CardTitle>Top customers</CardTitle>
 								<CardDescription>By spend this month.</CardDescription>
 								<CardAction>
-									<Button variant="ghost" size="sm" render={<a href="/collectors" />}>
+									<Button variant="ghost" size="sm" render={<a href="/customers" />}>
 										View all
 									</Button>
 								</CardAction>
 							</CardHeader>
 							<CardList>
-								{collectors.map((person) => (
+								{customers.map((person) => (
 									<Entity
 										key={person.id}
 										leading={<Avatar variant="art" size="sm" fallback={person.initials} alt="" />}
 										title={person.name}
-										subtitle={`${person.handle} · ${person.pieces} pieces`}
+										subtitle={`${person.handle} · ${person.seats} seats`}
 										action={<span className="text-mono-sm">{usd.format(person.spent)}</span>}
 									/>
 								))}
@@ -329,7 +329,7 @@ export function DashboardPage() {
 					<Card className="flex flex-col">
 						<CardHeader>
 							<CardTitle>Upcoming releases</CardTitle>
-							<CardDescription>Scheduled to open to collectors.</CardDescription>
+							<CardDescription>Scheduled to ship to customers.</CardDescription>
 						</CardHeader>
 						<CardList>
 							{upcoming.map((release) => (
@@ -342,7 +342,7 @@ export function DashboardPage() {
 							))}
 						</CardList>
 						<CardFooter className="mt-auto">
-							<Button variant="outline" size="sm" render={<a href="/editions/new" />}>
+							<Button variant="outline" size="sm" render={<a href="/releases/new" />}>
 								<Icon name="calendar" />
 								Schedule a release
 							</Button>
@@ -351,7 +351,7 @@ export function DashboardPage() {
 					<Card className="xl:col-span-2">
 						<CardHeader>
 							<CardTitle>Activity</CardTitle>
-							<CardDescription>Collects, tips, and follows.</CardDescription>
+							<CardDescription>Seats, upgrades, and invoices.</CardDescription>
 							<CardAction>
 								<Button variant="ghost" size="sm" render={<a href="/activity" />}>
 									View all