@sableui/react 0.3.2 → 0.5.0

package/dist/themes.css

@@ -6,8 +6,8 @@
      @import "@sableui/react/themes.css";   ← this file
 
    For an app that offers the bundled set as user-selectable themes (a
-   `<ThemeSelector>` over Base / Meridian / Prism / Verdant / Ember / Poppy). `styles.css`
-   carries Base alone, since the alternates are `[data-sable-theme]`-scoped
+   `<ThemeSelector>` over Sable / Meridian / Prism / Verdant / Ember / Poppy). `styles.css`
+   carries the Sable theme alone, since the alternates are `[data-sable-theme]`-scoped
    and dead weight in the overwhelmingly common single-theme app.
 
    Needing exactly one alternate? Import just that one instead — this file is a
@@ -15,7 +15,7 @@
 
      @import "@sableui/react/theme/prism.css";
 
-   Base is NOT here: it ships in `styles.css` and must, since it declares
+   The Sable theme is NOT here: it ships in `styles.css` and must, since it declares
    the layout floor (`--page-inset`, `--region-*`, `--rhythm-unit`) on a bare
    `:root` that every other theme inherits.
    ========================================================================== */

package/llms/components/tabs.md

@@ -31,7 +31,7 @@ Use Tabs to switch between related panels within the same page context.
 
 | Name | Type | Description |
 | --- | --- | --- |
-| TabsList | Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" \| "pill" + className | The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger. Triggers inherit the variant. |
+| TabsList | Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" \| "pill" + className | The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant. |
 | TabsTrigger | Base UI Tabs.Tab props (value, disabled) + className | A single tab button. value pairs it with the panel of the same value. |
 | TabsPanel | Base UI Tabs.Panel props (value, keepMounted) + className | The content shown when the matching trigger is active. |
 | TabsContent | Alias of TabsPanel | Re-export of TabsPanel for consumers that prefer this name. |

package/llms/components/theme-selector.md

@@ -62,7 +62,7 @@ const { themeId, setThemeId, themes, mode } = useSableTheme()
 ```tsx
 import { ThemeSelector, type ThemeId } from "@sableui/react"
 
-const [themeId, setThemeId] = useState<ThemeId>("base")
+const [themeId, setThemeId] = useState<ThemeId>("sable")
 <ThemeSelector value={themeId} onValueChange={setThemeId} />
 ```
 

package/llms/components/toast.md

@@ -34,6 +34,7 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 | Name | Type | Description |
 | --- | --- | --- |
 | ToastRoot | Base UI Toast.Root props + className (requires the `toast` object) | A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI. |
+| ToastContent | Base UI Toast.Content props + className | The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them. |
 | ToastTitle | Base UI Toast.Title props + className | The toast headline (text-title-sm). Auto-associated as the toast's accessible name. |
 | ToastDescription | Base UI Toast.Description props + className | Supporting body copy beneath the title (text-body-sm, muted). Auto-associated as the toast's accessible description. |
 | ToastClose | Base UI Toast.Close props + className | Dismiss button. Base UI handles the close and leave animation; labelled "Dismiss" by default. |
@@ -43,8 +44,9 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| ToastProvider | { children, timeout?, limit?, closeIcon?, position?, viewportClassName? } | — | Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast(). |
+| ToastProvider | { children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? } | — | Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast(). |
 | position | "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" | "top-right" | Screen anchor for the toast stack. |
+| stacked | boolean | false | Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page. |
 | viewportClassName | string | — | Extra classes merged LAST onto the fixed viewport region — for safe-area insets or an offset (e.g. clearing a sidebar). |
 | timeout | number | 5000 | Default auto-dismiss time in ms for toasts. 0 keeps a toast until it is dismissed. Error toasts, loading toasts, and any toast carrying actionProps default to 0 regardless of this value; a per-toast timeout overrides both. |
 | limit | number | 3 | Maximum toasts shown at once; older toasts are pushed out when the limit is exceeded. |
@@ -62,6 +64,7 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 - **arrival** · ToastRoot · `motion-slide-left` — A toast interrupts without being asked, so where it came from is the reader's first question. Sliding in from the viewport edge answers it and marks the toast as belonging to the edge rather than to whatever it happens to cover.
 - **response** · ToastAction · `motion-interactive` — Toasts are on a timer, so the action has to look actionable at a glance — there is no time to hunt for the hit target.
 - **transition** · ToastRoot · `motion-slide-left` — Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause.
+- **transition** · ToastRoot (stacked) · _custom (outside the recipe layer)_ — A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there.
 - **activity** · ToastRoot · _no motion_ — A toast reports a result that has already happened. Anything still in flight belongs in the surface that started it, where the reader is still looking.
 
 ## Accessibility
@@ -121,6 +124,14 @@ import { toast } from "@sableui/react"
 toast.message("Post archived", { actionProps: { children: "Undo", onClick: () => restorePost() } })
 ```
 
+### Stacked
+
+```tsx
+import { ToastProvider } from "@sableui/react"
+
+<ToastProvider stacked position="bottom-right">{children}</ToastProvider>
+```
+
 ### Provider with app chrome
 
 ```tsx

package/llms/reference/token-intent.md

@@ -319,7 +319,7 @@ Which token to reach for, and what it is most often confused with. Generated fro
 - **`panel-raised`** — One step up from `panel`: a selected row, a hover fill, a nested well. *Use for:* Tree row selection, hovered panel rows, and the light square of a checkerboard.
     - **Not** `accent`. In a workspace the tonal band is only a few units wide; `accent` is a page-register step and reads as a shout in chrome.
 - **`panel-field`** — The inset fill of a compact control docked in a panel. *Use for:* The `size="xs"` field rung (Input, SelectTrigger, ScrubField share it) and `<Button variant="field">`. A panel control of your own that should sit among those fields.
-    - **Not** `canvas`. It resolves to the canvas tone by default, but `canvas` names the work surface; a field that borrows it says the wrong thing and stops following a theme that tunes its fields.
+    - **Not** `canvas`. `canvas` names the work surface, and its step off the panel is too faint to read as a field in dark mode. This one is mixed from the panel itself, so it follows a theme that retunes the panel. Tune it with `--theme-panel-field`.
 - **`panel-field-hover`** — The hover step of a `panel-field` control. *Use for:* `hover:bg-panel-field-hover` on anything filled with `panel-field`.
     - **Not** `hover:bg-panel-raised`. A fixed surface token as a hover is what the surface-hover lint rejects; this one is defined against the panel field it steps from.
 - **`hairline`** — The 1px structural line that carries all separation in tool chrome. *Use for:* Between panel sections, under a toolbar, above a status bar.

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

@@ -62,7 +62,7 @@ chosen by what the surface *does*:
 - `secondary` — a control fill (something you can press)
 - `accent` — a transient state (hover, selected, current)
 
-Pick by appearance and it works in Base and breaks in Meridian. Every token's
+Pick by appearance and it works in the Sable theme and breaks in Meridian. Every token's
 intent, and what it gets confused with, is in
 `llms/reference/token-intent.md`.
 

package/llms/tasks/creating-a-preset.md

@@ -21,7 +21,7 @@ pnpm exec sable preset --check .sable/presets/clay.json --json
 pnpm exec sable preset --css .sable/presets/clay.json
 ```
 
-The template starts from a complete Base theme snapshot. Give it a unique ID and
+The template starts from a complete Sable theme snapshot. Give it a unique ID and
 label; author its tokens, direction, and reference observations. Avoid IDs of
 bundled themes. Save the record at `.sable/presets/<id>.json`. Advance `revision`
 when changing a shared record; keep earlier revisions when reproducibility matters.

package/llms/tasks/designing-a-surface.md

@@ -2,7 +2,7 @@
 
 Tokens make decisions consistent; they do not decide what deserves attention.
 Start with the user's task and content, then choose a visual direction. Sable's
-default Base identity is a starting point. A consumer can be light-first,
+default Sable identity is a starting point. A consumer can be light-first,
 photographic, editorial, playful, or quiet while retaining semantic tokens,
 accessible behavior, and a coherent interaction policy.
 

package/llms-full.txt

@@ -243,7 +243,7 @@ On npm as `@sableui/react`. The structured recipe is the `consume` block in `reg
 @source "<path-to>/@sableui/react/dist/**/*.{js,mjs}"; /* workspace: packages/sable/src; published: node_modules/@sableui/react/dist */
 ```
 
-4. **Fonts:** the theme declares the stacks; the host loads the files (every featured primary is available through Google Fonts). Per theme — base: Figtree + DM Mono · meridian: Instrument Sans + Geist Mono · prism: Outfit + Roboto Mono + Playfair Display (display) · verdant: Inter + IBM Plex Mono + Instrument Serif (display) · ember: Work Sans + DM Mono · poppy: Albert Sans + Red Hat Mono + Unbounded (display). The machine-readable list is `registry.json → themes.available[].fonts`.
+4. **Fonts:** the theme declares the stacks; the host loads the files (every featured primary is available through Google Fonts). Per theme — sable: Figtree + DM Mono · meridian: Instrument Sans + Geist Mono · prism: Outfit + Roboto Mono + Playfair Display (display) · verdant: Inter + IBM Plex Mono + Instrument Serif (display) · ember: Work Sans + DM Mono · poppy: Albert Sans + Red Hat Mono + Unbounded (display). The machine-readable list is `registry.json → themes.available[].fonts`.
 5. **Providers + theme switching:**
 
 ```tsx
@@ -653,7 +653,7 @@ chosen by what the surface *does*:
 - `secondary` — a control fill (something you can press)
 - `accent` — a transient state (hover, selected, current)
 
-Pick by appearance and it works in Base and breaks in Meridian. Every token's
+Pick by appearance and it works in the Sable theme and breaks in Meridian. Every token's
 intent, and what it gets confused with, is in
 `llms/reference/token-intent.md`.
 
@@ -1309,7 +1309,7 @@ pnpm exec sable preset --check .sable/presets/clay.json --json
 pnpm exec sable preset --css .sable/presets/clay.json
 ```
 
-The template starts from a complete Base theme snapshot. Give it a unique ID and
+The template starts from a complete Sable theme snapshot. Give it a unique ID and
 label; author its tokens, direction, and reference observations. Avoid IDs of
 bundled themes. Save the record at `.sable/presets/<id>.json`. Advance `revision`
 when changing a shared record; keep earlier revisions when reproducibility matters.
@@ -1435,7 +1435,7 @@ requirement that every future brand use the same illustration or font pairing.
 
 Tokens make decisions consistent; they do not decide what deserves attention.
 Start with the user's task and content, then choose a visual direction. Sable's
-default Base identity is a starting point. A consumer can be light-first,
+default Sable identity is a starting point. A consumer can be light-first,
 photographic, editorial, playful, or quiet while retaining semantic tokens,
 accessible behavior, and a coherent interaction policy.
 
@@ -18634,7 +18634,7 @@ Use Tabs to switch between related panels within the same page context.
 
 | Name | Type | Description |
 | --- | --- | --- |
-| TabsList | Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" \| "pill" + className | The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger. Triggers inherit the variant. |
+| TabsList | Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" \| "pill" + className | The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant. |
 | TabsTrigger | Base UI Tabs.Tab props (value, disabled) + className | A single tab button. value pairs it with the panel of the same value. |
 | TabsPanel | Base UI Tabs.Panel props (value, keepMounted) + className | The content shown when the matching trigger is active. |
 | TabsContent | Alias of TabsPanel | Re-export of TabsPanel for consumers that prefer this name. |
@@ -18843,7 +18843,7 @@ const { themeId, setThemeId, themes, mode } = useSableTheme()
 ```tsx
 import { ThemeSelector, type ThemeId } from "@sableui/react"
 
-const [themeId, setThemeId] = useState<ThemeId>("base")
+const [themeId, setThemeId] = useState<ThemeId>("sable")
 <ThemeSelector value={themeId} onValueChange={setThemeId} />
 ```
 
@@ -19081,6 +19081,7 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 | Name | Type | Description |
 | --- | --- | --- |
 | ToastRoot | Base UI Toast.Root props + className (requires the `toast` object) | A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI. |
+| ToastContent | Base UI Toast.Content props + className | The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them. |
 | ToastTitle | Base UI Toast.Title props + className | The toast headline (text-title-sm). Auto-associated as the toast's accessible name. |
 | ToastDescription | Base UI Toast.Description props + className | Supporting body copy beneath the title (text-body-sm, muted). Auto-associated as the toast's accessible description. |
 | ToastClose | Base UI Toast.Close props + className | Dismiss button. Base UI handles the close and leave animation; labelled "Dismiss" by default. |
@@ -19090,8 +19091,9 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| ToastProvider | { children, timeout?, limit?, closeIcon?, position?, viewportClassName? } | — | Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast(). |
+| ToastProvider | { children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? } | — | Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast(). |
 | position | "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" | "top-right" | Screen anchor for the toast stack. |
+| stacked | boolean | false | Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page. |
 | viewportClassName | string | — | Extra classes merged LAST onto the fixed viewport region — for safe-area insets or an offset (e.g. clearing a sidebar). |
 | timeout | number | 5000 | Default auto-dismiss time in ms for toasts. 0 keeps a toast until it is dismissed. Error toasts, loading toasts, and any toast carrying actionProps default to 0 regardless of this value; a per-toast timeout overrides both. |
 | limit | number | 3 | Maximum toasts shown at once; older toasts are pushed out when the limit is exceeded. |
@@ -19109,6 +19111,7 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 - **arrival** · ToastRoot · `motion-slide-left` — A toast interrupts without being asked, so where it came from is the reader's first question. Sliding in from the viewport edge answers it and marks the toast as belonging to the edge rather than to whatever it happens to cover.
 - **response** · ToastAction · `motion-interactive` — Toasts are on a timer, so the action has to look actionable at a glance — there is no time to hunt for the hit target.
 - **transition** · ToastRoot · `motion-slide-left` — Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause.
+- **transition** · ToastRoot (stacked) · _custom (outside the recipe layer)_ — A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there.
 - **activity** · ToastRoot · _no motion_ — A toast reports a result that has already happened. Anything still in flight belongs in the surface that started it, where the reader is still looking.
 
 ## Accessibility
@@ -19168,6 +19171,14 @@ import { toast } from "@sableui/react"
 toast.message("Post archived", { actionProps: { children: "Undo", onClick: () => restorePost() } })
 ```
 
+### Stacked
+
+```tsx
+import { ToastProvider } from "@sableui/react"
+
+<ToastProvider stacked position="bottom-right">{children}</ToastProvider>
+```
+
 ### Provider with app chrome
 
 ```tsx
@@ -20304,7 +20315,7 @@ Which token to reach for, and what it is most often confused with. Generated fro
 - **`panel-raised`** — One step up from `panel`: a selected row, a hover fill, a nested well. *Use for:* Tree row selection, hovered panel rows, and the light square of a checkerboard.
     - **Not** `accent`. In a workspace the tonal band is only a few units wide; `accent` is a page-register step and reads as a shout in chrome.
 - **`panel-field`** — The inset fill of a compact control docked in a panel. *Use for:* The `size="xs"` field rung (Input, SelectTrigger, ScrubField share it) and `<Button variant="field">`. A panel control of your own that should sit among those fields.
-    - **Not** `canvas`. It resolves to the canvas tone by default, but `canvas` names the work surface; a field that borrows it says the wrong thing and stops following a theme that tunes its fields.
+    - **Not** `canvas`. `canvas` names the work surface, and its step off the panel is too faint to read as a field in dark mode. This one is mixed from the panel itself, so it follows a theme that retunes the panel. Tune it with `--theme-panel-field`.
 - **`panel-field-hover`** — The hover step of a `panel-field` control. *Use for:* `hover:bg-panel-field-hover` on anything filled with `panel-field`.
     - **Not** `hover:bg-panel-raised`. A fixed surface token as a hover is what the surface-hover lint rejects; this one is defined against the panel field it steps from.
 - **`hairline`** — The 1px structural line that carries all separation in tool chrome. *Use for:* Between panel sections, under a toolbar, above a status bar.

package/llms.txt

@@ -243,7 +243,7 @@ On npm as `@sableui/react`. The structured recipe is the `consume` block in `reg
 @source "<path-to>/@sableui/react/dist/**/*.{js,mjs}"; /* workspace: packages/sable/src; published: node_modules/@sableui/react/dist */
 ```
 
-4. **Fonts:** the theme declares the stacks; the host loads the files (every featured primary is available through Google Fonts). Per theme — base: Figtree + DM Mono · meridian: Instrument Sans + Geist Mono · prism: Outfit + Roboto Mono + Playfair Display (display) · verdant: Inter + IBM Plex Mono + Instrument Serif (display) · ember: Work Sans + DM Mono · poppy: Albert Sans + Red Hat Mono + Unbounded (display). The machine-readable list is `registry.json → themes.available[].fonts`.
+4. **Fonts:** the theme declares the stacks; the host loads the files (every featured primary is available through Google Fonts). Per theme — sable: Figtree + DM Mono · meridian: Instrument Sans + Geist Mono · prism: Outfit + Roboto Mono + Playfair Display (display) · verdant: Inter + IBM Plex Mono + Instrument Serif (display) · ember: Work Sans + DM Mono · poppy: Albert Sans + Red Hat Mono + Unbounded (display). The machine-readable list is `registry.json → themes.available[].fonts`.
 5. **Providers + theme switching:**
 
 ```tsx
@@ -446,7 +446,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **ThemeSelector** — A presentational radiogroup for choosing a Sable design theme from theme manifests — swatch-strip cards for a settings page, or compact rows for tool chrome. → [`llms/components/theme-selector.md`](./llms/components/theme-selector.md)
 - **ThemeSwitcher** — A segmented light / dark / system switch. → [`llms/components/theme-switcher.md`](./llms/components/theme-switcher.md)
 - **ThinkingOrb** — Canvas dot-cloud 'agent is thinking' indicator. → [`llms/components/thinking-orb.md`](./llms/components/thinking-orb.md)
-- **Toast** — Imperative notification system over Base UI Toast — auto-dismiss timers, swipe-to-dismiss, focus management, ARIA live-region announcements, and a limit-aware stack. *Parts:* ToastRoot, ToastTitle, ToastDescription, ToastClose, ToastAction. → [`llms/components/toast.md`](./llms/components/toast.md)
+- **Toast** — Imperative notification system over Base UI Toast — auto-dismiss timers, swipe-to-dismiss, focus management, ARIA live-region announcements, and a limit-aware stack. *Parts:* ToastRoot, ToastContent, ToastTitle, ToastDescription, ToastClose, ToastAction. → [`llms/components/toast.md`](./llms/components/toast.md)
 - **Toggle** — Pressed-state button over Base UI Toggle, plus ToggleGroup for shared single- or multi-select rows. *Parts:* ToggleGroup, ToggleGroupItem. → [`llms/components/toggle.md`](./llms/components/toggle.md)
 - **Toolbar** — A row or column of controls that is one tab stop, with arrow-key movement between its items (role="toolbar"), over Base UI Toolbar. *Parts:* ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup, ToolbarSeparator. → [`llms/components/toolbar.md`](./llms/components/toolbar.md)
 - **Tooltip** — Hover/focus label over Base UI Tooltip (collision-aware positioning, ARIA wiring, delay grouping via TooltipProvider). *Parts:* TooltipProvider, TooltipTrigger, TooltipContent, TooltipArrow, SimpleTooltip. → [`llms/components/tooltip.md`](./llms/components/tooltip.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [
@@ -71,11 +71,11 @@
       "default": "./dist/themes/ember/index.js"
     },
     "./theme/ember.css": "./dist/themes/ember/ember.css",
-    "./theme/base": {
-      "types": "./dist/themes/base/index.d.ts",
-      "default": "./dist/themes/base/index.js"
+    "./theme/sable": {
+      "types": "./dist/themes/sable/index.d.ts",
+      "default": "./dist/themes/sable/index.js"
     },
-    "./theme/base.css": "./dist/themes/base/base.css",
+    "./theme/sable.css": "./dist/themes/sable/sable.css",
     "./theme/poppy": {
       "types": "./dist/themes/poppy/index.d.ts",
       "default": "./dist/themes/poppy/index.js"

package/registry.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://sable.design/registry.schema.json",
   "name": "@sableui/react",
-  "version": "0.3.2",
-  "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Base.",
+  "version": "0.5.0",
+  "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Sable.",
   "engine": {
     "behavior": "@base-ui/react",
     "styling": "tailwindcss@4",
@@ -42,9 +42,9 @@
     "designTheme": "Set data-sable-theme for alternate or app-owned themes; omit the attribute or use base for the default. Register portable presets with presetManifest() through SableThemeProvider customThemes, and load their scoped CSS and fonts.",
     "import": "import { Button, Card } from \"@sableui/react\"",
     "cssOptional": {
-      "themes.css": "@import \"@sableui/react/themes.css\"; — all bundled alternatives. styles.css already includes Base. Alternate CSS is scoped by data-sable-theme.",
+      "themes.css": "@import \"@sableui/react/themes.css\"; — all bundled alternatives. styles.css already includes the Sable theme. Alternate CSS is scoped by data-sable-theme.",
       "theme/<id>.css": "@import \"@sableui/react/theme/prism.css\"; — one bundled alternative. Prefer this when the app uses exactly one.",
-      "symptom": "The active theme renders as Base when its stylesheet has not been imported. Load the selected theme CSS before applying its ID."
+      "symptom": "The active theme renders as the Sable theme when its stylesheet has not been imported. Load the selected theme CSS before applying its ID."
     },
     "designWorkflow": {
       "brief": "sable docs designing-a-surface",
@@ -91,14 +91,14 @@
     }
   },
   "themes": {
-    "default": "base",
+    "default": "sable",
     "available": [
       {
-        "id": "base",
-        "label": "Base",
+        "id": "sable",
+        "label": "Sable",
         "featured": true,
-        "css": "./src/themes/base/base.css",
-        "manifest": "./src/themes/base/index.ts",
+        "css": "./src/themes/sable/sable.css",
+        "manifest": "./src/themes/sable/index.ts",
         "import": "@sableui/react/styles.css",
         "modes": [
           "dark",
@@ -233,7 +233,7 @@
         "id": "atelier",
         "label": "Atelier",
         "deprecated": {
-          "replacement": "base"
+          "replacement": "sable"
         },
         "featured": false,
         "css": "./src/themes/atelier/atelier.css",
@@ -1313,7 +1313,7 @@
         "name": "panel-field",
         "intent": "The inset fill of a compact control docked in a panel.",
         "whenToUse": "The `size=\"xs\"` field rung (Input, SelectTrigger, ScrubField share it) and `<Button variant=\"field\">`. A panel control of your own that should sit among those fields.",
-        "insteadOf": "`canvas`. It resolves to the canvas tone by default, but `canvas` names the work surface; a field that borrows it says the wrong thing and stops following a theme that tunes its fields.",
+        "insteadOf": "`canvas`. `canvas` names the work surface, and its step off the panel is too faint to read as a field in dark mode. This one is mixed from the panel itself, so it follows a theme that retunes the panel. Tune it with `--theme-panel-field`.",
         "pairsWith": [
           "panel-field-hover"
         ]
@@ -16798,7 +16798,7 @@
         {
           "name": "TabsList",
           "type": "Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: \"underline\" | \"pill\" + className",
-          "description": "The tablist row. variant=\"underline\" (default) draws a divider rule beneath the triggers; variant=\"pill\" drops the rule and fills the active trigger. Triggers inherit the variant."
+          "description": "The tablist row. variant=\"underline\" (default) draws a divider rule beneath the triggers; variant=\"pill\" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant."
         },
         {
           "name": "TabsTrigger",
@@ -17085,7 +17085,7 @@
         },
         {
           "label": "Controlled",
-          "code": "const [themeId, setThemeId] = useState<ThemeId>(\"base\")\n<ThemeSelector value={themeId} onValueChange={setThemeId} />",
+          "code": "const [themeId, setThemeId] = useState<ThemeId>(\"sable\")\n<ThemeSelector value={themeId} onValueChange={setThemeId} />",
           "imports": "import { ThemeSelector, type ThemeId } from \"@sableui/react\""
         },
         {
@@ -17450,7 +17450,7 @@
       "props": [
         {
           "name": "ToastProvider",
-          "type": "{ children, timeout?, limit?, closeIcon?, position?, viewportClassName? }",
+          "type": "{ children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? }",
           "default": "—",
           "description": "Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast()."
         },
@@ -17460,6 +17460,12 @@
           "default": "\"top-right\"",
           "description": "Screen anchor for the toast stack."
         },
+        {
+          "name": "stacked",
+          "type": "boolean",
+          "default": "false",
+          "description": "Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page."
+        },
         {
           "name": "viewportClassName",
           "type": "string",
@@ -17508,6 +17514,11 @@
           "type": "Base UI Toast.Root props + className (requires the `toast` object)",
           "description": "A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI."
         },
+        {
+          "name": "ToastContent",
+          "type": "Base UI Toast.Content props + className",
+          "description": "The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them."
+        },
         {
           "name": "ToastTitle",
           "type": "Base UI Toast.Title props + className",
@@ -17563,6 +17574,12 @@
           "part": "ToastRoot",
           "why": "Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause."
         },
+        {
+          "slot": "transition",
+          "recipe": "custom",
+          "part": "ToastRoot (stacked)",
+          "why": "A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there."
+        },
         {
           "slot": "activity",
           "recipe": "none",
@@ -17604,6 +17621,11 @@
           "code": "toast.message(\"Post archived\", { actionProps: { children: \"Undo\", onClick: () => restorePost() } })",
           "imports": "import { toast } from \"@sableui/react\""
         },
+        {
+          "label": "Stacked",
+          "code": "<ToastProvider stacked position=\"bottom-right\">{children}</ToastProvider>",
+          "imports": "import { ToastProvider } from \"@sableui/react\""
+        },
         {
           "label": "Provider with app chrome",
           "code": "<ToastProvider position=\"bottom-right\" limit={3}><AppShell><Region max=\"feed\"><Button onClick={() => toast.success(\"Saved\")}>Save</Button></Region></AppShell></ToastProvider>",
@@ -23699,6 +23721,11 @@
         "render",
         "style"
       ],
+      "ToastContent": [
+        "className",
+        "render",
+        "style"
+      ],
       "ToastDescription": [
         "className",
         "render",
@@ -23709,6 +23736,7 @@
         "closeIcon",
         "limit",
         "position",
+        "stacked",
         "timeout",
         "viewportClassName"
       ],
@@ -23728,6 +23756,7 @@
         "className",
         "position",
         "render",
+        "stacked",
         "style"
       ],
       "Toggle": [

package/scripts/design-presets.mjs

@@ -15,7 +15,7 @@ try {
 	const action = modes[0]
 	if (action === "--template") {
 		const manifest = JSON.parse(readFileSync(resolve(packageRoot, "package.json"), "utf8"))
-		const css = readFileSync(resolve(packageRoot, "dist/themes/base/base.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "")
+		const css = readFileSync(resolve(packageRoot, "dist/themes/sable/sable.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "")
 		const groups = { light: {}, dark: {} }
 		for (const match of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
 			const target = match[1].includes(".dark") ? groups.dark : groups.light

package/scripts/grade.mjs

@@ -33,7 +33,7 @@ import { existsSync, readFileSync, readdirSync, statSync } from "node:fs"
 import { createHash } from "node:crypto"
 import { dirname, extname, join, relative, resolve } from "node:path"
 import { fileURLToPath } from "node:url"
-import { lintText, makeRules } from "./lint-rules.mjs"
+import { ignoreGlob, lintText, makeRules } from "./lint-rules.mjs"
 import { skeletonize } from "./skeleton.mjs"
 import { assessReview, reviewTemplate } from "./review-evidence.mjs"
 
@@ -44,6 +44,7 @@ const CWD = process.cwd()
 const argv = process.argv.slice(2)
 const flags = new Map()
 const targets = []
+const ignores = []
 const BOOLEAN_FLAGS = new Set(["json", "help", "template", "strict"])
 const VALUE_FLAGS = new Set(["cli-log", "review", "icons"])
 const JSON_OUT = argv.includes("--json")
@@ -55,7 +56,11 @@ function abort(message) {
 for (let i = 0; i < argv.length; i++) {
 	const a = argv[i]
 	if (!a.startsWith("--")) targets.push(a)
-	else if (BOOLEAN_FLAGS.has(a.slice(2))) flags.set(a.slice(2), true)
+	else if (a === "--ignore" || a.startsWith("--ignore=")) {
+		const glob = a === "--ignore" ? argv[++i] : a.slice(9)
+		if (!glob || glob.startsWith("--")) abort("--ignore requires a glob.")
+		ignores.push(glob)
+	} else if (BOOLEAN_FLAGS.has(a.slice(2))) flags.set(a.slice(2), true)
 	else if (VALUE_FLAGS.has(a.slice(2))) {
 		if (!argv[i + 1] || argv[i + 1].startsWith("--")) abort(`${a} requires a file path.`)
 		flags.set(a.slice(2), argv[++i])
@@ -72,13 +77,14 @@ if (flags.has("help") || !targets.length) {
 		[
 			"grade — check the static contract and recorded review evidence. No model calls.",
 			"",
-			"  sable grade <dir...> [--json] [--review <review.json>] [--icons <icons.json>] [--strict]",
+			"  sable grade <dir...> [--json] [--review <review.json>] [--icons <icons.json>] [--ignore <glob>] [--strict]",
 			"",
 			"  --json           machine-readable scorecard",
 			"  --cli-log        a SABLE_CLI_LOG jsonl, to report whether the CLI was used at all",
 			"  --template       print a review JSON template; fill after inspecting the rendered build",
 			"  --review         validate evidence files and observations; paths are relative to this JSON",
 			'  --icons          icon names the app adds with composeIconSets: { "names": [...] }. Default: .sable/icons.json',
+			"  --ignore         skip matching paths in the checks, as sable-lint --ignore (repeatable)",
 			"  --strict         exit 1 for static findings or a missing/incomplete/unresolved review",
 			"",
 			"Checks: design-contract violations · hallucinated components and props ·",
@@ -194,7 +200,13 @@ for (const t of targets) {
 	else snapshotFiles.push(abs)
 }
 snapshotFiles.splice(0, snapshotFiles.length, ...new Set(snapshotFiles.sort()))
-const files = snapshotFiles.filter((file) => CODE.test(file))
+/* --ignore takes the same globs sable-lint does, so the grade judges the same
+   files the lint does. A data layer (palette fixtures, document colours) is
+   skipped by the checks but still fingerprinted: it is part of the build. */
+const ignoreRes = ignores.map(ignoreGlob)
+const isIgnored = (file) => ignoreRes.some((re) => re.test(relative(CWD, file).replaceAll("\\", "/")))
+const ignoredFiles = snapshotFiles.filter((file) => CODE.test(file) && isIgnored(file))
+const files = snapshotFiles.filter((file) => CODE.test(file) && !isIgnored(file))
 if (!files.length) abort("No source files found.")
 if (!files.some((file) => readFileSync(file, "utf8").trim().length > 0)) abort("No non-empty source content found.")
 // Git checkouts may use CRLF on Windows and LF in CI. Normalize only known text
@@ -463,6 +475,7 @@ const result = {
 	sourceHash,
 	fingerprint: { algorithm: "sha256", files: snapshotFiles.length, packageHash, coverage: "All non-test files in supplied targets, plus Sable runtime sources, registry, and lint contract. Known text formats normalize CRLF to LF; binary assets retain their bytes. Pass public/ for external asset directories; remote resources are not covered." },
 	files: files.length,
+	ignored: { globs: ignores, files: ignoredFiles.length },
 	loc,
 	score,
 	scoreMeaning: "Static contract only. Pattern similarity does not affect this score; visual quality is not scored.",
@@ -485,7 +498,7 @@ if (JSON_OUT) {
 
 const L = (s = "") => process.stdout.write(`${s}\n`)
 L()
-L(`  grade — ${files.length} files, ${loc} lines, against @sableui/react ${REGISTRY.version}`)
+L(`  grade — ${files.length} files, ${loc} lines, against @sableui/react ${REGISTRY.version}${ignoredFiles.length ? ` (${ignoredFiles.length} ignored)` : ""}`)
 L(`  ${"─".repeat(66)}`)
 const row = (label, n, note = "") =>
 	L(`  ${label.padEnd(26)}${String(n).padStart(4)}${note ? `   ${note}` : ""}`)

package/scripts/lint-rules.mjs

@@ -537,10 +537,14 @@ export function makeRules({ semanticTokens, motionTokens }) {
 			since: "0.1.0",
 			code: true,
 			why:
-				"A colour hand-mixed from the foreground ink — `color-mix(… var(--foreground) …)`. Sable already derives these from the surface underneath, in every theme and mode: `sable-well` (a recessed track, pad or well), `sable-surface` + `sable-surface-interactive` (hover and selected fills on any surface), `bg-hairline` / `border-hairline` (a faint ink edge or fill). `npx sable search` finds them; `registry.json → utilities` explains each. If none fits, it is a gap — report it, then take the escape hatch with the reason.",
+				"A colour hand-mixed from the foreground ink — `color-mix(… var(--foreground) …)`. Sable already derives these from the surface underneath, in every theme and mode: `sable-well` (a recessed track, pad or well), `sable-surface` + `sable-surface-interactive` (hover and selected fills on any surface), `bg-hairline` / `border-hairline` (a faint ink edge or fill). `npx sable search` finds them; `registry.json → utilities` explains each. If none fits, it is a gap — report it, then take the escape hatch with the reason. " +
+				"Exempt: the value of a `--theme-*` hook (`--theme-panel-field: color-mix(…)`), which is how a theme tunes a derived token.",
 			find(line) {
 				const out = []
 				for (const m of line.matchAll(/color-mix\([^;"'`]*?var\(--foreground\)/g)) {
+					// A theme hook is the sanctioned place to retune a derived surface,
+					// in CSS or as an arbitrary property ([--theme-x:color-mix(…)]).
+					if (/--theme-[\w-]+\s*:\s*$/.test(line.slice(0, m.index))) continue
 					out.push({ match: m[0].length > 60 ? `${m[0].slice(0, 57)}…` : m[0] })
 				}
 				return out
@@ -964,6 +968,21 @@ function stripComments(src) {
 		.replace(/(^|[^:])\/\/[^\n]*/gm, (m, p) => p + " ".repeat(m.length - p.length))
 }
 
+/**
+ * An `--ignore` glob as a RegExp over a CWD-relative, forward-slash path:
+ * `**` crosses directories, `*` stays within one. Shared by sable-lint and
+ * sable grade so the same flag skips the same files in both.
+ */
+export function ignoreGlob(glob) {
+	return new RegExp(
+		`^${glob
+			.replace(/[.+^${}()|[\]\\]/g, "\\$&")
+			.replace(/\*\*/g, "\0")
+			.replace(/\*/g, "[^/]*")
+			.replace(/\0/g, ".*")}$`,
+	)
+}
+
 export function lintText(text, rules, ctx) {
 	const lines = text.split(/\r?\n/)
 	const codeLines = stripComments(text).split(/\r?\n/)

package/dist/themes/base/index.d.ts

@@ -1,9 +0,0 @@
-import { T as ThemeManifest } from '../../_contract-BlKMR4eX.js';
-
-/**
- * Base — the default Sable theme. Concrete token values live in
- * `base.css`; this manifest is the typed, machine-readable description.
- */
-declare const baseTheme: ThemeManifest;
-
-export { baseTheme, baseTheme as default };

package/dist/themes/base/index.js

@@ -1 +0,0 @@
-export { baseTheme, base_default as default } from '../../chunk-EP55KSYA.js';