@opensite/ui 0.5.4 → 0.5.5

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.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ArticleCompactTocSection {

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

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ArticleCompactTocSection {

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()
       ] })
     ] })

package/dist/article-hero-prose.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var dateFns = require('date-fns');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -855,12 +855,12 @@ function ArticleHeroProseComponent({
   optixFlowConfig
 }) {
   const { title, authorName, authorHref, image, pubDate, description, authorImage } = post ?? {};
-  const renderAuthor = () => {
+  const authorContent = React__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3 text-sm md:text-base", authorClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "h-8 w-8 border", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: authorImage }),
+        authorImage && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: authorImage }),
         /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: authorName.charAt(0) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -871,26 +871,26 @@ function ArticleHeroProseComponent({
         ] })
       ] })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, pubDate, dateFormat, authorClassName]);
+  const heroMediaContent = React__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
         src: image,
-        alt: "Article hero image",
+        alt: "Hero media",
         className: cn("mt-4 mb-8 aspect-video w-full rounded-lg border object-cover", heroImageClassName),
         optixFlowConfig
       }
     );
-  };
+  }, [heroMediaSlot, image, heroImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("py-32", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center gap-4 text-center", headerClassName), children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-3xl text-5xl font-semibold text-pretty md:text-6xl", titleClassName), children: title }),
       description && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("max-w-3xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }),
-      renderAuthor(),
-      renderHeroMedia()
+      authorContent,
+      heroMediaContent
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto prose max-w-3xl dark:prose-invert", proseClassName), children: children || defaultArticleContent(optixFlowConfig) }) })
   ] });

package/dist/article-hero-prose.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ArticleHeroProsePost {
@@ -36,11 +36,11 @@ interface ArticleHeroProseProps {
      */
     descriptionClassName?: string;
     /**
-     * Additional CSS classes for the author info
+     * Additional CSS classes for the author information
      */
     authorClassName?: string;
     /**
-     * Additional CSS classes for the hero image
+     * Additional CSS classes for the hero media
      */
     heroImageClassName?: string;
     /**
@@ -48,7 +48,7 @@ interface ArticleHeroProseProps {
      */
     proseClassName?: string;
     /**
-     * Post metadata (title, author, image, etc.)
+     * Content metadata (title, author, media, etc.)
      */
     post?: ArticleHeroProsePost;
     /**
@@ -56,11 +56,11 @@ interface ArticleHeroProseProps {
      */
     heroMediaSlot?: React.ReactNode;
     /**
-     * Custom slot for author info (overrides post author fields)
+     * Custom slot for author information (overrides post author fields)
      */
     authorSlot?: React.ReactNode;
     /**
-     * Article body content (replaces hardcoded prose)
+     * Main body content
      */
     children?: React.ReactNode;
     /**

package/dist/article-hero-prose.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ArticleHeroProsePost {
@@ -36,11 +36,11 @@ interface ArticleHeroProseProps {
      */
     descriptionClassName?: string;
     /**
-     * Additional CSS classes for the author info
+     * Additional CSS classes for the author information
      */
     authorClassName?: string;
     /**
-     * Additional CSS classes for the hero image
+     * Additional CSS classes for the hero media
      */
     heroImageClassName?: string;
     /**
@@ -48,7 +48,7 @@ interface ArticleHeroProseProps {
      */
     proseClassName?: string;
     /**
-     * Post metadata (title, author, image, etc.)
+     * Content metadata (title, author, media, etc.)
      */
     post?: ArticleHeroProsePost;
     /**
@@ -56,11 +56,11 @@ interface ArticleHeroProseProps {
      */
     heroMediaSlot?: React.ReactNode;
     /**
-     * Custom slot for author info (overrides post author fields)
+     * Custom slot for author information (overrides post author fields)
      */
     authorSlot?: React.ReactNode;
     /**
-     * Article body content (replaces hardcoded prose)
+     * Main body content
      */
     children?: React.ReactNode;
     /**

package/dist/article-hero-prose.js

@@ -1,9 +1,9 @@
 "use client";
+import * as React from 'react';
 import { format } from 'date-fns';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -832,12 +832,12 @@ function ArticleHeroProseComponent({
   optixFlowConfig
 }) {
   const { title, authorName, authorHref, image, pubDate, description, authorImage } = post ?? {};
-  const renderAuthor = () => {
+  const authorContent = React.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 text-sm md:text-base", authorClassName), children: [
       /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 border", children: [
-        /* @__PURE__ */ jsx(AvatarImage, { src: authorImage }),
+        authorImage && /* @__PURE__ */ jsx(AvatarImage, { src: authorImage }),
         /* @__PURE__ */ jsx(AvatarFallback, { children: authorName.charAt(0) })
       ] }),
       /* @__PURE__ */ jsxs("span", { children: [
@@ -848,26 +848,26 @@ function ArticleHeroProseComponent({
         ] })
       ] })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, pubDate, dateFormat, authorClassName]);
+  const heroMediaContent = React.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx(
       Img,
       {
         src: image,
-        alt: "Article hero image",
+        alt: "Hero media",
         className: cn("mt-4 mb-8 aspect-video w-full rounded-lg border object-cover", heroImageClassName),
         optixFlowConfig
       }
     );
-  };
+  }, [heroMediaSlot, image, heroImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs("section", { className: cn("py-32", className), children: [
     /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center gap-4 text-center", headerClassName), children: [
       title && /* @__PURE__ */ jsx("h1", { className: cn("max-w-3xl text-5xl font-semibold text-pretty md:text-6xl", titleClassName), children: title }),
       description && /* @__PURE__ */ jsx("h3", { className: cn("max-w-3xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }),
-      renderAuthor(),
-      renderHeroMedia()
+      authorContent,
+      heroMediaContent
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto prose max-w-3xl dark:prose-invert", proseClassName), children: children || defaultArticleContent(optixFlowConfig) }) })
   ] });