@publish.os/nextjs 0.0.1-alpha.90 → 0.0.1-alpha.92

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

@@ -1,667 +0,0 @@
-"use client";
-
-// src/modules/design-system/design-system-preview.tsx
-import { AnimatedIconSwap } from "@publish.os/nextjs/kernel/components/blocks/animated-icon-swap";
-import ColorPalette from "@publish.os/nextjs/kernel/components/blocks/color-palette";
-import { Callout } from "@publish.os/nextjs/kernel/components/mdx/components/callout";
-import { InlineCode } from "@publish.os/nextjs/kernel/components/mdx/components/inline-code";
-import {
-  Accordion,
-  AccordionHeader,
-  AccordionItem,
-  AccordionPanel,
-  AccordionTrigger
-} from "@publish.os/nextjs/kernel/components/ui/accordion";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator
-} from "@publish.os/nextjs/kernel/components/ui/breadcrumb";
-import { Button, buttonVariants } from "@publish.os/nextjs/kernel/components/ui/button";
-import {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText
-} from "@publish.os/nextjs/kernel/components/ui/button-group";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from "@publish.os/nextjs/kernel/components/ui/card";
-import {
-  Dialog,
-  DialogBackdrop,
-  DialogPopup,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger
-} from "@publish.os/nextjs/kernel/components/ui/dialog";
-import {
-  Drawer,
-  DrawerPopup,
-  DrawerPortal,
-  DrawerTitle,
-  DrawerTrigger,
-  DrawerViewport
-} from "@publish.os/nextjs/kernel/components/ui/drawer";
-import { Input } from "@publish.os/nextjs/kernel/components/ui/input";
-import { Kbd } from "@publish.os/nextjs/kernel/components/ui/kbd";
-import { Link } from "@publish.os/nextjs/kernel/components/ui/link";
-import {
-  Menu,
-  MenuItem,
-  MenuPopup,
-  MenuPortal,
-  MenuPositioner,
-  MenuTrigger
-} from "@publish.os/nextjs/kernel/components/ui/menu";
-import { ModKey } from "@publish.os/nextjs/kernel/components/ui/mod-key";
-import {
-  Popover,
-  PopoverPopup,
-  PopoverPortal,
-  PopoverPositioner,
-  PopoverTitle,
-  PopoverTrigger
-} from "@publish.os/nextjs/kernel/components/ui/popover";
-import {
-  Progress,
-  ProgressIndicator,
-  ProgressTrack
-} from "@publish.os/nextjs/kernel/components/ui/progress";
-import { ScrollArea } from "@publish.os/nextjs/kernel/components/ui/scroll-area";
-import {
-  Select,
-  SelectIcon,
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectList,
-  SelectPopup,
-  SelectPortal,
-  SelectPositioner,
-  SelectTrigger,
-  SelectValue
-} from "@publish.os/nextjs/kernel/components/ui/select";
-import { Separator } from "@publish.os/nextjs/kernel/components/ui/separator";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from "@publish.os/nextjs/kernel/components/ui/table";
-import {
-  NavigationTabs,
-  NavigationTabsIndicator,
-  NavigationTabsLink,
-  NavigationTabsList,
-  Tabs,
-  TabsIndicator,
-  TabsList,
-  TabsPanel,
-  TabsTab
-} from "@publish.os/nextjs/kernel/components/ui/tabs";
-import { Tag } from "@publish.os/nextjs/kernel/components/ui/tag";
-import { Text } from "@publish.os/nextjs/kernel/components/ui/text";
-import {
-  Toast,
-  ToastContent,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle
-} from "@publish.os/nextjs/kernel/components/ui/toast";
-import {
-  Tooltip,
-  TooltipPopup,
-  TooltipPortal,
-  TooltipPositioner,
-  TooltipProvider,
-  TooltipTrigger
-} from "@publish.os/nextjs/kernel/components/ui/tooltip";
-import { CheckIcon, CopyIcon } from "@phosphor-icons/react/ssr";
-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" }
-], 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: "Solid" }),
-      /* @__PURE__ */ jsx(Button, { variant: "soft", children: "Soft" }),
-      /* @__PURE__ */ jsx(Button, { disabled: !0, 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: "soft", children: "Draft" }),
-        /* @__PURE__ */ jsx(Button, { variant: "soft", children: "Preview" }),
-        /* @__PURE__ */ jsx(Button, { variant: "soft", 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: "soft", children: "Move up" }),
-        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "soft", children: "Move down" })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(PreviewCell, { name: "Tag", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [
-      /* @__PURE__ */ jsx(Tag, { children: "Solid" }),
-      /* @__PURE__ */ jsx(Tag, { variant: "soft", children: "Soft" }),
-      /* @__PURE__ */ jsx(Tag, { variant: "outline", children: "Outline" }),
-      /* @__PURE__ */ jsx(Tag, { borderStyle: "dotted", tone: "accent", variant: "soft", children: "Beta" })
-    ] }) }),
-    /* @__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: !0, href: "#", variant: "link.standalone", children: "Disabled link" }),
-      /* @__PURE__ */ jsx(Link, { href: "#", size: "sm", variant: "button.solid", 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-1-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.soft", children: "Link button" }),
-        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "soft", 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: !0, 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: !0, 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: !0, 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: "ModKey", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(ModKey, {}),
-      /* @__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.solid", 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__ */ jsx("div", { className: "grid w-full max-w-xl gap-3", children: ["neutral", "info", "warning", "danger", "success"].map(
-      (color) => ["solid", "soft", "outline"].map((variant) => /* @__PURE__ */ jsxs(
-        Callout,
-        {
-          color,
-          title: `${color} \xB7 ${variant}`,
-          variant,
-          children: [
-            /* @__PURE__ */ jsxs("p", { children: [
-              "A callout with ",
-              /* @__PURE__ */ jsx("strong", { children: "rich text" }),
-              ",",
-              " ",
-              /* @__PURE__ */ jsx(InlineCode, { children: "inline code" }),
-              ", and a",
-              " ",
-              /* @__PURE__ */ jsx("a", { href: "#callout", children: "link" }),
-              "."
-            ] }),
-            /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx("li", { children: "Content stays readable at narrow widths." }) })
-          ]
-        },
-        `${color}-${variant}`
-      ))
-    ) }) }),
-    /* @__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() {
-  let [copied, setCopied] = useState(!1);
-  function handleCopy() {
-    navigator.clipboard?.writeText("pnpm publish.os add block"), setCopied(!0), window.setTimeout(() => setCopied(!1), 1200);
-  }
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      "aria-label": copied ? "Copied command" : "Copy command",
-      leftIcon: /* @__PURE__ */ jsx(
-        AnimatedIconSwap,
-        {
-          active: copied,
-          activeIcon: /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }),
-          defaultIcon: /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" }),
-          size: 16
-        }
-      ),
-      onClick: handleCopy,
-      variant: "soft",
-      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: !0, 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
-}) {
-  return tab === "tokens" ? /* @__PURE__ */ jsx(ColorPalette, {}) : tab === "typography" ? /* @__PURE__ */ jsx(TypographyPreview, {}) : tab === "ui" ? /* @__PURE__ */ jsx(UiPreview, { items: ui }) : tab === "mdx" ? /* @__PURE__ */ jsx(MdxPreview, { items: mdx }) : /* @__PURE__ */ jsx(BlocksPreview, { items: blocks });
-}
-function DesignSystemPreview({
-  blocks,
-  initialTab = "ui",
-  mdx,
-  tabComponents,
-  ui
-}) {
-  let [activeTab, setActiveTab] = useState(initialTab), TabsRoot = tabComponents?.Tabs ?? Tabs, TabsListRoot = tabComponents?.TabsList ?? TabsList, TabsPanelRoot = tabComponents?.TabsPanel ?? TabsPanel, 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
-};