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

package/dist/components/shared/product-release/release-detail-page.d.ts

@@ -6,7 +6,6 @@ export interface MarkdownRendererProps {
 }
 import type { DeliveryResponse } from '../../../types/delivery';
 import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
-export type { RoadmapItem, DeliveryResponse };
 export interface RoadmapSectionProps {
     items: RoadmapItem[];
     isLoading: boolean;

package/dist/components/shared/product-release/release-detail-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"release-detail-page.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/release-detail-page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"release-detail-page.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/release-detail-page.tsx"],"names":[],"mappings":"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"}

package/dist/components/shared/product-release/release-detail-page.js

@@ -7,7 +7,7 @@ import { useRouter } from "../../../embed-shims/next-navigation.js";
 import { useSelfFetch } from "../../../hooks/use-self-fetch.js";
 import { formatReleaseDate } from "../../../utils/date-formatters.js";
 import { contentFetch } from "../../../utils/embed-content-fetch.js";
-import { EntityMetadataAuthorCell } from "../../chat/entity-cards/entity-author-card.js";
+import { EntityMetadataAuthorCell, EntityMetadataValueCell } from "../../chat/entity-cards/entity-author-card.js";
 import { EntityTagBadges } from "../../features/entity-tag-badges.js";
 import { useCaptions } from "../../features/use-captions.js";
 import { Video } from "../../features/video.js";
@@ -18,13 +18,46 @@ import {
 import { GithubClassicIcon } from "../../icons-v2-generated/brand-logos/github-classic-icon.js";
 import { PageShell } from "../../layout/article-detail-layout.js";
 import { PageLayout } from "../../layout/page-layout.js";
+import { LoadingRegion } from "../../loading/loading-region.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
 import { Card, CardContent } from "../../ui/card.js";
 import { FadePreview } from "../../ui/fade-preview.js";
+import { LoadingScope, useLoadingScope } from "../../ui/loading-scope.js";
 import { RichMarkdownRenderer } from "../../ui/markdown/index.js";
 import { ReleaseChangelogSection } from "../../ui/release-changelog-section.js";
-import { DetailPageSkeleton } from "../detail-page-skeleton.js";
 import { MediaGalleryStrip } from "../media-gallery-strip.js";
 const DefaultMarkdownRenderer = RichMarkdownRenderer;
+const CONTENT_STACK_CLASS = "space-y-6 content-md:space-y-8";
+const RELEASE_TITLE_SKELETON_LINES = { phone: 7, md: 4, lg: 2 };
+const METADATA_GRID_CLASS = "grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border content-md:grid-cols-4";
+const METADATA_CELL_EDGE_CLASS = "border-b border-ods-border bg-ods-card content-md:border-b-0 content-md:border-r";
+const SUMMARY_CLASS = "text-ods-text-primary text-h4";
+const RELEASE_TAG_ROW_FOLD = 3;
+const RELEASE_TAG_SKELETON_WIDTH_CLASS = "w-[10ch]";
+const RELEASE_TYPE_LABEL = "Release Type";
+const RELEASE_STATUS_LABEL = "Release Status";
+const RELEASE_DATE_LABEL = "Release Date";
+const EMPTY_RELEASE = {
+  title: "",
+  version: "",
+  summary: null,
+  content: null,
+  release_date: "",
+  release_type: "",
+  release_status: ""
+};
+function ReleaseSummary({ summary }) {
+  if (useLoadingScope()) {
+    return /* @__PURE__ */ jsx("div", { className: SUMMARY_CLASS, children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 7, className: "w-full content-md:hidden" }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 3, className: "hidden w-full content-md:block" })
+    ] }) });
+  }
+  if (!summary) return null;
+  return /* @__PURE__ */ jsx("div", { className: SUMMARY_CLASS, children: /* @__PURE__ */ jsx("p", { children: summary }) });
+}
+const DELIVERY_PREVIEW_HEIGHT = 300;
+const DELIVERY_TABLES_STACK_CLASS = "space-y-4";
 const DEFAULT_ENDPOINT = "/api/releases";
 function ReleaseDetailPage({
   authorHref,
@@ -59,10 +92,11 @@ function ReleaseDetailPage({
   const [deliveryData, setDeliveryData] = useState(null);
   const [roadmapLoading, setRoadmapLoading] = useState(false);
   const [deliveryLoading, setDeliveryLoading] = useState(false);
+  const scoped = useLoadingScope();
   useEffect(() => {
     let cancelled = false;
     async function fetchLinkedTasks() {
-      if (!release) return;
+      if (!release || scoped) return;
       try {
         const roadmapTasksData = release.clickup_roadmap_tasks;
         if (roadmapTasksData && roadmapTasksData.length > 0 && RoadmapSection) {
@@ -97,15 +131,9 @@ function ReleaseDetailPage({
     return () => {
       cancelled = true;
     };
-  }, [release, RoadmapSection, DeliverySection, roadmapApiEndpoint, deliveryApiEndpoint]);
-  if (isLoading && !release) {
-    return renderShell(
-      // Match the loaded page's top offset (TitleBlock's
-      // `pt-[var(--spacing-system-l)]`) so content doesn't jump on load.
-      /* @__PURE__ */ jsx("div", { className: "pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ jsx(DetailPageSkeleton, { bare: true, metadataColumns: 4, showImageGallery: true }) })
-    );
-  }
-  if (error || !release) {
+  }, [release, scoped, RoadmapSection, DeliverySection, roadmapApiEndpoint, deliveryApiEndpoint]);
+  const loading = scoped || isLoading && !release;
+  if (!loading && (error || !release)) {
     return renderShell(
       /* @__PURE__ */ jsxs("div", { className: "py-16 text-center", children: [
         /* @__PURE__ */ jsx("h1", { className: "mb-4 text-ods-text-primary text-h1", children: "Release Not Found" }),
@@ -113,235 +141,273 @@ function ReleaseDetailPage({
       ] })
     );
   }
-  const hasBreakingChanges = Array.isArray(release.breaking_changes) && release.breaking_changes.length > 0;
-  const releaseTitle = release.title;
-  const releaseVersion = release.version;
-  const releaseSummary = release.summary;
-  const releaseContent = release.content;
-  const releaseDate = release.release_date;
-  const releaseType = release.release_type;
-  const releaseStatus = release.release_status;
-  const releaseMedia = release.release_media;
-  const author = release.author;
-  const githubReleases = release.github_releases;
-  const knowledgeBaseLinks = release.knowledge_base_links;
-  const migrationGuideUrl = release.migration_guide_url;
-  const documentationUrl = release.documentation_url;
-  const youtubeUrl = release.youtube_url;
-  const mainVideoUrl = release.main_video_url;
-  const videoBites = release.video_bites;
-  const highlightVideoUrl = release.highlight_video_url;
-  const highlightVideoThumbnail = release.highlight_video_thumbnail;
-  const entityCaptions = captions.forEntity("product_release", release);
-  const captionsUrl = release.captionsUrl ?? entityCaptions.captionsUrl;
-  const highlightCaptionsUrl = release.highlightCaptionsUrl ?? entityCaptions.highlightCaptionsUrl;
-  const breakingChanges = release.breaking_changes;
-  const featuresAdded = release.features_added;
-  const bugFixed = release.bugs_fixed;
-  const improvements = release.improvements;
-  return renderShell(
-    /* @__PURE__ */ jsxs(
-      PageLayout,
-      {
-        title: releaseTitle,
-        subtitle: `Version: ${releaseVersion}`,
-        titleSize: "h1",
-        titleWrap: true,
-        backButton: showBackButton ? { label: backLabel, onClick: () => router.push(backHref) } : void 0,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-6 content-md:space-y-8", children: [
-            /* @__PURE__ */ jsx(EntityTagBadges, { tags: release.product_release_tags }),
-            /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border content-md:grid-cols-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-ods-text-primary text-h4", children: releaseType.toLocaleUpperCase() }),
-                /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "Release Type" })
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-ods-text-primary text-h4", children: releaseStatus.toLocaleUpperCase() }),
-                /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "Release Status" })
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-ods-text-primary text-h4", children: formatReleaseDate(releaseDate) }),
-                /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "Release Date" })
-              ] }) }),
-              /* @__PURE__ */ jsx(
-                EntityMetadataAuthorCell,
-                {
-                  author: author ?? { full_name: null, avatar_url: null },
-                  authorHref: author?.full_name ? authorHref : void 0
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(MediaGalleryStrip, { items: releaseMedia ?? [] }),
-            releaseSummary && /* @__PURE__ */ jsx("div", { className: "text-ods-text-primary text-h4", children: /* @__PURE__ */ jsx("p", { children: releaseSummary }) }),
-            VideoDisplaySection ? /* @__PURE__ */ jsx(
-              VideoDisplaySection,
+  const view = release ?? EMPTY_RELEASE;
+  const hasBreakingChanges = Array.isArray(view.breaking_changes) && view.breaking_changes.length > 0;
+  const releaseTitle = view.title;
+  const releaseVersion = view.version;
+  const releaseSummary = view.summary;
+  const releaseContent = view.content;
+  const releaseDate = view.release_date;
+  const releaseType = view.release_type;
+  const releaseStatus = view.release_status;
+  const releaseMedia = view.release_media;
+  const author = view.author;
+  const githubReleases = view.github_releases;
+  const knowledgeBaseLinks = view.knowledge_base_links;
+  const migrationGuideUrl = view.migration_guide_url;
+  const documentationUrl = view.documentation_url;
+  const youtubeUrl = view.youtube_url;
+  const mainVideoUrl = view.main_video_url;
+  const videoBites = view.video_bites;
+  const highlightVideoUrl = view.highlight_video_url;
+  const highlightVideoThumbnail = view.highlight_video_thumbnail;
+  const entityCaptions = captions.forEntity("product_release", view);
+  const captionsUrl = view.captionsUrl ?? entityCaptions.captionsUrl;
+  const highlightCaptionsUrl = view.highlightCaptionsUrl ?? entityCaptions.highlightCaptionsUrl;
+  const breakingChanges = view.breaking_changes;
+  const featuresAdded = view.features_added;
+  const bugFixed = view.bugs_fixed;
+  const improvements = view.improvements;
+  const page = /* @__PURE__ */ jsxs(
+    PageLayout,
+    {
+      title: releaseTitle,
+      subtitle: loading ? void 0 : `Version: ${releaseVersion}`,
+      loading,
+      subtitleRow: "always",
+      titleSize: "h1",
+      titleWrap: true,
+      titleSkeletonLines: RELEASE_TITLE_SKELETON_LINES,
+      backButton: showBackButton ? { label: backLabel, onClick: () => router.push(backHref) } : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: CONTENT_STACK_CLASS, children: [
+          /* @__PURE__ */ jsx(
+            EntityTagBadges,
+            {
+              tags: view.product_release_tags,
+              max: RELEASE_TAG_ROW_FOLD,
+              skeletonItemClassName: RELEASE_TAG_SKELETON_WIDTH_CLASS
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: METADATA_GRID_CLASS, children: [
+            /* @__PURE__ */ jsx(
+              EntityMetadataValueCell,
               {
-                mainVideoUrl,
-                youtubeUrl,
-                highlightVideoUrl,
-                highlightVideoThumbnail,
-                title: releaseTitle,
-                videoBites,
-                bitesTitle: DEFAULT_VIDEO_BITES_TITLE,
-                filterPublishedBites: true,
-                bitesProfile: toStripProfile(author),
-                bitesHref: typeof release.slug === "string" ? `/releases/${release.slug}` : void 0,
-                captionsUrl,
-                highlightCaptionsUrl
+                value: releaseType,
+                label: RELEASE_TYPE_LABEL,
+                className: METADATA_CELL_EDGE_CLASS
               }
-            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              youtubeUrl && /* @__PURE__ */ jsx(Video, { kind: "youtube", url: youtubeUrl, title: `${releaseTitle} - Video`, layout: "native" }),
-              !youtubeUrl && mainVideoUrl && /* @__PURE__ */ jsx(Video, { url: mainVideoUrl, captionsUrl, layout: "centered" }),
-              highlightVideoUrl && /* @__PURE__ */ jsx(
-                Video,
-                {
-                  url: highlightVideoUrl,
-                  poster: highlightVideoThumbnail,
-                  captionsUrl: highlightCaptionsUrl,
-                  layout: "centered"
-                }
-              )
-            ] }),
-            releaseContent && /* @__PURE__ */ jsx("div", { className: "text-ods-text-primary text-h4", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: releaseContent }) }),
-            hasBreakingChanges && /* @__PURE__ */ jsx(Card, { className: "border-ods-error bg-ods-error/10", children: /* @__PURE__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-ods-error" }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-ods-error text-h3", children: "Breaking Changes" }),
-                /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary", children: "This release contains breaking changes. Review carefully before upgrading." })
-              ] })
-            ] }) }) }),
+            ),
             /* @__PURE__ */ jsx(
-              ReleaseChangelogSection,
+              EntityMetadataValueCell,
               {
-                title: "Breaking Changes",
-                entries: breakingChanges || [],
-                isBreaking: true,
-                hideTitle: true,
-                icon: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6" }),
-                MarkdownRenderer
+                value: releaseStatus,
+                label: RELEASE_STATUS_LABEL,
+                className: METADATA_CELL_EDGE_CLASS
               }
             ),
             /* @__PURE__ */ jsx(
-              ReleaseChangelogSection,
+              EntityMetadataValueCell,
               {
-                title: "Features Added",
-                entries: featuresAdded || [],
-                icon: /* @__PURE__ */ jsx(Sparkles, { className: "h-6 w-6" }),
-                previewFirst: true,
-                MarkdownRenderer
+                value: releaseDate ? formatReleaseDate(releaseDate) : "",
+                label: RELEASE_DATE_LABEL,
+                className: METADATA_CELL_EDGE_CLASS,
+                uppercase: false
               }
             ),
             /* @__PURE__ */ jsx(
-              ReleaseChangelogSection,
+              EntityMetadataAuthorCell,
               {
-                title: "Bugs Fixed",
-                entries: bugFixed || [],
-                icon: /* @__PURE__ */ jsx(Wrench, { className: "h-6 w-6" }),
-                previewFirst: true,
-                MarkdownRenderer
+                author: author ?? { full_name: null, avatar_url: null },
+                authorHref: author?.full_name ? authorHref : void 0
               }
-            ),
+            )
+          ] }),
+          (loading || releaseMedia && releaseMedia.length > 0) && /* @__PURE__ */ jsx(MediaGalleryStrip, { items: releaseMedia ?? [] }),
+          /* @__PURE__ */ jsx(ReleaseSummary, { summary: releaseSummary }),
+          loading ? null : /* @__PURE__ */ jsx("div", { "data-loading-optional": true, className: `${CONTENT_STACK_CLASS} empty:hidden`, children: VideoDisplaySection ? /* @__PURE__ */ jsx(
+            VideoDisplaySection,
+            {
+              mainVideoUrl,
+              youtubeUrl,
+              highlightVideoUrl,
+              highlightVideoThumbnail,
+              title: releaseTitle,
+              videoBites,
+              bitesTitle: DEFAULT_VIDEO_BITES_TITLE,
+              filterPublishedBites: true,
+              bitesProfile: toStripProfile(author),
+              bitesHref: typeof view.slug === "string" ? `/releases/${view.slug}` : void 0,
+              captionsUrl,
+              highlightCaptionsUrl
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            youtubeUrl && /* @__PURE__ */ jsx(Video, { kind: "youtube", url: youtubeUrl, title: `${releaseTitle} - Video`, layout: "native" }),
+            !youtubeUrl && mainVideoUrl && /* @__PURE__ */ jsx(Video, { url: mainVideoUrl, captionsUrl, layout: "centered" }),
+            highlightVideoUrl && /* @__PURE__ */ jsx(
+              Video,
+              {
+                url: highlightVideoUrl,
+                poster: highlightVideoThumbnail,
+                captionsUrl: highlightCaptionsUrl,
+                layout: "centered"
+              }
+            )
+          ] }) }),
+          releaseContent && /* @__PURE__ */ jsx("div", { className: "text-ods-text-primary text-h4", "data-loading-optional": true, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: releaseContent }) }),
+          hasBreakingChanges && /* @__PURE__ */ jsx(Card, { className: "border-ods-error bg-ods-error/10", "data-loading-optional": true, children: /* @__PURE__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-ods-error" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-ods-error text-h3", children: "Breaking Changes" }),
+              /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary", children: "This release contains breaking changes. Review carefully before upgrading." })
+            ] })
+          ] }) }) }),
+          loading ? null : /* @__PURE__ */ jsx(
+            ReleaseChangelogSection,
+            {
+              title: "Breaking Changes",
+              entries: breakingChanges || [],
+              isBreaking: true,
+              hideTitle: true,
+              loadingOptional: true,
+              icon: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6" }),
+              MarkdownRenderer
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ReleaseChangelogSection,
+            {
+              title: "Features Added",
+              entries: featuresAdded || [],
+              icon: /* @__PURE__ */ jsx(Sparkles, { className: "h-6 w-6" }),
+              previewFirst: true,
+              MarkdownRenderer
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ReleaseChangelogSection,
+            {
+              title: "Bugs Fixed",
+              entries: bugFixed || [],
+              icon: /* @__PURE__ */ jsx(Wrench, { className: "h-6 w-6" }),
+              previewFirst: true,
+              MarkdownRenderer
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ReleaseChangelogSection,
+            {
+              title: "Improvements",
+              entries: improvements || [],
+              icon: /* @__PURE__ */ jsx(TrendingUp, { className: "h-6 w-6" }),
+              previewFirst: true,
+              MarkdownRenderer
+            }
+          ),
+          RoadmapSection && (roadmapLoading || roadmapTasks.length > 0) && /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", "data-loading-optional": true, children: [
+            /* @__PURE__ */ jsx("p", { className: "tracking-[-0.28px] text-ods-text-secondary text-h5", children: "Related Roadmap Items" }),
             /* @__PURE__ */ jsx(
-              ReleaseChangelogSection,
+              RoadmapSection,
               {
-                title: "Improvements",
-                entries: improvements || [],
-                icon: /* @__PURE__ */ jsx(TrendingUp, { className: "h-6 w-6" }),
-                previewFirst: true,
-                MarkdownRenderer
+                items: roadmapTasks,
+                isLoading: roadmapLoading,
+                onItemUpdate: (updatedItem) => {
+                  setRoadmapTasks((prevTasks) => prevTasks.map((task) => task.id === updatedItem.id ? updatedItem : task));
+                }
               }
-            ),
-            RoadmapSection && (roadmapLoading || roadmapTasks.length > 0) && /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "tracking-[-0.28px] text-ods-text-secondary text-h5", children: "Related Roadmap Items" }),
-              /* @__PURE__ */ jsx(
-                RoadmapSection,
+            )
+          ] }),
+          DeliverySection && (deliveryLoading || deliveryData && (deliveryData.completed.length > 0 || deliveryData.inProgress.length > 0)) && /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", "data-loading-optional": true, children: [
+            /* @__PURE__ */ jsx("p", { className: "tracking-[-0.28px] text-ods-text-secondary text-h5", children: "Related Enhancements and Bug-fixes" }),
+            (() => {
+              const deliveryCount = deliveryData ? deliveryData.completed.length + deliveryData.inProgress.length : 0;
+              return deliveryLoading ? (
+                // The loaded preview's frame, its height written into the markup (`fixedHeight`), so the tables'
+                // loading state takes the collapsed preview's place, toggle row included. Inert: nothing to open yet.
+                /* @__PURE__ */ jsx("div", { inert: true, children: /* @__PURE__ */ jsx(FadePreview, { fixedHeight: true, collapsedHeight: DELIVERY_PREVIEW_HEIGHT, children: /* @__PURE__ */ jsx("div", { className: DELIVERY_TABLES_STACK_CLASS, children: /* @__PURE__ */ jsx(DeliverySection, { data: deliveryData, isLoading: deliveryLoading }) }) }) })
+              ) : /* @__PURE__ */ jsx(
+                FadePreview,
                 {
-                  items: roadmapTasks,
-                  isLoading: roadmapLoading,
-                  onItemUpdate: (updatedItem) => {
-                    setRoadmapTasks((prevTasks) => prevTasks.map((task) => task.id === updatedItem.id ? updatedItem : task));
-                  }
+                  hiddenCount: deliveryCount - 1,
+                  collapsedHeight: DELIVERY_PREVIEW_HEIGHT,
+                  resetKey: deliveryCount,
+                  children: /* @__PURE__ */ jsx("div", { className: DELIVERY_TABLES_STACK_CLASS, children: /* @__PURE__ */ jsx(DeliverySection, { data: deliveryData, isLoading: false }) })
                 }
-              )
-            ] }),
-            DeliverySection && (deliveryLoading || deliveryData && (deliveryData.completed.length > 0 || deliveryData.inProgress.length > 0)) && /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "tracking-[-0.28px] text-ods-text-secondary text-h5", children: "Related Enhancements and Bug-fixes" }),
-              (() => {
-                const deliveryCount = deliveryData ? deliveryData.completed.length + deliveryData.inProgress.length : 0;
-                return deliveryLoading ? /* @__PURE__ */ jsx(DeliverySection, { data: deliveryData, isLoading: deliveryLoading }) : /* @__PURE__ */ jsx(FadePreview, { hiddenCount: deliveryCount - 1, collapsedHeight: 300, resetKey: deliveryCount, children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(DeliverySection, { data: deliveryData, isLoading: false }) }) });
-              })()
-            ] }),
-            (githubReleases?.length || knowledgeBaseLinks?.length || migrationGuideUrl || documentationUrl) && /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "tracking-[-0.28px] text-ods-text-secondary text-h5", children: "Related Links" }),
-              /* @__PURE__ */ jsx(Card, { className: "border-ods-border bg-ods-card p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                githubReleases && githubReleases.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: githubReleases.map((ghRelease) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
-                  /* @__PURE__ */ jsx(GithubClassicIcon, { className: "shrink-0", size: 24, color: "var(--color-text-secondary)" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4", children: "Github Release" }),
-                  /* @__PURE__ */ jsx(
-                    Link,
-                    {
-                      href: ghRelease.github_release_url,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "text-ods-accent text-h4 hover:underline",
-                      children: ghRelease.github_release_url.split("/").pop()
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(ExternalLink, { className: "h-6 w-6 shrink-0 text-ods-accent" })
-                ] }, ghRelease.id)) }),
-                knowledgeBaseLinks && knowledgeBaseLinks.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: knowledgeBaseLinks.map((linkObj) => {
-                  const path = typeof linkObj === "string" ? linkObj : linkObj.kb_article_path;
-                  const linkId = typeof linkObj === "string" ? path : linkObj.id || path;
-                  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
-                    /* @__PURE__ */ jsx(BookMarked, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
-                    /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4", children: "Knowledge Base" }),
-                    /* @__PURE__ */ jsx(
-                      Link,
-                      {
-                        href: path.startsWith("http") ? path : `/knowledge-base${path.startsWith("/") ? "" : "/"}${path}`,
-                        className: "text-ods-accent text-h4 hover:underline",
-                        children: path.replace(/^\//, "").split("/").pop()?.replace(/-/g, " ") || "View Article"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(ExternalLink, { className: "h-6 w-6 shrink-0 text-ods-accent" })
-                  ] }, linkId);
-                }) }),
-                migrationGuideUrl && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
-                  /* @__PURE__ */ jsx(BookMarked, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
-                  /* @__PURE__ */ jsx(
-                    Link,
-                    {
-                      href: migrationGuideUrl,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "text-ods-accent text-h4 hover:underline",
-                      children: "\u{1F4D6} Migration Guide"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(ExternalLink, { className: "h-6 w-6 shrink-0 text-ods-accent" })
-                ] }),
-                documentationUrl && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+              );
+            })()
+          ] }),
+          (githubReleases?.length || knowledgeBaseLinks?.length || migrationGuideUrl || documentationUrl) && /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1", "data-loading-optional": true, children: [
+            /* @__PURE__ */ jsx("p", { className: "tracking-[-0.28px] text-ods-text-secondary text-h5", children: "Related Links" }),
+            /* @__PURE__ */ jsx(Card, { className: "border-ods-border bg-ods-card p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              githubReleases && githubReleases.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: githubReleases.map((ghRelease) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+                /* @__PURE__ */ jsx(GithubClassicIcon, { className: "shrink-0", size: 24, color: "var(--color-text-secondary)" }),
+                /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4", children: "Github Release" }),
+                /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: ghRelease.github_release_url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-ods-accent text-h4 hover:underline",
+                    children: ghRelease.github_release_url.split("/").pop()
+                  }
+                ),
+                /* @__PURE__ */ jsx(ExternalLink, { className: "h-6 w-6 shrink-0 text-ods-accent" })
+              ] }, ghRelease.id)) }),
+              knowledgeBaseLinks && knowledgeBaseLinks.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: knowledgeBaseLinks.map((linkObj) => {
+                const path = typeof linkObj === "string" ? linkObj : linkObj.kb_article_path;
+                const linkId = typeof linkObj === "string" ? path : linkObj.id || path;
+                return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
                   /* @__PURE__ */ jsx(BookMarked, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4", children: "Knowledge Base" }),
                   /* @__PURE__ */ jsx(
                     Link,
                     {
-                      href: documentationUrl,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
+                      href: path.startsWith("http") ? path : `/knowledge-base${path.startsWith("/") ? "" : "/"}${path}`,
                       className: "text-ods-accent text-h4 hover:underline",
-                      children: "\u{1F4DA} Documentation"
+                      children: path.replace(/^\//, "").split("/").pop()?.replace(/-/g, " ") || "View Article"
                     }
                   ),
                   /* @__PURE__ */ jsx(ExternalLink, { className: "h-6 w-6 shrink-0 text-ods-accent" })
-                ] })
-              ] }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Fragment2, { children: relatedContent }, "related-content")
-        ]
-      }
-    )
+                ] }, linkId);
+              }) }),
+              migrationGuideUrl && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+                /* @__PURE__ */ jsx(BookMarked, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+                /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: migrationGuideUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-ods-accent text-h4 hover:underline",
+                    children: "\u{1F4D6} Migration Guide"
+                  }
+                ),
+                /* @__PURE__ */ jsx(ExternalLink, { className: "h-6 w-6 shrink-0 text-ods-accent" })
+              ] }),
+              documentationUrl && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+                /* @__PURE__ */ jsx(BookMarked, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+                /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: documentationUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-ods-accent text-h4 hover:underline",
+                    children: "\u{1F4DA} Documentation"
+                  }
+                ),
+                /* @__PURE__ */ jsx(ExternalLink, { className: "h-6 w-6 shrink-0 text-ods-accent" })
+              ] })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Fragment2, { children: relatedContent }, "related-content")
+      ]
+    }
+  );
+  return renderShell(
+    loading ? /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the release", announce: !scoped, children: /* @__PURE__ */ jsx(LoadingScope, { children: page }) }) : page
   );
 }
 export {

package/dist/components/shared/roadmap/roadmap-grid-skeleton.d.ts

@@ -3,6 +3,12 @@
  * renders `RoadmapCard`, so each placeholder is that card's own loading box,
  * `RoadmapCardSkeleton`.
  */
+/**
+ * The grid's box, read by `RoadmapGrid` and by its skeleton: one column, two from `content-md` when `columns` is 2,
+ * and the desktop left margin that aligns it with the page hero's title. LITERAL class strings: an interpolated
+ * `content-md:grid-cols-${n}` is invisible to Tailwind's scanner and is never generated.
+ */
+export declare function roadmapGridClass(columns: 1 | 2, showLeftMargin: boolean): string;
 export interface RoadmapGridSkeletonProps {
     /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
     region?: boolean;
@@ -12,6 +18,8 @@ export interface RoadmapGridSkeletonProps {
      *  the page hero's title block. Default `true`. Related-content rails
      *  inside narrower surfaces (e.g. the release detail page) pass `false`. */
     showLeftMargin?: boolean;
+    /** The grid's columns from `content-md` (`RoadmapGrid`'s `columns`). Default `2`. */
+    columns?: 1 | 2;
 }
-export declare function RoadmapGridSkeleton({ region, count, showLeftMargin }: RoadmapGridSkeletonProps): import("react").JSX.Element;
+export declare function RoadmapGridSkeleton({ region, count, showLeftMargin, columns, }: RoadmapGridSkeletonProps): import("react").JSX.Element;
 //# sourceMappingURL=roadmap-grid-skeleton.d.ts.map

package/dist/components/shared/roadmap/roadmap-grid-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"roadmap-grid-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/roadmap/roadmap-grid-skeleton.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,MAAM,WAAW,wBAAwB;IACvC,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;gFAE4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAa,EAAE,KAAS,EAAE,cAAqB,EAAE,EAAE,wBAAwB,+BAYhH"}
+{"version":3,"file":"roadmap-grid-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/roadmap/roadmap-grid-skeleton.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,cAAc,EAAE,OAAO,GAAG,MAAM,CAIhF;AAED,MAAM,WAAW,wBAAwB;IACvC,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;gFAE4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAa,EACb,KAAS,EACT,cAAqB,EACrB,OAAW,GACZ,EAAE,wBAAwB,+BAQ1B"}