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

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

@@ -1,194 +1,136 @@
-"use client";
-
 // src/components/block/toc/toc.tsx
-import { cn } from "@publish.os/nextjs/utils/cn";
 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 wrap-break-word", 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.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 
 type BlockquoteProps = React.ComponentPropsWithoutRef<"blockquote">;
-declare function Blockquote({ className, ...props }: BlockquoteProps): react_jsx_runtime.JSX.Element;
+declare function Blockquote({ className, ...props }: BlockquoteProps): react.JSX.Element;
 
 export { Blockquote, type BlockquoteProps };

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

@@ -1,6 +1,6 @@
 // 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",

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

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 declare const calloutVariants: (props?: ({
     color?: "neutral" | "info" | "warning" | "danger" | "success" | null | undefined;
@@ -11,6 +11,6 @@ type CalloutProps = Omit<ComponentPropsWithoutRef<"aside">, "color" | "title" |
     icon?: ReactNode;
     title?: ReactNode;
 };
-declare function Callout({ children, className, color, icon, title, variant, ...props }: CalloutProps): react_jsx_runtime.JSX.Element;
+declare function Callout({ children, className, color, icon, title, variant, ...props }: CalloutProps): react.JSX.Element;
 
 export { Callout, type CalloutProps, calloutVariants };

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

@@ -2,7 +2,7 @@
 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";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 var calloutVariants = cva(
   "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]",
   {

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

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

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

@@ -1,12 +1,12 @@
 // src/components/mdx/code-block/code-block.tsx
-import { CopyCodeButton } from "@publish.os/nextjs/kernel/components/mdx/components/copy-code-button";
+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 "react/jsx-runtime";
+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))

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

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

package/dist/kernel/components/mdx/components/copy-code-button.js

@@ -1,12 +1,12 @@
 "use client";
 
 // src/components/mdx/code-block/copy-code-button.tsx
-import { AnimatedIconSwap } from "@publish.os/nextjs/kernel/components/blocks/animated-icon-swap";
-import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
+import { AnimatedIconSwap } from "@components/blocks/animated-icon-swap";
+import { Button } from "@components/ui/button";
 import { CheckIcon, CopyIcon } from "@phosphor-icons/react/ssr";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 function CopyCodeButton({
   className,
   code
@@ -30,9 +30,10 @@ function CopyCodeButton({
     {
       "aria-label": copied ? "Copied code" : "Copy code",
       className: cn(
-        "relative z-content touch-manipulation after:absolute after:-inset-2 after:content-[''] motion-reduce:transition-none",
+        "relative z-content touch-manipulation after:absolute after:-inset-2 after:content-['']",
         className
       ),
+      "data-copied": copied ? "true" : void 0,
       "data-slot": "copy-code-button",
       iconOnly: !0,
       onClick: copy,

package/dist/kernel/components/mdx/components/figure-caption.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 
-type FigureCaptionProps = React.ComponentPropsWithoutRef<"figcaption">;
-declare function FigureCaption({ className, ...props }: FigureCaptionProps): react_jsx_runtime.JSX.Element;
+type FigureCaptionProps = React.ComponentProps<"figcaption">;
+declare function FigureCaption({ className, ...props }: FigureCaptionProps): react.JSX.Element;
 
 export { FigureCaption, type FigureCaptionProps };

package/dist/kernel/components/mdx/components/figure-caption.js

@@ -1,12 +1,13 @@
 // src/components/mdx/figure/figure-caption.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function FigureCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "figcaption",
     {
+      "data-slot": "figure-caption",
       className: cn(
-        "mt-2 text-sm leading-6 text-typography-caption-foreground",
+        "my-2 px-1 text-start text-xs leading-relaxed text-foreground-3 first:mt-0 last:mb-0 [&>p]:my-0 [&>p]:text-inherit [&>p+p]:mt-2",
         className
       ),
       ...props

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

@@ -1,10 +1,14 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
+import { FigureCaption } from './figure-caption.js';
 
-type FigureProps = React.ComponentPropsWithoutRef<"figure"> & {
+type FigureProps = React.ComponentProps<"figure"> & {
+    /** A fallback caption after the children. An authored caption takes precedence. */
     caption?: ReactNode;
-    frame?: boolean | "default" | "none";
 };
-declare function Figure({ caption, children, className, ...props }: FigureProps): react_jsx_runtime.JSX.Element;
+declare function Figure({ caption, children, className, ...props }: FigureProps): react.JSX.Element;
+declare namespace Figure {
+    var Caption: typeof FigureCaption;
+}
 
 export { Figure, type FigureProps };

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

@@ -1,26 +1,36 @@
 // src/components/mdx/figure/figure.tsx
-import { FigureCaption } from "@publish.os/nextjs/kernel/components/mdx/components/figure-caption";
+import { FigureCaption } from "@components/mdx/components/figure-caption";
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { Children, isValidElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement } from "react";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
+function containsCaption(children) {
+  return Children.toArray(children).some(
+    (child) => isValidElement(child) && (child.type === "figcaption" || child.type === FigureCaption || child.type === Fragment && containsCaption(child.props.children))
+  );
+}
 function Figure({
   caption,
   children,
   className,
   ...props
 }) {
-  let authoredCaption = caption, mediaChildren = [];
-  return Children.forEach(children, (child) => {
-    if (isValidElement(child) && child.type === "figcaption") {
-      authoredCaption = child.props.children;
-      return;
+  let showFallbackCaption = caption != null && caption !== !1 && !containsCaption(children);
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn(
+        "not-markdown-prose my-8 [&>*:has(+figcaption)]:mb-0 [&>figcaption+*]:mt-0",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showFallbackCaption ? /* @__PURE__ */ jsx(FigureCaption, { children: caption }) : null
+      ]
     }
-    mediaChildren.push(child);
-  }), /* @__PURE__ */ jsxs("figure", { className: cn("not-markdown-prose my-8", className), ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-3", children: mediaChildren }),
-    authoredCaption ? /* @__PURE__ */ jsx(FigureCaption, { className: "mx-auto max-w-prose text-center", children: authoredCaption }) : null
-  ] });
+  );
 }
+Figure.Caption = FigureCaption;
 export {
   Figure
 };

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

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 
 type FootnotesProps = React.ComponentPropsWithoutRef<"section">;
-declare function Footnotes({ className, ...props }: FootnotesProps): react_jsx_runtime.JSX.Element;
+declare function Footnotes({ className, ...props }: FootnotesProps): react.JSX.Element;
 
 export { Footnotes, type FootnotesProps };

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

@@ -1,6 +1,6 @@
 // src/components/mdx/footnotes.tsx
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@publish.os/nextjs/jsx-runtime";
 function Footnotes({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "section",

package/dist/kernel/components/mdx/components/heading-copy-link.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
 
 declare function headingCopyUrl({ href, id }: {
@@ -18,6 +18,6 @@ declare function HeadingCopyLink({ className, id, children, iconOnly, }: {
     id: string;
     children?: ReactNode;
     iconOnly?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 export { HeadingCopyLink, headingCopyUrl };

package/dist/kernel/components/mdx/components/heading-copy-link.js

@@ -3,7 +3,7 @@
 // src/components/mdx/heading-copy-link.tsx
 import { LinkIcon } from "@phosphor-icons/react/ssr";
 import { cn } from "@publish.os/nextjs/utils/cn";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 function headingCopyUrl({ href, id }) {
   let url = new URL(href);
   return url.hash = id, url.toString();

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
 type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
@@ -8,6 +8,6 @@ type HeadingProps<T extends HeadingElement> = {
     className?: string;
 };
 
-declare function Heading<T extends HeadingElement>({ as: Tag, children, className, id, ...props }: HeadingProps<T>): react_jsx_runtime.JSX.Element;
+declare function Heading<T extends HeadingElement>({ as: Tag, children, className, id, ...props }: HeadingProps<T>): react.JSX.Element;
 
 export { Heading };

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

@@ -1,12 +1,12 @@
 // src/components/mdx/heading.tsx
-import { HeadingCopyLink } from "@publish.os/nextjs/kernel/components/mdx/components/heading-copy-link";
+import { HeadingCopyLink } from "@components/mdx/components/heading-copy-link";
 import { cn } from "@publish.os/nextjs/utils/cn";
 import { headingToHTMLId } from "@publish.os/nextjs/utils/heading-ids";
 import {
   Children,
   isValidElement
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
 function isBrElement(node) {
   return isValidElement(node) && node.type === "br";
 }
@@ -33,7 +33,10 @@ function Heading({
   id,
   ...props
 }) {
-  let cleaned = cleanHeadingChildren(children), headingId = id ?? headingToHTMLId(cleaned), isEmpty = !headingId || headingId === "empty-heading", classes = cn("scroll-mt-20", className);
+  let cleaned = cleanHeadingChildren(children), headingId = id ?? headingToHTMLId(cleaned), isEmpty = !headingId || headingId === "empty-heading", classes = cn(
+    "scroll-mt-[calc(var(--layout-global-nav-height)_+_1.5rem)] supports-[scroll-margin-top:anchor-size(--global-navbar_height)]:scroll-mt-[calc(anchor-size(--global-navbar_height,3.5rem)_+_1.5rem)]",
+    className
+  );
   return isEmpty ? (
     // @ts-expect-error — polymorphic `as` prop with spread is safe at runtime
     /* @__PURE__ */ jsx(Tag, { className, ...props, children: cleaned })

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

@@ -1,11 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Separator as Separator$1 } from '@base-ui/react/separator';
+import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
 
 type SeparatorProps = ComponentPropsWithoutRef<typeof Separator$1>;
-declare function Separator({ className, orientation, ...props }: SeparatorProps): react_jsx_runtime.JSX.Element;
+declare function Separator({ className, orientation, ...props }: SeparatorProps): react.JSX.Element;
 
 type HrProps = React.ComponentPropsWithoutRef<typeof Separator>;
-declare function Hr({ className, ...props }: HrProps): react_jsx_runtime.JSX.Element;
+declare function Hr({ className, ...props }: HrProps): react.JSX.Element;
 
 export { Hr, type HrProps };