@publish.os/nextjs 0.0.1-alpha.6 → 0.0.1-alpha.8

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

@@ -1,16 +1,16 @@
 "use client";
 
-// src/kernel/components/blocks/design-system-preview.tsx
-import { AnimatedIconSwap } from "./animated-icon-swap.js";
-import ColorPalette from "./color-palette.js";
-import { InlineCode } from "../mdx/components/inline-code.js";
+// src/modules/design-system/design-system-preview.tsx
+import { AnimatedIconSwap } from "@publish.os/nextjs/kernel/components/blocks/animated-icon-swap";
+import ColorPalette from "@publish.os/nextjs/kernel/components/blocks/color-palette";
+import { InlineCode } from "@publish.os/nextjs/kernel/components/mdx/components/inline-code";
 import {
   Accordion,
   AccordionHeader,
   AccordionItem,
   AccordionPanel,
   AccordionTrigger
-} from "../ui/accordion.js";
+} from "@publish.os/nextjs/kernel/components/ui/accordion";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -18,20 +18,20 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator
-} from "../ui/breadcrumb.js";
-import { Button, buttonVariants } from "../ui/button.js";
+} from "@publish.os/nextjs/kernel/components/ui/breadcrumb";
+import { Button, buttonVariants } from "@publish.os/nextjs/kernel/components/ui/button";
 import {
   ButtonGroup,
   ButtonGroupSeparator,
   ButtonGroupText
-} from "../ui/button-group.js";
+} from "@publish.os/nextjs/kernel/components/ui/button-group";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "../ui/card.js";
+} from "@publish.os/nextjs/kernel/components/ui/card";
 import {
   Dialog,
   DialogBackdrop,
@@ -39,7 +39,7 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger
-} from "../ui/dialog.js";
+} from "@publish.os/nextjs/kernel/components/ui/dialog";
 import {
   Drawer,
   DrawerPopup,
@@ -47,10 +47,10 @@ import {
   DrawerTitle,
   DrawerTrigger,
   DrawerViewport
-} from "../ui/drawer.js";
-import { Input } from "../ui/input.js";
-import { Kbd } from "../ui/kbd.js";
-import { Link } from "../ui/link.js";
+} from "@publish.os/nextjs/kernel/components/ui/drawer";
+import { Input } from "@publish.os/nextjs/kernel/components/ui/input";
+import { Kbd } from "@publish.os/nextjs/kernel/components/ui/kbd";
+import { Link } from "@publish.os/nextjs/kernel/components/ui/link";
 import {
   Menu,
   MenuItem,
@@ -58,8 +58,8 @@ import {
   MenuPortal,
   MenuPositioner,
   MenuTrigger
-} from "../ui/menu.js";
-import { MetaKey } from "../ui/meta-key.js";
+} from "@publish.os/nextjs/kernel/components/ui/menu";
+import { MetaKey } from "@publish.os/nextjs/kernel/components/ui/meta-key";
 import {
   Popover,
   PopoverPopup,
@@ -67,13 +67,13 @@ import {
   PopoverPositioner,
   PopoverTitle,
   PopoverTrigger
-} from "../ui/popover.js";
+} from "@publish.os/nextjs/kernel/components/ui/popover";
 import {
   Progress,
   ProgressIndicator,
   ProgressTrack
-} from "../ui/progress.js";
-import { ScrollArea } from "../ui/scroll-area.js";
+} from "@publish.os/nextjs/kernel/components/ui/progress";
+import { ScrollArea } from "@publish.os/nextjs/kernel/components/ui/scroll-area";
 import {
   Select,
   SelectIcon,
@@ -86,8 +86,8 @@ import {
   SelectPositioner,
   SelectTrigger,
   SelectValue
-} from "../ui/select.js";
-import { Separator } from "../ui/separator.js";
+} from "@publish.os/nextjs/kernel/components/ui/select";
+import { Separator } from "@publish.os/nextjs/kernel/components/ui/separator";
 import {
   Table,
   TableBody,
@@ -95,7 +95,7 @@ import {
   TableHead,
   TableHeader,
   TableRow
-} from "../ui/table.js";
+} from "@publish.os/nextjs/kernel/components/ui/table";
 import {
   NavigationTabs,
   NavigationTabsIndicator,
@@ -106,16 +106,16 @@ import {
   TabsList,
   TabsPanel,
   TabsTab
-} from "../ui/tabs.js";
-import { Tag } from "../ui/tag.js";
-import { Text } from "../ui/text.js";
+} from "@publish.os/nextjs/kernel/components/ui/tabs";
+import { Tag } from "@publish.os/nextjs/kernel/components/ui/tag";
+import { Text } from "@publish.os/nextjs/kernel/components/ui/text";
 import {
   Toast,
   ToastContent,
   ToastDescription,
   ToastProvider,
   ToastTitle
-} from "../ui/toast.js";
+} from "@publish.os/nextjs/kernel/components/ui/toast";
 import {
   Tooltip,
   TooltipPopup,
@@ -123,8 +123,11 @@ import {
   TooltipPositioner,
   TooltipProvider,
   TooltipTrigger
-} from "../ui/tooltip.js";
-import { Check, Copy } from "lucide-react";
+} from "@publish.os/nextjs/kernel/components/ui/tooltip";
+import {
+  FrameworkCheckIcon as Check,
+  FrameworkCopyIcon as Copy
+} from "@publish.os/nextjs/kernel/framework-icons";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var tabs = [
@@ -133,8 +136,7 @@ var tabs = [
   { id: "ui", label: "UI" },
   { id: "mdx", label: "MDX" },
   { id: "blocks", label: "Blocks" }
-];
-var scrollRows = Array.from({ length: 8 }, (_, index) => ({
+], scrollRows = Array.from({ length: 8 }, (_, index) => ({
   id: `row-${index + 1}`,
   label: `Scrollable row ${index + 1}`
 }));
@@ -177,7 +179,7 @@ function UiPreview({ items = [] }) {
     !hasFixture(items, "Button") && /* @__PURE__ */ jsx(PreviewCell, { name: "Button", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
       /* @__PURE__ */ jsx(Button, { children: "Solid" }),
       /* @__PURE__ */ jsx(Button, { variant: "soft", children: "Soft" }),
-      /* @__PURE__ */ jsx(Button, { disabled: true, variant: "outline", children: "Disabled" })
+      /* @__PURE__ */ jsx(Button, { disabled: !0, variant: "outline", children: "Disabled" })
     ] }) }),
     /* @__PURE__ */ jsx(PreviewCell, { name: "ButtonGroup", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
       /* @__PURE__ */ jsxs(ButtonGroup, { children: [
@@ -242,13 +244,13 @@ function UiPreview({ items = [] }) {
           children: "External resource"
         }
       ),
-      /* @__PURE__ */ jsx(Link, { color: "accent", disabled: true, href: "#", variant: "link.standalone", children: "Disabled link" }),
+      /* @__PURE__ */ jsx(Link, { color: "accent", disabled: !0, href: "#", variant: "link.standalone", children: "Disabled link" }),
       /* @__PURE__ */ jsx(Link, { href: "#", size: "sm", variant: "button.solid", children: "Link as button" })
     ] }) }),
     /* @__PURE__ */ jsx(PreviewCell, { name: "Link colors", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
       /* @__PURE__ */ jsx(Link, { href: "/ds", color: "green-300", children: "Docs" }),
       /* @__PURE__ */ jsx(Link, { href: "/ds", color: "purple-800", children: "Purple link" }),
-      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "accent-solid-hover", children: "Accent hover" }),
+      /* @__PURE__ */ jsx(Link, { href: "/ds", color: "accent-1-hover", children: "Accent hover" }),
       /* @__PURE__ */ jsx(Link, { href: "/ds", color: "foreground-3", children: "Foreground 3" }),
       /* @__PURE__ */ jsx(Link, { href: "/ds", color: "--brand-link", children: "Brand var" }),
       /* @__PURE__ */ jsx(Link, { href: "/ds", color: "var(--brand-link)", children: "Brand var" }),
@@ -420,11 +422,11 @@ function UiPreview({ items = [] }) {
     ) }),
     /* @__PURE__ */ jsx(PreviewCell, { name: "NavigationTabs", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-sm gap-4", children: [
       /* @__PURE__ */ jsx(NavigationTabs, { defaultValue: "docs", variant: "base", children: /* @__PURE__ */ jsxs(NavigationTabsList, { "aria-label": "Base navigation tabs", children: [
-        /* @__PURE__ */ jsx(NavigationTabsLink, { active: true, href: "#docs", value: "docs", children: "Docs" }),
+        /* @__PURE__ */ jsx(NavigationTabsLink, { active: !0, href: "#docs", value: "docs", children: "Docs" }),
         /* @__PURE__ */ jsx(NavigationTabsLink, { href: "#api", value: "api", children: "API" })
       ] }) }),
       /* @__PURE__ */ jsx(NavigationTabs, { defaultValue: "drafts", variant: "button", children: /* @__PURE__ */ jsxs(NavigationTabsList, { "aria-label": "Button navigation tabs", children: [
-        /* @__PURE__ */ jsx(NavigationTabsLink, { active: true, href: "#drafts", value: "drafts", children: "Drafts" }),
+        /* @__PURE__ */ jsx(NavigationTabsLink, { active: !0, href: "#drafts", value: "drafts", children: "Drafts" }),
         /* @__PURE__ */ jsx(NavigationTabsLink, { href: "#published", value: "published", children: "Published" })
       ] }) }),
       /* @__PURE__ */ jsx(
@@ -434,7 +436,7 @@ function UiPreview({ items = [] }) {
           indicatorColor: "foreground",
           variant: "underline",
           children: /* @__PURE__ */ jsxs(NavigationTabsList, { "aria-label": "Underline navigation tabs", children: [
-            /* @__PURE__ */ jsx(NavigationTabsLink, { active: true, href: "#overview", value: "overview", children: "Overview" }),
+            /* @__PURE__ */ jsx(NavigationTabsLink, { active: !0, href: "#overview", value: "overview", children: "Overview" }),
             /* @__PURE__ */ jsx(NavigationTabsLink, { href: "#analytics", value: "analytics", children: "Analytics" }),
             /* @__PURE__ */ jsx(NavigationTabsIndicator, {})
           ] })
@@ -522,15 +524,13 @@ function MdxPreview({ items = [] }) {
         /* @__PURE__ */ jsx(TableCell, { children: "Panels" })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx(PreviewCell, { name: "Code", children: /* @__PURE__ */ jsx("pre", { className: "max-w-xs overflow-auto rounded-codeblock border border-stroke-2 bg-surface-3 p-4 text-xs text-foreground-1", children: /* @__PURE__ */ jsx("code", { children: `export const value = "publishOS";` }) }) })
+    /* @__PURE__ */ jsx(PreviewCell, { name: "Code", children: /* @__PURE__ */ jsx("pre", { className: "max-w-xs overflow-auto rounded-codeblock border border-stroke-2 bg-surface-3 p-4 text-xs text-foreground-1", children: /* @__PURE__ */ jsx("code", { children: 'export const value = "publishOS";' }) }) })
   ] });
 }
 function CopyToClipboardPreview() {
-  const [copied, setCopied] = useState(false);
+  let [copied, setCopied] = useState(!1);
   function handleCopy() {
-    void navigator.clipboard?.writeText("pnpm publish.os add block");
-    setCopied(true);
-    window.setTimeout(() => setCopied(false), 1200);
+    navigator.clipboard?.writeText("pnpm publish.os add block"), setCopied(!0), window.setTimeout(() => setCopied(!1), 1200);
   }
   return /* @__PURE__ */ jsx(
     Button,
@@ -571,7 +571,7 @@ function BlocksPreview({
       /* @__PURE__ */ jsx("div", { className: "mt-8 border-y border-stroke-3 bg-surface-2 px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
         /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground-1", children: "publishOS / Docs / Introduction" }),
         /* @__PURE__ */ jsxs("nav", { className: "flex flex-wrap gap-4", children: [
-          /* @__PURE__ */ jsx(Link, { active: true, color: "accent", href: "#", size: "sm", children: "Docs" }),
+          /* @__PURE__ */ jsx(Link, { active: !0, color: "accent", href: "#", size: "sm", children: "Docs" }),
           /* @__PURE__ */ jsx(Link, { href: "#", size: "sm", children: "Blog" }),
           /* @__PURE__ */ jsx(Link, { href: "#", size: "sm", children: "Changelog" })
         ] })
@@ -596,11 +596,7 @@ function ActivePanel({
   tab,
   ui
 }) {
-  if (tab === "tokens") return /* @__PURE__ */ jsx(ColorPalette, {});
-  if (tab === "typography") return /* @__PURE__ */ jsx(TypographyPreview, {});
-  if (tab === "ui") return /* @__PURE__ */ jsx(UiPreview, { items: ui });
-  if (tab === "mdx") return /* @__PURE__ */ jsx(MdxPreview, { items: mdx });
-  return /* @__PURE__ */ jsx(BlocksPreview, { items: blocks });
+  return tab === "tokens" ? /* @__PURE__ */ jsx(ColorPalette, {}) : tab === "typography" ? /* @__PURE__ */ jsx(TypographyPreview, {}) : tab === "ui" ? /* @__PURE__ */ jsx(UiPreview, { items: ui }) : tab === "mdx" ? /* @__PURE__ */ jsx(MdxPreview, { items: mdx }) : /* @__PURE__ */ jsx(BlocksPreview, { items: blocks });
 }
 function DesignSystemPreview({
   blocks,
@@ -609,11 +605,7 @@ function DesignSystemPreview({
   tabComponents,
   ui
 }) {
-  const [activeTab, setActiveTab] = useState(initialTab);
-  const TabsRoot = tabComponents?.Tabs ?? Tabs;
-  const TabsListRoot = tabComponents?.TabsList ?? TabsList;
-  const TabsPanelRoot = tabComponents?.TabsPanel ?? TabsPanel;
-  const TabsTabRoot = tabComponents?.TabsTab ?? TabsTab;
+  let [activeTab, setActiveTab] = useState(initialTab), TabsRoot = tabComponents?.Tabs ?? Tabs, TabsListRoot = tabComponents?.TabsList ?? TabsList, TabsPanelRoot = tabComponents?.TabsPanel ?? TabsPanel, TabsTabRoot = tabComponents?.TabsTab ?? TabsTab;
   return /* @__PURE__ */ jsx("section", { className: "w-full text-foreground-1", children: /* @__PURE__ */ jsxs(
     TabsRoot,
     {

package/dist/kernel/components/blocks/link-playground.js

@@ -1,34 +1,11 @@
 "use client";
 
-// src/kernel/components/blocks/link-playground.tsx
-import { InlineCode } from "../mdx/components/inline-code.js";
-import { Button } from "../ui/button.js";
-import { Link } from "../ui/link.js";
-import { Tabs, TabsList, TabsPanel, TabsTab } from "../ui/tabs.js";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/blocks/link-playground.tsx
+// src/modules/design-system/link-playground.tsx
+import { InlineCode } from "@publish.os/nextjs/kernel/components/mdx/components/inline-code";
+import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
+import { Link } from "@publish.os/nextjs/kernel/components/ui/link";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "@publish.os/nextjs/kernel/components/ui/tabs";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var defaultSettings = {
@@ -52,30 +29,16 @@ var defaultSettings = {
   lightnessDelta: 0,
   chromaScale: 1,
   hueShift: 0
-};
-var toneOrder = ["default", "accent"];
-var variantOrder = ["link.standalone", "link.inline"];
+}, toneOrder = ["default", "accent"], variantOrder = ["link.standalone", "link.inline"];
 function adjustedColor(color, settings) {
-  if (settings.lightnessDelta === 0 && settings.chromaScale === 1 && settings.hueShift === 0) {
-    return color;
-  }
-  return `oklch(from ${color} calc(l + ${settings.lightnessDelta / 100}) calc(c * ${settings.chromaScale}) calc(h + ${settings.hueShift}))`;
+  return settings.lightnessDelta === 0 && settings.chromaScale === 1 && settings.hueShift === 0 ? color : `oklch(from ${color} calc(l + ${settings.lightnessDelta / 100}) calc(c * ${settings.chromaScale}) calc(h + ${settings.hueShift}))`;
 }
 function linkStyle({
   tone,
   variant,
   settings
 }) {
-  const baseColor = tone === "accent" ? settings.accentColor : settings.defaultColor;
-  const isStandalone = variant === "link.standalone";
-  const textOpacity = isStandalone ? settings.standaloneTextOpacity : settings.textOpacity;
-  const hoverTextOpacity = isStandalone ? settings.standaloneTextOpacity : settings.hoverTextOpacity;
-  const underlineOpacity = isStandalone ? 0 : settings.underlineOpacity;
-  const hoverUnderlineOpacity = isStandalone ? settings.standaloneHoverUnderlineOpacity : settings.hoverUnderlineOpacity;
-  const underlineColor = settings.underlineColor;
-  const resolvedUnderlineColor = underlineColor === "currentColor" ? baseColor : underlineColor;
-  const resolvedHoverUnderlineColor = settings.hoverUnderlineColor === "currentColor" ? baseColor : settings.hoverUnderlineColor;
-  const resolvedActiveUnderlineColor = settings.activeUnderlineColor === "currentColor" ? baseColor : settings.activeUnderlineColor;
+  let baseColor = tone === "accent" ? settings.accentColor : settings.defaultColor, isStandalone = variant === "link.standalone", textOpacity = isStandalone ? settings.standaloneTextOpacity : settings.textOpacity, hoverTextOpacity = isStandalone ? settings.standaloneTextOpacity : settings.hoverTextOpacity, underlineOpacity = isStandalone ? 0 : settings.underlineOpacity, hoverUnderlineOpacity = isStandalone ? settings.standaloneHoverUnderlineOpacity : settings.hoverUnderlineOpacity, underlineColor = settings.underlineColor, resolvedUnderlineColor = underlineColor === "currentColor" ? baseColor : underlineColor, resolvedHoverUnderlineColor = settings.hoverUnderlineColor === "currentColor" ? baseColor : settings.hoverUnderlineColor, resolvedActiveUnderlineColor = settings.activeUnderlineColor === "currentColor" ? baseColor : settings.activeUnderlineColor;
   return {
     "--link-active-text-opacity": `${settings.activeTextOpacity}%`,
     "--link-active-underline-color": adjustedColor(
@@ -139,7 +102,7 @@ function NumberControl({
   unit,
   value
 }) {
-  const id = useId();
+  let id = useId();
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
     /* @__PURE__ */ jsxs(
       "label",
@@ -159,7 +122,7 @@ function NumberControl({
       /* @__PURE__ */ jsx(
         "input",
         {
-          className: "h-1 w-full accent-foreground-1",
+          className: "h-1 w-full accent-1-foreground-1",
           id,
           max,
           min,
@@ -189,7 +152,7 @@ function TextControl({
   onChange,
   value
 }) {
-  const id = useId();
+  let id = useId();
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -203,7 +166,7 @@ function TextControl({
             className: "h-8 rounded-button border border-stroke-2 bg-surface-1 px-2 font-mono text-xs text-foreground-1 outline-none focus:border-accent-1",
             id,
             onChange: (event) => onChange(event.target.value),
-            spellCheck: false,
+            spellCheck: !1,
             value
           }
         )
@@ -256,8 +219,8 @@ function PreviewBlock({
   children,
   title
 }) {
-  return /* @__PURE__ */ jsxs("section", { className: "min-h-64 border-b border-r border-stroke-3 bg-white", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-5 pt-5 text-sm font-medium text-[#858585]", children: title }),
+  return /* @__PURE__ */ jsxs("section", { className: "min-h-64 border-b border-r border-stroke-3 bg-surface-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-5 pt-5 text-sm font-medium text-foreground-3", children: title }),
     /* @__PURE__ */ jsx("div", { className: "flex min-h-52 items-center justify-center px-8 py-8", children })
   ] });
 }
@@ -319,7 +282,7 @@ function LinkSet({ settings }) {
     /* @__PURE__ */ jsx(
       PlaygroundLink,
       {
-        disabled: true,
+        disabled: !0,
         settings,
         tone: "accent",
         variant: "link.standalone",
@@ -351,7 +314,7 @@ function SizeScale({ settings }) {
   )) });
 }
 function MdxSample({ settings }) {
-  const inlineStyle = linkStyle({
+  let inlineStyle = linkStyle({
     settings,
     tone: "accent",
     variant: "link.inline"
@@ -468,25 +431,14 @@ function BlockSamples({ settings }) {
   ] });
 }
 function LinkPlayground() {
-  const [settings, setSettings] = useState(defaultSettings);
-  const [tone, setTone] = useState("accent");
-  const [variant, setVariant] = useState("link.standalone");
-  const [copyState, setCopyState] = useState("idle");
-  const output = useMemo(() => buildOutput(settings), [settings]);
-  const previewStyle = linkStyle({ settings, tone, variant });
-  const updateNumber = (key, value) => {
+  let [settings, setSettings] = useState(defaultSettings), [tone, setTone] = useState("accent"), [variant, setVariant] = useState("link.standalone"), [copyState, setCopyState] = useState("idle"), output = useMemo(() => buildOutput(settings), [settings]), previewStyle = linkStyle({ settings, tone, variant }), updateNumber = (key, value) => {
     setSettings((current) => ({ ...current, [key]: value }));
-  };
-  const updateText = (key, value) => {
+  }, updateText = (key, value) => {
     setSettings((current) => ({ ...current, [key]: value }));
+  }, reset = () => setSettings(defaultSettings), copyOutput = async () => {
+    await navigator.clipboard.writeText(output), setCopyState("copied"), window.setTimeout(() => setCopyState("idle"), 1200);
   };
-  const reset = () => setSettings(defaultSettings);
-  const copyOutput = async () => {
-    await navigator.clipboard.writeText(output);
-    setCopyState("copied");
-    window.setTimeout(() => setCopyState("idle"), 1200);
-  };
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#fafafa] text-foreground-1", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-screen lg:grid-cols-[1fr_24rem]", children: [
+  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-surface-page text-foreground-1", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-screen lg:grid-cols-[1fr_24rem]", children: [
     /* @__PURE__ */ jsx("main", { className: "min-h-screen overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "grid border-l border-t border-stroke-3", children: [
       /* @__PURE__ */ jsx(PreviewBlock, { title: "Link", children: /* @__PURE__ */ jsx(LinkSet, { settings }) }),
       /* @__PURE__ */ jsx(PreviewBlock, { title: "Focused sample", children: /* @__PURE__ */ jsxs("div", { className: "grid justify-items-center gap-5 text-[2rem] leading-none", children: [
@@ -776,7 +728,7 @@ function LinkPlayground() {
               "textarea",
               {
                 className: "min-h-[26rem] resize-none rounded-panel border border-stroke-2 bg-surface-2 p-3 font-mono text-xs leading-5 text-foreground-1 outline-none focus:border-accent-1",
-                readOnly: true,
+                readOnly: !0,
                 value: output
               }
             ),

package/dist/kernel/components/blocks/logo-block.js

@@ -1,39 +1,17 @@
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/blocks/logo-block.tsx
+// src/components/block/logo-block.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_LOGO_MAX_HEIGHT = 24;
-var DEFAULT_LOGO_MAX_WIDTH = 160;
+var DEFAULT_LOGO_MAX_HEIGHT = 24, DEFAULT_LOGO_MAX_WIDTH = 160;
 function isValidLogoAsset(asset) {
-  return typeof asset?.outputPath === "string" && asset.outputPath.trim() !== "";
+  return typeof asset?.outputPath == "string" && asset.outputPath.trim() !== "";
 }
 function fitLogoDimensions({
   asset,
   maxHeight,
   maxWidth
 }) {
-  if (!asset.width || !asset.height) return void 0;
-  const scale = Math.min(maxWidth / asset.width, maxHeight / asset.height, 1);
+  if (!asset.width || !asset.height) return;
+  let scale = Math.min(maxWidth / asset.width, maxHeight / asset.height, 1);
   return {
     height: Math.max(1, Math.round(asset.height * scale)),
     width: Math.max(1, Math.round(asset.width * scale))
@@ -84,24 +62,17 @@ function LogoBlock({
   maxWidth = DEFAULT_LOGO_MAX_WIDTH,
   siteName
 }) {
-  const lightCandidate = logo?.light;
-  const darkCandidate = logo?.dark;
-  const lightLogo = isValidLogoAsset(lightCandidate) ? lightCandidate : darkCandidate;
-  const darkLogo = isValidLogoAsset(darkCandidate) ? darkCandidate : lightLogo;
-  if (!isValidLogoAsset(lightLogo)) return /* @__PURE__ */ jsx(Fragment, { children: siteName });
-  if (!isValidLogoAsset(darkLogo) || darkLogo.outputPath === lightLogo.outputPath) {
-    return /* @__PURE__ */ jsx(
-      LogoBlockImage,
-      {
-        asset: lightLogo,
-        className,
-        maxHeight,
-        maxWidth,
-        siteName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  let lightCandidate = logo?.light, darkCandidate = logo?.dark, lightLogo = isValidLogoAsset(lightCandidate) ? lightCandidate : darkCandidate, darkLogo = isValidLogoAsset(darkCandidate) ? darkCandidate : lightLogo;
+  return isValidLogoAsset(lightLogo) ? !isValidLogoAsset(darkLogo) || darkLogo.outputPath === lightLogo.outputPath ? /* @__PURE__ */ jsx(
+    LogoBlockImage,
+    {
+      asset: lightLogo,
+      className,
+      maxHeight,
+      maxWidth,
+      siteName
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "block dark:hidden", children: /* @__PURE__ */ jsx(
       LogoBlockImage,
       {
@@ -122,7 +93,7 @@ function LogoBlock({
         siteName
       }
     ) })
-  ] });
+  ] }) : /* @__PURE__ */ jsx(Fragment, { children: siteName });
 }
 export {
   LogoBlock

package/dist/kernel/components/blocks/nav-breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SiteData, TreeNode } from '@publish.os/nextjs/types';
+import { S as SiteData, T as TreeNode } from '../../../types-B_b3C0U6.js';
 
 declare function NavBreadcrumb({ currentPath, showRoot, site, tree, }: {
     currentPath?: string;

package/dist/kernel/components/blocks/nav-breadcrumb.js

@@ -1,5 +1,5 @@
-// src/kernel/components/blocks/nav-breadcrumb.tsx
-import { CollapsibleBreadcrumbTrail } from "../ui/breadcrumb-trail.js";
+// src/components/block/navigation/nav-breadcrumb.tsx
+import { CollapsibleBreadcrumbTrail } from "@publish.os/nextjs/kernel/components/ui/breadcrumb-trail";
 import { jsx } from "react/jsx-runtime";
 function titleFor(node) {
   return node.title;
@@ -7,33 +7,25 @@ function titleFor(node) {
 function pathFor(node) {
   if (node.type === "page") return node.path;
   if (node.type === "link") return node.href;
-  if (node.type === "folder") return node.path;
-  if (node.type === "section") return node.path;
-  return void 0;
+  if (node.type === "folder" || node.type === "section") return node.path;
 }
 function rankFor(node) {
-  if (node.type === "page" || node.type === "section") return 2;
-  if (node.type === "folder") return 1;
-  return 0;
+  return node.type === "page" || node.type === "section" ? 2 : node.type === "folder" ? 1 : 0;
 }
 function findCrumbs(nodes, pathname, parents = []) {
-  const matches = [];
-  for (const node of nodes) {
-    const path = pathFor(node);
-    const nextParents = path ? [...parents, { title: titleFor(node), path }] : parents;
-    if (path === pathname) {
-      matches.push({
-        crumbs: nextParents.map((crumb, index) => ({
-          ...crumb,
-          current: index === nextParents.length - 1
-        })),
-        pathLength: path.length,
-        rank: rankFor(node)
-      });
-    }
-    if (node.type === "section" || node.type === "folder") {
-      const childMatch = findCrumbs(node.children, pathname, nextParents);
-      if (childMatch) matches.push(childMatch);
+  let matches = [];
+  for (let node of nodes) {
+    let path = pathFor(node), nextParents = path ? [...parents, { title: titleFor(node), path }] : parents;
+    if (path === pathname && matches.push({
+      crumbs: nextParents.map((crumb, index) => ({
+        ...crumb,
+        current: index === nextParents.length - 1
+      })),
+      pathLength: path.length,
+      rank: rankFor(node)
+    }), node.type === "section" || node.type === "folder") {
+      let childMatch = findCrumbs(node.children, pathname, nextParents);
+      childMatch && matches.push(childMatch);
     }
   }
   return matches.sort(
@@ -41,48 +33,42 @@ function findCrumbs(nodes, pathname, parents = []) {
   )[0] ?? null;
 }
 function groupFallback(tree, pathname) {
-  const groups = tree.map((group) => ({ group, path: pathFor(group) })).filter(
-    (entry) => typeof entry.path === "string"
+  let groups = tree.map((group) => ({ group, path: pathFor(group) })).filter(
+    (entry) => typeof entry.path == "string"
   ).sort((a, b) => b.path.length - a.path.length);
-  for (const { group, path } of groups) {
-    if (pathname.startsWith(`${path}/`)) {
+  for (let { group, path } of groups)
+    if (pathname.startsWith(`${path}/`))
       return [{ title: titleFor(group), path }];
-    }
-  }
   return [];
 }
 function buildCrumbs(site, tree, pathname) {
-  const root = {
+  let root = {
     title: site.name,
     path: "/",
     current: pathname === "/"
   };
   if (pathname === "/") return [root];
-  const treeMatch = findCrumbs(tree, pathname);
-  if (treeMatch) return [root, ...treeMatch.crumbs];
-  return [
+  let treeMatch = findCrumbs(tree, pathname);
+  return treeMatch ? [root, ...treeMatch.crumbs] : [
     root,
     ...groupFallback(tree, pathname).map((crumb) => ({
       ...crumb,
-      current: false
+      current: !1
     }))
   ];
 }
 function NavBreadcrumb({
   currentPath = "/",
-  showRoot = true,
+  showRoot = !0,
   site,
   tree
 }) {
-  const crumbs = buildCrumbs(site, tree, currentPath);
-  const visibleCrumbs = showRoot ? crumbs : crumbs.slice(1);
-  const items = visibleCrumbs.map((crumb) => ({
+  let crumbs = buildCrumbs(site, tree, currentPath), items = (showRoot ? crumbs : crumbs.slice(1)).map((crumb) => ({
     current: crumb.current,
     href: crumb.path,
     title: crumb.title
   }));
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx(CollapsibleBreadcrumbTrail, { items, size: "sm" });
+  return items.length === 0 ? null : /* @__PURE__ */ jsx(CollapsibleBreadcrumbTrail, { items, size: "sm" });
 }
 export {
   NavBreadcrumb