@sableui/react 0.9.0 → 0.10.0

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>

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

@@ -45,9 +45,9 @@ const roleLabel: Record<Role, string> = {
 
 const roleSummary: Record<Role, string> = {
 	owner: "Full access, including payouts and billing. Transfer ownership in studio settings.",
-	admin: "Manages members, editions and payouts.",
-	editor: "Drafts, prices and releases editions.",
-	viewer: "Sees editions and sales, but can't change them.",
+	admin: "Manages members, projects and billing.",
+	editor: "Drafts, edits and publishes projects.",
+	viewer: "Sees projects and reports, but can't change them.",
 }
 
 type Activity = { id: string; icon: string; text: string; when: string }
@@ -62,7 +62,7 @@ type Member = {
 	handle?: string
 	joined?: string
 	lastActive?: string
-	editions?: number
+	projects?: number
 	invitedBy?: string
 	sent?: string
 	expires?: string
@@ -75,40 +75,40 @@ const seats = 10
 const initialMembers: Member[] = [
 	{
 		id: "u_01", name: "Ada Lovelace", handle: "@ada", email: "ada@atelier.art", initials: "AL", role: "owner", pending: false,
-		joined: "Mar 4, 2024", lastActive: "Online now", editions: 12,
+		joined: "Mar 4, 2024", lastActive: "Online now", projects: 12,
 		activity: [
-			{ id: "a1", icon: "gem", text: "Released Analytical Engine No. 3 — edition of 50", when: "2 hours ago" },
+			{ id: "a1", icon: "file", text: "Published the Analytical Engine No. 3 roadmap", when: "2 hours ago" },
 			{ id: "a2", icon: "mail", text: "Invited louise@bourgeois.studio as Editor", when: "2 days ago" },
 		],
 	},
 	{
 		id: "u_02", name: "Grace Hopper", handle: "@grace", email: "grace@atelier.art", initials: "GH", role: "admin", pending: false,
-		joined: "Mar 9, 2024", lastActive: "20 minutes ago", editions: 4,
+		joined: "Mar 9, 2024", lastActive: "20 minutes ago", projects: 4,
 		activity: [
 			{ id: "a1", icon: "user", text: "Changed Frida Kahlo's role to Viewer", when: "Yesterday" },
-			{ id: "a2", icon: "edit", text: "Updated pricing on First Compiler — edition of 10", when: "3 days ago" },
-			{ id: "a3", icon: "gem", text: "Released First Compiler — edition of 10", when: "Sep 28" },
+			{ id: "a2", icon: "edit", text: "Updated the budget on First Compiler", when: "3 days ago" },
+			{ id: "a3", icon: "file", text: "Created the First Compiler project", when: "Sep 28" },
 		],
 	},
 	{
 		id: "u_03", name: "Mary Shelley", handle: "@mary", email: "mary@atelier.art", initials: "MS", role: "editor", pending: false,
-		joined: "Jun 18, 2024", lastActive: "3 hours ago", editions: 7,
+		joined: "Jun 18, 2024", lastActive: "3 hours ago", projects: 7,
 		activity: [
 			{ id: "a1", icon: "calendar", text: "Scheduled Frankenstein Studies for Oct 14", when: "3 hours ago" },
-			{ id: "a2", icon: "gem", text: "Released The Last Man — edition of 25", when: "Sep 21" },
+			{ id: "a2", icon: "file", text: "Published The Last Man report", when: "Sep 21" },
 		],
 	},
 	{
 		id: "u_04", name: "Nina Simone", handle: "@nina", email: "nina@atelier.art", initials: "NS", role: "editor", pending: false,
-		joined: "Jan 12, 2025", lastActive: "Yesterday", editions: 3,
+		joined: "Jan 12, 2025", lastActive: "Yesterday", projects: 3,
 		activity: [
-			{ id: "a1", icon: "upload", text: "Uploaded artwork for Little Girl Blue", when: "Yesterday" },
-			{ id: "a2", icon: "gem", text: "Released Feeling Good — edition of 100", when: "Aug 30" },
+			{ id: "a1", icon: "upload", text: "Uploaded files for Little Girl Blue", when: "Yesterday" },
+			{ id: "a2", icon: "file", text: "Published the Feeling Good brief", when: "Aug 30" },
 		],
 	},
 	{
 		id: "u_05", name: "Frida Kahlo", handle: "@frida", email: "frida@atelier.art", initials: "FK", role: "viewer", pending: false,
-		joined: "Jul 2, 2025", lastActive: "4 days ago", editions: 0,
+		joined: "Jul 2, 2025", lastActive: "4 days ago", projects: 0,
 		activity: [{ id: "a1", icon: "comment", text: "Commented on the Las Dos Fridas draft", when: "4 days ago" }],
 	},
 	{
@@ -341,8 +341,8 @@ export function ListDetailPage() {
 														<dd className={selected.lastActive === "Online now" ? "text-success" : undefined}>
 															{selected.lastActive}
 														</dd>
-														<dt>Editions released</dt>
-														<dd>{selected.editions}</dd>
+														<dt>Projects owned</dt>
+														<dd>{selected.projects}</dd>
 													</dl>
 												)}
 											</div>
@@ -395,7 +395,7 @@ export function ListDetailPage() {
 									description={
 										selected.pending
 											? `${selected.email} won't be able to join with the link they were sent.`
-											: "They lose access to the studio right away. Editions they released stay on sale."
+											: "They lose access to the workspace right away. Projects they own stay with the team."
 									}
 									confirmLabel={selected.pending ? "Revoke invite" : "Remove member"}
 									onConfirm={() => remove(selected.id)}

package/llms/patterns/settings-page.md

@@ -46,17 +46,17 @@ const timezones = [
 ]
 
 const notifications = [
-	{ name: "notifyCollects", title: "New collects", description: "When someone collects your work", on: true },
-	{ name: "notifySoldOut", title: "Sold out", description: "When an edition sells its last copy", on: true },
-	{ name: "notifyFollowers", title: "New followers", description: "When a collector follows you", on: false },
-	{ name: "notifyDigest", title: "Weekly digest", description: "Sales and collectors, every Monday", on: true },
+	{ name: "notifyComments", title: "New comments", description: "When someone comments on your work", on: true },
+	{ name: "notifyInvoicePaid", title: "Invoice paid", description: "When a customer pays an invoice", on: true },
+	{ name: "notifyMembers", title: "New members", description: "When someone joins your workspace", on: false },
+	{ name: "notifyDigest", title: "Weekly digest", description: "Activity and usage, every Monday", on: true },
 	{ name: "notifyProduct", title: "Product updates", description: "New Atelier features", on: false },
 ]
 
 const payouts = [
 	{ label: "Next payout", value: "$1,284.60", note: "Friday, Oct 16" },
 	{ label: "Pending", value: "$412.00", note: "Clears in 7 days" },
-	{ label: "Paid this year", value: "$18,920.00", note: "Across 214 collects" },
+	{ label: "Paid this year", value: "$18,920.00", note: "Across 214 invoices" },
 ]
 
 export function SettingsPage() {
@@ -81,8 +81,8 @@ export function SettingsPage() {
 			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="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 active render={<a href="/settings" />} />
 				</BottomNav>
@@ -94,8 +94,8 @@ export function SettingsPage() {
 					</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="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"
@@ -149,7 +149,7 @@ export function SettingsPage() {
 							<Card id="profile" className="scroll-mt-6">
 								<CardHeader>
 									<CardTitle render={<h2 />}>Profile</CardTitle>
-									<CardDescription>How collectors see you on Atelier.</CardDescription>
+									<CardDescription>How your team sees you on Atelier.</CardDescription>
 								</CardHeader>
 								{/* The one explicit save on the page: profile text is drafted, then
 								    committed. Toggles below apply the moment they change. */}
@@ -180,14 +180,14 @@ export function SettingsPage() {
 													<Input defaultValue="ada" autoComplete="username" spellCheck={false} />
 												</Field>
 											</Grid>
-											<Field label="Bio" name="bio" description="Shown on your profile and edition pages.">
+											<Field label="Bio" name="bio" description="Shown on your profile and in comments.">
 												<Textarea
 													rows={3}
-													defaultValue="Generative artist working in plotted ink and code. New editions of 25 to 100 every month."
+													defaultValue="Product designer working on tools for small teams. Writing about process every month."
 												/>
 											</Field>
 											<Grid cols={{ base: 1, sm: 2 }} gap={3}>
-												<Field label="Timezone" name="timezone" description="Release times use this zone.">
+												<Field label="Timezone" name="timezone" description="Due dates use this zone.">
 													<Select defaultValue="europe-london" items={timezones}>
 														<SelectTrigger />
 														<SelectContent>
@@ -212,7 +212,7 @@ export function SettingsPage() {
 								<CardHeader>
 									<CardTitle render={<h2 />}>Notifications</CardTitle>
 									<CardDescription>
-										Email updates about your editions. Changes save automatically.
+										Email updates about your projects. Changes save automatically.
 									</CardDescription>
 								</CardHeader>
 								<CardList>
@@ -275,7 +275,7 @@ export function SettingsPage() {
 									<Entity
 										leading={<Icon name="download" className="text-lg text-muted-foreground" />}
 										title="Export data"
-										subtitle="Editions, sales, and collectors"
+										subtitle="Projects, invoices, and members"
 										action={
 											<Button variant="outline" size="sm">
 												Export
@@ -289,8 +289,8 @@ export function SettingsPage() {
 								<CardHeader>
 									<CardTitle render={<h2 />}>Delete account</CardTitle>
 									<CardDescription>
-										Permanently remove your profile, editions, and sales history. Collectors keep
-										the editions they own.
+										Permanently remove your profile, projects, and billing history. Files you shared
+										stay with your team.
 									</CardDescription>
 								</CardHeader>
 								<CardFooter className="justify-end">
@@ -307,7 +307,7 @@ export function SettingsPage() {
 				open={deleteOpen}
 				onOpenChange={setDeleteOpen}
 				title="Delete your account?"
-				description="This permanently removes your profile, 12 editions, and sales history. Pending payouts are still sent. This can't be undone."
+				description="This permanently removes your profile, 12 projects, and billing history. Your final invoice is still sent. This can't be undone."
 				confirmLabel="Delete account"
 				confirmingLabel="Deleting…"
 				confirmText="ada"

package/llms/reference/token-intent.md

@@ -50,23 +50,23 @@ Which token to reach for, and what it is most often confused with. Generated fro
     - **Not** `tone-info`. Success asserts an outcome; info asserts a fact. 'Saved' is success, '3 items' is info.
 - **`success-foreground`** — Ink paired with `success`. Evaluate the rendered contrast together; never choose it independently. *Use for:* Whenever the background is `success`. Use them as a pair — `bg-success text-success-foreground` — so a theme can retune the surface and the ink together.
     - **Not** `foreground`. That is the ink for `background` only; on any other surface it is a contrast gamble that happens to pass in the default theme and fails in another.
-- **`tone-standard`** — Domain tone: the baseline classification in a set. Part of the `tone-*` family, which exists so a product can classify content without inventing colours per feature. *Use for:* The default category of a classified item — the one that means 'nothing special'.
+- **`tone-3`** — Extra colour 3: the third, and usually the quietest, category in a classified set. *Use for:* A third category, or the baseline one that means 'nothing special'.
     - **Not** `muted`. A tone is *semantic classification* that a reader is meant to decode; `muted` is de-emphasis. If a legend would help the user, it is a tone.
-- **`tone-collectible`** — Domain tone: a scarce or owned item. *Use for:* Marking an item as collectible/owned in a classified set.
-    - **Not** `primary`. A tone classifies the *thing*; primary drives an *action*. A collectible badge is not a button.
-- **`tone-edition`** — Domain tone: an edition or release. *Use for:* Marking editioned content in a classified set.
-    - **Not** `tone-collectible`. Distinct classifications must stay visually distinct.
+- **`tone-2`** — Extra colour 2: the second category in a classified set. *Use for:* A second category, distinct from tone-1, in a badge, dot, card or chart.
+    - **Not** `tone-1`. Distinct categories must stay visually distinct.
+- **`tone-1`** — Extra colour 1, the lead of the three a theme defines beyond its status colours. The numbered tones exist so a product can classify content (categories, plans, series) without inventing colours per feature; the product decides what each one means. *Use for:* The most prominent category in a classified set, or the first series of a chart.
+    - **Not** `primary`. A tone classifies the *thing*; primary drives an *action*. A category badge is not a button.
 - **`tone-info`** — Domain tone: neutral, factual information. *Use for:* An informational note or banner, a neutral count, a 'did you know' surface.
     - **Not** `success`. Info states a fact; success states an outcome. Also not `primary` — an info banner is not an action.
 - **`tone-warning`** — Domain tone: proceed with care, nothing is broken yet. *Use for:* A caution banner, a nearing-limit indicator, a soloed/overridden state in a tool.
     - **Not** `destructive`. Warning is *advisory*; destructive is *consequential*. If nothing is lost by continuing, it is a warning.
 - **`highlight`** — A marker on content the user is meant to notice — search hits, diffs, annotations. *Use for:* Highlighting matched text, a changed line, a called-out passage.
     - **Not** `accent`. `accent` is UI state that follows the pointer or selection; `highlight` marks the *content* and persists independently of interaction.
-- **`tone-standard-foreground`** — Ink paired with `tone-standard`. Evaluate the rendered contrast together; never choose it independently. *Use for:* Whenever the background is `tone-standard`. Use them as a pair — `bg-tone-standard text-tone-standard-foreground` — so a theme can retune the surface and the ink together.
+- **`tone-3-foreground`** — Ink paired with `tone-3`. Evaluate the rendered contrast together; never choose it independently. *Use for:* Whenever the background is `tone-3`. Use them as a pair — `bg-tone-3 text-tone-3-foreground` — so a theme can retune the surface and the ink together.
     - **Not** `foreground`. That is the ink for `background` only; on any other surface it is a contrast gamble that happens to pass in the default theme and fails in another.
-- **`tone-collectible-foreground`** — Ink paired with `tone-collectible`. Evaluate the rendered contrast together; never choose it independently. *Use for:* Whenever the background is `tone-collectible`. Use them as a pair — `bg-tone-collectible text-tone-collectible-foreground` — so a theme can retune the surface and the ink together.
+- **`tone-2-foreground`** — Ink paired with `tone-2`. Evaluate the rendered contrast together; never choose it independently. *Use for:* Whenever the background is `tone-2`. Use them as a pair — `bg-tone-2 text-tone-2-foreground` — so a theme can retune the surface and the ink together.
     - **Not** `foreground`. That is the ink for `background` only; on any other surface it is a contrast gamble that happens to pass in the default theme and fails in another.
-- **`tone-edition-foreground`** — Ink paired with `tone-edition`. Evaluate the rendered contrast together; never choose it independently. *Use for:* Whenever the background is `tone-edition`. Use them as a pair — `bg-tone-edition text-tone-edition-foreground` — so a theme can retune the surface and the ink together.
+- **`tone-1-foreground`** — Ink paired with `tone-1`. Evaluate the rendered contrast together; never choose it independently. *Use for:* Whenever the background is `tone-1`. Use them as a pair — `bg-tone-1 text-tone-1-foreground` — so a theme can retune the surface and the ink together.
     - **Not** `foreground`. That is the ink for `background` only; on any other surface it is a contrast gamble that happens to pass in the default theme and fails in another.
 - **`tone-info-foreground`** — Ink paired with `tone-info`. Evaluate the rendered contrast together; never choose it independently. *Use for:* Whenever the background is `tone-info`. Use them as a pair — `bg-tone-info text-tone-info-foreground` — so a theme can retune the surface and the ink together.
     - **Not** `foreground`. That is the ink for `background` only; on any other surface it is a contrast gamble that happens to pass in the default theme and fails in another.
@@ -173,11 +173,11 @@ Which token to reach for, and what it is most often confused with. Generated fro
 
 ### layout (11)
 
-- **`rhythm-unit`** — The vertical rhythm base — two spacing steps (8px at the default scale). Every vertical measure is a multiple of it, and it follows the density control with the spacing scale. *Use for:* Through `Stack`/`Row`/`Grid` gap numbers, which are rhythm units rather than pixels. A gap of 2 is 16px at the default scale, and grows or tightens with density.
+- **`rhythm-unit`** — The vertical rhythm base — one baseline step (8px at the default scale). Every vertical measure is a multiple of it, and it follows the type and the density control. *Use for:* Through `Stack`/`Row`/`Grid` gap numbers, which are rhythm units rather than pixels. A gap of 2 is 16px at the default scale, and grows or tightens with density.
     - **Not** arbitrary vertical spacing. The rhythm is what makes unrelated sections of a page feel like one document.
 - **`grid-columns`** — The column count of the content grid — 12. *Use for:* `Grid`/`Columns`, WITHIN a region, for genuinely multi-column content.
     - **Not** using a column span as the page's reading width. A span is not a measure — see `measure-prose`.
-- **`grid-gutter`** — The gap between grid columns. *Use for:* `Grid`/`Columns` spacing.
+- **`grid-gutter`** — The gap between grid columns and rows — 2 baseline steps on phones, 3 on desktop, snapped to the step. *Use for:* `Grid`/`Columns` spacing.
 - **`page-inset`** — The page's outer breathing room, left and right. *Use for:* The gutter between content and the viewport edge, at every breakpoint.
     - **Not** a global max-width. Sable caps width per REGION by role, never once for the whole page.
 - **`measure-prose`** — The maximum comfortable line length for prose, in `ch`. *Use for:* Any long-form text column.
@@ -335,4 +335,18 @@ Which token to reach for, and what it is most often confused with. Generated fro
 - **`hairline-strong`** — A hairline that must be seen — an input edge, a swatch ring. *Use for:* Bounding a control whose fill is arbitrary (a colour swatch) or user content.
     - **Not** `hairline`, when the line would otherwise disappear against what it bounds.
 - **`border-floating`** — The edge of a floating surface. Fainter than `border`: the shadow carries the elevation. *Use for:* Every floating surface — popover, menu, select, tooltip, dialog, sheet, toast, a floating panel — as `border-border-floating` or `ring-border-floating`, together with `bg-popover` and a `shadow-md`+ shadow. Derived for every theme (a faint alpha of the foreground); a theme may tune it with `--theme-border-floating`.
-    - **Not** `border`. A full hairline plus a shadow stacks into a heavy outline around anything that floats. `border` is for resting edges: inputs, cards, badges.
+    - **Not** `border`. A full hairline plus a shadow stacks into a heavy outline around anything that floats. `border` is for resting edges: inputs, cards, badges.
+
+### Generated palette
+
+More colour for apps, generated from the active theme: neutral and eight hue families, plus a 50–950 scale under every tone. Each family keeps its hue and leans toward the brand (half the gap, at most 15°; --theme-palette-harmony scales it, 0 = own hues). Neutral is the theme's --background mixed toward its --foreground. Steps follow the mode: low steps sit near the page and high ones far from it in light and dark alike, so a pair needs no dark: variant. For decorative and categorical colour (tags, avatars, labels, legends, illustration); surfaces, text and actions take roles. Components never name a step.
+
+- **Families:** `neutral`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple`, `pink`, each 50–950.
+- **Tone scales:** `tone-1-*`, `tone-2-*`, `tone-3-*`, `tone-info-*`, `tone-warning-*`, `success-*`, `destructive-*`; step 500 is the tone itself.
+- **Use as:** bg-blue-100, text-blue-800, border-neutral-200, bg-tone-1-100 — or var(--teal-500). Tailwind's other families (slate, gray, zinc, stone, amber, lime, emerald, cyan, sky, indigo, violet, fuchsia, rose) are switched off.
+- **tag / label:** bg-<family>-100 text-<family>-800 (held to 4.5:1 in every theme and mode)
+- **text on the page:** text-<family>-700
+- **solid fill:** bg-<family>-700 text-<family>-50
+- **hairline:** border-<family>-300
+- **Components:** Badge, Pill and StatusDot take a family as tone (tone="blue"): a category with no meaning attached.
+- **Slots:** data-palette="<family>" on an element fills these from that family, so one set of classes paints any family: bg-palette-wash text-palette-text.

package/llms/reference/utilities.md

@@ -101,7 +101,7 @@ The `@utility` and `@custom-variant` layer in `styles.css`: what each one is, wh
     - `<ol className="sable-list-numbered"><li>Install</li><li>Import the styles</li></ol>`
 - **`sable-list-dl`** — Label/value pairs on a native `<dl>`: muted label-tier `<dt>`s and body-tier `<dd>`s on a baseline-aligned two-column grid; long values wrap inside their column. Colour a status value with a `text-*` utility on its `<dd>`. *Use for:* Read-only details: an order summary, a record's metadata, a settings summary, profile stats.
     - **Instead of** A grid of `<div>`s (screen readers lose the term/value pairing), or Table for a single record. For editable values use Form and Field.
-    - `<dl className="sable-list-dl"><dt>Network</dt><dd>Solana</dd><dt>Status</dt><dd className="text-success">Active</dd></dl>`
+    - `<dl className="sable-list-dl"><dt>Plan</dt><dd>Studio</dd><dt>Status</dt><dd className="text-success">Active</dd></dl>`
 - **`sable-list-dl-2`** — Two label/value pairs a row once the nearest `@container` ancestor is at least 28rem wide. Add to `sable-list-dl`. *Use for:* A compact metadata block in a wide card or panel. Put `@container` on a parent so it measures the room it actually has.
     - **Instead of** A viewport breakpoint, which gives a narrow card on a wide screen four columns it cannot fit.
     - `<div className="@container"><dl className="sable-list-dl sable-list-dl-2">…</dl></div>`

package/llms/tasks/adding-a-component.md

@@ -81,7 +81,10 @@ because the meta wins *whole* and silently discards the other.
 
 ## The hard rules
 
-1. **Semantic tokens only** — never hex/oklch, never a raw palette step.
+1. **Semantic tokens only** — never hex/oklch, never a raw palette step, not
+   even the generated palette's (`bg-blue-500`; that is for apps). A component
+   that takes a palette family as `tone` sets `data-palette` to it and paints
+   from the slots that fills (`bg-palette-wash text-palette-text`), as Badge does.
 2. **Paired typography utilities** — never `text-{size}` + `font-{weight}`.
 3. **`primitives/` is behaviour, `components/` is the public API.** Base UI is
    wrapped and re-exported; consumers import only from the root barrel.

package/llms/tasks/building-a-page.md

@@ -71,6 +71,25 @@ Pick each route's `max` by what the person mainly does on it:
   (a copy in `light` or `dark` wins over it); keep the role names and change
   the values.
 
+## Columns and rhythm
+
+- **Flex or grid.** One direction is `Stack` (column) or `Row` (row). Content
+  that has to line up across rows *and* columns is `Grid`/`Columns`. A card's
+  single column is a `Stack`, never a one-track grid.
+- **Columns are a choice per route.** Record it in the brief next to the width:
+  which content spans which of the 12 columns, and where it folds
+  (`<Col span={{ base: 12, lg: 8 }}>`). The grid does not fold on its own. A
+  route that is one reading measure has no columns, and the brief says so.
+- **Vertical space is measured in lines.** The baseline is one line of body
+  text split into steps (8px at the default type). Gap numbers on `Stack`/
+  `Row`/`Grid` are steps; in Tailwind, even steps (`gap-4`, `py-6`, `mt-12`)
+  are whole steps and odd ones (`py-3`, `gap-5`) are half a step. Title to
+  description is one step, between groups one to two lines, between sections
+  three or more.
+- **It is a rhythm, not a lock.** A card with a button or a code block is as
+  tall as its content. Keep the spacing between blocks in steps and let
+  components be; never pad or nudge them to pin text to lines.
+
 ## Typography: pick the tier by ROLE, not by size
 
 | tier | for | not |
@@ -100,6 +119,27 @@ intent, and what it gets confused with, is in
 Ink is never chosen independently of its surface: `bg-card text-card-foreground`,
 as a pair.
 
+### More colour: the generated palette
+
+When a page needs colour that is not a role (tags, avatars, project labels, a
+chart legend, illustration), reach for the generated palette, not hex and not a
+theme's own ramp. Every theme has `neutral`, `red`, `orange`, `yellow`,
+`green`, `teal`, `blue`, `purple` and `pink` (50–950), plus a scale under
+every tone (`tone-1-100`, `success-700`). Each family leans toward the brand, so
+the set belongs to the theme, and neutral is the theme's own page-to-ink ramp.
+
+- On a component, the family is the tone: `<Badge tone="teal">Research</Badge>`,
+  `<Pill tone="blue">`, `<StatusDot tone="pink" />`. A family is a category with
+  no meaning attached; a status is still `success`, `warning` or `destructive`.
+- On your own element, use the pairs: `bg-blue-100 text-blue-800` (a tag),
+  `text-blue-700` (text on the page), `bg-blue-700 text-blue-50` (a solid
+  fill), `border-blue-300` (a hairline). Steps follow the mode (a low step is
+  always near the page), so these need no `dark:`.
+- Surfaces, body text and actions still take roles. The palette never replaces
+  `bg-card` or `bg-primary`.
+
+The full reference is `llms/reference/token-intent.md` → Generated palette.
+
 ## The traps
 
 - **A `Card` is a container, not a heading or a landmark.** If its title is the

package/llms/tasks/building-with-sable.md

@@ -43,6 +43,10 @@ for each recognizable element with `sable search "<need>" --json`; inspect the
 matching `component <Name> --props` and `--examples` before implementation.
 Use Sable's composed anatomy and supported variants. A hand-built button, field,
 menu, dialog, table, or card that imitates a shipped component violates the contract.
+That binds behaviour and parts, not layouts. Results marked ◇ (patterns, blocks,
+and compositions such as MediaTile) are references: use one when its layout fits
+the brief, otherwise compose your own from Sable's parts. The brief's signature
+surfaces, where the product's identity lives, are designed from its direction.
 
 Resolve styling through component variants, documented utilities/recipes, then
 semantic tokens. App-owned CSS handles uncovered content and composition; it

package/llms/tasks/converting-an-app.md

@@ -35,7 +35,9 @@ loudest and least clearly ("invalid hook call").
 
 The most reliable signal that a conversion is real: the app's own CSS variable
 block shrinks to almost nothing. Anything that remains should be *domain* colour,
-not UI colour.
+not UI colour. Most domain colour has a home too: a tag or category colour maps
+to a palette family (`<Badge tone="blue">`, `bg-blue-100 text-blue-800`), which
+follows the theme where the app's own hex never did.
 
 Grep for orphaned references afterwards. A CSS variable that no longer exists
 resolves to nothing and the declaration is dropped — **silently**. A checkerboard

package/llms/tasks/using-presets.md

@@ -17,6 +17,10 @@ prints a complete starting record; the public `PRESET_TOKEN_NAMES` is authoritat
 Font stacks are requirements, not downloaded fonts. Declare matching stacks in
 the font metadata and tokens. Resolve internal palette variables before saving;
 portable presets may reference public Sable tokens, not private palette names.
+A preset does not carry the generated palette (`bg-blue-500` and the rest): it is
+computed from the preset's own primary, page and ink. `theme-palette-harmony`
+(0 keeps the families' own hues, 1 is the default lean toward the brand) is the
+one palette token a preset may set.
 The validator rejects unknown tokens and CSS that can escape its declaration.
 `sable preset --check` also holds labels on brand and status fills to 4.5:1 and APCA Lc 60
 and suggests a pair that reads; a preset may keep a pair deliberately through