@sableui/react 0.9.1 → 0.10.0

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

package/llms/patterns/feed-page.md

@@ -1,6 +1,6 @@
 # FeedPage
 
-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.
+Social reading feed with a side rail: a feed-width main column (composer, For you / Following Tabs, one Card per post, an event post with price, capacity Meter and Register, a Skeleton for the next page) beside a sticky rail of who-to-follow and upcoming events 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).
 
@@ -10,7 +10,7 @@ Social reading feed with a side rail: a feed-width main column (composer, For yo
 - Feed scope is `Tabs` (underline, stretched to the column with `flex`): peer views of the same feed. The composer sits above them because posting applies to both.
 - The composer is a Card holding `Textarea autoResize` plus ghost icon Buttons and a secondary `Post` — not ChatComposer, which submits on Enter and is for conversations.
 - Each post is a Card: an Entity byline in a CardList (with an OverflowMenu for post actions), body copy, then media in an AspectBox at the asset's own ratio, inset with `rounded-concentric-lg/6` so its corners follow the card's in every theme.
-- An edition drop adds a `Badge appearance="overlay"` on the artwork, title and price, the one primary Button on the page (`Collect`), and a `Meter` for supply — collected against a known maximum is a level, not task progress.
+- An event post adds a `Badge appearance="overlay"` on the image, title and price, the one primary Button on the page (`Register`), and a `Meter` for capacity — seats taken against a known maximum is a level, not task progress.
 - Actions are ghost sm Buttons (icon + count) in a Row pulled out by the button's own padding (`-ms-3`) so the first icon sits on the text edge.
 - Loading the next page shows a Skeleton post in the shape the post will land in, above the explicit load-more Button in its `loading` state — predictable for keyboard and AT users, unlike infinite scroll.
 
@@ -19,7 +19,7 @@ Social reading feed with a side rail: a feed-width main column (composer, For yo
 - Each post is an <article>, so AT users can jump between posts; the rail is a labelled <aside> landmark.
 - Rail card titles render as h2 (CardTitle `render={<h2 />}`) 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 capacity Meter is role=meter with a getAriaValueText reading ("28 of 40 seats taken").
 - The Skeleton card is aria-busy; the loading Button keeps its label ("Loading posts").
 
 ## Source
@@ -36,7 +36,7 @@ type Post = {
 	following: boolean
 	body: string
 	media?: { src: string; alt: string }
-	drop?: { title: string; price: string; collected: number; supply: number }
+	event?: { title: string; price: string; registered: number; capacity: number }
 	likes: number
 	comments: number
 }
@@ -49,9 +49,9 @@ const posts: Post[] = [
 		initials: "AL",
 		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 },
+		body: "Registration for the spring workshop is open. Two days of plotter drawing in a small group. See you there.",
+		media: { src: "/media/edition-cover.svg", alt: "Workshop poster, a gold-leaf study in overlapping arcs" },
+		event: { title: "Spring plotter workshop", price: "$120", registered: 28, capacity: 40 },
 		likes: 128,
 		comments: 24,
 	},
@@ -74,7 +74,7 @@ const posts: Post[] = [
 		initials: "NS",
 		time: "8h",
 		following: false,
-		body: "Collectors of Dusk, no. 3 — your unlockable score is now in your library. Headphones on for this one.",
+		body: "Thanks to everyone at the Dusk listening session — the full recording is now in your library. Headphones on.",
 		likes: 214,
 		comments: 31,
 	},
@@ -86,8 +86,8 @@ const suggestions = [
 ]
 
 const upcoming = [
-	{ id: "d_01", title: "Quiet Harbor", artist: "Mary Shelley", initials: "MS", date: "Sat, Oct 12" },
-	{ id: "d_02", title: "Dusk, no. 4", artist: "Nina Simone", initials: "NS", date: "Tue, Oct 15" },
+	{ id: "e_01", title: "Quiet Harbor talk", host: "Mary Shelley", initials: "MS", date: "Sat, Oct 12" },
+	{ id: "e_02", title: "Dusk, live", host: "Nina Simone", initials: "NS", date: "Tue, Oct 15" },
 ]
 
 const renderPost = (post: Post) => (
@@ -113,35 +113,35 @@ const renderPost = (post: Post) => (
 				{post.media ? (
 					<AspectBox ratio={16 / 9} className="overflow-hidden rounded-concentric-lg/6 bg-muted">
 						<img src={post.media.src} alt={post.media.alt} className="size-full object-cover" />
-						{post.drop ? (
+						{post.event ? (
 							<div className="absolute start-3 top-3">
 								<Badge appearance="overlay" size="sm" dot>
-									Live drop
+									Open now
 								</Badge>
 							</div>
 						) : null}
 					</AspectBox>
 				) : null}
-				{post.drop ? (
+				{post.event ? (
 					<Stack gap={1.5}>
 						<Row gap={2} align="center" justify="between">
 							<div className="min-w-0">
-								<p className="text-title-md text-foreground">{post.drop.title}</p>
+								<p className="text-title-md text-foreground">{post.event.title}</p>
 								<p className="text-body-sm text-muted-foreground">
-									{`${post.drop.price} · Edition of ${post.drop.supply}`}
+									{`${post.event.price} · ${post.event.capacity} seats`}
 								</p>
 							</div>
-							<Button>{`Collect for ${post.drop.price}`}</Button>
+							<Button>{`Register for ${post.event.price}`}</Button>
 						</Row>
 						<Meter
-							value={post.drop.collected}
-							max={post.drop.supply}
+							value={post.event.registered}
+							max={post.event.capacity}
 							size="sm"
-							getAriaValueText={(_, value) => `${value} of ${post.drop?.supply} collected`}
+							getAriaValueText={(_, value) => `${value} of ${post.event?.capacity} seats taken`}
 						>
 							<Row gap={2} align="center" justify="between" className="mb-2">
-								<MeterLabel>{`${post.drop.collected} collected`}</MeterLabel>
-								<MeterValue>{(_, value) => `${(post.drop?.supply ?? 0) - value} left`}</MeterValue>
+								<MeterLabel>{`${post.event.registered} registered`}</MeterLabel>
+								<MeterValue>{(_, value) => `${(post.event?.capacity ?? 0) - value} left`}</MeterValue>
 							</Row>
 							<MeterTrack />
 						</Meter>
@@ -182,15 +182,15 @@ export function FeedPage() {
 										autoResize
 										rows={2}
 										aria-label="New post"
-										placeholder="Share a process shot or an upcoming drop"
+										placeholder="Share a process shot or an upcoming event"
 									/>
 									<Row gap={1} align="center" justify="between">
 										<Row gap={0.5}>
 											<Button variant="ghost" size="icon-sm" aria-label="Add images">
 												<Icon name="image-stack" />
 											</Button>
-											<Button variant="ghost" size="icon-sm" aria-label="Attach an edition">
-												<Icon name="gem" />
+											<Button variant="ghost" size="icon-sm" aria-label="Add an event">
+												<Icon name="calendar" />
 											</Button>
 										</Row>
 										<Button variant="secondary" size="sm">
@@ -257,17 +257,17 @@ export function FeedPage() {
 						</Card>
 						<Card>
 							<CardHeader>
-								<CardTitle render={<h2 />}>Upcoming drops</CardTitle>
+								<CardTitle render={<h2 />}>Upcoming events</CardTitle>
 							</CardHeader>
 							<CardList>
-								{upcoming.map((drop) => (
+								{upcoming.map((event) => (
 									<Entity
-										key={drop.id}
-										leading={<Avatar variant="art" fallback={drop.initials} alt={drop.artist} />}
-										title={drop.title}
-										subtitle={`${drop.artist} · ${drop.date}`}
+										key={event.id}
+										leading={<Avatar variant="art" fallback={event.initials} alt={event.host} />}
+										title={event.title}
+										subtitle={`${event.host} · ${event.date}`}
 										action={
-											<Button variant="ghost" size="icon-sm" aria-label={`Remind me about ${drop.title}`}>
+											<Button variant="ghost" size="icon-sm" aria-label={`Remind me about ${event.title}`}>
 												<Icon name="bell" />
 											</Button>
 										}

package/llms/patterns/landing-page.md

@@ -285,7 +285,7 @@ export function LandingPage() {
 												<CardDescription>Team plan</CardDescription>
 											</CardHeader>
 											<CardContent>
-												<Meter value={64} tone="standard">
+												<Meter value={64} tone="3">
 													<Row justify="between" wrap className="mb-2">
 														<MeterLabel>Used</MeterLabel>
 														<MeterValue>{(_, value) => `${(value * 30).toLocaleString("en-US")} of 3,000`}</MeterValue>