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

package/dist/kernel/components/blocks/sidebar-node.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SidebarNodePrimitiveProps } from '../../../sidebar-types-Bgchdfd6.js';
+import { S as SidebarNodePrimitiveProps } from '../../../sidebar-types-DKpR27II.js';
 import 'react';
-import '../../../types-DHBm7-j6.js';
+import '../../../types-CJWRG05y.js';
 
 declare function SidebarNode({ activeState, activeItemRef, children, contentId, depth, expanded, href, isExpandable, node, onLinkClick, onToggle, parentExpanded, title, }: SidebarNodePrimitiveProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/kernel/components/blocks/sidebar-node.js

@@ -1,5 +1,5 @@
-// src/components/block/navigation/sidebar-node.tsx
-import { FrameworkChevronRightIcon as ChevronRight } from "@publish.os/nextjs/kernel/framework-icons";
+// src/components/block/sidebar/sidebar-node.tsx
+import { CaretRightIcon } from "@phosphor-icons/react/ssr";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import NextLink from "next/link";
@@ -42,12 +42,12 @@ var SIDEBAR_NODE_VARIANT = "base", depthClassByDepth = {
       variant: {
         base: [
           "font-normal text-foreground-2 hover:bg-surface-hover hover:text-foreground-1",
-          "data-[state=child-path-active]:bg-surface-2 data-[state=child-path-active]:font-medium data-[state=child-path-active]:text-foreground-1",
-          "data-[state=path-active]:bg-surface-active data-[state=path-active]:font-medium data-[state=path-active]:text-foreground-1 data-[state=path-active]:shadow-xs"
+          "data-[state=child-path-active]:bg-surface-active data-[state=child-path-active]:text-foreground-1",
+          "data-[state=path-active]:bg-surface-active data-[state=path-active]:font-medium data-[state=path-active]:text-foreground-1"
         ].join(" "),
         minimal: [
           "font-normal text-foreground-2 hover:text-foreground-1 hover:opacity-90",
-          "data-[state=child-path-active]:font-medium data-[state=child-path-active]:text-foreground-1",
+          "data-[state=child-path-active]:text-foreground-1",
           "data-[state=path-active]:font-semibold data-[state=path-active]:text-foreground-1 data-[state=path-active]:[text-shadow:0_0_0_currentColor]"
         ].join(" ")
       }
@@ -78,10 +78,10 @@ function Caret({ active, expanded }) {
         "span",
         {
           className: cn(
-            "block transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+            "block transition-transform duration-300 ease-in-out",
             expanded ? "rotate-90" : "rotate-0"
           ),
-          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", size: 13 })
+          children: /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": "true", size: 13 })
         }
       )
     }
@@ -112,7 +112,7 @@ function RowInner({
   );
 }
 function RowText({ title }) {
-  return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 whitespace-normal break-words text-pretty", children: title });
+  return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 whitespace-normal wrap-break-word text-pretty", children: title });
 }
 function ExternalLinkIndicator() {
   return /* @__PURE__ */ jsx(
@@ -128,6 +128,7 @@ function SidebarLink({
   active,
   children,
   className,
+  external = !1,
   href,
   onClick,
   parentExpanded,
@@ -143,7 +144,7 @@ function SidebarLink({
     tabIndex: parentExpanded ? void 0 : -1,
     ...props
   };
-  return isExternalHref(href) ? /* @__PURE__ */ jsx("a", { href, rel: mergeRel(void 0), target: "_blank", ...commonProps, children }) : /* @__PURE__ */ jsx(NextLink, { href, ...commonProps, children });
+  return external && isExternalHref(href) ? /* @__PURE__ */ jsx("a", { href, rel: mergeRel(void 0), target: "_blank", ...commonProps, children }) : /* @__PURE__ */ jsx(NextLink, { href, ...commonProps, children });
 }
 function SidebarNode({
   activeState,
@@ -206,6 +207,7 @@ function SidebarNode({
         active: isActive,
         "aria-controls": isExpandable ? contentId : void 0,
         "aria-expanded": isExpandable ? expanded : void 0,
+        external: isExternalLinkNode,
         href,
         onClick: onLinkClick,
         parentExpanded,

package/dist/kernel/components/blocks/sidebar.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { a as SidebarTreeNode } from '../../../sidebar-types-Bgchdfd6.js';
-export { b as SidebarActiveState, c as SidebarDepth, S as SidebarNodePrimitiveProps } from '../../../sidebar-types-Bgchdfd6.js';
-import '../../../types-DHBm7-j6.js';
+import { a as SidebarTreeNode } from '../../../sidebar-types-DKpR27II.js';
+export { b as SidebarActiveState, c as SidebarDepth, S as SidebarNodePrimitiveProps } from '../../../sidebar-types-DKpR27II.js';
+import '../../../types-CJWRG05y.js';
 
 type SidebarProps = {
     className?: string;

package/dist/kernel/components/blocks/sidebar.js

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/block/navigation/sidebar.tsx
+// src/components/block/sidebar/sidebar.tsx
 import { SidebarNode } from "@publish.os/nextjs/kernel/components/blocks/sidebar-node";
 import { ScrollArea } from "@publish.os/nextjs/kernel/components/ui/scroll-area";
 import { cn } from "@publish.os/nextjs/utils/cn";
@@ -25,9 +25,13 @@ function isExternalHref(href) {
   return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
 }
 function nodeHref(node) {
-  if (node.type === "link") return node.href;
+  if (node.type === "link" || "href" in node && typeof node.href == "string") return node.href;
   if ("path" in node && typeof node.path == "string") return node.path;
 }
+function nodePath(node) {
+  if (node.type !== "link" && "path" in node && typeof node.path == "string")
+    return node.path;
+}
 function nodeChildren(node) {
   return Array.isArray(node.children) ? node.children : [];
 }
@@ -49,7 +53,7 @@ function createActiveIndex({
 }) {
   let activeIndex = /* @__PURE__ */ new Map();
   function visit(node) {
-    let href = nodeHref(node), exactActive = isExactActivePath(href, currentPath), pathActive = node.type === "page" && isActivePath(href, currentPath), childActive = nodeChildren(node).some(visit), activeState = exactActive ? "path-active" : childActive || pathActive ? "child-path-active" : void 0;
+    let path = nodePath(node), exactActive = isExactActivePath(path, currentPath), pathActive = node.type === "page" && isActivePath(path, currentPath), childActive = nodeChildren(node).some(visit), activeState = exactActive ? "path-active" : childActive || pathActive ? "child-path-active" : void 0;
     return activeIndex.set(node, {
       activeState,
       initiallyExpanded: exactActive || pathActive || childActive
@@ -90,7 +94,7 @@ function ExpandableChildren({
     {
       "aria-hidden": !expanded,
       className: cn(
-        "grid overflow-hidden transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]",
+        "grid overflow-hidden transition-[grid-template-rows] duration-300 ease-in-out",
         expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
       ),
       "data-state": expanded ? "open" : "closed",
@@ -179,18 +183,20 @@ var SidebarTreeItem = memo(function SidebarTreeItem2({
   );
 });
 function Sidebar({ className, currentPath, title, tree }) {
-  let resolvedCurrentPath = usePathname() ?? currentPath ?? "", instanceId = useId(), activeItemRef = useRef(null), activeIndex = useMemo(
+  let resolvedCurrentPath = usePathname() ?? currentPath ?? "", instanceId = useId(), activeItemRef = useRef(null), viewportRef = useRef(null), activeIndex = useMemo(
     () => createActiveIndex({ currentPath: resolvedCurrentPath, tree }),
     [resolvedCurrentPath, tree]
   );
   return useEffect(() => {
-    let scrollPath = resolvedCurrentPath, frame = window.requestAnimationFrame(() => {
-      scrollPath && activeItemRef.current?.scrollIntoView({
-        block: "nearest",
-        inline: "nearest"
-      });
+    let viewport = viewportRef.current, win = viewport?.ownerDocument.defaultView;
+    if (!resolvedCurrentPath || !viewport || !win) return;
+    let frame = win.requestAnimationFrame(() => {
+      let item = activeItemRef.current;
+      if (!item) return;
+      let itemBounds = item.getBoundingClientRect(), viewportBounds = viewport.getBoundingClientRect();
+      itemBounds.top < viewportBounds.top ? viewport.scrollTop += itemBounds.top - viewportBounds.top : itemBounds.bottom > viewportBounds.bottom && (viewport.scrollTop += itemBounds.bottom - viewportBounds.bottom);
     });
-    return () => window.cancelAnimationFrame(frame);
+    return () => win.cancelAnimationFrame(frame);
   }, [resolvedCurrentPath]), /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -209,6 +215,7 @@ function Sidebar({ className, currentPath, title, tree }) {
             mask: { height: 24 },
             scrollbarClassName: "opacity-0 transition-opacity data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
             variant: "gradient",
+            viewportRef,
             children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-px px-2 py-3", children: tree.map((node) => /* @__PURE__ */ jsx(
               SidebarTreeItem,
               {

package/dist/kernel/components/blocks/theme-toggle.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ButtonProps } from '../../../button-CFdx-ohV.js';
+import { B as ButtonProps } from '../../../button-c3WGnxIj.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 import 'react';
@@ -7,4 +7,4 @@ import 'react';
 type ThemeToggleProps = Omit<ButtonProps, "children" | "iconOnly" | "leftIcon" | "loading" | "rightIcon">;
 declare function ThemeToggle({ className, onClick, size, title, type, variant, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
 
-export { ThemeToggle };
+export { ThemeToggle, type ThemeToggleProps };

package/dist/kernel/components/blocks/theme-toggle.js

@@ -1,7 +1,53 @@
 "use client";
 
-// src/components/block/theme-toggle.tsx
-import { ThemeToggle } from "@publish.os/nextjs/kernel/components/ui/theme-toggle";
+// src/components/ui/theme-toggle.tsx
+import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
+import { MonitorIcon, MoonIcon, SunIcon } from "@phosphor-icons/react/ssr";
+import { useTheme } from "next-themes";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var themeOrder = ["system", "light", "dark"];
+function ThemeIcon({ theme }) {
+  return theme === "light" ? /* @__PURE__ */ jsx(SunIcon, { "aria-hidden": "true", size: 16 }) : theme === "dark" ? /* @__PURE__ */ jsx(MoonIcon, { "aria-hidden": "true", size: 16 }) : /* @__PURE__ */ jsx(MonitorIcon, { "aria-hidden": "true", size: 16 });
+}
+function normalizeTheme(theme) {
+  return theme === "light" || theme === "dark" ? theme : "system";
+}
+function ThemeToggle({
+  className,
+  onClick,
+  size = "sm",
+  title,
+  type = "button",
+  variant = "ghost",
+  ...props
+}) {
+  let { theme, setTheme } = useTheme(), [mounted, setMounted] = useState(!1), activeTheme = normalizeTheme(theme), nextTheme = useMemo(() => {
+    let index = themeOrder.indexOf(activeTheme);
+    return themeOrder[(index + 1) % themeOrder.length] ?? "system";
+  }, [activeTheme]);
+  useEffect(() => {
+    setMounted(!0);
+  }, []);
+  let label = mounted ? `Switch to ${nextTheme} theme` : "Theme preference";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": props["aria-label"] ?? label,
+      className,
+      iconOnly: !0,
+      onClick: (event) => {
+        onClick?.(event), event.defaultPrevented || setTheme(nextTheme);
+      },
+      size,
+      title: title ?? label,
+      type,
+      variant,
+      ...props,
+      children: /* @__PURE__ */ jsx(ThemeIcon, { theme: mounted ? activeTheme : "system" })
+    }
+  );
+}
 export {
   ThemeToggle
 };

package/dist/kernel/components/blocks/toc.js

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/block/navigation/toc.tsx
+// src/components/block/toc/toc.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
 import {
   extractMdxHeadings
@@ -135,7 +135,7 @@ function Toc({ className, content, levels = DEFAULT_LEVELS }) {
       "div",
       {
         ref: viewportRef,
-        className: "max-h-[calc(100dvh_-_var(--layout-global-nav-height)_-_3rem)] overflow-y-auto pr-2 [scrollbar-gutter:stable] supports-[top:anchor-size(--global-navbar_height)]:max-h-[calc(100dvh_-_anchor-size(--global-navbar_height,3.5rem)_-_3rem)]",
+        className: "max-h-[calc(100dvh-var(--layout-global-nav-height)-3rem)] overflow-y-auto pr-2 scrollbar-gutter-stable supports-[top:anchor-size(--global-navbar_height)]:max-h-[calc(100dvh-anchor-size(--global-navbar_height,3.5rem)-3rem)]",
         onScroll: updateViewport,
         style: {
           WebkitMaskImage: maskImage,
@@ -177,7 +177,7 @@ function Toc({ className, content, levels = DEFAULT_LEVELS }) {
                     "data-toc-link": "",
                     href: `#${heading.id}`,
                     onClick: () => handleTocClick(heading.id),
-                    children: /* @__PURE__ */ jsx("span", { className: "block min-w-0 text-wrap break-words", children: heading.text })
+                    children: /* @__PURE__ */ jsx("span", { className: "block min-w-0 text-wrap wrap-break-word", children: heading.text })
                   }
                 )
               },

package/dist/kernel/components/mdx/components/blockquote.js

@@ -6,7 +6,7 @@ function Blockquote({ className, ...props }) {
     "blockquote",
     {
       className: cn(
-        "my-6 border-l-2 border-typography-quote-stroke pl-4 text-sm leading-7 text-typography-quote-foreground",
+        "my-6 border-l-2 border-typography-quote-stroke pl-4 text-typography-quote-foreground",
         className
       ),
       ...props

package/dist/kernel/components/mdx/components/callout.d.ts

@@ -1,18 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 declare const calloutVariants: (props?: ({
-    color?: "default" | "accent" | "danger" | "info" | "success" | "warning" | null | undefined;
-    variant?: "outline" | "soft" | "solid" | null | undefined;
+    color?: "neutral" | "info" | "warning" | "danger" | "success" | null | undefined;
+    variant?: "solid" | "soft" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type CalloutProps = VariantProps<typeof calloutVariants> & {
-    children?: ReactNode;
-    className?: string;
+type CalloutProps = Omit<ComponentPropsWithoutRef<"aside">, "color" | "title" | "role" | "style"> & VariantProps<typeof calloutVariants> & {
     icon?: ReactNode;
     title?: ReactNode;
 };
-declare function Callout({ children, className, color, icon, title, variant, }: CalloutProps): react_jsx_runtime.JSX.Element;
+declare function Callout({ children, className, color, icon, title, variant, ...props }: CalloutProps): react_jsx_runtime.JSX.Element;
 
 export { Callout, type CalloutProps, calloutVariants };

package/dist/kernel/components/mdx/components/callout.js

@@ -1,29 +1,55 @@
 // src/components/mdx/callout.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var calloutVariants = cva(
-  "my-6 rounded-callout border p-4 text-sm leading-6 [--callout-emphasis-foreground:var(--typography-heading-foreground)] [--callout-foreground:var(--typography-body-foreground)] [--callout-solid-foreground:var(--surface-1)] [--callout-solid-surface:var(--foreground-1)] [--callout-stroke:var(--typography-rule-stroke)] [--callout-surface:var(--surface-2)] [--callout-title-foreground:var(--typography-heading-foreground)]",
+  "not-markdown-prose my-6 grid min-w-0 items-start gap-2.5 rounded-callout p-3 [&_[data-slot=callout-icon]_svg]:size-[1.125em]",
   {
     variants: {
       color: {
-        accent: "[--callout-emphasis-foreground:var(--accent-1)] [--callout-solid-foreground:var(--accent-1-foreground)] [--callout-solid-surface:var(--accent-1)] [--callout-stroke:var(--accent-3-stroke)] [--callout-surface:var(--accent-3)]",
-        danger: "[--callout-emphasis-foreground:var(--danger-1100)] [--callout-foreground:var(--danger-1100)] [--callout-solid-foreground:var(--danger-100)] [--callout-solid-surface:var(--danger-900)] [--callout-stroke:var(--danger-600)] [--callout-surface:var(--danger-200)]",
-        default: "",
-        info: "[--callout-emphasis-foreground:var(--info-1100)] [--callout-foreground:var(--info-1100)] [--callout-solid-foreground:var(--info-100)] [--callout-solid-surface:var(--info-900)] [--callout-stroke:var(--info-600)] [--callout-surface:var(--info-200)]",
-        success: "[--callout-emphasis-foreground:var(--success-1100)] [--callout-foreground:var(--success-1100)] [--callout-solid-foreground:var(--success-100)] [--callout-solid-surface:var(--success-900)] [--callout-stroke:var(--success-600)] [--callout-surface:var(--success-200)]",
-        warning: "[--callout-emphasis-foreground:var(--warning-1100)] [--callout-foreground:var(--warning-1100)] [--callout-solid-foreground:var(--warning-100)] [--callout-solid-surface:var(--warning-900)] [--callout-stroke:var(--warning-600)] [--callout-surface:var(--warning-200)]"
+        neutral: "text-foreground-2 selection:bg-surface-4 selection:text-foreground-1",
+        info: "text-info-1200 selection:bg-info-400 selection:text-info-1200",
+        warning: "text-warning-1200 selection:bg-warning-400 selection:text-warning-1200",
+        danger: "text-danger-1200 selection:bg-danger-400 selection:text-danger-1200",
+        success: "text-success-1200 selection:bg-success-400 selection:text-success-1200"
       },
       variant: {
-        outline: "border-[var(--callout-stroke)] bg-transparent text-[var(--callout-foreground)]",
-        soft: "border-[var(--callout-stroke)] bg-[var(--callout-surface)] text-[var(--callout-foreground)]",
-        solid: "border-[var(--callout-solid-surface)] bg-[var(--callout-solid-surface)] text-[var(--callout-solid-foreground)]"
+        solid: "border-0 border-shadow-3",
+        soft: "border-0 shadow-none",
+        outline: "border bg-transparent shadow-none"
       }
     },
-    defaultVariants: {
-      color: "default",
-      variant: "soft"
-    }
+    compoundVariants: [
+      { color: "neutral", variant: "solid", className: "bg-surface-3" },
+      { color: "info", variant: "solid", className: "bg-info-300" },
+      { color: "warning", variant: "solid", className: "bg-warning-300" },
+      { color: "danger", variant: "solid", className: "bg-danger-300" },
+      { color: "success", variant: "solid", className: "bg-success-300" },
+      { color: "neutral", variant: "soft", className: "bg-surface-3/50" },
+      { color: "info", variant: "soft", className: "bg-info-300/50" },
+      { color: "warning", variant: "soft", className: "bg-warning-300/50" },
+      { color: "danger", variant: "soft", className: "bg-danger-300/50" },
+      { color: "success", variant: "soft", className: "bg-success-300/50" },
+      { color: "neutral", variant: "outline", className: "border-stroke-3" },
+      { color: "info", variant: "outline", className: "border-info-1100/25" },
+      {
+        color: "warning",
+        variant: "outline",
+        className: "border-warning-1100/25"
+      },
+      {
+        color: "danger",
+        variant: "outline",
+        className: "border-danger-1100/25"
+      },
+      {
+        color: "success",
+        variant: "outline",
+        className: "border-success-1100/25"
+      }
+    ],
+    defaultVariants: { color: "neutral", variant: "solid" }
   }
 );
 function Callout({
@@ -32,42 +58,47 @@ function Callout({
   color,
   icon,
   title,
-  variant
+  variant,
+  ...props
 }) {
-  let resolvedVariant = variant ?? "soft", hasIcon = icon != null && icon !== !1, hasTitle = title != null && title !== !1;
-  return /* @__PURE__ */ jsx(
+  let titleId = useId(), hasTitle = title != null && title !== !1;
+  return /* @__PURE__ */ jsxs(
     "aside",
     {
-      "data-color": color ?? "default",
-      "data-variant": resolvedVariant,
-      className: cn(calloutVariants({ color, variant }), className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn(hasIcon ? "grid grid-cols-[auto_1fr] gap-x-3" : ""), children: [
-        hasIcon ? /* @__PURE__ */ jsx(
+      ...props,
+      "aria-labelledby": hasTitle ? titleId : props["aria-labelledby"],
+      className: cn(
+        calloutVariants({ color, variant }),
+        icon ? "grid-cols-[auto_minmax(0,1fr)]" : "grid-cols-1",
+        className
+      ),
+      "data-color": color ?? "neutral",
+      "data-slot": "callout",
+      "data-variant": variant ?? "solid",
+      role: "note",
+      children: [
+        icon ? /* @__PURE__ */ jsx(
           "span",
           {
             "aria-hidden": "true",
-            className: cn(
-              "mt-[0.1875rem] flex size-4 shrink-0 items-center justify-center",
-              resolvedVariant === "solid" ? "text-inherit" : "text-[var(--callout-emphasis-foreground)]",
-              "[&_svg]:size-4 [&_svg]:shrink-0"
-            ),
+            className: "flex h-lh shrink-0 items-center justify-center [&_svg]:shrink-0",
+            "data-slot": "callout-icon",
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-1", "data-slot": "callout-body", children: [
           hasTitle ? /* @__PURE__ */ jsx(
-            "p",
+            "div",
             {
-              className: cn(
-                "font-medium",
-                resolvedVariant === "solid" ? "text-inherit" : "text-[var(--callout-title-foreground)]"
-              ),
+              className: "min-w-0 wrap-break-word font-semibold text-pretty",
+              "data-slot": "callout-title",
+              id: titleId,
               children: title
             }
           ) : null,
-          /* @__PURE__ */ jsx("div", { className: cn(hasTitle ? "mt-1" : ""), children })
+          children != null ? /* @__PURE__ */ jsx("div", { className: "min-w-0 wrap-break-word", "data-slot": "callout-content", children }) : null
         ] })
-      ] })
+      ]
     }
   );
 }

package/dist/kernel/components/mdx/components/code-block.d.ts

@@ -1,9 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BundledTheme } from 'shiki';
 
-type CodeBlockProps = React.ComponentPropsWithoutRef<"pre"> & {
+type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<"div">, "style"> & {
     code?: string;
     language?: string;
+    lightTheme?: BundledTheme;
+    darkTheme?: BundledTheme;
 };
-declare function CodeBlock({ children, code, language, ...props }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+declare function CodeBlock({ children, className, code, language, lightTheme, darkTheme, title, ...props }: CodeBlockProps): Promise<react_jsx_runtime.JSX.Element>;
 
 export { CodeBlock, type CodeBlockProps };

package/dist/kernel/components/mdx/components/code-block.js

@@ -1,13 +1,114 @@
-// src/components/mdx/code-block.tsx
-import { Pre } from "@publish.os/nextjs/kernel/components/mdx/components/pre";
-import { jsx } from "react/jsx-runtime";
-function CodeBlock({
+// src/components/mdx/code-block/code-block.tsx
+import { CopyCodeButton } from "@publish.os/nextjs/kernel/components/mdx/components/copy-code-button";
+import { cn } from "@publish.os/nextjs/utils/cn";
+import { isValidElement } from "react";
+import {
+  bundledLanguages,
+  codeToHtml
+} from "shiki";
+import { jsx, jsxs } from "react/jsx-runtime";
+var copyButtonRadius = "rounded-[max(calc(var(--radius-codeblock)-0.5rem),0px)]";
+function codeChild(children) {
+  if (!isValidElement(children))
+    return { code: typeof children == "string" ? children : "" };
+  let { className, title } = children.props, language = /(?:^|\s)language-([^\s]+)/.exec(className ?? "")?.[1], value = children.props.children;
+  return { code: typeof value == "string" ? value : "", language, title };
+}
+function breakableTitle(title) {
+  let parts = [], start = 0;
+  for (let separator of title.matchAll(/[/\\]/g)) {
+    let end = separator.index + 1;
+    parts.push(title.slice(start, end), /* @__PURE__ */ jsx("wbr", {}, end)), start = end;
+  }
+  return parts.push(title.slice(start)), parts;
+}
+function isCssDeclarationFragment(code) {
+  let source = code.replace(/^(?:\s|\/\*[\s\S]*?\*\/)*\s*/, "");
+  if (!/^(?:--[\w-]+|[a-zA-Z-]+)\s*:/.test(source)) return !1;
+  let firstBlock = source.indexOf("{"), firstDeclarationEnd = source.indexOf(";");
+  return firstBlock === -1 || firstDeclarationEnd !== -1 && firstDeclarationEnd < firstBlock;
+}
+async function CodeBlock({
   children,
+  className,
   code,
   language,
+  lightTheme = "github-light",
+  darkTheme = "github-dark",
+  title,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Pre, { "data-language": language, ...props, children: /* @__PURE__ */ jsx("code", { children: code ?? children }) });
+  let child = codeChild(children), displayedCode = code ?? child.code, displayLanguage = language ?? child.language, displayTitle = title ?? child.title, token = displayLanguage?.toLowerCase() ?? "txt", highlightedLanguage = Object.hasOwn(bundledLanguages, token) ? token : "txt", html = await codeToHtml(displayedCode.replace(/\r?\n$/, ""), {
+    lang: highlightedLanguage,
+    themes: { light: lightTheme, dark: darkTheme },
+    defaultColor: !1,
+    transformers: highlightedLanguage === "css" && isCssDeclarationFragment(displayedCode) ? [
+      {
+        preprocess(source) {
+          return `:root {
+${source}
+}`;
+        },
+        tokens(lines) {
+          return lines.slice(1, -1);
+        }
+      }
+    ] : []
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "not-markdown-prose relative my-6 min-w-0 overflow-hidden rounded-codeblock border border-typography-pre-stroke bg-typography-pre-surface text-typography-pre-foreground",
+        className
+      ),
+      "data-slot": "code-block",
+      ...props,
+      children: [
+        displayTitle ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex min-h-11 min-w-0 items-center gap-3 border-b border-typography-pre-stroke bg-surface-2 py-2 ps-4 pe-2",
+            "data-slot": "code-block-header",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "min-w-0 flex-1 [overflow-wrap:anywhere] text-sm font-medium leading-5 text-foreground-2",
+                  dir: "auto",
+                  children: breakableTitle(displayTitle)
+                }
+              ),
+              /* @__PURE__ */ jsx(CopyCodeButton, { className: copyButtonRadius, code: displayedCode })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 items-start gap-2 py-2 ps-4 pe-2",
+              displayTitle && "py-3 pe-4"
+            ),
+            "data-slot": "code-block-content",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "code-block-highlight min-w-0 flex-1 overflow-x-auto overscroll-x-contain font-mono text-sm leading-6 [&_pre]:m-0 [&_pre]:min-w-max [&_pre]:overflow-visible [&_pre]:bg-transparent! [&_pre]:p-0 [&_pre]:text-inherit [&_pre]:font-inherit [&_pre]:outline-none [&_code]:block [&_code]:font-inherit",
+                    !displayTitle && "[&_pre]:py-1"
+                  ),
+                  dangerouslySetInnerHTML: { __html: html }
+                }
+              ),
+              displayTitle ? null : /* @__PURE__ */ jsx(CopyCodeButton, { className: copyButtonRadius, code: displayedCode })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   CodeBlock

package/dist/kernel/components/mdx/components/copy-code-button.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function CopyCodeButton({ className, code, }: {
+    className?: string;
+    code: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { CopyCodeButton };