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

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

@@ -1,194 +1,136 @@
-"use client";
-
-// src/components/block/navigation/toc.tsx
-import { cn } from "@publish.os/nextjs/utils/cn";
+// src/components/block/toc/toc.tsx
 import {
-  extractMdxHeadings
-} from "@publish.os/nextjs/utils/heading-ids";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_LEVELS = [2, 3], ACTIVATION_OFFSET = 96, BOTTOM_THRESHOLD = 2, SCROLL_KEYS = /* @__PURE__ */ new Set([
-  " ",
-  "ArrowDown",
-  "ArrowUp",
-  "End",
-  "Home",
-  "PageDown",
-  "PageUp"
-]);
-function documentIsAtBottom() {
-  let root = document.documentElement;
-  return Math.ceil(window.scrollY + window.innerHeight) >= root.scrollHeight - BOTTOM_THRESHOLD;
+  TocClientProvider,
+  TocDesktop,
+  TocLinksSlot,
+  TocMobile,
+  TocMobileHeader,
+  TocTitle
+} from "@publish.os/nextjs/kernel/components/blocks/toc-client";
+import { cn } from "@publish.os/nextjs/utils/cn";
+
+// src/components/block/toc/extract-headings.ts
+import remarkGfm from "remark-gfm";
+import remarkMdx from "remark-mdx";
+import remarkParse from "remark-parse";
+import { unified } from "unified";
+
+// src/components/mdx/heading-string.ts
+var SELF_CLOSING_TAG_RE = /<[^>]+\/>/g, PAIRED_TAG_RE = /<\/?\w[^>]*>/g, MDX_BOLD_RE = /\*\*(.*?)\*\*/g, MDX_ITALIC_RE = /\*(.*?)\*/g, MDX_UNDERLINE_BOLD_RE = /__(.*?)__/g, MDX_UNDERLINE_ITALIC_RE = /_(.*?)_/g, MDX_STRIKETHROUGH_RE = /~~(.*?)~~/g, MDX_INLINE_CODE_RE = /`(.*?)`/g, MDX_LINK_RE = /\[(.*?)\]\(.*?\)/g, NON_ALPHANUMERIC_RE = /[^a-z0-9]+/g, LEADING_TRAILING_HYPHEN_RE = /^-+|-+$/g, LEADING_DIGIT_RE = /^(\d)/;
+function cleanHeadingString(input) {
+  return input.replace(SELF_CLOSING_TAG_RE, "").replace(PAIRED_TAG_RE, "").replace(MDX_BOLD_RE, "$1").replace(MDX_ITALIC_RE, "$1").replace(MDX_UNDERLINE_BOLD_RE, "$1").replace(MDX_UNDERLINE_ITALIC_RE, "$1").replace(MDX_STRIKETHROUGH_RE, "$1").replace(MDX_INLINE_CODE_RE, "$1").replace(MDX_LINK_RE, "$1").trim();
 }
-function resolveActiveHeading(elements) {
-  if (documentIsAtBottom()) return elements.at(-1)?.id ?? "";
-  let nextActiveId = elements[0]?.id ?? "";
-  for (let element of elements)
-    if (element.getBoundingClientRect().top <= ACTIVATION_OFFSET)
-      nextActiveId = element.id;
-    else
-      break;
-  return nextActiveId;
+function headingStringToHTMLId(input) {
+  let text = cleanHeadingString(input);
+  return text ? text.toLowerCase().replace(NON_ALPHANUMERIC_RE, "-").replace(LEADING_TRAILING_HYPHEN_RE, "").replace(LEADING_DIGIT_RE, "id-$1") || "heading" : "empty-heading";
 }
-function useTocActiveState(headingIds) {
-  let [activeId, setActiveId] = useState(""), [indicatorStyle, setIndicatorStyle] = useState({
-    height: 0,
-    transform: 0
-  }), [scrollMask, setScrollMask] = useState({
-    bottom: !1,
-    top: !1
-  }), clickedIdRef = useRef(null), contentRef = useRef(null), frameRef = useRef(null), viewportRef = useRef(null), clearClickedId = useCallback(() => {
-    clickedIdRef.current = null;
-  }, []), updateActiveHeading = useCallback(() => {
-    if (clickedIdRef.current) {
-      setActiveId(
-        (current) => current === clickedIdRef.current ? current : clickedIdRef.current ?? ""
-      );
-      return;
-    }
-    let elements = headingIds.map((id) => document.getElementById(id)).filter((element) => !!element);
-    if (elements.length === 0) return;
-    let nextActiveId = resolveActiveHeading(elements);
-    setActiveId(
-      (current) => current === nextActiveId ? current : nextActiveId
-    );
-  }, [headingIds]), updateIndicator = useCallback(() => {
-    let container = contentRef.current;
-    if (!container || !activeId) {
-      setIndicatorStyle({ height: 0, transform: 0 });
-      return;
-    }
-    let activeLink = Array.from(
-      container.querySelectorAll("[data-toc-link]")
-    ).find((link) => link.dataset.tocId === activeId);
-    if (!activeLink) {
-      setIndicatorStyle({ height: 0, transform: 0 });
-      return;
-    }
-    let containerRect = container.getBoundingClientRect(), activeRect = activeLink.getBoundingClientRect(), nextStyle = {
-      height: activeRect.height,
-      transform: activeRect.top - containerRect.top
-    };
-    setIndicatorStyle(
-      (current) => current.height === nextStyle.height && current.transform === nextStyle.transform ? current : nextStyle
-    );
-  }, [activeId]), updateViewport = useCallback(() => {
-    updateIndicator();
-    let viewport = viewportRef.current;
-    if (!viewport) return;
-    let hasOverflow = viewport.scrollHeight > viewport.clientHeight + 1, nextMask = {
-      bottom: hasOverflow && viewport.scrollTop + viewport.clientHeight < viewport.scrollHeight - 1,
-      top: hasOverflow && viewport.scrollTop > 0
-    };
-    setScrollMask(
-      (current) => current.top === nextMask.top && current.bottom === nextMask.bottom ? current : nextMask
-    );
-  }, [updateIndicator]);
-  useEffect(() => {
-    let scheduleUpdate = () => {
-      frameRef.current === null && (frameRef.current = window.requestAnimationFrame(() => {
-        frameRef.current = null, updateActiveHeading(), updateViewport();
-      }));
-    }, handleKeyDown = (event) => {
-      SCROLL_KEYS.has(event.key) && clearClickedId();
-    };
-    return scheduleUpdate(), window.addEventListener("scroll", scheduleUpdate, { passive: !0 }), window.addEventListener("resize", scheduleUpdate), window.addEventListener("hashchange", scheduleUpdate), window.addEventListener("wheel", clearClickedId, { passive: !0 }), window.addEventListener("touchstart", clearClickedId, { passive: !0 }), window.addEventListener("keydown", handleKeyDown), () => {
-      window.removeEventListener("scroll", scheduleUpdate), window.removeEventListener("resize", scheduleUpdate), window.removeEventListener("hashchange", scheduleUpdate), window.removeEventListener("wheel", clearClickedId), window.removeEventListener("touchstart", clearClickedId), window.removeEventListener("keydown", handleKeyDown), frameRef.current !== null && (window.cancelAnimationFrame(frameRef.current), frameRef.current = null);
-    };
-  }, [clearClickedId, updateActiveHeading, updateViewport]), useEffect(() => {
-    updateViewport();
-  }, [updateViewport]);
-  let handleTocClick = useCallback((id) => {
-    clickedIdRef.current = id, setActiveId(id);
-  }, []);
-  return {
-    activeId,
-    contentRef,
-    handleTocClick,
-    indicatorStyle,
-    scrollMask,
-    updateViewport,
-    viewportRef
+function createHeadingStringIdGenerator() {
+  let nextSuffix = /* @__PURE__ */ new Map(), usedIds = /* @__PURE__ */ new Set();
+  return (input) => {
+    let baseId = headingStringToHTMLId(input);
+    if (baseId === "empty-heading") return baseId;
+    let suffix = nextSuffix.get(baseId) ?? 0, id = suffix === 0 ? baseId : `${baseId}-${suffix}`;
+    for (; usedIds.has(id); )
+      suffix += 1, id = `${baseId}-${suffix}`;
+    return nextSuffix.set(baseId, suffix + 1), usedIds.add(id), id;
   };
 }
-function Toc({ className, content, levels = DEFAULT_LEVELS }) {
-  let headings = useMemo(
-    () => extractMdxHeadings(content, levels),
-    [content, levels]
-  ), headingIds = useMemo(
-    () => headings.map((heading) => heading.id),
-    [headings]
-  ), {
-    activeId,
-    contentRef,
-    handleTocClick,
-    indicatorStyle,
-    scrollMask,
-    updateViewport,
-    viewportRef
-  } = useTocActiveState(headingIds);
-  if (headings.length <= 1) return null;
-  let maskImage = scrollMask.top || scrollMask.bottom ? `linear-gradient(to bottom, ${scrollMask.top ? "transparent, black 14px" : "black 0, black 14px"}, ${scrollMask.bottom ? "black calc(100% - 14px), transparent" : "black calc(100% - 14px), black 100%"})` : void 0;
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": "On this page", className: cn("text-sm", className), children: [
-    /* @__PURE__ */ jsx("p", { className: "mb-3 px-3 text-[11px] font-semibold uppercase leading-none tracking-wide text-foreground-3", children: "On this page" }),
+
+// src/components/block/toc/extract-headings.ts
+var parser = unified().use(remarkParse).use(remarkMdx).use(remarkGfm);
+function nodeText(node) {
+  return node.type === "text" || node.type === "inlineCode" ? typeof node.value == "string" ? node.value : "" : node.type === "image" || node.type === "imageReference" ? node.alt ?? "" : node.type === "break" || node.name === "br" ? " " : node.type === "mdxTextExpression" || node.type === "mdxFlowExpression" ? "" : (node.children ?? []).map(nodeText).join("");
+}
+function extractTocHeadings(content, levels) {
+  let [minDepth, maxDepth] = levels, headingId = createHeadingStringIdGenerator(), headings = [], tree = parser.parse(content);
+  function visit(node) {
+    if (node.type === "heading" && node.depth) {
+      let text = nodeText(node).trim();
+      if (text) {
+        let id = headingId(text);
+        node.depth >= minDepth && node.depth <= maxDepth && headings.push({ id, level: node.depth, text });
+      }
+    }
+    for (let child of node.children ?? []) visit(child);
+  }
+  return visit(tree), headings;
+}
+
+// src/components/block/toc/toc.tsx
+import { Fragment, jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
+var DEFAULT_LEVELS = [2, 3];
+function TocRoot({
+  className,
+  content = "",
+  desktopClassName,
+  desktopListClassName,
+  levels = DEFAULT_LEVELS,
+  listClassName,
+  mobileClassName,
+  mobileQuery = "(max-width: 1279px)",
+  readingOffset,
+  title = "On this page",
+  children
+}) {
+  let headings = extractTocHeadings(content, levels);
+  return headings.length <= 1 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      "div",
+      TocClientProvider,
       {
-        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)]",
-        onScroll: updateViewport,
-        style: {
-          WebkitMaskImage: maskImage,
-          maskImage
-        },
-        children: /* @__PURE__ */ jsxs("div", { ref: contentRef, className: "relative min-w-0 py-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1 left-0 top-1 w-px rounded-full bg-stroke-3" }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-hidden": "true",
-              className: "absolute left-0 w-px rounded-full bg-accent-1 transition-all duration-300 ease-out will-change-transform",
-              style: {
-                height: indicatorStyle.height,
-                transform: `translateY(${indicatorStyle.transform}px) scaleY(${activeId ? 1 : 0.5})`,
-                transformOrigin: "top"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("ol", { className: "flex min-w-0 flex-col gap-0.5 pl-3", children: headings.map((heading, index) => {
-            let active = activeId === heading.id;
-            return /* @__PURE__ */ jsx(
-              "li",
-              {
-                style: {
-                  marginLeft: Math.max(heading.level - levels[0], 0) * 12,
-                  marginTop: heading.level === levels[0] && index > 0 ? 4 : 0
-                },
-                children: /* @__PURE__ */ jsx(
-                  "a",
-                  {
-                    "aria-current": active ? "location" : void 0,
-                    className: cn(
-                      "block rounded-button px-2 py-1 text-[13px] leading-snug text-foreground-3 no-underline transition-[background-color,color,font-weight] duration-200 hover:bg-surface-hover hover:text-foreground-1 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke",
-                      active && "bg-surface-active font-medium text-accent-1 shadow-xs"
-                    ),
-                    "data-state": active ? "heading-active" : void 0,
-                    "data-toc-id": heading.id,
-                    "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 })
-                  }
-                )
-              },
-              heading.id
-            );
-          }) })
+        className: cn("text-xs leading-5", className),
+        desktopClassName: cn("hidden xl:block", desktopClassName),
+        desktopListClassName,
+        headings,
+        levels,
+        listClassName,
+        mobileClassName: cn("xl:hidden", mobileClassName),
+        mobileQuery,
+        readingOffset,
+        title,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TocDesktop, {}),
+          /* @__PURE__ */ jsx(TocMobile, {})
         ] })
       }
-    )
+    ),
+    /* @__PURE__ */ jsxs("noscript", { children: [
+      /* @__PURE__ */ jsx("style", { children: "[data-toc-mobile-trigger]{display:none}" }),
+      /* @__PURE__ */ jsx(
+        "nav",
+        {
+          "aria-label": title,
+          className: cn(
+            "xl:hidden max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain border-b border-stroke-3 px-6 py-4 text-xs leading-5",
+            mobileClassName
+          ),
+          children: /* @__PURE__ */ jsx("ol", { className: cn("space-y-1", listClassName), children: headings.map((heading) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: heading.level === levels[0] + 1 ? "ps-3" : void 0,
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  className: "block min-h-6 whitespace-normal break-words text-foreground-3 no-underline hover:text-foreground-1 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke",
+                  href: `#${heading.id}`,
+                  children: heading.text
+                }
+              )
+            },
+            heading.id
+          )) })
+        }
+      )
+    ] })
   ] });
 }
+var Toc = Object.assign(TocRoot, {
+  Desktop: TocDesktop,
+  Links: TocLinksSlot,
+  Mobile: TocMobile,
+  MobileHeader: TocMobileHeader,
+  Root: TocRoot,
+  Title: TocTitle
+});
 export {
   Toc
 };

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

@@ -1,12 +1,12 @@
 // src/components/mdx/blockquote.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function Blockquote({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "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 { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "@publish.os/nextjs/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 "@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 "@publish.os/nextjs/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 };