@opensite/ui 0.5.3 → 0.5.5

package/dist/article-chapters-author.js

@@ -1,5 +1,5 @@
 "use client";
-import * as React from 'react';
+import * as React4 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -87,7 +87,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React.useMemo(() => {
+  const linkType = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -108,7 +108,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React.useMemo(() => {
+  const normalizedHref = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -126,7 +126,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React.useMemo(() => {
+  const target = React4.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -139,7 +139,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React.useMemo(() => {
+  const rel = React4.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -148,7 +148,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React.useCallback(
+  const handleClick = React4.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -332,7 +332,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React.forwardRef(
+var Pressable = React4.forwardRef(
   ({
     children,
     className,
@@ -438,10 +438,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
+  const [svgContent, setSvgContent] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const { url, iconName } = React4.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -450,7 +450,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -857,10 +857,10 @@ function ArticleChaptersAuthorComponent({
   optixFlowConfig
 }) {
   const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [{ label: conclusionButtonText, href: conclusionButtonHref || "#", variant: "default" }] : []);
-  const [activeChapter, setActiveChapter] = React.useState(
+  const [activeChapter, setActiveChapter] = React4.useState(
     chapters?.[0]?.id || ""
   );
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (!enableChapterTracking || !chapters || chapters.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -878,20 +878,20 @@ function ArticleChaptersAuthorComponent({
     });
     return () => observer.disconnect();
   }, [chapters, enableChapterTracking]);
-  const renderBreadcrumbs = () => {
+  const breadcrumbsContent = React4.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs || breadcrumbs.length === 0) return null;
     return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-8", 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(React.Fragment, { children: [
+      breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
         /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
         /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: crumb.href, children: crumb.label }) }) })
       ] }, index)),
       /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: typeof currentPage === "string" ? currentPage : currentPage }) })
     ] }) });
-  };
-  const renderChaptersNav = () => {
+  }, [breadcrumbsSlot, breadcrumbs, currentPage, breadcrumbClassName]);
+  const chaptersNavContent = React4.useMemo(() => {
     if (chaptersSlot) return chaptersSlot;
     if (!chapters || chapters.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", chaptersClassName), children: [
@@ -899,7 +899,7 @@ function ArticleChaptersAuthorComponent({
       /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: chapters.map((chapter) => {
         const isActive = activeChapter === chapter.id;
         if (renderChapterLink) {
-          return /* @__PURE__ */ jsx(React.Fragment, { children: renderChapterLink(chapter, isActive) }, chapter.id);
+          return /* @__PURE__ */ jsx(React4.Fragment, { children: renderChapterLink(chapter, isActive) }, chapter.id);
         }
         return /* @__PURE__ */ jsxs(
           Pressable,
@@ -918,50 +918,52 @@ function ArticleChaptersAuthorComponent({
         );
       }) })
     ] });
-  };
-  const renderAuthorCard = () => {
+  }, [chaptersSlot, chapters, activeChapter, renderChapterLink, chaptersClassName]);
+  const authorCardContent = React4.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
-    const renderSocialLinks = () => {
-      if (!author.socialLinks) return null;
+    let socialLinksContent = null;
+    if (author.socialLinks) {
       if (Array.isArray(author.socialLinks)) {
-        if (author.socialLinks.length === 0) return null;
-        return /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: author.socialLinks.map((link, index) => /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: link.href,
-            className: cn(
-              "flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted",
-              link.className
-            ),
-            "aria-label": link["aria-label"],
-            children: link.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: `lucide/${link.platform}`, size: 14 })
-          },
-          index
-        )) });
+        if (author.socialLinks.length > 0) {
+          socialLinksContent = /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: author.socialLinks.map((link, index) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: link.href,
+              className: cn(
+                "flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted",
+                link.className
+              ),
+              "aria-label": link["aria-label"],
+              children: link.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: `lucide/${link.platform}`, size: 14 })
+            },
+            index
+          )) });
+        }
       } else {
         const links = author.socialLinks;
         const socialEntries = Object.entries(links).filter(([, href]) => href);
-        if (socialEntries.length === 0) return null;
-        const platformLabels = {
-          twitter: "Twitter",
-          linkedin: "LinkedIn",
-          github: "GitHub",
-          facebook: "Facebook",
-          instagram: "Instagram"
-        };
-        return /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: socialEntries.map(([platform, href]) => /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href,
-            className: "flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted",
-            "aria-label": platformLabels[platform] || platform.charAt(0).toUpperCase() + platform.slice(1),
-            children: /* @__PURE__ */ jsx(DynamicIcon, { name: `lucide/${platform}`, size: 14 })
-          },
-          platform
-        )) });
+        if (socialEntries.length > 0) {
+          const platformLabels = {
+            twitter: "Twitter",
+            linkedin: "LinkedIn",
+            github: "GitHub",
+            facebook: "Facebook",
+            instagram: "Instagram"
+          };
+          socialLinksContent = /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: socialEntries.map(([platform, href]) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href,
+              className: "flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted",
+              "aria-label": platformLabels[platform] || platform.charAt(0).toUpperCase() + platform.slice(1),
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: `lucide/${platform}`, size: 14 })
+            },
+            platform
+          )) });
+        }
       }
-    };
+    }
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", authorClassName), children: [
       /* @__PURE__ */ jsx("h3", { className: "mb-4 text-sm font-semibold", children: "About the Author" }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -975,25 +977,23 @@ function ArticleChaptersAuthorComponent({
         ] })
       ] }),
       author.bio && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: author.bio }),
-      renderSocialLinks()
+      socialLinksContent
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, author, authorClassName]);
+  const heroMediaContent = React4.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
-    if (heroImageSrc) {
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: heroImageSrc,
-          alt: heroImageAlt,
-          className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  };
-  const renderConclusion = () => {
+    if (!heroImageSrc) return null;
+    return /* @__PURE__ */ jsx(
+      Img,
+      {
+        src: heroImageSrc,
+        alt: heroImageAlt,
+        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        optixFlowConfig
+      }
+    );
+  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  const conclusionContent = React4.useMemo(() => {
     if (conclusionSlot) return conclusionSlot;
     if (!conclusionTitle && !conclusionDescription && (!conclusionActions || conclusionActions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-12 rounded-lg border bg-muted/50 p-6 not-prose", conclusionClassName), children: [
@@ -1017,22 +1017,22 @@ function ArticleChaptersAuthorComponent({
         );
       }) })
     ] });
-  };
+  }, [conclusionSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionClassName]);
   return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-    renderBreadcrumbs(),
+    breadcrumbsContent,
     /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
       title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
       subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground md:text-xl", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[280px_minmax(0,1fr)]", children: [
       /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
-        renderChaptersNav(),
-        renderAuthorCard()
+        chaptersNavContent,
+        authorCardContent
       ] }) }),
       /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-        renderHeroMedia(),
+        heroMediaContent,
         children || defaultArticleContent(optixFlowConfig),
-        renderConclusion()
+        conclusionContent
       ] })
     ] })
   ] }) });

package/dist/article-compact-toc.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 
 // components/blocks/article/article-compact-toc.tsx
@@ -110,7 +110,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React__namespace.useMemo(() => {
+  const linkType = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -131,7 +131,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React__namespace.useMemo(() => {
+  const normalizedHref = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -149,7 +149,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React__namespace.useMemo(() => {
+  const target = React4__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -162,7 +162,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React__namespace.useMemo(() => {
+  const rel = React4__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -171,7 +171,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React__namespace.useCallback(
+  const handleClick = React4__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -355,7 +355,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React__namespace.forwardRef(
+var Pressable = React4__namespace.forwardRef(
   ({
     children,
     className,
@@ -461,10 +461,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__namespace.useMemo(() => {
+  const [svgContent, setSvgContent] = React4__namespace.useState(null);
+  const [isLoading, setIsLoading] = React4__namespace.useState(true);
+  const [error, setError] = React4__namespace.useState(null);
+  const { url, iconName } = React4__namespace.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -473,7 +473,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -711,11 +711,11 @@ function ArticleCompactTocComponent({
   enableTocTracking = true,
   optixFlowConfig
 }) {
-  const [activeSection, setActiveSection] = React__namespace.useState(
+  const [activeSection, setActiveSection] = React4__namespace.useState(
     sections?.[0]?.id || ""
   );
-  const [isTocOpen, setIsTocOpen] = React__namespace.useState(false);
-  React__namespace.useEffect(() => {
+  const [isTocOpen, setIsTocOpen] = React4__namespace.useState(false);
+  React4__namespace.useEffect(() => {
     if (!enableTocTracking) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -733,19 +733,20 @@ function ArticleCompactTocComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const renderBreadcrumbs = () => {
+  const breadcrumbsContent = React4__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: [
       /* @__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(React__namespace.Fragment, { children: [
+      breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: crumb.href, children: crumb.label }) }) })
       ] }, index)),
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: currentPage }) })
     ] }) });
-  };
-  const renderShare = () => {
+  }, [breadcrumbsSlot, breadcrumbs, currentPage, breadcrumbClassName]);
+  const shareContent = React4__namespace.useMemo(() => {
     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: [
@@ -761,8 +762,8 @@ function ArticleCompactTocComponent({
         index
       ))
     ] });
-  };
-  const renderToc = () => {
+  }, [shareSlot, socialLinks, shareClassName]);
+  const tocContent = React4__namespace.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 lg:hidden", children: [
@@ -789,7 +790,7 @@ 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(React__namespace.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
@@ -806,8 +807,8 @@ function ArticleCompactTocComponent({
         );
       }) })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [tocSlot, sections, isTocOpen, activeSection, renderSectionLink, tocClassName]);
+  const heroMediaContent = React4__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -819,9 +820,9 @@ function ArticleCompactTocComponent({
         optixFlowConfig
       }
     );
-  };
+  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    renderBreadcrumbs(),
+    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: [
@@ -831,11 +832,11 @@ function ArticleCompactTocComponent({
         publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
         readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
       ] }),
-      renderShare(),
+      shareContent,
       /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
-      renderToc(),
+      tocContent,
       /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-        renderHeroMedia(),
+        heroMediaContent,
         children ?? defaultArticleContent()
       ] })
     ] })

package/dist/article-compact-toc.js

@@ -1,5 +1,5 @@
 "use client";
-import * as React from 'react';
+import * as React4 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -87,7 +87,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React.useMemo(() => {
+  const linkType = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -108,7 +108,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React.useMemo(() => {
+  const normalizedHref = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -126,7 +126,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React.useMemo(() => {
+  const target = React4.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -139,7 +139,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React.useMemo(() => {
+  const rel = React4.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -148,7 +148,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React.useCallback(
+  const handleClick = React4.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -332,7 +332,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React.forwardRef(
+var Pressable = React4.forwardRef(
   ({
     children,
     className,
@@ -438,10 +438,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
+  const [svgContent, setSvgContent] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const { url, iconName } = React4.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -450,7 +450,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -688,11 +688,11 @@ function ArticleCompactTocComponent({
   enableTocTracking = true,
   optixFlowConfig
 }) {
-  const [activeSection, setActiveSection] = React.useState(
+  const [activeSection, setActiveSection] = React4.useState(
     sections?.[0]?.id || ""
   );
-  const [isTocOpen, setIsTocOpen] = React.useState(false);
-  React.useEffect(() => {
+  const [isTocOpen, setIsTocOpen] = React4.useState(false);
+  React4.useEffect(() => {
     if (!enableTocTracking) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -710,19 +710,20 @@ function ArticleCompactTocComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const renderBreadcrumbs = () => {
+  const breadcrumbsContent = React4.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
+    if (!breadcrumbs && !currentPage) return null;
     return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-6", 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(React.Fragment, { children: [
+      breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
         /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
         /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: crumb.href, children: crumb.label }) }) })
       ] }, index)),
       /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: currentPage }) })
     ] }) });
-  };
-  const renderShare = () => {
+  }, [breadcrumbsSlot, breadcrumbs, currentPage, breadcrumbClassName]);
+  const shareContent = React4.useMemo(() => {
     if (shareSlot) return shareSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-6 flex items-center gap-2", shareClassName), children: [
@@ -738,8 +739,8 @@ function ArticleCompactTocComponent({
         index
       ))
     ] });
-  };
-  const renderToc = () => {
+  }, [shareSlot, socialLinks, shareClassName]);
+  const tocContent = React4.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: "mb-8 lg:hidden", children: [
@@ -766,7 +767,7 @@ 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(React.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsx(React4.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -783,8 +784,8 @@ function ArticleCompactTocComponent({
         );
       }) })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [tocSlot, sections, isTocOpen, activeSection, renderSectionLink, tocClassName]);
+  const heroMediaContent = React4.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -796,9 +797,9 @@ function ArticleCompactTocComponent({
         optixFlowConfig
       }
     );
-  };
+  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-    renderBreadcrumbs(),
+    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: [
@@ -808,11 +809,11 @@ function ArticleCompactTocComponent({
         publishDate && readTime && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" }),
         readTime && /* @__PURE__ */ jsx("span", { children: readTime })
       ] }),
-      renderShare(),
+      shareContent,
       /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
-      renderToc(),
+      tocContent,
       /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-        renderHeroMedia(),
+        heroMediaContent,
         children ?? defaultArticleContent()
       ] })
     ] })