@sableui/react 0.0.0-stage → 0.1.1

package/dist/patterns/index.js

@@ -0,0 +1,934 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, Form, Field, Input, Button, Separator, Badge, TextReveal, StatusDot, CardAction, MessageScroller, Marker, Message, Bubble, Avatar, CodeBlock, BubbleReactions, BubbleReaction, Attachment, StreamingText, CardFooter, ChatComposer, SettingsMenu, SettingsRow, MenuRadioGroup, MenuRadioItem, AppShell, PageHeader, DataTable, RelativeTime, CardList, Entity, Sidebar, SidebarHeader, SidebarNav, SidebarItem, BottomNav, BottomNavItem, AppHeader, Reveal, SearchInput, Description, DescriptionItem, Fieldset, FieldsetLegend, FieldsetDescription, FieldsetContent, Textarea, Select, SelectTrigger, SelectContent, SelectItem, FieldsetFooter, Switch } from '../chunk-J23ELQQZ.js';
+import { Region, Stack, Row, Page, Grid, AspectBox, Columns, Col } from '../chunk-3IWZYBGH.js';
+import '../chunk-SRQWQUTW.js';
+import { Icon } from '../chunk-PAOZBZME.js';
+import '../chunk-5Z5KLOAU.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function AuthPage() {
+  return /* @__PURE__ */ jsx("main", { className: "grid min-h-dvh place-items-center bg-background", children: /* @__PURE__ */ jsx(Region, { max: "form", safeArea: ["top", "bottom"], children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h1", { children: "Sign in" }) }),
+        /* @__PURE__ */ jsx(CardDescription, { children: "Welcome back \u2014 pick up where you left off." })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Form, { onSubmit: (event) => event.preventDefault(), children: [
+        /* @__PURE__ */ jsx(Field, { label: "Email", required: true, children: /* @__PURE__ */ jsx(Input, { type: "email", name: "email", autoComplete: "email", placeholder: "you@example.com" }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Password", required: true, children: /* @__PURE__ */ jsx(Input, { type: "password", name: "password", autoComplete: "current-password" }) }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", children: "Sign in" }),
+        /* @__PURE__ */ jsx(Separator, { label: "or" }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", className: "w-full", children: "Continue with wallet" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-center text-body-sm text-muted-foreground", children: [
+      "No account?",
+      " ",
+      /* @__PURE__ */ jsx("a", { href: "/signup", className: "link-underline motion-interactive text-foreground", children: "Create one" })
+    ] })
+  ] }) }) });
+}
+
+// src/patterns/auth-page.meta.ts
+var authPageMeta = {
+  name: "AuthPage",
+  summary: "Centered auth card: a form-width region vertically centered in the viewport, one Card holding the Form, an alternate-action divider, and a quiet switch-to-sign-up link beneath it.",
+  intent: "Reach for this for sign-in, sign-up, forgot-password, and any single-purpose one-column form route (invite accept, unsubscribe). Not for multi-section forms (use SettingsPage).",
+  notes: [
+    "Region cap is `form` (480px) \u2014 the narrowest named cap; auth never needs more.",
+    "The card is the only surface on the page: no app chrome, no sidebar \u2014 minimal exit paths.",
+    "min-h-dvh + grid place-items-center centers the card without magic offsets.",
+    "Field handles label/error wiring; the submit button is full-width \u2014 the primary (and only) action.",
+    "Secondary actions (here, switch to sign-up; add forgot password the same way) are quiet `link-underline` links, never competing buttons."
+  ],
+  a11y: [
+    "The route renders inside <main> with the page h1 in the card header (an h1 inside CardTitle, which carries the type).",
+    "Field auto-wires labels, describedby, and invalid state onto the inputs.",
+    "Autocomplete attributes (email, current-password) keep password managers working."
+  ]
+};
+var navItems = ["Platform", "Signals", "Security", "Company"];
+var metrics = [
+  { label: "Checks cleared", value: "1.8M", detail: "in the last 30 days" },
+  { label: "Review time", value: "42s", detail: "median approval path" },
+  { label: "Spaces online", value: "284", detail: "across active teams" }
+];
+var workflow = [
+  { label: "Intake", state: "Open", tone: "info" },
+  { label: "Review", state: "Live", tone: "edition" },
+  { label: "Archive", state: "Safe", tone: "success" }
+];
+var bars = [
+  { height: "38%", tone: "bg-tone-info" },
+  { height: "56%", tone: "bg-tone-edition" },
+  { height: "44%", tone: "bg-tone-standard" },
+  { height: "68%", tone: "bg-success" },
+  { height: "52%", tone: "bg-tone-info" },
+  { height: "78%", tone: "bg-highlight" },
+  { height: "60%", tone: "bg-tone-edition" },
+  { height: "86%", tone: "bg-success" },
+  { height: "64%", tone: "bg-tone-standard" }
+];
+var features = [
+  {
+    icon: "lock",
+    title: "Private by default",
+    body: "Workspace roles, approval trails, and handoff history stay clear without turning the interface into compliance fog."
+  },
+  {
+    icon: "layout",
+    title: "Brand and product together",
+    body: "Editorial sections and dense console views share the same semantic tokens, radius, and motion contract."
+  },
+  {
+    icon: "circle-check",
+    title: "Calm confidence",
+    body: "Large type, tactile controls, and focused status tones make complex work feel understandable on first pass."
+  }
+];
+var reviews = [
+  { name: "Waypoint", value: "98.4%", label: "clear routes" },
+  { name: "Fielddesk", value: "12", label: "open holds" },
+  { name: "Archive", value: "4.8k", label: "sealed records" }
+];
+var footerGroups = [
+  {
+    title: "Platform",
+    links: [
+      { label: "Overview", href: "#platform" },
+      { label: "Signals", href: "#signals" },
+      { label: "Approvals", href: "#approvals" },
+      { label: "Records", href: "#records" }
+    ]
+  },
+  {
+    title: "Company",
+    links: [
+      { label: "About", href: "/about" },
+      { label: "Security", href: "/security" },
+      { label: "Customers", href: "/customers" },
+      { label: "Careers", href: "/careers" }
+    ]
+  },
+  {
+    title: "Resources",
+    links: [
+      { label: "Guides", href: "/guides" },
+      { label: "Status", href: "/status" },
+      { label: "Changelog", href: "/changelog" },
+      { label: "Docs", href: "/docs" }
+    ]
+  }
+];
+var footerSignals = [
+  { label: "Uptime", value: "99.98%" },
+  { label: "Regions", value: "12" },
+  { label: "Response", value: "42s" }
+];
+function BrandLandingPage() {
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-dvh overflow-hidden bg-background text-foreground", children: [
+    /* @__PURE__ */ jsx("header", { className: "relative z-10 pt-4", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": "Main",
+        className: "flex min-h-15 items-center justify-between gap-3 rounded-full border border-border bg-card/90 px-3 py-2 shadow-sm backdrop-blur",
+        children: [
+          /* @__PURE__ */ jsxs("a", { href: "/", className: "flex items-center gap-2 rounded-full px-2 motion-interactive motion-press", children: [
+            /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-sm" }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-title-lg", children: "Cove" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(Row, { gap: 1, children: navItems.map((item) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: `#${item.toLowerCase()}` }), children: item }, item)) }) }),
+          /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "max-sm:hidden", render: /* @__PURE__ */ jsx("a", { href: "/login" }), children: "Sign in" }),
+            /* @__PURE__ */ jsx(Button, { size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/demo" }), children: "Request access" })
+          ] })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs("main", { children: [
+      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "pb-16 pt-14 sm:pt-20 lg:pb-24", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-10 lg:grid-cols-[0.92fr_1.08fr]", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, className: "max-w-3xl", children: [
+          /* @__PURE__ */ jsx(Badge, { appearance: "outline", icon: /* @__PURE__ */ jsx(Icon, { name: "lock", className: "text-sm" }), children: "Private operations, made legible" }),
+          /* @__PURE__ */ jsx(
+            TextReveal,
+            {
+              as: "h1",
+              text: "A calmer command center for high-trust digital work",
+              className: "max-w-4xl text-balance text-display-xl sm:text-display-3xl",
+              once: true
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "Cove gives teams a polished front door and a serious operating surface: approvals, signals, records, and handoffs in one understandable flow." }),
+          /* @__PURE__ */ jsxs(Row, { gap: 2, wrap: true, children: [
+            /* @__PURE__ */ jsx(Button, { size: "cta", render: /* @__PURE__ */ jsx("a", { href: "/demo" }), children: "Book a walkthrough" }),
+            /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", render: /* @__PURE__ */ jsx("a", { href: "#platform" }), children: "Explore platform" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl border border-border-floating bg-overlay p-3 text-overlay-foreground shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/3 border border-overlay-foreground/10 bg-overlay-foreground/8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-overlay-foreground/10 px-4 py-3", children: [
+            /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
+              /* @__PURE__ */ jsx(StatusDot, { tone: "warning" }),
+              /* @__PURE__ */ jsx(StatusDot, { tone: "edition" }),
+              /* @__PURE__ */ jsx(StatusDot, { tone: "success" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-label-sm text-overlay-foreground/70", children: "Live workspace" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 p-3 md:grid-cols-[0.7fr_1.3fr]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-label-sm text-overlay-foreground/60", children: "Spaces" }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: reviews.map((review) => /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/10 bg-overlay p-3", children: [
+                  /* @__PURE__ */ jsxs(Row, { justify: "between", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: review.name }),
+                    /* @__PURE__ */ jsx("span", { className: "text-mono-sm text-overlay-foreground", children: review.value })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-xs text-overlay-foreground/60", children: review.label })
+                ] }, review.name)) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4", children: [
+                /* @__PURE__ */ jsxs(Row, { justify: "between", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Route status" }),
+                  /* @__PURE__ */ jsx(Badge, { tone: "success", size: "sm", children: "Healthy" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: workflow.map((item) => /* @__PURE__ */ jsxs(Row, { justify: "between", className: "rounded-full bg-overlay px-3 py-2", children: [
+                  /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
+                    /* @__PURE__ */ jsx(StatusDot, { tone: item.tone }),
+                    /* @__PURE__ */ jsx("span", { className: "text-body-sm", children: item.label })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-label-sm text-overlay-foreground/60", children: item.state })
+                ] }, item.label)) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4", children: [
+              /* @__PURE__ */ jsxs(Row, { justify: "between", className: "border-b border-overlay-foreground/10 pb-4", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-label-sm text-overlay-foreground/60", children: "Signal map" }),
+                  /* @__PURE__ */ jsx("h2", { className: "mt-1 text-heading-3", children: "Every approval path in view" })
+                ] }),
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Review" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-6 grid min-h-72 grid-rows-[1fr_auto] gap-5", children: [
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 items-end gap-2 rounded-concentric-xl/10 bg-overlay p-4", children: bars.map((bar, index) => /* @__PURE__ */ jsx("div", { className: "flex h-56 items-end", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `w-full rounded-full ${bar.tone}`,
+                    style: { height: bar.height }
+                  }
+                ) }, `${bar.tone}-${index}`)) }),
+                /* @__PURE__ */ jsx("div", { className: "grid gap-2 sm:grid-cols-3", children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/10 border border-overlay-foreground/10 bg-overlay p-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-label-sm text-overlay-foreground/60", children: metric.label }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-2 text-heading-3", children: metric.value }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-xs text-overlay-foreground/60", children: metric.detail })
+                ] }, metric.label)) })
+              ] })
+            ] })
+          ] })
+        ] }) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("section", { id: "platform", className: "border-y border-border bg-muted/40 py-14", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-[0.8fr_1.2fr]", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          /* @__PURE__ */ jsx(Badge, { children: "Design mood" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-heading-1", children: "Marketing warmth, product discipline." }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-md text-muted-foreground", children: "The page uses a pill nav, tactile surfaces, soft status tones, and slower ease-out movement. It stays broad in color so it does not collapse into purple-brand sameness." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-3 md:grid-cols-3", children: features.map((feature) => /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("article", {}), className: "h-full", children: /* @__PURE__ */ jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-md bg-highlight text-highlight-foreground", children: /* @__PURE__ */ jsx(Icon, { name: feature.icon, className: "text-xl" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "mt-5 text-title-lg", children: feature.title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-body-sm text-muted-foreground", children: feature.body })
+        ] }) }, feature.title)) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "py-14", children: /* @__PURE__ */ jsx("div", { className: "grid gap-3 md:grid-cols-3", children: metrics.map((metric) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-label-md text-muted-foreground", children: metric.label }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-display-lg", children: metric.value }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-sm text-muted-foreground", children: metric.detail })
+      ] }) }, metric.label)) }) })
+    ] }),
+    /* @__PURE__ */ jsx("footer", { className: "border-t border-border bg-muted/35", children: /* @__PURE__ */ jsxs(Region, { max: "wide", className: "py-10 sm:py-12", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[1fr_1.35fr_1fr]", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-md", children: [
+          /* @__PURE__ */ jsxs("a", { href: "/", className: "flex w-fit items-center gap-2 rounded-full motion-interactive motion-press", children: [
+            /* @__PURE__ */ jsx("span", { className: "grid size-9 place-items-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-sm" }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-title-lg", children: "Cove" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "A calm operating surface for teams that need trust, speed, and context without the noise." }),
+          /* @__PURE__ */ jsxs(Row, { gap: 1, wrap: true, children: [
+            /* @__PURE__ */ jsx(Badge, { size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: "lock" }), children: "Private" }),
+            /* @__PURE__ */ jsx(Badge, { tone: "success", size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: "circle-check" }), children: "Live" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("nav", { "aria-label": "Footer", className: "grid gap-6 sm:grid-cols-3", children: footerGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-label-md text-muted-foreground", children: group.title }),
+          /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: link.href,
+              className: "flex min-h-9 items-center text-body-sm text-muted-foreground motion-interactive hover:text-foreground",
+              children: link.label
+            }
+          ) }, link.label)) })
+        ] }, group.title)) }),
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "Signal digest" }) }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "One weekly note on trusted workflows and product releases." }),
+            /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx("span", { className: "grid size-9 place-items-center rounded-full bg-highlight text-highlight-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-sm" }) }) })
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxs("form", { action: "/newsletter", className: "grid gap-2 sm:grid-cols-[1fr_auto]", children: [
+              /* @__PURE__ */ jsx("label", { htmlFor: "brand-footer-email", className: "sr-only", children: "Work email" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "brand-footer-email",
+                  name: "email",
+                  type: "email",
+                  autoComplete: "email",
+                  placeholder: "you@company.com"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full sm:w-auto", children: "Join" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: footerSignals.map((signal) => /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-muted p-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-mono-sm", children: signal.value }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-muted-foreground", children: signal.label })
+            ] }, signal.label)) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-10 flex flex-col gap-3 border-t border-border pt-5 text-caption text-muted-foreground sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsx("p", { children: "\xA9 2026 Cove. All rights reserved." }),
+        /* @__PURE__ */ jsxs(Row, { gap: 3, wrap: true, children: [
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "/privacy",
+              className: "flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground",
+              children: "Privacy"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "/terms",
+              className: "flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground",
+              children: "Terms"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "/contact",
+              className: "flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground",
+              children: "Contact"
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/patterns/brand-landing-page.meta.ts
+var brandLandingPageMeta = {
+  name: "BrandLandingPage",
+  summary: "High-fidelity brand/product landing page: pill navigation, editorial hero type, a dark product scene, calm status tones, CTA pair, feature cards, metrics, and a complete branded footer.",
+  intent: "Use this for a polished product marketing route that still needs to show a credible app surface. It is warmer and more tactile than the canonical LandingPage, but avoids trend-driven neon and generic hype cues.",
+  notes: [
+    "One display headline owns the first viewport; supporting copy stays in body-lg at prose measure.",
+    "The nav spends one compact pill surface, with a clear brand signal and two primary paths: sign in and request access.",
+    "The product scene uses overlay tokens for a stable dark media surface, then semantic tones for status and chart signals.",
+    "The footer closes the page with brand reassurance, a three-column sitemap, a digest signup, operational mini-metrics, and legal links.",
+    "Every surface outside the product scene is a real Card (feature, metric and digest cards); status marks are StatusDot. The scene's nested panels take `rounded-concentric-xl/<inset>` from the shell's radius, so the corners stay parallel at any radius preset.",
+    "Radius and shadow are theme-controlled. In Cove the same rounded-lg/xl classes read larger and softer; in other themes the structure still holds.",
+    "Color is intentionally broad: porcelain/plum/lavender/blue/mint/saffron/coral through semantic roles, not a one-note purple gradient."
+  ],
+  a11y: [
+    "The brand nav is a labeled nav landmark with real links and visible text.",
+    "The footer is a real footer landmark with a labeled footer nav, visible link text, and a labeled email field.",
+    "TextReveal preserves the full headline as one accessible label and honors reduced-motion policy.",
+    "Status dots are paired with visible text labels so color is never the only signal."
+  ]
+};
+var pending = true;
+var streamed = "Anchor on the oldest rendered message and add back however far it moved. Appends";
+var turns = [
+  {
+    id: "t_01",
+    mine: true,
+    body: "Our chat scroll jumps every time older messages load. What are we doing wrong?"
+  },
+  {
+    id: "t_02",
+    mine: false,
+    body: "Almost always the anchor. If you preserve the scroll position by measuring the container, prepending history moves everything under the reader."
+  },
+  {
+    id: "t_03",
+    mine: false,
+    body: "Anchor on the oldest rendered message instead and add back however far it moved. Appends leave it alone, so the same rule covers both."
+  }
+];
+function ChatPanel() {
+  return /* @__PURE__ */ jsx(Page, { as: "main", max: "feed", gap: 0, className: "py-6", children: /* @__PURE__ */ jsxs(
+    Card,
+    {
+      render: /* @__PURE__ */ jsx("section", { "aria-labelledby": "chat-title" }),
+      className: "flex h-[calc(100dvh_-_--spacing(12))] flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "border-b border-border pb-(--card-p)", children: [
+          /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h1", { id: "chat-title", children: "Scroll behaviour" }) }),
+          /* @__PURE__ */ jsx(CardDescription, { children: "Assistant \xB7 answers from your team's docs" }),
+          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Start a new chat", children: /* @__PURE__ */ jsx(Icon, { name: "plus" }) }) })
+        ] }),
+        /* @__PURE__ */ jsxs(MessageScroller, { className: "min-h-0 flex-1 p-(--card-p)", children: [
+          /* @__PURE__ */ jsx(Marker, { variant: "separator", children: "Today" }),
+          turns.map((turn, i) => /* @__PURE__ */ jsx(
+            Message,
+            {
+              messageId: turn.id,
+              align: turn.mine ? "end" : "start",
+              grouped: i > 0 && turns[i - 1].mine === turn.mine,
+              avatar: turn.mine ? void 0 : /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AI" }),
+              children: /* @__PURE__ */ jsx(
+                Bubble,
+                {
+                  variant: turn.mine ? "primary" : "muted",
+                  align: turn.mine ? "end" : "start",
+                  tail: i === 0 || turns[i - 1].mine !== turn.mine,
+                  children: turn.body
+                }
+              )
+            },
+            turn.id
+          )),
+          /* @__PURE__ */ jsx(Marker, { variant: "note", icon: "sparkles", children: "Read message-scroller.md" }),
+          /* @__PURE__ */ jsxs(Message, { messageId: "t_04", avatar: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AI" }), children: [
+            /* @__PURE__ */ jsxs(Bubble, { variant: "plain", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-body-md text-foreground", children: "Here is the shape of it:" }),
+              /* @__PURE__ */ jsx(
+                CodeBlock,
+                {
+                  code: "const shift = anchor.offsetTop - lastTop\nif (shift !== 0) viewport.scrollTop += shift",
+                  filename: "preserve.ts"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(BubbleReactions, { children: /* @__PURE__ */ jsx(BubbleReaction, { emoji: "\u{1F3AF}", count: 2, active: true }) })
+          ] }),
+          /* @__PURE__ */ jsx(Message, { messageId: "t_05", align: "end", children: /* @__PURE__ */ jsx(Attachment, { name: "scroller.tsx", meta: "4.2 KB \xB7 TSX" }) }),
+          /* @__PURE__ */ jsx(Message, { messageId: "t_06", avatar: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AI" }), children: /* @__PURE__ */ jsx(Bubble, { variant: "plain", children: /* @__PURE__ */ jsx(StreamingText, { text: streamed, streaming: pending }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(CardFooter, { className: "border-t border-border pt-(--card-p)", children: /* @__PURE__ */ jsx(
+          ChatComposer,
+          {
+            className: "flex-1",
+            placeholder: "Ask a follow-up\u2026",
+            busy: pending,
+            onStop: () => void 0,
+            onAttach: () => void 0,
+            footer: "Enter to send \xB7 Shift+Enter for a new line",
+            actions: /* @__PURE__ */ jsxs(
+              SettingsMenu,
+              {
+                variant: "subtle",
+                size: "xs",
+                label: "Change model and effort",
+                summary: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "5.6 Sol" }),
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "High" })
+                ] }),
+                children: [
+                  /* @__PURE__ */ jsx(SettingsRow, { label: "Model", value: "5.6 Sol", children: /* @__PURE__ */ jsxs(MenuRadioGroup, { defaultValue: "sol", children: [
+                    /* @__PURE__ */ jsx(MenuRadioItem, { value: "sol", children: "5.6 Sol" }),
+                    /* @__PURE__ */ jsx(MenuRadioItem, { value: "lite", children: "5.6 Lite" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(SettingsRow, { label: "Effort", value: "High", children: /* @__PURE__ */ jsxs(MenuRadioGroup, { defaultValue: "high", children: [
+                    /* @__PURE__ */ jsx(MenuRadioItem, { value: "low", children: "Low" }),
+                    /* @__PURE__ */ jsx(MenuRadioItem, { value: "standard", children: "Standard" }),
+                    /* @__PURE__ */ jsx(MenuRadioItem, { value: "high", children: "High" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(SettingsRow, { label: "Speed", value: "Standard", children: /* @__PURE__ */ jsxs(MenuRadioGroup, { defaultValue: "standard", children: [
+                    /* @__PURE__ */ jsx(MenuRadioItem, { value: "standard", children: "Standard" }),
+                    /* @__PURE__ */ jsx(MenuRadioItem, { value: "priority", children: "Priority" })
+                  ] }) })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+
+// src/patterns/chat-panel.meta.ts
+var chatPanelMeta = {
+  name: "ChatPanel",
+  summary: "A full-height conversation surface: titled header, scrolling transcript, and a composer pinned to the bottom \u2014 the assembled shape of an AI assistant, a support thread, or a DM.",
+  intent: "Reach for this for any conversation that owns its screen \u2014 an assistant, a support inbox thread, a DM. Not for a chat docked beside other work (compose the same three parts inside a Sheet or a PanelGroup instead), and not for a comment thread under an article, which is a FeedPage concern.",
+  notes: [
+    "The panel is a fixed-height column, not a growing page. `h-[calc(100dvh_-_--spacing(12))]` on the Card (the viewport minus the Page's py-6, in spacing units so density moves both together \u2014 a fixed `3rem` drifts the moment density moves the padding) and `flex-1 min-h-0` on the MessageScroller are what make the transcript scroll instead of the document \u2014 the single most common thing to get wrong here, and it fails by pushing the composer off the bottom of the screen.",
+    "The panel is a Card, not a hand-built bordered section: CardHeader (title, description, CardAction), the MessageScroller and a CardFooter all inset by the card's own `--card-p`, so the three regions share one edge at any card density.",
+    "`dvh` rather than `vh`: on mobile the URL bar collapses, and a `vh`-sized panel puts the composer under it exactly when someone is trying to type.",
+    "Region cap is `feed` (640px) \u2014 a conversation is a reading column, and the Bubble measure cap is tuned to the same assumption.",
+    "The composer sits outside the scroll region, in a bordered CardFooter, so it stays put while the transcript moves.",
+    "Grouping is derived from the data (`turns[i - 1].mine === turn.mine`) rather than hand-set, and the tail is dropped on continuations \u2014 that pairing is what makes a run read as one block.",
+    'The assistant\'s long-form answer uses `variant="plain"`. A tinted box around a code block reads as a quote rather than as a turn.',
+    "The answer in flight is a `StreamingText` in a `plain` Bubble, and ONE `pending` flag drives both it and the composer's `busy`. They are the same wait reported at the two ends of the panel; letting them drift gives you a composer still saying 'sending' under an answer that already finished.",
+    "A spinner `Marker` (or `ThinkingOrb`) belongs BEFORE the first token and is replaced once tokens land, not kept alongside. Two indicators for one wait read as two things happening \u2014 which is also why `StreamingText` takes `caret={false}` when something adjacent already reports it.",
+    'MessageScroller needs no configuring for this: it re-follows on "a message grew" (ResizeObserver) as well as "a message arrived", so the newest token stays pinned while a reader who has scrolled up is left alone.',
+    "For a new thread, swap the transcript's children for an `<EmptyState>` inside the same MessageScroller \u2014 the panel, header and composer are unchanged, which is the point of keeping them separate."
+  ],
+  a11y: [
+    "The panel header's title is the page's <h1> (an h1 inside CardTitle, which carries the type); the transcript is a scroll region with native overflow, so keyboard scrolling works unchanged.",
+    "The answer in flight carries `aria-busy` rather than sitting in a live region. That is deliberate: a live region around streamed text announces every token, which is unusable. Announce once when the turn settles, from whatever owns the turn \u2014 the incomplete state is still exposed, just not narrated.",
+    "The composer is a real <form> whose Enter handling skips IME composition, and every icon-only control in the panel carries an accessible label."
+  ]
+};
+var STATUS_TONE = { ready: "standard", building: "warning", queued: "neutral", failed: "destructive" };
+var statusTone = (status) => STATUS_TONE[status];
+var MIN = 60 * 1e3;
+var HOUR = 60 * MIN;
+var stats = [
+  { label: "Revenue", value: "$12,480", delta: "+8.2%", up: true, note: "vs. previous 30 days" },
+  { label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 from new collectors" },
+  { label: "New collectors", value: "312", delta: "+12.4%", up: true, note: "best month this year" },
+  { label: "Sell-through", value: "64%", delta: "\u22121.8%", up: false, note: "across 48 active editions" }
+];
+var deployments = [
+  { id: "dp_01", project: "storefront", commit: "a41f2c9", status: "ready", duration: "42s", updated: 2 * MIN },
+  { id: "dp_02", project: "api", commit: "7c03bd1", status: "building", duration: "1m 08s", updated: 9 * MIN },
+  { id: "dp_03", project: "docs", commit: "e992a70", status: "queued", duration: "\u2014", updated: 12 * MIN },
+  { id: "dp_04", project: "worker", commit: "51b8e04", status: "failed", duration: "18s", updated: 1 * HOUR },
+  { id: "dp_05", project: "storefront", commit: "90cc41a", status: "ready", duration: "39s", updated: 3 * HOUR },
+  { id: "dp_06", project: "renderer", commit: "b7714dd", status: "ready", duration: "2m 31s", updated: 5 * HOUR },
+  { id: "dp_07", project: "api", commit: "f30a9e2", status: "ready", duration: "1m 02s", updated: 8 * HOUR }
+];
+var activity = [
+  { id: "ac_01", who: "Nina Simone", initials: "NS", what: "collected Gold Rush #42", when: 2 * MIN },
+  { id: "ac_02", who: "Grace Hopper", initials: "GH", what: "minted a 100-run edition", when: 26 * MIN },
+  { id: "ac_03", who: "Ada Lovelace", initials: "AL", what: "followed you", when: 1 * HOUR },
+  { id: "ac_04", who: "Mary Shelley", initials: "MS", what: "collected Quiet Harbor", when: 3 * HOUR },
+  { id: "ac_05", who: "Frida Kahlo", initials: "FK", what: "tipped 0.2 SOL on Process", when: 6 * HOUR }
+];
+function DashboardPage() {
+  return /* @__PURE__ */ jsx(
+    AppShell,
+    {
+      header: /* @__PURE__ */ jsx(AppHeader, { title: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" }) }),
+      bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", showLabel: true, active: true, render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Collectors", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/collectors" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }), label: "Activity", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/activity" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
+      ] }),
+      sidebar: /* @__PURE__ */ jsxs(Sidebar, { children: [
+        /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" }) }),
+        /* @__PURE__ */ jsxs(SidebarNav, { children: [
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", active: true, render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Collectors", render: /* @__PURE__ */ jsx("a", { href: "/collectors" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }), label: "Activity", render: /* @__PURE__ */ jsx("a", { href: "/activity" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsxs(Page, { max: "wide", gap: 4, className: "py-6", children: [
+        /* @__PURE__ */ jsx(
+          PageHeader,
+          {
+            title: "Overview",
+            description: "Sales, collects, and edition activity for the last 30 days.",
+            actions: /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
+              /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Export" }),
+              /* @__PURE__ */ jsx(Button, { children: "New edition" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 2, xl: 4 }, gap: 3, children: stats.map((stat) => /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardDescription, { children: stat.label }),
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: stat.value }),
+            /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs(Badge, { tone: stat.up ? "success" : "neutral", size: "sm", children: [
+              /* @__PURE__ */ jsx(Icon, { name: stat.up ? "chevron-up" : "chevron-down" }),
+              stat.delta
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: stat.note }) })
+        ] }, stat.label)) }),
+        /* @__PURE__ */ jsxs(Grid, { cols: { base: 1, xl: 3 }, gap: 3, children: [
+          /* @__PURE__ */ jsxs(Card, { className: "xl:col-span-2", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsx(CardTitle, { children: "Recent deployments" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Builds across every project, newest first." }),
+              /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/deployments" }), children: "View all" }) })
+            ] }),
+            /* @__PURE__ */ jsx(CardContent, { flush: true, children: /* @__PURE__ */ jsx(
+              DataTable,
+              {
+                data: deployments,
+                rowKey: (row) => row.id,
+                columns: [
+                  { key: "project", header: "Project", sortable: true, className: "text-label-md" },
+                  { key: "commit", header: "Commit", cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-mono-caption text-muted-foreground", children: row.commit }) },
+                  { key: "status", header: "Status", cell: (row) => /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: statusTone(row.status), dot: true, children: row.status }) },
+                  { key: "duration", header: "Duration", align: "end", cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-mono-caption", children: row.duration }) },
+                  { key: "updated", header: "Updated", align: "end", cell: (row) => /* @__PURE__ */ jsx(RelativeTime, { date: Date.now() - row.updated, className: "text-body-xs text-muted-foreground" }) }
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(Card, { children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsx(CardTitle, { children: "Activity" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Collects, mints, and follows." })
+            ] }),
+            /* @__PURE__ */ jsx(CardList, { children: activity.map((item) => /* @__PURE__ */ jsx(
+              Entity,
+              {
+                density: "compact",
+                leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: item.initials, alt: item.who }),
+                title: /* @__PURE__ */ jsxs("span", { className: "text-body-sm", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-label-md", children: item.who }),
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.what })
+                ] }),
+                action: /* @__PURE__ */ jsx(RelativeTime, { date: Date.now() - item.when, className: "text-caption text-muted-foreground" })
+              },
+              item.id
+            )) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/patterns/dashboard-page.meta.ts
+var dashboardPageMeta = {
+  name: "DashboardPage",
+  summary: "App-shell dashboard: sidebar chrome (AppHeader + BottomNav below lg), a wide content region, a stat-card row that breathes, and a data table \u2014 the default shape for operator/analytics home routes.",
+  intent: "Reach for this when a route's job is monitoring or managing many records (metrics, deployments, orders, posts). Not for reading-focused routes (use FeedPage) or single-record routes (use ListDetailPage's detail side).",
+  notes: [
+    "Region cap is `wide` (1280px): dashboards hold tables and multi-column grids, never a reading column.",
+    "Stat cards: CardHeader carries label (CardDescription) + value + trend badge (CardAction pins it top-right); KPI values are `text-mono-xl` \u2014 the metric mono tier, tabular figures \u2014 never a heading tier.",
+    "Stat cards use an explicit cols map (1 \u2192 2 \u2192 4) \u2014 a 4-stat row must fold to 2\xD72, never strand an orphan the way auto-fit can.",
+    "The table runs flush to the card edges with `<CardContent flush>`, which hands the card's padding to the table (`--table-edge-px`), so the first and last columns line up with the CardHeader at any card density \u2014 never hand-set pl-6/pr-6. Numeric columns align end in mono.",
+    "The Activity list is Entity rows in CardList, inset to the card padding and divided by hairlines \u2014 the same list shape as ListDetailPage, never CardContent with hand-tuned px.",
+    "Believable density is part of the pattern: 7 rows, commit hashes in mono-caption, RelativeTime muted \u2014 never 3 rows of filler.",
+    "The page has exactly one heading-1 (PageHeader); card titles are Title tier, not headings.",
+    "Chrome (Sidebar) is outside the content grid; the Page region caps only content.",
+    "Sidebar hides below lg, so the shell's header carries an AppHeader and its footer a BottomNav with the same destinations \u2014 never strand mobile users without navigation."
+  ],
+  a11y: [
+    'AppShell provides the skip link and <main id="main-content"> landmark.',
+    "The active SidebarItem and BottomNavItem carry aria-current via `active`.",
+    "DataTable headers are real <th>; sortable columns are announced."
+  ]
+};
+var posts = [
+  {
+    id: "p_01",
+    author: "Ada Lovelace",
+    handle: "@ada \xB7 2h",
+    initials: "AL",
+    body: "New edition drops Friday \u2014 100 signed prints, each with the on-chain original.",
+    image: "/media/edition-cover.svg",
+    alt: "Edition cover \u2014 Gold Rush series",
+    likes: 128,
+    comments: 24
+  },
+  {
+    id: "p_02",
+    author: "Grace Hopper",
+    handle: "@grace \xB7 5h",
+    initials: "GH",
+    body: "Process shot from this week's series. Compilers and copper ink.",
+    image: "/media/process-shot.svg",
+    alt: "Work-in-progress plotter drawing in copper ink",
+    likes: 86,
+    comments: 9
+  }
+];
+function FeedPage() {
+  return /* @__PURE__ */ jsxs(Page, { as: "main", max: "feed", gap: 4, className: "py-6", children: [
+    /* @__PURE__ */ jsx(PageHeader, { title: "Home", description: "Latest posts from artists you follow." }),
+    /* @__PURE__ */ jsx(Stack, { gap: 3, children: posts.map((post) => /* @__PURE__ */ jsx("article", { children: /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
+      /* @__PURE__ */ jsx(CardList, { children: /* @__PURE__ */ jsx(
+        Entity,
+        {
+          leading: /* @__PURE__ */ jsx(Avatar, { fallback: post.initials, alt: post.author }),
+          title: post.author,
+          subtitle: post.handle,
+          action: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Post options", children: /* @__PURE__ */ jsx(Icon, { name: "ellipsis" }) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(AspectBox, { ratio: 16 / 9, children: /* @__PURE__ */ jsx("img", { src: post.image, alt: post.alt, className: "size-full object-cover" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-body-md text-foreground", children: post.body }),
+        /* @__PURE__ */ jsxs(Row, { gap: 1, className: "-ms-3", children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", "aria-label": `Like \u2014 ${post.likes}`, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "heart" }),
+            post.likes
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", "aria-label": `Comments \u2014 ${post.comments}`, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "comment" }),
+            post.comments
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Share", children: /* @__PURE__ */ jsx(Icon, { name: "share" }) })
+        ] })
+      ] })
+    ] }) }, post.id)) }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", loadingLabel: "Loading\u2026", children: "Load more posts" })
+  ] });
+}
+
+// src/patterns/feed-page.meta.ts
+var feedPageMeta = {
+  name: "FeedPage",
+  summary: "Single-column reading feed: a feed-width region, one Card per post (Entity byline, zero-shift media, body copy, quiet action row), and explicit load-more pagination.",
+  intent: "Reach for this for timelines, activity streams, and any reverse-chronological reading surface. Not for record management (DashboardPage) or side-by-side browsing (ListDetailPage).",
+  notes: [
+    "Region cap is `feed` (640px) \u2014 a single reading column; media and copy share one measure.",
+    "Post media sits in an AspectBox so late-loading images never shift the column.",
+    "The byline is Entity (Avatar + name + handle) in a CardList \u2014 the same row primitive as everywhere else, inset to the card padding by CardList rather than by zeroing paddings on CardHeader and Entity.",
+    "Actions are ghost sm Buttons (icon + count) in a Row, pulled out by the button's own padding (`-ms-3`) so the first icon sits on the text edge: quiet chrome under content, not competing pills.",
+    "Pagination is an explicit load-more Button (secondary; set `loading` while the next page fetches \u2014 `loadingLabel` names that state), not infinite scroll \u2014 predictable for keyboard and AT users."
+  ],
+  a11y: [
+    "Each post is an <article>, so AT users can jump between posts.",
+    "Icon-only action buttons carry aria-labels.",
+    "Media images get meaningful alt text from the post, empty alt only if decorative."
+  ]
+};
+var features2 = [
+  {
+    icon: "sparkles",
+    title: "Own the surface",
+    body: "Semantic tokens end-to-end \u2014 re-theme the whole product without touching a component."
+  },
+  {
+    icon: "component",
+    title: "Behavior included",
+    body: "Focus, keyboard nav, and ARIA ride on Base UI primitives under every surface."
+  },
+  {
+    icon: "layout",
+    title: "Pages, not just parts",
+    body: "Purpose-named regions, an 8px rhythm, and canonical page shells for the routes every product needs."
+  }
+];
+function LandingPage() {
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-dvh bg-background", children: [
+    /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs(Region, { as: "nav", "aria-label": "Main", className: "grid h-16 grid-cols-[1fr_auto_1fr] items-center", children: [
+      /* @__PURE__ */ jsx("span", { className: "justify-self-start text-title-sm", children: "Sable" }),
+      /* @__PURE__ */ jsxs(Row, { gap: 1, className: "justify-self-center max-sm:hidden", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/docs" }), children: "Docs" }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/patterns" }), children: "Patterns" }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/themes" }), children: "Themes" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", className: "justify-self-end", render: /* @__PURE__ */ jsx("a", { href: "/signup" }), children: "Get started" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("main", { children: [
+      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "py-24", children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "text-center", children: [
+        /* @__PURE__ */ jsx(Badge, { appearance: "outline", size: "sm", children: "Now in beta" }),
+        /* @__PURE__ */ jsx("h1", { className: "max-w-4xl text-balance text-display-2xl", children: "Ship product UI your agents can't get wrong" }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "An owned, themeable component system with enforced tokens, typography, and motion \u2014 documented for machines as carefully as for people." }),
+        /* @__PURE__ */ jsxs(Row, { gap: 2, justify: "center", children: [
+          /* @__PURE__ */ jsx(Button, { size: "cta", children: "Get started" }),
+          /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", children: "Read the docs" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "pb-24", children: /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx(Grid, { minItemWidth: "calc(var(--spacing) * 64)", children: features2.map((feature) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Icon, { name: feature.icon, className: "text-xl text-muted-foreground" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-title-lg", children: feature.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: feature.body })
+      ] }) }, feature.title)) }) }) })
+    ] }),
+    /* @__PURE__ */ jsx("footer", { className: "border-t border-border", children: /* @__PURE__ */ jsxs(Region, { className: "flex h-16 items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: "\xA9 2026 Sable" }),
+      /* @__PURE__ */ jsxs(Row, { gap: 3, children: [
+        /* @__PURE__ */ jsx("a", { href: "/github", className: "text-caption text-muted-foreground motion-interactive hover:text-foreground", children: "GitHub" }),
+        /* @__PURE__ */ jsx("a", { href: "/changelog", className: "text-caption text-muted-foreground motion-interactive hover:text-foreground", children: "Changelog" })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/patterns/landing-page.meta.ts
+var landingPageMeta = {
+  name: "LandingPage",
+  summary: "Marketing hero + feature grid: display-tier headline as the page's single loud moment, an eyebrow kicker, a two-action CTA row, and a three-up feature grid that reveals on scroll.",
+  intent: "Reach for this for the marketing/landing route of a product \u2014 the one page where Display type and scroll reveals belong. Not for product UI (display type and one-per-view rules forbid it inside the app).",
+  notes: [
+    "Display type is the marketing voice: exactly one display headline per page, tight leading, weight 700+.",
+    'The eyebrow is a small outline Badge (`size="sm"`) \u2014 the badge\'s own size, never a type class forced onto its label; hierarchy above the headline is eyebrow \u2192 display \u2192 lede.',
+    "The lede is body-lg capped at the prose measure \u2014 the headline may be wide, reading text may not.",
+    "Two CTAs max: one primary, one quiet outline. More actions dilute the hero.",
+    "Reveal wraps below-the-fold sections only; it no-ops under reduced motion via the motion policy.",
+    "Feature cards are Cards in a Grid with minItemWidth (three-up that reflows on its own width), each icon + title + body-sm copy."
+  ],
+  a11y: [
+    "The hero headline is the page h1; feature titles are h2s restyled with the Title tier.",
+    "Reveal renders content immediately (no animation) when prefers-reduced-motion is set.",
+    "CTA buttons are real links or buttons with visible text \u2014 no icon-only CTAs."
+  ]
+};
+var members = [
+  { id: "u_01", name: "Ada Lovelace", handle: "@ada", role: "Owner", initials: "AL", pending: false },
+  { id: "u_02", name: "Grace Hopper", handle: "@grace", role: "Admin", initials: "GH", pending: false },
+  { id: "u_03", name: "Mary Shelley", handle: "@mary", role: "Member", initials: "MS", pending: false },
+  { id: "u_04", name: "Nina Simone", handle: "@nina", role: "Member", initials: "NS", pending: false },
+  { id: "u_05", name: "Frida Kahlo", handle: "@frida", role: "Member", initials: "FK", pending: false },
+  { id: "u_06", name: "hopper@navy.mil", handle: "invited 2 days ago", role: "Member", initials: "?", pending: true }
+];
+function ListDetailPage() {
+  return /* @__PURE__ */ jsxs(Page, { as: "main", max: "wide", gap: 4, className: "py-6", children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: "Members",
+        description: "Everyone with access to this workspace.",
+        actions: /* @__PURE__ */ jsx(Button, { children: "Invite member" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Columns, { count: { base: 1, lg: 12 }, children: [
+      /* @__PURE__ */ jsx(Col, { span: { base: 1, lg: 8 }, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+        /* @__PURE__ */ jsx(SearchInput, { placeholder: "Search members", "aria-label": "Search members" }),
+        /* @__PURE__ */ jsx(Card, { className: "overflow-hidden", children: /* @__PURE__ */ jsx(CardList, { children: members.map((member) => /* @__PURE__ */ jsx(
+          Entity,
+          {
+            leading: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                fallback: member.pending ? "\u2022" : member.initials,
+                alt: member.pending ? "" : member.name
+              }
+            ),
+            title: /* @__PURE__ */ jsx("span", { className: member.pending ? "text-muted-foreground" : void 0, children: member.name }),
+            subtitle: member.handle,
+            action: member.pending ? /* @__PURE__ */ jsx(Badge, { children: "Invited" }) : /* @__PURE__ */ jsx(Badge, { appearance: "outline", children: member.role })
+          },
+          member.id
+        )) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Col, { span: { base: 1, lg: 4 }, children: /* @__PURE__ */ jsx("aside", { className: "sticky top-6", children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Workspace" }) }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs(Description, { children: [
+            /* @__PURE__ */ jsx(DescriptionItem, { term: "Members", detail: /* @__PURE__ */ jsx("span", { className: "text-mono-md", children: "5" }) }),
+            /* @__PURE__ */ jsx(DescriptionItem, { term: "Pending invites", detail: /* @__PURE__ */ jsx("span", { className: "text-mono-md", children: "1" }) }),
+            /* @__PURE__ */ jsx(DescriptionItem, { term: "Seats used", detail: /* @__PURE__ */ jsx("span", { className: "text-mono-md", children: "6 / 10" }) })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "mt-1 self-start", children: "Manage plan" })
+        ] })
+      ] }) }) })
+    ] })
+  ] });
+}
+
+// src/patterns/list-detail-page.meta.ts
+var listDetailPageMeta = {
+  name: "ListDetailPage",
+  summary: "Two-column list-detail: a wide region split 8/4, the record list as Entity rows in the main column, and a sticky supporting rail (detail, filters, or summary) beside it.",
+  intent: "Reach for this when a route lists records AND keeps one selected/summarized in view (members + member detail, inbox + message, orders + order). For pure browsing with no rail, a single-column FeedPage or DashboardPage table is simpler.",
+  notes: [
+    "Region cap is `wide`; the split is Columns 12 \u2192 Col 8 + Col 4, collapsing to stacked full-width columns below lg via breakpoint maps.",
+    "List rows are Entity inside one bordered Card, in CardList: it insets each row to the card padding and divides them with hairlines \u2014 on a dark canvas rows need an anchoring surface, not a flat float.",
+    "Pending records live in the same list, muted (muted title + `Invited` badge), instead of a separate section.",
+    "The rail card holds label/value pairs as a Description list \u2014 muted terms, mono (tabular) values \u2014 plus one quiet action. Never hand-built `justify-between` rows.",
+    "The rail is sticky (top on the 4px scale) so the summary stays in view while the list scrolls."
+  ],
+  a11y: [
+    "Entity rows given `interactive` + `onSelect` (to open a member's detail) render as real buttons; keyboard focus follows list order. Rows here are presentational.",
+    "The rail is an <aside> landmark; the list column is the main content."
+  ]
+};
+function SettingsPage() {
+  return /* @__PURE__ */ jsx(
+    AppShell,
+    {
+      header: /* @__PURE__ */ jsx(AppHeader, { title: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" }) }),
+      bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Collectors", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/collectors" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }), label: "Activity", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/activity" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", showLabel: true, active: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
+      ] }),
+      sidebar: /* @__PURE__ */ jsxs(Sidebar, { children: [
+        /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" }) }),
+        /* @__PURE__ */ jsxs(SidebarNav, { children: [
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Collectors", render: /* @__PURE__ */ jsx("a", { href: "/collectors" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }), label: "Activity", render: /* @__PURE__ */ jsx("a", { href: "/activity" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", active: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsxs(Page, { max: "content", gap: 4, className: "py-6", children: [
+        /* @__PURE__ */ jsx(
+          PageHeader,
+          {
+            title: "Settings",
+            description: "Your profile, notifications, and account controls."
+          }
+        ),
+        /* @__PURE__ */ jsx(Form, { onSubmit: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs(Fieldset, { children: [
+          /* @__PURE__ */ jsx(FieldsetLegend, { children: "Profile" }),
+          /* @__PURE__ */ jsx(FieldsetDescription, { children: "How you appear across the app." }),
+          /* @__PURE__ */ jsxs(FieldsetContent, { children: [
+            /* @__PURE__ */ jsx(Field, { label: "Display name", required: true, children: /* @__PURE__ */ jsx(Input, { name: "displayName", defaultValue: "ada" }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Bio", description: "Shown on your public profile.", children: /* @__PURE__ */ jsx(Textarea, { name: "bio", rows: 3, placeholder: "Tell collectors who you are" }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Timezone", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "utc", name: "timezone", children: [
+              /* @__PURE__ */ jsx(SelectTrigger, {}),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "utc", children: "UTC" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "est", children: "Eastern (UTC\u22125)" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "pst", children: "Pacific (UTC\u22128)" })
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(FieldsetFooter, { children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save profile" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Form, { onSubmit: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs(Fieldset, { children: [
+          /* @__PURE__ */ jsx(FieldsetLegend, { children: "Notifications" }),
+          /* @__PURE__ */ jsx(FieldsetDescription, { children: "What we email you about." }),
+          /* @__PURE__ */ jsxs(FieldsetContent, { children: [
+            /* @__PURE__ */ jsx(Field, { label: "New collector alerts", orientation: "horizontal", children: /* @__PURE__ */ jsx(Switch, { name: "collectorAlerts", defaultChecked: true }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Weekly digest", orientation: "horizontal", children: /* @__PURE__ */ jsx(Switch, { name: "weeklyDigest" }) })
+          ] }),
+          /* @__PURE__ */ jsx(FieldsetFooter, { children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save notifications" }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Fieldset, { children: [
+          /* @__PURE__ */ jsx(FieldsetLegend, { children: "Danger zone" }),
+          /* @__PURE__ */ jsx(FieldsetDescription, { children: "Deleting your account removes your posts and collections permanently." }),
+          /* @__PURE__ */ jsx(FieldsetFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "destructive", children: "Delete account" }) })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/patterns/settings-page.meta.ts
+var settingsPageMeta = {
+  name: "SettingsPage",
+  summary: "Stacked settings sections inside the app shell: a content-width region, one Fieldset card per concern (each with its own save), auto-wired Form/Field rows, and a destructive zone last.",
+  intent: "Reach for this for account/profile/workspace settings and any 'edit a handful of grouped preferences' route. Not for a single short form (use AuthPage's centered form shape) or bulk record editing (use DashboardPage + DataTable).",
+  notes: [
+    "Region cap is `content` (896px): settings panes hold labeled rows and the occasional 2-up field, never a full grid.",
+    "One Fieldset per concern, each with its own footer save \u2014 per-section saves beat one page-wide submit for settings.",
+    "Field wires label/description/error a11y automatically; never hand-roll <label> + <input> pairs here.",
+    "The destructive section is visually last, isolated in its own Fieldset with a destructive-variant action.",
+    'Toggles use orientation="horizontal" Fields so the label sits beside the Switch.',
+    "Lives in the same AppShell as DashboardPage: Sidebar from lg up, AppHeader + BottomNav below it, with Settings marked active in both."
+  ],
+  a11y: [
+    'AppShell provides the skip link and <main id="main-content"> landmark; the active SidebarItem and BottomNavItem carry aria-current.',
+    "Each section is a real <fieldset> with a <legend> (FieldsetLegend).",
+    "Field auto-wires htmlFor/id, aria-describedby (description + error), aria-invalid, and required.",
+    "The danger action is a real button labeled by its visible text \u2014 no icon-only destructive controls."
+  ]
+};
+
+export { AuthPage, BrandLandingPage, ChatPanel, DashboardPage, FeedPage, LandingPage, ListDetailPage, SettingsPage, authPageMeta, brandLandingPageMeta, chatPanelMeta, dashboardPageMeta, feedPageMeta, landingPageMeta, listDetailPageMeta, settingsPageMeta };