@sableui/react 0.2.0 → 0.3.0

package/dist/ios/index.d.ts

@@ -21,8 +21,13 @@ declare function iosThemeStyle(tokens: IosBrandTokens): CSSProperties;
  * the chrome and any Sable content then follow the preset together. `tokens`
  * overrides individual semantic values. `mode` also sets `dark` on <html>, so
  * Sable popups portaled to <body> follow the prototype's appearance.
+ *
+ * `systemChrome={false}` is for a prototype shown on a real phone, without
+ * PhoneFrame: the device already draws its own status bar and home indicator,
+ * so the fake ones go, and the safe areas come from the device
+ * (`env(safe-area-inset-*)`) instead of the standard phone's fixed geometry.
  */
-declare function NativeApp({ children, mode, glassTint, reducedMotion, className, tokens, style, }: {
+declare function NativeApp({ children, mode, glassTint, reducedMotion, className, tokens, style, systemChrome, }: {
     children: ReactNode;
     mode?: "light" | "dark";
     glassTint?: number;
@@ -30,6 +35,8 @@ declare function NativeApp({ children, mode, glassTint, reducedMotion, className
     className?: string;
     tokens?: IosBrandTokens;
     style?: CSSProperties;
+    /** Draw the status bar, island and home indicator. Turn off on a real phone. @default true */
+    systemChrome?: boolean;
 }): react.JSX.Element;
 
 type Navigation = {

package/dist/ios/index.js

@@ -124,7 +124,8 @@ function NativeApp({
   reducedMotion = false,
   className = "",
   tokens = {},
-  style
+  style,
+  systemChrome = true
 }) {
   const dark = mode === "dark";
   useEffect(() => {
@@ -136,18 +137,18 @@ function NativeApp({
     {
       theme: "ios",
       dark,
-      className: `ios-prototype ${dark ? "dark" : ""} ${className}`,
+      className: `ios-prototype ${dark ? "dark" : ""} ${systemChrome ? "" : "ios-bare"} ${className}`,
       "data-reduced-motion": reducedMotion || void 0,
       style: { ...iosThemeStyle(tokens), "--ios-glass-tint": tint, ...style },
       children: [
         /* @__PURE__ */ jsx(LiquidGlassMaterial, {}),
-        /* @__PURE__ */ jsxs("div", { className: "ios-status-bar", "aria-hidden": "true", children: [
+        systemChrome ? /* @__PURE__ */ jsxs("div", { className: "ios-status-bar", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx("span", { children: "9:41" }),
           /* @__PURE__ */ jsx("span", { className: "ios-island" }),
           /* @__PURE__ */ jsx(StatusIcons, { className: "ios-status-icons" })
-        ] }),
+        ] }) : null,
         children,
-        /* @__PURE__ */ jsx("div", { className: "ios-home-indicator", "aria-hidden": "true" })
+        systemChrome ? /* @__PURE__ */ jsx("div", { className: "ios-home-indicator", "aria-hidden": "true" }) : null
       ]
     }
   );

package/dist/ios/preview.d.ts

@@ -26,11 +26,21 @@ declare const phoneSizes: {
  * scaled, never the viewport, so the prototype lays out as it would on a phone.
  * The document draws its own status bar, island and home indicator, so the
  * frame draws neither.
+ *
+ * `fit="width"` (the default) scales the device to its host's width and sizes
+ * the host to match. `fit="contain"` scales it to fit BOTH of the host's
+ * dimensions and centres it, so the whole device stays in view: give the host
+ * a height through `className` (a viewport-relative one keeps the phone on
+ * screen beside other controls).
  */
-declare function PhoneFrame({ src, title, size, frameRef, onLoad, }: {
+declare function PhoneFrame({ src, title, size, fit, className, frameRef, onLoad, }: {
     src: string;
     title?: string;
     size?: keyof typeof phoneSizes;
+    /** "width" fills the host's width; "contain" fits the host's width and height. @default "width" */
+    fit?: "width" | "contain";
+    /** Classes for the host box. With fit="contain", this is where its height comes from. */
+    className?: string;
     frameRef?: Ref<HTMLIFrameElement>;
     onLoad?: ReactEventHandler<HTMLIFrameElement>;
 }): react.JSX.Element;

package/dist/ios/preview.js

@@ -1,6 +1,6 @@
 import { Phone } from '../chunk-KFZ43RKU.js';
 import '../chunk-NEQNXI2G.js';
-import '../chunk-SRQWQUTW.js';
+import { cn } from '../chunk-SRQWQUTW.js';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -15,12 +15,14 @@ function PhoneFrame({
   src,
   title = "iPhone prototype",
   size = "standard",
+  fit = "width",
+  className,
   frameRef,
   onLoad
 }) {
   const host = useRef(null);
   const device = useRef(null);
-  const [fit, setFit] = useState({ scale: 1, width: 0, height: 0 });
+  const [box, setBox] = useState({ scale: 1, width: 0, height: 0, offset: 0 });
   const { width, height } = phoneSizes[size];
   useEffect(() => {
     const hostEl = host.current;
@@ -28,26 +30,29 @@ function PhoneFrame({
     if (!hostEl || !deviceEl) return;
     const measure = () => {
       const natural = { width: deviceEl.offsetWidth, height: deviceEl.offsetHeight };
-      const scale = natural.width ? Math.min(1, hostEl.clientWidth / natural.width) : 1;
-      setFit({ scale, ...natural });
+      if (!natural.width) return setBox({ scale: 1, ...natural, offset: 0 });
+      const byHeight = fit === "contain" && hostEl.clientHeight ? hostEl.clientHeight / natural.height : 1;
+      const scale = Math.min(1, hostEl.clientWidth / natural.width, byHeight);
+      const offset = fit === "contain" ? Math.max(0, (hostEl.clientWidth - natural.width * scale) / 2) : 0;
+      setBox({ scale, ...natural, offset });
     };
     const observer = new ResizeObserver(measure);
     observer.observe(hostEl);
     observer.observe(deviceEl);
     return () => observer.disconnect();
-  }, []);
+  }, [fit]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: host,
-      className: "ios-preview-host",
-      style: { maxWidth: fit.width || void 0, height: fit.height ? fit.height * fit.scale : height },
+      className: cn("ios-preview-host", className),
+      style: fit === "contain" ? void 0 : { maxWidth: box.width || void 0, height: box.height ? box.height * box.scale : height },
       children: /* @__PURE__ */ jsx(
         "div",
         {
           ref: device,
           className: "ios-phone-frame",
-          style: { width: width / 0.926, transform: `scale(${fit.scale})` },
+          style: { width: width / 0.926, insetInlineStart: box.offset, transform: `scale(${box.scale})` },
           children: /* @__PURE__ */ jsx(Phone, { statusBar: false, systemChrome: false, className: "w-full", children: /* @__PURE__ */ jsx("iframe", { ref: frameRef, onLoad, src, title, className: "ios-phone-screen" }) })
         }
       )

package/dist/ios/styles.css

@@ -24,6 +24,12 @@
   --ios-motion: 300ms; --ios-safe-top: 62px; --ios-header-height: 154px; --ios-tabbar-bottom: 28px; --ios-content-bottom: 110px;
   font-family: var(--font-sans, system-ui, sans-serif); color: var(--ios-ink); background: var(--ios-canvas); height: 100dvh; overflow: hidden;
 }
+/* On a real phone (NativeApp systemChrome={false}): the device's own insets, the
+   same chrome heights above and below them. */
+.ios-prototype.ios-bare {
+  --ios-safe-top: env(safe-area-inset-top, 0px); --ios-header-height: calc(92px + var(--ios-safe-top));
+  --ios-tabbar-bottom: max(12px, env(safe-area-inset-bottom, 0px)); --ios-content-bottom: calc(82px + var(--ios-tabbar-bottom));
+}
 .ios-prototype.dark {
   --ios-canvas: var(--background, #000); --ios-ink: var(--foreground, #f2f2f7); --ios-secondary: var(--muted-foreground, #aeaeb2);
   --ios-panel: var(--card, #1c1c1e); --ios-primary-ink: var(--primary-foreground, #fff);

package/dist/{meta-6dUzgC6M.d.ts → meta-CcE_SeFu.d.ts}

@@ -140,6 +140,42 @@ interface PatternMeta {
     /** Accessibility notes. */
     a11y?: string[];
 }
+/**
+ * A block: a section-sized composition of components with sample content —
+ * smaller than a page shell, with no behaviour of its own to upgrade. Ships
+ * the way patterns do (copy-in source + importable preview). Its props are
+ * the block contract only — `className`, `framed` on Card-built blocks, and
+ * the primary action's callback — never content; content is the constant at
+ * the top of the source, edited after copying.
+ */
+interface BlockMeta {
+    /** Block name, e.g. "SignInBlock". Always ends in "Block". */
+    name: string;
+    /** One-line summary. */
+    summary: string;
+    /** When to reach for this block — and when a component or page shell fits better. */
+    intent: string;
+    /**
+     * "card" — one self-contained object that fills its container up to a
+     * designed width. "section" — a full-width band of a page.
+     */
+    kind: "card" | "section";
+    /**
+     * The width range it is designed for, as CSS lengths. The block renders
+     * `w-full` capped at `max`; `min` is the narrowest it still holds together
+     * (a grid's `minItemWidth`). Section blocks omit it.
+     */
+    width?: {
+        min: string;
+        max: string;
+    };
+    /** Groups related blocks in the catalog ("Auth", "Commerce", …). */
+    family: string;
+    /** Canonical decisions the block encodes. */
+    notes?: string[];
+    /** Accessibility notes. */
+    a11y?: string[];
+}
 interface ComponentMeta {
     /** Public component name, e.g. "Button". Must be an actual export. */
     name: string;
@@ -202,4 +238,4 @@ interface ComponentMeta {
     examples: ExampleMeta[];
 }
 
-export type { AnatomyMeta as A, BestPracticeMeta as B, ComponentMeta as C, ExampleMeta as E, MotionMeta as M, PatternMeta as P, RelatedMeta as R, SubcomponentMeta as S, UsageMeta as U, MotionSlot as a, PropMeta as b };
+export type { AnatomyMeta as A, BlockMeta as B, ComponentMeta as C, ExampleMeta as E, MotionMeta as M, PatternMeta as P, RelatedMeta as R, SubcomponentMeta as S, UsageMeta as U, BestPracticeMeta as a, MotionSlot as b, PropMeta as c };

package/dist/patterns/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { P as PatternMeta } from '../meta-6dUzgC6M.js';
+import { P as PatternMeta } from '../meta-CcE_SeFu.js';
 
 declare function AuthPage(): react.JSX.Element;
 

package/dist/patterns/index.js

@@ -1,8 +1,9 @@
-import { Form, Field, Input, Button, Separator, Card, CardContent, Badge, Entity, Avatar, TextReveal, StatusDot, Reveal, CardHeader, CardTitle, CardDescription, CardAction, MessageScroller, Marker, Message, Bubble, CodeBlock, Toolbar, SimpleTooltip, ToolbarButton, Attachment, StreamingText, CardFooter, ChatComposer, SettingsMenu, SettingsRow, MenuRadioGroup, MenuRadioItem, AppShell, PageHeader, DataTable, Meter, CardList, RelativeTime, Sidebar, SidebarHeader, SidebarNav, SidebarItem, NotificationBadge, SidebarFooter, DotsMenu, MenuItem, MenuSeparator, BottomNav, BottomNavItem, AppHeader, Textarea, Tabs, TabsList, TabsTrigger, TabsPanel, Skeleton, Browser, MeterLabel, MeterValue, MeterTrack, Code, SearchInput, EmptyState, Select, SelectTrigger, SelectContent, SelectItem, DestructiveActionModal, SideNav, SideNavItem, Switch } from '../chunk-AOWBYEQ6.js';
+import { TextReveal, Reveal, MessageScroller, Marker, Toolbar, ToolbarButton, StreamingText, ChatComposer, SettingsMenu, SettingsRow, AppShell, PageHeader, DataTable, Meter, RelativeTime, Sidebar, SidebarHeader, SidebarNav, SidebarItem, NotificationBadge, SidebarFooter, BottomNav, BottomNavItem, AppHeader, Tabs, TabsList, TabsTrigger, TabsPanel, Skeleton, Browser, MeterLabel, MeterValue, MeterTrack, SearchInput, EmptyState, SideNav, SideNavItem } from '../chunk-6LCIBMMG.js';
+import { Form, Field, Input, Button, Separator, Card, CardContent, Badge, Entity, Avatar, StatusDot, CardHeader, CardTitle, CardDescription, CardAction, Message, Bubble, CodeBlock, SimpleTooltip, Attachment, CardFooter, MenuRadioGroup, MenuRadioItem, CardList, OverflowMenu, MenuItem, MenuSeparator, Textarea, Code, Select, SelectTrigger, SelectContent, SelectItem, DestructiveActionModal, Switch } from '../chunk-CKNM7KSB.js';
 import { Region, Stack, Row, Grid, Page, Columns, Col, AspectBox } from '../chunk-3IWZYBGH.js';
 import '../chunk-SRQWQUTW.js';
-import { Icon } from '../chunk-PAOZBZME.js';
-import '../chunk-5Z5KLOAU.js';
+import { Icon } from '../chunk-NGBDP3BM.js';
+import '../chunk-TH563WLW.js';
 import { useState, useRef, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -55,8 +56,8 @@ function AuthPage() {
         ),
         /* @__PURE__ */ jsx(Separator, { label: "or" }),
         /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
-          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", children: "Sign in with a passkey" }),
-          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", children: "Connect a wallet" })
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", iconStart: /* @__PURE__ */ jsx(Icon, { name: "key" }), children: "Sign in with a passkey" }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", iconStart: /* @__PURE__ */ jsx(Icon, { name: "wallet" }), children: "Connect a wallet" })
         ] }),
         /* @__PURE__ */ jsxs("p", { className: "text-body-md text-muted-foreground", children: [
           "No account?",
@@ -740,13 +741,14 @@ function DashboardPage() {
           ),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
         ] }),
-        /* @__PURE__ */ jsx(SidebarFooter, { className: "[--foreground:var(--sidebar-foreground)]", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(
           Entity,
           {
             className: "[--entity-py:0]",
             leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "" }),
             title: "Ada Lovelace",
-            action: /* @__PURE__ */ jsxs(DotsMenu, { label: "Account", size: "icon-sm", children: [
+            subtitle: "@ada",
+            action: /* @__PURE__ */ jsxs(OverflowMenu, { label: "Account", size: "icon-sm", children: [
               /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/@ada" }), children: "View profile" }),
               /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/settings" }), children: "Settings" }),
               /* @__PURE__ */ jsx(MenuSeparator, {}),
@@ -954,7 +956,7 @@ var dashboardPageMeta = {
     "The table runs flush to the card edges with `<CardContent flush>`, which hands the card's padding to the table (`--table-edge-px`), so the first and last columns line up with the CardHeader at any card density \u2014 never hand-set pl-6/pr-6. Numeric columns align end in mono; Table scrolls horizontally inside the card on narrow screens.",
     'Sold / supply is a `Meter` (how full a known range is), not `Progress` (task progress). Status is `Badge appearance="plain" dot`, with the app\'s own states mapped to tones once at the top of the file.',
     "Lists are Entity rows in CardList, inset to the card padding and divided by hairlines \u2014 never CardContent with hand-tuned px. A card that shares a grid row with a taller one becomes `flex flex-col` and pins its CardFooter with `mt-auto`.",
-    "Brand and account live in the Sidebar: SidebarHeader holds the mark + wordmark, SidebarFooter holds the signed-in Entity with a DotsMenu. The footer rebinds `--foreground` to `--sidebar-foreground`, because Entity's title and the ghost trigger ink with page tokens and a theme may paint the rail dark on a light page; it keeps to a title line, since there is no sidebar-muted ink for a subtitle.",
+    "Brand and account live in the Sidebar: SidebarHeader holds the mark + wordmark, SidebarFooter holds the signed-in Entity with an OverflowMenu. Sidebar rebinds the page ink tokens to its own, so the Entity and OverflowMenu read correctly even when a theme paints the rail dark on a light page.",
     "The page has exactly one heading-1 (PageHeader); card titles are Title tier, not headings.",
     "Chrome (Sidebar) is outside the content grid; the Page region caps only content.",
     "Sidebar hides below lg, so the shell's header carries an AppHeader (brand + account) and its footer a BottomNav with the same destinations \u2014 never strand mobile users without navigation."
@@ -1020,7 +1022,7 @@ var renderPost = (post) => /* @__PURE__ */ jsx("article", { children: /* @__PURE
       leading: /* @__PURE__ */ jsx(Avatar, { fallback: post.initials, alt: post.author }),
       title: post.author,
       subtitle: `${post.handle} \xB7 ${post.time}`,
-      action: /* @__PURE__ */ jsxs(DotsMenu, { label: `Post options for ${post.author}`, size: "icon-sm", children: [
+      action: /* @__PURE__ */ jsxs(OverflowMenu, { label: `Post options for ${post.author}`, size: "icon-sm", children: [
         /* @__PURE__ */ jsx(MenuItem, { children: "Copy link" }),
         /* @__PURE__ */ jsxs(MenuItem, { children: [
           "Mute ",
@@ -1125,7 +1127,7 @@ function FeedPage() {
     ] }),
     /* @__PURE__ */ jsx("aside", { "aria-label": "Suggestions", className: "sticky top-6 hidden w-80 shrink-0 lg:block", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
       /* @__PURE__ */ jsxs(Card, { children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { role: "heading", "aria-level": 2, children: "Who to follow" }) }),
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Who to follow" }) }),
         /* @__PURE__ */ jsx(CardList, { children: suggestions.map((person) => /* @__PURE__ */ jsx(
           Entity,
           {
@@ -1138,7 +1140,7 @@ function FeedPage() {
         )) })
       ] }),
       /* @__PURE__ */ jsxs(Card, { children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { role: "heading", "aria-level": 2, children: "Upcoming drops" }) }),
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Upcoming drops" }) }),
         /* @__PURE__ */ jsx(CardList, { children: upcoming2.map((drop) => /* @__PURE__ */ jsx(
           Entity,
           {
@@ -1163,14 +1165,14 @@ var feedPageMeta = {
     "The main column is capped at `--region-feed` (640px) inside a `wide` page, so posts keep a reading measure while the rail fills the desktop width. The rail is a fixed `w-80` aside, `sticky` at lg and `hidden` below it \u2014 its content is supplementary, so nothing is lost on mobile.",
     "Feed scope is `Tabs` (underline, stretched to the column with `flex`): peer views of the same feed. The composer sits above them because posting applies to both.",
     "The composer is a Card holding `Textarea autoResize` plus ghost icon Buttons and a secondary `Post` \u2014 not ChatComposer, which submits on Enter and is for conversations.",
-    "Each post is a Card: an Entity byline in a CardList (with a DotsMenu for post actions), body copy, then media in an AspectBox at the asset's own ratio, inset with `rounded-concentric-lg/6` so its corners follow the card's in every theme.",
+    "Each post is a Card: an Entity byline in a CardList (with an OverflowMenu for post actions), body copy, then media in an AspectBox at the asset's own ratio, inset with `rounded-concentric-lg/6` so its corners follow the card's in every theme.",
     'An edition drop adds a `Badge appearance="overlay"` on the artwork, title and price, the one primary Button on the page (`Collect`), and a `Meter` for supply \u2014 collected against a known maximum is a level, not task progress.',
     "Actions are ghost sm Buttons (icon + count) in a Row pulled out by the button's own padding (`-ms-3`) so the first icon sits on the text edge.",
     "Loading the next page shows a Skeleton post in the shape the post will land in, above the explicit load-more Button in its `loading` state \u2014 predictable for keyboard and AT users, unlike infinite scroll."
   ],
   a11y: [
     "Each post is an <article>, so AT users can jump between posts; the rail is a labelled <aside> landmark.",
-    `Rail card titles carry role="heading" aria-level=2 under the page's one h1.`,
+    "Rail card titles render as h2 (CardTitle `render={<h2 />}`) under the page's one h1.",
     "Icon-only buttons and every Follow / Remind button carry aria-labels naming their target; counts stay in the accessible name.",
     'The supply Meter is role=meter with a getAriaValueText reading ("62 of 100 collected").',
     'The Skeleton card is aria-busy; the loading Button keeps its label ("Loading posts").'
@@ -1713,9 +1715,8 @@ function ListDetailPage() {
             Entity,
             {
               "data-member-id": m.id,
-              "data-selected": isSelected ? "" : void 0,
-              className: "sable-surface-interactive",
               interactive: true,
+              selected: isSelected,
               onSelect: () => select(m.id),
               leading: /* @__PURE__ */ jsx(
                 Avatar,
@@ -1725,10 +1726,7 @@ function ListDetailPage() {
                   "aria-hidden": true
                 }
               ),
-              title: /* @__PURE__ */ jsxs(Fragment, { children: [
-                m.name,
-                isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (selected)" }) : null
-              ] }),
+              title: m.name,
               subtitle: m.pending ? `${roleLabel[m.role]} \xB7 invite sent ${m.sent?.toLowerCase()}` : `${roleLabel[m.role]} \xB7 ${m.handle}`,
               action: m.pending ? /* @__PURE__ */ jsx(Badge, { tone: "info", children: "Invited" }) : void 0
             },
@@ -1782,7 +1780,7 @@ function ListDetailPage() {
                   }
                 ),
                 /* @__PURE__ */ jsxs(Stack, { gap: 0, className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx(CardTitle, { role: "heading", "aria-level": 2, className: "truncate", children: selected.name }),
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), className: "truncate", children: selected.name }),
                   /* @__PURE__ */ jsx(CardDescription, { className: "truncate", children: selected.pending ? "Hasn't joined yet" : `${selected.handle} \xB7 ${selected.email}` })
                 ] })
               ] }),
@@ -1843,7 +1841,7 @@ function ListDetailPage() {
             ] }) }) : null
           ] }),
           selected.activity.length > 0 ? /* @__PURE__ */ jsxs(Card, { children: [
-            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { role: "heading", "aria-level": 3, children: "Recent activity" }) }),
+            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h3", {}), children: "Recent activity" }) }),
             /* @__PURE__ */ jsx(CardList, { children: selected.activity.map((a) => /* @__PURE__ */ jsx(
               Entity,
               {
@@ -1878,7 +1876,7 @@ var listDetailPageMeta = {
   intent: "Reach for this when a route lists records AND works on one at a time (members + member, inbox + message, orders + order). For pure browsing with no selection, a single-column FeedPage or a DashboardPage table is simpler.",
   notes: [
     "Region cap is `wide`; Columns 12 \u2192 Col 5 (list) + Col 7 (detail). Below lg the list and detail share one column as a drill-in: selecting a row shows the detail with an `All members` back button (lg:hidden), and the back button returns to the list. The panes swap with `max-lg:hidden`, so desktop always shows both.",
-    "Rows are interactive Entity inside one Card + CardList. Selection is `data-selected` on the row painted by `sable-surface-interactive`; `sable-surface` on the list card makes that step 12% ink off the card, so a selected row stays distinct from its muted avatar.",
+    "Rows are interactive Entity inside one Card + CardList. Selection is Entity `selected`; `sable-surface` on the list card makes its selected step 12% ink off the card, so a selected row stays distinct from its muted avatar.",
     "Search filters the list in place (name, email, role). No matches swap the CardList for an EmptyState with a Clear search action; the selected detail stays open.",
     "A pending invite lives in the same list: a mail glyph in the Avatar, an `Invited` Badge, and an invite-specific detail (role on joining, sent, expires, invited by; Resend and Revoke actions).",
     "The role Select edits the record in place; its Field description states what the role can do. The owner's role is read-only and the owner has no remove action.",
@@ -1887,7 +1885,7 @@ var listDetailPageMeta = {
     "The detail pane is sticky (lg:top-6) so it stays in view while a long list scrolls."
   ],
   a11y: [
-    "Each row is a real button (Entity `interactive` + `onSelect`): Tab moves through rows, Enter/Space selects. The selected row carries visually hidden `(selected)` text in its name; list avatars are aria-hidden so initials are not read before the name.",
+    "Each row is a real button (Entity `interactive` + `onSelect`): Tab moves through rows, Enter/Space selects. The selected row is Entity `selected`, which paints the selected fill and sets aria-current; list avatars are aria-hidden so initials are not read before the name.",
     "The detail pane is a labelled region (`Member details`) whose title is a level-2 heading.",
     "On a phone, drilling in moves focus to the back button; going back returns focus to the row that was open. After a remove, focus lands on the newly selected row; after Clear search, on the search field."
   ]
@@ -1960,13 +1958,14 @@ function SettingsPage() {
           ),
           /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", active: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
         ] }),
-        /* @__PURE__ */ jsx(SidebarFooter, { className: "[--foreground:var(--sidebar-foreground)]", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(
           Entity,
           {
             className: "[--entity-py:0]",
             leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "" }),
             title: "Ada Lovelace",
-            action: /* @__PURE__ */ jsxs(DotsMenu, { label: "Account", size: "icon-sm", children: [
+            subtitle: "@ada",
+            action: /* @__PURE__ */ jsxs(OverflowMenu, { label: "Account", size: "icon-sm", children: [
               /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/@ada" }), children: "View profile" }),
               /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/settings" }), children: "Settings" }),
               /* @__PURE__ */ jsx(MenuSeparator, {}),
@@ -1998,7 +1997,7 @@ function SettingsPage() {
             /* @__PURE__ */ jsx(Col, { span: { base: 12, lg: 9 }, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
               /* @__PURE__ */ jsxs(Card, { id: "profile", className: "scroll-mt-6", children: [
                 /* @__PURE__ */ jsxs(CardHeader, { children: [
-                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Profile" }) }),
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Profile" }),
                   /* @__PURE__ */ jsx(CardDescription, { children: "How collectors see you on Atelier." })
                 ] }),
                 /* @__PURE__ */ jsxs(Form, { onSubmit: (event) => event.preventDefault(), className: "gap-0", children: [
@@ -2034,7 +2033,7 @@ function SettingsPage() {
               ] }),
               /* @__PURE__ */ jsxs(Card, { id: "notifications", className: "scroll-mt-6", children: [
                 /* @__PURE__ */ jsxs(CardHeader, { children: [
-                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Notifications" }) }),
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Notifications" }),
                   /* @__PURE__ */ jsx(CardDescription, { children: "Email updates about your editions. Changes save automatically." })
                 ] }),
                 /* @__PURE__ */ jsx(CardList, { children: notifications.map((item) => /* @__PURE__ */ jsx(
@@ -2056,7 +2055,7 @@ function SettingsPage() {
               ] }),
               /* @__PURE__ */ jsxs(Card, { id: "payouts", className: "scroll-mt-6", children: [
                 /* @__PURE__ */ jsxs(CardHeader, { children: [
-                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Payouts" }) }),
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Payouts" }),
                   /* @__PURE__ */ jsx(CardDescription, { children: "Paid in USD every Friday to Chase checking \u2022\u20224821." }),
                   /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/settings/payouts" }), children: "Manage payouts" }) })
                 ] }),
@@ -2068,7 +2067,7 @@ function SettingsPage() {
               ] }),
               /* @__PURE__ */ jsxs(Card, { id: "account", className: "scroll-mt-6", children: [
                 /* @__PURE__ */ jsxs(CardHeader, { children: [
-                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Account" }) }),
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Account" }),
                   /* @__PURE__ */ jsx(CardDescription, { children: "Sign-in details and your data." })
                 ] }),
                 /* @__PURE__ */ jsxs(CardList, { children: [
@@ -2094,7 +2093,7 @@ function SettingsPage() {
               ] }),
               /* @__PURE__ */ jsxs(Card, { children: [
                 /* @__PURE__ */ jsxs(CardHeader, { children: [
-                  /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Delete account" }) }),
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Delete account" }),
                   /* @__PURE__ */ jsx(CardDescription, { children: "Permanently remove your profile, editions, and sales history. Collectors keep the editions they own." })
                 ] }),
                 /* @__PURE__ */ jsx(CardFooter, { className: "justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => setDeleteOpen(true), children: "Delete account" }) })

package/dist/themes/base/base.css

@@ -15,6 +15,19 @@
 
 :root,
 [data-sable-theme="base"] {
+	/* Chart series colours — a categorical palette validated for colour-blind
+	   separation (adjacent pairs), a normal-vision floor, a lightness band and a
+	   chroma floor against this theme's surfaces. Charts take them in order
+	   (series 1 → --chart-1). Global defaults: every theme inherits them, and a
+	   theme or preset may override the set — re-validate it if it does. */
+	--chart-1: oklch(57.53% 0.1626 255.53); /* #2a78d6 */
+	--chart-2: oklch(67.08% 0.1750 40.64); /* #eb6834 */
+	--chart-3: oklch(66.90% 0.1408 162.11); /* #1baf7a */
+	--chart-4: oklch(76.44% 0.1612 75.12); /* #eda100 */
+	--chart-5: oklch(71.63% 0.1412 357.39); /* #e87ba4 */
+	--chart-6: oklch(52.85% 0.1798 142.50); /* #008300 */
+	--chart-7: oklch(52.71% 0.1968 283.44); /* #6250d6 */
+	--chart-8: oklch(62.26% 0.1909 24.91); /* #e34948 */
 	/* Font stacks (theme-internal; host app provides the actual font files) */
 	--font-sans: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 	--font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -374,6 +387,16 @@
 /* A preset-scoped subtree inside a dark page follows the page into dark mode;
    add `.light` to that subtree to pin it light. */
 .dark [data-sable-theme="base"]:not(.light) {
+	/* The same eight hues, stepped for the dark band (L 0.48–0.67, >= 3:1 on
+	   the dark surfaces) and validated as a set — not a lightness flip. */
+	--chart-1: oklch(62.21% 0.1612 255.05); /* #3987e5 */
+	--chart-2: oklch(62.21% 0.1726 40.11); /* #d95926 */
+	--chart-3: oklch(62.12% 0.1283 163.11); /* #199e70 */
+	--chart-4: oklch(66.99% 0.1425 73.23); /* #c98500 */
+	--chart-5: oklch(62.24% 0.1712 0.84); /* #d55181 */
+	--chart-6: oklch(52.85% 0.1798 142.50); /* #008300 */
+	--chart-7: oklch(66.96% 0.1452 286.83); /* #9085e9 */
+	--chart-8: oklch(66.93% 0.1586 22.31); /* #e66767 */
 	/* Elevation, dark. A drop barely registers on near-black, so depth is the
 	   surface step (popover above card) plus a faint top-edge highlight that
 	   catches "light" on anything floating. Deeper drops than light mode, since

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/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>
+	)
+}
+```