@sableui/react 0.6.2 → 0.7.1

package/dist/patterns/brand-landing-page.js

@@ -0,0 +1,341 @@
+// src/patterns/brand-landing-page.tsx
+import { Avatar } from "../components/avatar/index.js";
+import { Badge } from "../components/badge/index.js";
+import { Button } from "../components/button/index.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../components/card/index.js";
+import { Input } from "../components/input/index.js";
+import { Separator } from "../components/separator/index.js";
+import { StatusDot } from "../components/status-dot/index.js";
+import { Icon } from "../icon/index.js";
+import { Grid, Region, Row, Stack } from "../layout/index.js";
+import { Reveal, TextReveal } from "../motion/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var navItems = [
+  { label: "Platform", href: "#platform" },
+  { label: "How it works", href: "#how-it-works" },
+  { label: "Customers", href: "#customers" },
+  { label: "Pricing", href: "/pricing" }
+];
+var spaces = [
+  { name: "Waypoint", value: "98.4%", label: "clear routes" },
+  { name: "Fielddesk", value: "12", label: "open holds" },
+  { name: "Archive", value: "4.8k", label: "sealed records" }
+];
+var routes = [
+  { label: "Intake", state: "Open", tone: "info" },
+  { label: "Review", state: "Live", tone: "edition" },
+  { label: "Archive", state: "Safe", tone: "success" }
+];
+var bars = [
+  { week: "w1", height: "38%", current: false },
+  { week: "w2", height: "56%", current: false },
+  { week: "w3", height: "44%", current: false },
+  { week: "w4", height: "68%", current: false },
+  { week: "w5", height: "52%", current: false },
+  { week: "w6", height: "78%", current: false },
+  { week: "w7", height: "60%", current: false },
+  { week: "w8", height: "72%", current: false },
+  { week: "w9", height: "88%", current: true }
+];
+var sceneMetrics = [
+  { label: "Cleared", value: "1.8M", detail: "last 30 days" },
+  { label: "Review", value: "42s", detail: "median path" },
+  { label: "Spaces", value: "284", detail: "active teams" }
+];
+var values = [
+  {
+    icon: "lock",
+    title: "Private by default",
+    body: "Roles, approvals, and handoff history stay with the people who need them. No shared inboxes, no forwarded screenshots."
+  },
+  {
+    icon: "bell",
+    title: "Signals before surprises",
+    body: "Cove watches every route and surfaces stalled reviews and expiring approvals while there is still time to act."
+  },
+  {
+    icon: "clock",
+    title: "A trail for every decision",
+    body: "Each approval keeps its context, reviewer, and timestamp, so an audit takes an afternoon instead of a quarter."
+  }
+];
+var steps = [
+  {
+    number: "01",
+    title: "Connect your spaces",
+    body: "Bring teams, vendors, and record stores into one workspace, with roles that mirror how you already work."
+  },
+  {
+    number: "02",
+    title: "Route every approval",
+    body: "Requests follow the path you define, with reviewers, deadlines, and escalation built in from the start."
+  },
+  {
+    number: "03",
+    title: "Seal the record",
+    body: "Approved work is archived with its full context and is ready for review the moment it closes."
+  }
+];
+var outcomes = [
+  { value: "3.2\xD7", label: "faster approvals in the first quarter" },
+  { value: "68%", label: "fewer follow-ups on handoffs" },
+  { value: "1 day", label: "to prepare a quarterly audit" }
+];
+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 legalLinks = [
+  { label: "Privacy", href: "/privacy" },
+  { label: "Terms", href: "/terms" },
+  { label: "Contact", href: "/contact" }
+];
+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.href }), children: item.label }, item.label)) }) }),
+          /* @__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-20 pt-14 sm:pt-20 lg:pb-28", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-10", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-2xl", 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 work",
+              className: "text-balance text-display-lg sm:text-display-2xl",
+              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, className: "pt-3", 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 the platform" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "dark", "aria-hidden": true, inert: true, children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl border border-border-floating bg-popover p-3 text-popover-foreground shadow-xl", children: /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/3 border border-border bg-card", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border 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-muted-foreground", 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 max-md:hidden", children: [
+              /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-border bg-background p-4", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-label-sm text-muted-foreground", children: "Spaces" }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: spaces.map((space) => /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/10 bg-card p-3", children: [
+                  /* @__PURE__ */ jsxs(Row, { justify: "between", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: space.name }),
+                    /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: space.value })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-xs text-muted-foreground", children: space.label })
+                ] }, space.name)) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-border bg-background 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", dot: true, children: "Healthy" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: routes.map((route) => /* @__PURE__ */ jsxs(Row, { justify: "between", className: "rounded-full bg-card px-3 py-2", children: [
+                  /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
+                    /* @__PURE__ */ jsx(StatusDot, { tone: route.tone }),
+                    /* @__PURE__ */ jsx("span", { className: "text-body-sm", children: route.label })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-label-sm text-muted-foreground", children: route.state })
+                ] }, route.label)) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/6 border border-border bg-background p-4", children: [
+              /* @__PURE__ */ jsxs(Row, { justify: "between", className: "border-b border-border pb-4", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-label-sm text-muted-foreground", children: "Signal map" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-heading-4 sm:text-heading-3", children: "Every approval path in view" })
+                ] }),
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Review" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-5 grid gap-4 sm:mt-6 sm:gap-5", children: [
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 items-end gap-1.5 rounded-concentric-xl/10 bg-card p-4 sm:gap-2", children: bars.map((bar) => /* @__PURE__ */ jsx("div", { className: "flex h-36 items-end sm:h-56", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `w-full rounded-full ${bar.current ? "bg-success" : "bg-secondary"}`,
+                    style: { height: bar.height }
+                  }
+                ) }, bar.week)) }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: sceneMetrics.map((metric) => /* @__PURE__ */ jsxs("div", { className: "rounded-concentric-xl/10 border border-border bg-card p-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-label-sm text-muted-foreground", children: metric.label }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-2 text-heading-4 sm:text-heading-3", children: metric.value }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-xs text-muted-foreground max-sm:hidden", children: metric.detail })
+                ] }, metric.label)) })
+              ] })
+            ] })
+          ] })
+        ] }) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("section", { id: "platform", "aria-labelledby": "brand-platform-title", className: "border-y border-border bg-muted/40 py-20 lg:py-28", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, className: "max-w-2xl", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Why Cove" }),
+          /* @__PURE__ */ jsx("h2", { id: "brand-platform-title", className: "text-balance text-heading-1", children: "One private workspace for the decisions that matter." }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "Most operations work lives in threads, spreadsheets, and memory. Cove gives it a home: every request routed, every signal visible, every outcome on the record." })
+        ] }),
+        /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx(Grid, { minItemWidth: "calc(var(--spacing) * 64)", gap: 2, children: values.map((value) => /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("article", {}), className: "h-full", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "mb-4 grid size-11 place-items-center rounded-md border border-border sable-well", children: /* @__PURE__ */ jsx(Icon, { name: value.icon, className: "text-xl" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "text-title-lg", children: value.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: value.body })
+        ] }) }, value.title)) }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", id: "how-it-works", "aria-labelledby": "brand-steps-title", max: "wide", className: "py-20 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-[1fr_2fr] lg:gap-16", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, className: "max-w-md", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "How it works" }),
+          /* @__PURE__ */ jsx("h2", { id: "brand-steps-title", className: "text-balance text-heading-1", children: "From request to sealed record." }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-md text-muted-foreground", children: "Teams are usually live within a week. Cove adapts to the routes you already run instead of asking you to start over." }),
+          /* @__PURE__ */ jsx("div", { className: "pt-3", children: /* @__PURE__ */ jsx(Button, { variant: "outline", iconEnd: /* @__PURE__ */ jsx(Icon, { name: "arrow-right" }), render: /* @__PURE__ */ jsx("a", { href: "/guides/rollout" }), children: "Read the rollout guide" }) })
+        ] }),
+        /* @__PURE__ */ jsx("ol", { className: "grid gap-10 sm:grid-cols-3 sm:gap-6", children: steps.map((step) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-2 border-t border-border-strong pt-6", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-mono-sm text-muted-foreground", children: step.number }),
+          /* @__PURE__ */ jsx("h3", { className: "mt-3 text-title-lg sm:mt-6", children: step.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: step.body })
+        ] }, step.number)) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", id: "customers", "aria-label": "Customer story", max: "wide", className: "pb-20 lg:pb-28", children: /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("figure", {}), children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1.5fr_1fr]", children: [
+        /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col justify-between gap-10 sm:p-10", children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Customer story" }),
+            /* @__PURE__ */ jsx("blockquote", { className: "text-balance text-heading-3 sm:text-heading-2", children: "\u201CWe used to chase approvals across four tools. Now every request has an owner, a deadline, and a record, and our auditors stopped asking for screenshots.\u201D" })
+          ] }),
+          /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: "MO" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-title-sm", children: "Maya Okafor" }),
+              /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "Head of operations, Fielddesk" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "border-border max-lg:border-t lg:border-s", children: /* @__PURE__ */ jsx(CardContent, { className: "flex h-full flex-col justify-center gap-6 sm:p-10", children: outcomes.map((outcome, index) => /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-heading-1 sm:text-display-lg", children: outcome.value }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-sm text-muted-foreground", children: outcome.label })
+          ] })
+        ] }, outcome.label)) }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": "brand-cta-title", max: "wide", className: "pb-20 lg:pb-28", children: /* @__PURE__ */ jsx("div", { className: "dark", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border bg-card px-6 py-12 text-card-foreground sm:px-12 sm:py-16", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-2xl", children: [
+          /* @__PURE__ */ jsx("h2", { id: "brand-cta-title", className: "text-balance text-heading-1", children: "See your own approval paths in Cove." }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: "A 30-minute walkthrough with your routes, your roles, and your records. No slides." })
+        ] }),
+        /* @__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: "ghost", render: /* @__PURE__ */ jsx("a", { href: "/pricing" }), children: "View pricing" })
+        ] })
+      ] }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsx("footer", { className: "border-t border-border bg-muted/35", children: /* @__PURE__ */ jsxs(Region, { max: "wide", className: "py-12 sm:py-16", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[1fr_1.35fr_1fr] lg:gap-8", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, className: "max-w-sm", 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__ */ jsx(Badge, { appearance: "plain", tone: "success", dot: true, children: "All systems normal" })
+        ] }),
+        /* @__PURE__ */ jsx("nav", { "aria-label": "Footer", className: "grid grid-cols-3 gap-6", children: footerGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-label-md", 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, { className: "h-fit", children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h2", { children: "The Cove digest" }) }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "One note a month on trusted workflows and product releases." })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { 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: "Subscribe" })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-12 flex flex-col gap-3 border-t border-border pt-6 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__ */ jsx(Row, { gap: 4, wrap: true, children: legalLinks.map((link) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: link.href,
+            className: "flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground",
+            children: link.label
+          },
+          link.label
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  BrandLandingPage
+};

package/dist/patterns/brand-landing-page.meta.js

@@ -0,0 +1,28 @@
+// 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, a value section, a how-it-works sequence, a customer story with outcomes, a closing CTA band, 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: [
+    "The story runs promise \u2192 product \u2192 value \u2192 process \u2192 proof \u2192 ask: hero, product scene, 'Why Cove' value cards, a three-step how-it-works list, a customer story with outcome figures, then one closing CTA. Each section adds new evidence; no number is repeated from the product scene.",
+    "One display headline owns the first viewport; supporting copy stays in body-lg at prose measure. Section headings are heading-1 under a `text-overline` eyebrow.",
+    "The nav spends one compact pill surface, with a clear brand signal and two primary paths: sign in and request access.",
+    "The product scene and the closing CTA band are dark islands: a `dark` class on the wrapper re-scopes every semantic token, so surfaces, muted ink, Badge tones and Buttons take the theme's own dark values in either page mode. Never fake a dark panel with overlay ink at reduced opacity \u2014 status tones tuned for a light page vanish on it.",
+    "The scene is a picture of the product: `aria-hidden` + `inert` keep its sample button and figures out of the tab order and the outline. On narrow screens it drops the side column and keeps the signal map, so it scales instead of stacking into a second page.",
+    "The chart keeps past weeks on the quiet `secondary` fill and gives the current week the one accent, so the signal reads at a glance.",
+    "Value cards are real Cards with a neutral `sable-well` icon tile; the customer story is a Card rendered as a figure, with outcome figures split by Separator. The scene's nested panels take `rounded-concentric-xl/<inset>` from the shell's radius, so the corners stay parallel at any radius preset.",
+    "The footer closes the page with brand reassurance, a plain status Badge, a three-column sitemap (three columns at every width), a digest signup, and legal links.",
+    "All figures, names and the testimonial are sample content; replace them with real, verifiable claims."
+  ],
+  a11y: [
+    "The brand nav is a labeled nav landmark with real links and visible text.",
+    "Each content section is a labelled region (by its h2, or aria-label for the customer story); the decorative product scene is hidden from assistive tech and inert.",
+    "The how-it-works steps are an ordered list; the testimonial is a figure with a blockquote and a figcaption naming the speaker.",
+    "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; Reveal shows the value cards immediately when motion is off.",
+    "Status dots and the status Badge are paired with visible text labels so color is never the only signal."
+  ]
+};
+export {
+  brandLandingPageMeta
+};

package/dist/patterns/chat-panel.js

@@ -0,0 +1,185 @@
+// src/patterns/chat-panel.tsx
+import { Icon } from "../icon/index.js";
+import { Attachment } from "../components/attachment/index.js";
+import { Avatar } from "../components/avatar/index.js";
+import { Bubble } from "../components/bubble/index.js";
+import { Button } from "../components/button/index.js";
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../components/card/index.js";
+import { ChatComposer } from "../components/chat-composer/index.js";
+import { CodeBlock } from "../components/code-block/index.js";
+import { Marker } from "../components/marker/index.js";
+import { MenuRadioGroup, MenuRadioItem } from "../components/menu/index.js";
+import { Message } from "../components/message/index.js";
+import { MessageScroller } from "../components/message-scroller/index.js";
+import { SettingsMenu, SettingsRow } from "../components/settings-menu/index.js";
+import { StreamingText } from "../components/streaming-text/index.js";
+import { Toolbar, ToolbarButton } from "../components/toolbar/index.js";
+import { SimpleTooltip } from "../components/tooltip/index.js";
+import { Page } from "../layout/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var pending = true;
+var streamed = "Yes, appends are already safe: your layout effect measures before paint. The jump is on the prepend path, which reads scrollHeight after the new rows";
+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,
+    step: "Read message-scroller.md",
+    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() {
+  const assistant = /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      variant: "art",
+      size: "sm",
+      alt: "Assistant",
+      fallback: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-base" })
+    }
+  );
+  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__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "edit" }),
+            "New chat"
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(MessageScroller, { className: "min-h-0 flex-1 p-(--card-p)", children: [
+          /* @__PURE__ */ jsx(Marker, { variant: "separator", children: "Today" }),
+          turns.map((turn, i) => {
+            const continues = i > 0 && turns[i - 1].mine === turn.mine;
+            return /* @__PURE__ */ jsx(
+              Message,
+              {
+                messageId: turn.id,
+                align: turn.mine ? "end" : "start",
+                grouped: continues,
+                avatar: turn.mine ? void 0 : assistant,
+                header: turn.step ? /* @__PURE__ */ jsx(Marker, { variant: "note", icon: "book", className: "justify-start", children: turn.step }) : void 0,
+                children: /* @__PURE__ */ jsx(
+                  Bubble,
+                  {
+                    variant: turn.mine ? "primary" : "muted",
+                    align: turn.mine ? "end" : "start",
+                    tail: !continues,
+                    children: turn.body
+                  }
+                )
+              },
+              turn.id
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            Message,
+            {
+              messageId: "t_04",
+              grouped: true,
+              avatar: assistant,
+              footer: /* @__PURE__ */ jsxs(Toolbar, { "aria-label": "Answer actions", children: [
+                /* @__PURE__ */ jsx(SimpleTooltip, { content: "Copy answer", children: /* @__PURE__ */ jsx(ToolbarButton, { size: "icon-sm", "aria-label": "Copy answer", children: /* @__PURE__ */ jsx(Icon, { name: "copy" }) }) }),
+                /* @__PURE__ */ jsx(SimpleTooltip, { content: "Regenerate", children: /* @__PURE__ */ jsx(ToolbarButton, { size: "icon-sm", "aria-label": "Regenerate answer", children: /* @__PURE__ */ jsx(Icon, { name: "refresh" }) }) })
+              ] }),
+              children: /* @__PURE__ */ jsxs(Bubble, { variant: "plain", className: "max-w-full", 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__ */ jsxs(Message, { messageId: "t_05", align: "end", children: [
+            /* @__PURE__ */ jsx(Bubble, { variant: "primary", align: "end", children: "Here's ours. Does the same fix cover new messages arriving?" }),
+            /* @__PURE__ */ jsx(
+              Attachment,
+              {
+                name: "scroller.tsx",
+                meta: "4.2 KB \xB7 TSX",
+                onOpen: () => void 0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Message,
+            {
+              messageId: "t_06",
+              avatar: assistant,
+              header: /* @__PURE__ */ jsx(Marker, { variant: "note", icon: "file", className: "justify-start", children: "Read scroller.tsx" }),
+              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,
+            stopLabel: "Stop answering",
+            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" })
+                  ] }) })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+export {
+  ChatPanel
+};

package/dist/patterns/chat-panel.meta.js

@@ -0,0 +1,31 @@
+// 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.",
+    'What the assistant did before answering \u2014 a doc it read, a tool it ran \u2014 is a `Marker variant="note"` in that message\'s `header`, so it reads as part of the turn rather than as an event between turns.',
+    'The assistant\'s long-form answer uses `variant="plain"` and continues the same grouped run. A tinted box around a code block reads as a quote rather than as a turn. A plain Bubble sizes to its content with no measure cap, so it takes `max-w-full` here: bounded by the column, a wide code line scrolls inside the CodeBlock instead of pushing the transcript sideways on a phone.',
+    "A settled answer carries its actions (copy, regenerate) in the Message `footer` as a `Toolbar` of icon `ToolbarButton`s with tooltips \u2014 one tab stop, arrow keys between them. The answer still streaming has none: there is nothing to copy or regenerate until it settles, and Stop lives in the composer.",
+    "One turn, one Message: the reader's question and the file it refers to stack inside a single end-aligned Message rather than being sent as two.",
+    'Assistant turns share one Avatar with a glyph fallback and `alt="Assistant"` \u2014 initials like "AI" read as a person, and a fallback-only avatar is otherwise unnamed.',
+    "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 \u2014 the answer actions also carry a tooltip, and the stop control is named for what it stops (`stopLabel="Stop answering"`).'
+  ]
+};
+export {
+  chatPanelMeta
+};