@sableui/react 0.9.0 → 0.10.0

package/llms.txt

@@ -205,7 +205,7 @@ composes with `render`).
 
 ## How it works
 
-- Components reference **semantic tokens** (`bg-card`, `text-muted-foreground`, `bg-tone-edition`), never raw palette steps or inline colors. Text/icons on a tone fill use the theme-adaptive `text-tone-*-foreground` ink; scrims and media surfaces use `bg-overlay`/`text-overlay-foreground`. Positive/success states use the flat `--success` / `--success-foreground` token (mirrors `--destructive`; there is **no** `tone-success`). A theme = a CSS variable set; re-skinning never touches component code. App-level theme switching is first-class via `<SableThemeProvider>` and `useSableTheme()`.
+- Components reference **semantic tokens** (`bg-card`, `text-muted-foreground`, `bg-tone-1`), never raw palette steps or inline colors. Text/icons on a tone fill use the theme-adaptive `text-tone-*-foreground` ink; scrims and media surfaces use `bg-overlay`/`text-overlay-foreground`. Positive/success states use the flat `--success` / `--success-foreground` token (mirrors `--destructive`; there is **no** `tone-success`). A theme = a CSS variable set; re-skinning never touches component code. App-level theme switching is first-class via `<SableThemeProvider>` and `useSableTheme()`.
 - Typography is **paired utilities** (`text-heading-1`, `text-body-md`) bundling size+weight+line-height+tracking.
 - Layout is **fluid-first / no global max-width**: an edge-to-edge page with a fluid `--page-inset`, an 8px rhythm unit, a 12-col grid that folds, and opt-in per-region max-widths. Primitives: `Region`, `Page` (route shell = Region + Stack), `Bleed` (content-area-aware full-bleed, via container units), `SplitPane`, `Stack`/`Row`/`Center`, `Grid`/`Columns`/`Col`, `SafeArea`. `Columns count` / `Col span`+`start` / `Grid cols` accept **responsive breakpoint maps** (`{ base, md, lg }`).
 - `<Icon name="…">` resolves a semantic name through an injected `<IconProvider>`; with no provider it renders Reicon. Replace the set with IconProvider or extend it with composeIconSets(appExtras, reiconIconSet). Concrete imports stay in the shared adapter; never copy SVG paths into an app.
@@ -258,7 +258,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 ### Foundations (7) — the rules for type, space, shape, surfaces, motion, scrolling and accessibility (registry.json → foundations; `sable docs <slug>`)
 
 - **Typography** — 6 families · 8 everyday tiers · 2 text colors · 1 utility per text node. Type is a closed vocabulary of paired utilities. → [`llms/foundations/typography.md`](./llms/foundations/typography.md)
-- **Spacing & sizing** — 4px base · 8px rhythm · 3 roles · 1 control ladder. One 4px scale governs every gap, inset and size, and space is assigned by role. → [`llms/foundations/spacing.md`](./llms/foundations/spacing.md)
+- **Spacing & sizing** — Baseline from the type · 8px steps · 3 roles · 1 control ladder. 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. → [`llms/foundations/spacing.md`](./llms/foundations/spacing.md)
 - **Shape** — 7 radius steps · concentric nesting · 1 edge treatment per boundary. Radius signals what something is: tight on containers, full on actions. → [`llms/foundations/shape.md`](./llms/foundations/shape.md)
 - **Surfaces & elevation** — 4 surface tokens · 5 elevation roles · 1 shadow per surface · 1 layer scale. Depth is a step up the surface ladder, chosen by how transient a surface is. → [`llms/foundations/surfaces.md`](./llms/foundations/surfaces.md)
 - **Motion** — 4 slots · 3 speeds · enter-only overshoot · 1 kill switch. Motion explains a change: where something came from, what responded, and that work is happening. → [`llms/foundations/motion.md`](./llms/foundations/motion.md)
@@ -267,11 +267,11 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 
 ### Patterns (8) — canonical page shells, copy as route starting points (registry.json → patterns; importable from `@sableui/react/patterns`)
 
-- **AuthPage** — Split sign-in page: a form column (brand mark, heading, email + password, primary sign-in, passkey and wallet alternatives, sign-up switch, terms) beside a brand panel painted from the theme's tones with a featured release card. → [`llms/patterns/auth-page.md`](./llms/patterns/auth-page.md)
+- **AuthPage** — Split sign-in page: a form column (brand mark, heading, email + password, primary sign-in, passkey and email-link alternatives, sign-up switch, terms) beside a brand panel painted from the theme's tones with a customer story card. → [`llms/patterns/auth-page.md`](./llms/patterns/auth-page.md)
 - **BrandLandingPage** — High-fidelity brand/product landing page: pill navigation, editorial hero type, a dark product scene, a value section, a how-it-works sequence, a customer story with outcomes, a closing CTA band, and a complete branded footer. → [`llms/patterns/brand-landing-page.md`](./llms/patterns/brand-landing-page.md)
 - **ChatPanel** — A full-height conversation surface: titled header, scrolling transcript, and a composer pinned to the bottom — the assembled shape of an AI assistant, a support thread, or a DM. → [`llms/patterns/chat-panel.md`](./llms/patterns/chat-panel.md)
-- **DashboardPage** — App-shell creator dashboard: a branded Sidebar with an account footer (AppHeader + BottomNav below lg), a KPI row, an edge-to-edge editions table with sell-through Meters, and supporting payout, collector, release and activity cards — the default shape for an operator or analytics home route. → [`llms/patterns/dashboard-page.md`](./llms/patterns/dashboard-page.md)
-- **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. → [`llms/patterns/feed-page.md`](./llms/patterns/feed-page.md)
+- **DashboardPage** — App-shell admin dashboard: a branded Sidebar with an account footer (AppHeader + BottomNav below lg), a KPI row, an edge-to-edge accounts table with seat-usage Meters, and supporting payout, top-customer, release and activity cards — the default shape for an operator or analytics home route. → [`llms/patterns/dashboard-page.md`](./llms/patterns/dashboard-page.md)
+- **FeedPage** — 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. → [`llms/patterns/feed-page.md`](./llms/patterns/feed-page.md)
 - **LandingPage** — Product / open-source landing page: a centered hero with an eyebrow Badge, one display headline, lede, two CTAs and a copyable install command; a Browser-framed product preview composed from real components; a six-up feature grid; a setup section with tabbed code; an agent-workflow section with terminal output; a CTA card; and a link-column footer. → [`llms/patterns/landing-page.md`](./llms/patterns/landing-page.md)
 - **ListDetailPage** — Searchable list beside the selected record's detail: interactive Entity rows in a CardList (5 of 12 columns) and a sticky detail pane (7) with an editable field, a label/value list, record actions with a destructive confirmation, and recent activity. → [`llms/patterns/list-detail-page.md`](./llms/patterns/list-detail-page.md)
 - **SettingsPage** — Account settings inside the app shell: a sticky SideNav section rail beside a column of section Cards — a Profile form with the page's one explicit save, Card + CardList + Entity rows with Switches that apply instantly, a read-only payouts summary, account rows, and a delete card confirmed through DestructiveActionModal. → [`llms/patterns/settings-page.md`](./llms/patterns/settings-page.md)
@@ -301,7 +301,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **OrderTrackingBlock** (Commerce) — An order status card: order number, item and a status Badge in the header over a vertical dot Stepper of delivery milestones. → [`llms/blocks/order-tracking-block.md`](./llms/blocks/order-tracking-block.md)
 - **PricingCardBlock** (Commerce) — A single-plan pricing card: a Monthly/Yearly ToggleGroup, the price and billing note, a checked feature list, and one full-width call to action. → [`llms/blocks/pricing-card-block.md`](./llms/blocks/pricing-card-block.md)
 - **PricingTableBlock** (Commerce) — A three-tier pricing section: heading, a Monthly/Yearly ToggleGroup, and three equal-height plan cards with the recommended one outlined in primary and badged "Most popular". → [`llms/blocks/pricing-table-block.md`](./llms/blocks/pricing-table-block.md)
-- **ProductCardBlock** (Commerce) — A product card: edge-to-edge artwork, title and maker, an edition Badge, and the price beside a single buy action. → [`llms/blocks/product-card-block.md`](./llms/blocks/product-card-block.md)
+- **ProductCardBlock** (Commerce) — A product card: edge-to-edge product image, title and maker, a status Badge, and the price beside a single buy action. → [`llms/blocks/product-card-block.md`](./llms/blocks/product-card-block.md)
 - **ProfileCardBlock** (Social & messaging) — A profile card: a cover banner, an avatar rising into it, Share and Follow, the name and handle, a one-line bio and two counts. → [`llms/blocks/profile-card-block.md`](./llms/blocks/profile-card-block.md)
 - **ProfileFormBlock** (Settings & team) — A profile settings card: avatar with upload/remove, name and handle side by side, a bio, a timezone Select, and one Save profile in the footer. → [`llms/blocks/profile-form-block.md`](./llms/blocks/profile-form-block.md)
 - **RevenueBreakdownBlock** (Dashboard) — A stat card with a breakdown: the KPI in the metric mono tier, its trend Badge, a SegmentedBar of how the total divides, and a StatusDot legend. → [`llms/blocks/revenue-breakdown-block.md`](./llms/blocks/revenue-breakdown-block.md)
@@ -366,7 +366,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **AreaChart** — **BETA.** A trend over a sequence, filled to the baseline: overlapping translucent series, stacked, or stacked to 100%, with smooth, linear or step curves and optional gradient fills. → [`llms/components/area-chart.md`](./llms/components/area-chart.md)
 - **Attachment** — A file or image attached to a message: media or icon lead, name and metadata, upload and error states, an actions slot, and a full-card trigger that keeps those actions separately clickable. → [`llms/components/attachment.md`](./llms/components/attachment.md)
 - **Avatar** — Circular profile image over Base UI Avatar — automatic image-load tracking with an initials/glyph fallback. *Parts:* AvatarRoot, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount. → [`llms/components/avatar.md`](./llms/components/avatar.md)
-- **Badge** — Compact static label, set on two axes: appearance (soft, outline, solid, overlay on media, plain text) and tone (neutral or a semantic tone). → [`llms/components/badge.md`](./llms/components/badge.md)
+- **Badge** — 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). → [`llms/components/badge.md`](./llms/components/badge.md)
 - **Banner** — Full-width, page-level announcement bar. → [`llms/components/banner.md`](./llms/components/banner.md)
 - **BarChart** — **BETA.** Bars comparing amounts across categories: grouped, stacked or stacked to 100%, vertical columns or horizontal bars, with value labels, per-category colours and a separate tone for negative values. → [`llms/components/bar-chart.md`](./llms/components/bar-chart.md)
 - **BottomNav** — Mobile bottom tab bar (fixed, hidden at lg), with home-indicator safe-area padding and evenly distributed BottomNavItem tabs. *Parts:* BottomNavItem. → [`llms/components/bottom-nav.md`](./llms/components/bottom-nav.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [
@@ -184,13 +184,13 @@
     "typecheck": "tsc --noEmit",
     "contrast:report": "node scripts/contrast-report.mjs",
     "design-lint": "node scripts/design-lint.mjs",
-    "build:registry": "node scripts/build-registry.mjs && node scripts/build-ios-target.mjs",
-    "build:registry:check": "node scripts/build-registry.mjs --check && node scripts/build-ios-target.mjs --check",
+    "build:registry": "node scripts/build-palette.mjs && node scripts/build-registry.mjs && node scripts/build-ios-target.mjs",
+    "build:registry:check": "node scripts/build-palette.mjs --check && node scripts/build-registry.mjs --check && node scripts/build-ios-target.mjs --check",
     "icons:brands": "node scripts/fetch-brand-icons.mjs",
     "icons:brands:check": "node scripts/fetch-brand-icons.mjs --check",
     "test": "vitest",
     "test:run": "vitest run",
-    "build": "node scripts/build-registry.mjs && node scripts/build-ios-target.mjs && tsup && node scripts/copy-assets.mjs",
+    "build": "node scripts/build-palette.mjs && node scripts/build-registry.mjs && node scripts/build-ios-target.mjs && tsup && node scripts/copy-assets.mjs",
     "grade": "node scripts/grade.mjs"
   }
 }