@sableui/react 0.9.0 → 0.10.0

package/llms/blocks/product-card-block.md

@@ -1,14 +1,14 @@
 # ProductCardBlock
 
-A product card: edge-to-edge artwork, title and maker, an edition Badge, and the price beside a single buy action.
+A product card: edge-to-edge product image, title and maker, a status Badge, and the price beside a single buy action.
 
-**Intent:** Reach for this for a product, edition or listing in a grid or a featured slot. For a row in a dense list, use an Entity with the image as `leading` instead.
+**Intent:** Reach for this for a product or listing in a grid or a featured slot. For a row in a dense list, use an Entity with the image as `leading` instead.
 
 **Block:** Commerce · card · designed for 16rem–20rem wide (fills its container up to the max)
 
 ## Notes
 
-- The artwork runs to the card's edges; the card clips it to its own corners (overflow-hidden).
+- The image runs to the card's edges; the card clips it to its own corners (overflow-hidden).
 - Prices are `text-mono-lg` — the metric mono tier with tabular figures — never a heading tier.
 - The placeholder art is painted from the palette's decorative tones so it follows the theme; swap it for the product image with real alt text.
 
@@ -23,7 +23,7 @@ A product card: edge-to-edge artwork, title and maker, an edition Badge, and the
 import { AspectBox, Badge, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, cn, MediaImage } from "@sableui/react"
 
 // `image` is the product shot URL; left empty, it paints art seeded by the title.
-const product = { title: "Untitled (gold rush)", maker: "Mara Okafor", image: "", edition: "12 of 50", price: "0.42 SOL" }
+const product = { title: "Linen throw blanket", maker: "Northfield Home", image: "", badge: "New", price: "$64.00" }
 
 
 export interface ProductCardBlockProps {
@@ -44,12 +44,12 @@ export function ProductCardBlock({ className, framed = true, onCollect }: Produc
 				<CardTitle>{product.title}</CardTitle>
 				<CardDescription>{product.maker}</CardDescription>
 				<CardAction>
-					<Badge tone="edition">{product.edition}</Badge>
+					<Badge tone="1">{product.badge}</Badge>
 				</CardAction>
 			</CardHeader>
 			<CardFooter className="justify-between pt-4">
 				<span className="text-mono-lg">{product.price}</span>
-				<Button onClick={onCollect}>Collect</Button>
+				<Button onClick={onCollect}>Add to cart</Button>
 			</CardFooter>
 		</Card>
 	)

package/llms/blocks/profile-card-block.md

@@ -27,7 +27,7 @@ const profile = {
 	name: "Juno Avery",
 	initials: "JA",
 	handle: "@juno · Sound and light",
-	bio: "Field recordings, slowed down. New edition every full moon.",
+	bio: "Field recordings, slowed down. New track every full moon.",
 	stats: [
 		{ value: "128", label: "posts" },
 		{ value: "4.2k", label: "followers" },

package/llms/blocks/profile-form-block.md

@@ -26,7 +26,7 @@ const profile = {
 	name: "Ada Lovelace",
 	initials: "AL",
 	handle: "ada",
-	bio: "Generative artist working in plotted ink and code. New editions of 25 to 100 every month.",
+	bio: "Product designer working on tools for small teams. Writing about process every month.",
 	timezone: "europe-london",
 }
 
@@ -51,7 +51,7 @@ export function ProfileFormBlock({ className, framed = true, onSave }: ProfileFo
 		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-2xl", className)}>
 			<CardHeader>
 				<CardTitle render={<h2 />}>Profile</CardTitle>
-				<CardDescription>How collectors see you.</CardDescription>
+				<CardDescription>How your team sees you.</CardDescription>
 			</CardHeader>
 			{/* The one explicit save: profile text is drafted, then committed. */}
 			<Form
@@ -85,7 +85,7 @@ export function ProfileFormBlock({ className, framed = true, onSave }: ProfileFo
 								<Input defaultValue={profile.handle} 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={profile.bio} />
 						</Field>
 						<Grid cols={{ base: 1, sm: 2 }} gap={3}>

package/llms/blocks/revenue-breakdown-block.md

@@ -25,10 +25,10 @@ import { Badge, Card, CardAction, CardContent, CardDescription, CardHeader, cn,
 const revenue = { label: "Revenue this month", total: "$12,480", change: "+8.2%" }
 
 const segments = [
-	{ label: "Editions", value: 42, tone: "edition" },
-	{ label: "Collectibles", value: 27, tone: "collectible" },
-	{ label: "Standard", value: 19, tone: "standard" },
-	{ label: "Commissions", value: 12, tone: "info" },
+	{ label: "Direct", value: 42, tone: "1" },
+	{ label: "Partners", value: 27, tone: "2" },
+	{ label: "Referrals", value: 19, tone: "3" },
+	{ label: "Resellers", value: 12, tone: "info" },
 ] as const
 
 export interface RevenueBreakdownBlockProps {
@@ -50,7 +50,7 @@ export function RevenueBreakdownBlock({ className, framed = true }: RevenueBreak
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4 pt-2">
 				<span className="text-mono-xl">{revenue.total}</span>
-				<SegmentedBar label="Revenue by type" segments={[...segments]} size="lg" />
+				<SegmentedBar label="Revenue by channel" segments={[...segments]} size="lg" />
 				{/* Two columns while each entry fits whole, one when they would not:
 				    sized in em, so a larger type or a narrower card drops to one.
 				    aria-hidden: the bar already reads every share aloud. */}

package/llms/blocks/stat-row-block.md

@@ -25,9 +25,9 @@ import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, G
 
 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: "Orders", value: "1,284", delta: "+3.1%", up: true, note: "182 first-time" },
+	{ label: "New customers", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
+	{ label: "Conversion", value: "3.4%", delta: "−0.2%", up: false, note: "6 open trials" },
 ]
 
 export interface StatRowBlockProps {

package/llms/blocks/task-list-block.md

@@ -24,9 +24,9 @@ import { useState, useId } from "react"
 import { Badge, Button, Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, cn, Icon, Label } from "@sableui/react"
 
 const tasks = [
-	{ title: "Pick the cover type", tag: "Design", tone: "collectible", done: true },
+	{ title: "Pick the cover type", tag: "Design", tone: "2", done: true },
 	{ title: "Wire up checkout", tag: "Engineering", tone: "info", done: false },
-	{ title: "Draft launch post", tag: "Launch", tone: "edition", done: false },
+	{ title: "Draft launch post", tag: "Launch", tone: "1", done: false },
 ] as const
 
 export interface TaskListBlockProps {

package/llms/blocks/team-members-block.md

@@ -59,7 +59,7 @@ export function TeamMembersBlock({ className, framed = true, onInvite, onMemberA
 						subtitle={m.email}
 						action={
 							<div className="flex items-center gap-2">
-								<Badge appearance={m.role === "Pending" ? "outline" : "plain"} tone={m.role === "Owner" ? "edition" : "neutral"} size="sm">
+								<Badge appearance={m.role === "Pending" ? "outline" : "plain"} tone={m.role === "Owner" ? "1" : "neutral"} size="sm">
 									{m.role}
 								</Badge>
 								{/* The owner is not managed from here; a placeholder keeps the column aligned. */}

package/llms/blocks/wallet-block.md

@@ -2,7 +2,7 @@
 
 A balance card: the balance in the metric mono tier, Send and Receive as an equal pair, and recent activity as Entity rows with signed amounts.
 
-**Intent:** Reach for this for a wallet, account balance or credits summary with its latest movements. For a full transaction history with filters, use a DataTable.
+**Intent:** Reach for this for an account balance, store credit or credits summary with its latest movements. For a full transaction history with filters, use a DataTable.
 
 **Block:** Commerce · card · designed for 18rem–20rem wide (fills its container up to the max)
 
@@ -10,24 +10,24 @@ A balance card: the balance in the metric mono tier, Send and Receive as an equa
 
 - The balance is CardTitle at `text-mono-xl` — tabular figures, never a heading tier — under its label as CardDescription.
 - Send is primary and Receive secondary, side by side at equal width: two directions of one action, with sending the riskier and more frequent.
-- Incoming amounts are `text-success`; outgoing stay muted rather than red, because a withdrawal is not an error.
+- Incoming amounts are `text-success`; outgoing stay muted rather than red, because a payout or refund is not an error.
 
 ## Accessibility
 
 - Each activity row's leading swatch is aria-hidden; the title and detail carry the meaning.
-- Amounts keep their sign in text (+0.80 / -1.50), so the direction does not depend on colour.
+- Amounts keep their sign in text (+49.00 / -850.00), so the direction does not depend on colour.
 
 ## Source
 
 ```tsx
 import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, Entity, Icon } from "@sableui/react"
 
-const balance = "14.62 SOL"
+const balance = "$2,418.50"
 
 const activity = [
-	{ title: "Sold “Dusk, no. 4”", detail: "Edition · 2h ago", amount: "+0.80", tone: "edition" },
-	{ title: "Royalty", detail: "Collectible · Yesterday", amount: "+0.12", tone: "collectible" },
-	{ title: "Withdrawal", detail: "To Phantom · Mon", amount: "-1.50", tone: "standard" },
+	{ title: "Subscription", detail: "Team plan · 2h ago", amount: "+49.00", tone: "1" },
+	{ title: "Refund", detail: "Order 1042 · Yesterday", amount: "-24.00", tone: "2" },
+	{ title: "Payout", detail: "To checking · Mon", amount: "-850.00", tone: "3" },
 ]
 
 export interface WalletBlockProps {

package/llms/components/accordion.md

@@ -73,7 +73,7 @@ Use Accordion to reveal a vertical set of related sections while keeping the sur
 ```tsx
 import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@sableui/react"
 
-<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger>Is it permanent?</AccordionTrigger><AccordionPanel>Yes — stored on Arweave.</AccordionPanel></AccordionItem><AccordionItem value="b"><AccordionTrigger>How much?</AccordionTrigger><AccordionPanel>A one-time mint fee.</AccordionPanel></AccordionItem></Accordion>
+<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger>Can I cancel anytime?</AccordionTrigger><AccordionPanel>Yes — from billing settings.</AccordionPanel></AccordionItem><AccordionItem value="b"><AccordionTrigger>How much?</AccordionTrigger><AccordionPanel>$16 per seat each month.</AccordionPanel></AccordionItem></Accordion>
 ```
 
 ### Multiple open
@@ -89,5 +89,5 @@ import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@sab
 ```tsx
 import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, Icon } from "@sableui/react"
 
-<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger indicator={<Icon name="plus" className="text-xs text-muted-foreground transition-transform [[data-panel-open]_&]:rotate-45" />}>Is it permanent?</AccordionTrigger><AccordionPanel>Yes — stored on Arweave.</AccordionPanel></AccordionItem></Accordion>
+<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger indicator={<Icon name="plus" className="text-xs text-muted-foreground transition-transform [[data-panel-open]_&]:rotate-45" />}>Can I cancel anytime?</AccordionTrigger><AccordionPanel>Yes — from billing settings.</AccordionPanel></AccordionItem></Accordion>
 ```

package/llms/components/app-header.md

@@ -23,7 +23,7 @@ Use AppHeader for compact application chrome at the top of a screen, usually wit
 | --- | --- | --- | --- |
 | leading | ReactNode | — | Leading slot — back button, create action, or menu trigger. |
 | title | ReactNode | — | Center slot — brand wordmark or contextual page title. |
-| actions | ReactNode | — | Trailing slot — wallet trigger, action buttons. |
+| actions | ReactNode | — | Trailing slot — account menu, action buttons. |
 
 ## Tokens used
 

package/llms/components/app-shell.md

@@ -72,7 +72,7 @@ import { AppHeader, AppShell, Banner, BottomNav, BottomNavItem, Icon, PageHeader
 // <Link> = your router's link (react-router, next/link, @tanstack/router, …)
 
 <AppShell
-  banners={<Banner tone="warning">Network congested — mints may be slow.</Banner>}
+  banners={<Banner tone="warning">Sync is delayed — changes may be slow to appear.</Banner>}
   header={<AppHeader title="Studio" />}
   sidebar={
     <Sidebar>
@@ -91,7 +91,7 @@ import { AppHeader, AppShell, Banner, BottomNav, BottomNavItem, Icon, PageHeader
   }
 >
   <Region max="feed">
-    <PageHeader title="Home" description="Latest posts from artists you follow." />
+    <PageHeader title="Home" description="Latest posts from people you follow." />
   </Region>
 </AppShell>
 ```

package/llms/components/area-chart.md

@@ -44,7 +44,7 @@ Use AreaChart for volume over time — visitors, revenue, usage — where the fi
 
 ## Tokens used
 
-`tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
+`tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
 
 ## Motion
 

package/llms/components/badge.md

@@ -2,7 +2,7 @@
 
 **Status:** stable
 
-Compact static label, set on two axes: appearance (soft, outline, solid, overlay on media, plain text) and tone (neutral or a semantic tone). An optional leading icon, or a status dot (with pulse) for state.
+Compact static label, set on two axes: appearance (soft, outline, solid, overlay on media, plain text) and tone (neutral, a semantic tone, or a palette family like blue for a category with no meaning attached). An optional leading icon, or a status dot (with pulse) for state.
 
 **Keywords:** badge, tag, label, status, metadata, chip, pill, tone, category
 
@@ -13,7 +13,7 @@ Use Badge for any short static label: metadata, categories, tone-coded labels, a
 ### Best practices
 
 - Do: Keep badge text short: one to three words or a compact count.
-- Do: Use tone variants when the badge carries meaning, such as success, warning, destructive, edition, or collectible.
+- Do: Use tone variants when the badge carries meaning, such as success, warning or destructive, or a decorative tone for a category or plan.
 - Do: Pair icons with text; the icon reinforces meaning but should not be the only cue.
 - Do: Choose appearance and tone separately: appearance is how loud it is (soft by default, solid for emphasis, overlay on images, plain for a status line); tone is what it means.
 - Don't: Use a Badge as a button. If it triggers an action, use Button, Toggle, or a menu item.
@@ -32,7 +32,7 @@ Use Badge for any short static label: metadata, categories, tone-coded labels, a
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | appearance | "soft" \| "outline" \| "solid" \| "overlay" \| "plain" | "soft" | How it is drawn. soft: a tinted fill (neutral is the secondary surface). outline: a hairline. solid: the tone at full strength (neutral is the inverted chip). overlay: legible on images — a dark scrim, or the solid tone. plain: no fill or padding, a status line. |
-| tone | "neutral" \| "standard" \| "collectible" \| "edition" \| "info" \| "success" \| "warning" \| "destructive" | "neutral" | What it means. Every appearance takes every tone. |
+| tone | "neutral" \| "1" \| "2" \| "3" \| "info" \| "success" \| "warning" \| "destructive" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "purple" \| "pink" | "neutral" | What it means. Every appearance takes every tone. The palette families (red … pink) are categories with no meaning attached — tags, labels, project colours — painted from the theme's generated palette, so they lean toward the brand and read in both modes. |
 | size | "sm" \| "md" | "md" | "sm" uses tighter padding + text-label-sm; "md" is the default look. |
 | icon | ReactNode | — | Optional leading glyph (e.g. <Icon name="lock" />), rendered before the children with the base gap. Ignored when dot is set. |
 | dot | boolean | false | A leading status dot in the badge's tone. With appearance="plain" it is a status line (● Ready). |
@@ -41,12 +41,12 @@ Use Badge for any short static label: metadata, categories, tone-coded labels, a
 ## Variants
 
 - **appearance**: soft, outline, solid, overlay, plain
-- **tone**: neutral, standard, collectible, edition, info, success, warning, destructive
+- **tone**: neutral, 1, 2, 3, info, success, warning, destructive, red, orange, yellow, green, teal, blue, purple, pink
 - **size**: sm, md
 
 ## Tokens used
 
-`secondary`, `secondary-foreground`, `border`, `foreground`, `background`, `muted`, `muted-foreground`, `tone-standard`, `tone-collectible`, `tone-edition`, `tone-info`, `success`, `tone-warning`, `destructive`, `overlay`, `overlay-foreground`, `tone-standard-foreground`, `tone-collectible-foreground`, `tone-edition-foreground`, `tone-info-foreground`, `success-foreground`, `tone-warning-foreground`, `destructive-foreground`
+`palette-wash`, `palette-wash-strong`, `palette-edge`, `palette-dot`, `palette-solid`, `palette-text`, `palette-solid-ink`, `secondary`, `secondary-foreground`, `border`, `foreground`, `background`, `muted`, `muted-foreground`, `tone-1`, `tone-2`, `tone-3`, `tone-info`, `success`, `tone-warning`, `destructive`, `overlay`, `overlay-foreground`, `tone-1-foreground`, `tone-2-foreground`, `tone-3-foreground`, `tone-info-foreground`, `success-foreground`, `tone-warning-foreground`, `destructive-foreground`
 
 ## Accessibility
 
@@ -65,7 +65,15 @@ Use Badge for any short static label: metadata, categories, tone-coded labels, a
 ```tsx
 import { Badge, Row } from "@sableui/react"
 
-<Row gap={1}><Badge tone="edition">Edition</Badge><Badge tone="collectible">Collectible</Badge><Badge tone="standard">Standard</Badge></Row>
+<Row gap={1}><Badge tone="1">Business</Badge><Badge tone="2">Studio</Badge><Badge tone="3">Starter</Badge></Row>
+```
+
+### Palette colours (categories)
+
+```tsx
+import { Badge, Row } from "@sableui/react"
+
+<Row gap={1}><Badge tone="blue">Design</Badge><Badge tone="teal">Research</Badge><Badge tone="orange">Marketing</Badge><Badge tone="pink" appearance="outline">Ops</Badge><Badge tone="purple" appearance="solid">Launch</Badge></Row>
 ```
 
 ### Solid
@@ -105,7 +113,7 @@ import { Badge } from "@sableui/react"
 ```tsx
 import { Badge, Icon, Row } from "@sableui/react"
 
-<Row gap={1}><Badge>12 editions</Badge><Badge appearance="outline">Open edition</Badge><Badge tone="info" icon={<Icon name="info" />}>Curated</Badge></Row>
+<Row gap={1}><Badge>12 projects</Badge><Badge appearance="outline">Draft</Badge><Badge tone="info" icon={<Icon name="info" />}>Curated</Badge></Row>
 ```
 
 ### Semantic state

package/llms/components/banner.md

@@ -2,7 +2,7 @@
 
 **Status:** stable
 
-Full-width, page-level announcement bar. A tone (neutral, info, success, warning, edition, destructive) × an appearance (soft tint or loud solid fill), and an optional leading scope label. Centers its message, or — with a trailing action — switches to a leading-text + trailing-button layout. Optionally sticky and dismissible.
+Full-width, page-level announcement bar. A tone (neutral, info, success, warning, the decorative 1, destructive) × an appearance (soft tint or loud solid fill), and an optional leading scope label. Centers its message, or — with a trailing action — switches to a leading-text + trailing-button layout. Optionally sticky and dismissible.
 
 **Keywords:** banner, announcement, alert, status, message, warning, success, offline, sticky
 
@@ -31,7 +31,7 @@ Use Banner for page-level or app-level messages that affect the current experien
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tone | "neutral" \| "info" \| "success" \| "warning" \| "edition" \| "destructive" | "neutral" | Neutral surface or a tone that encodes the announcement's intent (info / success / warning / edition / destructive). |
+| tone | "neutral" \| "info" \| "success" \| "warning" \| "1" \| "destructive" | "neutral" | Neutral surface or a tone that encodes the announcement's intent (info / success / warning / the decorative 1 / destructive). |
 | appearance | "soft" \| "solid" | "soft" | "soft" is a quiet tinted fill; "solid" is the full tone with its paired ink — for loud, can't-miss states (offline, chain-down, RPC errors). |
 | label | ReactNode | — | A short scope label ("Preview", "Staging", a project name) in a leading chip — a Badge that reads on soft and solid fills. |
 | action | ReactNode | — | A trailing action (e.g. a Button). Switches the bar to leading text + trailing action instead of centered text. |
@@ -42,12 +42,12 @@ Use Banner for page-level or app-level messages that affect the current experien
 
 ## Variants
 
-- **tone**: neutral, info, success, warning, edition, destructive
+- **tone**: neutral, info, success, warning, 1, destructive
 - **appearance**: soft, solid
 
 ## Tokens used
 
-`secondary`, `secondary-foreground`, `foreground`, `background`, `tone-info`, `tone-info-foreground`, `success`, `success-foreground`, `tone-warning`, `tone-warning-foreground`, `tone-edition`, `tone-edition-foreground`, `destructive`, `destructive-foreground`
+`secondary`, `secondary-foreground`, `foreground`, `background`, `tone-info`, `tone-info-foreground`, `success`, `success-foreground`, `tone-warning`, `tone-warning-foreground`, `tone-1`, `tone-1-foreground`, `destructive`, `destructive-foreground`
 
 ## Accessibility
 
@@ -75,7 +75,7 @@ import { Banner } from "@sableui/react"
 ```tsx
 import { Banner } from "@sableui/react"
 
-<Banner tone="destructive" appearance="solid" live="assertive">Blockchain unavailable. Collect and buy are temporarily disabled.</Banner>
+<Banner tone="destructive" appearance="solid" live="assertive">Payments are down. Checkout and upgrades are temporarily disabled.</Banner>
 ```
 
 ### Success
@@ -107,7 +107,7 @@ import { Banner } from "@sableui/react"
 ```tsx
 import { Banner, Button } from "@sableui/react"
 
-<Banner tone="warning" action={<Button variant="outline" size="sm">Reconnect</Button>}>Wallet connection paused.</Banner>
+<Banner tone="warning" action={<Button variant="outline" size="sm">Reconnect</Button>}>Calendar sync paused.</Banner>
 ```
 
 ### App-shell outage

package/llms/components/bar-chart.md

@@ -42,13 +42,13 @@ Use BarChart to compare amounts across categories — the default chart for "how
 | stacked | boolean \| "expand" | false | Stack the series in one bar, or `"expand"` to show each category as 100%. Unstacked series sit side by side. |
 | labels | boolean \| "inside" | false | Print each bar's value at its end, or (`"inside"`, horizontal) the category name inside the bar as well. |
 | colorBy | "series" \| "index" | "series" | Colour by series, or give each category its own tone (one series). |
-| negativeTone | "edition" \| "collectible" \| "standard" \| "info" \| "warning" \| "primary" \| "neutral" \| "success" \| "destructive" | — | Colour negative values with this tone. |
+| negativeTone | "1" \| "2" \| "3" \| "info" \| "warning" \| "primary" \| "neutral" \| "success" \| "destructive" | — | Colour negative values with this tone. |
 | radius | number | 4 | Corner radius of each bar's far end, in px. Stacks round only the outer segment. |
 | barWidth | number | 24 | Maximum thickness of a bar, in px: the band's leftover is air, not a fatter bar. Raise it for a bolder presentation look. |
 
 ## Tokens used
 
-`tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
+`tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `primary`, `muted-foreground`, `border`, `popover`, `popover-foreground`, `foreground`, `background`
 
 ## Motion
 

package/llms/components/breadcrumbs.md

@@ -63,7 +63,7 @@ Use Breadcrumbs to show the user's location inside a hierarchy and provide light
 ```tsx
 import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, Breadcrumbs, BreadcrumbSeparator } from "@sableui/react"
 
-<Breadcrumbs><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink href="/library">Library</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Editions</BreadcrumbPage></BreadcrumbItem></Breadcrumbs>
+<Breadcrumbs><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink href="/library">Library</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Reports</BreadcrumbPage></BreadcrumbItem></Breadcrumbs>
 ```
 
 ### Custom separator

package/llms/components/button.md

@@ -88,7 +88,7 @@ Use Button when the user commits an action, submits a form, opens UI, or confirm
 ```tsx
 import { Button } from "@sableui/react"
 
-<Button>Collect</Button>
+<Button>Save changes</Button>
 ```
 
 ### Secondary + ghost
@@ -145,7 +145,7 @@ import { Button, Row } from "@sableui/react"
 ```tsx
 import { Button, Row } from "@sableui/react"
 
-<Row gap={1}><Button variant="secondary">Cancel</Button><Button variant="destructive">Delete edition</Button></Row>
+<Row gap={1}><Button variant="secondary">Cancel</Button><Button variant="destructive">Delete project</Button></Row>
 ```
 
 ### Leading icon
@@ -228,5 +228,5 @@ import { Button } from "@sableui/react"
 ```tsx
 import { Banner, Button } from "@sableui/react"
 
-<Banner tone="warning" appearance="solid" action={<Button variant="on-color" size="sm">Reconnect</Button>}>Wallet connection paused.</Banner>
+<Banner tone="warning" appearance="solid" action={<Button variant="on-color" size="sm">Reconnect</Button>}>Calendar sync paused.</Banner>
 ```

package/llms/components/card.md

@@ -83,7 +83,7 @@ Use Card for a discrete thing with its own boundary, such as one product, one no
 ```tsx
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@sableui/react"
 
-<Card><CardHeader><CardTitle>Edition</CardTitle><CardDescription>Limited run of 100.</CardDescription></CardHeader><CardContent><p className="text-body-md">Each collector receives a signed print and the on-chain edition.</p></CardContent></Card>
+<Card><CardHeader><CardTitle>Studio plan</CardTitle><CardDescription>Up to 10 seats.</CardDescription></CardHeader><CardContent><p className="text-body-md">Every seat gets unlimited projects and shared reports.</p></CardContent></Card>
 ```
 
 ### With a header action
@@ -91,7 +91,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@sabl
 ```tsx
 import { Button, Card, CardAction, CardContent, CardHeader, CardTitle, Icon } from "@sableui/react"
 
-<Card><CardHeader><CardTitle>Edition</CardTitle><CardAction><Button variant="ghost" size="icon-sm" aria-label="More"><Icon name="ellipsis" /></Button></CardAction></CardHeader><CardContent><p className="text-body-md text-muted-foreground">24 of 100 collected.</p></CardContent></Card>
+<Card><CardHeader><CardTitle>Seats</CardTitle><CardAction><Button variant="ghost" size="icon-sm" aria-label="More"><Icon name="ellipsis" /></Button></CardAction></CardHeader><CardContent><p className="text-body-md text-muted-foreground">24 of 100 seats in use.</p></CardContent></Card>
 ```
 
 ### Compact section panel
@@ -107,7 +107,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@sableui/react"
 ```tsx
 import { Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@sableui/react"
 
-<Card><CardHeader><CardTitle>Midnight Archive</CardTitle><CardDescription>Edition #24 of 100</CardDescription><CardAction><Badge tone="edition">Edition</Badge></CardAction></CardHeader><CardContent><p className="text-body-sm text-muted-foreground">A signed print and token-gated download for collectors.</p></CardContent><CardFooter><Button size="sm">Collect</Button><Button size="sm" variant="ghost">Preview</Button></CardFooter></Card>
+<Card><CardHeader><CardTitle>Midnight Archive</CardTitle><CardDescription>Template · 24 pages</CardDescription><CardAction><Badge tone="1">New</Badge></CardAction></CardHeader><CardContent><p className="text-body-sm text-muted-foreground">A project template with a brief, a timeline and a review board.</p></CardContent><CardFooter><Button size="sm">Use template</Button><Button size="sm" variant="ghost">Preview</Button></CardFooter></Card>
 ```
 
 ### Whole card as a link
@@ -123,7 +123,7 @@ import { Card, CardContent, CardDescription, CardTitle, Icon } from "@sableui/re
 ```tsx
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@sableui/react"
 
-<Card density="compact"><CardHeader><CardTitle>Revenue</CardTitle><CardDescription>Last 30 days</CardDescription></CardHeader><CardContent><p className="text-heading-3">128.4 SOL</p><p className="text-body-sm text-success">+12.8% from previous period</p></CardContent></Card>
+<Card density="compact"><CardHeader><CardTitle>Revenue</CardTitle><CardDescription>Last 30 days</CardDescription></CardHeader><CardContent><p className="text-heading-3">$12,840</p><p className="text-body-sm text-success">+12.8% from previous period</p></CardContent></Card>
 ```
 
 ### List card

package/llms/components/checkbox-card.md

@@ -40,17 +40,17 @@ Use CheckboxCard when an option needs more visual weight, supporting text, or ic
 | title | ReactNode | — | The card's primary label (text-title-sm). |
 | description | ReactNode | — | Optional supporting copy beneath the title (text-body-sm, muted). |
 | icon | ReactNode | — | Optional glyph (a solid <Icon>) in the tone colour. Its presence switches to the two-dimensional card RadioCard uses — icon top-left, checkbox top-right, copy below — so the two cards match in one form. |
-| tone | "neutral" \| "standard" \| "collectible" \| "edition" \| "info" \| "warning" | "neutral" | Semantic colour the checked state carries across the border, checkbox box, and icon. |
+| tone | "neutral" \| "3" \| "2" \| "1" \| "info" \| "warning" | "neutral" | Semantic colour the checked state carries across the border, checkbox box, and icon. |
 | value | string | — | Names the card inside a group-owned CheckboxGroup: the card is checked when the group's value array includes it. Also the value submitted with a form. Inside a CheckboxGroup, `name` stands in for `value` when `value` is omitted. |
 | checked / onCheckedChange / defaultChecked / disabled | Base UI Checkbox.Root props | — | Standard checkbox state. Without a group-owned value, each card is independent — drive checked/onCheckedChange per item for multi-select. |
 
 ## Variants
 
-- **tone**: neutral, standard, collectible, edition, info, warning
+- **tone**: neutral, 3, 2, 1, info, warning
 
 ## Tokens used
 
-`input`, `card`, `ring`, `primary`, `primary-foreground`, `accent`, `foreground`, `muted-foreground`, `tone-standard`, `tone-standard-foreground`, `tone-collectible`, `tone-collectible-foreground`, `tone-edition`, `tone-edition-foreground`, `tone-info`, `tone-info-foreground`, `tone-warning`, `tone-warning-foreground`
+`input`, `card`, `ring`, `primary`, `primary-foreground`, `accent`, `foreground`, `muted-foreground`, `tone-3`, `tone-3-foreground`, `tone-2`, `tone-2-foreground`, `tone-1`, `tone-1-foreground`, `tone-info`, `tone-info-foreground`, `tone-warning`, `tone-warning-foreground`
 
 ## Accessibility
 
@@ -86,7 +86,7 @@ import { Checkbox, CheckboxCard, CheckboxGroup, Field } from "@sableui/react"
 ```tsx
 import { CheckboxCard } from "@sableui/react"
 
-<CheckboxCard title="Email me a receipt" description="Sent when the mint settles" checked={receipt} onCheckedChange={setReceipt} />
+<CheckboxCard title="Email me a receipt" description="Sent when the payment settles" checked={receipt} onCheckedChange={setReceipt} />
 ```
 
 ### Toned with description
@@ -94,5 +94,5 @@ import { CheckboxCard } from "@sableui/react"
 ```tsx
 import { CheckboxCard } from "@sableui/react"
 
-<CheckboxCard tone="edition" title="Editions" description="Sell as numbered NFT editions" defaultChecked />
+<CheckboxCard tone="1" title="Reports" description="Weekly usage reports by email" defaultChecked />
 ```

package/llms/components/code-block.md

@@ -14,7 +14,7 @@ Use CodeBlock for multiline code samples that users may read, inspect, or copy.
 
 - Do: Give the snippet a filename, or a sentence of surrounding copy, when it helps readers and agents place it.
 - Do: Keep examples complete enough to teach the intended pattern.
-- Do: Wire highlighting once with CodeHighlightProvider and map token colors to semantic tone tokens (keywords → tone-edition, strings → success, comments → muted-foreground), so code follows the theme instead of a fixed palette.
+- Do: Wire highlighting once with CodeHighlightProvider and map token colors to semantic tone tokens (keywords → tone-1, strings → success, comments → muted-foreground), so code follows the theme instead of a fixed palette.
 - Don't: Do not put short inline identifiers in a CodeBlock; use Code for those.
 - Don't: Do not paste code with the indentation the surrounding file had. A block indented to sit inside your JSX shows the reader leading whitespace that is not part of the example.
 

package/llms/components/command-menu.md

@@ -112,7 +112,7 @@ import { CommandMenu, CommandMenuGroup, CommandMenuItem } from "@sableui/react"
 ```tsx
 import { CommandMenu, CommandMenuGroup, CommandMenuItem } from "@sableui/react"
 
-<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label="Create"><CommandMenuItem icon="plus" onSelect={() => createPost()}>New post</CommandMenuItem><CommandMenuItem icon="sparkles" onSelect={() => createEdition()}>New edition</CommandMenuItem></CommandMenuGroup><CommandMenuGroup label="Navigation"><CommandMenuItem icon="home" onSelect={() => navigate("/")}>Home</CommandMenuItem><CommandMenuItem icon="gear" onSelect={() => navigate("/settings")}>Settings</CommandMenuItem></CommandMenuGroup></CommandMenu>
+<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label="Create"><CommandMenuItem icon="plus" onSelect={() => createPost()}>New post</CommandMenuItem><CommandMenuItem icon="sparkles" onSelect={() => createProject()}>New project</CommandMenuItem></CommandMenuGroup><CommandMenuGroup label="Navigation"><CommandMenuItem icon="home" onSelect={() => navigate("/")}>Home</CommandMenuItem><CommandMenuItem icon="gear" onSelect={() => navigate("/settings")}>Settings</CommandMenuItem></CommandMenuGroup></CommandMenu>
 ```
 
 ### Consumer-owned ranking

package/llms/components/context-card.md

@@ -2,7 +2,7 @@
 
 **Status:** stable
 
-Hover/focus-triggered rich preview card over Base UI PreviewCard. Reveals contextual content (a profile, an edition summary) from an inline anchor; 20rem-wide surface with delayed open and collision-aware positioning.
+Hover/focus-triggered rich preview card over Base UI PreviewCard. Reveals contextual content (a profile, a project summary) from an inline anchor; 20rem-wide surface with delayed open and collision-aware positioning.
 
 **Keywords:** context card, rich tooltip, hover card, preview
 
@@ -61,7 +61,7 @@ Use ContextCard to show richer contextual content near a trigger without taking
 ```tsx
 import { Avatar, ContextCard, ContextCardContent, ContextCardTrigger, Entity } from "@sableui/react"
 
-<ContextCard><ContextCardTrigger render={<a href='/u/ada' className='text-title-sm underline-offset-2 hover:underline'>@ada</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='AL' size='lg' />} title='Ada Lovelace' subtitle='@ada' /><p className='mt-3 text-body-sm text-muted-foreground'>Minting generative editions on Solana. Permanently on Arweave.</p></ContextCardContent></ContextCard>
+<ContextCard><ContextCardTrigger render={<a href='/u/ada' className='text-title-sm underline-offset-2 hover:underline'>@ada</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='AL' size='lg' />} title='Ada Lovelace' subtitle='@ada' /><p className='mt-3 text-body-sm text-muted-foreground'>Product designer. Building tools for small teams.</p></ContextCardContent></ContextCard>
 ```
 
 ### With stat row

package/llms/components/destructive-action-modal.md

@@ -72,5 +72,5 @@ import { DestructiveActionModal } from "@sableui/react"
 ```tsx
 import { DestructiveActionModal, Note } from "@sableui/react"
 
-<DestructiveActionModal open={open} onOpenChange={setOpen} title='Delete this post?' confirmText='gold rush' confirmLabel='Delete forever' onConfirm={handleDelete}><Note tone='warning'>Collectors who minted this edition keep their copies.</Note></DestructiveActionModal>
+<DestructiveActionModal open={open} onOpenChange={setOpen} title='Delete this post?' confirmText='gold rush' confirmLabel='Delete forever' onConfirm={handleDelete}><Note tone='warning'>People you shared this post with lose access to it.</Note></DestructiveActionModal>
 ```

package/llms/components/dialog.md

@@ -107,7 +107,7 @@ import { Button, Carousel, Dialog, DialogContent, DialogTrigger } from "@sableui
 ```tsx
 import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@sableui/react"
 
-<Dialog><DialogTrigger render={<Button>Open</Button>} /><DialogContent><DialogHeader><DialogTitle>Edition details</DialogTitle><DialogDescription>A limited run of 100, stored permanently on Arweave.</DialogDescription></DialogHeader><DialogFooter><DialogClose render={<Button variant="secondary">Close</Button>} /><DialogClose render={<Button>Collect</Button>} /></DialogFooter></DialogContent></Dialog>
+<Dialog><DialogTrigger render={<Button>Open</Button>} /><DialogContent><DialogHeader><DialogTitle>Plan details</DialogTitle><DialogDescription>Up to 10 seats, billed monthly per seat.</DialogDescription></DialogHeader><DialogFooter><DialogClose render={<Button variant="secondary">Close</Button>} /><DialogClose render={<Button>Upgrade</Button>} /></DialogFooter></DialogContent></Dialog>
 ```
 
 ### Settings form
@@ -123,5 +123,5 @@ import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFo
 ```tsx
 import { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from "@sableui/react"
 
-<AlertDialog><AlertDialogTrigger render={<Button variant="destructive">Delete edition</Button>} /><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete edition?</AlertDialogTitle><AlertDialogDescription>This removes the edition and cannot be undone.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogClose render={<Button variant="secondary">Cancel</Button>} /><Button variant="destructive" onClick={deleteEdition}>Delete edition</Button></AlertDialogFooter></AlertDialogContent></AlertDialog>
+<AlertDialog><AlertDialogTrigger render={<Button variant="destructive">Delete project</Button>} /><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete project?</AlertDialogTitle><AlertDialogDescription>This removes the project and cannot be undone.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogClose render={<Button variant="secondary">Cancel</Button>} /><Button variant="destructive" onClick={deleteProject}>Delete project</Button></AlertDialogFooter></AlertDialogContent></AlertDialog>
 ```

package/llms/components/disclosure-picker.md

@@ -41,7 +41,7 @@ Use DisclosurePicker for one-of-many choices in a docked panel or inspector wher
 | DisclosurePickerTrigger | { label?: ReactNode; media?: ReactNode; children?: ReactNode } + Base UI Collapsible.Trigger props | The row. `label` is a muted leading caption on a fixed column so stacked rows align; `media` a leading visual (a ThemePreview tile); children the value, truncated on one line. ArrowDown opens it, and steps into the list once open. |
 | DisclosurePickerPanel | { search?: { value: string; onValueChange(value: string): void; placeholder?: string; label?: string } } + Collapsible.Panel props | Opens beneath the row. `search` opts in to a SearchInput above the list (off by default); it is controlled because the consumer filters, and it is cleared when the row closes. Escape clears a query first, then closes; ArrowDown in the field steps into the list. |
 | DisclosurePickerList | { value: string; onValueChange(value: string): void; aria-label?: string } + div props | A listbox. ArrowUp/ArrowDown, Home/End and type-ahead move focus without applying anything (ArrowUp from the first option returns to the search field); Enter, Space or a click picks the focused option — onValueChange fires once, only when it differs from `value` — and closes the row. Escape closes without a pick. |
-| DisclosurePickerOption | { value: string; children?: ReactNode; media?: ReactNode; note?: ReactNode; disabled?: boolean; textValue?: string } | One option row. `media` is a leading visual (a ThemePreview tile); `note` a muted trailing annotation — options without one show a check when chosen. `disabled` skips it for the keyboard and refuses the pick; `textValue` is what type-ahead matches when the name is not plain text. |
+| DisclosurePickerOption | { value: string; children?: ReactNode; media?: ReactNode; note?: ReactNode; disabled?: boolean; textValue?: string; onRemove?: () => void; removeLabel?: string } | One option row. `media` is a leading visual (a ThemePreview tile); `note` a muted trailing annotation — options without one show a check when chosen. `disabled` skips it for the keyboard and refuses the pick; `textValue` is what type-ahead matches when the name is not plain text. `onRemove` makes the option removable — for entries the person added (an imported preset, a saved font): a trash glyph at the row's end on hover or focus (always on touch), and Delete or Backspace on the focused row; removing never picks, and focus moves to a neighbour first. `removeLabel` is the glyph's tooltip. |
 | DisclosurePickerEmpty | { children?: ReactNode } | The no-match line, rendered in place of the list. |
 | useDisclosurePicker | () => { open: boolean; close(): void; size: "md" \| "xs" } | For a list the picker does not own (a Tree) that should close the row when something is picked. |
 
@@ -73,6 +73,7 @@ Use DisclosurePicker for one-of-many choices in a docked panel or inspector wher
 - Why a listbox and not a radio group: a radio group's checked state follows focus, so every arrow press would be a pick — wrong for a choice that opens a confirm, loads a font or resets settings. Base UI ships no standalone listbox (Select is popup-only, Combobox's inline list is focus-in-the-input, Composite is internal), so the keyboard model lives here.
 - Opening from the keyboard (Enter, Space, ArrowDown) moves focus into the panel: the search field when there is one, otherwise the chosen option (or the first). A pointer open focuses the search field on a fine pointer only, so touch does not raise the on-screen keyboard.
 - Escape closes the row without changing the value (clearing a query first) and returns focus to the trigger; a pick does the same. Focus is not pulled back when it has already moved on, e.g. to a confirm dialog the pick opened.
+- A removable option (onRemove) announces aria-keyshortcuts="Delete"; Delete or Backspace removes it and focus moves to the next option (or the previous). The trash glyph is a pointer target only (aria-hidden, not focusable): an option's children are presentational, so a nested button would be unreachable by assistive tech anyway.
 - The panel animates with motion-disclosure, which is static under prefers-reduced-motion or MotionProvider off; the scroll that keeps the row in view is instant, never smooth.
 
 ## Related