@sableui/react 0.6.2 → 0.7.1

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://sable.design/registry.schema.json",
   "name": "@sableui/react",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Sable.",
   "engine": {
     "behavior": "@base-ui/react",
@@ -34,8 +34,8 @@
       "note": "theme declares the stacks; the host app loads the font files"
     },
     "providers": {
-      "required": "none — components use Reicon icons automatically; no IconProvider setup is required",
-      "optional": "IconProvider overrides or extends Reicon: import { reiconIconSet, composeIconSets } from \"@sableui/react\" and composeIconSets(appExtras, reiconIconSet). MotionProvider controls motion. SableThemeProvider supplies user-selectable color modes and themes."
+      "required": "IconProvider at the app root: import { reiconIconSet } from \"@sableui/react/icons/reicon\" and wrap the app in <IconProvider set={reiconIconSet}> (or pass your own IconSet). Without it every <Icon> renders nothing; development builds warn once.",
+      "optional": "Extend Reicon with composeIconSets(appExtras, reiconIconSet) — composeIconSets from \"@sableui/react\", reiconIconSet from \"@sableui/react/icons/reicon\". MotionProvider controls motion. SableThemeProvider supplies user-selectable color modes and themes."
     },
     "themeSwitching": "Preferred: wrap the app in SableThemeProvider and call useSableTheme() to read mode/preference/themeId/themes and setPreference/setThemeId. The provider persists choices, toggles the `dark` class for light/dark/system, and writes data-sable-theme for non-default design themes.",
     "darkMode": "Low-level contract: toggle the `dark` class on <html> (dark-by-default lives under .dark). Sable uses no `dark:` utilities, so a Tailwind `@custom-variant dark` is only needed if your own app code uses them.",
@@ -60,6 +60,7 @@
       "precedents": "sable learn --search \"<context>\" --json",
       "composition": "Inspect a relevant pattern skeleton. Reuse when its information architecture fits; original compositions from layout primitives are equally valid.",
       "review": "sable docs reviewing-a-design",
+      "finish": "sable check <source paths> runs doctor, lint and grade in one pass and exits 1 on any failure, then lists the review steps no tool can verify. Optional Claude Code Stop hook: sable setup --agent --target claude --hook",
       "evidenceTemplate": "sable grade --template",
       "learning": "sable docs learning-from-builds",
       "localMemory": ".sable/lessons/ for causal observations; .sable/preferences/ for scoped judgments; both project-owned and preserved across package upgrades",
@@ -1568,6 +1569,22 @@
       {
         "id": "status-text-drift",
         "fails-on": "A status colour has two tokens: the fill (`--destructive`, `--success`, `--tone-warning`, `--tone-info`), which `bg-*` paints, and its `-text` (`--destructive-text` …), which `text-*`, `border-*`, `ring-*`, `outline-*`, `fill-*` and `stroke-*` read. Setting the fill alone leaves the text on the theme's colour, so a retuned red button sits beside the theme's red error message. Set the `-text` in the same theme and mode: the fill itself where it already reads on your surfaces, or a step of it moved away from them (lighter in dark mode) so it clears 4.5:1 on a card."
+      },
+      {
+        "id": "lookalike-grid",
+        "fails-on": "A raw CSS grid laid over a collection — `grid` with an auto-fill/auto-fit `minmax()` track, or uniform `grid-cols-N` columns over mapped or repeated items. That is Sable's `Grid`: `cols` takes the same counts per breakpoint (`{ base: 2, md: 4 }`), `minItemWidth` is the auto-fit track with a `min(…, 100%)` guard so a cell never overflows a narrow container (a bare `minmax(12rem,1fr)` does), every track is `minmax(0, 1fr)` so one long string cannot blow a column out, and the gap defaults to the theme's `--grid-gutter` or takes rhythm units (`gap={2}` = `gap-4`). Not flagged: a grid with no columns, a form layout (field children, no mapping), a non-uniform track (`grid-cols-[auto_1fr]`), a `ul`/`ol`/`dl` (Grid renders a div), or an element with a widget role."
+      },
+      {
+        "id": "lookalike-card",
+        "fails-on": "A link or button dressed as a card — a radius, a surface (`bg-card` / `bg-popover`, or a border) and card padding on an <a>, <button> or router <Link>. That is `<Card render={<Link to=… />}>` (or `<a href>` / `<button>`): rendered as a link or button, Card adds the hover (a stronger edge and shadow), a full-card focus-visible ring and motion-interactive easing; its padding follows the density control (`--card-p`) and its corner follows the theme radius; children answer the hover with `group-hover/card:`. Hand-built, a tile keeps none of that when the theme or density moves. Not flagged: a text link, a nav row (no surface), a pill (`rounded-full`), a button fill (lookalike-control's), or an element inside a `render` prop."
+      },
+      {
+        "id": "lookalike-avatar",
+        "fails-on": "A round, fixed-size box holding a person's or artist's picture — `rounded-full` + `size-*` (or equal `h-*`/`w-*`) around an <img>, GradientArt or initials, or a round fixed-size <img> itself. That is `Avatar`: `src`/`alt` with a fallback that shows while the image loads or when it fails, `variant=\"art\"` for initials over GradientArt seeded by the person (a stable colour each, from the theme), a `size` ladder, an accessible name (role=img), a `status` slot that clears the circle, and AvatarGroup for an overlapping stack. Not flagged: a dot or an icon in a circle (no picture or initials), a round box without a fixed size, or AvatarRoot and its parts."
+      },
+      {
+        "id": "lookalike-media-frame",
+        "fails-on": "A cover or media frame built by hand — an `aspect-*` ratio + `overflow-hidden` wrapped around an <img>, <video>, <picture> or GradientArt. That is `AspectBox`: `ratio` as a number reserves the box before the media arrives (no layout shift while a cover loads or a shader starts), it clips and positions what it holds (`relative w-full overflow-hidden`), and it is the one frame the media components share, so a change to how frames behave reaches every cover. Put the radius on it as a className. For a cover with its title beneath (an album, an episode, a product), `MediaTile` composes this frame with fallback art for a missing or broken image and an action revealed on hover. Not flagged: a ratio box with no media in it (a pad, a canvas well), a frame without overflow clipping, an <img> sized by its own aspect class, or a round fixed-size frame (lookalike-avatar's)."
       }
     ],
     "escapeHatch": {
@@ -1581,7 +1598,7 @@
     }
   },
   "iconContract": {
-    "note": "Components reference semantic names through <Icon>. Reicon is the default runtime dependency; IconProvider can override or extend it.",
+    "note": "Components reference semantic names through <Icon>, rendered by the app's IconProvider set. Reicon is opt-in from @sableui/react/icons/reicon; there is no fallback, so an app that supplies its own set ships no Reicon code.",
     "names": [
       "heart",
       "comment",
@@ -1653,7 +1670,15 @@
       "key",
       "wallet",
       "thumbs-up",
-      "thumbs-down"
+      "thumbs-down",
+      "shuffle",
+      "repeat",
+      "repeat-one",
+      "volume",
+      "volume-low",
+      "volume-off",
+      "queue",
+      "music"
     ]
   },
   "layoutPrimitives": {
@@ -1681,7 +1706,19 @@
           "bestPractices": [
             {
               "guidance": "do",
-              "description": "Choose the max value by content role, such as prose, form, feed, content, wide, or full."
+              "description": "Choose the max value by what the person does on the page: read (prose), fill in a form (form), scroll one stream (feed), review one record or settings (content), scan and compare rows or cards (wide)."
+            },
+            {
+              "guidance": "do",
+              "description": "Omit max (fluid) for work across panes, a board, an editor or a map, where a flexible part uses the extra width; cap text inside it with --measure-prose."
+            },
+            {
+              "guidance": "do",
+              "description": "Give sibling routes in one nav the same width so the header does not jump between them."
+            },
+            {
+              "guidance": "do",
+              "description": "Review a capped or fluid route at 1920px and 2560px: a cap is a ceiling, so below the cap plus app chrome every choice looks the same."
             },
             {
               "guidance": "do",
@@ -1690,6 +1727,14 @@
             {
               "guidance": "dont",
               "description": "Do not use Region as a global wrapper that forces every page into the same max width."
+            },
+            {
+              "guidance": "dont",
+              "description": "Do not go fluid when the extra width only widens the gaps between fixed columns; cap it."
+            },
+            {
+              "guidance": "dont",
+              "description": "Do not read full as edge to edge: it is the largest cap and keeps the page inset. Use bleed for edge to edge."
             }
           ]
         },
@@ -1716,7 +1761,7 @@
           {
             "name": "max",
             "type": "\"prose\" | \"form\" | \"feed\" | \"content\" | \"wide\" | \"full\" | CSS length",
-            "description": "Opt-in centered max-width cap, purpose-named: prose 65ch (long-form reading) · form 480px (auth, narrow single-column forms) · feed 640px (single-column timeline) · content 896px (settings/admin panes) · wide 1280px (dashboards, tables, card grids) · full 1536px (full-bleed ceiling). Omit for fully fluid."
+            "description": "Opt-in centered max-width cap, purpose-named: prose 65ch (long-form reading) · form 480px (auth, narrow single-column forms) · feed 640px (single-column timeline) · content 896px (settings/admin panes) · wide 1280px (dashboards, tables, card grids) · full 1536px (the largest cap; keeps the inset, so not edge to edge — that is bleed). Omit for fluid: work views whose panes, board or canvas use the extra width. A cap is a ceiling: it applies only once the viewport minus app chrome exceeds it, so judge it at 1920px and up."
           },
           {
             "name": "bleed",
@@ -1739,9 +1784,14 @@
             "imports": "import { PageHeader, Region } from \"@sableui/react\""
           },
           {
-            "label": "Fluid dashboard region",
+            "label": "Dashboard region (capped at wide)",
             "code": "<Region max=\"wide\"><Grid minItemWidth=\"16rem\"><Card><CardHeader><CardTitle>Revenue</CardTitle></CardHeader></Card><Card><CardHeader><CardTitle>Collects</CardTitle></CardHeader></Card></Grid></Region>",
             "imports": "import { Card, CardHeader, CardTitle, Grid, Region } from \"@sableui/react\""
+          },
+          {
+            "label": "Fluid workspace: the queue's table takes the extra width",
+            "code": "<Region as=\"main\"><Columns count={{ base: 1, lg: 12 }}><Col span={{ base: 1, lg: 3 }}><SideNav aria-label=\"Views\"><SideNavItem label=\"Open\" active /><SideNavItem label=\"Pending\" /></SideNav></Col><Col span={{ base: 1, lg: 9 }}><Card><CardContent flush><DataTable columns={columns} data={tickets} /></CardContent></Card></Col></Columns></Region>",
+            "imports": "import { Card, CardContent, Col, Columns, DataTable, Region, SideNav, SideNavItem } from \"@sableui/react\""
           }
         ]
       },
@@ -1813,7 +1863,7 @@
         "name": "Grid",
         "status": "stable",
         "path": "layout",
-        "summary": "CSS Grid within a region. Two modes: fixed/responsive cols count, or minItemWidth auto-fit so cells breathe with NO breakpoints (the default choice for card grids).",
+        "summary": "CSS Grid within a region. Two modes: fixed/responsive cols count, or minItemWidth so cells breathe with NO breakpoints (the default choice for card grids). A minItemWidth grid keeps its empty columns (track=\"fill\"), so one result stays one cell wide; track=\"fit\" stretches a fixed set across the row.",
         "keywords": [
           "grid",
           "card grid",
@@ -1827,6 +1877,14 @@
               "guidance": "do",
               "description": "Prefer minItemWidth for responsive card grids that do not need breakpoint-specific spans."
             },
+            {
+              "guidance": "do",
+              "description": "Keep the default track=\"fill\" for collections whose count is data (search results, shelves, galleries): sparse rows keep their empty columns, so one result stays one cell wide."
+            },
+            {
+              "guidance": "do",
+              "description": "Use track=\"fit\" only for a fixed set designed to span the row, such as three KPI cards."
+            },
             {
               "guidance": "do",
               "description": "Use explicit columns only when the design truly needs a fixed track count."
@@ -1834,6 +1892,10 @@
             {
               "guidance": "dont",
               "description": "Do not use Grid to set a page's reading width; use Region or Center."
+            },
+            {
+              "guidance": "dont",
+              "description": "Do not use track=\"fit\" for results or other data-driven collections: with one or two items the empty columns collapse and each item stretches across the row (a single result rendered as a full-width cover)."
             }
           ]
         },
@@ -1854,13 +1916,19 @@
           {
             "name": "minItemWidth",
             "type": "string",
-            "description": "Auto-fit mode: repeat(auto-fit, minmax(minItemWidth, 1fr)) — the grid grows/wraps responsively without breakpoints. e.g. \"16rem\"."
+            "description": "Breathing mode: repeat(auto-fill, minmax(minItemWidth, 1fr)) — as many columns of at least minItemWidth as fit, wrapping without breakpoints. e.g. \"16rem\"."
+          },
+          {
+            "name": "track",
+            "type": "\"fill\" | \"fit\"",
+            "default": "\"fill\"",
+            "description": "What a minItemWidth grid does with columns it has no items for (only visible when fewer items than fit one row). \"fill\" (auto-fill) keeps them, so items keep their size whatever their count — one search result is one cover wide, not a banner. Use it for collections whose count is data: results, shelves, galleries. \"fit\" (auto-fit) collapses them and stretches the items to share the row — only for a fixed set designed to span it (three KPI cards, plan tiers)."
           },
           {
             "name": "gap",
-            "type": "number | string",
+            "type": "number | [row, column] | string",
             "default": "var(--grid-gutter)",
-            "description": "Gap between cells. Number = rhythm units (×8px); string = raw CSS."
+            "description": "Gap between cells. Number = rhythm units (×8px); [row, column] = two rhythm counts, for a gallery whose rows want more air than its columns; string = raw CSS."
           }
         ],
         "tokensUsed": [],
@@ -1870,6 +1938,16 @@
             "code": "<Grid minItemWidth=\"16rem\" gap={3}><Card><CardHeader><CardTitle>Alpha</CardTitle></CardHeader></Card><Card><CardHeader><CardTitle>Beta</CardTitle></CardHeader></Card><Card><CardHeader><CardTitle>Gamma</CardTitle></CardHeader></Card></Grid>",
             "imports": "import { Card, CardHeader, CardTitle, Grid } from \"@sableui/react\""
           },
+          {
+            "label": "Sparse results keep their size",
+            "code": "// One match still renders one cover wide: the empty columns are kept (track=\"fill\", the default).\n<Grid minItemWidth=\"10rem\" gap={2}><Card><CardHeader><CardTitle>Night Swim</CardTitle><CardDescription>Album · Undertow</CardDescription></CardHeader></Card></Grid>",
+            "imports": "import { Card, CardDescription, CardHeader, CardTitle, Grid } from \"@sableui/react\""
+          },
+          {
+            "label": "A fixed set that spans the row",
+            "code": "<Grid minItemWidth=\"12rem\" track=\"fit\" gap={2}><Card><CardHeader><CardDescription>Listeners</CardDescription><span className=\"text-mono-xl\">48.2k</span></CardHeader></Card><Card><CardHeader><CardDescription>Streams</CardDescription><span className=\"text-mono-xl\">1.3M</span></CardHeader></Card><Card><CardHeader><CardDescription>Saves</CardDescription><span className=\"text-mono-xl\">9,410</span></CardHeader></Card></Grid>",
+            "imports": "import { Card, CardDescription, CardHeader, Grid } from \"@sableui/react\""
+          },
           {
             "label": "Responsive fixed columns",
             "code": "<Grid cols={{ base: 1, md: 2, lg: 4 }}><Badge appearance=\"plain\" tone=\"standard\" dot /><Badge appearance=\"plain\" tone=\"warning\" dot /><Badge appearance=\"plain\" tone=\"neutral\" dot /><Badge appearance=\"plain\" tone=\"destructive\" dot /></Grid>",
@@ -2745,7 +2823,7 @@
       "group": "Layout",
       "register": "page",
       "path": "components/app-shell",
-      "summary": "The application frame: slots for status banners, a mobile header, a desktop sidebar, main content, a mobile bottom nav, and floating overlays — plus a built-in skip link and #main-content target.",
+      "summary": "The application frame: slots for status banners, a mobile header, a desktop sidebar, main content, a mobile bottom nav, a persistent dock (a now-playing or call bar), and floating overlays — plus a built-in skip link and #main-content target.",
       "keywords": [
         "app shell",
         "layout",
@@ -2755,7 +2833,11 @@
         "bottom nav",
         "mobile",
         "banners",
-        "main"
+        "main",
+        "dock",
+        "player bar",
+        "now playing",
+        "persistent"
       ],
       "usage": {
         "description": "Use AppShell as the outer product frame for authenticated or app-like experiences. It coordinates responsive chrome slots and guarantees a skip link plus main landmark; put route content inside the children and let AppHeader, Sidebar, BottomNav, and Banner own their own semantics.",
@@ -2810,6 +2892,11 @@
             "name": "Bottom nav",
             "required": false,
             "description": "Mobile fixed navigation with reserved bottom space."
+          },
+          {
+            "name": "Dock",
+            "required": false,
+            "description": "Persistent bottom chrome that outlives routes — a now-playing bar, a call bar. Sticky above the bottom nav; the desktop Sidebar shortens to clear it."
           }
         ]
       },
@@ -2848,6 +2935,11 @@
           "type": "ReactNode",
           "description": "Mobile bottom navigation (e.g. BottomNav); fixed to the bottom edge. main reserves space for it."
         },
+        {
+          "name": "dock",
+          "type": "ReactNode",
+          "description": "Persistent chrome kept on screen across routes (a now-playing bar, an active-call bar, an upload tray). Full width, sticky to the bottom edge and above bottomNav on mobile; its height is published as --dock-height and the app Sidebar subtracts it. In flow, so main needs no reserved space. The contents paint their own surface and top border, and name themselves (e.g. <section aria-label=\"Player\">). Mount AppShell in a layout that survives navigation, or the playback restarts."
+        },
         {
           "name": "overlays",
           "type": "ReactNode",
@@ -2863,7 +2955,8 @@
       "a11y": [
         "Renders a skip link to #main-content as the first focusable element.",
         "Wraps content in a <main id=\"main-content\"> landmark.",
-        "Slot components own their own ARIA (nav landmarks, labels)."
+        "Slot components own their own ARIA (nav landmarks, labels).",
+        "The dock follows <main> in DOM order, so keyboard and screen-reader users reach the player after the page content, not before it."
       ],
       "examples": [
         {
@@ -3334,7 +3427,7 @@
           },
           {
             "guidance": "do",
-            "description": "Use consistent sizes within a group; reserve lg for profile headers or major identity moments."
+            "description": "Pick the size by the job: sm in dense rows and tables, md (the default) beside one line of text, lg in a row with a title and subtitle, xl (96px) for a profile header beside the person's name, 2xl (160px) for an artist or profile hero and roster portraits. Keep one size within a list or group."
           },
           {
             "guidance": "do",
@@ -3351,6 +3444,10 @@
           {
             "guidance": "dont",
             "description": "Overload a dense table with large avatars; use sm or omit images when scanning data is more important."
+          },
+          {
+            "guidance": "dont",
+            "description": "Build a portrait by stretching an Avatar with size classes (`className=\"size-40\"`) — the initials, the status indicator and the image fade stay at row scale. Use size=\"xl\" or \"2xl\", which scale all three. Past 160px, or for a non-circular cover, it is media: an AspectBox, not an avatar."
           }
         ],
         "anatomy": [
@@ -3422,9 +3519,9 @@
         },
         {
           "name": "size",
-          "type": "\"sm\" | \"md\" | \"lg\"",
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
           "default": "\"md\"",
-          "description": "Square footprint: 32px / 40px / 48px."
+          "description": "Square footprint: 32px / 40px / 48px for rows; 96px / 160px for portraits (a profile header, an artist hero, a roster tile). The initials, a status indicator and its cut-out ring scale with it, and at the portrait sizes the photo fades in over the resting surface."
         },
         {
           "name": "variant",
@@ -3469,7 +3566,9 @@
         "size": [
           "sm",
           "md",
-          "lg"
+          "lg",
+          "xl",
+          "2xl"
         ],
         "variant": [
           "neutral",
@@ -3485,6 +3584,32 @@
         "overlay",
         "overlay-foreground"
       ],
+      "motion": [
+        {
+          "slot": "arrival",
+          "recipe": "motion-fade",
+          "part": "Image",
+          "why": "At the portrait sizes (xl, 2xl) the photo replacing the initials is a visible pop across one of the page's largest elements; fading it in reads as the picture arriving, not the layout glitching. Row sizes swap instantly — too small to register, and a list of fading faces would shimmer."
+        },
+        {
+          "slot": "response",
+          "recipe": "none",
+          "part": "Root",
+          "why": "An avatar is not interactive itself; a link or button wrapping it owns the response."
+        },
+        {
+          "slot": "transition",
+          "recipe": "none",
+          "part": "Root",
+          "why": "It has no states of its own to move between beyond the image arriving."
+        },
+        {
+          "slot": "activity",
+          "recipe": "none",
+          "part": "Root",
+          "why": "Loading shows the fallback, which is already a finished resting state rather than a spinner."
+        }
+      ],
       "a11y": [
         "Base UI tracks the image loading status and swaps to the fallback on missing/loading/error — no manual onError wiring.",
         "Provide meaningful alt text via the alt prop; pass an empty alt for decorative avatars.",
@@ -3513,6 +3638,11 @@
           "code": "<Avatar src=\"/pfp.png\" alt=\"Alex Morgan\" fallback=\"AM\" size=\"sm\" />\n<Avatar src=\"/pfp.png\" alt=\"Alex Morgan\" fallback=\"AM\" size=\"md\" />\n<Avatar src=\"/pfp.png\" alt=\"Alex Morgan\" fallback=\"AM\" size=\"lg\" />",
           "imports": "import { Avatar } from \"@sableui/react\""
         },
+        {
+          "label": "Profile portrait",
+          "code": "<div className=\"flex flex-col items-center gap-3 text-center\">\n\t<Avatar variant=\"art\" size=\"2xl\" fallback=\"LV\" alt=\"Lena Vale\" status={<StatusDot tone=\"success\" />} />\n\t<div className=\"flex flex-col gap-1\">\n\t\t<h1 className=\"text-heading-1\">Lena Vale</h1>\n\t\t<p className=\"text-body-sm text-muted-foreground\">1.2M monthly listeners</p>\n\t</div>\n</div>",
+          "imports": "import { Avatar, StatusDot } from \"@sableui/react\""
+        },
         {
           "label": "Low-level parts",
           "code": "<AvatarRoot size=\"lg\"><AvatarImage src=\"/pfp.png\" alt=\"Mara Okafor\" /><AvatarFallback>MO</AvatarFallback></AvatarRoot>",
@@ -4664,7 +4794,12 @@
         "inverse",
         "band",
         "brand fill",
-        "tone fill"
+        "tone fill",
+        "bleed",
+        "optical alignment",
+        "align label to edge",
+        "negative margin",
+        "view all"
       ],
       "usage": {
         "description": "Use Button when the user commits an action, submits a form, opens UI, or confirms a decision. Use the visual tier to communicate priority: one primary action per local decision area, then secondary, ghost, outline, or link for lower-emphasis choices.",
@@ -4685,6 +4820,14 @@
             "guidance": "do",
             "description": "Put icons in iconStart / iconEnd rather than as children, so the button applies its optical padding. Start icons say what the action is (plus, share); end icons say where it goes (chevron-right, external)."
           },
+          {
+            "guidance": "do",
+            "description": "Set bleed on a ghost or link button that sits at the start or end of a row, so its LABEL lines up with the content edge the row shares (\"View all\" over a grid, \"Add task\" under a list, \"Resend code\" at a card footer's end). The box moves out by exactly its own padding; the hit area and hover fill stay full size and run past the edge. SectionHeader, PageHeader (back and actions) and CardAction already do this for their outermost ghost/link child — don't add it there, and use bleed=\"none\" to opt one out."
+          },
+          {
+            "guidance": "dont",
+            "description": "Pull a ghost button onto an edge with -ms-3 / -me-3 classNames. That number is one size's padding: it is wrong at xs, md and cta, wrong on a side carrying an icon, and wrong once a preset retunes the spacing. bleed reads the button's own padding var. And don't bleed a filled or outlined button — its visible edge is what aligns, so bleed is a no-op there."
+          },
           {
             "guidance": "dont",
             "description": "Use destructive for reversible or low-risk actions; reserve it for operations with real loss or danger."
@@ -4785,6 +4928,11 @@
           "name": "iconEnd",
           "type": "ReactNode",
           "description": "Icon after the label (disclosure, external link, next). Same optical correction on the end side."
+        },
+        {
+          "name": "bleed",
+          "type": "\"start\" | \"end\" | \"both\" | \"none\"",
+          "description": "Optical alignment for a borderless button (ghost, link, on-color-ghost): a negative inline margin of exactly its own padding on that side — --button-px, or the icon side's optical padding when an icon sits there; an icon-only size bleeds by its inset to the glyph — so the label (or glyph) lands on the content edge. Hit area and hover/focus fill keep their full size. Logical sides, so it mirrors in RTL. A no-op on variants with a visible edge (primary, secondary, outline, destructive, floating, field, on-color, on-color-outline): a filled button aligns its edge, not its label. Unset, a borderless button renders data-bleed=\"auto\" and SectionHeader, PageHeader and CardAction bleed it when it is their outermost child; none opts out."
         }
       ],
       "variants": {
@@ -4864,6 +5012,7 @@
         "Use render={<a/>} for link semantics rather than onClick navigation.",
         "On-color tiers replace the --ring focus ring with one drawn in the band's ink past a transparent 2px gap, so focus stays visible on any fill (ink-on-fill is the theme's own tested pair).",
         "On-color contrast is measured in button.test.tsx for every shipped theme and mode on each tone, primary, destructive, success, highlight and inverse fill: solid label at rest and hover, and outline/ghost label on the hover wash, all at least 4.5:1.",
+        "bleed moves only the box, never the hit target: the full padded area stays clickable and the focus ring still draws around the whole button, past the content edge.",
         "loading sets aria-busy and disables activation (disabled on a native button, aria-disabled on a render element) so the action can't double-fire."
       ],
       "examples": [
@@ -4927,6 +5076,11 @@
           "code": "<Button size=\"icon\" variant=\"ghost\" aria-label=\"Share\"><Icon name=\"share\" /></Button>",
           "imports": "import { Button, Icon } from \"@sableui/react\""
         },
+        {
+          "label": "Optically aligned to the row's edges",
+          "code": "<Stack gap={1.5}>\n  <Row justify=\"between\">\n    <span className=\"text-title-md\">Tasks</span>\n    <Button variant=\"ghost\" size=\"sm\" bleed=\"end\">View all</Button>\n  </Row>\n  <span className=\"text-body-sm text-muted-foreground\">Ship the release notes</span>\n  <Button variant=\"ghost\" size=\"sm\" bleed=\"start\" iconStart={<Icon name=\"plus\" />} className=\"self-start\">Add task</Button>\n</Stack>",
+          "imports": "import { Button, Icon, Row, Stack } from \"@sableui/react\""
+        },
         {
           "label": "Icon button with an unread badge",
           "code": "<Button size=\"icon\" variant=\"ghost\" aria-label=\"Notifications\" badge={<NotificationBadge dot />}><Icon name=\"bell\" /></Button>",
@@ -5218,7 +5372,7 @@
         {
           "name": "CardAction",
           "type": "ComponentPropsWithRef<\"div\">",
-          "description": "Header-aligned top-right action slot (e.g. an overflow menu, switch, or close button). Place inside CardHeader, which becomes a 2-column grid when present and collapses to a single column otherwise."
+          "description": "Header-aligned top-right action slot (e.g. an overflow menu, switch, or close button). Place inside CardHeader, which becomes a 2-column grid when present and collapses to a single column otherwise. A ghost or link Button that ends the slot bleeds by its own padding at the end, so a \"View all\" label or a \"⋯\" glyph sits on the card's content edge; filled buttons keep their edge there."
         },
         {
           "name": "CardContent",
@@ -8107,6 +8261,241 @@
         }
       ]
     },
+    {
+      "name": "DisclosurePicker",
+      "status": "stable",
+      "group": "Selection",
+      "register": "either",
+      "path": "components/disclosure-picker",
+      "summary": "A property row that names the current value and opens its list in place, beneath the row, instead of in a popup — for a tool panel or settings column where the choice is made while looking at what it changes. Built on Collapsible; the list is a listbox — arrow keys move, Enter or a click picks, applies and closes — and an optional search field filters long lists.",
+      "keywords": [
+        "disclosure picker",
+        "inline picker",
+        "in-place select",
+        "expanding list",
+        "property row",
+        "font picker",
+        "preset picker",
+        "inspector",
+        "picker row"
+      ],
+      "usage": {
+        "description": "Use DisclosurePicker for one-of-many choices in a docked panel or inspector where a popup would cover the preview the choice is about: the row shows the current value (in its own face, with a tile, as the content warrants), and the list opens beneath it, pushing the panel down. Use Select for a form field or anywhere a popup is fine; use Combobox when people type to find an option among hundreds; use RadioGroup or RadioCard when every option should stay visible. Nothing applies while arrowing through the list — only Enter, Space or a click picks — so it suits choices with a cost (a confirm, a font load, a reset); where each option should apply as focus lands on it, that is a radio group (ThemeSelector, RadioGroup).",
+        "bestPractices": [
+          {
+            "guidance": "do",
+            "description": "Enable search (`search` on DisclosurePickerPanel) only for long lists — roughly a dozen options or more, i.e. once the list scrolls. A short list (a handful of presets) reads faster with no field to skip past; the panel then has no search row and no gap."
+          },
+          {
+            "guidance": "do",
+            "description": "Show the value as the thing it is: a font row renders the family in its own face, a theme row leads with a ThemePreview tile in `media`. The row is a preview of the choice, not a label for it."
+          },
+          {
+            "guidance": "do",
+            "description": "Use `size=\"xs\"` in a property grid (a compact Density / PanelSection), where it sits on the inset panel-field fill beside ScrubField and an xs SelectTrigger. Keep `md` in a settings column or a simple panel."
+          },
+          {
+            "guidance": "do",
+            "description": "When several rows share a panel, control `open` from the parent so only one list is open at a time — two open lists push each other and the preview out of view."
+          },
+          {
+            "guidance": "do",
+            "description": "Use it for a choice with a cost — one that opens a confirm, loads something, or resets other settings. Arrow keys only move focus; onValueChange fires once, on Enter, Space or a click, and only when the pick differs from `value`."
+          },
+          {
+            "guidance": "do",
+            "description": "Give options a leading visual with `media` (a ThemePreview tile, a swatch) instead of nesting another component's list: ThemeSelector's radio list applies each theme as the arrow keys land on it, which defeats commit-on-Enter. A list the picker cannot express (a Tree) can still close the row with `useDisclosurePicker().close()`."
+          },
+          {
+            "guidance": "do",
+            "description": "Render DisclosurePickerEmpty in place of the list when a search matches nothing, not inside it — a listbox holds only options."
+          },
+          {
+            "guidance": "dont",
+            "description": "Use it in a page-register form. A form field that pushes the form down on open reads as a layout jump; that is Select's job."
+          },
+          {
+            "guidance": "dont",
+            "description": "Rebuild the row from a Collapsible with hand-copied classes. The disclosure, the well, the hover step, the xs field shell, focus return and scroll-into-view all live here; two hand copies of this row in one panel is how it came to exist."
+          },
+          {
+            "guidance": "dont",
+            "description": "Turn search on for a short list just because the other rows have it. A search field over six options is a control with nothing to do."
+          }
+        ],
+        "anatomy": [
+          {
+            "name": "DisclosurePicker",
+            "required": true,
+            "description": "Root. Owns open state, size, focus return and scroll-into-view."
+          },
+          {
+            "name": "DisclosurePickerTrigger",
+            "required": true,
+            "description": "The row: optional `label` caption, optional `media`, the value, and a chevron that flips when open."
+          },
+          {
+            "name": "DisclosurePickerPanel",
+            "required": true,
+            "description": "What opens beneath the row: the opt-in search field, then the list."
+          },
+          {
+            "name": "DisclosurePickerList",
+            "required": false,
+            "description": "A listbox of options that scrolls past 16rem. Arrow keys move; Enter, Space or a click picks."
+          },
+          {
+            "name": "DisclosurePickerOption",
+            "required": false,
+            "description": "One option row, with optional leading media and trailing note. Chosen, it lifts out of the well; focused, it takes the ring."
+          },
+          {
+            "name": "DisclosurePickerEmpty",
+            "required": false,
+            "description": "The no-match line, rendered in place of the list when a search filters everything out."
+          }
+        ]
+      },
+      "related": {
+        "components": [
+          "Collapsible",
+          "Select",
+          "Combobox",
+          "SearchInput",
+          "RadioGroup",
+          "ThemeSelector",
+          "FontPicker",
+          "PropertyRow"
+        ]
+      },
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "description": "Controlled open state. Pair with onOpenChange."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Uncontrolled initial open state."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "description": "Called with the next open state — from the trigger, a pick, or Escape."
+        },
+        {
+          "name": "size",
+          "type": "\"md\" | \"xs\"",
+          "default": "\"md\"",
+          "description": "md is a --control-md row (40px comfortable) in a settings column, its own well when closed. xs is the property-grid rung: a --control-xs row on the inset panel-field fill with ui-tier type. Height, padding, radius, type and surface move together."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Merged onto the root (layout only — the look comes from size)."
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "DisclosurePickerTrigger",
+          "type": "{ label?: ReactNode; media?: ReactNode; children?: ReactNode } + Base UI Collapsible.Trigger props",
+          "description": "The row. `label` is a muted leading caption on a fixed column so stacked rows align; `media` a leading visual (a ThemePreview tile); children the value, truncated on one line. ArrowDown opens it, and steps into the list once open."
+        },
+        {
+          "name": "DisclosurePickerPanel",
+          "type": "{ search?: { value: string; onValueChange(value: string): void; placeholder?: string; label?: string } } + Collapsible.Panel props",
+          "description": "Opens beneath the row. `search` opts in to a SearchInput above the list (off by default); it is controlled because the consumer filters, and it is cleared when the row closes. Escape clears a query first, then closes; ArrowDown in the field steps into the list."
+        },
+        {
+          "name": "DisclosurePickerList",
+          "type": "{ value: string; onValueChange(value: string): void; aria-label?: string } + div props",
+          "description": "A listbox. ArrowUp/ArrowDown, Home/End and type-ahead move focus without applying anything (ArrowUp from the first option returns to the search field); Enter, Space or a click picks the focused option — onValueChange fires once, only when it differs from `value` — and closes the row. Escape closes without a pick."
+        },
+        {
+          "name": "DisclosurePickerOption",
+          "type": "{ value: string; children?: ReactNode; media?: ReactNode; note?: ReactNode; disabled?: boolean; textValue?: string }",
+          "description": "One option row. `media` is a leading visual (a ThemePreview tile); `note` a muted trailing annotation — options without one show a check when chosen. `disabled` skips it for the keyboard and refuses the pick; `textValue` is what type-ahead matches when the name is not plain text."
+        },
+        {
+          "name": "DisclosurePickerEmpty",
+          "type": "{ children?: ReactNode }",
+          "description": "The no-match line, rendered in place of the list."
+        },
+        {
+          "name": "useDisclosurePicker",
+          "type": "() => { open: boolean; close(): void; size: \"md\" | \"xs\" }",
+          "description": "For a list the picker does not own (a Tree) that should close the row when something is picked."
+        }
+      ],
+      "tokensUsed": [
+        "foreground",
+        "muted-foreground",
+        "popover",
+        "hairline",
+        "panel-field",
+        "panel-field-hover",
+        "ring",
+        "accent"
+      ],
+      "motion": [
+        {
+          "slot": "arrival",
+          "recipe": "none",
+          "part": "root",
+          "why": "A property row is present from first paint; animating it in would stage chrome the user is already scanning."
+        },
+        {
+          "slot": "response",
+          "recipe": "motion-interactive",
+          "part": "DisclosurePickerTrigger",
+          "why": "The row reads as a value, not a button; the hover step is what says it opens before it is clicked."
+        },
+        {
+          "slot": "transition",
+          "recipe": "motion-disclosure",
+          "part": "DisclosurePickerPanel",
+          "why": "The list pushes the panel down; growing its height ties the movement below to this row rather than to a layout jump."
+        },
+        {
+          "slot": "activity",
+          "recipe": "none",
+          "part": "root",
+          "why": "Nothing is indeterminate: the options are resident. A list that loads should show its own loader inside the panel."
+        }
+      ],
+      "a11y": [
+        "The trigger is a real <button>; Base UI wires aria-expanded and aria-controls to the panel. Its accessible name is its text (caption + value) unless an aria-label is given.",
+        "The list is role=\"listbox\" with role=\"option\" rows; aria-selected marks the committed value, not the focused row, so a screen reader hears both where focus is and what is chosen. Selection does not follow focus: ArrowUp/ArrowDown, Home/End and type-ahead move focus (roving tabindex — one tab stop, so Tab leaves the list in one step) and apply nothing; Enter, Space or a click picks, applies and closes. Disabled options carry aria-disabled and are skipped.",
+        "Why a listbox and not a radio group: a radio group's checked state follows focus, so every arrow press would be a pick — wrong for a choice that opens a confirm, loads a font or resets settings. Base UI ships no standalone listbox (Select is popup-only, Combobox's inline list is focus-in-the-input, Composite is internal), so the keyboard model lives here.",
+        "Opening from the keyboard (Enter, Space, ArrowDown) moves focus into the panel: the search field when there is one, otherwise the chosen option (or the first). A pointer open focuses the search field on a fine pointer only, so touch does not raise the on-screen keyboard.",
+        "Escape closes the row without changing the value (clearing a query first) and returns focus to the trigger; a pick does the same. Focus is not pulled back when it has already moved on, e.g. to a confirm dialog the pick opened.",
+        "The panel animates with motion-disclosure, which is static under prefers-reduced-motion or MotionProvider off; the scroll that keeps the row in view is instant, never smooth."
+      ],
+      "examples": [
+        {
+          "label": "A short list — no search",
+          "code": "const [preset, setPreset] = useState(\"comfortable\")\nconst [open, setOpen] = useState(false)\n<DisclosurePicker open={open} onOpenChange={setOpen} className=\"w-72\">\n  <DisclosurePickerTrigger label=\"Density\">{preset === \"compact\" ? \"Compact\" : \"Comfortable\"}</DisclosurePickerTrigger>\n  <DisclosurePickerPanel>\n    <DisclosurePickerList aria-label=\"Density\" value={preset} onValueChange={setPreset}>\n      <DisclosurePickerOption value=\"comfortable\">Comfortable</DisclosurePickerOption>\n      <DisclosurePickerOption value=\"compact\">Compact</DisclosurePickerOption>\n    </DisclosurePickerList>\n  </DisclosurePickerPanel>\n</DisclosurePicker>",
+          "imports": "import { DisclosurePicker, DisclosurePickerList, DisclosurePickerOption, DisclosurePickerPanel, DisclosurePickerTrigger } from \"@sableui/react\""
+        },
+        {
+          "label": "A long list — search opted in",
+          "code": "const COUNTRIES = [\"Argentina\", \"Australia\", \"Austria\", \"Belgium\", \"Brazil\", \"Canada\", \"Chile\", \"Denmark\", \"Finland\", \"France\", \"Germany\", \"Ireland\", \"Italy\", \"Japan\", \"Mexico\", \"Norway\", \"Portugal\", \"Spain\", \"Sweden\"]\nconst [country, setCountry] = useState(\"Canada\")\nconst [query, setQuery] = useState(\"\")\nconst shown = COUNTRIES.filter((name) => name.toLowerCase().includes(query.trim().toLowerCase()))\n<DisclosurePicker className=\"w-72\">\n  <DisclosurePickerTrigger label=\"Country\">{country}</DisclosurePickerTrigger>\n  <DisclosurePickerPanel search={{ value: query, onValueChange: setQuery, placeholder: `Search ${COUNTRIES.length} countries` }}>\n    {shown.length > 0 ? (\n      <DisclosurePickerList aria-label=\"Country\" value={country} onValueChange={setCountry}>\n        {shown.map((name) => (\n          <DisclosurePickerOption key={name} value={name}>{name}</DisclosurePickerOption>\n        ))}\n      </DisclosurePickerList>\n    ) : (\n      <DisclosurePickerEmpty>No countries match “{query}”.</DisclosurePickerEmpty>\n    )}\n  </DisclosurePickerPanel>\n</DisclosurePicker>",
+          "imports": "import { DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, DisclosurePickerOption, DisclosurePickerPanel, DisclosurePickerTrigger } from \"@sableui/react\""
+        },
+        {
+          "label": "A theme picker — media tiles, commit on Enter",
+          "code": "const { themeId, setThemeId, themes, mode } = useSableTheme()\nconst current = themes.find((theme) => theme.id === themeId)\n<DisclosurePicker>\n  <DisclosurePickerTrigger aria-label={`Theme: ${current?.label}`} media={current ? <ThemePreview theme={current} mode={mode} size=\"sm\" /> : null}>\n    {current?.label}\n  </DisclosurePickerTrigger>\n  <DisclosurePickerPanel>\n    <DisclosurePickerList aria-label=\"Theme\" value={themeId} onValueChange={setThemeId}>\n      {themes.map((theme) => (\n        <DisclosurePickerOption key={theme.id} value={theme.id} media={<ThemePreview theme={theme} mode={mode} size=\"sm\" />}>\n          {theme.label}\n        </DisclosurePickerOption>\n      ))}\n    </DisclosurePickerList>\n  </DisclosurePickerPanel>\n</DisclosurePicker>",
+          "imports": "import { DisclosurePicker, DisclosurePickerList, DisclosurePickerOption, DisclosurePickerPanel, DisclosurePickerTrigger, ThemePreview, useSableTheme } from \"@sableui/react\""
+        },
+        {
+          "label": "Property-grid rung",
+          "code": "const [blend, setBlend] = useState(\"normal\")\n<Density value=\"compact\" className=\"w-64\">\n  <DisclosurePicker size=\"xs\">\n    <DisclosurePickerTrigger label=\"Blend\">{blend}</DisclosurePickerTrigger>\n    <DisclosurePickerPanel>\n      <DisclosurePickerList aria-label=\"Blend mode\" value={blend} onValueChange={setBlend}>\n        <DisclosurePickerOption value=\"normal\">normal</DisclosurePickerOption>\n        <DisclosurePickerOption value=\"multiply\">multiply</DisclosurePickerOption>\n        <DisclosurePickerOption value=\"screen\">screen</DisclosurePickerOption>\n      </DisclosurePickerList>\n    </DisclosurePickerPanel>\n  </DisclosurePicker>\n</Density>",
+          "imports": "import { Density, DisclosurePicker, DisclosurePickerList, DisclosurePickerOption, DisclosurePickerPanel, DisclosurePickerTrigger } from \"@sableui/react\""
+        }
+      ]
+    },
     {
       "name": "EmptyState",
       "status": "stable",
@@ -8874,39 +9263,214 @@
       ]
     },
     {
-      "name": "Form",
+      "name": "FontPicker",
       "status": "stable",
-      "group": "Forms",
+      "group": "Selection",
       "register": "either",
-      "path": "components/form",
-      "summary": "A styled <form> plus Field — the form orchestration layer, built on Base UI Form and Field. Field wires a label, control, helper text, and error message together with correct a11y (htmlFor, aria-labelledby, aria-describedby, aria-invalid, required) automatically, around any Sable control. Validation-library-agnostic: pass each Field an error string, or let Form check native constraints and Field validate functions on submit.",
+      "path": "components/font-picker",
+      "summary": "A DisclosurePicker for a typeface: the row names the chosen family in its own face and opens in place into a searchable list of families, each drawn in itself. The app supplies the families and loads the faces; Sable bundles no catalog.",
       "keywords": [
-        "form",
-        "field",
-        "label",
-        "validation",
-        "error",
-        "required",
-        "settings",
-        "input"
+        "font picker",
+        "typeface",
+        "font family",
+        "font selector",
+        "typography",
+        "google fonts",
+        "inspector",
+        "customizer"
       ],
       "usage": {
-        "description": "Use Form and Field as the default wrapper for Sable form controls. Field owns the label, description, required state, and error wiring so agents do not hand-roll inconsistent label/input relationships.",
+        "description": "Use FontPicker wherever someone chooses a typeface for a role (body, headings, code) in a panel that shows the result: a theme editor, a document inspector, a brand customizer. It is a DisclosurePicker, so the list opens beneath the row rather than over the preview; arrow keys walk the families (each drawn in its own face) without applying or loading anything, and Enter, Space or a click picks one, loads it and closes the row.",
         "bestPractices": [
           {
             "guidance": "do",
-            "description": "Wrap each control in Field unless a specialized component already owns its label and error semantics."
+            "description": "Pass `loadFont` and load faces lazily: `\"preview\"` fires for every family when the list opens (load just the glyphs of its name — Google Fonts' `text=` parameter makes a 20-font list cost a few KB), `\"use\"` for the chosen one (load its real weights). Make it idempotent and define it once, outside render."
           },
           {
             "guidance": "do",
-            "description": "Use Field error for validation messages so aria-invalid and aria-describedby are wired together."
+            "description": "Put non-font choices — \"Preset (Figtree)\", \"Same as body\" — in `options`, with a short `valueLabel` for the row. They list first and render in the app's face, so they never read as a family."
           },
           {
             "guidance": "do",
-            "description": "For built-in checks, put required / type=\"email\" / minLength on the control (or a validate function on Field) inside a Form: on submit the message appears under the field and the first invalid control is focused. Pass server errors to Form errors, keyed by Field name."
+            "description": "Give each row a role `label` (\"Body\", \"Headings\", \"Mono\") and stack them; the caption column aligns. Control `open` from the parent so only one list is open at a time."
           },
           {
-            "guidance": "do",
+            "guidance": "dont",
+            "description": "Leave search on for a short curated list — under a dozen families, pass `searchable={false}`. Search is on by default because font lists are usually long."
+          },
+          {
+            "guidance": "dont",
+            "description": "Use a Select of family names for this. A popup covers the text it changes, and a family name set in the app's face says nothing about the face."
+          }
+        ]
+      },
+      "related": {
+        "components": [
+          "DisclosurePicker",
+          "ThemeSelector",
+          "Select",
+          "Combobox"
+        ]
+      },
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "description": "The chosen family, or the value of one of `options`."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Called once a family (or option) is picked — Enter, Space or a click — and only when it differs from `value`; the row then closes. Arrow keys and type-ahead only move focus; Escape closes without a pick."
+        },
+        {
+          "name": "fonts",
+          "type": "readonly { family: string; note?: string; stack?: string }[]",
+          "description": "The families to offer, in order. `note` is a muted annotation (searched too); `stack` the CSS font-family to draw it in (default `\"<family>\"`)."
+        },
+        {
+          "name": "options",
+          "type": "readonly { value: string; label: string; valueLabel?: string }[]",
+          "default": "[]",
+          "description": "Non-font choices listed above the fonts, in the app's face. `valueLabel` is what the row shows while it is chosen."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "description": "The row's leading caption — the role the font plays."
+        },
+        {
+          "name": "listLabel",
+          "type": "string",
+          "default": "\"Font\"",
+          "description": "Accessible name of the list."
+        },
+        {
+          "name": "searchable",
+          "type": "boolean",
+          "default": "true",
+          "description": "A search field above the list, filtering by family and note. Pass false for a short curated list (under a dozen)."
+        },
+        {
+          "name": "searchLabel",
+          "type": "string",
+          "default": "\"Search fonts\"",
+          "description": "Accessible name of the search field."
+        },
+        {
+          "name": "loadFont",
+          "type": "(font, purpose: \"preview\" | \"use\") => void",
+          "description": "Loads a face on demand: \"preview\" for every family when the list opens, \"use\" for the chosen one once it is picked (never while the list is only being walked). Receives your own font objects. Idempotent."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "description": "Controlled open state, as DisclosurePicker. Control it to keep one of several rows open at a time."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Uncontrolled initial open state."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "description": "Called with the next open state."
+        },
+        {
+          "name": "size",
+          "type": "\"md\" | \"xs\"",
+          "default": "\"md\"",
+          "description": "md for a settings column; xs for the property-grid rung (see DisclosurePicker)."
+        }
+      ],
+      "tokensUsed": [
+        "foreground",
+        "muted-foreground",
+        "popover",
+        "hairline",
+        "panel-field",
+        "ring"
+      ],
+      "motion": [
+        {
+          "slot": "arrival",
+          "recipe": "none",
+          "part": "root",
+          "why": "A property row is present from first paint."
+        },
+        {
+          "slot": "response",
+          "recipe": "motion-interactive",
+          "part": "Trigger",
+          "why": "Inherited from DisclosurePicker: the hover step says the value row opens."
+        },
+        {
+          "slot": "transition",
+          "recipe": "motion-disclosure",
+          "part": "Panel",
+          "why": "Inherited from DisclosurePicker: the list grows in place, tying the panel's movement to this row."
+        },
+        {
+          "slot": "activity",
+          "recipe": "none",
+          "part": "root",
+          "why": "Faces load in the background and swap in when ready; the names are legible in the fallback meanwhile, so there is nothing to wait on."
+        }
+      ],
+      "a11y": [
+        "Inherits DisclosurePicker: a button trigger with aria-expanded/controls whose name is the caption plus the family; a listbox named by `listLabel`, aria-selected on the chosen family.",
+        "Keyboard open focuses the search field; ArrowDown steps from it into the list (ArrowUp from the first option steps back); arrows, Home/End and type-ahead move without applying; Enter or Space picks and closes; Escape clears the query, then closes without a pick and returns focus to the row.",
+        "Each family is set in its own face, but its name is still plain text, so a screen reader reads the name, not the glyphs."
+      ],
+      "examples": [
+        {
+          "label": "Body font with lazy loading",
+          "code": "const FONTS = [\n  { family: \"Inter\", note: \"Neutral, dense UI\" },\n  { family: \"Figtree\", note: \"Friendly geometric\" },\n  { family: \"Fraunces\", note: \"Soft, wonky serif\", stack: '\"Fraunces\", serif' },\n]\n// Your loader; Sable never fetches fonts itself.\nconst loadFont = (font: { family: string }, purpose: \"preview\" | \"use\") => {\n  const id = `font-${purpose}-${font.family}`\n  if (document.getElementById(id)) return\n  const link = Object.assign(document.createElement(\"link\"), { id, rel: \"stylesheet\" })\n  const family = font.family.replace(/ /g, \"+\")\n  link.href = purpose === \"preview\"\n    ? `https://fonts.googleapis.com/css2?family=${family}&text=${encodeURIComponent(font.family)}`\n    : `https://fonts.googleapis.com/css2?family=${family}:wght@400..700&display=swap`\n  document.head.appendChild(link)\n}\nconst [family, setFamily] = useState(\"Inter\")\n<FontPicker label=\"Body\" listLabel=\"Body font\" value={family} onValueChange={setFamily} fonts={FONTS} loadFont={loadFont} searchable={false} />",
+          "imports": "import { FontPicker } from \"@sableui/react\""
+        },
+        {
+          "label": "With a preset option, one row of several",
+          "code": "const [open, setOpen] = useState<string | null>(null)\nconst [body, setBody] = useState(\"theme\")\n<FontPicker\n  label=\"Body\"\n  listLabel=\"Body font\"\n  value={body}\n  onValueChange={setBody}\n  options={[{ value: \"theme\", label: \"Preset (Figtree)\", valueLabel: \"Figtree\" }]}\n  fonts={[{ family: \"Inter\" }, { family: \"Figtree\" }, { family: \"Geist\" }]}\n  open={open === \"body\"}\n  onOpenChange={(next) => setOpen(next ? \"body\" : null)}\n/>",
+          "imports": "import { FontPicker } from \"@sableui/react\""
+        }
+      ]
+    },
+    {
+      "name": "Form",
+      "status": "stable",
+      "group": "Forms",
+      "register": "either",
+      "path": "components/form",
+      "summary": "A styled <form> plus Field — the form orchestration layer, built on Base UI Form and Field. Field wires a label, control, helper text, and error message together with correct a11y (htmlFor, aria-labelledby, aria-describedby, aria-invalid, required) automatically, around any Sable control. Validation-library-agnostic: pass each Field an error string, or let Form check native constraints and Field validate functions on submit.",
+      "keywords": [
+        "form",
+        "field",
+        "label",
+        "validation",
+        "error",
+        "required",
+        "settings",
+        "input"
+      ],
+      "usage": {
+        "description": "Use Form and Field as the default wrapper for Sable form controls. Field owns the label, description, required state, and error wiring so agents do not hand-roll inconsistent label/input relationships.",
+        "bestPractices": [
+          {
+            "guidance": "do",
+            "description": "Wrap each control in Field unless a specialized component already owns its label and error semantics."
+          },
+          {
+            "guidance": "do",
+            "description": "Use Field error for validation messages so aria-invalid and aria-describedby are wired together."
+          },
+          {
+            "guidance": "do",
+            "description": "For built-in checks, put required / type=\"email\" / minLength on the control (or a validate function on Field) inside a Form: on submit the message appears under the field and the first invalid control is focused. Pass server errors to Form errors, keyed by Field name."
+          },
+          {
+            "guidance": "do",
             "description": "Use horizontal Field orientation only for one-line boolean controls like Checkbox, Switch, or Radio."
           },
           {
@@ -10235,68 +10799,496 @@
       },
       "props": [
         {
-          "name": "direction",
-          "type": "\"left\" | \"right\" | \"up\" | \"down\"",
-          "default": "\"left\"",
-          "description": "Scroll direction; up/down switch to a vertical loop, which needs a bounded height (e.g. className=\"h-56\")."
+          "name": "direction",
+          "type": "\"left\" | \"right\" | \"up\" | \"down\"",
+          "default": "\"left\"",
+          "description": "Scroll direction; up/down switch to a vertical loop, which needs a bounded height (e.g. className=\"h-56\")."
+        },
+        {
+          "name": "speed",
+          "type": "number",
+          "default": "40",
+          "description": "Constant speed in px/s — independent of content length."
+        },
+        {
+          "name": "gap",
+          "type": "string",
+          "default": "\"calc(var(--spacing) * 8)\"",
+          "description": "Gap between items (any CSS length). Use a spacing-scale value (calc(var(--spacing) * n)) so it moves with density."
+        },
+        {
+          "name": "pauseOnHover",
+          "type": "boolean",
+          "default": "true",
+          "description": "Pause while hovered or keyboard-focused (WCAG 2.2.2)."
+        },
+        {
+          "name": "controls",
+          "type": "boolean",
+          "default": "false",
+          "description": "Render a visible pause/play control — recommended for WCAG 2.2.2 when content auto-scrolls."
+        },
+        {
+          "name": "fade",
+          "type": "boolean",
+          "default": "false",
+          "description": "Fade the leading/trailing edges with a mask."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "Accessible label for the scrolling region."
+        }
+      ],
+      "tokensUsed": [],
+      "a11y": [
+        "Duplicate groups are aria-hidden, so screen readers read the content once.",
+        "Pauses on hover and focus-within; under prefers-reduced-motion / MotionProvider off it stops and becomes a normal scroll region.",
+        "Decorative by default — pass a label only when the row conveys meaning."
+      ],
+      "examples": [
+        {
+          "label": "Logo row",
+          "code": "<Marquee>{logos.map((l) => <img key={l.id} src={l.src} alt={l.name} className=\"h-8\" />)}</Marquee>",
+          "imports": "import { Marquee } from \"@sableui/react\""
+        },
+        {
+          "label": "Reverse, faster",
+          "code": "<Marquee direction=\"right\" speed={70}>{tags.map((t) => <Badge key={t} appearance=\"outline\">{t}</Badge>)}</Marquee>",
+          "imports": "import { Badge, Marquee } from \"@sableui/react\""
+        },
+        {
+          "label": "Vertical",
+          "code": "<Marquee direction=\"up\" className=\"h-64\">{items}</Marquee>",
+          "imports": "import { Marquee } from \"@sableui/react\""
+        }
+      ]
+    },
+    {
+      "name": "MediaImage",
+      "status": "beta",
+      "group": "Media & mockups",
+      "register": "either",
+      "path": "components/media-image",
+      "summary": "An image that fills its box and falls back to GradientArt seeded by the item when it has no source or the source fails — Avatar's image-load tracking, for covers, thumbnails and product shots instead of faces.",
+      "keywords": [
+        "image",
+        "img",
+        "image fallback",
+        "broken image",
+        "cover art",
+        "album art",
+        "thumbnail",
+        "placeholder image",
+        "onError",
+        "missing image"
+      ],
+      "usage": {
+        "description": "Use MediaImage wherever content imagery may be missing or broken: a cover in a grid, a thumbnail in a row, a product shot. It fills the box it is given — an AspectBox for a cover, a sized and rounded box for a thumbnail — shows a quiet muted surface while the image loads, fades the image in once decoded, and paints GradientArt seeded by the item when there is no image to show, so a grid of missing covers still reads as distinct things. For a person use Avatar; for a whole tile with title and actions use MediaTile, which composes this.",
+        "bestPractices": [
+          {
+            "guidance": "do",
+            "description": "Give the box the shape: `<AspectBox ratio={1} className=\"rounded-md\"><MediaImage … /></AspectBox>`, or `size-14 rounded-md` on MediaImage itself for a thumbnail. It clips to whatever radius the box has."
+          },
+          {
+            "guidance": "do",
+            "description": "Pass `seed` (the title or an id) when `alt` is empty, so the fallback art is the item's own and stays the same in every list it appears in."
+          },
+          {
+            "guidance": "do",
+            "description": "Leave `alt` empty when a visible title sits next to the image — a tile, a row — and describe it when the image stands alone. A set `alt` also names the fallback, so the description survives a broken URL."
+          },
+          {
+            "guidance": "dont",
+            "description": "Do not hand-write `<img onError={() => setBroken(true)}>`. An image that fails before hydration never fires the handler on a prerendered page; MediaImage preloads off the DOM and catches it."
+          },
+          {
+            "guidance": "dont",
+            "description": "Do not use it for profile pictures. A person is a circle with initials — Avatar, whose `variant=\"art\"` is the same fallback with the person's initials over it."
+          }
+        ]
+      },
+      "related": {
+        "components": [
+          "MediaTile",
+          "Avatar",
+          "GradientArt",
+          "AspectBox"
+        ]
+      },
+      "props": [
+        {
+          "name": "src",
+          "type": "string",
+          "description": "Image URL. Omitted, empty or failing to load ⇒ the fallback shows."
+        },
+        {
+          "name": "alt",
+          "type": "string",
+          "default": "\"\"",
+          "description": "Alt text. Empty is decorative — right beside a visible title. When set and no image shows, it names the fallback instead."
+        },
+        {
+          "name": "seed",
+          "type": "string | number",
+          "description": "Seeds the fallback art. Defaults to `alt`; pass the title or an id when `alt` is empty."
+        },
+        {
+          "name": "fallback",
+          "type": "ReactNode",
+          "description": "Replaces the GradientArt fallback — a glyph or monogram. Fills the frame under the same clipping."
+        },
+        {
+          "name": "fit",
+          "type": "\"cover\" | \"contain\"",
+          "default": "\"cover\"",
+          "description": "`cover` crops to fill (artwork, photos); `contain` letterboxes on the muted surface (a logo, a product that must not be cropped)."
+        },
+        {
+          "name": "srcSet",
+          "type": "string",
+          "description": "Responsive sources, passed to the `<img>`."
+        },
+        {
+          "name": "sizes",
+          "type": "string",
+          "description": "The `sizes` attribute for `srcSet`."
+        },
+        {
+          "name": "loading",
+          "type": "\"lazy\" | \"eager\"",
+          "default": "\"lazy\"",
+          "description": "Native lazy loading. Use `eager` for the first row of a grid above the fold."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Sizing and rounding when MediaImage is the box itself (`size-14 rounded-md`). Inside an AspectBox it already fills."
+        }
+      ],
+      "variants": {
+        "fit": [
+          "cover",
+          "contain"
+        ]
+      },
+      "tokensUsed": [
+        "muted",
+        "art-1",
+        "art-2",
+        "art-3",
+        "art-4",
+        "art-5",
+        "art-6",
+        "art-ground"
+      ],
+      "motion": [
+        {
+          "slot": "arrival",
+          "recipe": "motion-fade",
+          "part": "image",
+          "why": "The image fades in over the muted surface once it has decoded, so a slow cover settles in instead of popping row by row as the grid loads."
+        },
+        {
+          "slot": "response",
+          "recipe": "none",
+          "part": "root",
+          "why": "Imagery, not a control. The tile or row around it answers the pointer."
+        },
+        {
+          "slot": "transition",
+          "recipe": "none",
+          "part": "root",
+          "why": "Its only state change is loading → loaded or failed, which the arrival covers."
+        },
+        {
+          "slot": "activity",
+          "recipe": "none",
+          "part": "root",
+          "why": "A loading image rests on a static muted surface; a shimmer per cover across a long grid would be noise."
+        }
+      ],
+      "a11y": [
+        "`alt` defaults to empty (decorative), because the usual neighbour is a visible title that already names the item; describe the image when it stands alone.",
+        "When no image is on screen and `alt` is set, the frame takes `role=\"img\"` with that label, so a broken URL does not erase the description. The fallback art itself is always aria-hidden.",
+        "The `<img>` mounts only once it has loaded, so assistive technology never meets a broken-image icon."
+      ],
+      "examples": [
+        {
+          "label": "Cover with fallback",
+          "code": "<AspectBox ratio={1} className=\"rounded-md\">\n\t<MediaImage src={album.cover} seed={album.title} />\n</AspectBox>",
+          "imports": "import { AspectBox, MediaImage } from \"@sableui/react\""
+        },
+        {
+          "label": "No image yet",
+          "code": "<AspectBox ratio={1} className=\"rounded-md\">\n\t<MediaImage seed=\"Low tide, high noon\" />\n</AspectBox>",
+          "imports": "import { AspectBox, MediaImage } from \"@sableui/react\""
+        },
+        {
+          "label": "Row thumbnail",
+          "code": "<MediaImage src={track.art} seed={track.title} className=\"size-12 shrink-0 rounded-sm\" />",
+          "imports": "import { MediaImage } from \"@sableui/react\""
+        },
+        {
+          "label": "Logo, never cropped",
+          "code": "<AspectBox ratio={16 / 9} className=\"rounded-lg\">\n\t<MediaImage src={brand.logo} alt={brand.name} fit=\"contain\" />\n</AspectBox>",
+          "imports": "import { AspectBox, MediaImage } from \"@sableui/react\""
+        }
+      ]
+    },
+    {
+      "name": "MediaTile",
+      "status": "beta",
+      "group": "Media & mockups",
+      "register": "page",
+      "path": "components/media-tile",
+      "summary": "A cover-first tile — square, 16:9 or poster artwork with an optional play-style action over it, then a title and a subtitle that can each be links — that is one link as a whole without nesting its other controls inside one.",
+      "keywords": [
+        "album",
+        "album art",
+        "cover",
+        "tile",
+        "media card",
+        "video thumbnail",
+        "podcast",
+        "playlist",
+        "gallery",
+        "product tile",
+        "poster",
+        "grid item",
+        "play button",
+        "music"
+      ],
+      "usage": {
+        "description": "The item in a media grid or shelf: an album, a playlist, a video, a podcast, a film, a photo, a product. The cover leads and carries the weight; the title and subtitle sit underneath without a card around them. The whole tile follows the title's link, the subtitle can link somewhere else (the artist, the channel), and an action — usually play — floats over the cover's corner, revealed on hover and focus and always shown on touch. A missing or broken cover becomes GradientArt seeded by the title, so a grid of items without artwork still reads as distinct things.",
+        "bestPractices": [
+          {
+            "guidance": "do",
+            "description": "Lay tiles out with `Grid` (`<Grid minItemWidth=\"10rem\">`) or a horizontal `Scroller` for a shelf. The tile fills its cell; the grid decides the width."
+          },
+          {
+            "guidance": "do",
+            "description": "Pass `render={<Link to=\"…\" />}` (or `href`) for where the tile goes, and `subtitleRender` / `subtitleHref` for a second destination. Each stays a separate control; never wrap the tile in your own link."
+          },
+          {
+            "guidance": "do",
+            "description": "Name the action for its item — `aria-label=\"Play Low tide, high noon\"`, not \"Play\". A grid of twenty identical \"Play\" buttons is unusable from a screen reader's list of controls."
+          },
+          {
+            "guidance": "do",
+            "description": "Use `titleAs=\"h3\"` when the tiles sit under a section heading, so screen-reader users can move tile to tile by heading."
+          },
+          {
+            "guidance": "dont",
+            "description": "Do not build this from `Card render={<Link />}`. A card that is a link cannot hold a second link or a button — interactive content cannot nest — which is exactly what a media tile needs."
+          },
+          {
+            "guidance": "dont",
+            "description": "Do not put more than one action on the cover. A second control over the art is a toolbar on a thumbnail; move secondary actions (add to queue, share) into an OverflowMenu in the action slot or onto the item's page."
+          },
+          {
+            "guidance": "dont",
+            "description": "Do not use it for a framed commerce card with a price and a buy button — that is ProductCardBlock — or for a person, which is an Avatar."
+          }
+        ],
+        "anatomy": [
+          {
+            "name": "Cover",
+            "required": true,
+            "description": "An AspectBox holding MediaImage: the image, or GradientArt seeded by the title. Drawn first, read last."
+          },
+          {
+            "name": "Title",
+            "required": true,
+            "description": "The item's name. When the tile links, this is the link, stretched over the whole tile."
+          },
+          {
+            "name": "Subtitle",
+            "required": false,
+            "description": "The second line. Optionally its own link, raised above the stretched one."
+          },
+          {
+            "name": "Action",
+            "required": false,
+            "description": "One control over the cover's bottom-end corner — usually play. Revealed on hover and focus; always visible on touch."
+          },
+          {
+            "name": "Badge",
+            "required": false,
+            "description": "A static label over the cover's top-start corner — a duration, \"New\". Click-through."
+          }
+        ]
+      },
+      "related": {
+        "components": [
+          "MediaImage",
+          "GradientArt",
+          "Grid",
+          "AspectBox",
+          "Card",
+          "Scroller"
+        ]
+      },
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "description": "The item's name. Seeds the fallback art when it is a string."
+        },
+        {
+          "name": "subtitle",
+          "type": "ReactNode",
+          "description": "The second line — an artist, a channel, a year."
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "description": "Cover image URL. Without one, or when it fails, the cover is GradientArt seeded by the item."
+        },
+        {
+          "name": "alt",
+          "type": "string",
+          "default": "\"\"",
+          "description": "Cover alt text. Empty by default: the title below already names the item."
+        },
+        {
+          "name": "seed",
+          "type": "string | number",
+          "description": "Seeds the fallback art. Defaults to `title` when it is a string."
+        },
+        {
+          "name": "aspect",
+          "type": "\"square\" | \"video\" | \"poster\" | number",
+          "default": "\"square\"",
+          "description": "The cover's shape: square (albums, podcasts), video (16:9), poster (2:3 — films, books), or any width / height ratio."
         },
         {
-          "name": "speed",
-          "type": "number",
-          "default": "40",
-          "description": "Constant speed in px/s — independent of content length."
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "default": "\"md\"",
+          "description": "Moves the type tier, the cover-to-text gap, the corner and the overlay inset together."
         },
         {
-          "name": "gap",
+          "name": "href",
           "type": "string",
-          "default": "\"calc(var(--spacing) * 8)\"",
-          "description": "Gap between items (any CSS length). Use a spacing-scale value (calc(var(--spacing) * n)) so it moves with density."
+          "description": "Where the tile goes. The title becomes the link, stretched over the whole tile."
         },
         {
-          "name": "pauseOnHover",
-          "type": "boolean",
-          "default": "true",
-          "description": "Pause while hovered or keyboard-focused (WCAG 2.2.2)."
+          "name": "render",
+          "type": "useRender.RenderProp",
+          "description": "The title link's element, for a router: `render={<Link to=\"/albums/1\" />}`. Takes precedence over `href`."
         },
         {
-          "name": "controls",
-          "type": "boolean",
-          "default": "false",
-          "description": "Render a visible pause/play control — recommended for WCAG 2.2.2 when content auto-scrolls."
+          "name": "subtitleHref",
+          "type": "string",
+          "description": "Makes the subtitle its own link — a separate tab stop above the tile's."
         },
         {
-          "name": "fade",
-          "type": "boolean",
-          "default": "false",
-          "description": "Fade the leading/trailing edges with a mask."
+          "name": "subtitleRender",
+          "type": "useRender.RenderProp",
+          "description": "The subtitle link's element, for a router."
         },
         {
-          "name": "label",
-          "type": "string",
-          "description": "Accessible label for the scrolling region."
+          "name": "action",
+          "type": "ReactNode",
+          "description": "One control over the cover's bottom-end corner, usually a play Button. Hidden until hover or focus on hover-capable devices; always shown on touch."
+        },
+        {
+          "name": "badge",
+          "type": "ReactNode",
+          "description": "A static label on the cover's top-start corner — `<Badge appearance=\"overlay\">`."
+        },
+        {
+          "name": "titleAs",
+          "type": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\"",
+          "default": "\"p\"",
+          "description": "The title's element. A heading one level below the section's lets screen-reader users move tile to tile."
+        },
+        {
+          "name": "loading",
+          "type": "\"lazy\" | \"eager\"",
+          "default": "\"lazy\"",
+          "description": "Native image loading. `eager` for the first row above the fold."
+        },
+        {
+          "name": "...div props",
+          "type": "Omit<ComponentPropsWithRef<\"div\">, \"title\">",
+          "description": "Spread onto the root."
+        }
+      ],
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "aspect": [
+          "square",
+          "video",
+          "poster"
+        ]
+      },
+      "tokensUsed": [
+        "foreground",
+        "muted-foreground",
+        "muted",
+        "overlay",
+        "ring"
+      ],
+      "motion": [
+        {
+          "slot": "arrival",
+          "recipe": "motion-fade",
+          "part": "Cover",
+          "why": "The cover image fades in over a quiet surface once it decodes, so a grid loading on a slow connection settles tile by tile instead of popping."
+        },
+        {
+          "slot": "response",
+          "recipe": "motion-interactive",
+          "part": "Cover",
+          "why": "Hovering the tile deepens the cover with a light scrim and lifts the action in (`reveal-on-hover`), so it is clear the whole tile is one target and where its action is."
+        },
+        {
+          "slot": "transition",
+          "recipe": "none",
+          "part": "root",
+          "why": "A tile has no states of its own to move between; the action carries any (play / pause)."
+        },
+        {
+          "slot": "activity",
+          "recipe": "none",
+          "part": "root",
+          "why": "Nothing runs inside a tile; a now-playing indicator belongs to the player, not the grid."
         }
       ],
-      "tokensUsed": [],
       "a11y": [
-        "Duplicate groups are aria-hidden, so screen readers read the content once.",
-        "Pauses on hover and focus-within; under prefers-reduced-motion / MotionProvider off it stops and becomes a normal scroll region.",
-        "Decorative by default — pass a label only when the row conveys meaning."
+        "No nested interactive content: the title is the tile's link, and its `stretched-link` overlay covers the tile, while the subtitle link and the action sit above it as separate controls.",
+        "Tab order is title → subtitle → action. The text comes first in the DOM and the cover is drawn above it with CSS `order`, so focus follows how a reader names the item.",
+        "Focusing the title link rings the whole tile, rounded like the cover, because the whole tile is what the link is; the subtitle link and the action ring themselves.",
+        "The action is hidden with opacity only, and only where the device can hover; it stays in the tab order and the accessibility tree, appears when anything in the tile has focus, and is always visible on touch.",
+        "The cover is decorative by default (`alt=\"\"`), since the title names the item; the fallback art is aria-hidden.",
+        "Truncated titles keep their full text in the link's accessible name and in a `title` tooltip."
       ],
       "examples": [
         {
-          "label": "Logo row",
-          "code": "<Marquee>{logos.map((l) => <img key={l.id} src={l.src} alt={l.name} className=\"h-8\" />)}</Marquee>",
-          "imports": "import { Marquee } from \"@sableui/react\""
+          "label": "Album grid",
+          "code": "<Grid minItemWidth=\"10rem\" gap={3}>\n\t{albums.map((album) => (\n\t\t<MediaTile\n\t\t\tkey={album.id}\n\t\t\ttitle={album.title}\n\t\t\tsubtitle={album.artist}\n\t\t\tsrc={album.cover}\n\t\t\trender={<Link to={`/albums/${album.id}`} />}\n\t\t\tsubtitleRender={<Link to={`/artists/${album.artistId}`} />}\n\t\t\taction={\n\t\t\t\t<Button size=\"icon\" aria-label={`Play ${album.title}`} onClick={() => play(album)}>\n\t\t\t\t\t<Icon name=\"play\" variant=\"solid\" />\n\t\t\t\t</Button>\n\t\t\t}\n\t\t/>\n\t))}\n</Grid>",
+          "imports": "import { Button, Grid, Icon, MediaTile } from \"@sableui/react\"\n// <Link> = your router's link (react-router, next/link, @tanstack/router, …)"
         },
         {
-          "label": "Reverse, faster",
-          "code": "<Marquee direction=\"right\" speed={70}>{tags.map((t) => <Badge key={t} appearance=\"outline\">{t}</Badge>)}</Marquee>",
-          "imports": "import { Badge, Marquee } from \"@sableui/react\""
+          "label": "Video tile with a duration",
+          "code": "<MediaTile\n\taspect=\"video\"\n\ttitle=\"Building a synth from scratch\"\n\tsubtitle=\"Undertow Sessions · 2 days ago\"\n\tsrc={video.thumbnail}\n\thref={`/watch/${video.id}`}\n\tbadge={<Badge appearance=\"overlay\">12:04</Badge>}\n/>",
+          "imports": "import { Badge, MediaTile } from \"@sableui/react\""
         },
         {
-          "label": "Vertical",
-          "code": "<Marquee direction=\"up\" className=\"h-64\">{items}</Marquee>",
-          "imports": "import { Marquee } from \"@sableui/react\""
+          "label": "Gallery, no links",
+          "code": "<Grid minItemWidth=\"8rem\" gap={2}>\n\t{photos.map((photo) => (\n\t\t<MediaTile key={photo.id} size=\"sm\" title={photo.caption} src={photo.url} alt={photo.description} />\n\t))}\n</Grid>",
+          "imports": "import { Grid, MediaTile } from \"@sableui/react\""
+        },
+        {
+          "label": "Poster shelf",
+          "code": "<MediaTile aspect=\"poster\" size=\"lg\" titleAs=\"h3\" title=\"The Long Dark\" subtitle=\"2026 · Drama\" href=\"/films/the-long-dark\" />",
+          "imports": "import { MediaTile } from \"@sableui/react\""
         }
       ]
     },
@@ -11856,6 +12848,10 @@
             "guidance": "dont",
             "description": "Do not use PageHeader inside repeated cards, dialogs, or compact panels."
           },
+          {
+            "guidance": "dont",
+            "description": "Do not use a second PageHeader for a section of the page. It is the route's one h1; each section below it takes a SectionHeader (an h2 with the same title row, description and actions)."
+          },
           {
             "guidance": "dont",
             "description": "Do not put it outside the Region that holds the page content. It then sits at a different measure from what it introduces, and the page reads as two documents."
@@ -11865,6 +12861,7 @@
       "related": {
         "components": [
           "AppHeader",
+          "SectionHeader",
           "Breadcrumbs",
           "Button"
         ]
@@ -11883,12 +12880,12 @@
         {
           "name": "back",
           "type": "ReactNode",
-          "description": "Leading element before the title — typically a back control on drill-in routes. Keep it a ghost icon Button (size=\"icon\", variant=\"ghost\", aria-label=\"Back\") so it stays quieter than the title."
+          "description": "Leading element before the title — typically a back control on drill-in routes. Keep it a ghost icon Button (size=\"icon\", variant=\"ghost\", aria-label=\"Back\") so it stays quieter than the title. A ghost back control bleeds by its inset at the start, so its glyph lines up with the content edge below (Button bleed=\"none\" opts out)."
         },
         {
           "name": "actions",
           "type": "ReactNode",
-          "description": "Trailing actions aligned to the title row's end. They drop under the title when the row runs out of room, and the title wraps rather than truncating."
+          "description": "Trailing actions aligned to the title row's end. They drop under the title when the row runs out of room, and the title wraps rather than truncating. A ghost or link Button at either end of the group bleeds by its own padding, so its label meets the content edge (the end on the title row, the start once wrapped); filled buttons keep their edge on the line. Direct children only."
         },
         {
           "name": "titleAs",
@@ -11913,7 +12910,7 @@
         },
         {
           "label": "One per page, inside the region",
-          "code": "// PageHeader introduces the current route: title, optional description, and the\n// actions that act on THIS page.\n\n<Region max=\"content\">\n  <PageHeader\n    title=\"Invoices\"\n    description=\"Every charge on this account.\"\n    actions={<Button>Export</Button>}\n  />\n  <p className=\"text-body-md text-muted-foreground\">Page content.</p>\n</Region>\n\n// ✗ Outside the Region. The header then sits at a different measure from the\n//   content it introduces, and the page reads as two documents.\n// ✗ Two on one page. A second one is a section heading — an h2 in a\n//   smaller step (text-heading-3 or below), not another PageHeader.\n// ✗ Global actions in it (account, search). Those persist across routes and\n//   belong in AppHeader.",
+          "code": "// PageHeader introduces the current route: title, optional description, and the\n// actions that act on THIS page.\n\n<Region max=\"content\">\n  <PageHeader\n    title=\"Invoices\"\n    description=\"Every charge on this account.\"\n    actions={<Button>Export</Button>}\n  />\n  <p className=\"text-body-md text-muted-foreground\">Page content.</p>\n</Region>\n\n// ✗ Outside the Region. The header then sits at a different measure from the\n//   content it introduces, and the page reads as two documents.\n// ✗ Two on one page. A second one is a section heading: a SectionHeader\n//   (an h2 on text-heading-3, same title row and actions), not another PageHeader.\n// ✗ Global actions in it (account, search). Those persist across routes and\n//   belong in AppHeader.",
           "imports": "import { Button, PageHeader, Region } from \"@sableui/react\""
         }
       ]
@@ -12589,8 +13586,8 @@
         },
         {
           "name": "centerLabel",
-          "type": "{ value: string; label?: string }",
-          "description": "A value and caption in the hole of a donut."
+          "type": "{ value: string | number; label?: string }",
+          "description": "A value and caption in the hole of a donut. The value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K, 102.1K, 1.2M); pass a string for units."
         },
         {
           "name": "separator",
@@ -12703,7 +13700,7 @@
       "examples": [
         {
           "label": "Donut with a total",
-          "code": "const sources = [\n\t{ source: \"Search\", visitors: 275 },\n\t{ source: \"Direct\", visitors: 200 },\n\t{ source: \"Social\", visitors: 187 },\n\t{ source: \"Email\", visitors: 90 },\n]\n\n<PieChart\n\tlabel=\"Visitors by source\"\n\tdata={sources}\n\tindex=\"source\"\n\tvalueKey=\"visitors\"\n\tdonut\n\tcenterLabel={{ value: \"752\", label: \"Visitors\" }}\n/>",
+          "code": "const sources = [\n\t{ source: \"Search\", visitors: 275 },\n\t{ source: \"Direct\", visitors: 200 },\n\t{ source: \"Social\", visitors: 187 },\n\t{ source: \"Email\", visitors: 90 },\n]\n\n<PieChart\n\tlabel=\"Visitors by source\"\n\tdata={sources}\n\tindex=\"source\"\n\tvalueKey=\"visitors\"\n\tdonut\n\tcenterLabel={{ value: 752, label: \"Visitors\" }}\n/>",
           "imports": "import { PieChart } from \"@sableui/react\""
         },
         {
@@ -13467,8 +14464,8 @@
         },
         {
           "name": "centerLabel",
-          "type": "{ value: string; label?: string }",
-          "description": "A value and caption in the middle."
+          "type": "{ value: string | number; label?: string }",
+          "description": "A value and caption in the middle. On a full ring the value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K); pass a string for units (\"7.2 GB\", \"72%\")."
         },
         {
           "name": "legend",
@@ -14285,46 +15282,232 @@
           "description": "Dims the control and blocks pointer interaction."
         },
         {
-          "name": "...props",
-          "type": "ComponentPropsWithRef<\"input\">",
-          "description": "All native input attributes (name, autoFocus, ref, aria-invalid, …) pass through to the <input> except value/onChange, which are owned by value/onValueChange, and className, which sizes the whole field."
+          "name": "...props",
+          "type": "ComponentPropsWithRef<\"input\">",
+          "description": "All native input attributes (name, autoFocus, ref, aria-invalid, …) pass through to the <input> except value/onChange, which are owned by value/onValueChange, and className, which sizes the whole field."
+        }
+      ],
+      "tokensUsed": [
+        "input",
+        "card",
+        "foreground",
+        "muted-foreground",
+        "ring",
+        "destructive"
+      ],
+      "a11y": [
+        "Renders a native <input type=\"search\"> — keyboard and form semantics come for free.",
+        "Associate a <label htmlFor> (or wrap) — the magnifier glyph is decorative, not a label.",
+        "The leading search Icon is pointer-events-none and purely decorative.",
+        "The clear button is a real <button> (Sable's ghost icon Button) with aria-label='Clear search' and a focus-visible ring. It is hidden while the field is disabled.",
+        "Focus-visible draws a 2px ring in the --ring token; aria-invalid raises the destructive border and ring."
+      ],
+      "examples": [
+        {
+          "label": "Controlled",
+          "code": "const [q, setQ] = useState(\"\")\n<SearchInput value={q} onValueChange={setQ} placeholder=\"Search posts\" />",
+          "imports": "import { SearchInput } from \"@sableui/react\""
+        },
+        {
+          "label": "With onClear",
+          "code": "<SearchInput value={q} onValueChange={setQ} onClear={() => console.log(\"cleared\")} />",
+          "imports": "import { SearchInput } from \"@sableui/react\""
+        },
+        {
+          "label": "Uncontrolled, sized as a whole",
+          "code": "<Field label=\"Search posts\"><SearchInput defaultValue=\"editions\" className=\"max-w-80\" /></Field>",
+          "imports": "import { Field, SearchInput } from \"@sableui/react\""
+        },
+        {
+          "label": "Disabled",
+          "code": "<SearchInput disabled placeholder=\"Search\" />",
+          "imports": "import { SearchInput } from \"@sableui/react\""
+        }
+      ]
+    },
+    {
+      "name": "SectionHeader",
+      "status": "stable",
+      "group": "Layout",
+      "register": "page",
+      "path": "components/section-header",
+      "summary": "The heading block for one section of a page: a title (h2 by default), an optional line of description, and actions on the title row — a \"View all\" link or a couple of buttons — that drop beneath the title only when the row runs out of room.",
+      "keywords": [
+        "section header",
+        "section heading",
+        "section title",
+        "shelf",
+        "view all",
+        "see all",
+        "show all",
+        "h2",
+        "subsection",
+        "optical alignment",
+        "bleed"
+      ],
+      "usage": {
+        "description": "Use SectionHeader to head each section below the page title — a home-page shelf with View all, a settings group, a list with its own actions. PageHeader is the route's single h1; every section under it takes a SectionHeader, with titleId wired to the section's aria-labelledby.",
+        "bestPractices": [
+          {
+            "guidance": "do",
+            "description": "Wrap the header and its content in a `<section aria-labelledby={titleId}>` (a flex column with a gap, or a Stack inside it) so the section is a named region and the header's title is its name."
+          },
+          {
+            "guidance": "do",
+            "description": "Pick titleAs by the document outline (h2 under the page h1, h3 inside an h2 section) and size by visual weight: md for a page's sections and shelves, sm for denser groups like settings."
+          },
+          {
+            "guidance": "do",
+            "description": "Keep actions to one or two `size=\"sm\"` buttons — the title is centred on that height. A shelf's \"View all\" is a ghost Button rendered as a link (`render={<a href=… />}`), named for what it opens when the label alone is ambiguous (aria-label=\"View all new releases\")."
+          },
+          {
+            "guidance": "do",
+            "description": "Pass a ghost or link action as a plain Button and let the header align it: the last direct child bleeds by its own padding at the end, so \"View all\" sits on the edge of the grid below, and the first bleeds at the start, which is the edge once the actions wrap beneath the title. Filled buttons keep their edge on the line. Set bleed=\"none\" on the Button to opt one out."
+          },
+          {
+            "guidance": "dont",
+            "description": "Nudge a View all onto the edge with -me-3, or wrap the actions in your own div: the header aligns direct children only, and only by each button's real padding. If you must wrap them, set bleed on the Button inside instead."
+          },
+          {
+            "guidance": "dont",
+            "description": "Use a second PageHeader for a section — that is a second h1, and the outline then reports two documents. And do not hand-build `<div className=\"flex justify-between\"><h2 className=\"text-heading-3\">…` per shelf: it misses the wrapping, the aria wiring and the shared rhythm."
+          },
+          {
+            "guidance": "dont",
+            "description": "Use SectionHeader to title a Card (use CardHeader + CardTitle) or a docked tool panel (use PanelSection). It heads a section of the page, not a surface."
+          },
+          {
+            "guidance": "dont",
+            "description": "Add margin to the header to space it from its content. It has no outer spacing on purpose; the section's gap owns that rhythm, so every section on the page keeps the same one."
+          }
+        ],
+        "anatomy": [
+          {
+            "name": "Title",
+            "required": true,
+            "description": "The section's heading (h2 by default), wrapping rather than truncating. Its id names the section."
+          },
+          {
+            "name": "Description",
+            "required": false,
+            "description": "One line of supporting copy under the title, capped at the prose measure."
+          },
+          {
+            "name": "Actions",
+            "required": false,
+            "description": "Buttons or links at the title row's end; they move beneath the title when the row is too narrow for both. A borderless (ghost/link) Button at either end of the group is optically aligned: its label, not its invisible padding, meets the content edge."
+          }
+        ]
+      },
+      "related": {
+        "components": [
+          "PageHeader",
+          "CardHeader",
+          "PanelSection",
+          "Grid",
+          "Stack",
+          "Button"
+        ],
+        "patterns": [
+          "SettingsPage",
+          "DashboardPage"
+        ]
+      },
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "description": "The section's title."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "description": "One line of supporting copy beneath the title, capped at the prose measure."
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "description": "Trailing actions on the title row — a View all link or a couple of buttons, size=\"sm\". They stay on the title's row and drop beneath it only when the row runs out of room; the title wraps rather than truncating. A ghost or link Button that ends the group bleeds by its padding at the end (and one that starts it, at the start — the edge once wrapped), so its label lines up with the content below; Button bleed=\"none\" opts out. Direct children only."
+        },
+        {
+          "name": "titleAs",
+          "type": "\"h2\" | \"h3\" | \"h4\"",
+          "default": "\"h2\"",
+          "description": "The heading element, chosen by the document outline: h2 for a section under the page's h1, h3 for a subsection inside one."
+        },
+        {
+          "name": "titleId",
+          "type": "string",
+          "description": "The title's id, so the section it heads can point at it: <section aria-labelledby={titleId}>. Generated when omitted."
+        },
+        {
+          "name": "size",
+          "type": "\"md\" | \"sm\"",
+          "default": "\"md\"",
+          "description": "Visual weight, independent of the heading level: md (text-heading-3) for a page's sections and shelves; sm (text-heading-4) for denser sets — settings groups, subsections."
+        }
+      ],
+      "variants": {
+        "size": [
+          "md",
+          "sm"
+        ]
+      },
+      "tokensUsed": [
+        "foreground",
+        "muted-foreground"
+      ],
+      "motion": [
+        {
+          "slot": "arrival",
+          "recipe": "none",
+          "part": "root",
+          "why": "A heading arrives with the section it names; animating it separately would make the section's title lag its content."
+        },
+        {
+          "slot": "response",
+          "recipe": "none",
+          "part": "root",
+          "why": "The header itself is not interactive; the Buttons passed as actions carry their own response."
+        },
+        {
+          "slot": "transition",
+          "recipe": "none",
+          "part": "root",
+          "why": "It has no states of its own to move between."
+        },
+        {
+          "slot": "activity",
+          "recipe": "none",
+          "part": "root",
+          "why": "It never does indeterminate work."
         }
       ],
-      "tokensUsed": [
-        "input",
-        "card",
-        "foreground",
-        "muted-foreground",
-        "ring",
-        "destructive"
-      ],
       "a11y": [
-        "Renders a native <input type=\"search\"> — keyboard and form semantics come for free.",
-        "Associate a <label htmlFor> (or wrap) — the magnifier glyph is decorative, not a label.",
-        "The leading search Icon is pointer-events-none and purely decorative.",
-        "The clear button is a real <button> (Sable's ghost icon Button) with aria-label='Clear search' and a focus-visible ring. It is hidden while the field is disabled.",
-        "Focus-visible draws a 2px ring in the --ring token; aria-invalid raises the destructive border and ring."
+        "Renders a real heading (h2 by default); choose titleAs by the outline, never to get a size — size sets the look.",
+        "The title always carries an id (titleId, or a generated one). Point the section at it with aria-labelledby so the section is announced as a named region and appears in landmark navigation.",
+        "A repeated \"View all\" is ambiguous in a links list; name each one for its section (aria-label=\"View all new releases\") or keep the visible label specific."
       ],
       "examples": [
         {
-          "label": "Controlled",
-          "code": "const [q, setQ] = useState(\"\")\n<SearchInput value={q} onValueChange={setQ} placeholder=\"Search posts\" />",
-          "imports": "import { SearchInput } from \"@sableui/react\""
+          "label": "A shelf with View all",
+          "code": "<section aria-labelledby=\"new-releases\" className=\"flex flex-col gap-4\">\n\t<SectionHeader\n\t\ttitleId=\"new-releases\"\n\t\ttitle=\"New releases\"\n\t\tdescription=\"Fresh from artists you follow.\"\n\t\tactions={\n\t\t\t<Button variant=\"ghost\" size=\"sm\" render={<a href=\"/new\" />} aria-label=\"View all new releases\">\n\t\t\t\tView all\n\t\t\t</Button>\n\t\t}\n\t/>\n\t<Grid minItemWidth=\"10rem\" gap={2}>\n\t\t<Card><CardHeader><CardTitle>Night Swim</CardTitle><CardDescription>Lena Vale</CardDescription></CardHeader></Card>\n\t\t<Card><CardHeader><CardTitle>Low Tide</CardTitle><CardDescription>Harbour Lights</CardDescription></CardHeader></Card>\n\t</Grid>\n</section>",
+          "imports": "import { Button, Card, CardDescription, CardHeader, CardTitle, Grid, SectionHeader } from \"@sableui/react\""
         },
         {
-          "label": "With onClear",
-          "code": "<SearchInput value={q} onValueChange={setQ} onClear={() => console.log(\"cleared\")} />",
-          "imports": "import { SearchInput } from \"@sableui/react\""
+          "label": "A settings section",
+          "code": "<section aria-labelledby=\"playback\" className=\"flex flex-col gap-4\">\n\t<SectionHeader\n\t\ttitleId=\"playback\"\n\t\tsize=\"sm\"\n\t\ttitle=\"Playback\"\n\t\tdescription=\"How tracks start, end and blend into each other.\"\n\t/>\n\t<Field label=\"Crossfade\" orientation=\"horizontal\">\n\t\t<Switch defaultChecked />\n\t</Field>\n\t<Field label=\"Normalize volume\" orientation=\"horizontal\">\n\t\t<Switch />\n\t</Field>\n</section>",
+          "imports": "import { Field, SectionHeader, Switch } from \"@sableui/react\""
         },
         {
-          "label": "Uncontrolled, sized as a whole",
-          "code": "<Field label=\"Search posts\"><SearchInput defaultValue=\"editions\" className=\"max-w-80\" /></Field>",
-          "imports": "import { Field, SearchInput } from \"@sableui/react\""
+          "label": "A section with two actions",
+          "code": "<section aria-labelledby=\"playlists\" className=\"flex flex-col gap-4\">\n\t<SectionHeader\n\t\ttitleId=\"playlists\"\n\t\ttitle=\"Your playlists\"\n\t\tactions={\n\t\t\t<>\n\t\t\t\t<Button variant=\"ghost\" size=\"sm\" iconStart={<Icon name=\"filter\" />}>Filter</Button>\n\t\t\t\t<Button size=\"sm\" iconStart={<Icon name=\"plus\" />}>New playlist</Button>\n\t\t\t</>\n\t\t}\n\t/>\n\t<Stack gap={1}>\n\t\t<Entity className=\"[--entity-px:0]\" title=\"Late drives\" subtitle=\"42 tracks\" />\n\t\t<Entity className=\"[--entity-px:0]\" title=\"Focus\" subtitle=\"18 tracks\" />\n\t</Stack>\n</section>",
+          "imports": "import { Button, Entity, Icon, SectionHeader, Stack } from \"@sableui/react\""
         },
         {
-          "label": "Disabled",
-          "code": "<SearchInput disabled placeholder=\"Search\" />",
-          "imports": "import { SearchInput } from \"@sableui/react\""
+          "label": "A subsection inside a section",
+          "code": "<SectionHeader titleAs=\"h3\" size=\"sm\" title=\"Appears on\" />",
+          "imports": "import { SectionHeader } from \"@sableui/react\""
         }
       ]
     },
@@ -15036,6 +16219,11 @@
             "required": false,
             "description": "Supporting context for the sheet."
           },
+          {
+            "name": "SheetList",
+            "required": false,
+            "description": "Edge-to-edge rows (Entity) aligned with the header — a queue, notifications, a picker."
+          },
           {
             "name": "SheetFooter",
             "required": false,
@@ -15088,6 +16276,11 @@
           "type": "Base UI Drawer.Description props + className",
           "description": "Muted supporting line; wires aria-describedby."
         },
+        {
+          "name": "SheetList",
+          "type": "ComponentProps<\"div\">",
+          "description": "Rows that run edge to edge in the sheet, Entity most often. It bleeds through the sheet's padding (--sheet-p) and hands it back to each row as --entity-px, so row content lines up with SheetHeader and a row's hover fill reaches the panel's edges. Without it a list of Entity rows sits 12px in from the header. The Sheet equivalent of CardList."
+        },
         {
           "name": "SheetFooter",
           "type": "ComponentProps<\"div\">",
@@ -15119,6 +16312,11 @@
         "A mouse drag that starts on sheet content selects text rather than dragging the panel; mouse dragging only starts from the padding edge."
       ],
       "examples": [
+        {
+          "label": "List of rows (a queue)",
+          "code": "<Sheet><SheetTrigger render={<Button variant=\"secondary\">Queue</Button>} /><SheetContent><SheetHeader><SheetTitle>Up next</SheetTitle></SheetHeader><SheetList>{queue.map((track) => <Entity key={track.id} leading={<GradientArt aria-hidden seed={track.title} className=\"size-10 rounded-sm\" />} title={track.title} subtitle={track.artist} />)}</SheetList></SheetContent></Sheet>",
+          "imports": "import { Button, Entity, GradientArt, Sheet, SheetContent, SheetHeader, SheetList, SheetTitle, SheetTrigger } from \"@sableui/react\""
+        },
         {
           "label": "Basic (right)",
           "code": "<Sheet><SheetTrigger render={<Button>Open</Button>} /><SheetContent><SheetHeader><SheetTitle>Filters</SheetTitle><SheetDescription>Narrow the feed.</SheetDescription></SheetHeader><SheetFooter><SheetClose render={<Button variant=\"secondary\">Cancel</Button>} /><SheetClose render={<Button>Apply</Button>} /></SheetFooter></SheetContent></Sheet>",
@@ -15226,7 +16424,7 @@
       "group": "Navigation",
       "register": "page",
       "path": "components/sidebar",
-      "summary": "Desktop side-navigation rail (in-flow sticky, hidden below lg) with SidebarHeader / SidebarNav / SidebarItem / SidebarFooter parts. Items are router-agnostic via the `render` prop; an optional collapsed icon-rail mode reveals labels in tooltips.",
+      "summary": "Desktop side-navigation rail (in-flow sticky, hidden below lg) with SidebarHeader / SidebarBrand / SidebarNav / SidebarItem / SidebarFooter parts. Items are router-agnostic via the `render` prop; an optional collapsed icon-rail mode reveals labels in tooltips.",
       "keywords": [
         "sidebar",
         "navigation",
@@ -15294,6 +16492,11 @@
         }
       ],
       "subcomponents": [
+        {
+          "name": "SidebarBrand",
+          "type": "{ mark: ReactNode; label: ReactNode; render?: useRender.RenderProp } + div props",
+          "description": "The brand row, inside SidebarHeader, on the same grid as SidebarItem: mark in the icons' 24px slot, label on the labels' column, so a logo lines up with the nav below it without copying the rail's inset numbers. Collapsed, it shows the mark alone (named by a string label). render={<Link to=\"/\" />} makes it the home link."
+        },
         {
           "name": "SidebarItem",
           "type": "{ label: ReactNode; icon?: ReactNode; active?: boolean; badge?: ReactNode; render?: useRender.RenderProp } + button props",
@@ -15323,8 +16526,8 @@
       "examples": [
         {
           "label": "Rail with nav",
-          "code": "<Sidebar><SidebarHeader>{brand}</SidebarHeader><SidebarNav><SidebarItem icon={<Icon name=\"bell\" />} label=\"Notifications\" badge={<NotificationBadge count={3} />} render={<Link to=\"/notifications\" />} /></SidebarNav><SidebarFooter>{wallet}</SidebarFooter></Sidebar>",
-          "imports": "import { Icon, NotificationBadge, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav } from \"@sableui/react\"\n// <Link> = your router's link (react-router, next/link, @tanstack/router, …)"
+          "code": "<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name=\"music\" variant=\"solid\" />} label=\"Undertow\" render={<Link to=\"/\" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name=\"bell\" />} label=\"Notifications\" badge={<NotificationBadge count={3} />} render={<Link to=\"/notifications\" />} /></SidebarNav><SidebarFooter>{wallet}</SidebarFooter></Sidebar>",
+          "imports": "import { Icon, NotificationBadge, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav } from \"@sableui/react\"\n// <Link> = your router's link (react-router, next/link, @tanstack/router, …)"
         },
         {
           "label": "Collapsible (icon rail)",
@@ -15707,6 +16910,24 @@
           "type": "'horizontal' | 'vertical'",
           "default": "horizontal",
           "description": "Axis the slider tracks along. A vertical slider has no intrinsic length — give it a height (h-40, or flex-1 in a column)."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": "—",
+          "description": "Accessible name, applied to each thumb's input (the element with role=slider). A range also names its group with it."
+        },
+        {
+          "name": "getAriaLabel",
+          "type": "(index) => string",
+          "default": "—",
+          "description": "Per-thumb name for a range (\"Minimum price\" / \"Maximum price\"). Wins over aria-label on the thumbs."
+        },
+        {
+          "name": "getAriaValueText",
+          "type": "(formattedValue, value, index) => string",
+          "default": "—",
+          "description": "What a screen reader announces for the value when the number alone is wrong — a seek bar's \"1:23 of 3:45\". For units or percent, `format` (Intl.NumberFormatOptions) is enough."
         }
       ],
       "subcomponents": [
@@ -15753,7 +16974,8 @@
         "The thumb's hit area is a fixed 16px box at every state. Only the decorative inner dot resizes — rest 12px, full 16px on hover, keyboard focus, and drag — so the target a pointer or finger must land on never moves or changes size. Keyboard users, who never hover, get the enlarged dot from focus-visible.",
         "The rest-to-full transition uses the motion duration/easing tokens, so it collapses to an instant state change under prefers-reduced-motion or MotionProvider off. The size change itself still happens: it reports interaction state, it is not decoration.",
         "Range sliders get one thumb per value with minStepsBetweenValues honored.",
-        "Pass an aria-label (or getAriaLabel on a thumb) so each handle has an accessible name."
+        "Pass aria-label (or getAriaLabel for a range) so each handle has an accessible name. On Slider it reaches the thumb inputs; on a bare SliderRoot it only names the role=group — when composing, put aria-label / getAriaLabel on each SliderThumb, or label the Root with aria-labelledby or a Field, which Base UI does carry to the thumbs.",
+        "getAriaValueText sets aria-valuetext for values a number misreads (time, named steps)."
       ],
       "examples": [
         {
@@ -15763,7 +16985,12 @@
         },
         {
           "label": "Range",
-          "code": "const [range, setRange] = useState([20, 60])\n<Slider value={range} onValueChange={setRange} aria-label=\"Price range\" />",
+          "code": "const [range, setRange] = useState([20, 60])\n<Slider value={range} onValueChange={setRange} aria-label=\"Price range\" getAriaLabel={(i) => (i ? \"Maximum price\" : \"Minimum price\")} />",
+          "imports": "import { Slider } from \"@sableui/react\""
+        },
+        {
+          "label": "Seek bar with spoken time",
+          "code": "<Slider value={position} max={duration} onValueChange={seek} aria-label=\"Seek\" getAriaValueText={(_, v) => `${formatTime(v)} of ${formatTime(duration)}`} />",
           "imports": "import { Slider } from \"@sableui/react\""
         },
         {
@@ -17211,7 +18438,7 @@
       "group": "Selection",
       "register": "either",
       "path": "components/theme-selector",
-      "summary": "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. Pair it with useSableTheme().themeId and setThemeId when the app uses SableThemeProvider.",
+      "summary": "A presentational radiogroup for choosing a Sable design theme from theme manifests — tiles that draw each theme as a miniature of its own interface (its colours, type and corner shape) for a settings page, or compact rows for tool chrome. Pair it with useSableTheme().themeId and setThemeId when the app uses SableThemeProvider.",
       "keywords": [
         "theme selector",
         "theme",
@@ -17221,16 +18448,20 @@
         "preset"
       ],
       "usage": {
-        "description": "Use ThemeSelector wherever a person picks a theme. The default `cards` layout is page-register furniture: a swatch strip, a name, and a caption only where one distinguishes the card (the default theme, or a single-mode theme), at ~144px tall. Use `layout=\"list\"` in tool chrome, a popover, or any docked panel — five cards is the wrong object for a 256px surface, however it is sized. For colour mode (light/dark/system) use ThemeSwitcher, which is a segmented control and belongs in chrome as-is.",
+        "description": "Use ThemeSelector wherever a person picks a theme. The default `cards` layout is page-register furniture: a miniature of each theme's interface (its background, \"Aa\" in its display face, a card, and a primary button in its own corner shape), with the name and a caption only where one distinguishes it (the default theme, or a single-mode theme). Use `layout=\"list\"` in tool chrome, a popover, or any docked panel — five cards is the wrong object for a 256px surface, however it is sized. For colour mode (light/dark/system) use ThemeSwitcher, which is a segmented control and belongs in chrome as-is.",
         "bestPractices": [
           {
             "guidance": "do",
-            "description": "Use layout=\"list\" in a popover, a menu, or a docked panel. Rows sit on the --control-sm ladder and still show each theme's swatch strip, so the choice stays visible rather than described. Rows take `sable-frame-inner`, so host the list in a sable-frame (`sable-frame sable-surface sable-surface-popover sable-frame-popover` — PopoverContent is not one; give it that class list, or its p-4 leaves the rows unnested) and their corners nest concentrically."
+            "description": "Use layout=\"list\" in a popover, a menu, or a docked panel. Rows sit on the --control-sm ladder and still show a small tile of each theme, so the choice stays visible rather than described. Rows take `sable-frame-inner`, so host the list in a sable-frame (`sable-frame sable-surface sable-surface-popover sable-frame-popover` — PopoverContent is not one; give it that class list, or its p-4 leaves the rows unnested) and their corners nest concentrically."
           },
           {
             "guidance": "do",
             "description": "Pass mode={useSableTheme().mode} so every preview renders in the colour mode actually in use, rather than in each theme's manifest default."
           },
+          {
+            "guidance": "do",
+            "description": "Use ThemeSelector when switching is free: it is a radio group, so arrow keys check the next theme and onValueChange fires on every press — the page restyles as you go, which is the point of a live theme switcher. When a switch has a cost (it opens a \"discard changes?\" confirm, loads fonts, or resets other settings), use a DisclosurePicker list instead, with a `ThemePreview size=\"sm\"` as each option's `media`: arrows only move there, and Enter, Space or a click commits."
+          },
           {
             "guidance": "do",
             "description": "Load each theme's fonts in the host app. Every card carries a type specimen in that theme's own face so people can compare typography as well as color. A theme whose fonts are not loaded falls back to system-ui, and its specimen stops telling the truth."
@@ -17247,6 +18478,18 @@
             "guidance": "dont",
             "description": "Use ThemeSelector for light / dark / system colour mode. That is ThemeSwitcher — a segmented control. This picks the design theme, which is a different axis entirely, and the two are frequently confused."
           }
+        ],
+        "anatomy": [
+          {
+            "name": "ThemeSelector",
+            "required": true,
+            "description": "The radiogroup of themes, as cards or list rows."
+          },
+          {
+            "name": "ThemePreview",
+            "required": false,
+            "description": "The tile each option draws, exported for showing a theme outside the picker — the row naming the current theme, or the `media` of each option in a commit-on-Enter DisclosurePicker list."
+          }
         ]
       },
       "related": {
@@ -17276,7 +18519,7 @@
         {
           "name": "mode",
           "type": "\"light\" | \"dark\"",
-          "description": "Preview mode for each card's swatch strip. Pass useSableTheme().mode to match the current color mode; omitted cards use their manifest defaultMode."
+          "description": "Preview mode for each theme's tile. Pass useSableTheme().mode to match the current color mode; omitted cards use their manifest defaultMode."
         },
         {
           "name": "label",
@@ -17296,6 +18539,13 @@
           "description": "Merged onto the outer radiogroup grid."
         }
       ],
+      "subcomponents": [
+        {
+          "name": "ThemePreview",
+          "type": "{ theme: ThemeManifest; mode?: \"light\" | \"dark\"; size?: \"md\" | \"sm\" }",
+          "description": "The tile each option draws: the theme as a miniature of itself (background, \"Aa\" in its display face, a card, a primary button in its own corner shape), in its own scope. Exported for anywhere that shows a theme outside the picker, e.g. a row naming the current preset, or each option of a DisclosurePicker list where a pick has a cost. Sized in the caller's spacing unit, so it lines up with the row it sits in."
+        }
+      ],
       "tokensUsed": [
         "input",
         "card",
@@ -17310,11 +18560,17 @@
       ],
       "a11y": [
         "The container is role=\"radiogroup\" with an aria-label; each card is a role=\"radio\" button with aria-checked reflecting the selected theme.",
+        "Standard radio keyboard: arrow keys move the check — calling onValueChange on each press — and Space checks the focused option. That instant switching is right for a free, reversible choice; where a switch has a cost, use a DisclosurePicker list (a listbox: arrows move, Enter commits) with ThemePreview tiles instead.",
         "Focus-visible draws a 2px ring on the focused card.",
         "The selected card wears the shared selection-card checked ring (the same as RadioCard and CheckboxCard), a muted fill and a check icon, so selection does not rely on colour alone.",
         "Presentational only: it does not change the document theme; pass useSableTheme().setThemeId or apply the change in onValueChange."
       ],
       "examples": [
+        {
+          "label": "When a switch has a cost: a DisclosurePicker list of ThemePreview tiles",
+          "code": "// Arrows move; Enter, Space or a click commits — so whatever the switch costs\n// (a confirm, a font load, a reset) happens once, on the pick.\nconst { themeId, setThemeId, themes, mode } = useSableTheme()\nconst current = themes.find((theme) => theme.id === themeId)\n<DisclosurePicker>\n  <DisclosurePickerTrigger aria-label={`Theme: ${current?.label}`} media={current ? <ThemePreview theme={current} mode={mode} size=\"sm\" /> : null}>\n    {current?.label}\n  </DisclosurePickerTrigger>\n  <DisclosurePickerPanel>\n    <DisclosurePickerList aria-label=\"Theme\" value={themeId} onValueChange={setThemeId}>\n      {themes.map((theme) => (\n        <DisclosurePickerOption key={theme.id} value={theme.id} media={<ThemePreview theme={theme} mode={mode} size=\"sm\" />}>\n          {theme.label}\n        </DisclosurePickerOption>\n      ))}\n    </DisclosurePickerList>\n  </DisclosurePickerPanel>\n</DisclosurePicker>",
+          "imports": "import { DisclosurePicker, DisclosurePickerList, DisclosurePickerOption, DisclosurePickerPanel, DisclosurePickerTrigger, ThemePreview, useSableTheme } from \"@sableui/react\""
+        },
         {
           "label": "With SableThemeProvider",
           "code": "const { themeId, setThemeId, themes, mode } = useSableTheme()\n<ThemeSelector value={themeId} onValueChange={setThemeId} themes={themes} mode={mode} />",
@@ -18466,7 +19722,7 @@
           },
           {
             "guidance": "do",
-            "description": "Put mutable per-row state (visibility, solo, a row menu) in `actions`, on the right rail. Show it on hover, and at rest only when its value is the non-default one."
+            "description": "Put mutable per-row state (visibility, solo, a row menu) in `actions`, on the right rail. Show it on hover with `reveal-on-hover` (the row is its `group`), and at rest only when its value is the non-default one."
           },
           {
             "guidance": "do",
@@ -18591,7 +19847,7 @@
         {
           "name": "disclosureIcon",
           "type": "ReactNode",
-          "description": "Replaces TreeRow's semantic chevron-down icon. Omit to use the current IconProvider set or Reicon by default."
+          "description": "Replaces TreeRow's semantic chevron-down icon. Omit to use the chevron-down from the app's IconProvider set."
         },
         {
           "name": "actions",
@@ -18646,7 +19902,7 @@
         "Each treeitem is named by its own label (aria-labelledby the name), never by the text of its icon or action buttons.",
         "The disclosure is a real button with aria-expanded and a label naming what it discloses, and it stops propagation so collapsing a group never changes the selection. Inside a Tree the treeitem carries aria-expanded and the arrow keys, so the button becomes a pointer target only: aria-hidden, out of the tab order, and it leaves focus where it was when clicked.",
         "The disclosure's POINTER TARGET is bigger than the mark it draws. `--tree-column` is 20px comfortable and 18px compact, both under WCAG 2.5.8's 24x24 floor, so a centred pseudo-element takes the hit at `--control-xs` (28/24) instead. The drawn box stays on the column, because that column is also the indent step — growing the button would push every name in the tree one column right.",
-        "Right-rail actions stay in the tab order, so a row with actions costs extra Tab stops. Keep actions few and show them on hover and focus-visible.",
+        "Right-rail actions stay in the tab order, so a row with actions costs extra Tab stops. Keep actions few and reveal them with `reveal-on-hover`, which also shows them on focus and always on touch.",
         "`dimmed` is presentation only. A row switched off must also say so in its actions' aria-pressed or its accessible name; opacity alone is invisible to a screen reader and fails contrast.",
         "Right-rail controls that appear on hover must also appear on focus-visible, or they are unreachable by keyboard."
       ],
@@ -19055,8 +20311,8 @@
           "Each sell-through Meter has an aria-label naming the edition and aria-valuetext reading \"184 of 250 sold\".",
           "Avatars beside a visible name use an empty alt so the name is not read twice."
         ],
-        "imports": "import { AppHeader, AppShell, Avatar, Badge, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, DataTable, Entity, Grid, Icon, MenuItem, MenuSeparator, Meter, NotificationBadge, OverflowMenu, Page, PageHeader, RelativeTime, Row, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Stack } from \"@sableui/react\"",
-        "code": "// Edition status → Badge tone. Sable has no status vocabulary of its own;\n// an app maps ITS states onto tones once, here, and every badge follows.\nconst STATUS_TONE = { live: \"success\", scheduled: \"info\", \"sold-out\": \"edition\", closed: \"neutral\" } as const\nconst STATUS_LABEL = { live: \"Live\", scheduled: \"Scheduled\", \"sold-out\": \"Sold out\", closed: \"Closed\" } as const\ntype EditionStatus = keyof typeof STATUS_TONE\n\nconst MIN = 60 * 1000\nconst HOUR = 60 * MIN\nconst DAY = 24 * HOUR\n\nconst usd = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 })\nconst usdCents = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" })\nconst shortDate = (offset: number) =>\n\tnew Date(Date.now() + offset).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })\n\nconst stats = [\n\t{ label: \"Revenue\", value: \"$18,240\", delta: \"+8.2%\", up: true, note: \"vs. $16,857\" },\n\t{ label: \"Collects\", value: \"1,284\", delta: \"+3.1%\", up: true, note: \"182 first-time\" },\n\t{ label: \"Collectors\", value: \"312\", delta: \"+12.4%\", up: true, note: \"Best month yet\" },\n\t{ label: \"Sell-through\", value: \"64%\", delta: \"−1.8%\", up: false, note: \"6 open editions\" },\n]\n\nconst editions = [\n\t{ id: \"ed_01\", title: \"Gold Rush\", status: \"live\" as const, sold: 184, supply: 250, price: 48, released: -6 * DAY },\n\t{ id: \"ed_02\", title: \"Quiet Harbor\", status: \"sold-out\" as const, sold: 100, supply: 100, price: 120, released: -19 * DAY },\n\t{ id: \"ed_03\", title: \"Dusk, no. 4\", status: \"live\" as const, sold: 61, supply: 150, price: 64, released: -2 * DAY },\n\t{ id: \"ed_04\", title: \"Tidewater\", status: \"live\" as const, sold: 212, supply: 300, price: 36, released: -27 * DAY },\n\t{ id: \"ed_05\", title: \"Salt Study\", status: \"closed\" as const, sold: 38, supply: 75, price: 90, released: -44 * DAY },\n\t{ id: \"ed_06\", title: \"Paper Moon\", status: \"sold-out\" as const, sold: 50, supply: 50, price: 220, released: -58 * DAY },\n\t{ id: \"ed_07\", title: \"Night Signal\", status: \"scheduled\" as const, sold: 0, supply: 200, price: 56, released: 3 * DAY },\n\t{ id: \"ed_08\", title: \"Low Tide, Blue\", status: \"closed\" as const, sold: 72, supply: 120, price: 42, released: -71 * DAY },\n\t{ id: \"ed_09\", title: \"Ember Field\", status: \"sold-out\" as const, sold: 80, supply: 80, price: 140, released: -86 * DAY },\n]\nconst editionCount = 24\n\nconst payout = {\n\tamount: 8214.6,\n\tdate: 5 * DAY,\n\tlines: [\n\t\t{ label: \"Sales\", value: 9127.33 },\n\t\t{ label: \"Platform fee (10%)\", value: -912.73 },\n\t\t{ label: \"Deposits to\", value: \"Checking ••4821\" },\n\t],\n}\n\nconst collectors = [\n\t{ id: \"co_01\", name: \"Nina Simone\", handle: \"@nina\", initials: \"NS\", pieces: 14, spent: 1460 },\n\t{ id: \"co_02\", name: \"Grace Hopper\", handle: \"@grace\", initials: \"GH\", pieces: 11, spent: 1128 },\n\t{ id: \"co_03\", name: \"Frida Kahlo\", handle: \"@frida\", initials: \"FK\", pieces: 9, spent: 942 },\n\t{ id: \"co_04\", name: \"Mary Shelley\", handle: \"@mary\", initials: \"MS\", pieces: 6, spent: 588 },\n]\n\nconst upcoming = [\n\t{ id: \"up_01\", title: \"Night Signal\", detail: \"Edition of 200 · $56\", at: 3 * DAY },\n\t{ id: \"up_02\", title: \"Tidewater, second printing\", detail: \"Edition of 100 · $40\", at: 12 * DAY },\n\t{ id: \"up_03\", title: \"Dusk, no. 5\", detail: \"Edition of 150 · $64\", at: 26 * DAY },\n\t{ id: \"up_04\", title: \"Quiet Harbor, artist proofs\", detail: \"Edition of 10 · $480\", at: 34 * DAY },\n]\n\nconst activity = [\n\t{ id: \"ac_01\", who: \"Nina Simone\", initials: \"NS\", what: \"collected Gold Rush · 185 of 250\", when: 2 * MIN },\n\t{ id: \"ac_02\", who: \"Grace Hopper\", initials: \"GH\", what: \"collected Dusk, no. 4 · 61 of 150\", when: 26 * MIN },\n\t{ id: \"ac_03\", who: \"Frida Kahlo\", initials: \"FK\", what: \"tipped $20 on Tidewater\", when: 1 * HOUR },\n\t{ id: \"ac_04\", who: \"Mary Shelley\", initials: \"MS\", what: \"started following you\", when: 3 * HOUR },\n\t{ id: \"ac_05\", who: \"Nina Simone\", initials: \"NS\", what: \"set a reminder for Night Signal\", when: 6 * HOUR },\n]\n\nexport function DashboardPage() {\n\treturn (\n\t\t<AppShell\n\t\t\t// Sidebar hides below lg, so the same destinations ride in the shell's\n\t\t\t// mobile slots — without them the route has no navigation under 1024px.\n\t\t\theader={\n\t\t\t\t<AppHeader\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Row gap={1} align=\"center\">\n\t\t\t\t\t\t\t<Icon name=\"gem\" variant=\"solid\" className=\"text-xl\" />\n\t\t\t\t\t\t\t<span className=\"text-title-sm\">Atelier</span>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t}\n\t\t\t\t\tactions={<Avatar variant=\"art\" size=\"sm\" fallback=\"AL\" alt=\"Ada Lovelace\" />}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tbottomNav={\n\t\t\t\t<BottomNav aria-label=\"Primary\">\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"grid\" />} label=\"Overview\" showLabel active render={<a href=\"/\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"image-stack\" />} label=\"Editions\" showLabel render={<a href=\"/editions\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"user\" />} label=\"Collectors\" showLabel render={<a href=\"/collectors\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"bell\" />} label=\"Activity\" showLabel render={<a href=\"/activity\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"gear\" />} label=\"Settings\" showLabel render={<a href=\"/settings\" />} />\n\t\t\t\t</BottomNav>\n\t\t\t}\n\t\t\tsidebar={\n\t\t\t\t<Sidebar>\n\t\t\t\t\t<SidebarHeader>\n\t\t\t\t\t\t<Row gap={1} align=\"center\" className=\"px-3\">\n\t\t\t\t\t\t\t<Icon name=\"gem\" variant=\"solid\" className=\"text-xl\" />\n\t\t\t\t\t\t\t<span className=\"text-title-sm\">Atelier</span>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</SidebarHeader>\n\t\t\t\t\t<SidebarNav>\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"grid\" />} label=\"Overview\" active render={<a href=\"/\" />} />\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"image-stack\" />} label=\"Editions\" render={<a href=\"/editions\" />} />\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"user\" />} label=\"Collectors\" render={<a href=\"/collectors\" />} />\n\t\t\t\t\t\t<SidebarItem\n\t\t\t\t\t\t\ticon={<Icon name=\"bell\" />}\n\t\t\t\t\t\t\tlabel=\"Activity\"\n\t\t\t\t\t\t\tbadge={<NotificationBadge count={4} tone=\"neutral\" />}\n\t\t\t\t\t\t\trender={<a href=\"/activity\" />}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"gear\" />} label=\"Settings\" render={<a href=\"/settings\" />} />\n\t\t\t\t\t</SidebarNav>\n\t\t\t\t\t<SidebarFooter>\n\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\tclassName=\"[--entity-py:0]\"\n\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" size=\"sm\" fallback=\"AL\" alt=\"\" />}\n\t\t\t\t\t\t\ttitle=\"Ada Lovelace\"\n\t\t\t\t\t\t\tsubtitle=\"@ada\"\n\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t<OverflowMenu label=\"Account\" size=\"icon-sm\">\n\t\t\t\t\t\t\t\t\t<MenuItem render={<a href=\"/@ada\" />}>View profile</MenuItem>\n\t\t\t\t\t\t\t\t\t<MenuItem render={<a href=\"/settings\" />}>Settings</MenuItem>\n\t\t\t\t\t\t\t\t\t<MenuSeparator />\n\t\t\t\t\t\t\t\t\t<MenuItem>Sign out</MenuItem>\n\t\t\t\t\t\t\t\t</OverflowMenu>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SidebarFooter>\n\t\t\t\t</Sidebar>\n\t\t\t}\n\t\t>\n\t\t\t<Page max=\"wide\" gap={4} className=\"py-6\">\n\t\t\t\t<PageHeader\n\t\t\t\t\ttitle=\"Overview\"\n\t\t\t\t\tdescription=\"Sales and collector activity for the last 30 days.\"\n\t\t\t\t\tactions={\n\t\t\t\t\t\t<Row gap={2}>\n\t\t\t\t\t\t\t<Button variant=\"outline\">\n\t\t\t\t\t\t\t\t<Icon name=\"download\" />\n\t\t\t\t\t\t\t\tExport\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button>\n\t\t\t\t\t\t\t\t<Icon name=\"plus\" />\n\t\t\t\t\t\t\t\tNew edition\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Grid cols={{ base: 2, xl: 4 }} gap={3}>\n\t\t\t\t\t{stats.map((stat) => (\n\t\t\t\t\t\t<Card key={stat.label}>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardDescription>{stat.label}</CardDescription>\n\t\t\t\t\t\t\t\t<CardTitle className=\"text-mono-xl\">{stat.value}</CardTitle>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t<Row gap={1} wrap>\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\ttone={stat.up ? \"success\" : \"warning\"}\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\ticon={<Icon name={stat.up ? \"arrow-up\" : \"arrow-down\"} />}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{stat.delta}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t<span className=\"text-caption text-muted-foreground\">{stat.note}</span>\n\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t))}\n\t\t\t\t</Grid>\n\t\t\t\t<Grid cols={{ base: 1, xl: 3 }} gap={3}>\n\t\t\t\t\t<Card className=\"flex flex-col xl:col-span-2\">\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Editions</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>Sales across your releases, newest first.</CardDescription>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardContent flush className=\"mt-4 flex-1\">\n\t\t\t\t\t\t\t<DataTable\n\t\t\t\t\t\t\t\tdata={editions}\n\t\t\t\t\t\t\t\trowKey={(row) => row.id}\n\t\t\t\t\t\t\t\tdefaultSort={{ key: \"released\", direction: \"desc\" }}\n\t\t\t\t\t\t\t\tcolumns={[\n\t\t\t\t\t\t\t\t\t{ key: \"title\", header: \"Edition\", sortable: true, className: \"text-label-md whitespace-nowrap\" },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: \"status\",\n\t\t\t\t\t\t\t\t\t\theader: \"Status\",\n\t\t\t\t\t\t\t\t\t\tcell: (row) => (\n\t\t\t\t\t\t\t\t\t\t\t<Badge appearance=\"plain\" tone={STATUS_TONE[row.status as EditionStatus]} dot>\n\t\t\t\t\t\t\t\t\t\t\t\t{STATUS_LABEL[row.status as EditionStatus]}\n\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: \"sold\",\n\t\t\t\t\t\t\t\t\t\theader: \"Sold\",\n\t\t\t\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\t\t\t\tsortValue: (row) => row.sold / row.supply,\n\t\t\t\t\t\t\t\t\t\tcell: (row) => (\n\t\t\t\t\t\t\t\t\t\t\t<Row gap={3} align=\"center\" className=\"min-w-40\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Meter\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={row.sold}\n\t\t\t\t\t\t\t\t\t\t\t\t\tmax={row.supply}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttone={row.sold === row.supply ? \"success\" : \"primary\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={`${row.title} sold`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tgetAriaValueText={(_, v) => `${v} of ${row.supply} sold`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-mono-caption whitespace-nowrap text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{row.sold}/{row.supply}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: \"revenue\",\n\t\t\t\t\t\t\t\t\t\theader: \"Revenue\",\n\t\t\t\t\t\t\t\t\t\talign: \"end\",\n\t\t\t\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\t\t\t\tsortValue: (row) => row.sold * row.price,\n\t\t\t\t\t\t\t\t\t\tcell: (row) =>\n\t\t\t\t\t\t\t\t\t\t\trow.sold > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-mono-sm\">{usd.format(row.sold * row.price)}</span>\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-mono-sm text-muted-foreground\">—</span>\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: \"released\",\n\t\t\t\t\t\t\t\t\t\theader: \"Release\",\n\t\t\t\t\t\t\t\t\t\talign: \"end\",\n\t\t\t\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\t\t\t\tcell: (row) => (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-body-sm whitespace-nowrap text-muted-foreground\">{shortDate(row.released)}</span>\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t<CardFooter className=\"justify-between\">\n\t\t\t\t\t\t\t<span className=\"text-caption text-muted-foreground\">\n\t\t\t\t\t\t\t\tShowing {editions.length} of {editionCount} editions\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" render={<a href=\"/editions\" />}>\n\t\t\t\t\t\t\t\tView all editions\n\t\t\t\t\t\t\t\t<Icon name=\"arrow-right\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t</Card>\n\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardDescription>Next payout</CardDescription>\n\t\t\t\t\t\t\t\t<CardTitle className=\"text-mono-xl\">{usdCents.format(payout.amount)}</CardTitle>\n\t\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t\t<Badge tone=\"info\" size=\"sm\" icon={<Icon name=\"calendar\" />}>\n\t\t\t\t\t\t\t\t\t\t{shortDate(payout.date)}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t<dl className=\"sable-list-dl text-body-sm\">\n\t\t\t\t\t\t\t\t\t{payout.lines.map((line) => (\n\t\t\t\t\t\t\t\t\t\t<div key={line.label} className=\"contents\">\n\t\t\t\t\t\t\t\t\t\t\t<dt>{line.label}</dt>\n\t\t\t\t\t\t\t\t\t\t\t<dd className={typeof line.value === \"number\" ? \"text-end text-mono-sm\" : \"text-end\"}>\n\t\t\t\t\t\t\t\t\t\t\t\t{typeof line.value === \"number\" ? usdCents.format(line.value) : line.value}\n\t\t\t\t\t\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</dl>\n\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardTitle>Top collectors</CardTitle>\n\t\t\t\t\t\t\t\t<CardDescription>By spend this month.</CardDescription>\n\t\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" render={<a href=\"/collectors\" />}>\n\t\t\t\t\t\t\t\t\t\tView all\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t{collectors.map((person) => (\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tkey={person.id}\n\t\t\t\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" size=\"sm\" fallback={person.initials} alt=\"\" />}\n\t\t\t\t\t\t\t\t\t\ttitle={person.name}\n\t\t\t\t\t\t\t\t\t\tsubtitle={`${person.handle} · ${person.pieces} pieces`}\n\t\t\t\t\t\t\t\t\t\taction={<span className=\"text-mono-sm\">{usd.format(person.spent)}</span>}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Stack>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid cols={{ base: 1, xl: 3 }} gap={3}>\n\t\t\t\t\t<Card className=\"flex flex-col\">\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Upcoming releases</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>Scheduled to open to collectors.</CardDescription>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t{upcoming.map((release) => (\n\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\tkey={release.id}\n\t\t\t\t\t\t\t\t\ttitle={release.title}\n\t\t\t\t\t\t\t\t\tsubtitle={release.detail}\n\t\t\t\t\t\t\t\t\taction={<RelativeTime date={Date.now() + release.at} className=\"text-caption text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t<CardFooter className=\"mt-auto\">\n\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" render={<a href=\"/editions/new\" />}>\n\t\t\t\t\t\t\t\t<Icon name=\"calendar\" />\n\t\t\t\t\t\t\t\tSchedule a release\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t</Card>\n\t\t\t\t\t<Card className=\"xl:col-span-2\">\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Activity</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>Collects, tips, and follows.</CardDescription>\n\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" render={<a href=\"/activity\" />}>\n\t\t\t\t\t\t\t\t\tView all\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t{activity.map((item) => (\n\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" size=\"sm\" fallback={item.initials} alt=\"\" />}\n\t\t\t\t\t\t\t\t\ttitle={item.who}\n\t\t\t\t\t\t\t\t\tsubtitle={item.what}\n\t\t\t\t\t\t\t\t\taction={<RelativeTime date={Date.now() - item.when} className=\"text-caption text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CardList>\n\t\t\t\t\t</Card>\n\t\t\t\t</Grid>\n\t\t\t</Page>\n\t\t</AppShell>\n\t)\n}"
+        "imports": "import { AppHeader, AppShell, Avatar, Badge, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, DataTable, Entity, Grid, Icon, MenuItem, MenuSeparator, Meter, NotificationBadge, OverflowMenu, Page, PageHeader, RelativeTime, Row, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Stack } from \"@sableui/react\"",
+        "code": "// Edition status → Badge tone. Sable has no status vocabulary of its own;\n// an app maps ITS states onto tones once, here, and every badge follows.\nconst STATUS_TONE = { live: \"success\", scheduled: \"info\", \"sold-out\": \"edition\", closed: \"neutral\" } as const\nconst STATUS_LABEL = { live: \"Live\", scheduled: \"Scheduled\", \"sold-out\": \"Sold out\", closed: \"Closed\" } as const\ntype EditionStatus = keyof typeof STATUS_TONE\n\nconst MIN = 60 * 1000\nconst HOUR = 60 * MIN\nconst DAY = 24 * HOUR\n\nconst usd = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 })\nconst usdCents = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" })\nconst shortDate = (offset: number) =>\n\tnew Date(Date.now() + offset).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })\n\nconst stats = [\n\t{ label: \"Revenue\", value: \"$18,240\", delta: \"+8.2%\", up: true, note: \"vs. $16,857\" },\n\t{ label: \"Collects\", value: \"1,284\", delta: \"+3.1%\", up: true, note: \"182 first-time\" },\n\t{ label: \"Collectors\", value: \"312\", delta: \"+12.4%\", up: true, note: \"Best month yet\" },\n\t{ label: \"Sell-through\", value: \"64%\", delta: \"−1.8%\", up: false, note: \"6 open editions\" },\n]\n\nconst editions = [\n\t{ id: \"ed_01\", title: \"Gold Rush\", status: \"live\" as const, sold: 184, supply: 250, price: 48, released: -6 * DAY },\n\t{ id: \"ed_02\", title: \"Quiet Harbor\", status: \"sold-out\" as const, sold: 100, supply: 100, price: 120, released: -19 * DAY },\n\t{ id: \"ed_03\", title: \"Dusk, no. 4\", status: \"live\" as const, sold: 61, supply: 150, price: 64, released: -2 * DAY },\n\t{ id: \"ed_04\", title: \"Tidewater\", status: \"live\" as const, sold: 212, supply: 300, price: 36, released: -27 * DAY },\n\t{ id: \"ed_05\", title: \"Salt Study\", status: \"closed\" as const, sold: 38, supply: 75, price: 90, released: -44 * DAY },\n\t{ id: \"ed_06\", title: \"Paper Moon\", status: \"sold-out\" as const, sold: 50, supply: 50, price: 220, released: -58 * DAY },\n\t{ id: \"ed_07\", title: \"Night Signal\", status: \"scheduled\" as const, sold: 0, supply: 200, price: 56, released: 3 * DAY },\n\t{ id: \"ed_08\", title: \"Low Tide, Blue\", status: \"closed\" as const, sold: 72, supply: 120, price: 42, released: -71 * DAY },\n\t{ id: \"ed_09\", title: \"Ember Field\", status: \"sold-out\" as const, sold: 80, supply: 80, price: 140, released: -86 * DAY },\n]\nconst editionCount = 24\n\nconst payout = {\n\tamount: 8214.6,\n\tdate: 5 * DAY,\n\tlines: [\n\t\t{ label: \"Sales\", value: 9127.33 },\n\t\t{ label: \"Platform fee (10%)\", value: -912.73 },\n\t\t{ label: \"Deposits to\", value: \"Checking ••4821\" },\n\t],\n}\n\nconst collectors = [\n\t{ id: \"co_01\", name: \"Nina Simone\", handle: \"@nina\", initials: \"NS\", pieces: 14, spent: 1460 },\n\t{ id: \"co_02\", name: \"Grace Hopper\", handle: \"@grace\", initials: \"GH\", pieces: 11, spent: 1128 },\n\t{ id: \"co_03\", name: \"Frida Kahlo\", handle: \"@frida\", initials: \"FK\", pieces: 9, spent: 942 },\n\t{ id: \"co_04\", name: \"Mary Shelley\", handle: \"@mary\", initials: \"MS\", pieces: 6, spent: 588 },\n]\n\nconst upcoming = [\n\t{ id: \"up_01\", title: \"Night Signal\", detail: \"Edition of 200 · $56\", at: 3 * DAY },\n\t{ id: \"up_02\", title: \"Tidewater, second printing\", detail: \"Edition of 100 · $40\", at: 12 * DAY },\n\t{ id: \"up_03\", title: \"Dusk, no. 5\", detail: \"Edition of 150 · $64\", at: 26 * DAY },\n\t{ id: \"up_04\", title: \"Quiet Harbor, artist proofs\", detail: \"Edition of 10 · $480\", at: 34 * DAY },\n]\n\nconst activity = [\n\t{ id: \"ac_01\", who: \"Nina Simone\", initials: \"NS\", what: \"collected Gold Rush · 185 of 250\", when: 2 * MIN },\n\t{ id: \"ac_02\", who: \"Grace Hopper\", initials: \"GH\", what: \"collected Dusk, no. 4 · 61 of 150\", when: 26 * MIN },\n\t{ id: \"ac_03\", who: \"Frida Kahlo\", initials: \"FK\", what: \"tipped $20 on Tidewater\", when: 1 * HOUR },\n\t{ id: \"ac_04\", who: \"Mary Shelley\", initials: \"MS\", what: \"started following you\", when: 3 * HOUR },\n\t{ id: \"ac_05\", who: \"Nina Simone\", initials: \"NS\", what: \"set a reminder for Night Signal\", when: 6 * HOUR },\n]\n\nexport function DashboardPage() {\n\treturn (\n\t\t<AppShell\n\t\t\t// Sidebar hides below lg, so the same destinations ride in the shell's\n\t\t\t// mobile slots — without them the route has no navigation under 1024px.\n\t\t\theader={\n\t\t\t\t<AppHeader\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Row gap={1} align=\"center\">\n\t\t\t\t\t\t\t<Icon name=\"gem\" variant=\"solid\" className=\"text-xl\" />\n\t\t\t\t\t\t\t<span className=\"text-title-sm\">Atelier</span>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t}\n\t\t\t\t\tactions={<Avatar variant=\"art\" size=\"sm\" fallback=\"AL\" alt=\"Ada Lovelace\" />}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tbottomNav={\n\t\t\t\t<BottomNav aria-label=\"Primary\">\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"grid\" />} label=\"Overview\" showLabel active render={<a href=\"/\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"image-stack\" />} label=\"Editions\" showLabel render={<a href=\"/editions\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"user\" />} label=\"Collectors\" showLabel render={<a href=\"/collectors\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"bell\" />} label=\"Activity\" showLabel render={<a href=\"/activity\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"gear\" />} label=\"Settings\" showLabel render={<a href=\"/settings\" />} />\n\t\t\t\t</BottomNav>\n\t\t\t}\n\t\t\tsidebar={\n\t\t\t\t<Sidebar>\n\t\t\t\t\t<SidebarHeader>\n\t\t\t\t\t\t<SidebarBrand mark={<Icon name=\"gem\" variant=\"solid\" />} label=\"Atelier\" render={<a href=\"/\" />} />\n\t\t\t\t\t</SidebarHeader>\n\t\t\t\t\t<SidebarNav>\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"grid\" />} label=\"Overview\" active render={<a href=\"/\" />} />\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"image-stack\" />} label=\"Editions\" render={<a href=\"/editions\" />} />\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"user\" />} label=\"Collectors\" render={<a href=\"/collectors\" />} />\n\t\t\t\t\t\t<SidebarItem\n\t\t\t\t\t\t\ticon={<Icon name=\"bell\" />}\n\t\t\t\t\t\t\tlabel=\"Activity\"\n\t\t\t\t\t\t\tbadge={<NotificationBadge count={4} tone=\"neutral\" />}\n\t\t\t\t\t\t\trender={<a href=\"/activity\" />}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"gear\" />} label=\"Settings\" render={<a href=\"/settings\" />} />\n\t\t\t\t\t</SidebarNav>\n\t\t\t\t\t<SidebarFooter>\n\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\tclassName=\"[--entity-py:0]\"\n\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" size=\"sm\" fallback=\"AL\" alt=\"\" />}\n\t\t\t\t\t\t\ttitle=\"Ada Lovelace\"\n\t\t\t\t\t\t\tsubtitle=\"@ada\"\n\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t<OverflowMenu label=\"Account\" size=\"icon-sm\">\n\t\t\t\t\t\t\t\t\t<MenuItem render={<a href=\"/@ada\" />}>View profile</MenuItem>\n\t\t\t\t\t\t\t\t\t<MenuItem render={<a href=\"/settings\" />}>Settings</MenuItem>\n\t\t\t\t\t\t\t\t\t<MenuSeparator />\n\t\t\t\t\t\t\t\t\t<MenuItem>Sign out</MenuItem>\n\t\t\t\t\t\t\t\t</OverflowMenu>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SidebarFooter>\n\t\t\t\t</Sidebar>\n\t\t\t}\n\t\t>\n\t\t\t<Page max=\"wide\" gap={4} className=\"py-6\">\n\t\t\t\t<PageHeader\n\t\t\t\t\ttitle=\"Overview\"\n\t\t\t\t\tdescription=\"Sales and collector activity for the last 30 days.\"\n\t\t\t\t\tactions={\n\t\t\t\t\t\t<Row gap={2}>\n\t\t\t\t\t\t\t<Button variant=\"outline\">\n\t\t\t\t\t\t\t\t<Icon name=\"download\" />\n\t\t\t\t\t\t\t\tExport\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button>\n\t\t\t\t\t\t\t\t<Icon name=\"plus\" />\n\t\t\t\t\t\t\t\tNew edition\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Grid cols={{ base: 2, xl: 4 }} gap={3}>\n\t\t\t\t\t{stats.map((stat) => (\n\t\t\t\t\t\t<Card key={stat.label}>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardDescription>{stat.label}</CardDescription>\n\t\t\t\t\t\t\t\t<CardTitle className=\"text-mono-xl\">{stat.value}</CardTitle>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t<Row gap={1} wrap>\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\ttone={stat.up ? \"success\" : \"warning\"}\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\ticon={<Icon name={stat.up ? \"arrow-up\" : \"arrow-down\"} />}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{stat.delta}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t<span className=\"text-caption text-muted-foreground\">{stat.note}</span>\n\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t))}\n\t\t\t\t</Grid>\n\t\t\t\t<Grid cols={{ base: 1, xl: 3 }} gap={3}>\n\t\t\t\t\t<Card className=\"flex flex-col xl:col-span-2\">\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Editions</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>Sales across your releases, newest first.</CardDescription>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardContent flush className=\"mt-4 flex-1\">\n\t\t\t\t\t\t\t<DataTable\n\t\t\t\t\t\t\t\tdata={editions}\n\t\t\t\t\t\t\t\trowKey={(row) => row.id}\n\t\t\t\t\t\t\t\tdefaultSort={{ key: \"released\", direction: \"desc\" }}\n\t\t\t\t\t\t\t\tcolumns={[\n\t\t\t\t\t\t\t\t\t{ key: \"title\", header: \"Edition\", sortable: true, className: \"text-label-md whitespace-nowrap\" },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: \"status\",\n\t\t\t\t\t\t\t\t\t\theader: \"Status\",\n\t\t\t\t\t\t\t\t\t\tcell: (row) => (\n\t\t\t\t\t\t\t\t\t\t\t<Badge appearance=\"plain\" tone={STATUS_TONE[row.status as EditionStatus]} dot>\n\t\t\t\t\t\t\t\t\t\t\t\t{STATUS_LABEL[row.status as EditionStatus]}\n\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: \"sold\",\n\t\t\t\t\t\t\t\t\t\theader: \"Sold\",\n\t\t\t\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\t\t\t\tsortValue: (row) => row.sold / row.supply,\n\t\t\t\t\t\t\t\t\t\tcell: (row) => (\n\t\t\t\t\t\t\t\t\t\t\t<Row gap={3} align=\"center\" className=\"min-w-40\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Meter\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={row.sold}\n\t\t\t\t\t\t\t\t\t\t\t\t\tmax={row.supply}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttone={row.sold === row.supply ? \"success\" : \"primary\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={`${row.title} sold`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tgetAriaValueText={(_, v) => `${v} of ${row.supply} sold`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-mono-caption whitespace-nowrap text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{row.sold}/{row.supply}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: \"revenue\",\n\t\t\t\t\t\t\t\t\t\theader: \"Revenue\",\n\t\t\t\t\t\t\t\t\t\talign: \"end\",\n\t\t\t\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\t\t\t\tsortValue: (row) => row.sold * row.price,\n\t\t\t\t\t\t\t\t\t\tcell: (row) =>\n\t\t\t\t\t\t\t\t\t\t\trow.sold > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-mono-sm\">{usd.format(row.sold * row.price)}</span>\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-mono-sm text-muted-foreground\">—</span>\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: \"released\",\n\t\t\t\t\t\t\t\t\t\theader: \"Release\",\n\t\t\t\t\t\t\t\t\t\talign: \"end\",\n\t\t\t\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\t\t\t\tcell: (row) => (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-body-sm whitespace-nowrap text-muted-foreground\">{shortDate(row.released)}</span>\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t<CardFooter className=\"justify-between\">\n\t\t\t\t\t\t\t<span className=\"text-caption text-muted-foreground\">\n\t\t\t\t\t\t\t\tShowing {editions.length} of {editionCount} editions\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" bleed=\"end\" render={<a href=\"/editions\" />}>\n\t\t\t\t\t\t\t\tView all editions\n\t\t\t\t\t\t\t\t<Icon name=\"arrow-right\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t</Card>\n\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardDescription>Next payout</CardDescription>\n\t\t\t\t\t\t\t\t<CardTitle className=\"text-mono-xl\">{usdCents.format(payout.amount)}</CardTitle>\n\t\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t\t<Badge tone=\"info\" size=\"sm\" icon={<Icon name=\"calendar\" />}>\n\t\t\t\t\t\t\t\t\t\t{shortDate(payout.date)}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t<dl className=\"sable-list-dl text-body-sm\">\n\t\t\t\t\t\t\t\t\t{payout.lines.map((line) => (\n\t\t\t\t\t\t\t\t\t\t<div key={line.label} className=\"contents\">\n\t\t\t\t\t\t\t\t\t\t\t<dt>{line.label}</dt>\n\t\t\t\t\t\t\t\t\t\t\t<dd className={typeof line.value === \"number\" ? \"text-end text-mono-sm\" : \"text-end\"}>\n\t\t\t\t\t\t\t\t\t\t\t\t{typeof line.value === \"number\" ? usdCents.format(line.value) : line.value}\n\t\t\t\t\t\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</dl>\n\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardTitle>Top collectors</CardTitle>\n\t\t\t\t\t\t\t\t<CardDescription>By spend this month.</CardDescription>\n\t\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" render={<a href=\"/collectors\" />}>\n\t\t\t\t\t\t\t\t\t\tView all\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t{collectors.map((person) => (\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tkey={person.id}\n\t\t\t\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" size=\"sm\" fallback={person.initials} alt=\"\" />}\n\t\t\t\t\t\t\t\t\t\ttitle={person.name}\n\t\t\t\t\t\t\t\t\t\tsubtitle={`${person.handle} · ${person.pieces} pieces`}\n\t\t\t\t\t\t\t\t\t\taction={<span className=\"text-mono-sm\">{usd.format(person.spent)}</span>}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Stack>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid cols={{ base: 1, xl: 3 }} gap={3}>\n\t\t\t\t\t<Card className=\"flex flex-col\">\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Upcoming releases</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>Scheduled to open to collectors.</CardDescription>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t{upcoming.map((release) => (\n\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\tkey={release.id}\n\t\t\t\t\t\t\t\t\ttitle={release.title}\n\t\t\t\t\t\t\t\t\tsubtitle={release.detail}\n\t\t\t\t\t\t\t\t\taction={<RelativeTime date={Date.now() + release.at} className=\"text-caption text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t<CardFooter className=\"mt-auto\">\n\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" render={<a href=\"/editions/new\" />}>\n\t\t\t\t\t\t\t\t<Icon name=\"calendar\" />\n\t\t\t\t\t\t\t\tSchedule a release\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t</Card>\n\t\t\t\t\t<Card className=\"xl:col-span-2\">\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Activity</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>Collects, tips, and follows.</CardDescription>\n\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" render={<a href=\"/activity\" />}>\n\t\t\t\t\t\t\t\t\tView all\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t{activity.map((item) => (\n\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" size=\"sm\" fallback={item.initials} alt=\"\" />}\n\t\t\t\t\t\t\t\t\ttitle={item.who}\n\t\t\t\t\t\t\t\t\tsubtitle={item.what}\n\t\t\t\t\t\t\t\t\taction={<RelativeTime date={Date.now() - item.when} className=\"text-caption text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CardList>\n\t\t\t\t\t</Card>\n\t\t\t\t</Grid>\n\t\t\t</Page>\n\t\t</AppShell>\n\t)\n}"
       },
       {
         "name": "FeedPage",
@@ -19080,7 +20336,7 @@
           "The Skeleton card is aria-busy; the loading Button keeps its label (\"Loading posts\")."
         ],
         "imports": "import { AspectBox, Avatar, Badge, Button, Card, CardContent, CardHeader, CardList, CardTitle, Entity, Icon, MenuItem, MenuSeparator, Meter, MeterLabel, MeterTrack, MeterValue, OverflowMenu, Page, PageHeader, Row, Skeleton, Stack, Tabs, TabsList, TabsPanel, TabsTrigger, Textarea } from \"@sableui/react\"",
-        "code": "type Post = {\n\tid: string\n\tauthor: string\n\thandle: string\n\tinitials: string\n\ttime: string\n\tfollowing: boolean\n\tbody: string\n\tmedia?: { src: string; alt: string }\n\tdrop?: { title: string; price: string; collected: number; supply: number }\n\tlikes: number\n\tcomments: number\n}\n\nconst posts: Post[] = [\n\t{\n\t\tid: \"p_01\",\n\t\tauthor: \"Ada Lovelace\",\n\t\thandle: \"@ada\",\n\t\tinitials: \"AL\",\n\t\ttime: \"2h\",\n\t\tfollowing: true,\n\t\tbody: \"Gold Rush is live. 100 signed prints, each paired with the on-chain original. Thank you for waiting.\",\n\t\tmedia: { src: \"/media/edition-cover.svg\", alt: \"Gold Rush, a gold-leaf study in overlapping arcs\" },\n\t\tdrop: { title: \"Gold Rush\", price: \"$120\", collected: 62, supply: 100 },\n\t\tlikes: 128,\n\t\tcomments: 24,\n\t},\n\t{\n\t\tid: \"p_02\",\n\t\tauthor: \"Grace Hopper\",\n\t\thandle: \"@grace\",\n\t\tinitials: \"GH\",\n\t\ttime: \"5h\",\n\t\tfollowing: true,\n\t\tbody: \"Process shot from this week. Compilers and copper ink — the plotter ran for eleven hours on this one.\",\n\t\tmedia: { src: \"/media/process-shot.svg\", alt: \"Work-in-progress plotter drawing in copper ink\" },\n\t\tlikes: 86,\n\t\tcomments: 9,\n\t},\n\t{\n\t\tid: \"p_03\",\n\t\tauthor: \"Nina Simone\",\n\t\thandle: \"@nina\",\n\t\tinitials: \"NS\",\n\t\ttime: \"8h\",\n\t\tfollowing: false,\n\t\tbody: \"Collectors of Dusk, no. 3 — your unlockable score is now in your library. Headphones on for this one.\",\n\t\tlikes: 214,\n\t\tcomments: 31,\n\t},\n]\n\nconst suggestions = [\n\t{ id: \"u_01\", name: \"Mary Shelley\", handle: \"@mary\", initials: \"MS\" },\n\t{ id: \"u_02\", name: \"Nina Simone\", handle: \"@nina\", initials: \"NS\" },\n]\n\nconst upcoming = [\n\t{ id: \"d_01\", title: \"Quiet Harbor\", artist: \"Mary Shelley\", initials: \"MS\", date: \"Sat, Oct 12\" },\n\t{ id: \"d_02\", title: \"Dusk, no. 4\", artist: \"Nina Simone\", initials: \"NS\", date: \"Tue, Oct 15\" },\n]\n\nconst renderPost = (post: Post) => (\n\t<article key={post.id}>\n\t\t<Card>\n\t\t\t<CardList>\n\t\t\t\t<Entity\n\t\t\t\t\tleading={<Avatar variant=\"art\" fallback={post.initials} alt={post.author} />}\n\t\t\t\t\ttitle={post.author}\n\t\t\t\t\tsubtitle={`${post.handle} · ${post.time}`}\n\t\t\t\t\taction={\n\t\t\t\t\t\t<OverflowMenu label={`Post options for ${post.author}`} size=\"icon-sm\">\n\t\t\t\t\t\t\t<MenuItem>Copy link</MenuItem>\n\t\t\t\t\t\t\t<MenuItem>Mute {post.handle}</MenuItem>\n\t\t\t\t\t\t\t<MenuSeparator />\n\t\t\t\t\t\t\t<MenuItem variant=\"destructive\">Report post</MenuItem>\n\t\t\t\t\t\t</OverflowMenu>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</CardList>\n\t\t\t<CardContent className=\"flex flex-col gap-4 pt-0\">\n\t\t\t\t<p className=\"text-body-md text-foreground\">{post.body}</p>\n\t\t\t\t{post.media ? (\n\t\t\t\t\t<AspectBox ratio={16 / 9} className=\"overflow-hidden rounded-concentric-lg/6 bg-muted\">\n\t\t\t\t\t\t<img src={post.media.src} alt={post.media.alt} className=\"size-full object-cover\" />\n\t\t\t\t\t\t{post.drop ? (\n\t\t\t\t\t\t\t<div className=\"absolute start-3 top-3\">\n\t\t\t\t\t\t\t\t<Badge appearance=\"overlay\" size=\"sm\" dot>\n\t\t\t\t\t\t\t\t\tLive drop\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</AspectBox>\n\t\t\t\t) : null}\n\t\t\t\t{post.drop ? (\n\t\t\t\t\t<Stack gap={1.5}>\n\t\t\t\t\t\t<Row gap={2} align=\"center\" justify=\"between\">\n\t\t\t\t\t\t\t<div className=\"min-w-0\">\n\t\t\t\t\t\t\t\t<p className=\"text-title-md text-foreground\">{post.drop.title}</p>\n\t\t\t\t\t\t\t\t<p className=\"text-body-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{`${post.drop.price} · Edition of ${post.drop.supply}`}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Button>{`Collect for ${post.drop.price}`}</Button>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t<Meter\n\t\t\t\t\t\t\tvalue={post.drop.collected}\n\t\t\t\t\t\t\tmax={post.drop.supply}\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tgetAriaValueText={(_, value) => `${value} of ${post.drop?.supply} collected`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Row gap={2} align=\"center\" justify=\"between\" className=\"mb-2\">\n\t\t\t\t\t\t\t\t<MeterLabel>{`${post.drop.collected} collected`}</MeterLabel>\n\t\t\t\t\t\t\t\t<MeterValue>{(_, value) => `${(post.drop?.supply ?? 0) - value} left`}</MeterValue>\n\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t<MeterTrack />\n\t\t\t\t\t\t</Meter>\n\t\t\t\t\t</Stack>\n\t\t\t\t) : null}\n\t\t\t\t{/* Pulled out by exactly a sm Button's own padding (px-3), so the\n\t\t\t\t    first icon lands on the text edge above it. */}\n\t\t\t\t<Row gap={0.5} className=\"-ms-3\">\n\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" aria-label={`Like, ${post.likes} likes`}>\n\t\t\t\t\t\t<Icon name=\"heart\" />\n\t\t\t\t\t\t{post.likes}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" aria-label={`Comment, ${post.comments} comments`}>\n\t\t\t\t\t\t<Icon name=\"comment\" />\n\t\t\t\t\t\t{post.comments}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" aria-label=\"Share\">\n\t\t\t\t\t\t<Icon name=\"share\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</Row>\n\t\t\t</CardContent>\n\t\t</Card>\n\t</article>\n)\n\nexport function FeedPage() {\n\treturn (\n\t\t<Page as=\"main\" max=\"wide\" gap={4} className=\"py-6\">\n\t\t\t<Row gap={4} align=\"start\" justify=\"center\">\n\t\t\t\t<Stack gap={3} className=\"min-w-0 max-w-(--region-feed) flex-1\">\n\t\t\t\t\t<PageHeader title=\"Home\" />\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t<Row gap={1.5} align=\"start\">\n\t\t\t\t\t\t\t\t<Avatar variant=\"art\" fallback=\"AL\" alt=\"Ada Lovelace\" />\n\t\t\t\t\t\t\t\t<Stack gap={1.5} className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\t\t\tautoResize\n\t\t\t\t\t\t\t\t\t\trows={2}\n\t\t\t\t\t\t\t\t\t\taria-label=\"New post\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"Share a process shot or an upcoming drop\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Row gap={1} align=\"center\" justify=\"between\">\n\t\t\t\t\t\t\t\t\t\t<Row gap={0.5}>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Add images\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon name=\"image-stack\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Attach an edition\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon name=\"gem\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\tPost\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t</Card>\n\t\t\t\t\t<Tabs defaultValue=\"for-you\">\n\t\t\t\t\t\t<TabsList className=\"flex\">\n\t\t\t\t\t\t\t<TabsTrigger value=\"for-you\">For you</TabsTrigger>\n\t\t\t\t\t\t\t<TabsTrigger value=\"following\">Following</TabsTrigger>\n\t\t\t\t\t\t</TabsList>\n\t\t\t\t\t\t<TabsPanel value=\"for-you\">\n\t\t\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t\t\t{posts.map(renderPost)}\n\t\t\t\t\t\t\t\t{/* The next page, in the shape it will land in, while it fetches. */}\n\t\t\t\t\t\t\t\t<Card aria-busy=\"true\">\n\t\t\t\t\t\t\t\t\t<CardContent className=\"flex flex-col gap-4\">\n\t\t\t\t\t\t\t\t\t\t<Row gap={1.5} align=\"center\">\n\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"size-10 rounded-full\" />\n\t\t\t\t\t\t\t\t\t\t\t<Stack gap={1}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-3 w-32\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-3 w-20\" />\n\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-3 w-full\" />\n\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-3 w-2/3\" />\n\t\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t<Button variant=\"secondary\" loading loadingLabel=\"Loading posts\">\n\t\t\t\t\t\t\t\t\tLoad more posts\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</TabsPanel>\n\t\t\t\t\t\t<TabsPanel value=\"following\">\n\t\t\t\t\t\t\t<Stack gap={3}>{posts.filter((post) => post.following).map(renderPost)}</Stack>\n\t\t\t\t\t\t</TabsPanel>\n\t\t\t\t\t</Tabs>\n\t\t\t\t</Stack>\n\t\t\t\t<aside aria-label=\"Suggestions\" className=\"sticky top-6 hidden w-80 shrink-0 lg:block\">\n\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Who to follow</CardTitle>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t{suggestions.map((person) => (\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tkey={person.id}\n\t\t\t\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" fallback={person.initials} alt={person.name} />}\n\t\t\t\t\t\t\t\t\t\ttitle={person.name}\n\t\t\t\t\t\t\t\t\t\tsubtitle={person.handle}\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" size=\"sm\" aria-label={`Follow ${person.name}`}>\n\t\t\t\t\t\t\t\t\t\t\t\tFollow\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Upcoming drops</CardTitle>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t{upcoming.map((drop) => (\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tkey={drop.id}\n\t\t\t\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" fallback={drop.initials} alt={drop.artist} />}\n\t\t\t\t\t\t\t\t\t\ttitle={drop.title}\n\t\t\t\t\t\t\t\t\t\tsubtitle={`${drop.artist} · ${drop.date}`}\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label={`Remind me about ${drop.title}`}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon name=\"bell\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Stack>\n\t\t\t\t</aside>\n\t\t\t</Row>\n\t\t</Page>\n\t)\n}"
+        "code": "type Post = {\n\tid: string\n\tauthor: string\n\thandle: string\n\tinitials: string\n\ttime: string\n\tfollowing: boolean\n\tbody: string\n\tmedia?: { src: string; alt: string }\n\tdrop?: { title: string; price: string; collected: number; supply: number }\n\tlikes: number\n\tcomments: number\n}\n\nconst posts: Post[] = [\n\t{\n\t\tid: \"p_01\",\n\t\tauthor: \"Ada Lovelace\",\n\t\thandle: \"@ada\",\n\t\tinitials: \"AL\",\n\t\ttime: \"2h\",\n\t\tfollowing: true,\n\t\tbody: \"Gold Rush is live. 100 signed prints, each paired with the on-chain original. Thank you for waiting.\",\n\t\tmedia: { src: \"/media/edition-cover.svg\", alt: \"Gold Rush, a gold-leaf study in overlapping arcs\" },\n\t\tdrop: { title: \"Gold Rush\", price: \"$120\", collected: 62, supply: 100 },\n\t\tlikes: 128,\n\t\tcomments: 24,\n\t},\n\t{\n\t\tid: \"p_02\",\n\t\tauthor: \"Grace Hopper\",\n\t\thandle: \"@grace\",\n\t\tinitials: \"GH\",\n\t\ttime: \"5h\",\n\t\tfollowing: true,\n\t\tbody: \"Process shot from this week. Compilers and copper ink — the plotter ran for eleven hours on this one.\",\n\t\tmedia: { src: \"/media/process-shot.svg\", alt: \"Work-in-progress plotter drawing in copper ink\" },\n\t\tlikes: 86,\n\t\tcomments: 9,\n\t},\n\t{\n\t\tid: \"p_03\",\n\t\tauthor: \"Nina Simone\",\n\t\thandle: \"@nina\",\n\t\tinitials: \"NS\",\n\t\ttime: \"8h\",\n\t\tfollowing: false,\n\t\tbody: \"Collectors of Dusk, no. 3 — your unlockable score is now in your library. Headphones on for this one.\",\n\t\tlikes: 214,\n\t\tcomments: 31,\n\t},\n]\n\nconst suggestions = [\n\t{ id: \"u_01\", name: \"Mary Shelley\", handle: \"@mary\", initials: \"MS\" },\n\t{ id: \"u_02\", name: \"Nina Simone\", handle: \"@nina\", initials: \"NS\" },\n]\n\nconst upcoming = [\n\t{ id: \"d_01\", title: \"Quiet Harbor\", artist: \"Mary Shelley\", initials: \"MS\", date: \"Sat, Oct 12\" },\n\t{ id: \"d_02\", title: \"Dusk, no. 4\", artist: \"Nina Simone\", initials: \"NS\", date: \"Tue, Oct 15\" },\n]\n\nconst renderPost = (post: Post) => (\n\t<article key={post.id}>\n\t\t<Card>\n\t\t\t<CardList>\n\t\t\t\t<Entity\n\t\t\t\t\tleading={<Avatar variant=\"art\" fallback={post.initials} alt={post.author} />}\n\t\t\t\t\ttitle={post.author}\n\t\t\t\t\tsubtitle={`${post.handle} · ${post.time}`}\n\t\t\t\t\taction={\n\t\t\t\t\t\t<OverflowMenu label={`Post options for ${post.author}`} size=\"icon-sm\">\n\t\t\t\t\t\t\t<MenuItem>Copy link</MenuItem>\n\t\t\t\t\t\t\t<MenuItem>Mute {post.handle}</MenuItem>\n\t\t\t\t\t\t\t<MenuSeparator />\n\t\t\t\t\t\t\t<MenuItem variant=\"destructive\">Report post</MenuItem>\n\t\t\t\t\t\t</OverflowMenu>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</CardList>\n\t\t\t<CardContent className=\"flex flex-col gap-4 pt-0\">\n\t\t\t\t<p className=\"text-body-md text-foreground\">{post.body}</p>\n\t\t\t\t{post.media ? (\n\t\t\t\t\t<AspectBox ratio={16 / 9} className=\"overflow-hidden rounded-concentric-lg/6 bg-muted\">\n\t\t\t\t\t\t<img src={post.media.src} alt={post.media.alt} className=\"size-full object-cover\" />\n\t\t\t\t\t\t{post.drop ? (\n\t\t\t\t\t\t\t<div className=\"absolute start-3 top-3\">\n\t\t\t\t\t\t\t\t<Badge appearance=\"overlay\" size=\"sm\" dot>\n\t\t\t\t\t\t\t\t\tLive drop\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</AspectBox>\n\t\t\t\t) : null}\n\t\t\t\t{post.drop ? (\n\t\t\t\t\t<Stack gap={1.5}>\n\t\t\t\t\t\t<Row gap={2} align=\"center\" justify=\"between\">\n\t\t\t\t\t\t\t<div className=\"min-w-0\">\n\t\t\t\t\t\t\t\t<p className=\"text-title-md text-foreground\">{post.drop.title}</p>\n\t\t\t\t\t\t\t\t<p className=\"text-body-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{`${post.drop.price} · Edition of ${post.drop.supply}`}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Button>{`Collect for ${post.drop.price}`}</Button>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t<Meter\n\t\t\t\t\t\t\tvalue={post.drop.collected}\n\t\t\t\t\t\t\tmax={post.drop.supply}\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tgetAriaValueText={(_, value) => `${value} of ${post.drop?.supply} collected`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Row gap={2} align=\"center\" justify=\"between\" className=\"mb-2\">\n\t\t\t\t\t\t\t\t<MeterLabel>{`${post.drop.collected} collected`}</MeterLabel>\n\t\t\t\t\t\t\t\t<MeterValue>{(_, value) => `${(post.drop?.supply ?? 0) - value} left`}</MeterValue>\n\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t<MeterTrack />\n\t\t\t\t\t\t</Meter>\n\t\t\t\t\t</Stack>\n\t\t\t\t) : null}\n\t\t\t\t{/* bleed=\"start\" pulls the first button out by exactly its own\n\t\t\t\t    padding, so its icon lands on the text edge above it. */}\n\t\t\t\t<Row gap={0.5}>\n\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" bleed=\"start\" aria-label={`Like, ${post.likes} likes`}>\n\t\t\t\t\t\t<Icon name=\"heart\" />\n\t\t\t\t\t\t{post.likes}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" aria-label={`Comment, ${post.comments} comments`}>\n\t\t\t\t\t\t<Icon name=\"comment\" />\n\t\t\t\t\t\t{post.comments}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" aria-label=\"Share\">\n\t\t\t\t\t\t<Icon name=\"share\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</Row>\n\t\t\t</CardContent>\n\t\t</Card>\n\t</article>\n)\n\nexport function FeedPage() {\n\treturn (\n\t\t<Page as=\"main\" max=\"wide\" gap={4} className=\"py-6\">\n\t\t\t<Row gap={4} align=\"start\" justify=\"center\">\n\t\t\t\t<Stack gap={3} className=\"min-w-0 max-w-(--region-feed) flex-1\">\n\t\t\t\t\t<PageHeader title=\"Home\" />\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t<Row gap={1.5} align=\"start\">\n\t\t\t\t\t\t\t\t<Avatar variant=\"art\" fallback=\"AL\" alt=\"Ada Lovelace\" />\n\t\t\t\t\t\t\t\t<Stack gap={1.5} className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\t\t\tautoResize\n\t\t\t\t\t\t\t\t\t\trows={2}\n\t\t\t\t\t\t\t\t\t\taria-label=\"New post\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"Share a process shot or an upcoming drop\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Row gap={1} align=\"center\" justify=\"between\">\n\t\t\t\t\t\t\t\t\t\t<Row gap={0.5}>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Add images\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon name=\"image-stack\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Attach an edition\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon name=\"gem\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\tPost\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t</Card>\n\t\t\t\t\t<Tabs defaultValue=\"for-you\">\n\t\t\t\t\t\t<TabsList className=\"flex\">\n\t\t\t\t\t\t\t<TabsTrigger value=\"for-you\">For you</TabsTrigger>\n\t\t\t\t\t\t\t<TabsTrigger value=\"following\">Following</TabsTrigger>\n\t\t\t\t\t\t</TabsList>\n\t\t\t\t\t\t<TabsPanel value=\"for-you\">\n\t\t\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t\t\t{posts.map(renderPost)}\n\t\t\t\t\t\t\t\t{/* The next page, in the shape it will land in, while it fetches. */}\n\t\t\t\t\t\t\t\t<Card aria-busy=\"true\">\n\t\t\t\t\t\t\t\t\t<CardContent className=\"flex flex-col gap-4\">\n\t\t\t\t\t\t\t\t\t\t<Row gap={1.5} align=\"center\">\n\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"size-10 rounded-full\" />\n\t\t\t\t\t\t\t\t\t\t\t<Stack gap={1}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-3 w-32\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-3 w-20\" />\n\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-3 w-full\" />\n\t\t\t\t\t\t\t\t\t\t<Skeleton className=\"h-3 w-2/3\" />\n\t\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t<Button variant=\"secondary\" loading loadingLabel=\"Loading posts\">\n\t\t\t\t\t\t\t\t\tLoad more posts\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</TabsPanel>\n\t\t\t\t\t\t<TabsPanel value=\"following\">\n\t\t\t\t\t\t\t<Stack gap={3}>{posts.filter((post) => post.following).map(renderPost)}</Stack>\n\t\t\t\t\t\t</TabsPanel>\n\t\t\t\t\t</Tabs>\n\t\t\t\t</Stack>\n\t\t\t\t<aside aria-label=\"Suggestions\" className=\"sticky top-6 hidden w-80 shrink-0 lg:block\">\n\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Who to follow</CardTitle>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t{suggestions.map((person) => (\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tkey={person.id}\n\t\t\t\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" fallback={person.initials} alt={person.name} />}\n\t\t\t\t\t\t\t\t\t\ttitle={person.name}\n\t\t\t\t\t\t\t\t\t\tsubtitle={person.handle}\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" size=\"sm\" aria-label={`Follow ${person.name}`}>\n\t\t\t\t\t\t\t\t\t\t\t\tFollow\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Upcoming drops</CardTitle>\n\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t{upcoming.map((drop) => (\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tkey={drop.id}\n\t\t\t\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" fallback={drop.initials} alt={drop.artist} />}\n\t\t\t\t\t\t\t\t\t\ttitle={drop.title}\n\t\t\t\t\t\t\t\t\t\tsubtitle={`${drop.artist} · ${drop.date}`}\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label={`Remind me about ${drop.title}`}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon name=\"bell\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Stack>\n\t\t\t\t</aside>\n\t\t\t</Row>\n\t\t</Page>\n\t)\n}"
       },
       {
         "name": "LandingPage",
@@ -19128,7 +20384,7 @@
           "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."
         ],
         "imports": "import { useState, useEffect, useRef } from \"react\"\nimport { Avatar, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Col, Columns, DestructiveActionModal, EmptyState, Entity, Field, Icon, Page, PageHeader, Row, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, Stack, StatusDot } from \"@sableui/react\"",
-        "code": "type Role = \"owner\" | \"admin\" | \"editor\" | \"viewer\"\n\nconst roles: { value: Role; label: string }[] = [\n\t{ value: \"owner\", label: \"Owner\" },\n\t{ value: \"admin\", label: \"Admin\" },\n\t{ value: \"editor\", label: \"Editor\" },\n\t{ value: \"viewer\", label: \"Viewer\" },\n]\n\nconst roleLabel: Record<Role, string> = {\n\towner: \"Owner\",\n\tadmin: \"Admin\",\n\teditor: \"Editor\",\n\tviewer: \"Viewer\",\n}\n\nconst roleSummary: Record<Role, string> = {\n\towner: \"Full access, including payouts and billing. Transfer ownership in studio settings.\",\n\tadmin: \"Manages members, editions and payouts.\",\n\teditor: \"Drafts, prices and releases editions.\",\n\tviewer: \"Sees editions and sales, but can't change them.\",\n}\n\ntype Activity = { id: string; icon: string; text: string; when: string }\n\ntype Member = {\n\tid: string\n\tname: string\n\temail: string\n\tinitials: string\n\trole: Role\n\tpending: boolean\n\thandle?: string\n\tjoined?: string\n\tlastActive?: string\n\teditions?: number\n\tinvitedBy?: string\n\tsent?: string\n\texpires?: string\n\tresent?: boolean\n\tactivity: Activity[]\n}\n\nconst seats = 10\n\nconst initialMembers: Member[] = [\n\t{\n\t\tid: \"u_01\", name: \"Ada Lovelace\", handle: \"@ada\", email: \"ada@atelier.art\", initials: \"AL\", role: \"owner\", pending: false,\n\t\tjoined: \"Mar 4, 2024\", lastActive: \"Online now\", editions: 12,\n\t\tactivity: [\n\t\t\t{ id: \"a1\", icon: \"gem\", text: \"Released Analytical Engine No. 3 — edition of 50\", when: \"2 hours ago\" },\n\t\t\t{ id: \"a2\", icon: \"mail\", text: \"Invited louise@bourgeois.studio as Editor\", when: \"2 days ago\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"u_02\", name: \"Grace Hopper\", handle: \"@grace\", email: \"grace@atelier.art\", initials: \"GH\", role: \"admin\", pending: false,\n\t\tjoined: \"Mar 9, 2024\", lastActive: \"20 minutes ago\", editions: 4,\n\t\tactivity: [\n\t\t\t{ id: \"a1\", icon: \"user\", text: \"Changed Frida Kahlo's role to Viewer\", when: \"Yesterday\" },\n\t\t\t{ id: \"a2\", icon: \"edit\", text: \"Updated pricing on First Compiler — edition of 10\", when: \"3 days ago\" },\n\t\t\t{ id: \"a3\", icon: \"gem\", text: \"Released First Compiler — edition of 10\", when: \"Sep 28\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"u_03\", name: \"Mary Shelley\", handle: \"@mary\", email: \"mary@atelier.art\", initials: \"MS\", role: \"editor\", pending: false,\n\t\tjoined: \"Jun 18, 2024\", lastActive: \"3 hours ago\", editions: 7,\n\t\tactivity: [\n\t\t\t{ id: \"a1\", icon: \"calendar\", text: \"Scheduled Frankenstein Studies for Oct 14\", when: \"3 hours ago\" },\n\t\t\t{ id: \"a2\", icon: \"gem\", text: \"Released The Last Man — edition of 25\", when: \"Sep 21\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"u_04\", name: \"Nina Simone\", handle: \"@nina\", email: \"nina@atelier.art\", initials: \"NS\", role: \"editor\", pending: false,\n\t\tjoined: \"Jan 12, 2025\", lastActive: \"Yesterday\", editions: 3,\n\t\tactivity: [\n\t\t\t{ id: \"a1\", icon: \"upload\", text: \"Uploaded artwork for Little Girl Blue\", when: \"Yesterday\" },\n\t\t\t{ id: \"a2\", icon: \"gem\", text: \"Released Feeling Good — edition of 100\", when: \"Aug 30\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"u_05\", name: \"Frida Kahlo\", handle: \"@frida\", email: \"frida@atelier.art\", initials: \"FK\", role: \"viewer\", pending: false,\n\t\tjoined: \"Jul 2, 2025\", lastActive: \"4 days ago\", editions: 0,\n\t\tactivity: [{ id: \"a1\", icon: \"comment\", text: \"Commented on the Las Dos Fridas draft\", when: \"4 days ago\" }],\n\t},\n\t{\n\t\tid: \"i_01\", name: \"louise@bourgeois.studio\", email: \"louise@bourgeois.studio\", initials: \"\", role: \"editor\", pending: true,\n\t\tinvitedBy: \"Ada Lovelace\", sent: \"2 days ago\", expires: \"In 5 days\",\n\t\tactivity: [],\n\t},\n]\n\nexport function ListDetailPage() {\n\tconst [members, setMembers] = useState(initialMembers)\n\tconst [selectedId, setSelectedId] = useState<string | null>(\"u_02\")\n\tconst [query, setQuery] = useState(\"\")\n\t// Below lg the list and the detail share one column: selecting drills in.\n\tconst [showDetail, setShowDetail] = useState(false)\n\tconst [confirming, setConfirming] = useState(false)\n\tconst listRef = useRef<HTMLDivElement>(null)\n\tconst backRef = useRef<HTMLButtonElement>(null)\n\tconst searchRef = useRef<HTMLInputElement>(null)\n\n\tconst needle = query.trim().toLowerCase()\n\tconst visible = members.filter((m) =>\n\t\t[m.name, m.email, m.handle ?? \"\", roleLabel[m.role]].some((v) => v.toLowerCase().includes(needle)),\n\t)\n\tconst selected = members.find((m) => m.id === selectedId) ?? null\n\tconst active = members.filter((m) => !m.pending).length\n\tconst pending = members.length - active\n\n\t// Drilling in on a phone moves focus to the detail's back control; the\n\t// control is display:none at lg, so desktop focus stays on the list.\n\tuseEffect(() => {\n\t\tif (showDetail && backRef.current?.offsetParent) backRef.current.focus()\n\t}, [showDetail, selectedId])\n\n\tfunction select(id: string) {\n\t\tsetSelectedId(id)\n\t\tsetShowDetail(true)\n\t}\n\n\tfunction focusRow(id: string | undefined) {\n\t\trequestAnimationFrame(() => {\n\t\t\tlistRef.current?.querySelector<HTMLButtonElement>(`[data-member-id=\"${id}\"] button`)?.focus()\n\t\t})\n\t}\n\n\tfunction backToList() {\n\t\tsetShowDetail(false)\n\t\tfocusRow(selectedId ?? undefined)\n\t}\n\n\tfunction setRole(id: string, role: Role) {\n\t\tsetMembers((list) => list.map((m) => (m.id === id ? { ...m, role } : m)))\n\t}\n\n\tfunction resend(id: string) {\n\t\tsetMembers((list) =>\n\t\t\tlist.map((m) => (m.id === id ? { ...m, sent: \"Just now\", expires: \"In 7 days\", resent: true } : m)),\n\t\t)\n\t}\n\n\tfunction remove(id: string) {\n\t\tconst index = members.findIndex((m) => m.id === id)\n\t\tconst rest = members.filter((m) => m.id !== id)\n\t\tsetMembers(rest)\n\t\tconst next = rest[Math.min(index, rest.length - 1)]?.id\n\t\tsetSelectedId(next ?? null)\n\t\tsetShowDetail(false)\n\t\t// The control that opened the confirmation is gone; land on the next row.\n\t\tfocusRow(next)\n\t}\n\n\treturn (\n\t\t<Page as=\"main\" max=\"wide\" gap={4} className=\"py-6\">\n\t\t\t<PageHeader\n\t\t\t\ttitle=\"Members\"\n\t\t\t\tdescription={`${active} members · ${pending} pending ${pending === 1 ? \"invite\" : \"invites\"} · ${members.length} of ${seats} seats used`}\n\t\t\t\tactions={<Button iconStart={<Icon name=\"plus\" />}>Invite member</Button>}\n\t\t\t/>\n\t\t\t<Columns count={{ base: 1, lg: 12 }}>\n\t\t\t\t<Col span={{ base: 1, lg: 5 }} className={showDetail ? \"max-lg:hidden\" : undefined}>\n\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t<SearchInput\n\t\t\t\t\t\t\tref={searchRef}\n\t\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\t\tonValueChange={setQuery}\n\t\t\t\t\t\t\tplaceholder=\"Search name, email or role\"\n\t\t\t\t\t\t\taria-label=\"Search members\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{/* sable-surface derives the rows' selected step from the card (12% ink),\n\t\t\t\t\t\t    so a selected row stays distinct from its muted avatar. */}\n\t\t\t\t\t\t<Card ref={listRef} className=\"sable-surface\">\n\t\t\t\t\t\t\t{visible.length > 0 ? (\n\t\t\t\t\t\t\t\t<CardList aria-label=\"Members\">\n\t\t\t\t\t\t\t\t\t{visible.map((m) => {\n\t\t\t\t\t\t\t\t\t\tconst isSelected = m.id === selectedId\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\t\t\tkey={m.id}\n\t\t\t\t\t\t\t\t\t\t\t\tdata-member-id={m.id}\n\t\t\t\t\t\t\t\t\t\t\t\tinteractive\n\t\t\t\t\t\t\t\t\t\t\t\tselected={isSelected}\n\t\t\t\t\t\t\t\t\t\t\t\tonSelect={() => select(m.id)}\n\t\t\t\t\t\t\t\t\t\t\t\tleading={\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Avatar variant=\"art\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tseed={m.name}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfallback={m.pending ? <Icon name=\"mail\" className=\"size-5\" /> : m.initials}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstatus={m.lastActive === \"Online now\" ? <StatusDot tone=\"success\" /> : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The row's title already names it: keep the initials out of the row's name.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={m.name}\n\t\t\t\t\t\t\t\t\t\t\t\tsubtitle={\n\t\t\t\t\t\t\t\t\t\t\t\t\tm.pending\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? `${roleLabel[m.role]} · invite sent ${m.sent?.toLowerCase()}`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: `${roleLabel[m.role]} · ${m.handle}`\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\taction={m.pending ? <Badge tone=\"info\">Invited</Badge> : undefined}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t\t<EmptyState\n\t\t\t\t\t\t\t\t\t\ticon={<Icon name=\"search\" />}\n\t\t\t\t\t\t\t\t\t\ttitle=\"No members found\"\n\t\t\t\t\t\t\t\t\t\tdescription={`Nobody matches “${query.trim()}”. Try a name, email or role.`}\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" size=\"sm\" onClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetQuery(\"\")\n\t\t\t\t\t\t\t\t\t\t\t\tsearchRef.current?.focus()\n\t\t\t\t\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t\t\t\t\tClear search\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Stack>\n\t\t\t\t</Col>\n\t\t\t\t<Col span={{ base: 1, lg: 7 }} className={showDetail ? undefined : \"max-lg:hidden\"}>\n\t\t\t\t\t<Stack role=\"region\" aria-label=\"Member details\" gap={3} className=\"lg:sticky lg:top-6\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={backRef}\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\ticonStart={<Icon name=\"chevron-left\" />}\n\t\t\t\t\t\t\tonClick={backToList}\n\t\t\t\t\t\t\tclassName=\"self-start lg:hidden\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAll members\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{selected === null ? (\n\t\t\t\t\t\t\t<EmptyState\n\t\t\t\t\t\t\t\tsurface=\"card\"\n\t\t\t\t\t\t\t\ticon={<Icon name=\"user\" />}\n\t\t\t\t\t\t\t\ttitle=\"No member selected\"\n\t\t\t\t\t\t\t\tdescription=\"Choose someone from the list to see their role and activity.\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t\t<Row gap={2}>\n\t\t\t\t\t\t\t\t\t\t\t<Avatar variant=\"art\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\t\t\t\t\t\t\t\tfallback={selected.pending ? <Icon name=\"mail\" className=\"size-6\" /> : selected.initials}\n\t\t\t\t\t\t\t\t\t\t\t\tstatus={selected.lastActive === \"Online now\" ? <StatusDot tone=\"success\" /> : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\talt={selected.pending ? \"Pending invite\" : selected.name}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<Stack gap={0} className=\"min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />} className=\"truncate\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.name}\n\t\t\t\t\t\t\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t\t\t\t\t\t\t<CardDescription className=\"truncate\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.pending ? \"Hasn't joined yet\" : `${selected.handle} · ${selected.email}`}\n\t\t\t\t\t\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t{selected.pending ? (\n\t\t\t\t\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t\t\t\t\t<Badge tone=\"info\">Invited</Badge>\n\t\t\t\t\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t\t\t<Stack gap={5}>\n\t\t\t\t\t\t\t\t\t\t\t<Field\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={selected.pending ? \"Role on joining\" : \"Role\"}\n\t\t\t\t\t\t\t\t\t\t\t\tdescription={roleSummary[selected.role]}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\t\t\t\titems={roles}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={selected.role}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={(value) => setRole(selected.id, value as Role)}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={selected.role === \"owner\"}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger className=\"max-w-72\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{roles\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.filter((r) => r.value !== \"owner\" || selected.role === \"owner\")\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map((r) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem key={r.value} value={r.value}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{r.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"@container\">\n\t\t\t\t\t\t\t\t\t\t\t\t{selected.pending ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<dl className=\"sable-list-dl sable-list-dl-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Sent</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.sent}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Expires</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.expires}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Invited by</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.invitedBy}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</dl>\n\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<dl className=\"sable-list-dl sable-list-dl-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Email</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.email}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Joined</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.joined}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Last active</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd className={selected.lastActive === \"Online now\" ? \"text-success\" : undefined}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.lastActive}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Editions released</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.editions}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</dl>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t\t\t{selected.role !== \"owner\" ? (\n\t\t\t\t\t\t\t\t\t\t<CardFooter>\n\t\t\t\t\t\t\t\t\t\t\t<Row gap={2} wrap>\n\t\t\t\t\t\t\t\t\t\t\t\t{selected.pending ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticonStart={<Icon name={selected.resent ? \"check\" : \"send\"} />}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={selected.resent}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => resend(selected.id)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.resent ? \"Invite resent\" : \"Resend invite\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" onClick={() => setConfirming(true)}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.pending ? \"Revoke invite\" : \"Remove from studio\"}\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t{selected.activity.length > 0 ? (\n\t\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t\t\t<CardTitle render={<h3 />}>\n\t\t\t\t\t\t\t\t\t\t\t\tRecent activity\n\t\t\t\t\t\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t\t\t\t{selected.activity.map((a) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={a.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\tleading={<Icon name={a.icon} className=\"text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={a.text}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsubtitle={a.when}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t<DestructiveActionModal\n\t\t\t\t\t\t\t\t\topen={confirming}\n\t\t\t\t\t\t\t\t\tonOpenChange={setConfirming}\n\t\t\t\t\t\t\t\t\ttitle={selected.pending ? \"Revoke this invite?\" : `Remove ${selected.name}?`}\n\t\t\t\t\t\t\t\t\tdescription={\n\t\t\t\t\t\t\t\t\t\tselected.pending\n\t\t\t\t\t\t\t\t\t\t\t? `${selected.email} won't be able to join with the link they were sent.`\n\t\t\t\t\t\t\t\t\t\t\t: \"They lose access to the studio right away. Editions they released stay on sale.\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconfirmLabel={selected.pending ? \"Revoke invite\" : \"Remove member\"}\n\t\t\t\t\t\t\t\t\tonConfirm={() => remove(selected.id)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Stack>\n\t\t\t\t</Col>\n\t\t\t</Columns>\n\t\t</Page>\n\t)\n}"
+        "code": "type Role = \"owner\" | \"admin\" | \"editor\" | \"viewer\"\n\nconst roles: { value: Role; label: string }[] = [\n\t{ value: \"owner\", label: \"Owner\" },\n\t{ value: \"admin\", label: \"Admin\" },\n\t{ value: \"editor\", label: \"Editor\" },\n\t{ value: \"viewer\", label: \"Viewer\" },\n]\n\nconst roleLabel: Record<Role, string> = {\n\towner: \"Owner\",\n\tadmin: \"Admin\",\n\teditor: \"Editor\",\n\tviewer: \"Viewer\",\n}\n\nconst roleSummary: Record<Role, string> = {\n\towner: \"Full access, including payouts and billing. Transfer ownership in studio settings.\",\n\tadmin: \"Manages members, editions and payouts.\",\n\teditor: \"Drafts, prices and releases editions.\",\n\tviewer: \"Sees editions and sales, but can't change them.\",\n}\n\ntype Activity = { id: string; icon: string; text: string; when: string }\n\ntype Member = {\n\tid: string\n\tname: string\n\temail: string\n\tinitials: string\n\trole: Role\n\tpending: boolean\n\thandle?: string\n\tjoined?: string\n\tlastActive?: string\n\teditions?: number\n\tinvitedBy?: string\n\tsent?: string\n\texpires?: string\n\tresent?: boolean\n\tactivity: Activity[]\n}\n\nconst seats = 10\n\nconst initialMembers: Member[] = [\n\t{\n\t\tid: \"u_01\", name: \"Ada Lovelace\", handle: \"@ada\", email: \"ada@atelier.art\", initials: \"AL\", role: \"owner\", pending: false,\n\t\tjoined: \"Mar 4, 2024\", lastActive: \"Online now\", editions: 12,\n\t\tactivity: [\n\t\t\t{ id: \"a1\", icon: \"gem\", text: \"Released Analytical Engine No. 3 — edition of 50\", when: \"2 hours ago\" },\n\t\t\t{ id: \"a2\", icon: \"mail\", text: \"Invited louise@bourgeois.studio as Editor\", when: \"2 days ago\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"u_02\", name: \"Grace Hopper\", handle: \"@grace\", email: \"grace@atelier.art\", initials: \"GH\", role: \"admin\", pending: false,\n\t\tjoined: \"Mar 9, 2024\", lastActive: \"20 minutes ago\", editions: 4,\n\t\tactivity: [\n\t\t\t{ id: \"a1\", icon: \"user\", text: \"Changed Frida Kahlo's role to Viewer\", when: \"Yesterday\" },\n\t\t\t{ id: \"a2\", icon: \"edit\", text: \"Updated pricing on First Compiler — edition of 10\", when: \"3 days ago\" },\n\t\t\t{ id: \"a3\", icon: \"gem\", text: \"Released First Compiler — edition of 10\", when: \"Sep 28\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"u_03\", name: \"Mary Shelley\", handle: \"@mary\", email: \"mary@atelier.art\", initials: \"MS\", role: \"editor\", pending: false,\n\t\tjoined: \"Jun 18, 2024\", lastActive: \"3 hours ago\", editions: 7,\n\t\tactivity: [\n\t\t\t{ id: \"a1\", icon: \"calendar\", text: \"Scheduled Frankenstein Studies for Oct 14\", when: \"3 hours ago\" },\n\t\t\t{ id: \"a2\", icon: \"gem\", text: \"Released The Last Man — edition of 25\", when: \"Sep 21\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"u_04\", name: \"Nina Simone\", handle: \"@nina\", email: \"nina@atelier.art\", initials: \"NS\", role: \"editor\", pending: false,\n\t\tjoined: \"Jan 12, 2025\", lastActive: \"Yesterday\", editions: 3,\n\t\tactivity: [\n\t\t\t{ id: \"a1\", icon: \"upload\", text: \"Uploaded artwork for Little Girl Blue\", when: \"Yesterday\" },\n\t\t\t{ id: \"a2\", icon: \"gem\", text: \"Released Feeling Good — edition of 100\", when: \"Aug 30\" },\n\t\t],\n\t},\n\t{\n\t\tid: \"u_05\", name: \"Frida Kahlo\", handle: \"@frida\", email: \"frida@atelier.art\", initials: \"FK\", role: \"viewer\", pending: false,\n\t\tjoined: \"Jul 2, 2025\", lastActive: \"4 days ago\", editions: 0,\n\t\tactivity: [{ id: \"a1\", icon: \"comment\", text: \"Commented on the Las Dos Fridas draft\", when: \"4 days ago\" }],\n\t},\n\t{\n\t\tid: \"i_01\", name: \"louise@bourgeois.studio\", email: \"louise@bourgeois.studio\", initials: \"\", role: \"editor\", pending: true,\n\t\tinvitedBy: \"Ada Lovelace\", sent: \"2 days ago\", expires: \"In 5 days\",\n\t\tactivity: [],\n\t},\n]\n\nexport function ListDetailPage() {\n\tconst [members, setMembers] = useState(initialMembers)\n\tconst [selectedId, setSelectedId] = useState<string | null>(\"u_02\")\n\tconst [query, setQuery] = useState(\"\")\n\t// Below lg the list and the detail share one column: selecting drills in.\n\tconst [showDetail, setShowDetail] = useState(false)\n\tconst [confirming, setConfirming] = useState(false)\n\tconst listRef = useRef<HTMLDivElement>(null)\n\tconst backRef = useRef<HTMLButtonElement>(null)\n\tconst searchRef = useRef<HTMLInputElement>(null)\n\n\tconst needle = query.trim().toLowerCase()\n\tconst visible = members.filter((m) =>\n\t\t[m.name, m.email, m.handle ?? \"\", roleLabel[m.role]].some((v) => v.toLowerCase().includes(needle)),\n\t)\n\tconst selected = members.find((m) => m.id === selectedId) ?? null\n\tconst active = members.filter((m) => !m.pending).length\n\tconst pending = members.length - active\n\n\t// Drilling in on a phone moves focus to the detail's back control; the\n\t// control is display:none at lg, so desktop focus stays on the list.\n\tuseEffect(() => {\n\t\tif (showDetail && backRef.current?.offsetParent) backRef.current.focus()\n\t}, [showDetail, selectedId])\n\n\tfunction select(id: string) {\n\t\tsetSelectedId(id)\n\t\tsetShowDetail(true)\n\t}\n\n\tfunction focusRow(id: string | undefined) {\n\t\trequestAnimationFrame(() => {\n\t\t\tlistRef.current?.querySelector<HTMLButtonElement>(`[data-member-id=\"${id}\"] button`)?.focus()\n\t\t})\n\t}\n\n\tfunction backToList() {\n\t\tsetShowDetail(false)\n\t\tfocusRow(selectedId ?? undefined)\n\t}\n\n\tfunction setRole(id: string, role: Role) {\n\t\tsetMembers((list) => list.map((m) => (m.id === id ? { ...m, role } : m)))\n\t}\n\n\tfunction resend(id: string) {\n\t\tsetMembers((list) =>\n\t\t\tlist.map((m) => (m.id === id ? { ...m, sent: \"Just now\", expires: \"In 7 days\", resent: true } : m)),\n\t\t)\n\t}\n\n\tfunction remove(id: string) {\n\t\tconst index = members.findIndex((m) => m.id === id)\n\t\tconst rest = members.filter((m) => m.id !== id)\n\t\tsetMembers(rest)\n\t\tconst next = rest[Math.min(index, rest.length - 1)]?.id\n\t\tsetSelectedId(next ?? null)\n\t\tsetShowDetail(false)\n\t\t// The control that opened the confirmation is gone; land on the next row.\n\t\tfocusRow(next)\n\t}\n\n\treturn (\n\t\t<Page as=\"main\" max=\"wide\" gap={4} className=\"py-6\">\n\t\t\t<PageHeader\n\t\t\t\ttitle=\"Members\"\n\t\t\t\tdescription={`${active} members · ${pending} pending ${pending === 1 ? \"invite\" : \"invites\"} · ${members.length} of ${seats} seats used`}\n\t\t\t\tactions={<Button iconStart={<Icon name=\"plus\" />}>Invite member</Button>}\n\t\t\t/>\n\t\t\t<Columns count={{ base: 1, lg: 12 }}>\n\t\t\t\t<Col span={{ base: 1, lg: 5 }} className={showDetail ? \"max-lg:hidden\" : undefined}>\n\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t<SearchInput\n\t\t\t\t\t\t\tref={searchRef}\n\t\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\t\tonValueChange={setQuery}\n\t\t\t\t\t\t\tplaceholder=\"Search name, email or role\"\n\t\t\t\t\t\t\taria-label=\"Search members\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{/* sable-surface derives the rows' selected step from the card (12% ink),\n\t\t\t\t\t\t    so a selected row stays distinct from its muted avatar. */}\n\t\t\t\t\t\t<Card ref={listRef} className=\"sable-surface\">\n\t\t\t\t\t\t\t{visible.length > 0 ? (\n\t\t\t\t\t\t\t\t<CardList aria-label=\"Members\">\n\t\t\t\t\t\t\t\t\t{visible.map((m) => {\n\t\t\t\t\t\t\t\t\t\tconst isSelected = m.id === selectedId\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\t\t\tkey={m.id}\n\t\t\t\t\t\t\t\t\t\t\t\tdata-member-id={m.id}\n\t\t\t\t\t\t\t\t\t\t\t\tinteractive\n\t\t\t\t\t\t\t\t\t\t\t\tselected={isSelected}\n\t\t\t\t\t\t\t\t\t\t\t\tonSelect={() => select(m.id)}\n\t\t\t\t\t\t\t\t\t\t\t\tleading={\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Avatar variant=\"art\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tseed={m.name}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfallback={m.pending ? <Icon name=\"mail\" className=\"size-5\" /> : m.initials}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstatus={m.lastActive === \"Online now\" ? <StatusDot tone=\"success\" /> : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The row's title already names it: keep the initials out of the row's name.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={m.name}\n\t\t\t\t\t\t\t\t\t\t\t\tsubtitle={\n\t\t\t\t\t\t\t\t\t\t\t\t\tm.pending\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? `${roleLabel[m.role]} · invite sent ${m.sent?.toLowerCase()}`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: `${roleLabel[m.role]} · ${m.handle}`\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\taction={m.pending ? <Badge tone=\"info\">Invited</Badge> : undefined}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t\t<EmptyState\n\t\t\t\t\t\t\t\t\t\ticon={<Icon name=\"search\" />}\n\t\t\t\t\t\t\t\t\t\ttitle=\"No members found\"\n\t\t\t\t\t\t\t\t\t\tdescription={`Nobody matches “${query.trim()}”. Try a name, email or role.`}\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" size=\"sm\" onClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetQuery(\"\")\n\t\t\t\t\t\t\t\t\t\t\t\tsearchRef.current?.focus()\n\t\t\t\t\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t\t\t\t\tClear search\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Stack>\n\t\t\t\t</Col>\n\t\t\t\t<Col span={{ base: 1, lg: 7 }} className={showDetail ? undefined : \"max-lg:hidden\"}>\n\t\t\t\t\t<Stack role=\"region\" aria-label=\"Member details\" gap={3} className=\"lg:sticky lg:top-6\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={backRef}\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tbleed=\"start\"\n\t\t\t\t\t\t\ticonStart={<Icon name=\"chevron-left\" />}\n\t\t\t\t\t\t\tonClick={backToList}\n\t\t\t\t\t\t\tclassName=\"self-start lg:hidden\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAll members\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{selected === null ? (\n\t\t\t\t\t\t\t<EmptyState\n\t\t\t\t\t\t\t\tsurface=\"card\"\n\t\t\t\t\t\t\t\ticon={<Icon name=\"user\" />}\n\t\t\t\t\t\t\t\ttitle=\"No member selected\"\n\t\t\t\t\t\t\t\tdescription=\"Choose someone from the list to see their role and activity.\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t\t<Row gap={2}>\n\t\t\t\t\t\t\t\t\t\t\t<Avatar variant=\"art\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\t\t\t\t\t\t\t\tfallback={selected.pending ? <Icon name=\"mail\" className=\"size-6\" /> : selected.initials}\n\t\t\t\t\t\t\t\t\t\t\t\tstatus={selected.lastActive === \"Online now\" ? <StatusDot tone=\"success\" /> : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\talt={selected.pending ? \"Pending invite\" : selected.name}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<Stack gap={0} className=\"min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />} className=\"truncate\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.name}\n\t\t\t\t\t\t\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t\t\t\t\t\t\t<CardDescription className=\"truncate\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.pending ? \"Hasn't joined yet\" : `${selected.handle} · ${selected.email}`}\n\t\t\t\t\t\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t{selected.pending ? (\n\t\t\t\t\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t\t\t\t\t<Badge tone=\"info\">Invited</Badge>\n\t\t\t\t\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t\t\t<Stack gap={5}>\n\t\t\t\t\t\t\t\t\t\t\t<Field\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={selected.pending ? \"Role on joining\" : \"Role\"}\n\t\t\t\t\t\t\t\t\t\t\t\tdescription={roleSummary[selected.role]}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\t\t\t\titems={roles}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={selected.role}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={(value) => setRole(selected.id, value as Role)}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={selected.role === \"owner\"}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger className=\"max-w-72\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{roles\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.filter((r) => r.value !== \"owner\" || selected.role === \"owner\")\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map((r) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem key={r.value} value={r.value}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{r.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"@container\">\n\t\t\t\t\t\t\t\t\t\t\t\t{selected.pending ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<dl className=\"sable-list-dl sable-list-dl-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Sent</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.sent}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Expires</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.expires}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Invited by</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.invitedBy}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</dl>\n\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<dl className=\"sable-list-dl sable-list-dl-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Email</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.email}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Joined</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.joined}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Last active</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd className={selected.lastActive === \"Online now\" ? \"text-success\" : undefined}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.lastActive}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dt>Editions released</dt>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<dd>{selected.editions}</dd>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</dl>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t\t\t{selected.role !== \"owner\" ? (\n\t\t\t\t\t\t\t\t\t\t<CardFooter>\n\t\t\t\t\t\t\t\t\t\t\t<Row gap={2} wrap>\n\t\t\t\t\t\t\t\t\t\t\t\t{selected.pending ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticonStart={<Icon name={selected.resent ? \"check\" : \"send\"} />}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={selected.resent}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => resend(selected.id)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.resent ? \"Invite resent\" : \"Resend invite\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" onClick={() => setConfirming(true)}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{selected.pending ? \"Revoke invite\" : \"Remove from studio\"}\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t{selected.activity.length > 0 ? (\n\t\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t\t\t<CardTitle render={<h3 />}>\n\t\t\t\t\t\t\t\t\t\t\t\tRecent activity\n\t\t\t\t\t\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t\t\t\t{selected.activity.map((a) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={a.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\tleading={<Icon name={a.icon} className=\"text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={a.text}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsubtitle={a.when}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t<DestructiveActionModal\n\t\t\t\t\t\t\t\t\topen={confirming}\n\t\t\t\t\t\t\t\t\tonOpenChange={setConfirming}\n\t\t\t\t\t\t\t\t\ttitle={selected.pending ? \"Revoke this invite?\" : `Remove ${selected.name}?`}\n\t\t\t\t\t\t\t\t\tdescription={\n\t\t\t\t\t\t\t\t\t\tselected.pending\n\t\t\t\t\t\t\t\t\t\t\t? `${selected.email} won't be able to join with the link they were sent.`\n\t\t\t\t\t\t\t\t\t\t\t: \"They lose access to the studio right away. Editions they released stay on sale.\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconfirmLabel={selected.pending ? \"Revoke invite\" : \"Remove member\"}\n\t\t\t\t\t\t\t\t\tonConfirm={() => remove(selected.id)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Stack>\n\t\t\t\t</Col>\n\t\t\t</Columns>\n\t\t</Page>\n\t)\n}"
       },
       {
         "name": "SettingsPage",
@@ -19153,8 +20409,8 @@
           "Field auto-wires htmlFor/id, aria-describedby (description + error), aria-invalid, and required.",
           "DestructiveActionModal is an alertdialog: focus opens on Cancel, the backdrop does not dismiss, and the confirm stays disabled until the handle is typed."
         ],
-        "imports": "import { useState } from \"react\"\nimport { AppHeader, AppShell, Avatar, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Col, Columns, DestructiveActionModal, Entity, Field, Form, Grid, Icon, Input, MenuItem, MenuSeparator, NotificationBadge, OverflowMenu, Page, PageHeader, Row, Select, SelectContent, SelectItem, SelectTrigger, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, SideNav, SideNavItem, Stack, Switch, Textarea } from \"@sableui/react\"",
-        "code": "const sections = [\n\t{ id: \"profile\", label: \"Profile\" },\n\t{ id: \"notifications\", label: \"Notifications\" },\n\t{ id: \"payouts\", label: \"Payouts\" },\n\t{ id: \"account\", label: \"Account\" },\n]\n\nconst timezones = [\n\t{ value: \"europe-london\", label: \"London (GMT+1)\" },\n\t{ value: \"europe-paris\", label: \"Paris (GMT+2)\" },\n\t{ value: \"america-new-york\", label: \"New York (GMT−4)\" },\n\t{ value: \"america-los-angeles\", label: \"Los Angeles (GMT−7)\" },\n\t{ value: \"asia-tokyo\", label: \"Tokyo (GMT+9)\" },\n]\n\nconst notifications = [\n\t{ name: \"notifyCollects\", title: \"New collects\", description: \"When someone collects your work\", on: true },\n\t{ name: \"notifySoldOut\", title: \"Sold out\", description: \"When an edition sells its last copy\", on: true },\n\t{ name: \"notifyFollowers\", title: \"New followers\", description: \"When a collector follows you\", on: false },\n\t{ name: \"notifyDigest\", title: \"Weekly digest\", description: \"Sales and collectors, every Monday\", on: true },\n\t{ name: \"notifyProduct\", title: \"Product updates\", description: \"New Atelier features\", on: false },\n]\n\nconst payouts = [\n\t{ label: \"Next payout\", value: \"$1,284.60\", note: \"Friday, Oct 16\" },\n\t{ label: \"Pending\", value: \"$412.00\", note: \"Clears in 7 days\" },\n\t{ label: \"Paid this year\", value: \"$18,920.00\", note: \"Across 214 collects\" },\n]\n\nexport function SettingsPage() {\n\tconst [activeSection, setActiveSection] = useState(\"profile\")\n\tconst [deleteOpen, setDeleteOpen] = useState(false)\n\n\treturn (\n\t\t<AppShell\n\t\t\t// Sidebar hides below lg, so the same destinations ride in the shell's\n\t\t\t// mobile slots — without them the route has no navigation under 1024px.\n\t\t\theader={\n\t\t\t\t<AppHeader\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Row gap={1} align=\"center\">\n\t\t\t\t\t\t\t<Icon name=\"gem\" variant=\"solid\" className=\"text-xl\" />\n\t\t\t\t\t\t\t<span className=\"text-title-sm\">Atelier</span>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t}\n\t\t\t\t\tactions={<Avatar variant=\"art\" size=\"sm\" fallback=\"AL\" alt=\"Ada Lovelace\" />}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tbottomNav={\n\t\t\t\t<BottomNav aria-label=\"Primary\">\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"grid\" />} label=\"Overview\" showLabel render={<a href=\"/\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"image-stack\" />} label=\"Editions\" showLabel render={<a href=\"/editions\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"user\" />} label=\"Collectors\" showLabel render={<a href=\"/collectors\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"bell\" />} label=\"Activity\" showLabel render={<a href=\"/activity\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"gear\" />} label=\"Settings\" showLabel active render={<a href=\"/settings\" />} />\n\t\t\t\t</BottomNav>\n\t\t\t}\n\t\t\tsidebar={\n\t\t\t\t<Sidebar>\n\t\t\t\t\t<SidebarHeader>\n\t\t\t\t\t\t<Row gap={1} align=\"center\" className=\"px-3\">\n\t\t\t\t\t\t\t<Icon name=\"gem\" variant=\"solid\" className=\"text-xl\" />\n\t\t\t\t\t\t\t<span className=\"text-title-sm\">Atelier</span>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</SidebarHeader>\n\t\t\t\t\t<SidebarNav>\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"grid\" />} label=\"Overview\" render={<a href=\"/\" />} />\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"image-stack\" />} label=\"Editions\" render={<a href=\"/editions\" />} />\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"user\" />} label=\"Collectors\" render={<a href=\"/collectors\" />} />\n\t\t\t\t\t\t<SidebarItem\n\t\t\t\t\t\t\ticon={<Icon name=\"bell\" />}\n\t\t\t\t\t\t\tlabel=\"Activity\"\n\t\t\t\t\t\t\tbadge={<NotificationBadge count={4} tone=\"neutral\" />}\n\t\t\t\t\t\t\trender={<a href=\"/activity\" />}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"gear\" />} label=\"Settings\" active render={<a href=\"/settings\" />} />\n\t\t\t\t\t</SidebarNav>\n\t\t\t\t\t<SidebarFooter>\n\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\tclassName=\"[--entity-py:0]\"\n\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" size=\"sm\" fallback=\"AL\" alt=\"\" />}\n\t\t\t\t\t\t\ttitle=\"Ada Lovelace\"\n\t\t\t\t\t\t\tsubtitle=\"@ada\"\n\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t<OverflowMenu label=\"Account\" size=\"icon-sm\">\n\t\t\t\t\t\t\t\t\t<MenuItem render={<a href=\"/@ada\" />}>View profile</MenuItem>\n\t\t\t\t\t\t\t\t\t<MenuItem render={<a href=\"/settings\" />}>Settings</MenuItem>\n\t\t\t\t\t\t\t\t\t<MenuSeparator />\n\t\t\t\t\t\t\t\t\t<MenuItem>Sign out</MenuItem>\n\t\t\t\t\t\t\t\t</OverflowMenu>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SidebarFooter>\n\t\t\t\t</Sidebar>\n\t\t\t}\n\t\t>\n\t\t\t{/* No `as=\"main\"`: AppShell already renders <main id=\"main-content\">. */}\n\t\t\t<Page max=\"wide\" gap={4} className=\"py-6\">\n\t\t\t\t<PageHeader\n\t\t\t\t\ttitle=\"Settings\"\n\t\t\t\t\tdescription=\"Manage your profile, notifications, and payouts.\"\n\t\t\t\t/>\n\t\t\t\t<Columns gap={4}>\n\t\t\t\t\t{/* The section rail is a desktop aid; on mobile the sections simply stack. */}\n\t\t\t\t\t<Col span={{ base: 12, lg: 3 }} className=\"hidden lg:block\">\n\t\t\t\t\t\t<SideNav aria-label=\"Settings sections\" className=\"sticky top-6\">\n\t\t\t\t\t\t\t{sections.map((section) => (\n\t\t\t\t\t\t\t\t<SideNavItem\n\t\t\t\t\t\t\t\t\tkey={section.id}\n\t\t\t\t\t\t\t\t\tlabel={section.label}\n\t\t\t\t\t\t\t\t\tactive={activeSection === section.id}\n\t\t\t\t\t\t\t\t\tonClick={() => setActiveSection(section.id)}\n\t\t\t\t\t\t\t\t\trender={<a href={`#${section.id}`} />}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</SideNav>\n\t\t\t\t\t</Col>\n\t\t\t\t\t<Col span={{ base: 12, lg: 9 }}>\n\t\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t\t<Card id=\"profile\" className=\"scroll-mt-6\">\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Profile</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>How collectors see you on Atelier.</CardDescription>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t{/* The one explicit save on the page: profile text is drafted, then\n\t\t\t\t\t\t\t\t    committed. Toggles below apply the moment they change. */}\n\t\t\t\t\t\t\t\t<Form onSubmit={(event) => event.preventDefault()} className=\"gap-0\">\n\t\t\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t\t\t\t\t\t<Row gap={2}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Avatar variant=\"art\" size=\"lg\" fallback=\"AL\" alt=\"Ada Lovelace\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<Stack gap={0.5} align=\"start\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Row gap={1}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button type=\"button\" variant=\"outline\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tUpload photo\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button type=\"button\" variant=\"ghost\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tRemove\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-caption text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tSquare PNG or JPG, at least 400 px.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t\t<Grid cols={{ base: 1, sm: 2 }} gap={3}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Field label=\"Display name\" name=\"displayName\" required>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Input defaultValue=\"Ada Lovelace\" autoComplete=\"name\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t\t<Field label=\"Handle\" name=\"handle\" description=\"atelier.com/@ada\" required>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Input defaultValue=\"ada\" autoComplete=\"username\" spellCheck={false} />\n\t\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t\t\t\t\t\t<Field label=\"Bio\" name=\"bio\" description=\"Shown on your profile and edition pages.\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\t\t\t\t\t\trows={3}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefaultValue=\"Generative artist working in plotted ink and code. New editions of 25 to 100 every month.\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t<Grid cols={{ base: 1, sm: 2 }} gap={3}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Field label=\"Timezone\" name=\"timezone\" description=\"Release times use this zone.\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Select defaultValue=\"europe-london\" items={timezones}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{timezones.map((zone) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem key={zone.value} value={zone.value}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{zone.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t\t\t<CardFooter className=\"justify-end\">\n\t\t\t\t\t\t\t\t\t\t<Button type=\"submit\">Save profile</Button>\n\t\t\t\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t\t\t\t</Form>\n\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t<Card id=\"notifications\" className=\"scroll-mt-6\">\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Notifications</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t\t\t\t\tEmail updates about your editions. Changes save automatically.\n\t\t\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t\t{notifications.map((item) => (\n\t\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\t\tkey={item.name}\n\t\t\t\t\t\t\t\t\t\t\ttitle={item.title}\n\t\t\t\t\t\t\t\t\t\t\tsubtitle={item.description}\n\t\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\t\t\tname={item.name}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefaultChecked={item.on}\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t<Card id=\"payouts\" className=\"scroll-mt-6\">\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Payouts</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>Paid in USD every Friday to Chase checking ••4821.</CardDescription>\n\t\t\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" render={<a href=\"/settings/payouts\" />}>\n\t\t\t\t\t\t\t\t\t\t\tManage payouts\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t\t<Grid cols={{ base: 1, sm: 3 }} gap={3}>\n\t\t\t\t\t\t\t\t\t\t{payouts.map((stat) => (\n\t\t\t\t\t\t\t\t\t\t\t<Stack key={stat.label} gap={0.5}>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-body-sm text-muted-foreground\">{stat.label}</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-mono-lg text-foreground\">{stat.value}</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-caption text-muted-foreground\">{stat.note}</p>\n\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t<Card id=\"account\" className=\"scroll-mt-6\">\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Account</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>Sign-in details and your data.</CardDescription>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tleading={<Icon name=\"mail\" className=\"text-lg text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Email\"\n\t\t\t\t\t\t\t\t\t\tsubtitle=\"ada@atelier.art\"\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t\tChange\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tleading={<Icon name=\"download\" className=\"text-lg text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Export data\"\n\t\t\t\t\t\t\t\t\t\tsubtitle=\"Editions, sales, and collectors\"\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t\tExport\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Delete account</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t\t\t\t\tPermanently remove your profile, editions, and sales history. Collectors keep\n\t\t\t\t\t\t\t\t\t\tthe editions they own.\n\t\t\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t<CardFooter className=\"justify-end\">\n\t\t\t\t\t\t\t\t\t<Button variant=\"destructive\" onClick={() => setDeleteOpen(true)}>\n\t\t\t\t\t\t\t\t\t\tDelete account\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Col>\n\t\t\t\t</Columns>\n\t\t\t</Page>\n\t\t\t<DestructiveActionModal\n\t\t\t\topen={deleteOpen}\n\t\t\t\tonOpenChange={setDeleteOpen}\n\t\t\t\ttitle=\"Delete your account?\"\n\t\t\t\tdescription=\"This permanently removes your profile, 12 editions, and sales history. Pending payouts are still sent. This can't be undone.\"\n\t\t\t\tconfirmLabel=\"Delete account\"\n\t\t\t\tconfirmingLabel=\"Deleting…\"\n\t\t\t\tconfirmText=\"ada\"\n\t\t\t\tonConfirm={() => setDeleteOpen(false)}\n\t\t\t/>\n\t\t</AppShell>\n\t)\n}"
+        "imports": "import { useState } from \"react\"\nimport { AppHeader, AppShell, Avatar, BottomNav, BottomNavItem, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Col, Columns, DestructiveActionModal, Entity, Field, Form, Grid, Icon, Input, MenuItem, MenuSeparator, NotificationBadge, OverflowMenu, Page, PageHeader, Row, Select, SelectContent, SelectItem, SelectTrigger, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, SideNav, SideNavItem, Stack, Switch, Textarea } from \"@sableui/react\"",
+        "code": "const sections = [\n\t{ id: \"profile\", label: \"Profile\" },\n\t{ id: \"notifications\", label: \"Notifications\" },\n\t{ id: \"payouts\", label: \"Payouts\" },\n\t{ id: \"account\", label: \"Account\" },\n]\n\nconst timezones = [\n\t{ value: \"europe-london\", label: \"London (GMT+1)\" },\n\t{ value: \"europe-paris\", label: \"Paris (GMT+2)\" },\n\t{ value: \"america-new-york\", label: \"New York (GMT−4)\" },\n\t{ value: \"america-los-angeles\", label: \"Los Angeles (GMT−7)\" },\n\t{ value: \"asia-tokyo\", label: \"Tokyo (GMT+9)\" },\n]\n\nconst notifications = [\n\t{ name: \"notifyCollects\", title: \"New collects\", description: \"When someone collects your work\", on: true },\n\t{ name: \"notifySoldOut\", title: \"Sold out\", description: \"When an edition sells its last copy\", on: true },\n\t{ name: \"notifyFollowers\", title: \"New followers\", description: \"When a collector follows you\", on: false },\n\t{ name: \"notifyDigest\", title: \"Weekly digest\", description: \"Sales and collectors, every Monday\", on: true },\n\t{ name: \"notifyProduct\", title: \"Product updates\", description: \"New Atelier features\", on: false },\n]\n\nconst payouts = [\n\t{ label: \"Next payout\", value: \"$1,284.60\", note: \"Friday, Oct 16\" },\n\t{ label: \"Pending\", value: \"$412.00\", note: \"Clears in 7 days\" },\n\t{ label: \"Paid this year\", value: \"$18,920.00\", note: \"Across 214 collects\" },\n]\n\nexport function SettingsPage() {\n\tconst [activeSection, setActiveSection] = useState(\"profile\")\n\tconst [deleteOpen, setDeleteOpen] = useState(false)\n\n\treturn (\n\t\t<AppShell\n\t\t\t// Sidebar hides below lg, so the same destinations ride in the shell's\n\t\t\t// mobile slots — without them the route has no navigation under 1024px.\n\t\t\theader={\n\t\t\t\t<AppHeader\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Row gap={1} align=\"center\">\n\t\t\t\t\t\t\t<Icon name=\"gem\" variant=\"solid\" className=\"text-xl\" />\n\t\t\t\t\t\t\t<span className=\"text-title-sm\">Atelier</span>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t}\n\t\t\t\t\tactions={<Avatar variant=\"art\" size=\"sm\" fallback=\"AL\" alt=\"Ada Lovelace\" />}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tbottomNav={\n\t\t\t\t<BottomNav aria-label=\"Primary\">\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"grid\" />} label=\"Overview\" showLabel render={<a href=\"/\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"image-stack\" />} label=\"Editions\" showLabel render={<a href=\"/editions\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"user\" />} label=\"Collectors\" showLabel render={<a href=\"/collectors\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"bell\" />} label=\"Activity\" showLabel render={<a href=\"/activity\" />} />\n\t\t\t\t\t<BottomNavItem icon={<Icon name=\"gear\" />} label=\"Settings\" showLabel active render={<a href=\"/settings\" />} />\n\t\t\t\t</BottomNav>\n\t\t\t}\n\t\t\tsidebar={\n\t\t\t\t<Sidebar>\n\t\t\t\t\t<SidebarHeader>\n\t\t\t\t\t\t<SidebarBrand mark={<Icon name=\"gem\" variant=\"solid\" />} label=\"Atelier\" render={<a href=\"/\" />} />\n\t\t\t\t\t</SidebarHeader>\n\t\t\t\t\t<SidebarNav>\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"grid\" />} label=\"Overview\" render={<a href=\"/\" />} />\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"image-stack\" />} label=\"Editions\" render={<a href=\"/editions\" />} />\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"user\" />} label=\"Collectors\" render={<a href=\"/collectors\" />} />\n\t\t\t\t\t\t<SidebarItem\n\t\t\t\t\t\t\ticon={<Icon name=\"bell\" />}\n\t\t\t\t\t\t\tlabel=\"Activity\"\n\t\t\t\t\t\t\tbadge={<NotificationBadge count={4} tone=\"neutral\" />}\n\t\t\t\t\t\t\trender={<a href=\"/activity\" />}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SidebarItem icon={<Icon name=\"gear\" />} label=\"Settings\" active render={<a href=\"/settings\" />} />\n\t\t\t\t\t</SidebarNav>\n\t\t\t\t\t<SidebarFooter>\n\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\tclassName=\"[--entity-py:0]\"\n\t\t\t\t\t\t\tleading={<Avatar variant=\"art\" size=\"sm\" fallback=\"AL\" alt=\"\" />}\n\t\t\t\t\t\t\ttitle=\"Ada Lovelace\"\n\t\t\t\t\t\t\tsubtitle=\"@ada\"\n\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t<OverflowMenu label=\"Account\" size=\"icon-sm\">\n\t\t\t\t\t\t\t\t\t<MenuItem render={<a href=\"/@ada\" />}>View profile</MenuItem>\n\t\t\t\t\t\t\t\t\t<MenuItem render={<a href=\"/settings\" />}>Settings</MenuItem>\n\t\t\t\t\t\t\t\t\t<MenuSeparator />\n\t\t\t\t\t\t\t\t\t<MenuItem>Sign out</MenuItem>\n\t\t\t\t\t\t\t\t</OverflowMenu>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SidebarFooter>\n\t\t\t\t</Sidebar>\n\t\t\t}\n\t\t>\n\t\t\t{/* No `as=\"main\"`: AppShell already renders <main id=\"main-content\">. */}\n\t\t\t<Page max=\"wide\" gap={4} className=\"py-6\">\n\t\t\t\t<PageHeader\n\t\t\t\t\ttitle=\"Settings\"\n\t\t\t\t\tdescription=\"Manage your profile, notifications, and payouts.\"\n\t\t\t\t/>\n\t\t\t\t<Columns gap={4}>\n\t\t\t\t\t{/* The section rail is a desktop aid; on mobile the sections simply stack. */}\n\t\t\t\t\t<Col span={{ base: 12, lg: 3 }} className=\"hidden lg:block\">\n\t\t\t\t\t\t<SideNav aria-label=\"Settings sections\" className=\"sticky top-6\">\n\t\t\t\t\t\t\t{sections.map((section) => (\n\t\t\t\t\t\t\t\t<SideNavItem\n\t\t\t\t\t\t\t\t\tkey={section.id}\n\t\t\t\t\t\t\t\t\tlabel={section.label}\n\t\t\t\t\t\t\t\t\tactive={activeSection === section.id}\n\t\t\t\t\t\t\t\t\tonClick={() => setActiveSection(section.id)}\n\t\t\t\t\t\t\t\t\trender={<a href={`#${section.id}`} />}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</SideNav>\n\t\t\t\t\t</Col>\n\t\t\t\t\t<Col span={{ base: 12, lg: 9 }}>\n\t\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t\t<Card id=\"profile\" className=\"scroll-mt-6\">\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Profile</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>How collectors see you on Atelier.</CardDescription>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t{/* The one explicit save on the page: profile text is drafted, then\n\t\t\t\t\t\t\t\t    committed. Toggles below apply the moment they change. */}\n\t\t\t\t\t\t\t\t<Form onSubmit={(event) => event.preventDefault()} className=\"gap-0\">\n\t\t\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t\t\t<Stack gap={3}>\n\t\t\t\t\t\t\t\t\t\t\t<Row gap={2}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Avatar variant=\"art\" size=\"lg\" fallback=\"AL\" alt=\"Ada Lovelace\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<Stack gap={0.5} align=\"start\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Row gap={1}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button type=\"button\" variant=\"outline\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tUpload photo\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button type=\"button\" variant=\"ghost\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tRemove\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-caption text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tSquare PNG or JPG, at least 400 px.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t\t<Grid cols={{ base: 1, sm: 2 }} gap={3}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Field label=\"Display name\" name=\"displayName\" required>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Input defaultValue=\"Ada Lovelace\" autoComplete=\"name\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t\t<Field label=\"Handle\" name=\"handle\" description=\"atelier.com/@ada\" required>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Input defaultValue=\"ada\" autoComplete=\"username\" spellCheck={false} />\n\t\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t\t\t\t\t\t<Field label=\"Bio\" name=\"bio\" description=\"Shown on your profile and edition pages.\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\t\t\t\t\t\trows={3}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefaultValue=\"Generative artist working in plotted ink and code. New editions of 25 to 100 every month.\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t<Grid cols={{ base: 1, sm: 2 }} gap={3}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Field label=\"Timezone\" name=\"timezone\" description=\"Release times use this zone.\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Select defaultValue=\"europe-london\" items={timezones}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{timezones.map((zone) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem key={zone.value} value={zone.value}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{zone.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t\t\t<CardFooter className=\"justify-end\">\n\t\t\t\t\t\t\t\t\t\t<Button type=\"submit\">Save profile</Button>\n\t\t\t\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t\t\t\t</Form>\n\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t<Card id=\"notifications\" className=\"scroll-mt-6\">\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Notifications</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t\t\t\t\tEmail updates about your editions. Changes save automatically.\n\t\t\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t\t{notifications.map((item) => (\n\t\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\t\tkey={item.name}\n\t\t\t\t\t\t\t\t\t\t\ttitle={item.title}\n\t\t\t\t\t\t\t\t\t\t\tsubtitle={item.description}\n\t\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\t\t\tname={item.name}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefaultChecked={item.on}\n\t\t\t\t\t\t\t\t\t\t\t\t\taria-label={item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t<Card id=\"payouts\" className=\"scroll-mt-6\">\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Payouts</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>Paid in USD every Friday to Chase checking ••4821.</CardDescription>\n\t\t\t\t\t\t\t\t\t<CardAction>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" render={<a href=\"/settings/payouts\" />}>\n\t\t\t\t\t\t\t\t\t\t\tManage payouts\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</CardAction>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t\t\t\t<Grid cols={{ base: 1, sm: 3 }} gap={3}>\n\t\t\t\t\t\t\t\t\t\t{payouts.map((stat) => (\n\t\t\t\t\t\t\t\t\t\t\t<Stack key={stat.label} gap={0.5}>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-body-sm text-muted-foreground\">{stat.label}</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-mono-lg text-foreground\">{stat.value}</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-caption text-muted-foreground\">{stat.note}</p>\n\t\t\t\t\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t<Card id=\"account\" className=\"scroll-mt-6\">\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Account</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>Sign-in details and your data.</CardDescription>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t<CardList>\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tleading={<Icon name=\"mail\" className=\"text-lg text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Email\"\n\t\t\t\t\t\t\t\t\t\tsubtitle=\"ada@atelier.art\"\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t\tChange\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Entity\n\t\t\t\t\t\t\t\t\t\tleading={<Icon name=\"download\" className=\"text-lg text-muted-foreground\" />}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Export data\"\n\t\t\t\t\t\t\t\t\t\tsubtitle=\"Editions, sales, and collectors\"\n\t\t\t\t\t\t\t\t\t\taction={\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t\tExport\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</CardList>\n\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t\t\t<CardTitle render={<h2 />}>Delete account</CardTitle>\n\t\t\t\t\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t\t\t\t\tPermanently remove your profile, editions, and sales history. Collectors keep\n\t\t\t\t\t\t\t\t\t\tthe editions they own.\n\t\t\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t<CardFooter className=\"justify-end\">\n\t\t\t\t\t\t\t\t\t<Button variant=\"destructive\" onClick={() => setDeleteOpen(true)}>\n\t\t\t\t\t\t\t\t\t\tDelete account\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Col>\n\t\t\t\t</Columns>\n\t\t\t</Page>\n\t\t\t<DestructiveActionModal\n\t\t\t\topen={deleteOpen}\n\t\t\t\tonOpenChange={setDeleteOpen}\n\t\t\t\ttitle=\"Delete your account?\"\n\t\t\t\tdescription=\"This permanently removes your profile, 12 editions, and sales history. Pending payouts are still sent. This can't be undone.\"\n\t\t\t\tconfirmLabel=\"Delete account\"\n\t\t\t\tconfirmingLabel=\"Deleting…\"\n\t\t\t\tconfirmText=\"ada\"\n\t\t\t\tonConfirm={() => setDeleteOpen(false)}\n\t\t\t/>\n\t\t</AppShell>\n\t)\n}"
       }
     ]
   },
@@ -19507,8 +20763,8 @@
           "Every icon-only Button carries aria-label, and play/pause's label follows its state.",
           "The Slider carries aria-label=\"Position\". Give it aria-valuetext in your player (\"1:24 of 3:40\") so the position is read as time, not a percentage."
         ],
-        "imports": "import { useState } from \"react\"\nimport { Button, Card, CardContent, cn, Entity, GradientArt, Icon, Slider } from \"@sableui/react\"",
-        "code": "const track = { title: \"Low tide, high noon\", artist: \"Juno Avery\", position: 38, elapsed: \"1:24\", remaining: \"-2:16\" }\n\n\nexport interface MediaPlayerBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a Sheet or muted section that already frames it. */\n\tframed?: boolean\n\t/** Called with the new playing state. */\n\tonPlayingChange?: (playing: boolean) => void\n\tonPrevious?: () => void\n\tonNext?: () => void\n}\n\nexport function MediaPlayerBlock({ className, framed = true, onPlayingChange, onPrevious, onNext }: MediaPlayerBlockProps) {\n\tconst [playing, setPlaying] = useState(true)\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-xs\", className)}>\n\t\t\t<CardContent className=\"flex flex-col gap-4\">\n\t\t\t\t{/* Entity's own row padding is for lists; inside a card's content the\n\t\t\t\t    card already pads it. */}\n\t\t\t\t<Entity\n\t\t\t\t\tclassName=\"p-0\"\n\t\t\t\t\t// Placeholder cover painted from the theme. Replace with the cover image.\n\t\t\t\t\tleading={<GradientArt aria-hidden seed={track.title} className=\"size-14 rounded-md\" />}\n\t\t\t\t\ttitle={track.title}\n\t\t\t\t\tsubtitle={track.artist}\n\t\t\t\t\taction={\n\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Like\">\n\t\t\t\t\t\t\t<Icon name=\"heart\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<div className=\"flex flex-col gap-1.5\">\n\t\t\t\t\t<Slider defaultValue={track.position} aria-label=\"Position\" />\n\t\t\t\t\t<div className=\"flex justify-between text-mono-caption text-muted-foreground\">\n\t\t\t\t\t\t<span>{track.elapsed}</span>\n\t\t\t\t\t\t<span>{track.remaining}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex items-center justify-center gap-3\">\n\t\t\t\t\t<Button variant=\"ghost\" size=\"icon\" aria-label=\"Previous\" onClick={onPrevious}>\n\t\t\t\t\t\t<Icon name=\"previous\" variant=\"solid\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\taria-label={playing ? \"Pause\" : \"Play\"}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetPlaying(!playing)\n\t\t\t\t\t\t\tonPlayingChange?.(!playing)\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon name={playing ? \"pause\" : \"play\"} variant=\"solid\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button variant=\"ghost\" size=\"icon\" aria-label=\"Next\" onClick={onNext}>\n\t\t\t\t\t\t<Icon name=\"next\" variant=\"solid\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t)\n}"
+        "imports": "import { useState } from \"react\"\nimport { Button, Card, CardContent, cn, Entity, Icon, MediaImage, Slider } from \"@sableui/react\"",
+        "code": "// `cover` is the artwork URL; left empty, the cover paints art seeded by the title.\nconst track = { title: \"Low tide, high noon\", artist: \"Juno Avery\", cover: \"\", duration: 220, position: 84 }\n\n/** Seconds → m:ss, the way the readout and the screen reader both say it. */\nfunction formatTime(seconds: number) {\n\treturn `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, \"0\")}`\n}\n\n\nexport interface MediaPlayerBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a Sheet or muted section that already frames it. */\n\tframed?: boolean\n\t/** Called with the new playing state. */\n\tonPlayingChange?: (playing: boolean) => void\n\tonPrevious?: () => void\n\tonNext?: () => void\n}\n\nexport function MediaPlayerBlock({ className, framed = true, onPlayingChange, onPrevious, onNext }: MediaPlayerBlockProps) {\n\tconst [playing, setPlaying] = useState(true)\n\tconst [position, setPosition] = useState(track.position)\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-xs\", className)}>\n\t\t\t<CardContent className=\"flex flex-col gap-4\">\n\t\t\t\t{/* Entity's own row padding is for lists; inside a card's content the\n\t\t\t\t    card already pads it. */}\n\t\t\t\t<Entity\n\t\t\t\t\tclassName=\"p-0\"\n\t\t\t\t\tleading={<MediaImage src={track.cover} seed={track.title} className=\"size-14 shrink-0 rounded-md\" />}\n\t\t\t\t\ttitle={track.title}\n\t\t\t\t\tsubtitle={track.artist}\n\t\t\t\t\taction={\n\t\t\t\t\t\t<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Like\">\n\t\t\t\t\t\t\t<Icon name=\"heart\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<div className=\"flex flex-col gap-1.5\">\n\t\t\t\t\t<Slider\n\t\t\t\t\t\tvalue={position}\n\t\t\t\t\t\tmax={track.duration}\n\t\t\t\t\t\tonValueChange={setPosition}\n\t\t\t\t\t\taria-label=\"Position\"\n\t\t\t\t\t\t// Spoken as a time, not \"38\": the number alone means nothing.\n\t\t\t\t\t\tgetAriaValueText={(_, value) => `${formatTime(value)} of ${formatTime(track.duration)}`}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"flex justify-between text-mono-caption text-muted-foreground\">\n\t\t\t\t\t\t<span>{formatTime(position)}</span>\n\t\t\t\t\t\t<span>-{formatTime(track.duration - position)}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex items-center justify-center gap-3\">\n\t\t\t\t\t<Button variant=\"ghost\" size=\"icon\" aria-label=\"Previous\" onClick={onPrevious}>\n\t\t\t\t\t\t<Icon name=\"previous\" variant=\"solid\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\taria-label={playing ? \"Pause\" : \"Play\"}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetPlaying(!playing)\n\t\t\t\t\t\t\tonPlayingChange?.(!playing)\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon name={playing ? \"pause\" : \"play\"} variant=\"solid\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button variant=\"ghost\" size=\"icon\" aria-label=\"Next\" onClick={onNext}>\n\t\t\t\t\t\t<Icon name=\"next\" variant=\"solid\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t)\n}"
       },
       {
         "name": "NewsletterBlock",
@@ -19681,8 +20937,8 @@
           "The placeholder art is aria-hidden. A real product image needs alt text naming the product.",
           "The card is not a link: it holds its own button. To make the whole card navigate, move the action to the detail page and render the Card as an <a>."
         ],
-        "imports": "import { Badge, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, cn, GradientArt } from \"@sableui/react\"",
-        "code": "const product = { title: \"Untitled (gold rush)\", maker: \"Mara Okafor\", edition: \"12 of 50\", price: \"0.42 SOL\" }\n\n\nexport interface ProductCardBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n\t/** The buy action. */\n\tonCollect?: () => void\n}\n\nexport function ProductCardBlock({ className, framed = true, onCollect }: ProductCardBlockProps) {\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-xs overflow-hidden\", className)}>\n\t\t\t{/* Placeholder art painted from the theme, so it follows every look. Replace with the product image. */}\n\t\t\t<GradientArt aria-hidden seed={product.title} className=\"aspect-[4/3]\" />\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>{product.title}</CardTitle>\n\t\t\t\t<CardDescription>{product.maker}</CardDescription>\n\t\t\t\t<CardAction>\n\t\t\t\t\t<Badge tone=\"edition\">{product.edition}</Badge>\n\t\t\t\t</CardAction>\n\t\t\t</CardHeader>\n\t\t\t<CardFooter className=\"justify-between pt-4\">\n\t\t\t\t<span className=\"text-mono-lg\">{product.price}</span>\n\t\t\t\t<Button onClick={onCollect}>Collect</Button>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
+        "imports": "import { AspectBox, Badge, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, cn, MediaImage } from \"@sableui/react\"",
+        "code": "// `image` is the product shot URL; left empty, it paints art seeded by the title.\nconst product = { title: \"Untitled (gold rush)\", maker: \"Mara Okafor\", image: \"\", edition: \"12 of 50\", price: \"0.42 SOL\" }\n\n\nexport interface ProductCardBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n\t/** The buy action. */\n\tonCollect?: () => void\n}\n\nexport function ProductCardBlock({ className, framed = true, onCollect }: ProductCardBlockProps) {\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-xs overflow-hidden\", className)}>\n\t\t\t<AspectBox ratio={4 / 3}>\n\t\t\t\t<MediaImage src={product.image} seed={product.title} />\n\t\t\t</AspectBox>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>{product.title}</CardTitle>\n\t\t\t\t<CardDescription>{product.maker}</CardDescription>\n\t\t\t\t<CardAction>\n\t\t\t\t\t<Badge tone=\"edition\">{product.edition}</Badge>\n\t\t\t\t</CardAction>\n\t\t\t</CardHeader>\n\t\t\t<CardFooter className=\"justify-between pt-4\">\n\t\t\t\t<span className=\"text-mono-lg\">{product.price}</span>\n\t\t\t\t<Button onClick={onCollect}>Collect</Button>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
       },
       {
         "name": "ProfileCardBlock",
@@ -19878,7 +21134,7 @@
           "Category Badges carry text; the tone only groups them visually."
         ],
         "imports": "import { useState, useId } from \"react\"\nimport { Badge, Button, Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, cn, Icon, Label } from \"@sableui/react\"",
-        "code": "const tasks = [\n\t{ title: \"Pick the cover type\", tag: \"Design\", tone: \"collectible\", done: true },\n\t{ title: \"Wire up checkout\", tag: \"Engineering\", tone: \"info\", done: false },\n\t{ title: \"Draft launch post\", tag: \"Launch\", tone: \"edition\", done: false },\n] as const\n\nexport interface TaskListBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n\tonAddTask?: () => void\n}\n\nexport function TaskListBlock({ className, framed = true, onAddTask }: TaskListBlockProps) {\n\tconst [done, setDone] = useState<boolean[]>(tasks.map((t) => t.done))\n\tconst id = useId()\n\tconst left = done.filter((d) => !d).length\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-xs\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>This week</CardTitle>\n\t\t\t\t<CardAction>\n\t\t\t\t\t<span className=\"text-caption text-muted-foreground\">{left} left</span>\n\t\t\t\t</CardAction>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<ul className=\"flex flex-col gap-1\">\n\t\t\t\t\t{tasks.map((task, i) => (\n\t\t\t\t\t\t<li key={task.title} className=\"flex items-center gap-3 py-1.5\">\n\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\tid={`${id}-${i}`}\n\t\t\t\t\t\t\t\tchecked={done[i]}\n\t\t\t\t\t\t\t\tonCheckedChange={(v: boolean) => setDone(done.map((d, j) => (j === i ? v : d)))}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\thtmlFor={`${id}-${i}`}\n\t\t\t\t\t\t\t\tclassName={cn(\"min-w-0 flex-1 motion-interactive\", done[i] && \"text-muted-foreground line-through\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{task.title}\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t<Badge tone={task.tone} size=\"sm\">\n\t\t\t\t\t\t\t\t{task.tag}\n\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t<Button variant=\"ghost\" size=\"sm\" iconStart={<Icon name=\"plus\" />} onClick={onAddTask}>\n\t\t\t\t\tAdd task\n\t\t\t\t</Button>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
+        "code": "const tasks = [\n\t{ title: \"Pick the cover type\", tag: \"Design\", tone: \"collectible\", done: true },\n\t{ title: \"Wire up checkout\", tag: \"Engineering\", tone: \"info\", done: false },\n\t{ title: \"Draft launch post\", tag: \"Launch\", tone: \"edition\", done: false },\n] as const\n\nexport interface TaskListBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n\tonAddTask?: () => void\n}\n\nexport function TaskListBlock({ className, framed = true, onAddTask }: TaskListBlockProps) {\n\tconst [done, setDone] = useState<boolean[]>(tasks.map((t) => t.done))\n\tconst id = useId()\n\tconst left = done.filter((d) => !d).length\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-xs\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>This week</CardTitle>\n\t\t\t\t<CardAction>\n\t\t\t\t\t<span className=\"text-caption text-muted-foreground\">{left} left</span>\n\t\t\t\t</CardAction>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<ul className=\"flex flex-col gap-1\">\n\t\t\t\t\t{tasks.map((task, i) => (\n\t\t\t\t\t\t<li key={task.title} className=\"flex items-center gap-3 py-1.5\">\n\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\tid={`${id}-${i}`}\n\t\t\t\t\t\t\t\tchecked={done[i]}\n\t\t\t\t\t\t\t\tonCheckedChange={(v: boolean) => setDone(done.map((d, j) => (j === i ? v : d)))}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\thtmlFor={`${id}-${i}`}\n\t\t\t\t\t\t\t\tclassName={cn(\"min-w-0 flex-1 motion-interactive\", done[i] && \"text-muted-foreground line-through\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{task.title}\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t<Badge tone={task.tone} size=\"sm\">\n\t\t\t\t\t\t\t\t{task.tag}\n\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t<Button variant=\"ghost\" size=\"sm\" bleed=\"start\" iconStart={<Icon name=\"plus\" />} onClick={onAddTask}>\n\t\t\t\t\tAdd task\n\t\t\t\t</Button>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
       },
       {
         "name": "TeamMembersBlock",
@@ -19943,7 +21199,7 @@
           "Hovering or arrowing through the slices pulls each out and announces it."
         ],
         "imports": "import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, PieChart } from \"@sableui/react\"",
-        "code": "const sources = [\n\t{ source: \"Search\", visitors: 4280 },\n\t{ source: \"Direct\", visitors: 2910 },\n\t{ source: \"Social\", visitors: 1840 },\n\t{ source: \"Email\", visitors: 960 },\n]\n\nconst total = sources.reduce((sum, s) => sum + s.visitors, 0)\n\nexport interface TrafficSourcesBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n}\n\nexport function TrafficSourcesBlock({ className, framed = true }: TrafficSourcesBlockProps) {\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-sm\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle render={<h2 />}>Traffic sources</CardTitle>\n\t\t\t\t<CardDescription>Where this month's visitors came from.</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<PieChart\n\t\t\t\t\tlabel=\"Visitors by source, this month\"\n\t\t\t\t\tdata={sources}\n\t\t\t\t\tindex=\"source\"\n\t\t\t\t\tvalueKey=\"visitors\"\n\t\t\t\t\tdonut\n\t\t\t\t\tcenterLabel={{ value: total.toLocaleString(\"en-US\"), label: \"Visitors\" }}\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"text-body-sm text-muted-foreground\">\n\t\t\t\tSearch brings {Math.round((sources[0].visitors / total) * 100)}% of visitors.\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
+        "code": "const sources = [\n\t{ source: \"Search\", visitors: 4280 },\n\t{ source: \"Direct\", visitors: 2910 },\n\t{ source: \"Social\", visitors: 1840 },\n\t{ source: \"Email\", visitors: 960 },\n]\n\nconst total = sources.reduce((sum, s) => sum + s.visitors, 0)\n\nexport interface TrafficSourcesBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n}\n\nexport function TrafficSourcesBlock({ className, framed = true }: TrafficSourcesBlockProps) {\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-sm\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle render={<h2 />}>Traffic sources</CardTitle>\n\t\t\t\t<CardDescription>Where this month's visitors came from.</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<PieChart\n\t\t\t\t\tlabel=\"Visitors by source, this month\"\n\t\t\t\t\tdata={sources}\n\t\t\t\t\tindex=\"source\"\n\t\t\t\t\tvalueKey=\"visitors\"\n\t\t\t\t\tdonut\n\t\t\t\t\tcenterLabel={{ value: total, label: \"Visitors\" }}\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"text-body-sm text-muted-foreground\">\n\t\t\t\tSearch brings {Math.round((sources[0].visitors / total) * 100)}% of visitors.\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
       },
       {
         "name": "TrafficTrendBlock",
@@ -19966,7 +21222,7 @@
           "The range control is a labelled ToggleGroup; the chart is one tab stop with arrow-key navigation."
         ],
         "imports": "import { useState } from \"react\"\nimport { AreaChart, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Icon, Toggle, ToggleGroup } from \"@sableui/react\"",
-        "code": "/** 90 days of visitors — replace with your own rows ({ date, desktop, mobile }). */\nconst days = Array.from({ length: 90 }, (_, i) => {\n\tconst wave = Math.sin(i / 6) * 60 + Math.sin(i / 2.3) * 25\n\treturn {\n\t\tdate: new Date(2026, 6, 1 + i).toISOString().slice(0, 10),\n\t\tdesktop: Math.round(240 + wave + (i % 7) * 9),\n\t\tmobile: Math.round(160 + wave * 0.7 + ((i * 3) % 11) * 6),\n\t}\n})\n\nconst series = [\n\t{ key: \"desktop\", label: \"Desktop\" },\n\t{ key: \"mobile\", label: \"Mobile\" },\n]\n\nconst ranges = [\n\t{ id: \"90d\", label: \"3 months\", days: 90 },\n\t{ id: \"30d\", label: \"30 days\", days: 30 },\n\t{ id: \"7d\", label: \"7 days\", days: 7 },\n]\n\nconst shortDate = (iso: string) => new Date(`${iso}T00:00:00`).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })\n\nexport interface TrafficTrendBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n}\n\nexport function TrafficTrendBlock({ className, framed = true }: TrafficTrendBlockProps) {\n\tconst [range, setRange] = useState(\"90d\")\n\tconst shown = days.slice(-(ranges.find((r) => r.id === range)?.days ?? 90))\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-3xl\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle render={<h2 />}>Visitors</CardTitle>\n\t\t\t\t<CardDescription>Desktop and mobile, by day.</CardDescription>\n\t\t\t\t<CardAction>\n\t\t\t\t\t<ToggleGroup value={[range]} onValueChange={(v: unknown[]) => v[0] && setRange(String(v[0]))} aria-label=\"Time range\">\n\t\t\t\t\t\t{ranges.map((r) => (\n\t\t\t\t\t\t\t<Toggle key={r.id} value={r.id}>\n\t\t\t\t\t\t\t\t{r.label}\n\t\t\t\t\t\t\t</Toggle>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</CardAction>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<AreaChart\n\t\t\t\t\tlabel={`Visitors per day, last ${ranges.find((r) => r.id === range)?.label}`}\n\t\t\t\t\tdata={shown}\n\t\t\t\t\tindex=\"date\"\n\t\t\t\t\tseries={series}\n\t\t\t\t\tindexFormatter={shortDate}\n\t\t\t\t\ttooltip={{ labelFormatter: (d) => new Date(`${d}T00:00:00`).toLocaleDateString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\" }) }}\n\t\t\t\t\tstacked\n\t\t\t\t\tgradient\n\t\t\t\t\tclassName=\"h-64\"\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"gap-1.5 text-body-sm\">\n\t\t\t\t<Icon name=\"arrow-up\" className=\"text-success\" />\n\t\t\t\t<span>\n\t\t\t\t\tUp 5.2% on the previous period <span className=\"text-muted-foreground\">· desktop leads every week</span>\n\t\t\t\t</span>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
+        "code": "/** 90 days of visitors — replace with your own rows ({ date, desktop, mobile }). */\nconst days = Array.from({ length: 90 }, (_, i) => {\n\tconst wave = Math.sin(i / 6) * 60 + Math.sin(i / 2.3) * 25\n\treturn {\n\t\tdate: new Date(2026, 6, 1 + i).toISOString().slice(0, 10),\n\t\tdesktop: Math.round(240 + wave + (i % 7) * 9),\n\t\tmobile: Math.round(160 + wave * 0.7 + ((i * 3) % 11) * 6),\n\t}\n})\n\nconst series = [\n\t{ key: \"desktop\", label: \"Desktop\" },\n\t{ key: \"mobile\", label: \"Mobile\" },\n]\n\nconst ranges = [\n\t{ id: \"90d\", label: \"3 months\", days: 90 },\n\t{ id: \"30d\", label: \"30 days\", days: 30 },\n\t{ id: \"7d\", label: \"7 days\", days: 7 },\n]\n\nconst shortDate = (iso: string) => new Date(`${iso}T00:00:00`).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })\n\nexport interface TrafficTrendBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a muted section that already frames it. */\n\tframed?: boolean\n}\n\nexport function TrafficTrendBlock({ className, framed = true }: TrafficTrendBlockProps) {\n\tconst [range, setRange] = useState(\"90d\")\n\tconst shown = days.slice(-(ranges.find((r) => r.id === range)?.days ?? 90))\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"@container/trend w-full max-w-3xl\", className)}>\n\t\t\t<CardHeader className=\"@max-sm/trend:has-data-[slot=card-action]:grid-cols-1\">\n\t\t\t\t<CardTitle render={<h2 />}>Visitors</CardTitle>\n\t\t\t\t<CardDescription>Desktop and mobile, by day.</CardDescription>\n\t\t\t\t{/* Beside the title on a wide card; under it on a narrow one, where three\n\t\t\t\t    ranges would squeeze the title and description into a sliver. */}\n\t\t\t\t<CardAction className=\"@max-sm/trend:col-start-1 @max-sm/trend:row-span-1 @max-sm/trend:row-start-auto @max-sm/trend:mt-2 @max-sm/trend:justify-self-start\">\n\t\t\t\t\t<ToggleGroup value={[range]} onValueChange={(v: unknown[]) => v[0] && setRange(String(v[0]))} aria-label=\"Time range\">\n\t\t\t\t\t\t{ranges.map((r) => (\n\t\t\t\t\t\t\t<Toggle key={r.id} value={r.id}>\n\t\t\t\t\t\t\t\t{r.label}\n\t\t\t\t\t\t\t</Toggle>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</CardAction>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<AreaChart\n\t\t\t\t\tlabel={`Visitors per day, last ${ranges.find((r) => r.id === range)?.label}`}\n\t\t\t\t\tdata={shown}\n\t\t\t\t\tindex=\"date\"\n\t\t\t\t\tseries={series}\n\t\t\t\t\tindexFormatter={shortDate}\n\t\t\t\t\ttooltip={{ labelFormatter: (d) => new Date(`${d}T00:00:00`).toLocaleDateString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\" }) }}\n\t\t\t\t\tstacked\n\t\t\t\t\tgradient\n\t\t\t\t\tclassName=\"h-64\"\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"gap-1.5 text-body-sm\">\n\t\t\t\t<Icon name=\"arrow-up\" className=\"text-success\" />\n\t\t\t\t<span>\n\t\t\t\t\tUp 5.2% on the previous period <span className=\"text-muted-foreground\">· desktop leads every week</span>\n\t\t\t\t</span>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
       },
       {
         "name": "UploadListBlock",
@@ -20012,7 +21268,7 @@
           "Field labels the group and reads the expiry as its description."
         ],
         "imports": "import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, Field, OtpField } from \"@sableui/react\"",
-        "code": "const sentTo = \"ada@studio.com\"\n\nexport interface VerifyCodeBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a Sheet, Dialog or muted section that already frames it. */\n\tframed?: boolean\n\t/** Called with the code as soon as the last digit is entered. */\n\tonVerify?: (code: string) => void\n\tonResend?: () => void\n}\n\nexport function VerifyCodeBlock({ className, framed = true, onVerify, onResend }: VerifyCodeBlockProps) {\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-sm\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Check your email</CardTitle>\n\t\t\t\t<CardDescription>\n\t\t\t\t\tWe sent a 6-digit code to <span className=\"text-foreground\">{sentTo}</span>.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<Field label=\"Verification code\" description=\"The code expires in 10 minutes.\">\n\t\t\t\t\t<OtpField length={6} groupSize={3} onValueComplete={(code: string) => onVerify?.(code)} />\n\t\t\t\t</Field>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"justify-between gap-3\">\n\t\t\t\t<span className=\"text-caption text-muted-foreground\">Didn’t get it?</span>\n\t\t\t\t<Button variant=\"ghost\" size=\"sm\" onClick={onResend}>\n\t\t\t\t\tResend code\n\t\t\t\t</Button>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
+        "code": "const sentTo = \"ada@studio.com\"\n\nexport interface VerifyCodeBlockProps {\n\tclassName?: string\n\t/** false drops the card's surface and border — for a Sheet, Dialog or muted section that already frames it. */\n\tframed?: boolean\n\t/** Called with the code as soon as the last digit is entered. */\n\tonVerify?: (code: string) => void\n\tonResend?: () => void\n}\n\nexport function VerifyCodeBlock({ className, framed = true, onVerify, onResend }: VerifyCodeBlockProps) {\n\treturn (\n\t\t<Card variant={framed ? \"default\" : \"flat\"} className={cn(\"w-full max-w-sm\", className)}>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>Check your email</CardTitle>\n\t\t\t\t<CardDescription>\n\t\t\t\t\tWe sent a 6-digit code to <span className=\"text-foreground\">{sentTo}</span>.\n\t\t\t\t</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<Field label=\"Verification code\" description=\"The code expires in 10 minutes.\">\n\t\t\t\t\t<OtpField length={6} groupSize={3} onValueComplete={(code: string) => onVerify?.(code)} />\n\t\t\t\t</Field>\n\t\t\t</CardContent>\n\t\t\t<CardFooter className=\"justify-between gap-3\">\n\t\t\t\t<span className=\"text-caption text-muted-foreground\">Didn’t get it?</span>\n\t\t\t\t<Button variant=\"ghost\" size=\"sm\" bleed=\"end\" onClick={onResend}>\n\t\t\t\t\tResend code\n\t\t\t\t</Button>\n\t\t\t</CardFooter>\n\t\t</Card>\n\t)\n}"
       },
       {
         "name": "WalletBlock",
@@ -21040,11 +22296,10 @@
     }
   ],
   "utilities": {
-    "about": "The CSS layer between tokens and components: relative surfaces that derive hover and well fills from the surface they sit in, frames that compute concentric inner radii, state variants that match Base UI data attributes and ARIA alike, scroll policies, and chrome type tiers. Reach for these before hand-writing CSS or mixing colours. Generated from src/utilities/utility-docs.ts — do not hand-edit.",
+    "about": "The CSS layer between tokens and components: relative surfaces that derive hover and well fills from the surface they sit in, frames that compute concentric inner radii, state variants that match Base UI data attributes and ARIA alike, scroll policies, chrome type tiers, and the motion recipes. Reach for these before hand-writing CSS, mixing colours or writing a transition. Generated from src/utilities/utility-docs.ts — do not hand-edit.",
     "retrieve": "sable utility <name>",
     "elsewhere": {
-      "typography": "The paired `text-*` page tiers (`text-heading-1`, `text-body-md`, `text-label-sm`, `text-mono-md`, …) are documented as `registry.json → tokens.typography` (named without the `text-` prefix). `sable token typography`.",
-      "motion": "The `motion-*` and `animate-*` recipes are listed in `registry.json → tokens.motion.recipes`, with the slot model in `registry.json → motionLayer`. `sable docs motion`."
+      "typography": "The paired `text-*` page tiers (`text-heading-1`, `text-body-md`, `text-label-sm`, `text-mono-md`, …) are documented as `registry.json → tokens.typography` (named without the `text-` prefix). Retrieve one with `sable utility text-heading-1`, all with `sable token typography`."
     },
     "families": [
       "relative surface",
@@ -21053,6 +22308,7 @@
       "state variant",
       "scroll",
       "text",
+      "motion",
       "helper"
     ],
     "items": [
@@ -21687,32 +22943,495 @@
         "insteadOf": "`text-ui-sm` (proportional digits make a column jitter while a slider drags) or `text-mono-sm`, which is page-register.",
         "example": "<span className=\"text-ui-num\">128</span>",
         "keywords": [
-          "number",
-          "tabular numbers",
-          "numeric value",
-          "readout",
-          "monospace number"
+          "number",
+          "tabular numbers",
+          "numeric value",
+          "readout",
+          "monospace number"
+        ]
+      },
+      {
+        "name": "stream-tail",
+        "kind": "utility",
+        "family": "text",
+        "intent": "The soft trailing edge of a live text stream: a slight blur plus a fading mask, so the newest token reads as 'more is coming' rather than a sentence that has ended. Static.",
+        "whenToUse": "On the last run of text while a model or source is still streaming; remove it when the stream finishes. `StreamingText` applies it for you.",
+        "insteadOf": "An animated fade or a hand-written `mask-image` gradient. Use `StreamingText` first; this is for a stream rendered without it.",
+        "example": "<span className=\"stream-tail\">{latestChunk}</span>",
+        "keywords": [
+          "streaming",
+          "stream edge",
+          "typing",
+          "llm output",
+          "fade tail",
+          "generating text"
+        ],
+        "pairsWith": [
+          "motion-stream-in",
+          "motion-caret"
+        ]
+      },
+      {
+        "name": "motion-interactive",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "The transition for interactive chrome: colour, background, border, shadow, opacity, fill, stroke, scale and translate at the fast duration and standard easing. Also removes the mobile tap delay and the platform's grey tap flash.",
+        "whenToUse": "On anything clickable that changes on hover, focus, press or selection: a custom row, a tile, a link, an app-owned button. It is the `response` slot, and the only transition declarer such an element needs.",
+        "insteadOf": "Tailwind's colour-only or all-property transition utilities with a hand-picked duration. Those ignore --motion-scale, skip the transform properties `motion-press` needs, and leave the 300ms tap delay on touch screens. sable-lint's `static-interactive` fires on a hover style with no recipe.",
+        "example": "<a href=\"/inbox\" className=\"motion-interactive link-underline text-primary\">Inbox</a>",
+        "keywords": [
+          "transition",
+          "hover transition",
+          "hover animation",
+          "focus transition",
+          "interactive",
+          "tap delay",
+          "response"
+        ],
+        "pairsWith": [
+          "motion-press",
+          "sable-surface-interactive"
+        ]
+      },
+      {
+        "name": "motion-press",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A small tactile settle (scale 0.97) while the element is pressed. Skips disabled elements. Declares only the pressed state, not a transition.",
+        "whenToUse": "A pressable surface that is not a Sable Button (Button already has it): a tile, a card that acts as a button, an icon control.",
+        "insteadOf": "An `active:` scale utility with its own transition, which fights `motion-interactive` for the transition property and keeps animating with motion off.",
+        "example": "<button type=\"button\" className=\"motion-interactive motion-press sable-surface sable-frame sable-frame-r-lg sable-frame-p-4\">Open</button>",
+        "keywords": [
+          "press",
+          "pressed state",
+          "tap feedback",
+          "active scale",
+          "tactile",
+          "click feedback"
+        ],
+        "pairsWith": [
+          "motion-interactive"
+        ]
+      },
+      {
+        "name": "motion-fade",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Opacity-only enter and exit, keyed to Base UI's `data-starting-style` / `data-ending-style`: fades in at the enter duration, out at the exit duration.",
+        "whenToUse": "Scrims, backdrops and overlays that should appear without moving. The element rests visible; the data attributes supply the from and to.",
+        "insteadOf": "A keyframe fade or a conditional opacity class, which cannot animate the exit of an element Base UI is unmounting.",
+        "example": "<div className=\"motion-fade fixed inset-0 bg-overlay\" />",
+        "keywords": [
+          "fade",
+          "backdrop",
+          "scrim",
+          "overlay fade",
+          "enter exit",
+          "opacity transition"
+        ]
+      },
+      {
+        "name": "motion-pop",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Enter with a slight scale from the anchor edge (spring easing) and exit faster without overshoot, keyed to `data-starting-style` / `data-ending-style`. Scales from Base UI's `--transform-origin`.",
+        "whenToUse": "Anchored or centred floating surfaces: popovers, menus, selects, tooltips, dialogs, command menus. Sable's own overlays already carry it.",
+        "insteadOf": "A custom zoom keyframe, or a spring on exit, which draws the eye to what the user just dismissed.",
+        "example": "<div className=\"motion-pop sable-surface-popover bg-popover text-popover-foreground rounded-lg shadow-lg\">…</div>",
+        "keywords": [
+          "pop",
+          "popover animation",
+          "menu animation",
+          "dialog animation",
+          "scale in",
+          "zoom",
+          "arrival"
+        ],
+        "pairsWith": [
+          "motion-fade"
+        ]
+      },
+      {
+        "name": "motion-slide-up",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Fade plus a 0.5rem rise on enter, reversed faster on exit, keyed to `data-starting-style` / `data-ending-style`. The suffix is the travel direction on enter.",
+        "whenToUse": "A surface arriving from below: a toast at the bottom of the screen, a bottom bar, a banner under its trigger.",
+        "insteadOf": "A translate keyframe with a literal duration, which keeps moving under reduced motion.",
+        "example": "<div className=\"motion-slide-up sable-surface rounded-lg\">Saved</div>",
+        "keywords": [
+          "slide up",
+          "rise",
+          "toast animation",
+          "enter from bottom",
+          "directional"
+        ],
+        "pairsWith": [
+          "motion-slide-down",
+          "motion-slide-left",
+          "motion-slide-right"
+        ]
+      },
+      {
+        "name": "motion-slide-down",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Fade plus a 0.5rem drop on enter, reversed faster on exit, keyed to `data-starting-style` / `data-ending-style`.",
+        "whenToUse": "A surface arriving from above: a top toast, a dropdown panel that reads better sliding than scaling.",
+        "insteadOf": "A translate keyframe with a literal duration.",
+        "example": "<div className=\"motion-slide-down sable-surface rounded-lg\">Connected</div>",
+        "keywords": [
+          "slide down",
+          "drop in",
+          "enter from top",
+          "dropdown animation",
+          "directional"
+        ],
+        "pairsWith": [
+          "motion-slide-up"
+        ]
+      },
+      {
+        "name": "motion-slide-left",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Fade plus a 0.5rem travel leftward on enter (it starts offset to the right), reversed faster on exit.",
+        "whenToUse": "A surface arriving from the right edge: a side panel, a right-anchored toast.",
+        "insteadOf": "A translate keyframe with a literal duration.",
+        "example": "<aside className=\"motion-slide-left sable-surface\">…</aside>",
+        "keywords": [
+          "slide left",
+          "enter from right",
+          "side panel animation",
+          "directional"
+        ],
+        "pairsWith": [
+          "motion-slide-right"
+        ]
+      },
+      {
+        "name": "motion-slide-right",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Fade plus a 0.5rem travel rightward on enter (it starts offset to the left), reversed faster on exit.",
+        "whenToUse": "A surface arriving from the left edge: a navigation drawer, a left-anchored toast.",
+        "insteadOf": "A translate keyframe with a literal duration.",
+        "example": "<nav className=\"motion-slide-right sable-surface\">…</nav>",
+        "keywords": [
+          "slide right",
+          "enter from left",
+          "drawer animation",
+          "directional"
+        ],
+        "pairsWith": [
+          "motion-slide-left"
+        ]
+      },
+      {
+        "name": "motion-disclosure",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Height plus fade for a panel that opens and closes: carries the overflow, the transition and the content fade. The component sets the target height and zeroes it on the starting/ending style.",
+        "whenToUse": "A hand-built expanding region. Accordion and Collapsible already use it; reach for them first.",
+        "insteadOf": "Animating max-height to a guessed number, or a show/hide with no transition. Height is the one sanctioned non-compositor property.",
+        "example": "<div className=\"motion-disclosure h-[var(--collapsible-panel-height)]\">…</div>",
+        "keywords": [
+          "expand",
+          "collapse",
+          "accordion animation",
+          "height transition",
+          "disclosure",
+          "reveal panel"
+        ]
+      },
+      {
+        "name": "motion-icon-swap",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Cross-fades two glyphs stacked in one cell when a control's icon changes with its state: the outgoing one shrinks and blurs out, the incoming one resolves in. The inactive glyph is the one marked `aria-hidden=\"true\"` (or `data-active=\"false\"`).",
+        "whenToUse": "Play/pause, mute/unmute, outline/fill, copy/check, menu/close: one control whose icon changes. Keep both icons mounted; the correct accessibility markup is also the animation hook.",
+        "insteadOf": "Rendering one icon or the other (it snaps between two frames), or absolutely positioning the second icon, which collapses the wrapper. Under reduced motion the swap is instant and the glyph still changes.",
+        "example": "<span className=\"motion-icon-swap\"><Icon name=\"play\" aria-hidden={playing} /><Icon name=\"pause\" aria-hidden={!playing} /></span>",
+        "keywords": [
+          "icon swap",
+          "icon transition",
+          "play pause",
+          "toggle icon",
+          "morph icon",
+          "copy check",
+          "icon animation"
+        ],
+        "pairsWith": [
+          "motion-interactive"
+        ]
+      },
+      {
+        "name": "motion-spin",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A continuous rotation for a spinner glyph, scaled by --motion-scale so reduced motion freezes it.",
+        "whenToUse": "A loading glyph that is not the Spinner component (use Spinner first), such as an icon inside a busy button.",
+        "insteadOf": "Tailwind's built-in spin animation, which ignores --motion-scale. sable-lint's `builtin-animate` flags it.",
+        "example": "<Icon name=\"spinner\" className=\"motion-spin\" />",
+        "keywords": [
+          "spinner",
+          "spin",
+          "loading",
+          "rotate",
+          "busy",
+          "activity"
+        ],
+        "pairsWith": [
+          "motion-pulse"
+        ]
+      },
+      {
+        "name": "motion-orbit",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A slow continuous rotation (24s by default) for ambient line art. `--motion-orbit-duration` sets the speed and `--motion-orbit-direction` the direction; it rotates about the centre of any viewBox.",
+        "whenToUse": "The idle loop of an illustration or schematic after it draws on, usually with `motion-draw` on the same figure.",
+        "insteadOf": "`motion-spin`, which is a loader's speed, or a hand-written keyframe that keeps turning under reduced motion.",
+        "example": "<svg className=\"motion-orbit [--motion-orbit-duration:40s]\" viewBox=\"0 0 200 200\">…</svg>",
+        "keywords": [
+          "orbit",
+          "slow rotation",
+          "ambient",
+          "rotate illustration",
+          "decorative loop"
+        ],
+        "pairsWith": [
+          "motion-draw"
+        ]
+      },
+      {
+        "name": "motion-pulse",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A soft looping opacity pulse, scaled by --motion-scale.",
+        "whenToUse": "A live or pending indicator: a recording dot, an unsaved marker, a pending status.",
+        "insteadOf": "Tailwind's built-in pulse animation, which ignores --motion-scale. For a loading placeholder use Skeleton or `motion-shimmer`.",
+        "example": "<span className=\"motion-pulse size-2 rounded-full bg-destructive\" />",
+        "keywords": [
+          "pulse",
+          "breathing",
+          "live indicator",
+          "recording",
+          "pending",
+          "activity"
+        ],
+        "pairsWith": [
+          "motion-ping"
+        ]
+      },
+      {
+        "name": "motion-shimmer",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "The skeleton sweep: one band of light that passes across every skeleton on screen in sequence, because the gradient is fixed to the viewport. Rests off-screen, so with motion off a skeleton is a calm block.",
+        "whenToUse": "A hand-built loading placeholder. The Skeleton component already uses it.",
+        "insteadOf": "A pulse on each block, or a per-box gradient, where a short line and a tall card sweep at different speeds.",
+        "example": "<div className=\"motion-shimmer h-4 w-48 rounded-md bg-muted\" />",
+        "keywords": [
+          "shimmer",
+          "skeleton",
+          "loading placeholder",
+          "sweep",
+          "shine"
+        ],
+        "pairsWith": [
+          "motion-text-shimmer"
+        ]
+      },
+      {
+        "name": "motion-text-shimmer",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "The sweep run through the glyphs instead of behind them, for a live status line. The gradient goes muted to foreground and back, so the text stays readable on every frame.",
+        "whenToUse": "Status text while work is happening: \"Thinking…\", \"Searching\", \"Generating response\".",
+        "insteadOf": "`motion-shimmer` on text, which paints a band behind real words and reads as a skeleton. Named `motion-*`, not `text-*`, so tailwind-merge does not drop the colour class beside it.",
+        "example": "<span className=\"motion-text-shimmer text-body-sm\">Thinking…</span>",
+        "keywords": [
+          "text shimmer",
+          "thinking",
+          "generating",
+          "status text",
+          "loading text",
+          "ai status"
+        ],
+        "pairsWith": [
+          "motion-shimmer"
+        ]
+      },
+      {
+        "name": "motion-dot-bounce",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A looping vertical bounce for one dot of a typing or waiting indicator. Offset each dot with an animation delay.",
+        "whenToUse": "A three-dot typing indicator in a chat or assistant surface.",
+        "insteadOf": "Tailwind's built-in bounce animation, which ignores --motion-scale.",
+        "example": "<span className=\"motion-dot-bounce size-1.5 rounded-full bg-muted-foreground\" />",
+        "keywords": [
+          "typing indicator",
+          "dots",
+          "bounce",
+          "waiting",
+          "chat loading"
+        ]
+      },
+      {
+        "name": "motion-ping",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A looping ring that expands and fades from a point, scaled by --motion-scale.",
+        "whenToUse": "Drawing attention to a live point: a new-activity dot, a location marker, a beacon behind a status dot.",
+        "insteadOf": "Tailwind's built-in ping animation, which ignores --motion-scale.",
+        "example": "<span className=\"motion-ping absolute inset-0 rounded-full bg-success\" />",
+        "keywords": [
+          "ping",
+          "beacon",
+          "ripple",
+          "attention",
+          "live dot"
+        ],
+        "pairsWith": [
+          "motion-pulse"
+        ]
+      },
+      {
+        "name": "animate-fade-in",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A one-shot fade in on mount at the base duration, decelerating, with `both` fill so there is no flash before it starts.",
+        "whenToUse": "Content that appears once when a route or panel mounts.",
+        "insteadOf": "A keyframe with a literal duration. For content entering on scroll use Reveal (`motion-reveal`).",
+        "example": "<section className=\"animate-fade-in\">…</section>",
+        "keywords": [
+          "fade in",
+          "mount animation",
+          "entrance",
+          "page transition",
+          "appear"
+        ],
+        "pairsWith": [
+          "animate-fade-up",
+          "animate-fade-down"
+        ]
+      },
+      {
+        "name": "animate-fade-up",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A one-shot fade plus rise on mount at the slow duration, decelerating, with `both` fill.",
+        "whenToUse": "A page section or list arriving from below on mount.",
+        "insteadOf": "A translate keyframe with a literal duration. For scroll-triggered entrances use Reveal.",
+        "example": "<div className=\"animate-fade-up\">…</div>",
+        "keywords": [
+          "fade up",
+          "rise in",
+          "entrance",
+          "mount animation",
+          "slide in"
+        ],
+        "pairsWith": [
+          "animate-fade-in"
+        ]
+      },
+      {
+        "name": "animate-fade-down",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A one-shot fade plus drop on mount at the slow duration, decelerating, with `both` fill.",
+        "whenToUse": "Content arriving from above on mount, such as a notice under a header.",
+        "insteadOf": "A translate keyframe with a literal duration.",
+        "example": "<div className=\"animate-fade-down\">…</div>",
+        "keywords": [
+          "fade down",
+          "drop in",
+          "entrance",
+          "mount animation"
+        ],
+        "pairsWith": [
+          "animate-fade-in"
+        ]
+      },
+      {
+        "name": "motion-stream-in",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Each token of a live stream resolves in from a slight blur once, on mount. Knows nothing of the final length, so there is no stagger.",
+        "whenToUse": "Wrapping each arriving chunk of a streamed response. StreamingText already does it.",
+        "insteadOf": "The reveal recipes, which stage text that is already there, or a typewriter effect.",
+        "example": "<span key={chunk.id} className=\"motion-stream-in\">{chunk.text}</span>",
+        "keywords": [
+          "streaming",
+          "token animation",
+          "llm output",
+          "typewriter",
+          "generating"
+        ],
+        "pairsWith": [
+          "stream-tail",
+          "motion-caret"
+        ]
+      },
+      {
+        "name": "motion-caret",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "A caret that blinks only when idle and holds steady while `data-streaming=\"true\"`, so the blink returning signals the stream has finished.",
+        "whenToUse": "The cursor at the end of streamed or typed text.",
+        "insteadOf": "A caret that blinks while text is arriving, which sets two competing rhythms.",
+        "example": "<span className=\"motion-caret\" data-streaming={streaming} aria-hidden=\"true\">▍</span>",
+        "keywords": [
+          "caret",
+          "cursor",
+          "blink",
+          "typing cursor",
+          "streaming"
+        ],
+        "pairsWith": [
+          "motion-stream-in"
+        ]
+      },
+      {
+        "name": "motion-reveal",
+        "kind": "utility",
+        "family": "motion",
+        "intent": "Fade plus a 0.75rem rise when `data-reveal` flips from \"out\" to \"in\". Out of view it rests hidden and nudged down; with motion off the content stays visible.",
+        "whenToUse": "Through the Reveal and TextReveal components, which set `data-reveal` when the element scrolls into view. Use the class directly only on an element whose `data-reveal` you set yourself.",
+        "insteadOf": "An IntersectionObserver plus hand-written opacity classes.",
+        "example": "<Reveal><Card>…</Card></Reveal>",
+        "keywords": [
+          "scroll reveal",
+          "reveal on scroll",
+          "in view",
+          "entrance",
+          "scroll animation"
+        ],
+        "pairsWith": [
+          "motion-draw"
         ]
       },
       {
-        "name": "stream-tail",
+        "name": "motion-draw",
         "kind": "utility",
-        "family": "text",
-        "intent": "The soft trailing edge of a live text stream: a slight blur plus a fading mask, so the newest token reads as 'more is coming' rather than a sentence that has ended. Static.",
-        "whenToUse": "On the last run of text while a model or source is still streaming; remove it when the stream finishes. `StreamingText` applies it for you.",
-        "insteadOf": "An animated fade or a hand-written `mask-image` gradient. Use `StreamingText` first; this is for a stream rendered without it.",
-        "example": "<span className=\"stream-tail\">{latestChunk}</span>",
+        "family": "motion",
+        "intent": "Draws an SVG path on when an ancestor's `data-reveal` flips to \"in\". The path needs `pathLength=\"1\"`. `--motion-draw-duration` and `--motion-draw-delay` (both scaled by --motion-scale) set its pace and stagger.",
+        "whenToUse": "Line art and schematics inside a Reveal. Stagger sibling paths with `--motion-draw-delay`.",
+        "insteadOf": "A hand-written dash-offset animation with literal timing, which keeps animating, or keeps its delay, under reduced motion.",
+        "example": "<Reveal><svg viewBox=\"0 0 100 100\"><path className=\"motion-draw\" pathLength=\"1\" d=\"M10 50 L90 50\" /></svg></Reveal>",
         "keywords": [
-          "streaming",
-          "stream edge",
-          "typing",
-          "llm output",
-          "fade tail",
-          "generating text"
+          "draw on",
+          "line art",
+          "svg animation",
+          "stroke animation",
+          "illustration",
+          "path draw"
         ],
         "pairsWith": [
-          "motion-stream-in",
-          "motion-caret"
+          "motion-reveal",
+          "motion-orbit"
         ]
       },
       {
@@ -21733,12 +23452,56 @@
           "small button"
         ]
       },
+      {
+        "name": "reveal-on-hover",
+        "kind": "utility",
+        "family": "helper",
+        "intent": "Hides a row or tile action until its item is hovered or holds focus — on hover-capable devices only. Touch and no-hover devices always show it, and it fades with opacity, so it never leaves the tab order or the accessibility tree. The item is the nearest ancestor with `group` (or `data-reveal-scope`); an open popup keeps its trigger visible. `--reveal-offset` adds a short rise.",
+        "whenToUse": "Secondary per-item actions in a dense list or grid — a tile's play button, a row's overflow menu or visibility toggle — where showing every action at rest would turn the list into a wall of controls. Put `group` on the item (the row, the tile), not on the list, and the class on the action or its wrapper.",
+        "insteadOf": "`opacity-0 group-hover:opacity-100` (hidden forever on a phone), `hidden group-hover:flex` (drops it from the tab order and the accessibility tree), or a hand-written `[@media(hover:hover)]:opacity-0` pair (snaps, and misses focus and open menus). Not for a primary action — that stays visible.",
+        "example": "<li className=\"group flex items-center gap-2\"><span className=\"flex-1\">Track</span><Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Like Track\" className=\"reveal-on-hover\"><Icon name=\"heart\" /></Button></li>",
+        "keywords": [
+          "show on hover",
+          "hover reveal",
+          "hover actions",
+          "row actions",
+          "hidden until hover",
+          "group-hover opacity",
+          "hover:hover",
+          "touch visible",
+          "focus-within"
+        ],
+        "pairsWith": [
+          "motion-interactive"
+        ]
+      },
+      {
+        "name": "stretched-link",
+        "kind": "utility",
+        "family": "helper",
+        "intent": "Makes one link cover its whole item with a transparent `::after`, so a tile or card is clickable everywhere while its other links and buttons stay separate controls. Focus draws the ring on the overlay, rounded by `--stretched-link-radius`.",
+        "whenToUse": "A card, tile or row that IS a link but also holds a second control — a subtitle link to the artist, a play button, a menu. Put it on the primary link (usually the title), `relative` on the item, and `relative z-10` on every other control.",
+        "insteadOf": "Wrapping the item in an `<a>` or `Card render={<a />}` — invalid as soon as it nests another link or button, which browsers re-parent and screen readers read as one long link. Not with `hit-target` on the same element (both own `::after`).",
+        "example": "<article className=\"relative [--stretched-link-radius:var(--radius-lg)]\"><a href=\"/albums/1\" className=\"stretched-link\">Low tide</a><a href=\"/artists/2\" className=\"relative z-10\">Juno Avery</a></article>",
+        "keywords": [
+          "stretched link",
+          "card link",
+          "clickable card",
+          "whole card clickable",
+          "block link",
+          "nested link",
+          "link overlay"
+        ],
+        "pairsWith": [
+          "reveal-on-hover"
+        ]
+      },
       {
         "name": "link-underline",
         "kind": "utility",
         "family": "helper",
-        "intent": "An underline drawn from the font's own metrics (position and thickness `from-font`) with ink skipping descenders, so it retunes when a theme swaps typeface.",
-        "whenToUse": "Inline links in running text. Pair with `motion-interactive` for a colour change on hover.",
+        "intent": "An underline drawn from the font's own metrics (position and thickness `from-font`) with ink skipping descenders, so it retunes when a theme swaps typeface. Also carries the link's focus-visible outline in `--ring`, so a plain `<a>` meets the focus floor without app CSS.",
+        "whenToUse": "Every plain text link — inline in running text or standalone (\"Forgot password?\"). Pair with `motion-interactive` for a colour change on hover.",
         "insteadOf": "`underline underline-offset-4 decoration-2` — tuned to one face and wrong for the next theme's. Animating thickness or offset is not supported; a growing underline is a separate pseudo-element.",
         "example": "<a href=\"/terms\" className=\"link-underline motion-interactive text-primary\">terms</a>",
         "keywords": [
@@ -21868,6 +23631,7 @@
         "banners",
         "bottomNav",
         "children",
+        "dock",
         "header",
         "overlays",
         "sidebar"
@@ -22030,6 +23794,7 @@
       ],
       "Button": [
         "badge",
+        "bleed",
         "iconEnd",
         "iconStart",
         "loading",
@@ -22689,6 +24454,53 @@
         "render",
         "style"
       ],
+      "DisclosurePicker": [
+        "className",
+        "defaultOpen",
+        "disabled",
+        "onOpenChange",
+        "open",
+        "render",
+        "size",
+        "style"
+      ],
+      "DisclosurePickerEmpty": [
+        "children",
+        "className"
+      ],
+      "DisclosurePickerList": [
+        "aria-label",
+        "children",
+        "onValueChange",
+        "value"
+      ],
+      "DisclosurePickerOption": [
+        "children",
+        "className",
+        "disabled",
+        "media",
+        "note",
+        "textValue",
+        "value"
+      ],
+      "DisclosurePickerPanel": [
+        "children",
+        "className",
+        "hiddenUntilFound",
+        "keepMounted",
+        "render",
+        "search",
+        "style"
+      ],
+      "DisclosurePickerTrigger": [
+        "children",
+        "className",
+        "label",
+        "media",
+        "nativeButton",
+        "render",
+        "style"
+      ],
       "EmptyState": [
         "action",
         "code",
@@ -22758,6 +24570,25 @@
         "required",
         "size"
       ],
+      "FontPicker": [
+        "className",
+        "defaultOpen",
+        "disabled",
+        "fonts",
+        "label",
+        "listLabel",
+        "loadFont",
+        "onOpenChange",
+        "onValueChange",
+        "open",
+        "options",
+        "render",
+        "searchLabel",
+        "searchable",
+        "size",
+        "style",
+        "value"
+      ],
       "Form": [
         "actionsRef",
         "errors",
@@ -22778,7 +24609,8 @@
       "Grid": [
         "cols",
         "gap",
-        "minItemWidth"
+        "minItemWidth",
+        "track"
       ],
       "GridOverlay": [
         "className",
@@ -22858,6 +24690,33 @@
         "play",
         "speed"
       ],
+      "MediaImage": [
+        "alt",
+        "fallback",
+        "fit",
+        "loading",
+        "seed",
+        "sizes",
+        "src",
+        "srcSet"
+      ],
+      "MediaTile": [
+        "action",
+        "alt",
+        "aspect",
+        "badge",
+        "href",
+        "loading",
+        "render",
+        "seed",
+        "size",
+        "src",
+        "subtitle",
+        "subtitleHref",
+        "subtitleRender",
+        "title",
+        "titleAs"
+      ],
       "Menu": [
         "actionsRef",
         "children",
@@ -23496,6 +25355,14 @@
         "onValueChange",
         "value"
       ],
+      "SectionHeader": [
+        "actions",
+        "description",
+        "size",
+        "title",
+        "titleAs",
+        "titleId"
+      ],
       "SegmentedBar": [
         "label",
         "locale",
@@ -23687,6 +25554,11 @@
         "icons",
         "variant"
       ],
+      "SidebarBrand": [
+        "label",
+        "mark",
+        "render"
+      ],
       "SidebarItem": [
         "active",
         "badge",
@@ -23729,11 +25601,14 @@
         "triggerId"
       ],
       "Slider": [
+        "aria-label",
         "className",
         "defaultValue",
         "disabled",
         "form",
         "format",
+        "getAriaLabel",
+        "getAriaValueText",
         "largeStep",
         "locale",
         "max",
@@ -23942,6 +25817,11 @@
         "text",
         "when"
       ],
+      "ThemePreview": [
+        "mode",
+        "size",
+        "theme"
+      ],
       "ThemeSelector": [
         "label",
         "layout",
@@ -24193,5 +26073,303 @@
         "toolbar"
       ]
     }
+  },
+  "providers": {
+    "about": "App-level context providers: what each one does, whether an app needs it, where it goes, its props and a copyable example. App-wide providers are documented in src/providers/providers.meta.ts; a provider owned by one component (`partOf`) is documented in that component's meta and summarised here. Generated — do not hand-edit.",
+    "retrieve": "sable provider <Name>",
+    "items": [
+      {
+        "name": "CodeHighlightProvider",
+        "partOf": "CodeBlock",
+        "summary": "Supplies one highlighter to every CodeBlock beneath it, so an app wires highlighting once. Map the highlighter's token colors to Sable tone tokens so code follows the theme.",
+        "signature": "{ highlight: (code: string) => ReactNode; children: ReactNode }",
+        "import": "import { CodeHighlightProvider } from \"@sableui/react\"",
+        "examples": [
+          {
+            "label": "With a highlighter for the whole app",
+            "code": "<CodeHighlightProvider highlight={(code) => <span dangerouslySetInnerHTML={{ __html: highlightToHtml(code) }} />}><CodeBlock code={\"const a = 1\"} /></CodeHighlightProvider>",
+            "imports": "import { CodeBlock, CodeHighlightProvider } from \"@sableui/react\""
+          }
+        ]
+      },
+      {
+        "name": "DensityProvider",
+        "summary": "The bare React context behind density. It feeds only the React side, which is the half that reaches portaled popups; it renders no element and sets no `data-density`, so the CSS control ladder in its subtree does not change.",
+        "required": "Optional, and rarely the right choice. To make a region compact use the Density component (or Workspace), which sets both the context and `data-density`.",
+        "placement": "Around an element you already own that carries `data-density` itself.",
+        "props": [
+          {
+            "name": "value",
+            "type": "\"compact\" | \"comfortable\"",
+            "description": "The density popups opened from this subtree should use."
+          }
+        ],
+        "companions": [
+          "Density",
+          "useDensity",
+          "useTypeTier"
+        ],
+        "related": [
+          "Workspace"
+        ],
+        "import": "import { DensityProvider } from \"@sableui/react\"",
+        "examples": [
+          {
+            "label": "An element that sets data-density itself",
+            "code": "function CompactRegion({ children }: { children: ReactNode }) {\n\treturn (\n\t\t<DensityProvider value=\"compact\">\n\t\t\t<section data-density=\"compact\">{children}</section>\n\t\t</DensityProvider>\n\t)\n}",
+            "imports": "import type { ReactNode } from \"react\"\nimport { DensityProvider } from \"@sableui/react\""
+          }
+        ]
+      },
+      {
+        "name": "IconProvider",
+        "summary": "Supplies the icon set every <Icon> renders with, including the icons inside Sable's own components. Components name icons semantically (`chevron-down`, `check`); the set maps each name to artwork.",
+        "required": "Required for icons. `<Icon>` has no built-in fallback: without a provider, icons render nothing and a development build warns once.",
+        "placement": "Once, at the app root, above every Sable component.",
+        "props": [
+          {
+            "name": "set",
+            "type": "IconSet",
+            "description": "The icon set: `reiconIconSet` from `@sableui/react/icons/reicon`, another complete set, or `composeIconSets(appExtras, reiconIconSet)` to add app icons over Reicon."
+          },
+          {
+            "name": "defaultVariant",
+            "type": "IconVariant",
+            "default": "\"regular\"",
+            "description": "Variant used when an <Icon> does not set one."
+          }
+        ],
+        "companions": [
+          "Icon",
+          "composeIconSets",
+          "useIconSet"
+        ],
+        "notes": [
+          "The first set in composeIconSets that returns a node for a name wins, so app icons can also override Reicon's.",
+          "List the names an app adds in .sable/icons.json ({ \"names\": [...] }) so `sable grade` does not report them as off-contract."
+        ],
+        "related": [
+          "Icon"
+        ],
+        "import": "import { IconProvider } from \"@sableui/react\"",
+        "examples": [
+          {
+            "label": "Reicon, Sable's bundled set",
+            "code": "export function Root({ children }: { children: ReactNode }) {\n\treturn <IconProvider set={reiconIconSet}>{children}</IconProvider>\n}",
+            "imports": "import type { ReactNode } from \"react\"\nimport { reiconIconSet } from \"@sableui/react/icons/reicon\"\nimport { IconProvider } from \"@sableui/react\""
+          },
+          {
+            "label": "App icons added over Reicon",
+            "code": "const icons = composeIconSets(appIcons, reiconIconSet)\n\nexport function Root({ children }: { children: ReactNode }) {\n\treturn <IconProvider set={icons}>{children}</IconProvider>\n}",
+            "imports": "import type { ReactNode } from \"react\"\nimport { reiconIconSet } from \"@sableui/react/icons/reicon\"\nimport { appIcons } from \"./icons\"\nimport { composeIconSets, IconProvider } from \"@sableui/react\""
+          }
+        ]
+      },
+      {
+        "name": "MotionProvider",
+        "summary": "Holds the app's motion policy and writes it as `data-motion` on <html>, which drives the `--motion-scale` switch every Sable motion recipe reads. Lets an app offer its own reduce-motion setting.",
+        "required": "Optional. Without it, motion follows the visitor's OS `prefers-reduced-motion` setting, and useMotion() still works (its setPolicy does nothing).",
+        "placement": "Once, at the app root, when the app has an in-app motion setting.",
+        "props": [
+          {
+            "name": "defaultPolicy",
+            "type": "\"system\" | \"full\" | \"reduced\" | \"off\"",
+            "default": "\"system\"",
+            "description": "Initial policy when uncontrolled. \"system\" defers to the OS preference."
+          },
+          {
+            "name": "policy",
+            "type": "\"system\" | \"full\" | \"reduced\" | \"off\"",
+            "description": "Controlled policy. Pair with onPolicyChange."
+          },
+          {
+            "name": "onPolicyChange",
+            "type": "(policy) => void",
+            "description": "Called whenever the policy changes."
+          },
+          {
+            "name": "target",
+            "type": "\"root\" | (() => HTMLElement | null)",
+            "default": "\"root\"",
+            "description": "Where to write `data-motion`. The default covers portaled overlays too; a getter scopes motion to a subtree."
+          }
+        ],
+        "companions": [
+          "useMotion",
+          "useReducedMotion"
+        ],
+        "notes": [
+          "JavaScript motion must read useMotion().enabled and do nothing when it is false; CSS recipes stop on their own."
+        ],
+        "related": [
+          "Switch"
+        ],
+        "import": "import { MotionProvider } from \"@sableui/react\"",
+        "examples": [
+          {
+            "label": "At the app root",
+            "code": "export function Root({ children }: { children: ReactNode }) {\n\treturn <MotionProvider defaultPolicy=\"system\">{children}</MotionProvider>\n}",
+            "imports": "import type { ReactNode } from \"react\"\nimport { MotionProvider } from \"@sableui/react\""
+          },
+          {
+            "label": "A reduce-motion setting",
+            "code": "function ReduceMotionSetting() {\n\tconst { policy, setPolicy } = useMotion()\n\treturn (\n\t\t<Switch\n\t\t\tchecked={policy === \"reduced\"}\n\t\t\tonCheckedChange={(on) => setPolicy(on ? \"reduced\" : \"system\")}\n\t\t\taria-label=\"Reduce motion\"\n\t\t/>\n\t)\n}",
+            "imports": "import { Switch, useMotion } from \"@sableui/react\""
+          }
+        ]
+      },
+      {
+        "name": "PresentationProvider",
+        "summary": "Declares what its subtree is presented in, a page or a sheet. Action rows (CardFooter actions, SheetFooter) read it: on a page they are a short row; in a sheet they stack full width and pin to the bottom.",
+        "required": "Optional. A bottom Sheet and IosSheet already provide \"sheet\", and Dialog, Popover and side Sheets provide \"page\". Mount it only for a container of your own that presents content like a sheet.",
+        "placement": "Around the content of a custom sheet-like surface.",
+        "props": [
+          {
+            "name": "value",
+            "type": "\"page\" | \"sheet\"",
+            "description": "What the subtree is presented in."
+          }
+        ],
+        "companions": [
+          "usePresentation"
+        ],
+        "related": [
+          "Sheet",
+          "Card"
+        ],
+        "import": "import { PresentationProvider } from \"@sableui/react\"",
+        "examples": [
+          {
+            "label": "A custom bottom drawer",
+            "code": "function Drawer({ children }: { children: ReactNode }) {\n\treturn (\n\t\t<PresentationProvider value=\"sheet\">\n\t\t\t<div className=\"sable-surface-popover bg-popover text-popover-foreground\">{children}</div>\n\t\t</PresentationProvider>\n\t)\n}",
+            "imports": "import type { ReactNode } from \"react\"\nimport { PresentationProvider } from \"@sableui/react\""
+          }
+        ]
+      },
+      {
+        "name": "SableThemeProvider",
+        "summary": "Applies and persists Sable's two theme axes on <html>: the colour preference (light, dark or system, written as the `.dark` class) and the design theme (written as `data-sable-theme`). Read and change both anywhere below it with useSableTheme().",
+        "required": "Optional. Without it the app renders the default Sable theme in whatever mode the `dark` class on <html> says. Mount it when users can switch colour mode or theme, or to register an app-owned preset theme.",
+        "placement": "Once, at the app root, above everything that renders Sable components or calls useSableTheme(). It writes to <html> by default so portaled overlays (dialogs, menus, toasts) share the same tokens.",
+        "props": [
+          {
+            "name": "defaultPreference",
+            "type": "\"light\" | \"dark\" | \"system\"",
+            "default": "\"system\"",
+            "description": "Colour preference on a first visit, before anything is stored. Pass \"dark\" (or a preset's `defaultMode`) to open in dark."
+          },
+          {
+            "name": "preference",
+            "type": "\"light\" | \"dark\" | \"system\"",
+            "description": "Controlled colour preference. Pair with onPreferenceChange."
+          },
+          {
+            "name": "onPreferenceChange",
+            "type": "(preference) => void",
+            "description": "Called whenever the colour preference is set."
+          },
+          {
+            "name": "defaultThemeId",
+            "type": "ThemeId | string",
+            "default": "\"sable\"",
+            "description": "Design theme on a first visit, before anything is stored."
+          },
+          {
+            "name": "themeId",
+            "type": "ThemeId | string",
+            "description": "Controlled design theme id. Pair with onThemeIdChange."
+          },
+          {
+            "name": "onThemeIdChange",
+            "type": "(themeId) => void",
+            "description": "Called whenever the design theme is set."
+          },
+          {
+            "name": "colorStorageKey",
+            "type": "string | null",
+            "default": "SABLE_COLOR_STORAGE_KEY",
+            "description": "localStorage key for the colour preference. null disables persistence."
+          },
+          {
+            "name": "themeStorageKey",
+            "type": "string | null",
+            "default": "SABLE_THEME_STORAGE_KEY",
+            "description": "localStorage key for the design theme. null disables persistence."
+          },
+          {
+            "name": "target",
+            "type": "\"root\" | (() => HTMLElement | null)",
+            "default": "\"root\"",
+            "description": "Where to write `.dark` and `data-sable-theme`. A getter scopes theming to a subtree."
+          },
+          {
+            "name": "customThemes",
+            "type": "ThemeManifest[]",
+            "description": "Extra theme manifests, for example `presetManifest(preset)` for an app-owned preset. Their ids become valid themeId values. Sable does not load their CSS: import it yourself."
+          }
+        ],
+        "companions": [
+          "useSableTheme",
+          "ThemeSwitcher",
+          "ThemeSelector",
+          "applySableTheme",
+          "applySableColorMode"
+        ],
+        "notes": [
+          "Only the alternate design themes need theme CSS: import `@sableui/react/themes.css`, one `@sableui/react/theme/<id>.css`, or the scoped CSS from `sable preset --css`. Light/dark of the default theme needs nothing extra.",
+          "A colour-mode toggle is the ThemeSwitcher component; it reads this provider."
+        ],
+        "related": [
+          "ThemeSwitcher",
+          "ThemeSelector"
+        ],
+        "import": "import { SableThemeProvider } from \"@sableui/react\"",
+        "examples": [
+          {
+            "label": "At the app root, following the visitor's OS",
+            "code": "export function Root({ children }: { children: ReactNode }) {\n\treturn <SableThemeProvider>{children}</SableThemeProvider>\n}",
+            "imports": "import type { ReactNode } from \"react\"\nimport { SableThemeProvider } from \"@sableui/react\""
+          },
+          {
+            "label": "Dark by default, with an app-owned preset theme",
+            "code": "const customThemes = [presetManifest(parsePreset(presetJson))]\n\nexport function Root({ children }: { children: ReactNode }) {\n\treturn (\n\t\t<SableThemeProvider defaultPreference=\"dark\" defaultThemeId=\"my-preset\" customThemes={customThemes}>\n\t\t\t{children}\n\t\t</SableThemeProvider>\n\t)\n}",
+            "imports": "import type { ReactNode } from \"react\"\nimport { parsePreset, presetManifest } from \"@sableui/react/presets\"\nimport presetJson from \"../.sable/presets/my-preset.json\"\nimport { defaultThemeId, SableThemeProvider } from \"@sableui/react\""
+          }
+        ]
+      },
+      {
+        "name": "ToastProvider",
+        "partOf": "Toast",
+        "summary": "Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast().",
+        "signature": "{ children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? }",
+        "import": "import { ToastProvider } from \"@sableui/react\"",
+        "examples": [
+          {
+            "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>",
+            "imports": "import { AppShell, Button, Region, toast, ToastProvider } from \"@sableui/react\""
+          }
+        ]
+      },
+      {
+        "name": "TooltipProvider",
+        "partOf": "Tooltip",
+        "summary": "Wraps an app or group of Tooltips to share open/close delays. Once one tooltip is open, adjacent tooltips open instantly.",
+        "signature": "Base UI Tooltip.Provider props (delay, closeDelay, timeout)",
+        "import": "import { TooltipProvider } from \"@sableui/react\"",
+        "examples": [
+          {
+            "label": "Basic",
+            "code": "<TooltipProvider><Tooltip><TooltipTrigger render={<Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Info\"><Icon name=\"info\" /></Button>} /><TooltipContent>Stored permanently on Arweave.</TooltipContent></Tooltip></TooltipProvider>",
+            "imports": "import { Button, Icon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@sableui/react\""
+          }
+        ]
+      }
+    ]
   }
 }