@opensite/ui 0.6.6 → 0.6.8

package/dist/article-compact-toc.cjs

@@ -9,6 +9,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,6 +31,7 @@ function _interopNamespace(e) {
 
 var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 
 // components/blocks/article/article-compact-toc.tsx
 function cn(...inputs) {
@@ -1022,6 +1024,36 @@ var Section = React6__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverPrimitive__namespace.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
 function ArticleCompactTocComponent({
   className,
   containerClassName,
@@ -1082,7 +1114,7 @@ function ArticleCompactTocComponent({
   const breadcrumbsContent = React6__namespace.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs && !currentPage) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: cn("mb-6", breadcrumbClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: cn("mb-6 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
       breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
@@ -1109,14 +1141,38 @@ function ArticleCompactTocComponent({
       ))
     ] });
   }, [shareSlot, socialLinks, shareClassName]);
+  const renderTocLinks = React6__namespace.useCallback(
+    (onLinkClick) => {
+      if (!sections) return null;
+      return sections.map((section) => {
+        const isActive = activeSection === section.id;
+        if (renderSectionLink) {
+          return /* @__PURE__ */ jsxRuntime.jsx(React6__namespace.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            href: `#${section.id}`,
+            className: cn(
+              "block text-sm transition-colors",
+              isActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            onClick: onLinkClick,
+            children: section.title
+          },
+          section.id
+        );
+      });
+    },
+    [sections, activeSection, renderSectionLink]
+  );
   const tocContent = React6__namespace.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 lg:hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isTocOpen, onOpenChange: setIsTocOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
-          onClick: () => setIsTocOpen(!isTocOpen),
           className: cn(
             "flex w-full items-center justify-between rounded-lg border p-4",
             tocClassName
@@ -1132,28 +1188,34 @@ function ArticleCompactTocComponent({
             )
           ]
         }
-      ),
-      isTocOpen && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "mt-2 space-y-2 rounded-lg border p-4", children: sections.map((section) => {
-        const isActive = activeSection === section.id;
-        if (renderSectionLink) {
-          return /* @__PURE__ */ jsxRuntime.jsx(React6__namespace.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-[var(--radix-popover-trigger-width)] space-y-2 p-4",
+          children: renderTocLinks(() => setIsTocOpen(false))
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: `#${section.id}`,
-            className: cn(
-              "block text-sm transition-colors",
-              isActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
-            ),
-            onClick: () => setIsTocOpen(false),
-            children: section.title
-          },
-          section.id
-        );
-      }) })
-    ] });
-  }, [tocSlot, sections, isTocOpen, activeSection, renderSectionLink, tocClassName]);
+      )
+    ] }) });
+  }, [tocSlot, sections, isTocOpen, tocClassName, renderTocLinks]);
+  const desktopTocContent = React6__namespace.useMemo(() => {
+    if (tocSlot) return null;
+    if (!sections || sections.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "aside",
+      {
+        className: cn(
+          "hidden lg:block fixed top-24 right-8 w-64 max-h-[calc(100vh-8rem)] overflow-y-auto",
+          tocClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "space-y-2 rounded-lg border bg-background p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 block text-sm font-semibold", children: "Table of Contents" }),
+          renderTocLinks()
+        ] })
+      }
+    );
+  }, [tocSlot, sections, tocClassName, renderTocLinks]);
   const heroMediaContent = React6__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -1162,39 +1224,78 @@ function ArticleCompactTocComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        breadcrumbsContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          (authorName || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground", metaClassName), children: [
-            authorName && (authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: authorName })),
-            authorName && publishDate && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
-            publishDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: publishDate }),
-            publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
-            readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
-          ] }),
-          shareContent,
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
-          tocContent,
-          children && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-            heroMediaContent,
-            children
+      className: cn("relative", className),
+      children: [
+        desktopTocContent,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+          breadcrumbsContent,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            (authorName || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground",
+                  metaClassName
+                ),
+                children: [
+                  authorName && (authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: authorName })),
+                  authorName && publishDate && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
+                  publishDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: publishDate }),
+                  publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
+                  readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
+                ]
+              }
+            ),
+            shareContent,
+            /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
+            tocContent,
+            children && /* @__PURE__ */ jsxRuntime.jsxs(
+              "article",
+              {
+                className: cn(
+                  "prose max-w-none dark:prose-invert",
+                  articleClassName
+                ),
+                children: [
+                  heroMediaContent,
+                  children
+                ]
+              }
+            )
           ] })
         ] })
-      ] })
+      ]
     }
   );
 }

package/dist/article-compact-toc.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CODGexkN.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface ArticleCompactTocSection {

package/dist/article-compact-toc.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-31vhKBa1.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface ArticleCompactTocSection {

package/dist/article-compact-toc.js

@@ -8,6 +8,7 @@ import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 // components/blocks/article/article-compact-toc.tsx
 function cn(...inputs) {
@@ -1000,6 +1001,36 @@ var Section = React6__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
 function ArticleCompactTocComponent({
   className,
   containerClassName,
@@ -1060,7 +1091,7 @@ function ArticleCompactTocComponent({
   const breadcrumbsContent = React6.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs && !currentPage) return null;
-    return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-6", breadcrumbClassName), children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+    return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-6 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
       breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
         /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
@@ -1087,14 +1118,38 @@ function ArticleCompactTocComponent({
       ))
     ] });
   }, [shareSlot, socialLinks, shareClassName]);
+  const renderTocLinks = React6.useCallback(
+    (onLinkClick) => {
+      if (!sections) return null;
+      return sections.map((section) => {
+        const isActive = activeSection === section.id;
+        if (renderSectionLink) {
+          return /* @__PURE__ */ jsx(React6.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+        }
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: `#${section.id}`,
+            className: cn(
+              "block text-sm transition-colors",
+              isActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            onClick: onLinkClick,
+            children: section.title
+          },
+          section.id
+        );
+      });
+    },
+    [sections, activeSection, renderSectionLink]
+  );
   const tocContent = React6.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "mb-8 lg:hidden", children: [
-      /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: "mb-8 lg:hidden", children: /* @__PURE__ */ jsxs(Popover, { open: isTocOpen, onOpenChange: setIsTocOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: () => setIsTocOpen(!isTocOpen),
           className: cn(
             "flex w-full items-center justify-between rounded-lg border p-4",
             tocClassName
@@ -1110,28 +1165,34 @@ function ArticleCompactTocComponent({
             )
           ]
         }
-      ),
-      isTocOpen && /* @__PURE__ */ jsx("nav", { className: "mt-2 space-y-2 rounded-lg border p-4", children: sections.map((section) => {
-        const isActive = activeSection === section.id;
-        if (renderSectionLink) {
-          return /* @__PURE__ */ jsx(React6.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-[var(--radix-popover-trigger-width)] space-y-2 p-4",
+          children: renderTocLinks(() => setIsTocOpen(false))
         }
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: `#${section.id}`,
-            className: cn(
-              "block text-sm transition-colors",
-              isActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
-            ),
-            onClick: () => setIsTocOpen(false),
-            children: section.title
-          },
-          section.id
-        );
-      }) })
-    ] });
-  }, [tocSlot, sections, isTocOpen, activeSection, renderSectionLink, tocClassName]);
+      )
+    ] }) });
+  }, [tocSlot, sections, isTocOpen, tocClassName, renderTocLinks]);
+  const desktopTocContent = React6.useMemo(() => {
+    if (tocSlot) return null;
+    if (!sections || sections.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        className: cn(
+          "hidden lg:block fixed top-24 right-8 w-64 max-h-[calc(100vh-8rem)] overflow-y-auto",
+          tocClassName
+        ),
+        children: /* @__PURE__ */ jsxs("nav", { className: "space-y-2 rounded-lg border bg-background p-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "mb-3 block text-sm font-semibold", children: "Table of Contents" }),
+          renderTocLinks()
+        ] })
+      }
+    );
+  }, [tocSlot, sections, tocClassName, renderTocLinks]);
   const heroMediaContent = React6.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -1140,39 +1201,78 @@ function ArticleCompactTocComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsx(
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        breadcrumbsContent,
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          (authorName || publishDate || readTime) && /* @__PURE__ */ jsxs("div", { className: cn("mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground", metaClassName), children: [
-            authorName && (authorHref ? /* @__PURE__ */ jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsx("span", { children: authorName })),
-            authorName && publishDate && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" }),
-            publishDate && /* @__PURE__ */ jsx("span", { children: publishDate }),
-            publishDate && readTime && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" }),
-            readTime && /* @__PURE__ */ jsx("span", { children: readTime })
-          ] }),
-          shareContent,
-          /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
-          tocContent,
-          children && /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-            heroMediaContent,
-            children
+      className: cn("relative", className),
+      children: [
+        desktopTocContent,
+        /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+          breadcrumbsContent,
+          /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+            (authorName || publishDate || readTime) && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground",
+                  metaClassName
+                ),
+                children: [
+                  authorName && (authorHref ? /* @__PURE__ */ jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsx("span", { children: authorName })),
+                  authorName && publishDate && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" }),
+                  publishDate && /* @__PURE__ */ jsx("span", { children: publishDate }),
+                  publishDate && readTime && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" }),
+                  readTime && /* @__PURE__ */ jsx("span", { children: readTime })
+                ]
+              }
+            ),
+            shareContent,
+            /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
+            tocContent,
+            children && /* @__PURE__ */ jsxs(
+              "article",
+              {
+                className: cn(
+                  "prose max-w-none dark:prose-invert",
+                  articleClassName
+                ),
+                children: [
+                  heroMediaContent,
+                  children
+                ]
+              }
+            )
           ] })
         ] })
-      ] })
+      ]
     }
   );
 }