@sableui/react 0.6.1 → 0.7.0

package/dist/patterns/landing-page.js

@@ -0,0 +1,356 @@
+// src/patterns/landing-page.tsx
+import { Icon } from "../icon/index.js";
+import { Avatar } from "../components/avatar/index.js";
+import { Badge } from "../components/badge/index.js";
+import { Bubble } from "../components/bubble/index.js";
+import { Browser } from "../components/browser/index.js";
+import { Button } from "../components/button/index.js";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardList,
+  CardTitle
+} from "../components/card/index.js";
+import { ChatComposer } from "../components/chat-composer/index.js";
+import { Code } from "../components/code/index.js";
+import { CodeBlock } from "../components/code-block/index.js";
+import { Entity } from "../components/entity/index.js";
+import { Message } from "../components/message/index.js";
+import { Meter, MeterLabel, MeterTrack, MeterValue } from "../components/meter/index.js";
+import { PageHeader } from "../components/page-header/index.js";
+import { Tabs, TabsList, TabsPanel, TabsTrigger } from "../components/tabs/index.js";
+import { Reveal } from "../motion/index.js";
+import { Grid, Region, Row, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var navLinks = [
+  { label: "Docs", href: "/docs" },
+  { label: "Components", href: "/components" },
+  { label: "Patterns", href: "/patterns" },
+  { label: "Themes", href: "/themes" }
+];
+var deploys = [
+  {
+    initials: "MO",
+    name: "Maya Ortiz",
+    title: "Add usage-based billing",
+    meta: "main \xB7 a3f9c21 \xB7 2m ago",
+    status: "Building",
+    tone: "info",
+    pulse: true
+  },
+  {
+    initials: "SR",
+    name: "Sam Reyes",
+    title: "Fix search ranking for long queries",
+    meta: "main \xB7 81be04d \xB7 18m ago",
+    status: "Ready",
+    tone: "success",
+    pulse: false
+  },
+  {
+    initials: "JL",
+    name: "Jun Lee",
+    title: "Rotate webhook signing keys",
+    meta: "main \xB7 5c7e9aa \xB7 1h ago",
+    status: "Ready",
+    tone: "success",
+    pulse: false
+  }
+];
+var features = [
+  {
+    icon: "component",
+    title: "Behavior built in",
+    body: "Focus management, keyboard navigation, and ARIA come from Base UI primitives under every control."
+  },
+  {
+    icon: "eyedropper",
+    title: "Semantic tokens end to end",
+    body: "Re-theme the whole product, light and dark, from one preset without touching a component."
+  },
+  {
+    icon: "layout",
+    title: "Pages, not just parts",
+    body: "Landing, dashboard, settings, auth, and list-detail shells to copy and adapt."
+  },
+  {
+    icon: "book",
+    title: "A contract agents can read",
+    body: "registry.json, llms.txt, and a CLI hand agents the exact props, examples, and rules."
+  },
+  {
+    icon: "circle-check",
+    title: "Lint that knows the design",
+    body: "sable-lint flags raw colors, hand-built controls, and motion that ignores reduced motion."
+  },
+  {
+    icon: "play",
+    title: "Motion with an off switch",
+    body: "Named recipes run on one scale variable, so reduced motion stops every transition at once."
+  }
+];
+var steps = [
+  {
+    title: "Install the package",
+    body: "One dependency. React 19 and Tailwind v4 are the only peers."
+  },
+  {
+    title: "Import the styles",
+    body: "Tailwind first, then Sable's tokens, then a source glob over the package."
+  },
+  {
+    title: "Compose your screens",
+    body: "Build from components and layout primitives. Your theme does the rest."
+  }
+];
+var stylesCode = `@import "tailwindcss";
+@import "@sableui/react/styles.css";
+@source "../node_modules/@sableui/react/dist/**/*.{js,mjs}";`;
+var composeCode = `import { Button, Card, CardContent, CardHeader, CardTitle } from "@sableui/react"
+
+export function DeployCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Production</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Deploy</Button>
+      </CardContent>
+    </Card>
+  )
+}`;
+var terminalCode = `$ npx sable search "confirm before deleting"
+component  DestructiveActionModal
+component  Dialog
+
+$ npx sable component DestructiveActionModal --props
+props, a11y contract, composed examples
+
+$ npx sable lint src
+0 findings in 42 files`;
+var agentPoints = [
+  "Search ranks components, patterns, tokens, and docs for a plain-language need.",
+  "Every component ships its props, accessibility contract, and composed examples.",
+  "The same lint runs in the editor, in CI, and inside the agent's own loop."
+];
+var footerGroups = [
+  {
+    title: "Product",
+    links: [
+      { label: "Components", href: "/components" },
+      { label: "Patterns", href: "/patterns" },
+      { label: "Themes", href: "/themes" },
+      { label: "Canvas", href: "/canvas" }
+    ]
+  },
+  {
+    title: "Resources",
+    links: [
+      { label: "Documentation", href: "/docs" },
+      { label: "Changelog", href: "/changelog" },
+      { label: "llms.txt", href: "/llms.txt" },
+      { label: "registry.json", href: "/registry.json" }
+    ]
+  },
+  {
+    title: "Community",
+    links: [
+      { label: "GitHub", href: "/github" },
+      { label: "npm", href: "/npm" },
+      { label: "Discussions", href: "/discussions" }
+    ]
+  }
+];
+function LandingPage() {
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-dvh bg-background text-foreground", children: [
+    /* @__PURE__ */ jsx("header", { className: "border-b border-border", children: /* @__PURE__ */ jsxs(Region, { as: "nav", "aria-label": "Main", max: "wide", className: "grid h-16 grid-cols-[1fr_auto_1fr] items-center", children: [
+      /* @__PURE__ */ jsx("a", { href: "/", className: "justify-self-start text-title-lg motion-interactive hover:text-muted-foreground", children: "Sable" }),
+      /* @__PURE__ */ jsx("div", { className: "justify-self-center max-md:hidden", children: /* @__PURE__ */ jsx(Row, { gap: 1, children: navLinks.map((link) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: link.href }), children: link.label }, link.label)) }) }),
+      /* @__PURE__ */ jsxs(Row, { gap: 1, className: "col-start-3 justify-self-end", children: [
+        /* @__PURE__ */ jsx("div", { className: "max-sm:hidden", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/github" }), children: "GitHub" }) }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/docs/getting-started" }), children: "Get started" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("main", { children: [
+      /* @__PURE__ */ jsx(Region, { as: "section", max: "wide", className: "pb-16 pt-16 sm:pt-24", children: /* @__PURE__ */ jsxs(Stack, { gap: 8, align: "center", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "text-center", children: [
+          /* @__PURE__ */ jsx(Badge, { appearance: "outline", size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: "sparkles" }), children: "Open source \xB7 MIT licensed" }),
+          /* @__PURE__ */ jsx("h1", { className: "max-w-4xl text-balance text-display-lg sm:text-display-2xl", children: "Product UI your agents can't get wrong" }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-pretty text-body-lg text-muted-foreground", children: "Sable is a themeable React component library with enforced tokens, typography, and motion, documented for coding agents as carefully as for people." }),
+          /* @__PURE__ */ jsxs(Row, { gap: 2, justify: "center", wrap: true, className: "pt-2", children: [
+            /* @__PURE__ */ jsx(Button, { size: "cta", render: /* @__PURE__ */ jsx("a", { href: "/docs/getting-started" }), children: "Get started" }),
+            /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", render: /* @__PURE__ */ jsx("a", { href: "/components" }), children: "Browse components" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(CodeBlock, { prompt: "$", code: "pnpm add @sableui/react" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", "aria-label": "Product preview", max: "wide", className: "pb-20 sm:pb-28", children: /* @__PURE__ */ jsxs("figure", { children: [
+        /* @__PURE__ */ jsx(Browser, { url: "atlas.example/deploys", className: "shadow-xl", children: /* @__PURE__ */ jsxs("div", { inert: true, className: "grid gap-4 p-4 sm:p-6 lg:grid-cols-[minmax(0,1fr)_20rem]", children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 4, className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              PageHeader,
+              {
+                titleAs: "h2",
+                title: "Deployments",
+                description: "atlas-web \xB7 production",
+                actions: /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
+                  /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "View logs" }),
+                  /* @__PURE__ */ jsx(Button, { size: "sm", iconStart: /* @__PURE__ */ jsx(Icon, { name: "upload" }), children: "Deploy" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Grid, { cols: { base: 2, md: 3 }, gap: 3, children: [
+              /* @__PURE__ */ jsxs(Card, { density: "compact", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: "Uptime" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Last 30 days" })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-heading-3", children: "99.98%" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { density: "compact", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: "p95 latency" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Edge, all regions" })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-heading-3", children: "182 ms" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { density: "compact", className: "max-md:hidden", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { children: "Build minutes" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Team plan" })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Meter, { value: 64, tone: "standard", children: [
+                  /* @__PURE__ */ jsxs(Row, { justify: "between", wrap: true, className: "mb-2", children: [
+                    /* @__PURE__ */ jsx(MeterLabel, { children: "Used" }),
+                    /* @__PURE__ */ jsx(MeterValue, { children: (_, value) => `${(value * 30).toLocaleString("en-US")} of 3,000` })
+                  ] }),
+                  /* @__PURE__ */ jsx(MeterTrack, {})
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardTitle, { children: "Recent deploys" }),
+                /* @__PURE__ */ jsx(CardDescription, { children: "Production branch" }),
+                /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: "success", dot: true, children: "Healthy" }) })
+              ] }),
+              /* @__PURE__ */ jsx(CardList, { children: deploys.map((deploy) => /* @__PURE__ */ jsx(
+                Entity,
+                {
+                  leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: deploy.initials, alt: deploy.name }),
+                  title: deploy.title,
+                  subtitle: deploy.meta,
+                  action: /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: deploy.tone, dot: true, pulse: deploy.pulse, children: deploy.status })
+                },
+                deploy.meta
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Card, { className: "max-lg:hidden", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsx(CardTitle, { children: "Release assistant" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Summaries from today's deploys" })
+            ] }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx(Message, { align: "end", children: /* @__PURE__ */ jsx(Bubble, { variant: "primary", align: "end", children: "What shipped to production today?" }) }),
+              /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsx(Bubble, { children: "Three deploys. Search ranking is fixed, webhook keys are rotated, and usage-based billing is building now." }) }),
+              /* @__PURE__ */ jsx(ChatComposer, { placeholder: "Ask about a deploy" })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("figcaption", { className: "mt-4 text-center text-body-sm text-muted-foreground", children: "Every surface in this preview is a Sable component, styled by the active theme." })
+      ] }) }),
+      /* @__PURE__ */ jsx("section", { "aria-labelledby": "landing-features", className: "border-y border-border bg-muted/40 py-20 sm:py-28", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-2xl", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Why Sable" }),
+          /* @__PURE__ */ jsx("h2", { id: "landing-features", className: "text-balance text-heading-1", children: "A design system with the rules written down" }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: "The decisions a senior designer would make are encoded once, so every screen your team or your agent builds starts from them." })
+        ] }),
+        /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 2, lg: 3 }, gap: 4, children: features.map((feature) => /* @__PURE__ */ jsx(Card, { render: /* @__PURE__ */ jsx("article", {}), className: "h-full", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-md sable-well", children: /* @__PURE__ */ jsx(Icon, { name: feature.icon, className: "text-xl" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "pt-2 text-title-lg", children: feature.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: feature.body })
+        ] }) }, feature.title)) }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": "landing-setup", max: "wide", className: "py-20 sm:py-28", children: /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-10 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 8, children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Setup" }),
+            /* @__PURE__ */ jsx("h2", { id: "landing-setup", className: "text-balance text-heading-1", children: "From install to first screen in three steps" })
+          ] }),
+          /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-6", children: steps.map((step, index) => /* @__PURE__ */ jsxs("li", { className: "grid grid-cols-[auto_1fr] gap-4", children: [
+            /* @__PURE__ */ jsxs("span", { className: "pt-0.5 text-mono-md text-muted-foreground", children: [
+              "0",
+              index + 1
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-title-lg", children: step.title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-body-md text-muted-foreground", children: step.body })
+            ] })
+          ] }, step.title)) })
+        ] }),
+        /* @__PURE__ */ jsx(Reveal, { className: "min-w-0", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "compose", children: [
+          /* @__PURE__ */ jsxs(TabsList, { children: [
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "install", children: "Install" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "styles", children: "Styles" }),
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "compose", children: "Compose" })
+          ] }),
+          /* @__PURE__ */ jsx(TabsPanel, { value: "install", className: "pt-4", children: /* @__PURE__ */ jsx(CodeBlock, { prompt: "$", code: "pnpm add @sableui/react" }) }),
+          /* @__PURE__ */ jsx(TabsPanel, { value: "styles", className: "pt-4", children: /* @__PURE__ */ jsx(CodeBlock, { filename: "app.css", code: stylesCode }) }),
+          /* @__PURE__ */ jsx(TabsPanel, { value: "compose", className: "pt-4", children: /* @__PURE__ */ jsx(CodeBlock, { filename: "deploy-card.tsx", code: composeCode }) })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("section", { "aria-labelledby": "landing-agents", className: "border-t border-border py-20 sm:py-28", children: /* @__PURE__ */ jsx(Region, { max: "wide", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-10 lg:grid-cols-2 lg:gap-16", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: "Built for agents" }),
+            /* @__PURE__ */ jsx("h2", { id: "landing-agents", className: "text-balance text-heading-1", children: "Your agent reads the same contract you do" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-body-lg text-muted-foreground", children: [
+              "Point Claude Code, Codex, or Cursor at the installed package. The",
+              " ",
+              /* @__PURE__ */ jsx(Code, { children: "sable" }),
+              " CLI answers what to use, how to use it, and whether the result holds up."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "sable-list", children: agentPoints.map((point) => /* @__PURE__ */ jsx("li", { children: point }, point)) })
+        ] }),
+        /* @__PURE__ */ jsx(Reveal, { className: "min-w-0", children: /* @__PURE__ */ jsx(CodeBlock, { filename: "Terminal", code: terminalCode, highlight: false }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Region, { as: "section", "aria-labelledby": "landing-cta", max: "wide", className: "pb-20 sm:pb-28", children: /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "center", className: "py-8 text-center sm:py-12", children: [
+        /* @__PURE__ */ jsx("h2", { id: "landing-cta", className: "max-w-2xl text-balance text-heading-1", children: "Build the product, not another component library" }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-lg text-muted-foreground", children: "Install Sable, pick a preset, and ship the first screen today." }),
+        /* @__PURE__ */ jsxs(Row, { gap: 2, justify: "center", wrap: true, className: "pt-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "cta", render: /* @__PURE__ */ jsx("a", { href: "/docs/getting-started" }), children: "Get started" }),
+          /* @__PURE__ */ jsx(Button, { size: "cta", variant: "outline", render: /* @__PURE__ */ jsx("a", { href: "/github" }), children: "Star on GitHub" })
+        ] })
+      ] }) }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsx("footer", { className: "border-t border-border", children: /* @__PURE__ */ jsxs(Region, { max: "wide", className: "py-12", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-10 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "max-w-xs", children: [
+          /* @__PURE__ */ jsx("a", { href: "/", className: "w-fit text-title-lg motion-interactive hover:text-muted-foreground", children: "Sable" }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "React components, patterns, and tokens for products built with AI agents." })
+        ] }),
+        /* @__PURE__ */ jsx("nav", { "aria-label": "Footer", className: "grid grid-cols-2 gap-8 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 flex flex-col gap-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 motion-interactive hover:text-muted-foreground",
+              children: link.label
+            }
+          ) }, link.label)) })
+        ] }, group.title)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: "\xA9 2026 Sable. Released under the MIT license." }) })
+    ] }) })
+  ] });
+}
+export {
+  LandingPage
+};

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

@@ -0,0 +1,26 @@
+// src/patterns/landing-page.meta.ts
+var landingPageMeta = {
+  name: "LandingPage",
+  summary: "Product / open-source landing page: a centered hero with an eyebrow Badge, one display headline, lede, two CTAs and a copyable install command; a Browser-framed product preview composed from real components; a six-up feature grid; a setup section with tabbed code; an agent-workflow section with terminal output; a CTA card; and a link-column footer.",
+  intent: "Reach for this for the marketing route of a developer product, library, or tool: the page where the product shows itself working and the reader installs or signs up. For a branded, editorial marketing site use BrandLandingPage. 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 (`text-display-lg` on phones, `text-display-2xl` from `sm`). Every section below uses `text-heading-1` with a `text-overline` kicker.",
+    'The eyebrow is a small outline Badge (`size="sm"`): the badge\'s own size, never a type class forced onto its label. Hierarchy above the fold is eyebrow, display, lede, CTAs, install command.',
+    "The lede is body-lg capped at the prose measure. The headline may be wide; reading text may not.",
+    'Two CTAs max per row: one primary, one quiet outline. The install line is a `CodeBlock` with `prompt="$"`, so it truncates on one line and copy takes only the command.',
+    "Show the product instead of describing it. The preview is real components (PageHeader, metric Cards, a Meter, a CardList of Entity rows, Message and Bubble, ChatComposer) inside `Browser`, wrapped in an `inert` div so the picture's controls never take focus. Secondary columns hide on small screens rather than stacking into a long mock.",
+    "Features are Cards in a fixed `Grid cols={{ base: 1, sm: 2, lg: 3 }}`, so six items always land as full rows (3 x 2, 2 x 3, 1 x 6) without an orphan.",
+    "Multi-line code uses `CodeBlock` with a filename; switch related snippets with `Tabs`, defaulting to the most complete one. Terminal output passes `highlight={false}` so a code highlighter does not colour prose.",
+    "Reveal wraps below-the-fold blocks only (features, code, CTA). It no-ops under reduced motion via the motion policy.",
+    "Hide nav groups on narrow screens by wrapping them in a `max-md:hidden` div: a `Row` or `Button` sets its own display, which a `hidden` class on the same element does not reliably override."
+  ],
+  a11y: [
+    "The hero headline is the page h1; section titles are h2s and feature and step titles are h3s. Footer column labels are h2s inside the footer nav.",
+    "The product preview is a `figure` with a visible figcaption. Its content is `inert`, which removes it from the tab order and the accessibility tree, so its headings and buttons do not pollute the outline.",
+    "Reveal renders content immediately (no animation) when prefers-reduced-motion is set.",
+    "CTA buttons are real links with visible text, with no icon-only CTAs. Footer links keep a 36px minimum row height for touch."
+  ]
+};
+export {
+  landingPageMeta
+};