@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.766

package/dist/{chunk-47GZ33ND.cjs → chunk-REJMFXGD.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkRO72PRQIcjs = require('./chunk-RO72PRQI.cjs');
+var _chunkZRDMGMY7cjs = require('./chunk-ZRDMGMY7.cjs');
 
 
 
@@ -14,8 +14,8 @@ var _chunkRO72PRQIcjs = require('./chunk-RO72PRQI.cjs');
 
 
 
-var _chunkNS64LMVEcjs = require('./chunk-NS64LMVE.cjs');
 
+var _chunkFZB4RMRKcjs = require('./chunk-FZB4RMRK.cjs');
 
 
 
@@ -39,13 +39,17 @@ var _chunkNS64LMVEcjs = require('./chunk-NS64LMVE.cjs');
 
 
 
-var _chunk22XAPV6Ncjs = require('./chunk-22XAPV6N.cjs');
+var _chunkDGNBXZXTcjs = require('./chunk-DGNBXZXT.cjs');
 
 
 var _chunkBLH2SFOOcjs = require('./chunk-BLH2SFOO.cjs');
 
 
-var _chunkNO5UJLLQcjs = require('./chunk-NO5UJLLQ.cjs');
+var _chunkWEANWBJHcjs = require('./chunk-WEANWBJH.cjs');
+
+
+
+var _chunkXFRBEXQNcjs = require('./chunk-XFRBEXQN.cjs');
 
 // src/components/related-content/related-content-section.tsx
 var _react = require('react');
@@ -441,15 +445,26 @@ function cardEntry(definition) {
     render: (row, ctx) => definition.render(definition.decode(row), ctx)
   };
 }
+var EVENT_CARD_SKELETON_MEDIA = 4;
 function programEntry(configKey) {
   return cardEntry({
-    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.ProgramCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
+    // An event's list API serves its gallery (the loaded card draws its photo row), the other programs' none.
+    // Hosts are drawn only for a type whose cards show them (its config's `cardShowsHosts`): elsewhere a record may
+    // have none.
+    skeleton: (size, extras) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkDGNBXZXTcjs.ProgramCardSkeleton,
+      {
+        size: size === "sm" ? "sm" : "default",
+        media: configKey === "event" ? EVENT_CARD_SKELETON_MEDIA : 0,
+        hosts: _optionalChain([extras, 'optionalAccess', _2 => _2.programConfigs, 'optionalAccess', _3 => _3[configKey], 'optionalAccess', _4 => _4.cardShowsHosts]) ? 1 : 0
+      }
+    ),
     decode: decodeProgramRow,
     render: (item, ctx) => {
-      const config = _optionalChain([ctx, 'access', _2 => _2.extras, 'optionalAccess', _3 => _3.programConfigs, 'optionalAccess', _4 => _4[configKey]]);
+      const config = _optionalChain([ctx, 'access', _5 => _5.extras, 'optionalAccess', _6 => _6.programConfigs, 'optionalAccess', _7 => _7[configKey]]);
       if (!config) return null;
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk22XAPV6Ncjs.ProgramCard,
+        _chunkDGNBXZXTcjs.ProgramCard,
         {
           config,
           item,
@@ -466,10 +481,10 @@ function programEntry(configKey) {
 }
 function roadmapEntry(cardType) {
   return cardEntry({
-    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.RoadmapCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
+    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.RoadmapCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
     decode: decodeRoadmapRow,
     render: (item, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk22XAPV6Ncjs.RoadmapCard,
+      _chunkDGNBXZXTcjs.RoadmapCard,
       {
         item,
         href: ctx.href,
@@ -486,10 +501,10 @@ function roadmapEntry(cardType) {
 }
 var RELATED_CARD_REGISTRY = {
   blog_post_existing: cardEntry({
-    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.BlogCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
+    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.BlogCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
     decode: decodeBlogRow,
     render: (post, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk22XAPV6Ncjs.BlogCard,
+      _chunkDGNBXZXTcjs.BlogCard,
       {
         post,
         size: ctx.legacySize,
@@ -501,10 +516,10 @@ var RELATED_CARD_REGISTRY = {
     )
   }),
   case_study: cardEntry({
-    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.CaseStudyCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
+    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.CaseStudyCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
     decode: decodeCaseStudyRow,
     render: (study, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk22XAPV6Ncjs.CaseStudyCard,
+      _chunkDGNBXZXTcjs.CaseStudyCard,
       {
         study,
         size: ctx.legacySize,
@@ -516,10 +531,10 @@ var RELATED_CARD_REGISTRY = {
     )
   }),
   customer_interview: cardEntry({
-    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.CustomerInterviewCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
+    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.CustomerInterviewCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
     decode: decodeCustomerInterviewRow,
     render: (interview, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk22XAPV6Ncjs.CustomerInterviewCard,
+      _chunkDGNBXZXTcjs.CustomerInterviewCard,
       {
         interview,
         size: ctx.legacySize,
@@ -537,13 +552,13 @@ var RELATED_CARD_REGISTRY = {
    * record, and the three props the rail sets itself are read off it.
    */
   product_release: cardEntry({
-    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.ProductReleaseCardSkeleton, { size: size === "sm" ? "sm" : "lg" }),
+    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.ProductReleaseCardSkeleton, { size: size === "sm" ? "sm" : "lg" }),
     decode: asRecord,
     render: (release, ctx) => {
-      const buildReleaseProps = _nullishCoalesce(_optionalChain([ctx, 'access', _5 => _5.extras, 'optionalAccess', _6 => _6.buildProductReleaseCardProps]), () => ( _chunk22XAPV6Ncjs.buildProductReleaseCardProps));
+      const buildReleaseProps = _nullishCoalesce(_optionalChain([ctx, 'access', _8 => _8.extras, 'optionalAccess', _9 => _9.buildProductReleaseCardProps]), () => ( _chunkDGNBXZXTcjs.buildProductReleaseCardProps));
       const releaseProps = buildReleaseProps(release);
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk22XAPV6Ncjs.ProductReleaseCard,
+        _chunkFZB4RMRKcjs.ProductReleaseCard,
         {
           size: ctx.size === "sm" ? "sm" : "lg",
           title: str(release, "title"),
@@ -559,10 +574,10 @@ var RELATED_CARD_REGISTRY = {
   webinar: programEntry("webinar"),
   event: programEntry("event"),
   investor_update: cardEntry({
-    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.InvestorUpdateCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
+    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.InvestorUpdateCardSkeleton, { size: size === "sm" ? "sm" : "default" }),
     decode: decodeInvestorUpdateRow,
     render: (update, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk22XAPV6Ncjs.InvestorUpdateCard,
+      _chunkDGNBXZXTcjs.InvestorUpdateCard,
       {
         update,
         size: ctx.legacySize,
@@ -577,10 +592,10 @@ var RELATED_CARD_REGISTRY = {
    *  step-numbered 'default' variant is for the guide detail page's "More in
    *  section" rail, not this full-width row. */
   onboarding_guide: cardEntry({
-    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.OnboardingGuideCardSkeleton, { size: size === "sm" ? "sm" : "catalog" }),
+    skeleton: (size) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.OnboardingGuideCardSkeleton, { size: size === "sm" ? "sm" : "catalog", published: false }),
     decode: decodeOnboardingGuideRow,
     render: (guide, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk22XAPV6Ncjs.OnboardingGuideCard,
+      _chunkDGNBXZXTcjs.OnboardingGuideCard,
       {
         guide,
         size: ctx.size === "sm" ? "sm" : "catalog",
@@ -597,10 +612,10 @@ var RELATED_CARD_REGISTRY = {
    *  href: an object with `href: undefined` is still truthy and would wrap the
    *  card in a dead <a>. */
   what_i_shipped: cardEntry({
-    skeleton: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNS64LMVEcjs.WhatIShippedCardSkeleton, {}),
+    skeleton: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFZB4RMRKcjs.WhatIShippedCardSkeleton, {}),
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkNS64LMVEcjs.WhatIShippedCard,
+      _chunkFZB4RMRKcjs.WhatIShippedCard,
       {
         entry,
         placeholderUrl: ctx.placeholderUrl,
@@ -610,10 +625,10 @@ var RELATED_CARD_REGISTRY = {
   }),
   /** Same shared employee-entry shape + anchor contract as What I Shipped. */
   how_i_work: cardEntry({
-    skeleton: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNS64LMVEcjs.HowIWorkCardSkeleton, {}),
+    skeleton: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFZB4RMRKcjs.HowIWorkCardSkeleton, {}),
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkNS64LMVEcjs.HowIWorkCard,
+      _chunkFZB4RMRKcjs.HowIWorkCard,
       {
         entry,
         placeholderUrl: ctx.placeholderUrl,
@@ -623,10 +638,10 @@ var RELATED_CARD_REGISTRY = {
   }),
   /** Same shared employee-entry shape + anchor contract as What I Shipped. */
   ai_prompt: cardEntry({
-    skeleton: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNS64LMVEcjs.AiPromptCardSkeleton, {}),
+    skeleton: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFZB4RMRKcjs.AiPromptCardSkeleton, {}),
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkNS64LMVEcjs.AiPromptCard,
+      _chunkFZB4RMRKcjs.AiPromptCard,
       {
         entry,
         placeholderUrl: ctx.placeholderUrl,
@@ -647,18 +662,18 @@ function DefaultLinkPropsProvider({
   children
 }) {
   if (!href) return children(null);
-  const newTab = _chunk22XAPV6Ncjs.decideNewTab.call(void 0, { href, targetPlatform, currentSource: "" });
+  const newTab = _chunkDGNBXZXTcjs.decideNewTab.call(void 0, { href, targetPlatform, currentSource: "" });
   return children(newTab ? { href, target: "_blank", rel: "noopener noreferrer" } : { href });
 }
 function defaultResolveHref(ref) {
   return { href: ref.url || null, targetPlatform: _nullishCoalesce(ref.targetPlatform, () => ( null)) };
 }
-function renderSkeletonForType(type, size, adminCampaignCard) {
+function renderSkeletonForType(type, size, adminCampaignCard, extras) {
   if (type === "marketing_campaign") {
     return adminCampaignCard ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, adminCampaignCard.Skeleton, { size: size === "sm" ? "sm" : "default" }) : null;
   }
   const entry = RELATED_CARD_REGISTRY[type];
-  return entry ? entry.skeleton(size) : null;
+  return entry ? entry.skeleton(size, extras) : null;
 }
 function CardForType({
   type,
@@ -696,7 +711,7 @@ function CardForType({
     // `item?.title as string | undefined` claimed a string without checking one:
     // a numeric title reached `buildOgPlaceholderUrl` as a number. `rowString`
     // makes the claim true.
-    placeholderUrl: _nullishCoalesce(_optionalChain([extras, 'optionalAccess', _7 => _7.buildOgPlaceholderUrl, 'optionalCall', _8 => _8(_nullishCoalesce(rowString(item, "title"), () => ( "")))]), () => ( void 0)),
+    placeholderUrl: _nullishCoalesce(_optionalChain([extras, 'optionalAccess', _10 => _10.buildOgPlaceholderUrl, 'optionalCall', _11 => _11(_nullishCoalesce(rowString(item, "title"), () => ( "")))]), () => ( void 0)),
     extras
   });
 }
@@ -705,9 +720,9 @@ function useGroupItems(type, refs, buildUrl) {
   const url = ids.length > 0 ? buildUrl(type, ids) : null;
   const [pages, setPages] = _react.useState.call(void 0, () => /* @__PURE__ */ new Map());
   const cached = url !== null ? pages.get(url) : void 0;
-  const { data, dataUrl, error } = _chunkNS64LMVEcjs.useSelfFetch.call(void 0, cached ? null : url);
+  const { data, dataUrl, error } = _chunkFZB4RMRKcjs.useSelfFetch.call(void 0, cached ? null : url);
   if (data != null && dataUrl !== null && !pages.has(dataUrl)) {
-    setPages(new Map(pages).set(dataUrl, _chunk22XAPV6Ncjs.extractItems.call(void 0, data)));
+    setPages(new Map(pages).set(dataUrl, _chunkDGNBXZXTcjs.extractItems.call(void 0, data)));
   }
   if (url === null) return { items: null, isLoading: false };
   return { items: _nullishCoalesce(cached, () => ( (error ? [] : null))), isLoading: !cached && !error };
@@ -716,7 +731,7 @@ function gridClassFor(columns) {
   return columns === 3 ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" : "grid grid-cols-1 sm:grid-cols-2 gap-6";
 }
 function resolveGroupConfig(type) {
-  return _nullishCoalesce(_chunkNS64LMVEcjs.CONTENT_REF_GROUPS[type], () => ( {
+  return _nullishCoalesce(_chunkFZB4RMRKcjs.CONTENT_REF_GROUPS[type], () => ( {
     label: type,
     order: 999,
     layout: "grid",
@@ -724,6 +739,36 @@ function resolveGroupConfig(type) {
   }));
 }
 var GROUP_PAGE_SIZE = 12;
+var GROUP_CLASS = "space-y-4";
+var GROUP_LIST_CLASS = "space-y-4";
+var GROUP_HEADING_CLASS = "font-semibold text-ods-text-secondary text-h5";
+var RAIL_CLASS = "flex flex-col gap-8";
+var RAIL_SKELETON_CARDS = 3;
+var RAIL_LIST_FOLD = 2;
+var RAIL_GRID_FOLD_ROWS = 2;
+var UNKNOWN_TYPE_CARD = "blog_post_existing";
+var GRID_COLUMNS_BY_STEP = { 2: [1, 2, 2], 3: [1, 2, 3] };
+function gridFoldClass(index, columns) {
+  const [phone, sm, lg] = GRID_COLUMNS_BY_STEP[columns].map((c) => c * RAIL_GRID_FOLD_ROWS);
+  if (index < phone) return void 0;
+  if (index < sm) return "hidden sm:block";
+  if (index < lg) return "hidden lg:block";
+  return "hidden";
+}
+function GroupHeading({ type }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: GROUP_HEADING_CLASS, children: _chunkFZB4RMRKcjs.getContentRefLabelOrTitleCase.call(void 0, type) });
+}
+function orderRailTypes(types, entityType) {
+  let ordered = _chunkFZB4RMRKcjs.orderContentRefTypes.call(void 0, types);
+  if (entityType) {
+    const canonicalEntityType = _chunkDGNBXZXTcjs.canonicalContentRefType.call(void 0, entityType);
+    const sameType = ordered.filter((t) => _chunkDGNBXZXTcjs.canonicalContentRefType.call(void 0, t) === canonicalEntityType);
+    if (sameType.length > 0) {
+      ordered = [...sameType, ...ordered.filter((t) => _chunkDGNBXZXTcjs.canonicalContentRefType.call(void 0, t) !== canonicalEntityType)];
+    }
+  }
+  return ordered;
+}
 function ContentGroup({
   type,
   refs,
@@ -733,7 +778,8 @@ function ContentGroup({
   LinkProvider,
   extras,
   adminCampaignCard,
-  heading
+  heading,
+  onLoadingChange
 }) {
   const config = resolveGroupConfig(type);
   const isListLayout = config.layout === "list";
@@ -748,18 +794,25 @@ function ContentGroup({
   const totalGroupPages = _chunkBLH2SFOOcjs.pageCount.call(void 0, refs.length, GROUP_PAGE_SIZE);
   const pageRefs = refs.slice((page - 1) * GROUP_PAGE_SIZE, page * GROUP_PAGE_SIZE);
   const { items, isLoading } = useGroupItems(type, pageRefs, buildUrl);
-  const groupPagination = totalGroupPages > 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRO72PRQIcjs.Pagination, { currentPage: page, totalPages: totalGroupPages, onPageChange: setPage }) : null;
+  const groupPagination = totalGroupPages > 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZRDMGMY7cjs.Pagination, { currentPage: page, totalPages: totalGroupPages, onPageChange: setPage }) : null;
+  _react.useEffect.call(void 0, () => {
+    onLoadingChange(type, isLoading);
+    return () => onLoadingChange(type, false);
+  }, [onLoadingChange, type, isLoading]);
   if (isLoading) {
-    const skeletons = pageRefs.map((r) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: renderSkeletonForType(type, cardSize, adminCampaignCard) }, r.id));
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNO5UJLLQcjs.LoadingRegion, { label: "Loading related content", className: "space-y-4", children: [
-      heading,
-      isListLayout ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-4", children: skeletons }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: gridClassFor(columns), children: skeletons }),
-      groupPagination
-    ] });
+    const skeletons = pageRefs.map((r) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-loading-item": true, children: renderSkeletonForType(type, cardSize, adminCampaignCard, extras) }, r.id));
+    return (
+      // The rail announces for every group (`announce={false}`): one rail, one "loading".
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { announce: false, className: GROUP_CLASS, "data-loading-item": true, children: [
+        heading,
+        isListLayout ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: GROUP_LIST_CLASS, children: skeletons }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: gridClassFor(columns), children: skeletons }),
+        groupPagination
+      ] })
+    );
   }
   if (!items) return null;
   const rowKey = (it) => {
-    const extracted = _chunk22XAPV6Ncjs.extractItemId.call(void 0, type, it);
+    const extracted = _chunkDGNBXZXTcjs.extractItemId.call(void 0, type, it);
     if (extracted !== null) return extracted;
     return String(typeof it === "object" && it !== null ? it.id : void 0);
   };
@@ -771,7 +824,7 @@ function ContentGroup({
     const resolved = resolveHref(contentRef);
     const href = _nullishCoalesce(resolved.href, () => ( ""));
     const targetPlatform = _nullishCoalesce(_nullishCoalesce(resolved.targetPlatform, () => ( contentRef.targetPlatform)), () => ( null));
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkProvider, { href: href || null, targetPlatform, children: (linkProps) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-loading-item": true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkProvider, { href: href || null, targetPlatform, children: (linkProps) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       CardForType,
       {
         type,
@@ -787,19 +840,20 @@ function ContentGroup({
   }).filter(Boolean);
   if (cards.length === 0) {
     if (groupPagination) {
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-4", children: [
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: GROUP_CLASS, "data-loading-item": true, children: [
         heading,
         groupPagination
       ] });
     }
     return null;
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-4", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: GROUP_CLASS, "data-loading-item": true, children: [
     heading,
-    isListLayout ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-4", children: cards }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: gridClassFor(columns), children: cards }),
+    isListLayout ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: GROUP_LIST_CLASS, children: cards }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: gridClassFor(columns), children: cards }),
     groupPagination
   ] });
 }
+var RAIL_TITLE_CLASS = "text-ods-text-primary text-h2";
 function RelatedContentSection({
   contentRefs,
   entityType,
@@ -822,16 +876,16 @@ function RelatedContentSection({
   emptyStateText = "No related content yet.",
   emptyState
 }) {
-  const suggestionsDisabled = _optionalChain([includeTypes, 'optionalAccess', _9 => _9.length]) === 0;
+  const suggestionsDisabled = _optionalChain([includeTypes, 'optionalAccess', _12 => _12.length]) === 0;
   const typeFilterParams = {
     types: includeTypes !== void 0 ? includeTypes.join(",") : void 0,
     excludeTypes: excludeTypes && excludeTypes.length > 0 ? excludeTypes.join(",") : void 0
   };
-  const authorUrl = contentRefs === void 0 && authorId && !suggestionsDisabled ? _chunkNS64LMVEcjs.buildSuggestionUrl.call(void 0, "/api/related-content", {
+  const authorUrl = contentRefs === void 0 && authorId && !suggestionsDisabled ? _chunkFZB4RMRKcjs.buildSuggestionUrl.call(void 0, "/api/related-content", {
     apiBaseUrl,
     extraParams: { authorId, ...typeFilterParams }
   }) : null;
-  const suggestUrl = _nullishCoalesce(authorUrl, () => ( (contentRefs === void 0 && entityType && entityId !== void 0 && entityId !== null && entityId !== "" && !suggestionsDisabled ? _chunkNS64LMVEcjs.buildSuggestionUrl.call(void 0, "/api/related-content", {
+  const suggestUrl = _nullishCoalesce(authorUrl, () => ( (contentRefs === void 0 && entityType && entityId !== void 0 && entityId !== null && entityId !== "" && !suggestionsDisabled ? _chunkFZB4RMRKcjs.buildSuggestionUrl.call(void 0, "/api/related-content", {
     apiBaseUrl,
     entityType,
     entityId,
@@ -848,25 +902,44 @@ function RelatedContentSection({
     () => !suggestionsDisabled && initialItems ? { refs: initialItems } : void 0,
     [initialItems, suggestionsDisabled]
   );
-  const { data, isLoading } = _chunkNS64LMVEcjs.useSelfFetch.call(void 0, suggestUrl, { initialData });
+  const { data, isLoading } = _chunkFZB4RMRKcjs.useSelfFetch.call(void 0, suggestUrl, { initialData });
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  const [loadingTypes, setLoadingTypes] = _react.useState.call(void 0, () => /* @__PURE__ */ new Set());
+  const onGroupLoadingChange = _react.useCallback.call(void 0, (type, loading) => {
+    setLoadingTypes((prev) => {
+      if (prev.has(type) === loading) return prev;
+      const next = new Set(prev);
+      if (loading) next.add(type);
+      else next.delete(type);
+      return next;
+    });
+  }, []);
   const effectiveBuildListUrl = _react.useMemo.call(void 0, 
-    () => _nullishCoalesce(buildListUrl2, () => ( ((type, ids) => _chunk22XAPV6Ncjs.buildListUrl.call(void 0, type, ids, apiBaseUrl)))),
+    () => _nullishCoalesce(buildListUrl2, () => ( ((type, ids) => _chunkDGNBXZXTcjs.buildListUrl.call(void 0, type, ids, apiBaseUrl)))),
     [buildListUrl2, apiBaseUrl]
   );
-  const refs = _nullishCoalesce(_nullishCoalesce(contentRefs, () => ( _optionalChain([data, 'optionalAccess', _10 => _10.refs]))), () => ( []));
+  const refs = _nullishCoalesce(_nullishCoalesce(contentRefs, () => ( _optionalChain([data, 'optionalAccess', _13 => _13.refs]))), () => ( []));
   const exclude = new Set(excludeTypes || []);
   const visibleRefs = exclude.size > 0 ? refs.filter((r) => !exclude.has(r.type)) : refs;
   if (!visibleRefs.length) {
-    if (!showWhenEmpty) return null;
-    if (isLoading) {
-      const skeletonType = _nullishCoalesce(_nullishCoalesce(_optionalChain([includeTypes, 'optionalAccess', _11 => _11[0]]), () => ( entityType)), () => ( "blog_post_existing"));
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNO5UJLLQcjs.LoadingRegion, { label: "Loading related content", className: "space-y-8", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-ods-text-primary text-h2", children: _chunk22XAPV6Ncjs.accentSentenceMarks.call(void 0, title) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: gridClassFor(columns), children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: renderSkeletonForType(skeletonType, "default", adminCampaignCard) }, i)) })
-      ] });
+    if (isLoading || inScope) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        RelatedContentSectionSkeleton,
+        {
+          title,
+          types: (_nullishCoalesce(includeTypes, () => ( []))).filter((t) => !exclude.has(t)),
+          entityType,
+          minResults,
+          sameTypeMinResults,
+          columns,
+          adminCampaignCard,
+          extras
+        }
+      );
     }
+    if (!showWhenEmpty) return null;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-8", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-2xl font-bold text-ods-text-primary", children: _chunk22XAPV6Ncjs.accentSentenceMarks.call(void 0, title) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-2xl font-bold text-ods-text-primary", children: _chunkDGNBXZXTcjs.accentSentenceMarks.call(void 0, title) }),
       _nullishCoalesce(emptyState, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary", children: emptyStateText })))
     ] });
   }
@@ -875,16 +948,24 @@ function RelatedContentSection({
     if (!grouped[ref.type]) grouped[ref.type] = [];
     grouped[ref.type].push(ref);
   }
-  let orderedTypes = _chunkNS64LMVEcjs.orderContentRefTypes.call(void 0, Object.keys(grouped));
-  if (entityType) {
-    const canonicalEntityType = _chunk22XAPV6Ncjs.canonicalContentRefType.call(void 0, entityType);
-    const sameType = orderedTypes.filter((t) => _chunk22XAPV6Ncjs.canonicalContentRefType.call(void 0, t) === canonicalEntityType);
-    if (sameType.length > 0) {
-      orderedTypes = [...sameType, ...orderedTypes.filter((t) => _chunk22XAPV6Ncjs.canonicalContentRefType.call(void 0, t) !== canonicalEntityType)];
-    }
+  const orderedTypes = orderRailTypes(Object.keys(grouped), entityType);
+  if (inScope) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      RelatedContentSectionSkeleton,
+      {
+        title,
+        types: orderedTypes,
+        entityType,
+        minResults,
+        sameTypeMinResults,
+        columns,
+        adminCampaignCard,
+        extras
+      }
+    );
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-8", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-ods-text-primary text-h2", children: _chunk22XAPV6Ncjs.accentSentenceMarks.call(void 0, title) }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { as: "section", label: "Loading related content", announce: loadingTypes.size > 0, className: RAIL_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: RAIL_TITLE_CLASS, children: _chunkDGNBXZXTcjs.accentSentenceMarks.call(void 0, title) }),
     orderedTypes.map((type) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ContentGroup,
       {
@@ -896,14 +977,58 @@ function RelatedContentSection({
         LinkProvider,
         extras,
         adminCampaignCard,
-        heading: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "font-semibold text-ods-text-secondary text-h5", children: _chunkNS64LMVEcjs.getContentRefLabelOrTitleCase.call(void 0, type) })
+        heading: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GroupHeading, { type }),
+        onLoadingChange: onGroupLoadingChange
       },
       type
     ))
   ] });
 }
+function RelatedContentSectionSkeleton({
+  title = "Related Content",
+  types,
+  entityType,
+  minResults,
+  sameTypeMinResults,
+  columns = 2,
+  adminCampaignCard,
+  extras
+}) {
+  const canonicalEntityType = entityType ? _chunkDGNBXZXTcjs.canonicalContentRefType.call(void 0, entityType) : null;
+  const unknownGroup = types.length === 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: GROUP_CLASS, "aria-hidden": true, "data-loading-item": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: GROUP_HEADING_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: gridClassFor(columns), children: Array.from({ length: Math.max(...GRID_COLUMNS_BY_STEP[columns]) * RAIL_GRID_FOLD_ROWS }, (_, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: gridFoldClass(i, columns), "data-loading-item": true, children: renderSkeletonForType(UNKNOWN_TYPE_CARD, "default", adminCampaignCard, extras) }, i)
+    )) })
+  ] }) : null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { as: "section", label: "Loading related content", className: RAIL_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: RAIL_TITLE_CLASS, children: title ? _chunkDGNBXZXTcjs.accentSentenceMarks.call(void 0, title) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/2" }) }),
+    unknownGroup,
+    orderRailTypes(new Set(types), entityType).map((type) => {
+      const config = resolveGroupConfig(type);
+      const sameType = canonicalEntityType !== null && _chunkDGNBXZXTcjs.canonicalContentRefType.call(void 0, type) === canonicalEntityType;
+      const isList = config.layout === "list";
+      const fold = isList ? RAIL_LIST_FOLD : Math.max(...GRID_COLUMNS_BY_STEP[columns]) * RAIL_GRID_FOLD_ROWS;
+      const count = Math.min(
+        GROUP_PAGE_SIZE,
+        fold,
+        _nullishCoalesce((sameType ? _nullishCoalesce(sameTypeMinResults, () => ( minResults)) : minResults), () => ( RAIL_SKELETON_CARDS))
+      );
+      const cards = Array.from({ length: count }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: isList ? void 0 : gridFoldClass(i, columns), "data-loading-item": true, children: renderSkeletonForType(type, config.gridSize, adminCampaignCard, extras) }, i)
+      ));
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: GROUP_CLASS, "aria-hidden": true, "data-loading-item": true, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GroupHeading, { type }),
+        isList ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: GROUP_LIST_CLASS, children: cards }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: gridClassFor(columns), children: cards })
+      ] }, type);
+    })
+  ] });
+}
+
 
 
 
 
-exports.GROUP_PAGE_SIZE = GROUP_PAGE_SIZE; exports.RelatedContentSection = RelatedContentSection;
+exports.GROUP_PAGE_SIZE = GROUP_PAGE_SIZE; exports.RelatedContentSection = RelatedContentSection; exports.RelatedContentSectionSkeleton = RelatedContentSectionSkeleton;

package/dist/chunk-RMUSPTJN.cjs

@@ -0,0 +1,102 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunkDGNBXZXTcjs = require('./chunk-DGNBXZXT.cjs');
+
+
+
+var _chunkJTSUAHDLcjs = require('./chunk-JTSUAHDL.cjs');
+
+
+var _chunkE76ONBKFcjs = require('./chunk-E76ONBKF.cjs');
+
+
+
+
+
+
+var _chunkXFRBEXQNcjs = require('./chunk-XFRBEXQN.cjs');
+
+
+var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
+
+
+var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
+
+// src/components/shared/article-author-byline.tsx
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var BYLINE_FRAME_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, 
+  "rounded-lg border border-ods-border bg-ods-card p-6",
+  "flex flex-col items-start gap-4 content-md:flex-row"
+);
+var BYLINE_AVATAR_SIZE = { md: "byline", lg: "xl" };
+var AVATAR_BORDER_CLASS = "rounded-full border-2 border-ods-border";
+var BODY_CLASS = "min-w-0 flex-1";
+var NAME_ROW_CLASS = "flex flex-wrap items-baseline gap-x-3 gap-y-1";
+var NAME_CLASS = "text-ods-text-primary text-h5";
+var JOB_TITLE_CLASS = "text-body-sm mt-0.5 font-body text-ods-text-secondary";
+var BIO_CLASS = "text-body-md mt-2 font-body leading-relaxed text-ods-text-secondary";
+function formatDate(value) {
+  return _chunkJTSUAHDLcjs.formatDateWithTimezone.call(void 0, value, null, "long");
+}
+function ArticleAuthorByline({
+  author,
+  avatar,
+  bio,
+  jobTitle,
+  publishedAt,
+  href,
+  fallbackBio,
+  size = "md",
+  proxyImageUrl,
+  className
+}) {
+  const proxiedAvatar = _chunkDGNBXZXTcjs.useProxiedImageUrl.call(void 0, avatar, { proxyImageUrl });
+  const loading = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  if (loading && !author) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArticleAuthorBylineSkeleton, { size, className });
+  if (!author) return null;
+  const avatarSizeClass = _chunkXFRBEXQNcjs.AVATAR_SIZE[BYLINE_AVATAR_SIZE[size]];
+  const avatarIconClass = size === "lg" ? "w-8 h-8" : "w-7 h-7";
+  const avatarDim = _chunkXFRBEXQNcjs.AVATAR_SIZE_PX[BYLINE_AVATAR_SIZE[size]];
+  const formattedBio = _chunkJTSUAHDLcjs.formatBioText.call(void 0, _nullishCoalesce(bio, () => ( null)));
+  const dateLabel = publishedAt ? formatDate(publishedAt) : "";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, BYLINE_FRAME_CLASS, className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0", children: avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkE76ONBKFcjs.next_image_default,
+      {
+        src: proxiedAvatar || avatar,
+        alt: author,
+        width: avatarDim,
+        height: avatarDim,
+        className: _chunk65VVJSQZcjs.cn.call(void 0, AVATAR_BORDER_CLASS, "object-cover", avatarSizeClass)
+      }
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex items-center justify-center bg-ods-bg", AVATAR_BORDER_CLASS, avatarSizeClass), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.User, { className: _chunk65VVJSQZcjs.cn.call(void 0, "text-ods-text-secondary", avatarIconClass) }) }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: BODY_CLASS, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: NAME_ROW_CLASS, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: NAME_CLASS, children: href ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkV45KLJQPcjs.next_link_default, { href, className: "transition-colors hover:text-ods-accent", children: author }) : author }),
+        dateLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-body-sm inline-flex items-center gap-1 font-body text-ods-text-secondary", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Calendar, { className: "h-3 w-3" }),
+          dateLabel
+        ] })
+      ] }),
+      jobTitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: JOB_TITLE_CLASS, children: jobTitle }),
+      formattedBio ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: BIO_CLASS, children: formattedBio }) : fallbackBio ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-body-md mt-2 font-body italic text-ods-text-secondary", children: fallbackBio }) : null
+    ] })
+  ] });
+}
+function ArticleAuthorBylineSkeleton({ size = "md", className }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, BYLINE_FRAME_CLASS, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.UnifiedSkeleton, { variant: "circular", className: _chunkXFRBEXQNcjs.AVATAR_SIZE[BYLINE_AVATAR_SIZE[size]] }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, BODY_CLASS, "w-full"), children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: NAME_ROW_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: NAME_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-40" }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: JOB_TITLE_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-32" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: BIO_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", lines: 3, className: "w-full" }) })
+    ] })
+  ] });
+}
+
+
+
+
+exports.ArticleAuthorByline = ArticleAuthorByline; exports.ArticleAuthorBylineSkeleton = ArticleAuthorBylineSkeleton;