@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/kernel/components/blocks/design-system-preview.js

@@ -0,0 +1,655 @@
+"use client";
+
+// src/kernel/components/blocks/design-system-preview.tsx
+import { AnimatedIconSwap } from "./animated-icon-swap.js";
+import ColorPalette from "./color-palette.js";
+import { InlineCode } from "../mdx/components/inline-code.js";
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionTrigger
+} from "../ui/accordion.js";
+import { Badge } from "../ui/badge.js";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "../ui/breadcrumb.js";
+import { Button, buttonVariants } from "../ui/button.js";
+import {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText
+} from "../ui/button-group.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../ui/card.js";
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPopup,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+} from "../ui/dialog.js";
+import {
+  Drawer,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerViewport
+} from "../ui/drawer.js";
+import { Input } from "../ui/input.js";
+import { Kbd } from "../ui/kbd.js";
+import { Link } from "../ui/link.js";
+import {
+  Menu,
+  MenuItem,
+  MenuPopup,
+  MenuPortal,
+  MenuPositioner,
+  MenuTrigger
+} from "../ui/menu.js";
+import { MetaKey } from "../ui/meta-key.js";
+import {
+  Popover,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverTitle,
+  PopoverTrigger
+} from "../ui/popover.js";
+import {
+  Progress,
+  ProgressIndicator,
+  ProgressTrack
+} from "../ui/progress.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import {
+  Select,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select.js";
+import { Separator } from "../ui/separator.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../ui/table.js";
+import {
+  NavigationTabs,
+  NavigationTabsIndicator,
+  NavigationTabsLink,
+  NavigationTabsList,
+  Tabs,
+  TabsIndicator,
+  TabsList,
+  TabsPanel,
+  TabsTab
+} from "../ui/tabs.js";
+import { Text } from "../ui/text.js";
+import {
+  Toast,
+  ToastContent,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle
+} from "../ui/toast.js";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipPortal,
+  TooltipPositioner,
+  TooltipProvider,
+  TooltipTrigger
+} from "../ui/tooltip.js";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tabs = [
+  { id: "tokens", label: "Tokens" },
+  { id: "typography", label: "Typography" },
+  { id: "ui", label: "UI" },
+  { id: "mdx", label: "MDX" },
+  { id: "blocks", label: "Blocks" }
+];
+var scrollRows = Array.from({ length: 8 }, (_, index) => ({
+  id: `row-${index + 1}`,
+  label: `Scrollable row ${index + 1}`
+}));
+function hasFixture(items, name) {
+  return items.some((item) => item.name === name);
+}
+function PreviewCell({
+  children,
+  name
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "relative flex min-h-72 items-center justify-center border-b border-r border-stroke-3 bg-surface-1 p-8", children: [
+    /* @__PURE__ */ jsx("h3", { className: "absolute left-4 top-4 text-xs font-medium text-foreground-3", children: name }),
+    children
+  ] });
+}
+function TypographyPreview() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid border-l border-t border-stroke-3 md:grid-cols-2", children: [
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Headings", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-foreground-1", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-semibold tracking-tight", children: "Heading One" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "Heading Two" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium", children: "Heading Three" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Paragraph", children: /* @__PURE__ */ jsx(Text, { className: "max-w-md text-foreground-2", children: "Good typography keeps dense documentation readable while leaving enough contrast for scanning headings, links, and inline code." }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Inline", children: /* @__PURE__ */ jsxs("p", { className: "text-sm leading-7 text-foreground-2", children: [
+      "A paragraph with ",
+      /* @__PURE__ */ jsx(Link, { href: "/ds", children: "a link" }),
+      ",",
+      " ",
+      /* @__PURE__ */ jsx(InlineCode, { children: "code" }),
+      ", and ",
+      /* @__PURE__ */ jsx(Kbd, { children: "K" }),
+      "."
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Longform", children: /* @__PURE__ */ jsx("blockquote", { className: "max-w-md border-l-2 border-accent-1 pl-4 text-sm leading-7 text-foreground-2", children: "The preview should reveal how content feels in real reading contexts, not only as isolated color chips." }) })
+  ] });
+}
+function UiPreview({ items = [] }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid border-l border-t border-stroke-3 md:grid-cols-2 xl:grid-cols-4", children: [
+    items.map((item) => /* @__PURE__ */ jsx(PreviewCell, { name: item.name, children: item.children }, item.name)),
+    !hasFixture(items, "Button") && /* @__PURE__ */ jsx(PreviewCell, { name: "Button", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Button, { children: "Primary" }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Secondary" }),
+      /* @__PURE__ */ jsx(Button, { disabled: true, variant: "outline", children: "Disabled" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "ButtonGroup", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Draft" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Preview" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Publish" })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx(ButtonGroupText, { size: "sm", children: "v1.2.0" }),
+        /* @__PURE__ */ jsx(ButtonGroupSeparator, {}),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", children: "Copy" })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonGroup, { orientation: "vertical", children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", children: "Move up" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", children: "Move down" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Badge", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "primary", children: "Primary" }),
+      /* @__PURE__ */ jsx(Badge, { children: "Default" }),
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Outline" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Input", children: /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "grid w-full max-w-xs gap-2 text-sm text-foreground-2",
+        htmlFor: "design-system-preview-email",
+        children: [
+          "Email",
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "design-system-preview-email",
+              placeholder: "name@example.com",
+              type: "email"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Link", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Link, { color: "default", href: "#", variant: "link.standalone", children: "Default standalone" }),
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", variant: "link.inline", children: "Accent inline" }),
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          color: "default",
+          href: "#",
+          leftIcon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2190" }),
+          variant: "link.standalone",
+          children: "Back to overview"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          color: "accent",
+          href: "#",
+          rightIcon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2197" }),
+          variant: "link.standalone",
+          children: "External resource"
+        }
+      ),
+      /* @__PURE__ */ jsx(Link, { color: "accent", disabled: true, href: "#", variant: "link.standalone", children: "Disabled link" }),
+      /* @__PURE__ */ jsx(Link, { href: "#", size: "sm", variant: "button.primary", children: "Link as button" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Link colors", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "green-300", children: "Docs" }),
+      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "purple-800", children: "Purple link" }),
+      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "accent-solid-hover", children: "Accent hover" }),
+      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "foreground-3", children: "Foreground 3" }),
+      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "--brand-link", children: "Brand var" }),
+      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "var(--brand-link)", children: "Brand var" }),
+      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "oklch(55% 0.18 280)", children: "Raw OKLCH" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Link Scale", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2", children: [
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", size: "xs", variant: "link.standalone", children: "Extra small link" }),
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", size: "sm", variant: "link.standalone", children: "Small link" }),
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", size: "md", variant: "link.standalone", children: "Medium link" }),
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", size: "lg", variant: "link.standalone", children: "Large link" }),
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", size: "xl", variant: "link.standalone", children: "Extra large link" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Link Inline", children: /* @__PURE__ */ jsxs("div", { className: "max-w-xs text-sm leading-7 text-foreground-2", children: [
+      "Start:",
+      /* @__PURE__ */ jsxs("ol", { className: "mt-2 list-decimal space-y-1 pl-6", children: [
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Connect a",
+          " ",
+          /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", variant: "link.inline", children: "custom domain" })
+        ] }),
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Review the",
+          " ",
+          /* @__PURE__ */ jsx(Link, { color: "default", href: "#", variant: "link.inline", children: "deployment checklist" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Composed styles", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-sm gap-5", children: [
+      /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#", children: "Default" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#", variant: "link.standalone", children: "Link" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#", size: "sm", variant: "button.ghost", children: "Button" }) }),
+        /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: "Page" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Link, { href: "#", variant: "link.inline", children: "Link inline" }),
+        /* @__PURE__ */ jsx(Link, { href: "#", size: "sm", variant: "button.secondary", children: "Link button" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", children: "Button" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Text", children: /* @__PURE__ */ jsxs("div", { className: "max-w-xs space-y-2", children: [
+      /* @__PURE__ */ jsx(Text, { weight: "semibold", children: "Body text" }),
+      /* @__PURE__ */ jsx(Text, { className: "text-foreground-2", size: "sm", children: "Supporting copy" }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", variant: "label", children: "Small interface text" }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", variant: "overline", children: "Overline" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Select", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "docs", children: [
+      /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-48", children: [
+        /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose section" }),
+        /* @__PURE__ */ jsx(SelectIcon, {})
+      ] }),
+      /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsx(SelectPopup, { children: /* @__PURE__ */ jsxs(SelectList, { children: [
+        /* @__PURE__ */ jsxs(SelectItem, { value: "docs", children: [
+          /* @__PURE__ */ jsx(SelectItemIndicator, {}),
+          /* @__PURE__ */ jsx(SelectItemText, { children: "Docs" })
+        ] }),
+        /* @__PURE__ */ jsxs(SelectItem, { value: "api", children: [
+          /* @__PURE__ */ jsx(SelectItemIndicator, {}),
+          /* @__PURE__ */ jsx(SelectItemText, { children: "API" })
+        ] })
+      ] }) }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "ScrollArea", children: /* @__PURE__ */ jsx(
+      ScrollArea,
+      {
+        className: "h-36 w-56 border border-stroke-2",
+        contentClassName: "space-y-3 p-4 text-sm text-foreground-2",
+        mask: { height: 16 },
+        variant: "gradient",
+        children: scrollRows.map((row) => /* @__PURE__ */ jsx("p", { children: row.label }, row.id))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Tooltip", children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { className: buttonVariants({ variant: "outline" }), children: "Hover" }),
+      /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: "Helpful detail" }) }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Popover", children: /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { className: buttonVariants({ variant: "outline" }), children: "Open" }),
+      /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, { children: /* @__PURE__ */ jsxs(PopoverPopup, { children: [
+        /* @__PURE__ */ jsx(PopoverTitle, { children: "Popover" }),
+        /* @__PURE__ */ jsx(Text, { className: "mt-2 text-foreground-2", size: "sm", children: "Floating content with tokenized surface styles." })
+      ] }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Dialog", children: /* @__PURE__ */ jsxs(Dialog, { children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { className: buttonVariants({ variant: "outline" }), children: "Open dialog" }),
+      /* @__PURE__ */ jsxs(DialogPortal, { children: [
+        /* @__PURE__ */ jsx(DialogBackdrop, {}),
+        /* @__PURE__ */ jsxs(DialogPopup, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Dialog title" }),
+          /* @__PURE__ */ jsx(Text, { className: "mt-2 text-foreground-2", size: "sm", children: "Accessible modal behavior is handled by Base UI." })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Menu", children: /* @__PURE__ */ jsxs(Menu, { children: [
+      /* @__PURE__ */ jsx(MenuTrigger, { className: buttonVariants({ variant: "outline" }), children: "Actions" }),
+      /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { children: /* @__PURE__ */ jsxs(MenuPopup, { children: [
+        /* @__PURE__ */ jsx(MenuItem, { children: "Copy link" }),
+        /* @__PURE__ */ jsx(MenuItem, { children: "Open settings" })
+      ] }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Drawer", children: /* @__PURE__ */ jsxs(Drawer, { children: [
+      /* @__PURE__ */ jsx(DrawerTrigger, { className: buttonVariants({ variant: "outline" }), children: "Open drawer" }),
+      /* @__PURE__ */ jsx(DrawerPortal, { children: /* @__PURE__ */ jsx(DrawerViewport, { children: /* @__PURE__ */ jsxs(DrawerPopup, { children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { children: "Drawer" }),
+        /* @__PURE__ */ jsx(Text, { className: "mt-2 text-foreground-2", size: "sm", children: "Responsive panel for contextual actions." })
+      ] }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Tabs base", children: /* @__PURE__ */ jsxs(Tabs, { className: "w-full max-w-xs", defaultValue: "one", variant: "base", children: [
+      /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Base tabs", children: [
+        /* @__PURE__ */ jsx(TabsTab, { value: "one", children: "One" }),
+        /* @__PURE__ */ jsx(TabsTab, { value: "two", children: "Two" })
+      ] }),
+      /* @__PURE__ */ jsx(TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "one", children: "First panel" }),
+      /* @__PURE__ */ jsx(TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "two", children: "Second panel" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Tabs button", children: /* @__PURE__ */ jsxs(Tabs, { className: "w-full max-w-xs", defaultValue: "draft", variant: "button", children: [
+      /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Button tabs", children: [
+        /* @__PURE__ */ jsx(TabsTab, { value: "draft", children: "Draft" }),
+        /* @__PURE__ */ jsx(TabsTab, { value: "review", children: "Review" }),
+        /* @__PURE__ */ jsx(TabsTab, { value: "live", children: "Live" })
+      ] }),
+      /* @__PURE__ */ jsx(TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "draft", children: "Draft changes" }),
+      /* @__PURE__ */ jsx(TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "review", children: "Review queue" }),
+      /* @__PURE__ */ jsx(TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "live", children: "Live version" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Tabs underline", children: /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        className: "w-full max-w-xs",
+        defaultValue: "overview",
+        indicatorColor: "accent",
+        variant: "underline",
+        children: [
+          /* @__PURE__ */ jsxs(TabsList, { "aria-label": "Underline tabs", children: [
+            /* @__PURE__ */ jsx(TabsTab, { value: "overview", children: "Overview" }),
+            /* @__PURE__ */ jsx(TabsTab, { value: "activity", children: "Activity" }),
+            /* @__PURE__ */ jsx(TabsTab, { value: "settings", children: "Settings" }),
+            /* @__PURE__ */ jsx(TabsIndicator, {})
+          ] }),
+          /* @__PURE__ */ jsx(
+            TabsPanel,
+            {
+              className: "mt-4 text-sm text-foreground-2",
+              value: "overview",
+              children: "Publication summary"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TabsPanel,
+            {
+              className: "mt-4 text-sm text-foreground-2",
+              value: "activity",
+              children: "Recent updates"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TabsPanel,
+            {
+              className: "mt-4 text-sm text-foreground-2",
+              value: "settings",
+              children: "Project settings"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "NavigationTabs", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-sm gap-4", children: [
+      /* @__PURE__ */ jsx(NavigationTabs, { defaultValue: "docs", variant: "base", children: /* @__PURE__ */ jsxs(NavigationTabsList, { "aria-label": "Base navigation tabs", children: [
+        /* @__PURE__ */ jsx(NavigationTabsLink, { active: true, href: "#docs", value: "docs", children: "Docs" }),
+        /* @__PURE__ */ jsx(NavigationTabsLink, { href: "#api", value: "api", children: "API" })
+      ] }) }),
+      /* @__PURE__ */ jsx(NavigationTabs, { defaultValue: "drafts", variant: "button", children: /* @__PURE__ */ jsxs(NavigationTabsList, { "aria-label": "Button navigation tabs", children: [
+        /* @__PURE__ */ jsx(NavigationTabsLink, { active: true, href: "#drafts", value: "drafts", children: "Drafts" }),
+        /* @__PURE__ */ jsx(NavigationTabsLink, { href: "#published", value: "published", children: "Published" })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        NavigationTabs,
+        {
+          defaultValue: "overview",
+          indicatorColor: "foreground",
+          variant: "underline",
+          children: /* @__PURE__ */ jsxs(NavigationTabsList, { "aria-label": "Underline navigation tabs", children: [
+            /* @__PURE__ */ jsx(NavigationTabsLink, { active: true, href: "#overview", value: "overview", children: "Overview" }),
+            /* @__PURE__ */ jsx(NavigationTabsLink, { href: "#analytics", value: "analytics", children: "Analytics" }),
+            /* @__PURE__ */ jsx(NavigationTabsIndicator, {})
+          ] })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Progress", children: /* @__PURE__ */ jsx(Progress, { className: "w-full max-w-xs", value: 64, children: /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) }) }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Accordion", children: /* @__PURE__ */ jsx(Accordion, { className: "w-full max-w-xs", defaultValue: ["one"], children: /* @__PURE__ */ jsxs(AccordionItem, { value: "one", children: [
+      /* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsx(AccordionTrigger, { children: "Section" }) }),
+      /* @__PURE__ */ jsx(AccordionPanel, { children: "Expandable content preview." })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "MetaKey", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(MetaKey, {}),
+      /* @__PURE__ */ jsx(Kbd, { children: "K" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Toast", children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(Toast, { className: "w-full max-w-xs", toast: { id: "preview" }, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+      /* @__PURE__ */ jsx(ToastTitle, { children: "Saved" }),
+      /* @__PURE__ */ jsx(ToastDescription, { children: "Changes are ready to publish." })
+    ] }) }) }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Kbd", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Kbd, { children: "\u2318" }),
+      /* @__PURE__ */ jsx(Kbd, { children: "K" }),
+      /* @__PURE__ */ jsx(Kbd, { children: "Esc" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Card", children: /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-xs", variant: "elevated", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Card title" }),
+        /* @__PURE__ */ jsx(CardDescription, { children: "Uses surface, stroke, radius, and foreground tokens." })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-foreground-2", children: "Composable content." })
+      ] })
+    ] }) })
+  ] });
+}
+function MdxPreview({ items = [] }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid border-l border-t border-stroke-3 md:grid-cols-2 xl:grid-cols-4", children: [
+    items.map((item) => /* @__PURE__ */ jsx(PreviewCell, { name: item.name, children: item.children }, item.name)),
+    !hasFixture(items, "Link") && /* @__PURE__ */ jsx(PreviewCell, { name: "Link", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Link, { color: "default", href: "/ds", variant: "link.standalone", children: "Default standalone" }),
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "/ds", variant: "link.inline", children: "Accent inline" }),
+      /* @__PURE__ */ jsx(Link, { href: "/ds", size: "sm", variant: "button.primary", children: "Button link" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "MDX Links", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md space-y-4 text-sm leading-7 text-foreground-2", children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        "This MDX paragraph includes an",
+        " ",
+        /* @__PURE__ */ jsx(Link, { color: "accent", href: "/ds", variant: "link.inline", children: "internal relative link" }),
+        ", an",
+        " ",
+        /* @__PURE__ */ jsx(
+          Link,
+          {
+            color: "accent",
+            href: "https://example.com",
+            variant: "link.inline",
+            children: "external link"
+          }
+        ),
+        ", a",
+        " ",
+        /* @__PURE__ */ jsx(Link, { color: "accent", href: "/ds", variant: "link.inline", children: /* @__PURE__ */ jsx("strong", { children: "link with bold text" }) }),
+        ", a",
+        " ",
+        /* @__PURE__ */ jsx(Link, { color: "accent", href: "/ds", variant: "link.inline", children: /* @__PURE__ */ jsx("em", { children: "link with italics" }) }),
+        ", and a",
+        " ",
+        /* @__PURE__ */ jsx(Link, { color: "accent", href: "/ds", variant: "link.inline", children: /* @__PURE__ */ jsx(InlineCode, { children: "linked inline code" }) }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium leading-7 text-foreground-1", children: /* @__PURE__ */ jsx(Link, { color: "accent", href: "/ds", variant: "link.standalone", children: "Linked heading" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Callout", children: /* @__PURE__ */ jsxs("div", { className: "max-w-xs rounded-card border border-stroke-2 bg-surface-2 p-4 text-sm leading-6 text-foreground-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground-1", children: "Note" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1", children: "A compact MDX callout preview." })
+    ] }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Table", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: "Token" }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Use" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: "surface-2" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Panels" })
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Code", children: /* @__PURE__ */ jsx("pre", { className: "max-w-xs overflow-auto rounded-codeblock border border-stroke-2 bg-surface-3 p-4 text-xs text-foreground-1", children: /* @__PURE__ */ jsx("code", { children: `export const value = "publishOS";` }) }) })
+  ] });
+}
+function CopyToClipboardPreview() {
+  const [copied, setCopied] = useState(false);
+  function handleCopy() {
+    void navigator.clipboard?.writeText("pnpm publish.os add block");
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": copied ? "Copied command" : "Copy command",
+      leftIcon: /* @__PURE__ */ jsx(
+        AnimatedIconSwap,
+        {
+          active: copied,
+          activeIcon: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }),
+          defaultIcon: /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
+          size: 16
+        }
+      ),
+      onClick: handleCopy,
+      variant: "secondary",
+      children: "Copy"
+    }
+  );
+}
+function BlocksPreview({
+  items = []
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid border-l border-t border-stroke-3", children: [
+    items.map((item) => /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: "border-b border-r border-stroke-3 bg-surface-1",
+        children: [
+          /* @__PURE__ */ jsx("h3", { className: "px-4 pt-4 text-xs font-medium text-foreground-3", children: item.name }),
+          /* @__PURE__ */ jsx("div", { className: "mt-8", children: item.children })
+        ]
+      },
+      item.name
+    )),
+    !hasFixture(items, "Navbar") && /* @__PURE__ */ jsxs("section", { className: "border-b border-r border-stroke-3 bg-surface-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "px-4 pt-4 text-xs font-medium text-foreground-3", children: "Navbar" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-8 border-y border-stroke-3 bg-surface-2 px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground-1", children: "publishOS / Docs / Introduction" }),
+        /* @__PURE__ */ jsxs("nav", { className: "flex flex-wrap gap-4", children: [
+          /* @__PURE__ */ jsx(Link, { active: true, color: "accent", href: "#", size: "sm", children: "Docs" }),
+          /* @__PURE__ */ jsx(Link, { href: "#", size: "sm", children: "Blog" }),
+          /* @__PURE__ */ jsx(Link, { href: "#", size: "sm", children: "Changelog" })
+        ] })
+      ] }) })
+    ] }),
+    !hasFixture(items, "AnimatedIconSwap") && /* @__PURE__ */ jsxs("section", { className: "border-b border-r border-stroke-3 bg-surface-1 p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-xs font-medium text-foreground-3", children: "AnimatedIconSwap" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-8 flex justify-center", children: /* @__PURE__ */ jsx(CopyToClipboardPreview, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "border-b border-r border-stroke-3 bg-surface-1 p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-xs font-medium text-foreground-3", children: "Footer" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-8 border-t border-stroke-3 py-6 text-sm text-foreground-2", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-6xl justify-between", children: [
+        /* @__PURE__ */ jsx("span", { children: "publishOS" }),
+        /* @__PURE__ */ jsx("span", { children: "Docs, API, Status" })
+      ] }) })
+    ] })
+  ] });
+}
+function ActivePanel({
+  blocks,
+  mdx,
+  tab,
+  ui
+}) {
+  if (tab === "tokens") return /* @__PURE__ */ jsx(ColorPalette, {});
+  if (tab === "typography") return /* @__PURE__ */ jsx(TypographyPreview, {});
+  if (tab === "ui") return /* @__PURE__ */ jsx(UiPreview, { items: ui });
+  if (tab === "mdx") return /* @__PURE__ */ jsx(MdxPreview, { items: mdx });
+  return /* @__PURE__ */ jsx(BlocksPreview, { items: blocks });
+}
+function DesignSystemPreview({
+  blocks,
+  initialTab = "ui",
+  mdx,
+  tabComponents,
+  ui
+}) {
+  const [activeTab, setActiveTab] = useState(initialTab);
+  const TabsRoot = tabComponents?.Tabs ?? Tabs;
+  const TabsListRoot = tabComponents?.TabsList ?? TabsList;
+  const TabsPanelRoot = tabComponents?.TabsPanel ?? TabsPanel;
+  const TabsTabRoot = tabComponents?.TabsTab ?? TabsTab;
+  return /* @__PURE__ */ jsx("section", { className: "w-full text-foreground-1", children: /* @__PURE__ */ jsxs(
+    TabsRoot,
+    {
+      className: "w-full",
+      onValueChange: (value) => setActiveTab(value),
+      value: activeTab,
+      children: [
+        /* @__PURE__ */ jsx(
+          TabsListRoot,
+          {
+            "aria-label": "Design system preview sections",
+            className: "mb-4",
+            children: tabs.map((tab) => /* @__PURE__ */ jsx(
+              TabsTabRoot,
+              {
+                id: `design-system-tab-${tab.id}`,
+                value: tab.id,
+                children: tab.label
+              },
+              tab.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TabsPanelRoot,
+          {
+            "aria-labelledby": `design-system-tab-${activeTab}`,
+            className: "overflow-hidden rounded-card border border-stroke-3 bg-surface-1",
+            id: `design-system-${activeTab}`,
+            value: activeTab,
+            children: /* @__PURE__ */ jsx(ActivePanel, { blocks, mdx, tab: activeTab, ui })
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  DesignSystemPreview
+};