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

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

@@ -0,0 +1,592 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/blocks/design-system-preview.tsx
+var design_system_preview_exports = {};
+__export(design_system_preview_exports, {
+  DesignSystemPreview: () => DesignSystemPreview
+});
+module.exports = __toCommonJS(design_system_preview_exports);
+var import_animated_icon_swap = require("./animated-icon-swap.js");
+var import_color_palette = __toESM(require("./color-palette.js"), 1);
+var import_inline_code = require("../mdx/components/inline-code.js");
+var import_accordion = require("../ui/accordion.js");
+var import_badge = require("../ui/badge.js");
+var import_breadcrumb = require("../ui/breadcrumb.js");
+var import_button = require("../ui/button.js");
+var import_button_group = require("../ui/button-group.js");
+var import_card = require("../ui/card.js");
+var import_dialog = require("../ui/dialog.js");
+var import_drawer = require("../ui/drawer.js");
+var import_input = require("../ui/input.js");
+var import_kbd = require("../ui/kbd.js");
+var import_link = require("../ui/link.js");
+var import_menu = require("../ui/menu.js");
+var import_meta_key = require("../ui/meta-key.js");
+var import_popover = require("../ui/popover.js");
+var import_progress = require("../ui/progress.js");
+var import_scroll_area = require("../ui/scroll-area.js");
+var import_select = require("../ui/select.js");
+var import_separator = require("../ui/separator.js");
+var import_table = require("../ui/table.js");
+var import_tabs = require("../ui/tabs.js");
+var import_text = require("../ui/text.js");
+var import_toast = require("../ui/toast.js");
+var import_tooltip = require("../ui/tooltip.js");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("h3", { className: "absolute left-4 top-4 text-xs font-medium text-foreground-3", children: name }),
+    children
+  ] });
+}
+function TypographyPreview() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid border-l border-t border-stroke-3 md:grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Headings", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3 text-foreground-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-4xl font-semibold tracking-tight", children: "Heading One" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-2xl font-semibold tracking-tight", children: "Heading Two" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xl font-medium", children: "Heading Three" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Paragraph", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.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__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Inline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm leading-7 text-foreground-2", children: [
+      "A paragraph with ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", children: "a link" }),
+      ",",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inline_code.InlineCode, { children: "code" }),
+      ", and ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_kbd.Kbd, { children: "K" }),
+      "."
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Longform", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid border-l border-t border-stroke-3 md:grid-cols-2 xl:grid-cols-4", children: [
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: item.name, children: item.children }, item.name)),
+    !hasFixture(items, "Button") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { children: "Primary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "secondary", children: "Secondary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { disabled: true, variant: "outline", children: "Disabled" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "ButtonGroup", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button_group.ButtonGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "secondary", children: "Draft" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "secondary", children: "Preview" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "secondary", children: "Publish" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button_group.ButtonGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button_group.ButtonGroupText, { size: "sm", children: "v1.2.0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button_group.ButtonGroupSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { size: "sm", variant: "outline", children: "Copy" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button_group.ButtonGroup, { orientation: "vertical", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { size: "sm", variant: "secondary", children: "Move up" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { size: "sm", variant: "secondary", children: "Move down" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Badge", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "primary", children: "Primary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { children: "Default" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "outline", children: "Outline" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Input", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "label",
+      {
+        className: "grid w-full max-w-xs gap-2 text-sm text-foreground-2",
+        htmlFor: "design-system-preview-email",
+        children: [
+          "Email",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input.Input,
+            {
+              id: "design-system-preview-email",
+              placeholder: "name@example.com",
+              type: "email"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "default", href: "#", variant: "link.standalone", children: "Default standalone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "#", variant: "link.inline", children: "Accent inline" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_link.Link,
+        {
+          color: "default",
+          href: "#",
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2190" }),
+          variant: "link.standalone",
+          children: "Back to overview"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_link.Link,
+        {
+          color: "accent",
+          href: "#",
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2197" }),
+          variant: "link.standalone",
+          children: "External resource"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", disabled: true, href: "#", variant: "link.standalone", children: "Disabled link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "#", size: "sm", variant: "button.primary", children: "Link as button" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Link colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", color: "green-300", children: "Docs" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", color: "purple-800", children: "Purple link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", color: "accent-solid-hover", children: "Accent hover" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", color: "foreground-3", children: "Foreground 3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", color: "--brand-link", children: "Brand var" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", color: "var(--brand-link)", children: "Brand var" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", color: "oklch(55% 0.18 280)", children: "Raw OKLCH" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Link Scale", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-start gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "#", size: "xs", variant: "link.standalone", children: "Extra small link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "#", size: "sm", variant: "link.standalone", children: "Small link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "#", size: "md", variant: "link.standalone", children: "Medium link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "#", size: "lg", variant: "link.standalone", children: "Large link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "#", size: "xl", variant: "link.standalone", children: "Extra large link" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Link Inline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-xs text-sm leading-7 text-foreground-2", children: [
+      "Start:",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ol", { className: "mt-2 list-decimal space-y-1 pl-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+          "Connect a",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "#", variant: "link.inline", children: "custom domain" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+          "Review the",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "default", href: "#", variant: "link.inline", children: "deployment checklist" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Composed styles", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid w-full max-w-sm gap-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_breadcrumb.BreadcrumbList, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbLink, { href: "#", children: "Default" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbLink, { href: "#", variant: "link.standalone", children: "Link" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbLink, { href: "#", size: "sm", variant: "button.ghost", children: "Button" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_breadcrumb.BreadcrumbPage, { children: "Page" }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "#", variant: "link.inline", children: "Link inline" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "#", size: "sm", variant: "button.secondary", children: "Link button" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { size: "sm", variant: "secondary", children: "Button" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-xs space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, { weight: "semibold", children: "Body text" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, { className: "text-foreground-2", size: "sm", children: "Supporting copy" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, { size: "xs", variant: "label", children: "Small interface text" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, { size: "xs", variant: "overline", children: "Overline" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Select", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.Select, { defaultValue: "docs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.SelectTrigger, { className: "w-48", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectValue, { placeholder: "Choose section" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectIcon, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectPopup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.SelectList, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.SelectItem, { value: "docs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItemIndicator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItemText, { children: "Docs" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.SelectItem, { value: "api", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItemIndicator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItemText, { children: "API" })
+        ] })
+      ] }) }) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "ScrollArea", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_scroll_area.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__ */ (0, import_jsx_runtime.jsx)("p", { children: row.label }, row.id))
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipTrigger, { className: (0, import_button.buttonVariants)({ variant: "outline" }), children: "Hover" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipPopup, { children: "Helpful detail" }) }) })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Popover", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverTrigger, { className: (0, import_button.buttonVariants)({ variant: "outline" }), children: "Open" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.PopoverPopup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverTitle, { children: "Popover" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, { className: "mt-2 text-foreground-2", size: "sm", children: "Floating content with tokenized surface styles." })
+      ] }) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Dialog", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, { className: (0, import_button.buttonVariants)({ variant: "outline" }), children: "Open dialog" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.DialogPortal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogBackdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.DialogPopup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, { children: "Dialog title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, { className: "mt-2 text-foreground-2", size: "sm", children: "Accessible modal behavior is handled by Base UI." })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Menu", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_menu.Menu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuTrigger, { className: (0, import_button.buttonVariants)({ variant: "outline" }), children: "Actions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_menu.MenuPopup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuItem, { children: "Copy link" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuItem, { children: "Open settings" })
+      ] }) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Drawer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.DrawerTrigger, { className: (0, import_button.buttonVariants)({ variant: "outline" }), children: "Open drawer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.DrawerPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.DrawerViewport, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.DrawerPopup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.DrawerTitle, { children: "Drawer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, { className: "mt-2 text-foreground-2", size: "sm", children: "Responsive panel for contextual actions." })
+      ] }) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Tabs base", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.Tabs, { className: "w-full max-w-xs", defaultValue: "one", variant: "base", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsList, { "aria-label": "Base tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { value: "one", children: "One" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { value: "two", children: "Two" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "one", children: "First panel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "two", children: "Second panel" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Tabs button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.Tabs, { className: "w-full max-w-xs", defaultValue: "draft", variant: "button", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsList, { "aria-label": "Button tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { value: "draft", children: "Draft" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { value: "review", children: "Review" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { value: "live", children: "Live" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "draft", children: "Draft changes" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "review", children: "Review queue" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsPanel, { className: "mt-4 text-sm text-foreground-2", value: "live", children: "Live version" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Tabs underline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tabs.Tabs,
+      {
+        className: "w-full max-w-xs",
+        defaultValue: "overview",
+        indicatorColor: "accent",
+        variant: "underline",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsList, { "aria-label": "Underline tabs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { value: "overview", children: "Overview" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { value: "activity", children: "Activity" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsTab, { value: "settings", children: "Settings" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsIndicator, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tabs.TabsPanel,
+            {
+              className: "mt-4 text-sm text-foreground-2",
+              value: "overview",
+              children: "Publication summary"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tabs.TabsPanel,
+            {
+              className: "mt-4 text-sm text-foreground-2",
+              value: "activity",
+              children: "Recent updates"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_tabs.TabsPanel,
+            {
+              className: "mt-4 text-sm text-foreground-2",
+              value: "settings",
+              children: "Project settings"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "NavigationTabs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid w-full max-w-sm gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabs, { defaultValue: "docs", variant: "base", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.NavigationTabsList, { "aria-label": "Base navigation tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabsLink, { active: true, href: "#docs", value: "docs", children: "Docs" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabsLink, { href: "#api", value: "api", children: "API" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabs, { defaultValue: "drafts", variant: "button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.NavigationTabsList, { "aria-label": "Button navigation tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabsLink, { active: true, href: "#drafts", value: "drafts", children: "Drafts" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabsLink, { href: "#published", value: "published", children: "Published" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tabs.NavigationTabs,
+        {
+          defaultValue: "overview",
+          indicatorColor: "foreground",
+          variant: "underline",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.NavigationTabsList, { "aria-label": "Underline navigation tabs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabsLink, { active: true, href: "#overview", value: "overview", children: "Overview" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabsLink, { href: "#analytics", value: "analytics", children: "Analytics" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.NavigationTabsIndicator, {})
+          ] })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Progress", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_progress.Progress, { className: "w-full max-w-xs", value: 64, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_progress.ProgressTrack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_progress.ProgressIndicator, {}) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Accordion", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accordion.Accordion, { className: "w-full max-w-xs", defaultValue: ["one"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_accordion.AccordionItem, { value: "one", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accordion.AccordionHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accordion.AccordionTrigger, { children: "Section" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accordion.AccordionPanel, { children: "Expandable content preview." })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "MetaKey", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_meta_key.MetaKey, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_kbd.Kbd, { children: "K" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Toast", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast, { className: "w-full max-w-xs", toast: { id: "preview" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_toast.ToastContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.ToastTitle, { children: "Saved" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.ToastDescription, { children: "Changes are ready to publish." })
+    ] }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Kbd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_kbd.Kbd, { children: "\u2318" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_kbd.Kbd, { children: "K" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_kbd.Kbd, { children: "Esc" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { className: "w-full max-w-xs", variant: "elevated", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardTitle, { children: "Card title" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardDescription, { children: "Uses surface, stroke, radius, and foreground tokens." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-4 text-sm text-foreground-2", children: "Composable content." })
+      ] })
+    ] }) })
+  ] });
+}
+function MdxPreview({ items = [] }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid border-l border-t border-stroke-3 md:grid-cols-2 xl:grid-cols-4", children: [
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: item.name, children: item.children }, item.name)),
+    !hasFixture(items, "Link") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "default", href: "/ds", variant: "link.standalone", children: "Default standalone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "/ds", variant: "link.inline", children: "Accent inline" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "/ds", size: "sm", variant: "button.primary", children: "Button link" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "MDX Links", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-md space-y-4 text-sm leading-7 text-foreground-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+        "This MDX paragraph includes an",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "/ds", variant: "link.inline", children: "internal relative link" }),
+        ", an",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_link.Link,
+          {
+            color: "accent",
+            href: "https://example.com",
+            variant: "link.inline",
+            children: "external link"
+          }
+        ),
+        ", a",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "/ds", variant: "link.inline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "link with bold text" }) }),
+        ", a",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "/ds", variant: "link.inline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { children: "link with italics" }) }),
+        ", and a",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "/ds", variant: "link.inline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inline_code.InlineCode, { children: "linked inline code" }) }),
+        "."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-medium leading-7 text-foreground-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { color: "accent", href: "/ds", variant: "link.standalone", children: "Linked heading" }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Callout", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-medium text-foreground-1", children: "Note" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1", children: "A compact MDX callout preview." })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Table", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_table.Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_table.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableHead, { children: "Token" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableHead, { children: "Use" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableBody, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_table.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: "surface-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: "Panels" })
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Code", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("code", { children: `export const value = "publishOS";` }) }) })
+  ] });
+}
+function CopyToClipboardPreview() {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  function handleCopy() {
+    void navigator.clipboard?.writeText("pnpm publish.os add block");
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.Button,
+    {
+      "aria-label": copied ? "Copied command" : "Copy command",
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_animated_icon_swap.AnimatedIconSwap,
+        {
+          active: copied,
+          activeIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { "aria-hidden": "true" }),
+          defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, { "aria-hidden": "true" }),
+          size: 16
+        }
+      ),
+      onClick: handleCopy,
+      variant: "secondary",
+      children: "Copy"
+    }
+  );
+}
+function BlocksPreview({
+  items = []
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid border-l border-t border-stroke-3", children: [
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "section",
+      {
+        className: "border-b border-r border-stroke-3 bg-surface-1",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "px-4 pt-4 text-xs font-medium text-foreground-3", children: item.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-8", children: item.children })
+        ]
+      },
+      item.name
+    )),
+    !hasFixture(items, "Navbar") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "border-b border-r border-stroke-3 bg-surface-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "px-4 pt-4 text-xs font-medium text-foreground-3", children: "Navbar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-8 border-y border-stroke-3 bg-surface-2 px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto flex max-w-6xl flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium text-foreground-1", children: "publishOS / Docs / Introduction" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", { className: "flex flex-wrap gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { active: true, color: "accent", href: "#", size: "sm", children: "Docs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "#", size: "sm", children: "Blog" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { href: "#", size: "sm", children: "Changelog" })
+        ] })
+      ] }) })
+    ] }),
+    !hasFixture(items, "AnimatedIconSwap") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "border-b border-r border-stroke-3 bg-surface-1 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-medium text-foreground-3", children: "AnimatedIconSwap" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-8 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyToClipboardPreview, {}) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "border-b border-r border-stroke-3 bg-surface-1 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-medium text-foreground-3", children: "Footer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-8 border-t border-stroke-3 py-6 text-sm text-foreground-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto flex max-w-6xl justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "publishOS" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Docs, API, Status" })
+      ] }) })
+    ] })
+  ] });
+}
+function ActivePanel({
+  blocks,
+  mdx,
+  tab,
+  ui
+}) {
+  if (tab === "tokens") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {});
+  if (tab === "typography") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypographyPreview, {});
+  if (tab === "ui") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UiPreview, { items: ui });
+  if (tab === "mdx") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MdxPreview, { items: mdx });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlocksPreview, { items: blocks });
+}
+function DesignSystemPreview({
+  blocks,
+  initialTab = "ui",
+  mdx,
+  tabComponents,
+  ui
+}) {
+  const [activeTab, setActiveTab] = (0, import_react.useState)(initialTab);
+  const TabsRoot = tabComponents?.Tabs ?? import_tabs.Tabs;
+  const TabsListRoot = tabComponents?.TabsList ?? import_tabs.TabsList;
+  const TabsPanelRoot = tabComponents?.TabsPanel ?? import_tabs.TabsPanel;
+  const TabsTabRoot = tabComponents?.TabsTab ?? import_tabs.TabsTab;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "w-full text-foreground-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    TabsRoot,
+    {
+      className: "w-full",
+      onValueChange: (value) => setActiveTab(value),
+      value: activeTab,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TabsListRoot,
+          {
+            "aria-label": "Design system preview sections",
+            className: "mb-4",
+            children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              TabsTabRoot,
+              {
+                id: `design-system-tab-${tab.id}`,
+                value: tab.id,
+                children: tab.label
+              },
+              tab.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ActivePanel, { blocks, mdx, tab: activeTab, ui })
+          }
+        )
+      ]
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DesignSystemPreview
+});

package/dist/kernel/components/blocks/design-system-preview.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tabs, TabsList, TabsPanel, TabsTab } from '../ui/tabs.cjs';
+import { ReactNode } from 'react';
+import 'class-variance-authority/types';
+import '@base-ui/react/tabs';
+import 'class-variance-authority';
+import 'next/link';
+
+type PreviewTab = "tokens" | "typography" | "ui" | "mdx" | "blocks";
+type DesignSystemPreviewFixture = {
+    name: string;
+    children: ReactNode;
+};
+type DesignSystemPreviewTabs = {
+    Tabs?: typeof Tabs;
+    TabsList?: typeof TabsList;
+    TabsPanel?: typeof TabsPanel;
+    TabsTab?: typeof TabsTab;
+};
+type DesignSystemPreviewProps = {
+    blocks?: DesignSystemPreviewFixture[];
+    initialTab?: PreviewTab;
+    mdx?: DesignSystemPreviewFixture[];
+    tabComponents?: DesignSystemPreviewTabs;
+    ui?: DesignSystemPreviewFixture[];
+};
+declare function DesignSystemPreview({ blocks, initialTab, mdx, tabComponents, ui, }: DesignSystemPreviewProps): react_jsx_runtime.JSX.Element;
+
+export { DesignSystemPreview, type DesignSystemPreviewFixture, type DesignSystemPreviewProps, type DesignSystemPreviewTabs, type PreviewTab };