@sableui/react 0.1.1 → 0.3.0

package/dist/themes/ember/ember.css

@@ -156,6 +156,8 @@
 	--border: oklch(88% 0.008 74);
 	--border-strong: oklch(82% 0.010 73);
 	--input: oklch(85% 0.009 74);
+	/* The resting edge of a control whose outline IS the control (checkbox, radio, an off switch track). Held to WCAG 1.4.11 3:1 on every surface, unlike the quieter --input field outline. */
+	--control-border: oklch(60.2% 0.0095 70);
 	--ring: oklch(58% 0.245 32.9);
 	--primary: oklch(58% 0.245 32.9);
 	--primary-foreground: oklch(100% 0 0);
@@ -234,6 +236,7 @@
 	--border: oklch(32% 0.012 67.2); /* lifted with the fills: a hairline must still show on muted */
 	--border-strong: oklch(37% 0.010 61.1);
 	--input: oklch(33% 0.012 65);
+	--control-border: oklch(55.6% 0.0084 67.7);
 	--ring: oklch(65.2% 0.235 32.9);
 	--primary: oklch(65.2% 0.235 32.9);
 	--primary-foreground: oklch(14.1% 0.018 70.5);

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CYScOdf5.js';
+import { T as ThemeManifest } from '../../_contract-o3tUc8Ig.js';
 
 /**
  * Ember — a Sable theme. Concrete token values live in

package/dist/themes/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AnyThemeId, D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, T as ThemeId, h as applySableColorMode, i as applySableTheme, j as buildThemeManifestById, k as defaultThemeId, l as featuredThemeManifests, m as getThemeManifest, n as isKnownThemeId, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from '../theme-provider-BWcizhAt.js';
+export { A as AnyThemeId, D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, T as ThemeId, h as applySableColorMode, i as applySableTheme, j as buildThemeManifestById, k as defaultThemeId, l as featuredThemeManifests, m as getThemeManifest, n as isKnownThemeId, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from '../theme-provider-BE-KqUG-.js';
 export { atelierTheme } from './atelier/index.js';
 export { baseTheme } from './base/index.js';
 export { default as emberTheme } from './ember/index.js';
@@ -7,4 +7,4 @@ export { default as poppyTheme } from './poppy/index.js';
 export { default as prismTheme } from './prism/index.js';
 export { default as verdantTheme } from './verdant/index.js';
 import 'react';
-import '../_contract-CYScOdf5.js';
+import '../_contract-o3tUc8Ig.js';

package/dist/themes/index.js

@@ -1,8 +1,8 @@
-export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, buildThemeManifestById, defaultThemeId, featuredThemeManifests, getThemeManifest, isKnownThemeId, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from '../chunk-L6Y46C62.js';
+export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, buildThemeManifestById, defaultThemeId, featuredThemeManifests, getThemeManifest, isKnownThemeId, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from '../chunk-MXJX3NZI.js';
+export { prismTheme } from '../chunk-7MG4SHYX.js';
 export { verdantTheme } from '../chunk-KO3NAEBF.js';
 export { emberTheme } from '../chunk-L4IEIQQA.js';
 export { baseTheme } from '../chunk-EP55KSYA.js';
 export { poppyTheme } from '../chunk-ADLLDWLW.js';
 export { meridianTheme } from '../chunk-K7RUHUGC.js';
 export { atelierTheme } from '../chunk-YXBOYWBN.js';
-export { prismTheme } from '../chunk-7MG4SHYX.js';

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CYScOdf5.js';
+import { T as ThemeManifest } from '../../_contract-o3tUc8Ig.js';
 
 /**
  * Meridian — a Sable theme. Concrete token values live in

package/dist/themes/meridian/meridian.css

@@ -117,15 +117,19 @@
 	   ---------------------------------------------------------------------- */
 	--background: oklch(94.6% 0.0083 91.48);
 	--foreground: oklch(26.25% 0.0162 102.18);
-	--card: oklch(94.6% 0.0083 91.48);
+	/* A step above the paper page, as in every preset with a tinted page: a card
+	   level with it left fields reading as part of the page, not a box to type in. */
+	--card: oklch(97.6% 0.006 91.48);
 	--card-foreground: oklch(26.25% 0.0162 102.18);
-	--popover: oklch(94.6% 0.0083 91.48);
+	--popover: oklch(97.6% 0.006 91.48);
 	--popover-foreground: oklch(26.25% 0.0162 102.18);
 	--muted: oklch(91.24% 0.0138 92.99);
 	--muted-foreground: oklch(49.93% 0.0412 93.54);
 	--border: oklch(87.54% 0.0194 93.69);
 	--border-strong: oklch(81.94% 0.0252 94.12);
 	--input: oklch(87.54% 0.0194 93.69);
+	/* The resting edge of a control whose outline IS the control (checkbox, radio, an off switch track). Held to WCAG 1.4.11 3:1 on every surface, unlike the quieter --input field outline. */
+	--control-border: oklch(58.9% 0.0346 93.54);
 	--ring: oklch(62% 0.2063 32.56);
 	--primary: oklch(26.25% 0.0162 102.18);
 	--primary-foreground: oklch(94.6% 0.0083 91.48);
@@ -167,7 +171,7 @@
 	--sidebar-primary-foreground: oklch(22.46% 0.0094 107.13);
 	--sidebar-accent: oklch(27.1% 0.0143 101.41);
 	--sidebar-accent-foreground: oklch(94.3% 0.0042 91.45);
-	--sidebar-border: oklch(27.1% 0.0143 101.41);
+	--sidebar-border: oklch(34.69% 0.0186 98.75);
 	--sidebar-ring: oklch(65.11% 0.2063 32.56);
 
 	/* ----------------------------------------------------------------------
@@ -216,8 +220,9 @@
 	 * only the edge separates. Caught by the non-text contrast gate.
 	 */
 	--border: oklch(34.69% 0.0186 98.75);
-	--border-strong: oklch(34.69% 0.0186 98.75);
+	--border-strong: oklch(44% 0.0225 96); /* one visible step above --border, which was lifted to the old strong value */
 	--input: oklch(34.69% 0.0186 98.75);
+	--control-border: oklch(60% 0.002 0);
 	--ring: oklch(65.11% 0.2063 32.56);
 	--primary: oklch(94.3% 0.0042 91.45);
 	--primary-foreground: oklch(22.46% 0.0094 107.13);
@@ -250,6 +255,6 @@
 	--sidebar-primary-foreground: oklch(22.46% 0.0094 107.13);
 	--sidebar-accent: oklch(27.1% 0.0143 101.41);
 	--sidebar-accent-foreground: oklch(94.3% 0.0042 91.45);
-	--sidebar-border: oklch(27.1% 0.0143 101.41);
+	--sidebar-border: oklch(34.69% 0.0186 98.75);
 	--sidebar-ring: oklch(65.11% 0.2063 32.56);
 }

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CYScOdf5.js';
+import { T as ThemeManifest } from '../../_contract-o3tUc8Ig.js';
 
 /** Original Sable preset; no third-party artwork or reference-site code. */
 declare const poppyTheme: ThemeManifest;

package/dist/themes/poppy/poppy.css

@@ -69,6 +69,8 @@
 	--border: oklch(69.96908% 0.055090 333.3586);
 	--border-strong: oklch(54.87925% 0.056525 333.9456);
 	--input: oklch(69.96908% 0.055090 333.3586);
+	/* The resting edge of a control whose outline IS the control (checkbox, radio, an off switch track). Held to WCAG 1.4.11 3:1 on every surface, unlike the quieter --input field outline. */
+	--control-border: oklch(60% 0.0598 321.39);
 	--ring: oklch(40.99289% 0.130336 325.3125);
 	--primary: oklch(38.38082% 0.116390 323.6155);
 	--primary-foreground: oklch(100.00000% 0.000000 89.8756);
@@ -119,14 +121,27 @@
 	--spacing: 0.28rem;
 	--theme-button-radius: 12px;
 	--button-radius: var(--theme-button-radius);
+	/* Hard offsets the whole way up. Only sm and md were declared, so the
+	   default, lg and xl steps fell through to Base's soft blurs and one ladder
+	   spoke two shadow languages. Offset doubles roughly per step. */
 	--theme-shadow-sm: 3px 3px 0 oklch(32% 0.05 320 / 0.12);
+	--theme-shadow: 4px 4px 0 oklch(32% 0.05 320 / 0.13);
 	--theme-shadow-md: 5px 5px 0 oklch(32% 0.05 320 / 0.14);
+	--theme-shadow-lg: 8px 8px 0 oklch(32% 0.05 320 / 0.16);
+	--theme-shadow-xl: 12px 12px 0 oklch(32% 0.05 320 / 0.18);
 }
 
 .dark[data-sable-theme="poppy"],
 [data-sable-theme="poppy"].dark,
 [data-sable-theme="poppy"] .dark,
 .dark [data-sable-theme="poppy"]:not(.light) {
+	/* The light ladder's ink is 32% lightness — LIGHTER than this 20% page, so
+	   in dark mode it drew a faint glow, not a shadow. Same offsets, near-black. */
+	--theme-shadow-sm: 3px 3px 0 oklch(8% 0.03 320 / 0.5);
+	--theme-shadow: 4px 4px 0 oklch(8% 0.03 320 / 0.52);
+	--theme-shadow-md: 5px 5px 0 oklch(8% 0.03 320 / 0.55);
+	--theme-shadow-lg: 8px 8px 0 oklch(8% 0.03 320 / 0.6);
+	--theme-shadow-xl: 12px 12px 0 oklch(8% 0.03 320 / 0.65);
 	--background: oklch(20.33265% 0.047438 308.8247);
 	--foreground: oklch(96.99788% 0.031195 84.5922);
 	--card: oklch(28.82474% 0.059607 315.2029);
@@ -138,6 +153,7 @@
 	--border: oklch(62.48980% 0.070560 325.5308);
 	--border-strong: oklch(72.17143% 0.060424 328.9840);
 	--input: oklch(62.48980% 0.070560 325.5308);
+	--control-border: oklch(67.3% 0.0412 332.63);
 	--ring: oklch(86.64637% 0.118528 86.6791);
 	--primary: oklch(86.64637% 0.118528 86.6791);
 	--primary-foreground: oklch(27.91553% 0.070219 323.8141);

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CYScOdf5.js';
+import { T as ThemeManifest } from '../../_contract-o3tUc8Ig.js';
 
 /** Original Sable preset; no third-party artwork or reference-site code. */
 declare const prismTheme: ThemeManifest;

package/dist/themes/prism/prism.css

@@ -12,7 +12,7 @@
 	--region-ultrawide: 1800px;
 	--theme-radius-none: 0px;
 	--theme-radius-xs: 2px;
-	--theme-radius-sm: 4px;
+	--theme-radius-sm: 3px; /* a step of its own — sm and md were both 4px, which erased a rung of the ladder */
 	--theme-radius-md: 4px;
 	--theme-radius-lg: 6px;
 	--theme-radius-xl: 8px;
@@ -69,6 +69,8 @@
 	--border: oklch(79.84882% 0.029246 251.5080);
 	--border-strong: oklch(64.27577% 0.042824 253.1390);
 	--input: oklch(79.84882% 0.029246 251.5080);
+	/* The resting edge of a control whose outline IS the control (checkbox, radio, an off switch track). Held to WCAG 1.4.11 3:1 on every surface, unlike the quieter --input field outline. */
+	--control-border: oklch(60% 0.0298 252.77);
 	--ring: oklch(50.45463% 0.203215 263.5596);
 	--primary: oklch(50.45463% 0.203215 263.5596);
 	--primary-foreground: oklch(100.00000% 0.000000 89.8756);
@@ -147,6 +149,7 @@
 	--border: oklch(58.06940% 0.052170 251.5856);
 	--border-strong: oklch(69.19219% 0.042050 253.1082);
 	--input: oklch(58.06940% 0.052170 251.5856);
+	--control-border: oklch(67.7% 0.0275 255.1);
 	--ring: oklch(82.28684% 0.088371 261.1846);
 	--primary: oklch(82.28684% 0.088371 261.1846);
 	--primary-foreground: oklch(25.20350% 0.047984 259.9119);

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

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CYScOdf5.js';
+import { T as ThemeManifest } from '../../_contract-o3tUc8Ig.js';
 
 /**
  * Verdant — a Sable theme. Concrete token values live in

package/dist/themes/verdant/verdant.css

@@ -90,15 +90,19 @@
 	   ---------------------------------------------------------------------- */
 	--background: oklch(98.6% 0.004 106);
 	--foreground: oklch(24% 0.035 175);
-	--card: oklch(96.1% 0.005 106);
+	/* Cards, fields and popovers sit at or above the page, never recessed into it:
+	   a card darker than the page made every field read as a filled grey box. */
+	--card: oklch(99.7% 0.002 106);
 	--card-foreground: oklch(24% 0.035 175);
-	--popover: oklch(98.6% 0.004 106);
+	--popover: oklch(99.7% 0.002 106);
 	--popover-foreground: oklch(24% 0.035 175);
 	--muted: oklch(93% 0.007 106);
 	--muted-foreground: oklch(49% 0.018 175);
 	--border: oklch(88.5% 0.005 106);
 	--border-strong: oklch(81% 0.008 130);
 	--input: oklch(88.5% 0.005 106);
+	/* The resting edge of a control whose outline IS the control (checkbox, radio, an off switch track). Held to WCAG 1.4.11 3:1 on every surface, unlike the quieter --input field outline. */
+	--control-border: oklch(59.9% 0.0149 175);
 	--ring: oklch(24% 0.035 175);
 	--primary: oklch(24% 0.035 175);
 	--primary-foreground: oklch(98.6% 0.004 106);
@@ -174,6 +178,7 @@
 	--border: oklch(36% 0.03 175);
 	--border-strong: oklch(40% 0.028 175);
 	--input: oklch(36% 0.03 175);
+	--control-border: oklch(58.7% 0.0158 172);
 	--ring: oklch(85% 0.015 170);
 	--primary: oklch(98.6% 0.004 106);
 	--primary-foreground: oklch(24% 0.035 175);

package/llms/blocks/api-keys-block.md

@@ -0,0 +1,79 @@
+# ApiKeysBlock
+
+An API keys card: each key's name with its masked hint in Code, when it was created and last used, and an OverflowMenu to rename, roll or revoke.
+
+**Intent:** Reach for this for developer settings — API keys, access tokens, webhook secrets. Show a newly created key once, in a Dialog with a copy button; this list only ever shows the masked hint.
+
+**Block:** Settings & team · card · designed for 20rem–42rem wide (fills its container up to the max)
+
+## Notes
+
+- Only the last four characters are shown. A full key never appears in a list, so there is no copy action here.
+- "Last used" sits in the detail line: it is what tells someone a key is safe to revoke.
+- Revoke is the destructive item, last and after a separator; confirm it in your handler with DestructiveActionModal.
+
+## Accessibility
+
+- Each OverflowMenu is labelled with the key's name, so the triggers are distinguishable.
+- The masked hint is a Code element inside the title, read after the key's name.
+
+## Source
+
+```tsx
+import { Button, Card, CardAction, CardDescription, CardHeader, CardList, CardTitle, cn, Code, Entity, Icon, MenuItem, MenuSeparator, OverflowMenu } from "@sableui/react"
+
+const keys = [
+	{ id: "k1", name: "Production", hint: "sk_live_••••4f2a", detail: "Created Mar 2 · used 4 minutes ago" },
+	{ id: "k2", name: "Staging", hint: "sk_test_••••91cd", detail: "Created Feb 11 · used yesterday" },
+	{ id: "k3", name: "CI deploys", hint: "sk_live_••••0b7e", detail: "Created Jan 5 · never used" },
+]
+
+export interface ApiKeysBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	onCreate?: () => void
+	/** Called with the key's id and the action chosen from its menu. */
+	onKeyAction?: (id: string, action: "rename" | "roll" | "revoke") => void
+}
+
+export function ApiKeysBlock({ className, framed = true, onCreate, onKeyAction }: ApiKeysBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-2xl", className)}>
+			<CardHeader>
+				<CardTitle render={<h2 />}>API keys</CardTitle>
+				<CardDescription>A key is shown once, when you create it. Store it somewhere safe.</CardDescription>
+				<CardAction>
+					<Button size="sm" variant="outline" iconStart={<Icon name="key" />} onClick={onCreate}>
+						Create key
+					</Button>
+				</CardAction>
+			</CardHeader>
+			<CardList>
+				{keys.map((k) => (
+					<Entity
+						key={k.id}
+						title={
+							<span className="flex flex-wrap items-center gap-x-2">
+								{k.name}
+								<Code>{k.hint}</Code>
+							</span>
+						}
+						subtitle={k.detail}
+						action={
+							<OverflowMenu label={`Manage the ${k.name} key`} size="icon-sm">
+								<MenuItem onClick={() => onKeyAction?.(k.id, "rename")}>Rename</MenuItem>
+								<MenuItem onClick={() => onKeyAction?.(k.id, "roll")}>Roll key</MenuItem>
+								<MenuSeparator />
+								<MenuItem variant="destructive" onClick={() => onKeyAction?.(k.id, "revoke")}>
+									Revoke
+								</MenuItem>
+							</OverflowMenu>
+						}
+					/>
+				))}
+			</CardList>
+		</Card>
+	)
+}
+```

package/llms/blocks/chat-thread-block.md

@@ -0,0 +1,51 @@
+# ChatThreadBlock
+
+A short message thread on a card: Message rows with incoming muted Bubbles on the start side and your own primary Bubbles on the end.
+
+**Intent:** Reach for this to show a conversation excerpt — a support preview, a comment thread on a dashboard, a recent-DM card. A working chat with a composer, streaming and history is the ChatPanel page shell.
+
+**Block:** Social & messaging · card · designed for 16rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- Sit it on a card, not straight on a muted page: incoming bubbles are the muted surface, and would vanish into it.
+- Your own messages align to the end with the primary Bubble; everyone else's align to the start.
+
+## Accessibility
+
+- Each Message carries a messageId, so a thread can be addressed and announced item by item.
+- Direction is shown by alignment and colour; when senders matter, add the sender's name to each Message.
+
+## Source
+
+```tsx
+import { Bubble, Card, CardContent, cn, Message } from "@sableui/react"
+
+const messages = [
+	{ id: "m1", text: "Is the new cover ready?", mine: false },
+	{ id: "m2", text: "Uploading it now 🎉", mine: true },
+	{ id: "m3", text: "Perfect, thank you!", mine: false },
+]
+
+export interface ChatThreadBlockProps {
+	className?: string
+	/** false drops the card's surface and border. Keep it framed on a muted page: incoming bubbles are the muted surface too. */
+	framed?: boolean
+}
+
+export function ChatThreadBlock({ className, framed = true }: ChatThreadBlockProps) {
+	return (
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs", className)}>
+			<CardContent className="flex flex-col gap-2">
+				{messages.map((m) => (
+					<Message key={m.id} messageId={m.id} align={m.mine ? "end" : undefined}>
+						<Bubble variant={m.mine ? "primary" : undefined} align={m.mine ? "end" : undefined}>
+							{m.text}
+						</Bubble>
+					</Message>
+				))}
+			</CardContent>
+		</Card>
+	)
+}
+```

package/llms/blocks/command-palette-block.md

@@ -0,0 +1,48 @@
+# CommandPaletteBlock
+
+An inline command palette: CommandMenuPanel with a filter field and grouped actions, each with an icon and its keyboard shortcut.
+
+**Intent:** Reach for this to show a command list in place — an empty state that teaches shortcuts, an onboarding step, a quick-actions card. The ⌘K palette that opens over the app is CommandMenu; this is its panel without the dialog.
+
+**Block:** Navigation · card · designed for 18rem–20rem wide (fills its container up to the max)
+
+## Notes
+
+- Each command shows its shortcut as a Kbd hint, so the palette also teaches the keys.
+- `onCommand` receives the command's id; ids also key the rows, so two commands may share a label.
+- No card around it: the panel is its own surface, lifted with `shadow-sm` when it sits on a muted section.
+
+## Accessibility
+
+- CommandMenuPanel wires the filter input to the list as a combobox, with arrow-key navigation and the active row announced.
+- Shortcut hints are Kbd elements, read as keys.
+
+## Source
+
+```tsx
+import { cn, CommandMenuPanel, Kbd, type CommandItem } from "@sableui/react"
+
+const commands = [
+	{ id: "new-project", icon: "plus", label: "New project", key: "N" },
+	{ id: "invite", icon: "user", label: "Invite teammate", key: "I" },
+	{ id: "settings", icon: "gear", label: "Open settings", key: "," },
+]
+
+export interface CommandPaletteBlockProps {
+	className?: string
+	/** Called with the chosen command's id. */
+	onCommand?: (id: string) => void
+}
+
+export function CommandPaletteBlock({ className, onCommand }: CommandPaletteBlockProps) {
+	const items: CommandItem[] = commands.map((c) => ({
+		id: c.id,
+		group: "Actions",
+		icon: c.icon,
+		label: c.label,
+		hint: <Kbd>{c.key}</Kbd>,
+		onSelect: () => onCommand?.(c.id),
+	}))
+	return <CommandMenuPanel className={cn("w-full max-w-xs shadow-sm", className)} placeholder="Type a command…" items={items} />
+}
+```

package/llms/blocks/cta-band-block.md

@@ -0,0 +1,62 @@
+# CtaBandBlock
+
+A closing call to action: a centred h2 and one-line lede on a card, with a primary and an outline action.
+
+**Intent:** Reach for this as the last section before the footer, repeating the hero's primary action once the reader has seen the case. Mid-page prompts to sign up belong inline, not in a band.
+
+**Block:** Marketing · section
+
+## Notes
+
+- Copied from the LandingPage page shell's closing call to action.
+- The primary action matches the hero's, so the page asks for one thing twice rather than two things once.
+- Sitting on a Card lifts it from the page without a coloured band, so it follows any preset.
+
+## Accessibility
+
+- The section is labelled by its h2.
+- Both actions are links styled as Buttons, because they navigate.
+
+## Source
+
+```tsx
+import { useId } from "react"
+import { Button, Card, CardContent, cn, Region, Row, Stack } from "@sableui/react"
+
+const cta = {
+	title: "Build the product, not another component library",
+	lede: "Install Sable, pick a preset, and ship the first screen today.",
+	primary: { label: "Get started", href: "/docs/getting-started" },
+	secondary: { label: "Star on GitHub", href: "/github" },
+}
+
+export interface CtaBandBlockProps {
+	className?: string
+}
+
+export function CtaBandBlock({ className }: CtaBandBlockProps) {
+	const titleId = useId()
+	return (
+		<Region as="section" aria-labelledby={titleId} max="wide" className={cn("w-full py-16", className)}>
+			<Card>
+				<CardContent>
+					<Stack gap={4} align="center" className="py-8 text-center sm:py-12">
+						<h2 id={titleId} className="max-w-2xl text-balance text-heading-1">
+							{cta.title}
+						</h2>
+						<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">{cta.lede}</p>
+						<Row gap={2} justify="center" wrap className="pt-2">
+							<Button size="cta" render={<a href={cta.primary.href} />}>
+								{cta.primary.label}
+							</Button>
+							<Button size="cta" variant="outline" render={<a href={cta.secondary.href} />}>
+								{cta.secondary.label}
+							</Button>
+						</Row>
+					</Stack>
+				</CardContent>
+			</Card>
+		</Region>
+	)
+}
+```

package/llms/blocks/danger-zone-block.md

@@ -0,0 +1,69 @@
+# DangerZoneBlock
+
+A delete-account card: what deleting removes and what survives, one destructive Button, and a DestructiveActionModal that asks for the handle to be typed before it acts.
+
+**Intent:** Reach for this as the last section of account, workspace or project settings. Deleting a single record from a list is an OverflowMenu item that opens DestructiveActionModal directly, not a card.
+
+**Block:** Settings & team · card · designed for 20rem–42rem wide (fills its container up to the max)
+
+## Notes
+
+- Copied from the SettingsPage page shell's Delete account section.
+- The button never acts directly: it opens the modal, whose confirm stays disabled until the handle is typed.
+- The description says what is lost AND what is kept ("Collectors keep the editions they own"), which is what people want to know before they decide.
+
+## Accessibility
+
+- DestructiveActionModal is an alertdialog: focus opens on Cancel and the backdrop does not dismiss it.
+- The CardTitle is an h2, so the section is reachable by heading.
+
+## Source
+
+```tsx
+import { useState } from "react"
+import { Button, Card, CardDescription, CardFooter, CardHeader, CardTitle, cn, DestructiveActionModal } from "@sableui/react"
+
+const account = { handle: "ada", editions: 12 }
+
+export interface DangerZoneBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+	/** Called once the person has typed the handle and confirmed. */
+	onDelete?: () => void
+}
+
+export function DangerZoneBlock({ className, framed = true, onDelete }: DangerZoneBlockProps) {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-2xl", className)}>
+				<CardHeader>
+					<CardTitle render={<h2 />}>Delete account</CardTitle>
+					<CardDescription>
+						Permanently remove your profile, editions, and sales history. Collectors keep the editions they own.
+					</CardDescription>
+				</CardHeader>
+				<CardFooter className="justify-end">
+					<Button variant="destructive" onClick={() => setOpen(true)}>
+						Delete account
+					</Button>
+				</CardFooter>
+			</Card>
+			<DestructiveActionModal
+				open={open}
+				onOpenChange={setOpen}
+				title="Delete your account?"
+				description={`This permanently removes your profile, ${account.editions} editions, and sales history. Pending payouts are still sent. This can't be undone.`}
+				confirmLabel="Delete account"
+				confirmingLabel="Deleting…"
+				confirmText={account.handle}
+				onConfirm={() => {
+					setOpen(false)
+					onDelete?.()
+				}}
+			/>
+		</>
+	)
+}
+```

package/llms/blocks/device-comparison-block.md

@@ -0,0 +1,91 @@
+# DeviceComparisonBlock
+
+A comparison card: each series' total sits in the header as a pressable tile, and the one pressed is plotted below as a daily BarChart.
+
+**Intent:** Reach for this when two or three measures share a page and the reader looks at one at a time — devices, regions, plans. To see them together, plot both in one BarChart or LineChart instead.
+
+**Block:** Dashboard · card · designed for 20rem–48rem wide (fills its container up to the max)
+
+## Notes
+
+- The totals are the switch: Toggles in a labelled ToggleGroup, so the number and the control are one thing, with the group's own pressed and hover states.
+- Switching eases every bar to its new height rather than redrawing.
+- Below sm the tiles stack under the title and divide with a top rule instead of a side rule.
+
+## Accessibility
+
+- Each total is a Toggle (aria-pressed) named by its label and value, in a ToggleGroup labelled "Device" with arrow-key movement between tiles.
+- The chart's name says which series is plotted, so the data table is unambiguous.
+
+## Source
+
+```tsx
+import { useState } from "react"
+import { BarChart, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, Toggle, ToggleGroup } from "@sableui/react"
+
+/** 30 days of visitors — replace with your own rows ({ date, desktop, mobile }). */
+const days = Array.from({ length: 30 }, (_, i) => ({
+	date: new Date(2026, 8, 1 + i).toISOString().slice(0, 10),
+	desktop: Math.round(320 + Math.sin(i / 3) * 90 + (i % 5) * 14),
+	mobile: Math.round(260 + Math.cos(i / 4) * 80 + (i % 4) * 18),
+}))
+
+const series = [
+	{ key: "desktop", label: "Desktop" },
+	{ key: "mobile", label: "Mobile" },
+] as const
+
+const shortDate = (iso: string) => new Date(`${iso}T00:00:00`).toLocaleDateString("en-US", { month: "short", day: "numeric" })
+
+export interface DeviceComparisonBlockProps {
+	className?: string
+	/** false drops the card's surface and border — for a muted section that already frames it. */
+	framed?: boolean
+}
+
+export function DeviceComparisonBlock({ className, framed = true }: DeviceComparisonBlockProps) {
+	const [active, setActive] = useState<string>("desktop")
+	const totals = Object.fromEntries(series.map((s) => [s.key, days.reduce((sum, d) => sum + d[s.key], 0)]))
+	const current = series.find((s) => s.key === active) ?? series[0]
+	return (
+		// overflow-hidden: the square tiles meet the card's rounded corner.
+		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-3xl overflow-hidden", className)}>
+			<div className="flex flex-col border-b border-border sm:flex-row">
+				<CardHeader className="flex-1 pb-[var(--card-p,--spacing(6))]">
+					<CardTitle render={<h2 />}>Visitors by device</CardTitle>
+					<CardDescription>The last 30 days. Pick a device to plot it.</CardDescription>
+				</CardHeader>
+				{/* The totals ARE the switch: one pressed tile per series. */}
+				<ToggleGroup
+					value={[active]}
+					onValueChange={(v: unknown[]) => v[0] && setActive(String(v[0]))}
+					aria-label="Device"
+					className="items-stretch gap-0"
+				>
+					{series.map((s) => (
+						<Toggle
+							key={s.key}
+							value={s.key}
+							className="h-auto flex-1 flex-col items-start justify-center gap-1 rounded-none border-border px-6 py-4 text-start text-foreground max-sm:border-t sm:border-s"
+						>
+							<span className="text-caption text-muted-foreground">{s.label}</span>
+							<span className="text-mono-lg">{totals[s.key].toLocaleString("en-US")}</span>
+						</Toggle>
+					))}
+				</ToggleGroup>
+			</div>
+			<CardContent>
+				<BarChart
+					label={`${current.label} visitors per day, last 30 days`}
+					data={days}
+					index="date"
+					series={[current]}
+					indexFormatter={shortDate}
+					radius={3}
+					className="h-64"
+				/>
+			</CardContent>
+		</Card>
+	)
+}
+```