@publish.os/nextjs 0.0.1-alpha.5 → 0.0.1-alpha.7

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

@@ -1,593 +0,0 @@
-"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_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_tag = require("../ui/tag.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: "Solid" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "soft", children: "Soft" }),
-      /* @__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: "soft", children: "Draft" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "soft", children: "Preview" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "soft", 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: "soft", children: "Move up" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { size: "sm", variant: "soft", children: "Move down" })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCell, { name: "Tag", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap justify-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tag.Tag, { children: "Solid" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tag.Tag, { variant: "soft", children: "Soft" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tag.Tag, { variant: "outline", children: "Outline" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tag.Tag, { borderStyle: "dotted", tone: "accent", variant: "soft", children: "Beta" })
-    ] }) }),
-    /* @__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.solid", 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.soft", children: "Link button" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { size: "sm", variant: "soft", 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.solid", 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: "soft",
-      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

@@ -1,29 +0,0 @@
-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 };