@opensite/ui 2.6.6 → 2.6.7

package/dist/article-breadcrumb-social.cjs

@@ -10,7 +10,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var reactSlot = require('@radix-ui/react-slot');
-var SeparatorPrimitive = require('@radix-ui/react-separator');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,7 +31,6 @@ function _interopNamespace(e) {
 
 var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
-var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 
 // components/blocks/article/article-breadcrumb-social.tsx
 function cn(...inputs) {
@@ -583,26 +581,6 @@ function BreadcrumbSeparator({
     }
   );
 }
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SeparatorPrimitive__namespace.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -1010,7 +988,8 @@ function ArticleBreadcrumbSocialComponent({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
   const [activeSection, setActiveSection] = React5__namespace.useState(
     sections?.[0]?.id || ""
@@ -1077,7 +1056,7 @@ function ArticleBreadcrumbSocialComponent({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             author.name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: author.name }),
-            (author.role || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: [author.role, publishDate, readTime].filter(Boolean).join(" \xB7 ") })
+            (author.role || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: [author.role, publishDate, readTime].filter(Boolean).join(" \xB7 ") })
           ] })
         ]
       }
@@ -1121,7 +1100,7 @@ function ArticleBreadcrumbSocialComponent({
             href: `#${section.id}`,
             className: cn(
               "block text-sm transition-colors",
-              isActive ? "font-medium" : "text-muted-foreground hover:text-foreground"
+              isActive ? "underline" : ""
             ),
             children: section.title
           },
@@ -1137,7 +1116,8 @@ function ArticleBreadcrumbSocialComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -1162,7 +1142,6 @@ function ArticleBreadcrumbSocialComponent({
                     }
                   ) : title),
                   authorContent,
-                  /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
                   heroMediaContent,
                   children
                 ]
@@ -1175,7 +1154,7 @@ function ArticleBreadcrumbSocialComponent({
           "button",
           {
             onClick: scrollToTop,
-            className: "fixed bottom-8 right-8 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-opacity hover:opacity-90",
+            className: "fixed bottom-8 right-8 flex h-10 w-10 items-center justify-center rounded-full shadow-lg transition-opacity hover:opacity-90",
             "aria-label": "Back to top",
             children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up", size: 20 })
           }

package/dist/article-breadcrumb-social.d.cts

@@ -145,7 +145,11 @@ interface ArticleBreadcrumbSocialProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function ArticleBreadcrumbSocialComponent({ className, breadcrumbClassName, articleClassName, sidebarClassName, titleClassName, authorClassName, heroImageClassName, tocClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, author, authorSlot, publishDate, readTime, sections, tocSlot, renderSectionLink, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, enableBackToTop, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleBreadcrumbSocialProps): react_jsx_runtime.JSX.Element;
+declare function ArticleBreadcrumbSocialComponent({ className, breadcrumbClassName, articleClassName, sidebarClassName, titleClassName, authorClassName, heroImageClassName, tocClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, author, authorSlot, publishDate, readTime, sections, tocSlot, renderSectionLink, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, enableBackToTop, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: ArticleBreadcrumbSocialProps): react_jsx_runtime.JSX.Element;
 
 export { type ArticleBreadcrumbSection, ArticleBreadcrumbSocialComponent as ArticleBreadcrumbSocial, type ArticleBreadcrumbSocialProps };

package/dist/article-breadcrumb-social.d.ts

@@ -145,7 +145,11 @@ interface ArticleBreadcrumbSocialProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function ArticleBreadcrumbSocialComponent({ className, breadcrumbClassName, articleClassName, sidebarClassName, titleClassName, authorClassName, heroImageClassName, tocClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, author, authorSlot, publishDate, readTime, sections, tocSlot, renderSectionLink, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, enableBackToTop, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleBreadcrumbSocialProps): react_jsx_runtime.JSX.Element;
+declare function ArticleBreadcrumbSocialComponent({ className, breadcrumbClassName, articleClassName, sidebarClassName, titleClassName, authorClassName, heroImageClassName, tocClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, author, authorSlot, publishDate, readTime, sections, tocSlot, renderSectionLink, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, enableBackToTop, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: ArticleBreadcrumbSocialProps): react_jsx_runtime.JSX.Element;
 
 export { type ArticleBreadcrumbSection, ArticleBreadcrumbSocialComponent as ArticleBreadcrumbSocial, type ArticleBreadcrumbSocialProps };

package/dist/article-breadcrumb-social.js

@@ -9,7 +9,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { Slot } from '@radix-ui/react-slot';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
 // components/blocks/article/article-breadcrumb-social.tsx
 function cn(...inputs) {
@@ -560,26 +559,6 @@ function BreadcrumbSeparator({
     }
   );
 }
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SeparatorPrimitive.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -987,7 +966,8 @@ function ArticleBreadcrumbSocialComponent({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
   const [activeSection, setActiveSection] = React5.useState(
     sections?.[0]?.id || ""
@@ -1054,7 +1034,7 @@ function ArticleBreadcrumbSocialComponent({
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
             author.name && /* @__PURE__ */ jsx("p", { className: "font-medium", children: author.name }),
-            (author.role || publishDate || readTime) && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: [author.role, publishDate, readTime].filter(Boolean).join(" \xB7 ") })
+            (author.role || publishDate || readTime) && /* @__PURE__ */ jsx("p", { className: "text-sm", children: [author.role, publishDate, readTime].filter(Boolean).join(" \xB7 ") })
           ] })
         ]
       }
@@ -1098,7 +1078,7 @@ function ArticleBreadcrumbSocialComponent({
             href: `#${section.id}`,
             className: cn(
               "block text-sm transition-colors",
-              isActive ? "font-medium" : "text-muted-foreground hover:text-foreground"
+              isActive ? "underline" : ""
             ),
             children: section.title
           },
@@ -1114,7 +1094,8 @@ function ArticleBreadcrumbSocialComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -1139,7 +1120,6 @@ function ArticleBreadcrumbSocialComponent({
                     }
                   ) : title),
                   authorContent,
-                  /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
                   heroMediaContent,
                   children
                 ]
@@ -1152,7 +1132,7 @@ function ArticleBreadcrumbSocialComponent({
           "button",
           {
             onClick: scrollToTop,
-            className: "fixed bottom-8 right-8 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-opacity hover:opacity-90",
+            className: "fixed bottom-8 right-8 flex h-10 w-10 items-center justify-center rounded-full shadow-lg transition-opacity hover:opacity-90",
             "aria-label": "Back to top",
             children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up", size: 20 })
           }

package/dist/article-chapters-author.cjs

@@ -36,36 +36,6 @@ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function isDarkBackground(bg) {
   return bg === "dark" || bg === "gradient" || bg === "primary" || bg === "secondary";
 }
@@ -1022,6 +992,7 @@ function ArticleChaptersAuthorComponent({
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
+  patternClassName,
   pattern,
   patternOpacity
 }) {
@@ -1075,16 +1046,14 @@ function ArticleChaptersAuthorComponent({
             href: `#${chapter.id}`,
             className: cn(
               "flex items-center gap-3 text-sm transition-colors",
-              isActive ? "font-medium" : ""
+              isActive ? "underline" : ""
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   className: cn(
-                    "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                    getNestedCardBg(background),
-                    getNestedCardTextColor(background)
+                    "flex h-6 w-6 items-center justify-center rounded-full text-xs"
                   ),
                   children: chapter.number
                 }
@@ -1157,10 +1126,10 @@ function ArticleChaptersAuthorComponent({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: author.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: author.role })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: author.role })
         ] })
       ] }),
-      author.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: author.bio }),
+      author.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm", children: author.bio }),
       socialLinksContent
     ] });
   }, [authorSlot, author, authorClassName]);
@@ -1195,8 +1164,6 @@ function ArticleChaptersAuthorComponent({
       {
         className: cn(
           "mt-12 rounded-lg border p-6 not-prose",
-          getNestedCardBg(background, "subtle"),
-          getNestedCardTextColor(background),
           conclusionClassName
         ),
         children: [
@@ -1243,7 +1210,8 @@ function ArticleChaptersAuthorComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         breadcrumbsContent,

package/dist/article-chapters-author.d.cts

@@ -174,7 +174,11 @@ interface ArticleChaptersAuthorProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function ArticleChaptersAuthorComponent({ className, breadcrumbClassName, headerClassName, titleClassName, subtitleClassName, sidebarClassName, articleClassName, chaptersClassName, authorClassName, conclusionClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, subtitle, chapters, chaptersSlot, renderChapterLink, author, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionSlot, children, enableChapterTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleChaptersAuthorProps): react_jsx_runtime.JSX.Element;
+declare function ArticleChaptersAuthorComponent({ className, breadcrumbClassName, headerClassName, titleClassName, subtitleClassName, sidebarClassName, articleClassName, chaptersClassName, authorClassName, conclusionClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, subtitle, chapters, chaptersSlot, renderChapterLink, author, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionSlot, children, enableChapterTracking, optixFlowConfig, background, containerClassName, spacing, patternClassName, pattern, patternOpacity, }: ArticleChaptersAuthorProps): react_jsx_runtime.JSX.Element;
 
 export { type ArticleAuthor, type ArticleChapter, ArticleChaptersAuthorComponent as ArticleChaptersAuthor, type ArticleChaptersAuthorProps };

package/dist/article-chapters-author.d.ts

@@ -174,7 +174,11 @@ interface ArticleChaptersAuthorProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function ArticleChaptersAuthorComponent({ className, breadcrumbClassName, headerClassName, titleClassName, subtitleClassName, sidebarClassName, articleClassName, chaptersClassName, authorClassName, conclusionClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, subtitle, chapters, chaptersSlot, renderChapterLink, author, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionSlot, children, enableChapterTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleChaptersAuthorProps): react_jsx_runtime.JSX.Element;
+declare function ArticleChaptersAuthorComponent({ className, breadcrumbClassName, headerClassName, titleClassName, subtitleClassName, sidebarClassName, articleClassName, chaptersClassName, authorClassName, conclusionClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, subtitle, chapters, chaptersSlot, renderChapterLink, author, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionSlot, children, enableChapterTracking, optixFlowConfig, background, containerClassName, spacing, patternClassName, pattern, patternOpacity, }: ArticleChaptersAuthorProps): react_jsx_runtime.JSX.Element;
 
 export { type ArticleAuthor, type ArticleChapter, ArticleChaptersAuthorComponent as ArticleChaptersAuthor, type ArticleChaptersAuthorProps };

package/dist/article-chapters-author.js

@@ -14,36 +14,6 @@ import { Slot } from '@radix-ui/react-slot';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function isDarkBackground(bg) {
   return bg === "dark" || bg === "gradient" || bg === "primary" || bg === "secondary";
 }
@@ -1000,6 +970,7 @@ function ArticleChaptersAuthorComponent({
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
+  patternClassName,
   pattern,
   patternOpacity
 }) {
@@ -1053,16 +1024,14 @@ function ArticleChaptersAuthorComponent({
             href: `#${chapter.id}`,
             className: cn(
               "flex items-center gap-3 text-sm transition-colors",
-              isActive ? "font-medium" : ""
+              isActive ? "underline" : ""
             ),
             children: [
               /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn(
-                    "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                    getNestedCardBg(background),
-                    getNestedCardTextColor(background)
+                    "flex h-6 w-6 items-center justify-center rounded-full text-xs"
                   ),
                   children: chapter.number
                 }
@@ -1135,10 +1104,10 @@ function ArticleChaptersAuthorComponent({
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium", children: author.name }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: author.role })
+          /* @__PURE__ */ jsx("p", { className: "text-xs", children: author.role })
         ] })
       ] }),
-      author.bio && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: author.bio }),
+      author.bio && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm", children: author.bio }),
       socialLinksContent
     ] });
   }, [authorSlot, author, authorClassName]);
@@ -1173,8 +1142,6 @@ function ArticleChaptersAuthorComponent({
       {
         className: cn(
           "mt-12 rounded-lg border p-6 not-prose",
-          getNestedCardBg(background, "subtle"),
-          getNestedCardTextColor(background),
           conclusionClassName
         ),
         children: [
@@ -1221,7 +1188,8 @@ function ArticleChaptersAuthorComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         breadcrumbsContent,

package/dist/article-compact-toc.cjs

@@ -997,7 +997,8 @@ function ArticleCompactTocComponent({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
   const [activeSection, setActiveSection] = React5__namespace.useState(
     sections?.[0]?.id || ""
@@ -1038,7 +1039,7 @@ function ArticleCompactTocComponent({
     if (shareSlot) return shareSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6 flex items-center gap-2", shareClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Share:" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Share:" }),
       socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1065,7 +1066,7 @@ function ArticleCompactTocComponent({
             href: `#${section.id}`,
             className: cn(
               "block text-sm transition-colors",
-              isActive ? "font-medium" : "text-muted-foreground hover:text-foreground"
+              isActive ? "underline" : ""
             ),
             onClick: onLinkClick,
             children: section.title
@@ -1109,23 +1110,14 @@ function ArticleCompactTocComponent({
       )
     ] }) });
   }, [tocSlot, sections, isTocOpen, tocClassName, renderTocLinks]);
+  const hasDesktopToc = !tocSlot && sections && sections.length > 0;
   const desktopTocContent = React5__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]);
+    if (!hasDesktopToc) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block w-64 shrink-0", tocClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto space-y-2 rounded-lg border p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 block text-sm font-semibold", children: "Table of Contents" }),
+      renderTocLinks()
+    ] }) });
+  }, [hasDesktopToc, tocClassName, renderTocLinks]);
   const heroMediaContent = React5__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -1148,20 +1140,20 @@ function ArticleCompactTocComponent({
     heroImageClassName,
     optixFlowConfig
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative", className),
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
-      children: [
-        desktopTocContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-          breadcrumbsContent,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        breadcrumbsContent,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", hasDesktopToc && "lg:flex lg:gap-8"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(hasDesktopToc && "min-w-0 lg:flex-1"), children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h1",
               {
@@ -1176,11 +1168,11 @@ function ArticleCompactTocComponent({
               "div",
               {
                 className: cn(
-                  "mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground",
+                  "mt-4 flex flex-wrap items-center gap-4 text-sm",
                   metaClassName
                 ),
                 children: [
-                  authorName && (authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: authorName })),
+                  authorName && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, 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" }),
@@ -1189,7 +1181,6 @@ function ArticleCompactTocComponent({
               }
             ),
             shareContent,
-            /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
             tocContent,
             children && /* @__PURE__ */ jsxRuntime.jsxs(
               "article",
@@ -1204,9 +1195,10 @@ function ArticleCompactTocComponent({
                 ]
               }
             )
-          ] })
+          ] }),
+          desktopTocContent
         ] })
-      ]
+      ] })
     }
   );
 }

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

@@ -149,7 +149,11 @@ interface ArticleCompactTocProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function ArticleCompactTocComponent({ className, breadcrumbClassName, contentClassName, titleClassName, metaClassName, shareClassName, tocClassName, articleClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, authorName, authorHref, publishDate, readTime, sections, tocSlot, renderSectionLink, socialLinks, shareSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleCompactTocProps): react_jsx_runtime.JSX.Element;
+declare function ArticleCompactTocComponent({ className, breadcrumbClassName, contentClassName, titleClassName, metaClassName, shareClassName, tocClassName, articleClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, authorName, authorHref, publishDate, readTime, sections, tocSlot, renderSectionLink, socialLinks, shareSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: ArticleCompactTocProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleCompactTocComponent as ArticleCompactToc, type ArticleCompactTocProps, type ArticleCompactTocSection };

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

@@ -149,7 +149,11 @@ interface ArticleCompactTocProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function ArticleCompactTocComponent({ className, breadcrumbClassName, contentClassName, titleClassName, metaClassName, shareClassName, tocClassName, articleClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, authorName, authorHref, publishDate, readTime, sections, tocSlot, renderSectionLink, socialLinks, shareSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleCompactTocProps): react_jsx_runtime.JSX.Element;
+declare function ArticleCompactTocComponent({ className, breadcrumbClassName, contentClassName, titleClassName, metaClassName, shareClassName, tocClassName, articleClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, authorName, authorHref, publishDate, readTime, sections, tocSlot, renderSectionLink, socialLinks, shareSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: ArticleCompactTocProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleCompactTocComponent as ArticleCompactToc, type ArticleCompactTocProps, type ArticleCompactTocSection };