@sableui/react 0.9.1 → 0.10.0

package/llms/components/middle-truncate.md

@@ -36,12 +36,12 @@ Use MiddleTruncate when both the beginning and end of a long identifier must rem
 
 ## Examples
 
-### Solana address
+### API key
 
 ```tsx
 import { MiddleTruncate } from "@sableui/react"
 
-<MiddleTruncate text="5J7sX2QpHt9vK4mNbR8wYcZ3dF6gH1jL0pA8xQpVnTu" />
+<MiddleTruncate text="demo_key_7f3a9c2e5b8d1f4a6c0e9b3d7a2f5c8e1b4" />
 ```
 
 ### Custom start/end counts
@@ -49,7 +49,7 @@ import { MiddleTruncate } from "@sableui/react"
 ```tsx
 import { MiddleTruncate } from "@sableui/react"
 
-<MiddleTruncate text="0xAbC1234567890dEf1234567890aBcDeF12345678" startChars={4} endChars={4} />
+<MiddleTruncate text="9f2c4e7a1b3d5f60c8e2a4b6d8f0e1c3a5b7d9f2" startChars={4} endChars={4} />
 ```
 
 ### Copyable value
@@ -57,6 +57,6 @@ import { MiddleTruncate } from "@sableui/react"
 ```tsx
 import { Button, Icon, MiddleTruncate, Row, useCopy } from "@sableui/react"
 
-const { copy, copied } = useCopy(address)
-<Row gap={1}><MiddleTruncate text={address} /><Button variant="ghost" size="icon-xs" aria-label="Copy address" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button></Row>
+const { copy, copied } = useCopy(commitHash)
+<Row gap={1}><MiddleTruncate text={commitHash} /><Button variant="ghost" size="icon-xs" aria-label="Copy commit hash" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button></Row>
 ```

package/llms/components/note.md

@@ -53,7 +53,7 @@ Use Note for helpful supporting information that should sit near the relevant co
 ```tsx
 import { Note } from "@sableui/react"
 
-<Note tone="info">Editions mint on Solana mainnet.</Note>
+<Note tone="info">Reports refresh every hour.</Note>
 ```
 
 ### With title
@@ -61,7 +61,7 @@ import { Note } from "@sableui/react"
 ```tsx
 import { Note } from "@sableui/react"
 
-<Note tone="warning" title="Low balance">Top up SOL before minting.</Note>
+<Note tone="warning" title="Low balance">Add credits before your next export.</Note>
 ```
 
 ### Warning with a remedy, inside a dialog
@@ -77,5 +77,5 @@ import { Note } from "@sableui/react"
 ```tsx
 import { Note } from "@sableui/react"
 
-<Note tone="neutral" icon="lock">Pricing and supply cannot be changed after an edition is purchased.</Note>
+<Note tone="neutral" icon="lock">Pricing cannot be changed after an order is placed.</Note>
 ```

package/llms/components/pagination.md

@@ -13,7 +13,7 @@ Use Pagination when a result set is split into discrete pages and the user needs
 ### Best practices
 
 - Do: Keep page state controlled by the parent route or data layer so URL, filters, and result fetches stay in sync.
-- Do: Use a specific label when multiple pagers appear on a page, such as "Collector pages".
+- Do: Use a specific label when multiple pagers appear on a page, such as "Customer pages".
 - Do: Reset to page 1 when filters or search terms materially change the result set.
 - Don't: Use Pagination for tiny lists where all items fit comfortably on one page.
 - Don't: Hide disabled previous/next buttons at the bounds; disabled controls make the current position clearer.
@@ -79,7 +79,7 @@ const [page, setPage] = useState(8)
 ```tsx
 import { DataTable, Pagination, Stack } from "@sableui/react"
 
-<Stack gap={2}><DataTable data={rows} columns={columns} rowKey={(row) => row.id} /><Pagination label="Collector pages" page={page} total={12} onPageChange={setPage} /></Stack>
+<Stack gap={2}><DataTable data={rows} columns={columns} rowKey={(row) => row.id} /><Pagination label="Customer pages" page={page} total={12} onPageChange={setPage} /></Stack>
 ```
 
 ### Server query state

package/llms/components/phone.md

@@ -46,7 +46,7 @@ Use Phone to frame a mobile product preview when the device context is useful.
 ```tsx
 import { Phone } from "@sableui/react"
 
-<Phone><div className="p-4"><h2 className="text-title-lg">Activity</h2><p className="text-body-sm text-muted-foreground">3 new collects today.</p></div></Phone>
+<Phone><div className="p-4"><h2 className="text-title-lg">Activity</h2><p className="text-body-sm text-muted-foreground">3 new orders today.</p></div></Phone>
 ```
 
 ### Mockup, not a responsive preview

package/llms/components/pie-chart.md

@@ -43,7 +43,7 @@ Use PieChart for a share of one total across two to six categories — traffic s
 
 ## 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/pill.md

@@ -25,6 +25,7 @@ Use Pill for a row of filters or choices a person clicks to narrow or toggle wha
 | selected | boolean | false | Marks the pill as chosen. Solid lifts onto the primary surface; outline takes a primary tint and soft primary edge. Sets aria-pressed. |
 | appearance | "solid" \| "outline" | "solid" | solid for a filter row; outline for quiet chips that annotate other content (a reaction under a message, a tag on a card), where a filled chip would compete with what it annotates. |
 | size | "md" \| "sm" | "md" | md sits on the density ladder's xs control height (28px); sm is 24px, for chips under or inside other content. |
+| tone | "neutral" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "purple" \| "pink" | "neutral" | neutral is the chip as described. A palette family colours it as a category, like the choices in a tag picker: a wash at rest, the solid family colour when selected. Painted from the theme's generated palette. |
 | icon | ReactNode | — | Optional leading glyph (e.g. <Icon name="lock" />), rendered before the children with the base gap. |
 
 ## Variants
@@ -32,10 +33,11 @@ Use Pill for a row of filters or choices a person clicks to narrow or toggle wha
 - **appearance**: solid, outline
 - **size**: md, sm
 - **selected**: true, false
+- **tone**: neutral, red, orange, yellow, green, teal, blue, purple, pink
 
 ## Tokens used
 
-`secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `primary`, `primary-foreground`, `card`, `border`, `muted-foreground`, `foreground`
+`palette-wash`, `palette-wash-strong`, `palette-edge`, `palette-solid`, `palette-text`, `palette-solid-ink`, `secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `primary`, `primary-foreground`, `card`, `border`, `muted-foreground`, `foreground`
 
 ## Accessibility
 
@@ -48,12 +50,20 @@ Use Pill for a row of filters or choices a person clicks to narrow or toggle wha
 
 ## Examples
 
+### Tag picker
+
+```tsx
+import { Pill, Row } from "@sableui/react"
+
+<Row gap={1}><Pill tone="blue" selected onClick={() => {}}>Design</Pill><Pill tone="teal" onClick={() => {}}>Research</Pill><Pill tone="orange" onClick={() => {}}>Marketing</Pill></Row>
+```
+
 ### Filter row
 
 ```tsx
 import { Pill, Row } from "@sableui/react"
 
-<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Editions</Pill><Pill onClick={() => {}}>Collectibles</Pill></Row>
+<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Projects</Pill><Pill onClick={() => {}}>Reports</Pill></Row>
 ```
 
 ### Outline, small (reactions)

package/llms/components/popover.md

@@ -67,7 +67,7 @@ Use Popover for anchored secondary content that needs more room than a tooltip b
 ```tsx
 import { Button, Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@sableui/react"
 
-<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Edition details</PopoverTitle><PopoverDescription>A limited run of 100, stored permanently on Arweave.</PopoverDescription></PopoverContent></Popover>
+<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Plan details</PopoverTitle><PopoverDescription>Up to 10 seats, billed monthly per seat.</PopoverDescription></PopoverContent></Popover>
 ```
 
 ### With close
@@ -75,5 +75,5 @@ import { Button, Popover, PopoverContent, PopoverDescription, PopoverTitle, Popo
 ```tsx
 import { Button, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@sableui/react"
 
-<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Collecting mints a compressed NFT to your wallet.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>
+<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Upgrading starts a new billing period today.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>
 ```

package/llms/components/radar-chart.md

@@ -42,7 +42,7 @@ Use RadarChart to compare the shape of a profile across five to eight dimensions
 
 ## 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/radial-chart.md

@@ -44,7 +44,7 @@ Use RadialChart for progress toward goals (several rings), a single score or usa
 
 ## 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/radio-card.md

@@ -39,18 +39,18 @@ Use RadioCard for visual choice cards when users compare a small set of named op
 | description | ReactNode | — | Optional supporting copy beneath the title (text-body-sm, muted). |
 | trailing | ReactNode | — | End-aligned on the title's line: a price, a delivery date, a count. The title takes the rest of the row. |
 | icon | ReactNode | — | Leading icon (e.g. a solid <Icon>). Its presence switches to the two-dimensional card — icon top-left, indicator top-right, copy below — and the glyph is rendered as a solid-fill icon in the tone colour. |
-| tone | "neutral" \| "standard" \| "collectible" \| "edition" \| "info" \| "warning" | "neutral" | Semantic colour the selected state carries across the border, radio, and icon glyph. Neutral uses the primary ring with a muted wash. |
+| tone | "neutral" \| "3" \| "2" \| "1" \| "info" \| "warning" | "neutral" | Semantic colour the selected state carries across the border, radio, and icon glyph. Neutral uses the primary ring with a muted wash. |
 | disabled | boolean | false | Dims the card and blocks selection. The group skips it during keyboard navigation. |
 | titleClassName | string | — | Merged onto the title span (default text-title-sm) — e.g. to tighten copy in a two-column layout. |
 | descriptionClassName | string | — | Merged onto the description span (default text-body-sm text-muted-foreground). |
 
 ## Variants
 
-- **tone**: neutral, standard, collectible, edition, info, warning
+- **tone**: neutral, 3, 2, 1, info, warning
 
 ## Tokens used
 
-`input`, `card`, `foreground`, `primary`, `muted`, `ring`, `muted-foreground`, `tone-standard`, `tone-collectible`, `tone-edition`, `tone-info`, `tone-warning`
+`input`, `card`, `foreground`, `primary`, `muted`, `ring`, `muted-foreground`, `tone-3`, `tone-2`, `tone-1`, `tone-info`, `tone-warning`
 
 ## Accessibility
 
@@ -71,7 +71,7 @@ Use RadioCard for visual choice cards when users compare a small set of named op
 ```tsx
 import { Icon, RadioCard, RadioGroup } from "@sableui/react"
 
-<RadioGroup defaultValue="post" className="grid sm:grid-cols-3"><RadioCard value="post" tone="standard" icon={<Icon name="plus" />} title="Standard" description="Share without minting" /><RadioCard value="collectible" tone="collectible" icon={<Icon name="gem" />} title="Collectible" description="Free to collect as NFT" /><RadioCard value="edition" tone="edition" icon={<Icon name="image-stack" />} title="Edition" description="Sell as NFT editions" /></RadioGroup>
+<RadioGroup defaultValue="starter" className="grid sm:grid-cols-3"><RadioCard value="starter" tone="3" icon={<Icon name="plus" />} title="Starter" description="Free for one person" /><RadioCard value="studio" tone="2" icon={<Icon name="gem" />} title="Studio" description="For small teams" /><RadioCard value="business" tone="1" icon={<Icon name="image-stack" />} title="Business" description="SSO and audit log" /></RadioGroup>
 ```
 
 ### Plan picker (plain)

package/llms/components/radio.md

@@ -63,7 +63,7 @@ import { Field, Fieldset, FieldsetContent, FieldsetLegend, Radio, RadioGroup } f
 	<FieldsetContent>
 		<RadioGroup defaultValue="standard">
 			<Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
-			<Field label="Edition" orientation="horizontal"><Radio value="edition" /></Field>
+			<Field label="Poll" orientation="horizontal"><Radio value="poll" /></Field>
 		</RadioGroup>
 	</FieldsetContent>
 </Fieldset>
@@ -79,7 +79,7 @@ import { Field, Fieldset, FieldsetContent, FieldsetLegend, Radio, RadioGroup } f
 	<FieldsetContent>
 		<RadioGroup defaultValue="standard">
 			<Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
-			<Field label="Edition" orientation="horizontal" disabled><Radio value="edition" /></Field>
+			<Field label="Poll" orientation="horizontal" disabled><Radio value="poll" /></Field>
 		</RadioGroup>
 	</FieldsetContent>
 </Fieldset>

package/llms/components/scroller.md

@@ -60,7 +60,7 @@ Use Scroller to create a contained overflow region for content that naturally ex
 ```tsx
 import { Scroller } from "@sableui/react"
 
-<Scroller label="Editions" className="h-64"><ul className="space-y-2 p-4">{items.map((item) => (<li key={item.id} className="text-body-sm">{item.title}</li>))}</ul></Scroller>
+<Scroller label="Projects" className="h-64"><ul className="space-y-2 p-4">{items.map((item) => (<li key={item.id} className="text-body-sm">{item.title}</li>))}</ul></Scroller>
 ```
 
 ### Capped, scrolls past the cap

package/llms/components/search-input.md

@@ -72,7 +72,7 @@ import { SearchInput } from "@sableui/react"
 ```tsx
 import { Field, SearchInput } from "@sableui/react"
 
-<Field label="Search posts"><SearchInput defaultValue="editions" className="max-w-80" /></Field>
+<Field label="Search posts"><SearchInput defaultValue="roadmap" className="max-w-80" /></Field>
 ```
 
 ### Disabled

package/llms/components/segmented-bar.md

@@ -36,11 +36,11 @@ Use SegmentedBar when a stat card or row needs to show how a total divides into
 ## Variants
 
 - **size**: sm, md, lg
-- **tone**: edition, collectible, standard, info, primary, neutral, success, warning, destructive
+- **tone**: 1, 2, 3, info, primary, neutral, success, warning, destructive
 
 ## Tokens used
 
-`tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `primary`, `muted-foreground`, `success`, `tone-warning`, `destructive`
+`tone-1`, `tone-2`, `tone-3`, `tone-info`, `primary`, `muted-foreground`, `success`, `tone-warning`, `destructive`
 
 ## Motion
 
@@ -51,7 +51,7 @@ Use SegmentedBar when a stat card or row needs to show how a total divides into
 
 ## Accessibility
 
-- Rendered role=img with an aria-label built from `label` and each segment's share ("Revenue by type: Editions 42%, Collectibles 27%"), so the whole breakdown is read in one stop.
+- Rendered role=img with an aria-label built from `label` and each segment's share ("Revenue by channel: Direct 42%, Partners 27%"), so the whole breakdown is read in one stop.
 - Colour alone does not identify a segment: always show a legend with each segment's label beside the bar.
 
 ## Related
@@ -67,13 +67,13 @@ Use SegmentedBar when a stat card or row needs to show how a total divides into
 import { SegmentedBar, Stack, StatusDot } from "@sableui/react"
 
 const sales = [
-	{ label: "Editions", value: 42, tone: "edition" },
-	{ label: "Collectibles", value: 27, tone: "collectible" },
-	{ label: "Standard", value: 19, tone: "standard" },
+	{ label: "Direct", value: 42, tone: "1" },
+	{ label: "Partners", value: 27, tone: "2" },
+	{ label: "Referrals", value: 19, tone: "3" },
 ] as const
 
 <Stack gap={3}>
-	<SegmentedBar label="Revenue by type" segments={[...sales]} size="lg" />
+	<SegmentedBar label="Revenue by channel" segments={[...sales]} size="lg" />
 	<ul className="flex flex-col gap-1.5">
 		{sales.map((s) => (
 			<li key={s.label} className="flex items-center gap-2 text-body-sm">

package/llms/components/select.md

@@ -94,7 +94,7 @@ import { SelectContent, SelectGroup, SelectGroupLabel, SelectItem } from "@sable
 ```tsx
 import { Field, Select, SelectContent, SelectItem, SelectTrigger } from "@sableui/react"
 
-<Field label="Default visibility" description="Controls how new editions appear."><Select defaultValue="public"><SelectTrigger placeholder="Choose visibility" /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem><SelectItem value="unlisted">Unlisted</SelectItem></SelectContent></Select></Field>
+<Field label="Default visibility" description="Controls how new projects appear."><Select defaultValue="public"><SelectTrigger placeholder="Choose visibility" /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem><SelectItem value="unlisted">Unlisted</SelectItem></SelectContent></Select></Field>
 ```
 
 ### Rich item labels
@@ -102,5 +102,5 @@ import { Field, Select, SelectContent, SelectItem, SelectTrigger } from "@sableu
 ```tsx
 import { Badge, Select, SelectContent, SelectItem, SelectTrigger } from "@sableui/react"
 
-<Select defaultValue="edition" items={[{ value: "edition", label: "Edition" }, { value: "collectible", label: "Collectible" }]}><SelectTrigger /><SelectContent><SelectItem value="edition" label="Edition"><span className="flex items-center gap-2"><Badge tone="edition">Edition</Badge><span>Edition drop</span></span></SelectItem><SelectItem value="collectible" label="Collectible"><span className="flex items-center gap-2"><Badge tone="collectible">Collectible</Badge><span>Collectible</span></span></SelectItem></SelectContent></Select>
+<Select defaultValue="business" items={[{ value: "business", label: "Business" }, { value: "studio", label: "Studio" }]}><SelectTrigger /><SelectContent><SelectItem value="business" label="Business"><span className="flex items-center gap-2"><Badge tone="1">Business</Badge><span>Business plan</span></span></SelectItem><SelectItem value="studio" label="Studio"><span className="flex items-center gap-2"><Badge tone="2">Studio</Badge><span>Studio</span></span></SelectItem></SelectContent></Select>
 ```

package/llms/components/sheet.md

@@ -103,5 +103,5 @@ import { Button, Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, Shee
 ```tsx
 import { Button, Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@sableui/react"
 
-<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Edition details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>
+<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Order details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>
 ```

package/llms/components/side-nav.md

@@ -84,7 +84,7 @@ import { SideNav, SideNavGroup, SideNavItem } from "@sableui/react"
 import { SideNav, SideNavItem } from "@sableui/react"
 // <Link> = your router's link (react-router, next/link, @tanstack/router, …)
 
-<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Wallets" render={<Link to="/settings/wallets" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>
+<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Billing" render={<Link to="/settings/billing" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>
 ```
 
 ### Inside Sidebar chrome

package/llms/components/sidebar.md

@@ -67,7 +67,7 @@ Use Sidebar for persistent desktop navigation or application chrome outside the
 import { Icon, NotificationBadge, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav } from "@sableui/react"
 // <Link> = your router's link (react-router, next/link, @tanstack/router, …)
 
-<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name="music" variant="solid" />} label="Undertow" render={<Link to="/" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="bell" />} label="Notifications" badge={<NotificationBadge count={3} />} render={<Link to="/notifications" />} /></SidebarNav><SidebarFooter>{wallet}</SidebarFooter></Sidebar>
+<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name="music" variant="solid" />} label="Undertow" render={<Link to="/" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="bell" />} label="Notifications" badge={<NotificationBadge count={3} />} render={<Link to="/notifications" />} /></SidebarNav><SidebarFooter>{account}</SidebarFooter></Sidebar>
 ```
 
 ### Collapsible (icon rail)

package/llms/components/sparkline.md

@@ -24,7 +24,7 @@ Use Sparkline next to a number to show where it has been — a KPI's last 30 day
 | data | number[] | — | The values, oldest first. |
 | label | string | — | What the line tracks ("Revenue, last 30 days"). The spoken summary adds the first and last values, low and high. |
 | variant | "line" \| "area" \| "bar" | "line" | A line, a line over a soft fill, or columns. |
-| tone | "edition" \| "collectible" \| "standard" \| "info" \| "warning" \| "primary" \| "neutral" \| "success" \| "destructive" | "primary" | Colour by role. |
+| tone | "1" \| "2" \| "3" \| "info" \| "warning" \| "primary" \| "neutral" \| "success" \| "destructive" | "primary" | Colour by role. |
 | className | string | "h-8 w-24" | Sizes it; the drawing stretches to fit. |
 | animate | boolean | true | Draw on (or rise) when it scrolls into view. |
 | locale | string | runtime locale | BCP 47 locale for default number and date formatting. |
@@ -35,7 +35,7 @@ Use Sparkline next to a number to show where it has been — a KPI's last 30 day
 
 ## Tokens used
 
-`primary`, `tone-edition`, `tone-collectible`, `tone-standard`, `tone-info`, `tone-warning`, `muted-foreground`, `success`, `destructive`
+`primary`, `tone-1`, `tone-2`, `tone-3`, `tone-info`, `tone-warning`, `muted-foreground`, `success`, `destructive`
 
 ## Motion
 

package/llms/components/spinner.md

@@ -83,5 +83,5 @@ import { Spinner } from "@sableui/react"
 ```tsx
 import { Button } from "@sableui/react"
 
-<Button loading>Collecting</Button>
+<Button loading>Saving</Button>
 ```

package/llms/components/status-dot.md

@@ -28,18 +28,18 @@ Use StatusDot as a compact visual state cue next to text, avatars, rows, or labe
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| tone | "neutral" \| "standard" \| "success" \| "warning" \| "info" \| "edition" \| "collectible" \| "destructive" | "neutral" | Semantic color of the dot. |
+| tone | "neutral" \| "1" \| "2" \| "3" \| "success" \| "warning" \| "info" \| "destructive" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "purple" \| "pink" | "neutral" | Semantic color of the dot, or a palette family (red … pink) for a category legend. |
 | size | "sm" \| "md" \| "lg" | "md" | Dot diameter. |
 | pulse | boolean | false | Wrap the dot in an animated ping ring to signal a live state. |
 
 ## Variants
 
-- **tone**: neutral, standard, success, warning, info, edition, collectible, destructive
+- **tone**: neutral, 1, 2, 3, success, warning, info, destructive, red, orange, yellow, green, teal, blue, purple, pink
 - **size**: sm, md, lg
 
 ## Tokens used
 
-`muted-foreground`, `tone-standard`, `success`, `tone-warning`, `tone-info`, `tone-edition`, `tone-collectible`, `destructive`
+`palette-dot`, `muted-foreground`, `tone-3`, `success`, `tone-warning`, `tone-info`, `tone-1`, `tone-2`, `destructive`
 
 ## Accessibility
 
@@ -58,7 +58,7 @@ Use StatusDot as a compact visual state cue next to text, avatars, rows, or labe
 ```tsx
 import { Row, StatusDot } from "@sableui/react"
 
-<Row gap={2}><StatusDot tone="standard" /><StatusDot tone="info" /><StatusDot tone="warning" /><StatusDot tone="destructive" /></Row>
+<Row gap={2}><StatusDot tone="3" /><StatusDot tone="info" /><StatusDot tone="warning" /><StatusDot tone="destructive" /></Row>
 ```
 
 ### With label — use Badge

package/llms/components/table.md

@@ -63,25 +63,25 @@ Use Table for structured data with consistent columns and rows. Use DataTable wh
 
 ## Examples
 
-### Collectors
+### Orders
 
 ```tsx
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@sableui/react"
 
 <Table>
-	<TableCaption>Recent collectors</TableCaption>
+	<TableCaption>Recent orders</TableCaption>
 	<TableHeader>
 		<TableRow>
-			<TableHead>Collector</TableHead>
-			<TableHead>Edition</TableHead>
+			<TableHead>Customer</TableHead>
+			<TableHead>Order</TableHead>
 			<TableHead>Paid</TableHead>
 		</TableRow>
 	</TableHeader>
 	<TableBody>
 		<TableRow>
 			<TableCell>@nova</TableCell>
-			<TableCell>#012</TableCell>
-			<TableCell>0.5 SOL</TableCell>
+			<TableCell>1042</TableCell>
+			<TableCell>$48.00</TableCell>
 		</TableRow>
 	</TableBody>
 </Table>
@@ -100,7 +100,7 @@ import { Avatar, Badge, Button, Row, Table, TableBody, TableCaption, TableCell,
 ```tsx
 import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@sableui/react"
 
-<Card><CardHeader><CardTitle>Collectors</CardTitle></CardHeader><CardContent flush><Table><TableHeader><TableRow><TableHead>Collector</TableHead><TableHead>Paid</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>@nova</TableCell><TableCell>0.5 SOL</TableCell></TableRow></TableBody></Table></CardContent></Card>
+<Card><CardHeader><CardTitle>Customers</CardTitle></CardHeader><CardContent flush><Table><TableHeader><TableRow><TableHead>Customer</TableHead><TableHead>Paid</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>@nova</TableCell><TableCell>$48.00</TableCell></TableRow></TableBody></Table></CardContent></Card>
 ```
 
 ### Summary footer
@@ -108,5 +108,5 @@ import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell,
 ```tsx
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@sableui/react"
 
-<Table><TableHeader><TableRow><TableHead>Item</TableHead><TableHead className="text-end">Amount</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Primary sale</TableCell><TableCell className="text-end">42 SOL</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>Total</TableCell><TableCell className="text-end">42 SOL</TableCell></TableRow></TableFooter></Table>
+<Table><TableHeader><TableRow><TableHead>Item</TableHead><TableHead className="text-end">Amount</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Studio plan</TableCell><TableCell className="text-end">$192.00</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>Total</TableCell><TableCell className="text-end">$192.00</TableCell></TableRow></TableFooter></Table>
 ```

package/llms/components/tabs.md

@@ -80,5 +80,5 @@ import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@sableui/react"
 ```tsx
 import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@sableui/react"
 
-<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="holders" disabled>Holders</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>
+<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="billing" disabled>Billing</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>
 ```

package/llms/components/textarea.md

@@ -60,7 +60,7 @@ import { Textarea } from "@sableui/react"
 ```tsx
 import { Textarea } from "@sableui/react"
 
-<Textarea rows={6} placeholder="Tell the story behind this edition…" />
+<Textarea rows={6} placeholder="Tell your team what this project is for…" />
 ```
 
 ### Auto-resize
@@ -84,5 +84,5 @@ import { Textarea } from "@sableui/react"
 ```tsx
 import { Textarea } from "@sableui/react"
 
-<Textarea disabled defaultValue="Captions lock once the edition is minted." />
+<Textarea disabled defaultValue="Notes lock once the invoice is sent." />
 ```

package/llms/components/toast.md

@@ -104,7 +104,7 @@ toast.promise(publish(), { loading: "Publishing…", success: "Published", error
 ```tsx
 import { toast } from "@sableui/react"
 
-const id = toast.loading("Pinning to Arweave…"); /* later */ toast.update(id, { title: "Pinned", type: "success", timeout: 4000 })
+const id = toast.loading("Uploading report…"); /* later */ toast.update(id, { title: "Uploaded", type: "success", timeout: 4000 })
 ```
 
 ### Custom toast markup (composed parts)

package/llms/components/tooltip.md

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

package/llms/foundations/spacing.md

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

package/llms/layout/grid.md

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

package/llms/layout/page.md

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

package/llms/layout/region.md

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

package/llms/layout/split-pane.md

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