@sableui/react 0.0.0-stage → 0.1.0

package/llms/patterns/dashboard-page.md

@@ -0,0 +1,170 @@
+# DashboardPage
+
+App-shell dashboard: sidebar chrome (AppHeader + BottomNav below lg), a wide content region, a stat-card row that breathes, and a data table — the default shape for operator/analytics home routes.
+
+**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).
+
+## Notes
+
+- Region cap is `wide` (1280px): dashboards hold tables and multi-column grids, never a reading column.
+- Stat cards: CardHeader carries label (CardDescription) + value + trend badge (CardAction pins it top-right); KPI values are `text-mono-xl` — the metric mono tier, tabular figures — never a heading tier.
+- Stat cards use an explicit cols map (1 → 2 → 4) — a 4-stat row must fold to 2×2, never strand an orphan the way auto-fit can.
+- The table runs flush to the card edges with `<CardContent flush>`, which hands the card's padding to the table (`--table-edge-px`), so the first and last columns line up with the CardHeader at any card density — never hand-set pl-6/pr-6. Numeric columns align end in mono.
+- The Activity list is Entity rows in CardList, inset to the card padding and divided by hairlines — the same list shape as ListDetailPage, never CardContent with hand-tuned px.
+- Believable density is part of the pattern: 7 rows, commit hashes in mono-caption, RelativeTime muted — never 3 rows of filler.
+- The page has exactly one heading-1 (PageHeader); card titles are Title tier, not headings.
+- Chrome (Sidebar) is outside the content grid; the Page region caps only content.
+- Sidebar hides below lg, so the shell's header carries an AppHeader and its footer a BottomNav with the same destinations — never strand mobile users without navigation.
+
+## Accessibility
+
+- AppShell provides the skip link and <main id="main-content"> landmark.
+- The active SidebarItem and BottomNavItem carry aria-current via `active`.
+- DataTable headers are real <th>; sortable columns are announced.
+
+## Source
+
+```tsx
+import { AppHeader, AppShell, Avatar, Badge, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardHeader, CardList, CardTitle, DataTable, Entity, Grid, Icon, Page, PageHeader, RelativeTime, Row, Sidebar, SidebarHeader, SidebarItem, SidebarNav } from "@sableui/react"
+
+const MIN = 60 * 1000
+const HOUR = 60 * MIN
+
+const stats = [
+	{ label: "Revenue", value: "$12,480", delta: "+8.2%", up: true, note: "vs. previous 30 days" },
+	{ label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 from new collectors" },
+	{ label: "New collectors", value: "312", delta: "+12.4%", up: true, note: "best month this year" },
+	{ label: "Sell-through", value: "64%", delta: "−1.8%", up: false, note: "across 48 active editions" },
+]
+
+const deployments = [
+	{ id: "dp_01", project: "storefront", commit: "a41f2c9", status: "ready" as const, duration: "42s", updated: 2 * MIN },
+	{ id: "dp_02", project: "api", commit: "7c03bd1", status: "building" as const, duration: "1m 08s", updated: 9 * MIN },
+	{ id: "dp_03", project: "docs", commit: "e992a70", status: "queued" as const, duration: "—", updated: 12 * MIN },
+	{ id: "dp_04", project: "worker", commit: "51b8e04", status: "failed" as const, duration: "18s", updated: 1 * HOUR },
+	{ id: "dp_05", project: "storefront", commit: "90cc41a", status: "ready" as const, duration: "39s", updated: 3 * HOUR },
+	{ id: "dp_06", project: "renderer", commit: "b7714dd", status: "ready" as const, duration: "2m 31s", updated: 5 * HOUR },
+	{ id: "dp_07", project: "api", commit: "f30a9e2", status: "ready" as const, duration: "1m 02s", updated: 8 * HOUR },
+]
+
+const 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 },
+]
+
+export function DashboardPage() {
+	return (
+		<AppShell
+			// Sidebar hides below lg, so the same destinations ride in the shell's
+			// mobile slots — without them the route has no navigation under 1024px.
+			header={<AppHeader title={<span className="text-title-sm">Atelier</span>} />}
+			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="bell" />} label="Activity" showLabel render={<a href="/activity" />} />
+					<BottomNavItem icon={<Icon name="gear" />} label="Settings" showLabel render={<a href="/settings" />} />
+				</BottomNav>
+			}
+			sidebar={
+				<Sidebar>
+					<SidebarHeader>
+						<span className="text-title-sm">Atelier</span>
+					</SidebarHeader>
+					<SidebarNav>
+						<SidebarItem icon={<Icon name="grid" />} label="Overview" active render={<a href="/" />} />
+						<SidebarItem icon={<Icon name="image-stack" />} label="Editions" render={<a href="/editions" />} />
+						<SidebarItem icon={<Icon name="user" />} label="Collectors" render={<a href="/collectors" />} />
+						<SidebarItem icon={<Icon name="bell" />} label="Activity" render={<a href="/activity" />} />
+						<SidebarItem icon={<Icon name="gear" />} label="Settings" render={<a href="/settings" />} />
+					</SidebarNav>
+				</Sidebar>
+			}
+		>
+			<Page max="wide" gap={4} className="py-6">
+				<PageHeader
+					title="Overview"
+					description="Sales, collects, and edition activity for the last 30 days."
+					actions={
+						<Row gap={2}>
+							<Button variant="outline">Export</Button>
+							<Button>New edition</Button>
+						</Row>
+					}
+				/>
+				<Grid cols={{ base: 1, sm: 2, xl: 4 }} gap={3}>
+					{stats.map((stat) => (
+						<Card key={stat.label}>
+							<CardHeader>
+								<CardDescription>{stat.label}</CardDescription>
+								<CardTitle className="text-mono-xl">{stat.value}</CardTitle>
+								<CardAction>
+									<Badge tone={stat.up ? "success" : "neutral"} size="sm">
+										<Icon name={stat.up ? "chevron-up" : "chevron-down"} />
+										{stat.delta}
+									</Badge>
+								</CardAction>
+							</CardHeader>
+							<CardContent>
+								<p className="text-caption text-muted-foreground">{stat.note}</p>
+							</CardContent>
+						</Card>
+					))}
+				</Grid>
+				<Grid cols={{ base: 1, xl: 3 }} gap={3}>
+					<Card className="xl:col-span-2">
+						<CardHeader>
+							<CardTitle>Recent deployments</CardTitle>
+							<CardDescription>Builds across every project, newest first.</CardDescription>
+							<CardAction>
+								<Button variant="ghost" size="sm" render={<a href="/deployments" />}>
+									View all
+								</Button>
+							</CardAction>
+						</CardHeader>
+						<CardContent flush>
+							<DataTable
+								data={deployments}
+								rowKey={(row) => row.id}
+								columns={[
+									{ key: "project", header: "Project", sortable: true, className: "text-label-md" },
+									{ key: "commit", header: "Commit", cell: (row) => <span className="text-mono-caption text-muted-foreground">{row.commit}</span> },
+									{ key: "status", header: "Status", cell: (row) => <Badge appearance="plain" tone={statusTone(row.status)} dot>{row.status}</Badge> },
+									{ key: "duration", header: "Duration", align: "end", cell: (row) => <span className="text-mono-caption">{row.duration}</span> },
+									{ key: "updated", header: "Updated", align: "end", cell: (row) => <RelativeTime date={Date.now() - row.updated} className="text-body-xs text-muted-foreground" /> },
+								]}
+							/>
+						</CardContent>
+					</Card>
+					<Card>
+						<CardHeader>
+							<CardTitle>Activity</CardTitle>
+							<CardDescription>Collects, mints, and follows.</CardDescription>
+						</CardHeader>
+						<CardList>
+							{activity.map((item) => (
+								<Entity
+									key={item.id}
+									density="compact"
+									leading={<Avatar size="sm" fallback={item.initials} alt={item.who} />}
+									title={
+										<span className="text-body-sm">
+											<span className="text-label-md">{item.who}</span>{" "}
+											<span className="text-muted-foreground">{item.what}</span>
+										</span>
+									}
+									action={<RelativeTime date={Date.now() - item.when} className="text-caption text-muted-foreground" />}
+								/>
+							))}
+						</CardList>
+					</Card>
+				</Grid>
+			</Page>
+		</AppShell>
+	)
+}
+```

package/llms/patterns/feed-page.md

@@ -0,0 +1,103 @@
+# FeedPage
+
+Single-column reading feed: a feed-width region, one Card per post (Entity byline, zero-shift media, body copy, quiet action row), and explicit load-more pagination.
+
+**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).
+
+## Notes
+
+- Region cap is `feed` (640px) — a single reading column; media and copy share one measure.
+- Post media sits in an AspectBox so late-loading images never shift the column.
+- The byline is Entity (Avatar + name + handle) in a CardList — the same row primitive as everywhere else, inset to the card padding by CardList rather than by zeroing paddings on CardHeader and Entity.
+- Actions are ghost sm Buttons (icon + count) in a Row, pulled out by the button's own padding (`-ms-3`) so the first icon sits on the text edge: quiet chrome under content, not competing pills.
+- Pagination is an explicit load-more Button (secondary; set `loading` while the next page fetches — `loadingLabel` names that state), not infinite scroll — predictable for keyboard and AT users.
+
+## Accessibility
+
+- Each post is an <article>, so AT users can jump between posts.
+- Icon-only action buttons carry aria-labels.
+- Media images get meaningful alt text from the post, empty alt only if decorative.
+
+## Source
+
+```tsx
+import { AspectBox, Avatar, Button, Card, CardContent, CardList, Entity, Icon, Page, PageHeader, Row, Stack } from "@sableui/react"
+
+const posts = [
+	{
+		id: "p_01",
+		author: "Ada Lovelace",
+		handle: "@ada · 2h",
+		initials: "AL",
+		body: "New edition drops Friday — 100 signed prints, each with the on-chain original.",
+		image: "/media/edition-cover.svg",
+		alt: "Edition cover — Gold Rush series",
+		likes: 128,
+		comments: 24,
+	},
+	{
+		id: "p_02",
+		author: "Grace Hopper",
+		handle: "@grace · 5h",
+		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",
+		likes: 86,
+		comments: 9,
+	},
+]
+
+export function FeedPage() {
+	return (
+		<Page as="main" max="feed" gap={4} className="py-6">
+			<PageHeader title="Home" description="Latest posts from artists you follow." />
+			<Stack gap={3}>
+				{posts.map((post) => (
+					<article key={post.id}>
+						<Card className="overflow-hidden">
+							{/* The byline is an Entity row in CardList, which insets it to the
+							    card's own padding on every side — no hand-zeroed paddings. */}
+							<CardList>
+								<Entity
+									leading={<Avatar fallback={post.initials} alt={post.author} />}
+									title={post.author}
+									subtitle={post.handle}
+									action={
+										<Button variant="ghost" size="icon-sm" aria-label="Post options">
+											<Icon name="ellipsis" />
+										</Button>
+									}
+								/>
+							</CardList>
+							<AspectBox ratio={16 / 9}>
+								<img src={post.image} alt={post.alt} className="size-full object-cover" />
+							</AspectBox>
+							<CardContent className="flex flex-col gap-2">
+								<p className="text-body-md text-foreground">{post.body}</p>
+								{/* Pulled out by exactly a sm Button's own padding (px-3), so the
+								    first icon lands on the text edge above it. Both are on the
+								    spacing scale, so they stay aligned at every density. */}
+								<Row gap={1} className="-ms-3">
+									<Button variant="ghost" size="sm" aria-label={`Like — ${post.likes}`}>
+										<Icon name="heart" />
+										{post.likes}
+									</Button>
+									<Button variant="ghost" size="sm" aria-label={`Comments — ${post.comments}`}>
+										<Icon name="comment" />
+										{post.comments}
+									</Button>
+									<Button variant="ghost" size="sm" aria-label="Share">
+										<Icon name="share" />
+									</Button>
+								</Row>
+							</CardContent>
+						</Card>
+					</article>
+				))}
+			</Stack>
+			<Button variant="secondary" loadingLabel="Loading…">Load more posts</Button>
+		</Page>
+	)
+}
+```

package/llms/patterns/landing-page.md

@@ -0,0 +1,122 @@
+# LandingPage
+
+Marketing hero + feature grid: display-tier headline as the page's single loud moment, an eyebrow kicker, a two-action CTA row, and a three-up feature grid that reveals on scroll.
+
+**Intent:** Reach for this for the marketing/landing route of a product — the one page where Display type and scroll reveals belong. Not for product UI (display type and one-per-view rules forbid it inside the app).
+
+## Notes
+
+- Display type is the marketing voice: exactly one display headline per page, tight leading, weight 700+.
+- The eyebrow is a small outline Badge (`size="sm"`) — the badge's own size, never a type class forced onto its label; hierarchy above the headline is eyebrow → display → lede.
+- The lede is body-lg capped at the prose measure — the headline may be wide, reading text may not.
+- Two CTAs max: one primary, one quiet outline. More actions dilute the hero.
+- Reveal wraps below-the-fold sections only; it no-ops under reduced motion via the motion policy.
+- Feature cards are Cards in a Grid with minItemWidth (three-up that reflows on its own width), each icon + title + body-sm copy.
+
+## Accessibility
+
+- The hero headline is the page h1; feature titles are h2s restyled with the Title tier.
+- Reveal renders content immediately (no animation) when prefers-reduced-motion is set.
+- CTA buttons are real links or buttons with visible text — no icon-only CTAs.
+
+## Source
+
+```tsx
+import { Badge, Button, Card, CardContent, Grid, Icon, Region, Reveal, Row, Stack } from "@sableui/react"
+
+const features = [
+	{
+		icon: "sparkles" as const,
+		title: "Own the surface",
+		body: "Semantic tokens end-to-end — re-theme the whole product without touching a component.",
+	},
+	{
+		icon: "component" as const,
+		title: "Behavior included",
+		body: "Focus, keyboard nav, and ARIA ride on Base UI primitives under every surface.",
+	},
+	{
+		icon: "layout" as const,
+		title: "Pages, not just parts",
+		body: "Purpose-named regions, an 8px rhythm, and canonical page shells for the routes every product needs.",
+	},
+]
+
+export function LandingPage() {
+	return (
+		<div className="min-h-dvh bg-background">
+			<header>
+				<Region as="nav" aria-label="Main" className="grid h-16 grid-cols-[1fr_auto_1fr] items-center">
+					<span className="justify-self-start text-title-sm">Sable</span>
+					<Row gap={1} className="justify-self-center max-sm:hidden">
+						<Button variant="ghost" size="sm" render={<a href="/docs" />}>
+							Docs
+						</Button>
+						<Button variant="ghost" size="sm" render={<a href="/patterns" />}>
+							Patterns
+						</Button>
+						<Button variant="ghost" size="sm" render={<a href="/themes" />}>
+							Themes
+						</Button>
+					</Row>
+					<Button size="sm" className="justify-self-end" render={<a href="/signup" />}>
+						Get started
+					</Button>
+				</Region>
+			</header>
+			<main>
+				<Region as="section" max="wide" className="py-24">
+					<Stack gap={4} align="center" className="text-center">
+						<Badge appearance="outline" size="sm">
+							Now in beta
+						</Badge>
+						<h1 className="max-w-4xl text-balance text-display-2xl">
+							Ship product UI your agents can't get wrong
+						</h1>
+						<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">
+							An owned, themeable component system with enforced tokens, typography,
+							and motion — documented for machines as carefully as for people.
+						</p>
+						<Row gap={2} justify="center">
+							<Button size="cta">Get started</Button>
+							<Button size="cta" variant="outline">
+								Read the docs
+							</Button>
+						</Row>
+					</Stack>
+				</Region>
+				<Region as="section" max="wide" className="pb-24">
+					<Reveal>
+						{/* Three-up that reflows on its own width (minItemWidth), one Card
+						    per feature — never a hand-drawn bordered grid. */}
+						<Grid minItemWidth="calc(var(--spacing) * 64)">
+							{features.map((feature) => (
+								<Card key={feature.title}>
+									<CardContent className="flex flex-col gap-2">
+										<Icon name={feature.icon} className="text-xl text-muted-foreground" />
+										<h2 className="text-title-lg">{feature.title}</h2>
+										<p className="text-body-sm text-muted-foreground">{feature.body}</p>
+									</CardContent>
+								</Card>
+							))}
+						</Grid>
+					</Reveal>
+				</Region>
+			</main>
+			<footer className="border-t border-border">
+				<Region className="flex h-16 items-center justify-between">
+					<span className="text-caption text-muted-foreground">© 2026 Sable</span>
+					<Row gap={3}>
+						<a href="/github" className="text-caption text-muted-foreground motion-interactive hover:text-foreground">
+							GitHub
+						</a>
+						<a href="/changelog" className="text-caption text-muted-foreground motion-interactive hover:text-foreground">
+							Changelog
+						</a>
+					</Row>
+				</Region>
+			</footer>
+		</div>
+	)
+}
+```

package/llms/patterns/list-detail-page.md

@@ -0,0 +1,100 @@
+# ListDetailPage
+
+Two-column list-detail: a wide region split 8/4, the record list as Entity rows in the main column, and a sticky supporting rail (detail, filters, or summary) beside it.
+
+**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.
+
+## Notes
+
+- Region cap is `wide`; the split is Columns 12 → Col 8 + Col 4, collapsing to stacked full-width columns below lg via breakpoint maps.
+- List rows are Entity inside one bordered Card, in CardList: it insets each row to the card padding and divides them with hairlines — on a dark canvas rows need an anchoring surface, not a flat float.
+- Pending records live in the same list, muted (muted title + `Invited` badge), instead of a separate section.
+- The rail card holds label/value pairs as a Description list — muted terms, mono (tabular) values — plus one quiet action. Never hand-built `justify-between` rows.
+- The rail is sticky (top on the 4px scale) so the summary stays in view while the list scrolls.
+
+## Accessibility
+
+- Entity rows given `interactive` + `onSelect` (to open a member's detail) render as real buttons; keyboard focus follows list order. Rows here are presentational.
+- The rail is an <aside> landmark; the list column is the main content.
+
+## Source
+
+```tsx
+import { Avatar, Badge, Button, Card, CardContent, CardHeader, CardList, CardTitle, Col, Columns, Description, DescriptionItem, Entity, Page, PageHeader, SearchInput, Stack } from "@sableui/react"
+
+const members = [
+	{ id: "u_01", name: "Ada Lovelace", handle: "@ada", role: "Owner", initials: "AL", pending: false },
+	{ id: "u_02", name: "Grace Hopper", handle: "@grace", role: "Admin", initials: "GH", pending: false },
+	{ id: "u_03", name: "Mary Shelley", handle: "@mary", role: "Member", initials: "MS", pending: false },
+	{ id: "u_04", name: "Nina Simone", handle: "@nina", role: "Member", initials: "NS", pending: false },
+	{ id: "u_05", name: "Frida Kahlo", handle: "@frida", role: "Member", initials: "FK", pending: false },
+	{ id: "u_06", name: "hopper@navy.mil", handle: "invited 2 days ago", role: "Member", initials: "?", pending: true },
+]
+
+export function ListDetailPage() {
+	return (
+		<Page as="main" max="wide" gap={4} className="py-6">
+			<PageHeader
+				title="Members"
+				description="Everyone with access to this workspace."
+				actions={<Button>Invite member</Button>}
+			/>
+			<Columns count={{ base: 1, lg: 12 }}>
+				<Col span={{ base: 1, lg: 8 }}>
+					<Stack gap={3}>
+						<SearchInput placeholder="Search members" aria-label="Search members" />
+						<Card className="overflow-hidden">
+							<CardList>
+									{members.map((member) => (
+										<Entity
+											key={member.id}
+											leading={
+												<Avatar
+													fallback={member.pending ? "•" : member.initials}
+													alt={member.pending ? "" : member.name}
+												/>
+											}
+											title={
+												<span className={member.pending ? "text-muted-foreground" : undefined}>
+													{member.name}
+												</span>
+											}
+											subtitle={member.handle}
+											action={
+												member.pending ? (
+													<Badge>Invited</Badge>
+												) : (
+													<Badge appearance="outline">{member.role}</Badge>
+												)
+											}
+										/>
+									))}
+							</CardList>
+						</Card>
+					</Stack>
+				</Col>
+				<Col span={{ base: 1, lg: 4 }}>
+					<aside className="sticky top-6">
+						<Card>
+							<CardHeader>
+								<CardTitle>Workspace</CardTitle>
+							</CardHeader>
+							<CardContent className="flex flex-col gap-3">
+								{/* Label/value pairs are a Description list, not hand-built rows. */}
+								<Description>
+									<DescriptionItem term="Members" detail={<span className="text-mono-md">5</span>} />
+									<DescriptionItem term="Pending invites" detail={<span className="text-mono-md">1</span>} />
+									<DescriptionItem term="Seats used" detail={<span className="text-mono-md">6 / 10</span>} />
+								</Description>
+								<Button variant="outline" size="sm" className="mt-1 self-start">
+									Manage plan
+								</Button>
+							</CardContent>
+						</Card>
+					</aside>
+				</Col>
+			</Columns>
+		</Page>
+	)
+}
+```

package/llms/patterns/settings-page.md

@@ -0,0 +1,121 @@
+# SettingsPage
+
+Stacked settings sections inside the app shell: a content-width region, one Fieldset card per concern (each with its own save), auto-wired Form/Field rows, and a destructive zone last.
+
+**Intent:** Reach for this for account/profile/workspace settings and any 'edit a handful of grouped preferences' route. Not for a single short form (use AuthPage's centered form shape) or bulk record editing (use DashboardPage + DataTable).
+
+## Notes
+
+- Region cap is `content` (896px): settings panes hold labeled rows and the occasional 2-up field, never a full grid.
+- One Fieldset per concern, each with its own footer save — per-section saves beat one page-wide submit for settings.
+- Field wires label/description/error a11y automatically; never hand-roll <label> + <input> pairs here.
+- The destructive section is visually last, isolated in its own Fieldset with a destructive-variant action.
+- Toggles use orientation="horizontal" Fields so the label sits beside the Switch.
+- Lives in the same AppShell as DashboardPage: Sidebar from lg up, AppHeader + BottomNav below it, with Settings marked active in both.
+
+## Accessibility
+
+- AppShell provides the skip link and <main id="main-content"> landmark; the active SidebarItem and BottomNavItem carry aria-current.
+- Each section is a real <fieldset> with a <legend> (FieldsetLegend).
+- Field auto-wires htmlFor/id, aria-describedby (description + error), aria-invalid, and required.
+- The danger action is a real button labeled by its visible text — no icon-only destructive controls.
+
+## Source
+
+```tsx
+import { AppHeader, AppShell, BottomNav, BottomNavItem, Button, Field, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, Form, Icon, Input, Page, PageHeader, Select, SelectContent, SelectItem, SelectTrigger, Sidebar, SidebarHeader, SidebarItem, SidebarNav, Switch, Textarea } from "@sableui/react"
+
+export function SettingsPage() {
+	return (
+		<AppShell
+			// Sidebar hides below lg, so the same destinations ride in the shell's
+			// mobile slots — without them the route has no navigation under 1024px.
+			header={<AppHeader title={<span className="text-title-sm">Atelier</span>} />}
+			bottomNav={
+				<BottomNav aria-label="Primary">
+					<BottomNavItem icon={<Icon name="grid" />} label="Overview" showLabel 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="bell" />} label="Activity" showLabel render={<a href="/activity" />} />
+					<BottomNavItem icon={<Icon name="gear" />} label="Settings" showLabel active render={<a href="/settings" />} />
+				</BottomNav>
+			}
+			sidebar={
+				<Sidebar>
+					<SidebarHeader>
+						<span className="text-title-sm">Atelier</span>
+					</SidebarHeader>
+					<SidebarNav>
+						<SidebarItem icon={<Icon name="grid" />} label="Overview" render={<a href="/" />} />
+						<SidebarItem icon={<Icon name="image-stack" />} label="Editions" render={<a href="/editions" />} />
+						<SidebarItem icon={<Icon name="user" />} label="Collectors" render={<a href="/collectors" />} />
+						<SidebarItem icon={<Icon name="bell" />} label="Activity" render={<a href="/activity" />} />
+						<SidebarItem icon={<Icon name="gear" />} label="Settings" active render={<a href="/settings" />} />
+					</SidebarNav>
+				</Sidebar>
+			}
+		>
+			{/* No `as="main"`: AppShell already renders <main id="main-content">. */}
+			<Page max="content" gap={4} className="py-6">
+				<PageHeader
+					title="Settings"
+					description="Your profile, notifications, and account controls."
+				/>
+				<Form onSubmit={(event) => event.preventDefault()}>
+					<Fieldset>
+						<FieldsetLegend>Profile</FieldsetLegend>
+						<FieldsetDescription>How you appear across the app.</FieldsetDescription>
+						<FieldsetContent>
+							<Field label="Display name" required>
+								<Input name="displayName" defaultValue="ada" />
+							</Field>
+							<Field label="Bio" description="Shown on your public profile.">
+								<Textarea name="bio" rows={3} placeholder="Tell collectors who you are" />
+							</Field>
+							<Field label="Timezone">
+								<Select defaultValue="utc" name="timezone">
+									<SelectTrigger />
+									<SelectContent>
+										<SelectItem value="utc">UTC</SelectItem>
+										<SelectItem value="est">Eastern (UTC−5)</SelectItem>
+										<SelectItem value="pst">Pacific (UTC−8)</SelectItem>
+									</SelectContent>
+								</Select>
+							</Field>
+						</FieldsetContent>
+						<FieldsetFooter>
+							<Button type="submit">Save profile</Button>
+						</FieldsetFooter>
+					</Fieldset>
+				</Form>
+				<Form onSubmit={(event) => event.preventDefault()}>
+					<Fieldset>
+						<FieldsetLegend>Notifications</FieldsetLegend>
+						<FieldsetDescription>What we email you about.</FieldsetDescription>
+						<FieldsetContent>
+							<Field label="New collector alerts" orientation="horizontal">
+								<Switch name="collectorAlerts" defaultChecked />
+							</Field>
+							<Field label="Weekly digest" orientation="horizontal">
+								<Switch name="weeklyDigest" />
+							</Field>
+						</FieldsetContent>
+						<FieldsetFooter>
+							<Button type="submit">Save notifications</Button>
+						</FieldsetFooter>
+					</Fieldset>
+				</Form>
+				<Fieldset>
+					<FieldsetLegend>Danger zone</FieldsetLegend>
+					<FieldsetDescription>
+						Deleting your account removes your posts and collections permanently.
+					</FieldsetDescription>
+					<FieldsetFooter>
+						<Button variant="destructive">Delete account</Button>
+					</FieldsetFooter>
+				</Fieldset>
+			</Page>
+		</AppShell>
+	)
+}
+```