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

package/dist/components/shared/media-gallery-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-gallery-strip.d.ts","sourceRoot":"","sources":["../../../src/components/shared/media-gallery-strip.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,8EAA8E;IAC9E,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAOD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,sBAAsB,sCA4D7E"}
+{"version":3,"file":"media-gallery-strip.d.ts","sourceRoot":"","sources":["../../../src/components/shared/media-gallery-strip.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,8EAA8E;IAC9E,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAWD,6FAA6F;AAC7F,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAEpD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,sBAAsB,sCAgE7E;AAED,uFAAuF;AACvF,wBAAgB,yBAAyB,CAAC,EACxC,KAA0C,EAC1C,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BASA"}

package/dist/components/shared/media-gallery-strip.js

@@ -2,19 +2,27 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Image from "../../embed-shims/next-image.js";
+import { cn } from "../../utils/cn.js";
 import { Video } from "../features/video.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { ImageGalleryModal } from "../ui/image-gallery-modal.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 function isGalleryImage(mediaType) {
   return mediaType !== "video" && mediaType !== "demo";
 }
+const STRIP_CLASS = "flex w-full gap-6 overflow-x-auto";
+const TILE_SIZE_CLASS = "shrink-0 w-[240px] h-[200px] rounded-md";
+const TILE_CLASS = `${TILE_SIZE_CLASS} overflow-hidden border border-ods-border bg-ods-bg transition-opacity`;
+const MEDIA_GALLERY_STRIP_SKELETON_COUNT = 4;
 function MediaGalleryStrip({ items, className }) {
   const [galleryOpen, setGalleryOpen] = useState(false);
   const [galleryIndex, setGalleryIndex] = useState(0);
+  if (useLoadingScope() && !items?.length) return /* @__PURE__ */ jsx(MediaGalleryStripSkeleton, { className });
   if (!items || items.length === 0) return null;
   const galleryImages = items.filter((m) => isGalleryImage(m.media_type)).map((m) => m.media_url);
-  const tileClass = "shrink-0 w-[240px] h-[200px] rounded-md overflow-hidden border border-ods-border bg-black transition-opacity";
+  const tileClass = TILE_CLASS;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: `flex w-full gap-6 overflow-x-auto ${className ?? ""}`, children: items.map((mediaItem, index) => {
+    /* @__PURE__ */ jsx("div", { className: `${STRIP_CLASS} ${className ?? ""}`, children: items.map((mediaItem, index) => {
       if (isGalleryImage(mediaItem.media_type)) {
         return /* @__PURE__ */ jsx(
           "button",
@@ -54,6 +62,17 @@ function MediaGalleryStrip({ items, className }) {
     )
   ] });
 }
+function MediaGalleryStripSkeleton({
+  count = MEDIA_GALLERY_STRIP_SKELETON_COUNT,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(STRIP_CLASS, "overflow-hidden", className), "aria-hidden": true, children: Array.from({ length: count }, (_, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton tiles never reorder
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: TILE_SIZE_CLASS }, i)
+  )) });
+}
 export {
-  MediaGalleryStrip
+  MEDIA_GALLERY_STRIP_SKELETON_COUNT,
+  MediaGalleryStrip,
+  MediaGalleryStripSkeleton
 };

package/dist/components/shared/onboarding/index.d.ts

@@ -1,4 +1,5 @@
 export { OnboardingWalkthrough, type OnboardingWalkthroughProps } from './onboarding-walkthrough';
 export { OnboardingStepCard, type OnboardingStepCardProps } from './onboarding-step-card';
-export { useOnboardingState, type OnboardingState, type OnboardingStepConfig, } from '../../../hooks/ui/use-onboarding-state';
+export { useOnboardingState, type OnboardingStepConfig } from '../../../hooks/ui/use-onboarding-state';
+export { type OnboardingState } from '../../../utils/onboarding-storage';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/shared/onboarding/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/onboarding/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAClG,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EACL,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,oBAAoB,GAC1B,MAAM,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/onboarding/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAClG,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AACvG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/components/shared/onboarding/index.js

@@ -1,8 +1,6 @@
 import { OnboardingWalkthrough } from "./onboarding-walkthrough.js";
 import { OnboardingStepCard } from "./onboarding-step-card.js";
-import {
-  useOnboardingState
-} from "../../../hooks/ui/use-onboarding-state.js";
+import { useOnboardingState } from "../../../hooks/ui/use-onboarding-state.js";
 export {
   OnboardingStepCard,
   OnboardingWalkthrough,

package/dist/components/shared/product-release/index.d.ts

@@ -1,6 +1,7 @@
 export { ProductReleaseCard, type ProductReleaseCardProps } from './product-release-card';
 export { ProductReleaseCardSkeleton, type ProductReleaseCardSkeletonProps } from './product-release-card-skeleton';
 export { ProductReleasesView, type ProductReleasesViewProps, type ProductReleaseCardExtras, } from './product-releases-view';
-export { ReleaseDetailPage, type ReleaseDetailPageProps, type VideoDisplaySectionProps, type MarkdownRendererProps, type RoadmapItem, } from './release-detail-page';
+export { ReleaseDetailPage, type ReleaseDetailPageProps, type VideoDisplaySectionProps, type MarkdownRendererProps, } from './release-detail-page';
+export { type RoadmapItem } from '../../chat/types/entities/roadmap-item';
 export type { DeliveryResponse } from '../../../types/delivery';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,0BAA0B,EAAE,KAAK,+BAA+B,EAAE,MAAM,iCAAiC,CAAC;AACnH,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,WAAW,GACjB,MAAM,uBAAuB,CAAC;AAc/B,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,0BAA0B,EAAE,KAAK,+BAA+B,EAAE,MAAM,iCAAiC,CAAC;AACnH,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAc1E,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/shared/product-release/product-release-card-classes.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The large product-release card's layout, ONE copy read by `ProductReleaseCard` and `ProductReleaseCardSkeleton`,
+ * so the skeleton is the card's size at every width.
+ */
+export declare const RELEASE_CARD_LG_FRAME_CLASS = "flex flex-col gap-4 p-6";
+export declare const RELEASE_CARD_HERO_CLASS = "flex flex-col gap-4 content-md:flex-row content-md:gap-6";
+export declare const RELEASE_CARD_COVER_COLUMN_CLASS = "w-full flex-shrink-0 content-md:w-[256px]";
+export declare const RELEASE_CARD_COVER_BOX_CLASS: string;
+export declare const RELEASE_CARD_TEXT_COLUMN_CLASS = "flex min-w-0 flex-1 flex-col";
+export declare const RELEASE_CARD_VERSION_ROW_CLASS = "mb-3 flex items-center gap-3";
+export declare const RELEASE_CARD_VERSION_CLASS = "truncate font-semibold text-ods-text-primary text-code";
+/** The title's box reserves two lines of the title's own type (`2lh`), the summary's three. */
+export declare const RELEASE_CARD_TITLE_BOX_CLASS = "mb-3 flex min-h-[2lh] items-start text-h2";
+export declare const RELEASE_CARD_TITLE_CLASS = "line-clamp-2 text-h2 text-ods-text-primary";
+export declare const RELEASE_CARD_SUMMARY_BOX_CLASS = "min-h-[3lh] text-h4";
+export declare const RELEASE_CARD_SUMMARY_CLASS = "line-clamp-3 text-h4 text-ods-text-secondary";
+export declare const RELEASE_CARD_CHANGELOG_CLASS = "flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t border-ods-border pt-3 text-ods-text-secondary text-h6";
+export declare const RELEASE_CARD_GRID_CLASS = "grid grid-cols-1 content-md:grid-cols-4 w-full overflow-hidden rounded-md border border-ods-border";
+export declare const RELEASE_CARD_CELL_DIVIDER_CLASS = "border-b content-md:border-b-0 content-md:border-r border-ods-border";
+export declare const RELEASE_CARD_CELL_CLASS = "flex flex-col gap-3 p-4";
+/** The value over its label: only stacks, so a one-column grid, not a second column flexbox (WEBVIEW-001). */
+export declare const RELEASE_CARD_CELL_STACK_CLASS = "grid grid-cols-1 gap-0";
+export declare const RELEASE_CARD_CELL_LABEL_CLASS = "text-ods-text-secondary text-h6";
+/** The grid's three value cells' labels (static copy). */
+export declare const RELEASE_CARD_CELL_LABELS: readonly ["Type", "Status", "Released"];
+//# sourceMappingURL=product-release-card-classes.d.ts.map

package/dist/components/shared/product-release/product-release-card-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-release-card-classes.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/product-release-card-classes.ts"],"names":[],"mappings":"AACA;;;GAGG;AACH,eAAO,MAAM,2BAA2B,4BAA4B,CAAC;AACrE,eAAO,MAAM,uBAAuB,6DAA6D,CAAC;AAClG,eAAO,MAAM,+BAA+B,8CAA8C,CAAC;AAC3F,eAAO,MAAM,4BAA4B,QAAkE,CAAC;AAC5G,eAAO,MAAM,8BAA8B,iCAAiC,CAAC;AAC7E,eAAO,MAAM,8BAA8B,iCAAiC,CAAC;AAC7E,eAAO,MAAM,0BAA0B,2DAA2D,CAAC;AACnG,+FAA+F;AAC/F,eAAO,MAAM,4BAA4B,8CAA8C,CAAC;AACxF,eAAO,MAAM,wBAAwB,+CAA+C,CAAC;AACrF,eAAO,MAAM,8BAA8B,wBAAwB,CAAC;AACpE,eAAO,MAAM,0BAA0B,iDAAiD,CAAC;AACzF,eAAO,MAAM,4BAA4B,kHACwE,CAAC;AAClH,eAAO,MAAM,uBAAuB,uGACkE,CAAC;AACvG,eAAO,MAAM,+BAA+B,yEAAyE,CAAC;AACtH,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AACjE,8GAA8G;AAC9G,eAAO,MAAM,6BAA6B,2BAA2B,CAAC;AACtE,eAAO,MAAM,6BAA6B,oCAAoC,CAAC;AAC/E,0DAA0D;AAC1D,eAAO,MAAM,wBAAwB,yCAA0C,CAAC"}

package/dist/components/shared/product-release/product-release-card-classes.js

@@ -0,0 +1,40 @@
+"use client";
+import { MEDIA_ASPECT } from "../../../styles/component-sizes.js";
+const RELEASE_CARD_LG_FRAME_CLASS = "flex flex-col gap-4 p-6";
+const RELEASE_CARD_HERO_CLASS = "flex flex-col gap-4 content-md:flex-row content-md:gap-6";
+const RELEASE_CARD_COVER_COLUMN_CLASS = "w-full flex-shrink-0 content-md:w-[256px]";
+const RELEASE_CARD_COVER_BOX_CLASS = `relative ${MEDIA_ASPECT.og} w-full overflow-hidden rounded-lg`;
+const RELEASE_CARD_TEXT_COLUMN_CLASS = "flex min-w-0 flex-1 flex-col";
+const RELEASE_CARD_VERSION_ROW_CLASS = "mb-3 flex items-center gap-3";
+const RELEASE_CARD_VERSION_CLASS = "truncate font-semibold text-ods-text-primary text-code";
+const RELEASE_CARD_TITLE_BOX_CLASS = "mb-3 flex min-h-[2lh] items-start text-h2";
+const RELEASE_CARD_TITLE_CLASS = "line-clamp-2 text-h2 text-ods-text-primary";
+const RELEASE_CARD_SUMMARY_BOX_CLASS = "min-h-[3lh] text-h4";
+const RELEASE_CARD_SUMMARY_CLASS = "line-clamp-3 text-h4 text-ods-text-secondary";
+const RELEASE_CARD_CHANGELOG_CLASS = "flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t border-ods-border pt-3 text-ods-text-secondary text-h6";
+const RELEASE_CARD_GRID_CLASS = "grid grid-cols-1 content-md:grid-cols-4 w-full overflow-hidden rounded-md border border-ods-border";
+const RELEASE_CARD_CELL_DIVIDER_CLASS = "border-b content-md:border-b-0 content-md:border-r border-ods-border";
+const RELEASE_CARD_CELL_CLASS = "flex flex-col gap-3 p-4";
+const RELEASE_CARD_CELL_STACK_CLASS = "grid grid-cols-1 gap-0";
+const RELEASE_CARD_CELL_LABEL_CLASS = "text-ods-text-secondary text-h6";
+const RELEASE_CARD_CELL_LABELS = ["Type", "Status", "Released"];
+export {
+  RELEASE_CARD_CELL_CLASS,
+  RELEASE_CARD_CELL_DIVIDER_CLASS,
+  RELEASE_CARD_CELL_LABELS,
+  RELEASE_CARD_CELL_LABEL_CLASS,
+  RELEASE_CARD_CELL_STACK_CLASS,
+  RELEASE_CARD_CHANGELOG_CLASS,
+  RELEASE_CARD_COVER_BOX_CLASS,
+  RELEASE_CARD_COVER_COLUMN_CLASS,
+  RELEASE_CARD_GRID_CLASS,
+  RELEASE_CARD_HERO_CLASS,
+  RELEASE_CARD_LG_FRAME_CLASS,
+  RELEASE_CARD_SUMMARY_BOX_CLASS,
+  RELEASE_CARD_SUMMARY_CLASS,
+  RELEASE_CARD_TEXT_COLUMN_CLASS,
+  RELEASE_CARD_TITLE_BOX_CLASS,
+  RELEASE_CARD_TITLE_CLASS,
+  RELEASE_CARD_VERSION_CLASS,
+  RELEASE_CARD_VERSION_ROW_CLASS
+};

package/dist/components/shared/product-release/product-release-card-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-release-card-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/product-release-card-skeleton.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,+BAA+B;IAC9C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;2EACuE;IACvE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,EAAE,IAAW,EAAE,EAAE,+BAA+B,+BA4HrG"}
+{"version":3,"file":"product-release-card-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/product-release-card-skeleton.tsx"],"names":[],"mappings":"AA4BA,MAAM,WAAW,+BAA+B;IAC9C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;2EACuE;IACvE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,EAAE,IAAW,EAAE,EAAE,+BAA+B,+BA4GrG"}

package/dist/components/shared/product-release/product-release-card-skeleton.js

@@ -2,45 +2,47 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { CONTENT_CARD_SKELETON_FRAME_CLASS } from "../../chat/entity-cards/content-card-frame.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { EntityMetadataAuthorCellSkeleton } from "../../chat/entity-cards/entity-author-card.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { StatusBadgeSkeleton } from "../../ui/status-badge.js";
+import {
+  RELEASE_CARD_CELL_CLASS,
+  RELEASE_CARD_CELL_DIVIDER_CLASS,
+  RELEASE_CARD_CELL_LABEL_CLASS,
+  RELEASE_CARD_CELL_LABELS,
+  RELEASE_CARD_CELL_STACK_CLASS,
+  RELEASE_CARD_CHANGELOG_CLASS,
+  RELEASE_CARD_COVER_BOX_CLASS,
+  RELEASE_CARD_COVER_COLUMN_CLASS,
+  RELEASE_CARD_GRID_CLASS,
+  RELEASE_CARD_HERO_CLASS,
+  RELEASE_CARD_LG_FRAME_CLASS,
+  RELEASE_CARD_SUMMARY_BOX_CLASS,
+  RELEASE_CARD_SUMMARY_CLASS,
+  RELEASE_CARD_TEXT_COLUMN_CLASS,
+  RELEASE_CARD_TITLE_BOX_CLASS,
+  RELEASE_CARD_TITLE_CLASS,
+  RELEASE_CARD_VERSION_CLASS,
+  RELEASE_CARD_VERSION_ROW_CLASS
+} from "./product-release-card-classes.js";
 function ProductReleaseCardSkeleton({ className, size = "lg" }) {
   if (size === "lg") {
-    return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, "flex flex-col gap-4 p-6", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 content-md:flex-row content-md:gap-6", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "aspect-[1200/630] w-full flex-shrink-0 rounded-lg content-md:w-[256px]" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center gap-3", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-7 w-20 rounded" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 content-md:min-h-[72px]", children: [
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[25px] w-3/4 rounded content-md:h-[30px]" }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[25px] w-1/2 rounded content-md:h-[30px]" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-h-[68px] flex-col justify-start gap-2 content-md:min-h-[78px]", children: [
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-full rounded" }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-11/12 rounded" }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-5/6 rounded" })
-          ] })
+    return /* @__PURE__ */ jsxs("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, RELEASE_CARD_LG_FRAME_CLASS, className), "aria-hidden": true, children: [
+      /* @__PURE__ */ jsxs("div", { className: RELEASE_CARD_HERO_CLASS, children: [
+        /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_COVER_COLUMN_CLASS, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: RELEASE_CARD_COVER_BOX_CLASS }) }),
+        /* @__PURE__ */ jsxs("div", { className: RELEASE_CARD_TEXT_COLUMN_CLASS, children: [
+          /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_VERSION_ROW_CLASS, children: /* @__PURE__ */ jsx("span", { className: RELEASE_CARD_VERSION_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-16" }) }) }),
+          /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_TITLE_BOX_CLASS, children: /* @__PURE__ */ jsx("h3", { className: cn(RELEASE_CARD_TITLE_CLASS, "w-full"), children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 2, className: "w-3/4" }) }) }),
+          /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_SUMMARY_BOX_CLASS, children: /* @__PURE__ */ jsx("p", { className: RELEASE_CARD_SUMMARY_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: 3, className: "w-full" }) }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "border-t border-ods-border pt-3", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-2/3 rounded" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border content-md:grid-cols-4", children: [
-        [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex flex-col gap-3 border-b border-ods-border p-4 content-md:border-b-0 content-md:border-r",
-            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-7 w-24 rounded" }),
-              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded" })
-            ] })
-          },
-          `cell-${i}`
-        )),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-3/4 rounded" }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-1/2 rounded" })
-          ] })
-        ] })
+      /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_CHANGELOG_CLASS, children: /* @__PURE__ */ jsx("span", { "data-loading-item": true, className: "inline-flex", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: RELEASE_CARD_GRID_CLASS, children: [
+        RELEASE_CARD_CELL_LABELS.map((label, i) => /* @__PURE__ */ jsx("div", { className: cn(RELEASE_CARD_CELL_CLASS, RELEASE_CARD_CELL_DIVIDER_CLASS), children: /* @__PURE__ */ jsxs("div", { className: RELEASE_CARD_CELL_STACK_CLASS, children: [
+          i === 0 ? /* @__PURE__ */ jsx(StatusBadgeSkeleton, { variant: "card", className: "justify-self-start" }) : /* @__PURE__ */ jsx("p", { className: "text-h4", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }) }),
+          /* @__PURE__ */ jsx("p", { className: RELEASE_CARD_CELL_LABEL_CLASS, children: label })
+        ] }) }, label)),
+        /* @__PURE__ */ jsx(EntityMetadataAuthorCellSkeleton, {})
       ] })
     ] });
   }

package/dist/components/shared/product-release/product-release-card.d.ts

@@ -69,6 +69,8 @@ export interface ProductReleaseCardProps {
     className?: string;
     /** Card density. Defaults to `'lg'` (the canonical large card). */
     size?: ProductReleaseCardSize;
+    /** The release is still being read: the card draws its own skeleton (also in a page's loading scope). */
+    loading?: boolean;
     /** Cover image URL. Falls back to a neutral `Package`-icon placeholder. */
     coverImage?: string | null;
     /** Drives the Play overlay on the cover. Caller sets `true` when the cover
@@ -101,5 +103,5 @@ export interface ProductReleaseCardProps {
         breaking: number;
     };
 }
-export declare function ProductReleaseCard({ title, summary, version, formattedDate, onClick, anchorProps, className, size, coverImage, hasVideoCover, releaseType, releaseStatus, releaseTypeBadgeColor, viewCount, author, changelogCounts, }: ProductReleaseCardProps): React.JSX.Element;
+export declare function ProductReleaseCard({ title, summary, version, formattedDate, onClick, anchorProps, className, size, coverImage, hasVideoCover, releaseType, releaseStatus, releaseTypeBadgeColor, viewCount, author, changelogCounts, loading, }: ProductReleaseCardProps): React.JSX.Element;
 //# sourceMappingURL=product-release-card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"product-release-card.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/product-release-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,uBAAuB;IACtC,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAG9B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;iDAC6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7D,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC;IAC3D;;+CAE2C;IAC3C,qBAAqB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACjE;kCAC8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;yDACqD;IACrD,MAAM,CAAC,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;QAC1B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC1B,CAAC;IACF;sCACkC;IAClC,eAAe,CAAC,EAAE;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,OAAO,EACP,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,IAAW,EACX,UAAU,EACV,aAAa,EACb,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,SAAS,EACT,MAAM,EACN,eAAe,GAChB,EAAE,uBAAuB,qBAqYzB"}
+{"version":3,"file":"product-release-card.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/product-release-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmC/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,uBAAuB;IACtC,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,yGAAyG;IACzG,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;iDAC6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7D,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC;IAC3D;;+CAE2C;IAC3C,qBAAqB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACjE;kCAC8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;yDACqD;IACrD,MAAM,CAAC,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;QAC1B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC1B,CAAC;IACF;sCACkC;IAClC,eAAe,CAAC,EAAE;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,OAAO,EACP,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,IAAW,EACX,UAAU,EACV,aAAa,EACb,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,SAAS,EACT,MAAM,EACN,eAAe,EACf,OAAe,GAChB,EAAE,uBAAuB,qBA8XzB"}

package/dist/components/shared/product-release/product-release-card.js

@@ -10,8 +10,30 @@ import {
 } from "../../chat/entity-cards/content-card-frame.js";
 import { CardHoverPlay } from "../../features/video-center-badge.js";
 import { InteractiveCard } from "../../ui/interactive-card.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { SquareAvatar } from "../../ui/square-avatar.js";
 import { StatusBadge } from "../../ui/status-badge.js";
+import {
+  RELEASE_CARD_CELL_CLASS,
+  RELEASE_CARD_CELL_DIVIDER_CLASS,
+  RELEASE_CARD_CELL_LABEL_CLASS,
+  RELEASE_CARD_CELL_LABELS,
+  RELEASE_CARD_CELL_STACK_CLASS,
+  RELEASE_CARD_CHANGELOG_CLASS,
+  RELEASE_CARD_COVER_BOX_CLASS,
+  RELEASE_CARD_COVER_COLUMN_CLASS,
+  RELEASE_CARD_GRID_CLASS,
+  RELEASE_CARD_HERO_CLASS,
+  RELEASE_CARD_LG_FRAME_CLASS,
+  RELEASE_CARD_SUMMARY_BOX_CLASS,
+  RELEASE_CARD_SUMMARY_CLASS,
+  RELEASE_CARD_TEXT_COLUMN_CLASS,
+  RELEASE_CARD_TITLE_BOX_CLASS,
+  RELEASE_CARD_TITLE_CLASS,
+  RELEASE_CARD_VERSION_CLASS,
+  RELEASE_CARD_VERSION_ROW_CLASS
+} from "./product-release-card-classes.js";
+import { ProductReleaseCardSkeleton } from "./product-release-card-skeleton.js";
 function ProductReleaseCard({
   title,
   summary,
@@ -28,42 +50,43 @@ function ProductReleaseCard({
   releaseTypeBadgeColor,
   viewCount,
   author,
-  changelogCounts
+  changelogCounts,
+  loading = false
 }) {
+  if (useLoadingScope() || loading) return /* @__PURE__ */ jsx(ProductReleaseCardSkeleton, { size, className });
   if (size === "lg") {
     const totalChangelog = (changelogCounts?.features ?? 0) + (changelogCounts?.fixes ?? 0) + (changelogCounts?.improvements ?? 0) + (changelogCounts?.breaking ?? 0);
     const valueCells = [
       releaseType && releaseTypeBadgeColor ? {
         value: releaseType.toUpperCase(),
-        label: "Type",
+        label: RELEASE_CARD_CELL_LABELS[0],
         uppercase: true,
         colorScheme: releaseTypeBadgeColor
-      } : { value: "\u2014", label: "Type", uppercase: false },
+      } : { value: "\u2014", label: RELEASE_CARD_CELL_LABELS[0], uppercase: false },
       releaseStatus ? {
         value: releaseStatus.toUpperCase(),
-        label: "Status",
+        label: RELEASE_CARD_CELL_LABELS[1],
         uppercase: true
-      } : { value: "\u2014", label: "Status", uppercase: false },
+      } : { value: "\u2014", label: RELEASE_CARD_CELL_LABELS[1], uppercase: false },
       formattedDate ? {
         value: formattedDate,
-        label: "Released",
+        label: RELEASE_CARD_CELL_LABELS[2],
         uppercase: false
-      } : { value: "\u2014", label: "Released", uppercase: false }
+      } : { value: "\u2014", label: RELEASE_CARD_CELL_LABELS[2], uppercase: false }
     ];
     const effectiveAuthor = author?.full_name ? author : { full_name: "\u2014", avatar_url: null, job_title: "Unknown" };
-    const gridColsClass = "content-md:grid-cols-4";
-    const dividerClass = "border-b content-md:border-b-0 content-md:border-r border-ods-border";
+    const dividerClass = RELEASE_CARD_CELL_DIVIDER_CLASS;
     const interactive = !!anchorProps || !!onClick;
     const frameClass = cn(
       interactive ? CONTENT_CARD_FRAME_CLASS : CONTENT_CARD_SKELETON_FRAME_CLASS,
-      "flex flex-col gap-4 p-6",
+      RELEASE_CARD_LG_FRAME_CLASS,
       "focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-bg",
       "no-underline",
       className
     );
     const innerLayout = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 content-md:flex-row content-md:gap-6", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-full flex-shrink-0 content-md:w-[256px]", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[1200/630] w-full overflow-hidden rounded-lg bg-ods-bg", children: [
+      /* @__PURE__ */ jsxs("div", { className: RELEASE_CARD_HERO_CLASS, children: [
+        /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_COVER_COLUMN_CLASS, children: /* @__PURE__ */ jsxs("div", { className: cn(RELEASE_CARD_COVER_BOX_CLASS, "bg-ods-bg"), children: [
           coverImage ? /* @__PURE__ */ jsx(
             Image,
             {
@@ -77,92 +100,82 @@ function ProductReleaseCard({
           ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-ods-text-secondary", children: /* @__PURE__ */ jsx(Package, { className: "h-8 w-8" }) }),
           hasVideoCover && coverImage && /* @__PURE__ */ jsx(CardHoverPlay, { size: "md" })
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center gap-3", children: /* @__PURE__ */ jsxs("span", { className: "truncate font-semibold text-ods-text-primary text-code", children: [
+        /* @__PURE__ */ jsxs("div", { className: RELEASE_CARD_TEXT_COLUMN_CLASS, children: [
+          /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_VERSION_ROW_CLASS, children: /* @__PURE__ */ jsxs("span", { className: RELEASE_CARD_VERSION_CLASS, children: [
             "v",
             version
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex min-h-[60px] items-start content-md:min-h-[72px]", children: /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 font-['Azeret_Mono'] text-xl font-semibold leading-tight text-ods-text-primary content-md:text-2xl", children: title }) }),
-          /* @__PURE__ */ jsx("div", { className: "min-h-[68px] content-md:min-h-[78px]", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 font-['DM_Sans'] text-sm leading-relaxed text-ods-text-secondary content-md:text-base", children: summary ?? "" }) })
+          /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_TITLE_BOX_CLASS, children: /* @__PURE__ */ jsx("h3", { className: RELEASE_CARD_TITLE_CLASS, children: title }) }),
+          /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_SUMMARY_BOX_CLASS, children: /* @__PURE__ */ jsx("p", { className: RELEASE_CARD_SUMMARY_CLASS, children: summary ?? "" }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t border-ods-border pt-3 text-ods-text-secondary text-h6", children: totalChangelog > 0 && changelogCounts ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        changelogCounts.features > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: RELEASE_CARD_CHANGELOG_CLASS, children: totalChangelog > 0 && changelogCounts ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        changelogCounts.features > 0 && /* @__PURE__ */ jsxs("span", { "data-loading-item": true, className: "inline-flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5" }),
           changelogCounts.features,
           " ",
           changelogCounts.features === 1 ? "feature" : "features"
         ] }),
-        changelogCounts.fixes > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+        changelogCounts.fixes > 0 && /* @__PURE__ */ jsxs("span", { "data-loading-item": true, className: "inline-flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx(Wrench, { className: "h-3.5 w-3.5" }),
           changelogCounts.fixes,
           " ",
           changelogCounts.fixes === 1 ? "fix" : "fixes"
         ] }),
-        changelogCounts.improvements > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+        changelogCounts.improvements > 0 && /* @__PURE__ */ jsxs("span", { "data-loading-item": true, className: "inline-flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx(TrendingUp, { className: "h-3.5 w-3.5" }),
           changelogCounts.improvements,
           " ",
           changelogCounts.improvements === 1 ? "improvement" : "improvements"
         ] }),
-        changelogCounts.breaking > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-ods-warning", children: [
+        changelogCounts.breaking > 0 && /* @__PURE__ */ jsxs("span", { "data-loading-item": true, className: "inline-flex items-center gap-1.5 text-ods-warning", children: [
           /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5" }),
           changelogCounts.breaking,
           " breaking"
         ] })
-      ] }) : /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary", children: "No changelog entries yet" }) }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "grid grid-cols-1",
-            gridColsClass,
-            "w-full overflow-hidden rounded-md border border-ods-border"
-          ),
-          children: [
-            valueCells.map((cell, i) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3 p-4", dividerClass), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
-              cell.colorScheme ? /* @__PURE__ */ jsx(
-                StatusBadge,
-                {
-                  text: cell.value,
-                  variant: "card",
-                  colorScheme: cell.colorScheme,
-                  singleLine: true,
-                  className: "self-start"
-                }
-              ) : /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-h4",
-                    // Em-dash placeholder reads as secondary text;
-                    // populated values stay primary.
-                    cell.value === "\u2014" ? "text-ods-text-secondary" : "text-ods-text-primary"
-                  ),
-                  children: cell.uppercase ? cell.value.toLocaleUpperCase() : cell.value
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: cell.label })
-            ] }) }, `${cell.label}-${i}`)),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4", children: [
-              /* @__PURE__ */ jsx(
-                SquareAvatar,
-                {
-                  src: effectiveAuthor.avatar_url ?? void 0,
-                  alt: effectiveAuthor.full_name,
-                  fallback: effectiveAuthor.full_name.charAt(0).toUpperCase(),
-                  size: "md",
-                  variant: "round"
-                }
+      ] }) : /* @__PURE__ */ jsx("span", { "data-loading-item": true, className: "text-ods-text-secondary", children: "No changelog entries yet" }) }),
+      /* @__PURE__ */ jsxs("div", { className: RELEASE_CARD_GRID_CLASS, children: [
+        valueCells.map((cell, i) => /* @__PURE__ */ jsx("div", { className: cn(RELEASE_CARD_CELL_CLASS, dividerClass), children: /* @__PURE__ */ jsxs("div", { className: RELEASE_CARD_CELL_STACK_CLASS, children: [
+          cell.colorScheme ? /* @__PURE__ */ jsx(
+            StatusBadge,
+            {
+              text: cell.value,
+              variant: "card",
+              colorScheme: cell.colorScheme,
+              singleLine: true,
+              className: "justify-self-start"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-h4",
+                // Em-dash placeholder reads as secondary text;
+                // populated values stay primary.
+                cell.value === "\u2014" ? "text-ods-text-secondary" : "text-ods-text-primary"
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "truncate tracking-[-0.36px] text-ods-text-primary text-h3", children: effectiveAuthor.full_name }),
-                /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: effectiveAuthor.job_title || "Author" })
-              ] })
-            ] })
-          ]
-        }
-      ),
+              children: cell.uppercase ? cell.value.toLocaleUpperCase() : cell.value
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: RELEASE_CARD_CELL_LABEL_CLASS, children: cell.label })
+        ] }) }, `${cell.label}-${i}`)),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4", children: [
+          /* @__PURE__ */ jsx(
+            SquareAvatar,
+            {
+              src: effectiveAuthor.avatar_url ?? void 0,
+              alt: effectiveAuthor.full_name,
+              fallback: effectiveAuthor.full_name.charAt(0).toUpperCase(),
+              size: "md",
+              variant: "round"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate tracking-[-0.36px] text-ods-text-primary text-h3", children: effectiveAuthor.full_name }),
+            /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: effectiveAuthor.job_title || "Author" })
+          ] })
+        ] })
+      ] }),
       typeof viewCount === "number" && viewCount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-ods-text-secondary text-h6", children: [
         /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
         /* @__PURE__ */ jsxs("span", { children: [

package/dist/components/shared/product-release/product-releases-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-releases-view.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/product-releases-view.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,cAAc,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAajG,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAU1F;;kFAEkF;AAClF,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,uBAAuB,EACvB,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,CACnF,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC;8EAC0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;4DACwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;2FAEuF;IACvF,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,wBAAwB,CAAC;IACvE;mEAC+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwDD,wBAAgB,mBAAmB,CAAC,EAClC,QAA2B,EAC3B,WAAW,EACX,YAAgB,EAChB,QAAsB,EACtB,cAA6C,EAC7C,cAAyC,EACzC,cAAyC,EACzC,YAAqC,EACrC,SAAS,GACV,GAAE,wBAA6B,+BA6G/B"}
+{"version":3,"file":"product-releases-view.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/product-release/product-releases-view.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,cAAc,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAejG,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAY1F;;kFAEkF;AAClF,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,uBAAuB,EACvB,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,CACnF,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC;8EAC0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;4DACwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;2FAEuF;IACvF,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,wBAAwB,CAAC;IACvE;mEAC+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwDD,wBAAgB,mBAAmB,CAAC,EAClC,QAA2B,EAC3B,WAAW,EACX,YAAgB,EAChB,QAAsB,EACtB,cAA6C,EAC7C,cAAyC,EACzC,cAAyC,EACzC,YAAqC,EACrC,SAAS,GACV,GAAE,wBAA6B,+BAiH/B"}

package/dist/components/shared/product-release/product-releases-view.js

@@ -11,13 +11,15 @@ import { buildProductReleaseCardProps } from "../../chat/entity-cards/product-re
 import { useEntityCardLink } from "../../chat/entity-cards/use-entity-card-link.js";
 import { isModifierClick } from "../../chat/utils/chat-nav-resolution.js";
 import { executeNavigationImperative } from "../../chat/utils/execute-navigation.js";
+import { usePageDataSync } from "../../layout/page-data-sync.js";
 import { ListEmptyState } from "../../list-empty-state.js";
 import { LoadingRegion } from "../../loading/loading-region.js";
-import { PersistentPaginationWrapper } from "../../persistent-pagination.js";
 import { LoadError } from "../../ui/error-state.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
+import { UnifiedPagination } from "../../unified-pagination.js";
 import { ProductReleaseCard } from "./product-release-card.js";
-import { ProductReleaseCardSkeleton } from "./product-release-card-skeleton.js";
 const DEFAULT_ENDPOINT = "/api/releases";
+const PAGER_ROW_CLASS = "flex w-full justify-center";
 const DEFAULT_SEARCH_PARAM_KEY = DEV_SECTION_PARAM_KEYS.search;
 const DEFAULT_STATUS_PARAM_KEY = DEV_SECTION_PARAM_KEYS.releaseStatus;
 const DEFAULT_PAGE_PARAM_KEY = "page";
@@ -78,10 +80,17 @@ function ProductReleasesView({
   const listParams = new URLSearchParams({ limit: String(itemsPerPage), offset: String(offset) });
   if (search) listParams.set(searchParamKey, search);
   if (status && status !== "all") listParams.set(statusParamKey, status);
-  const { data, isLoading, error, reload } = useSelfFetch(
-    `${endpoint}?${listParams.toString()}`,
-    { initialData }
-  );
+  const inScope = useLoadingScope();
+  const {
+    data,
+    isLoading: fetching,
+    error,
+    reload
+  } = useSelfFetch(inScope ? null : `${endpoint}?${listParams.toString()}`, {
+    initialData
+  });
+  const isLoading = inScope || fetching;
+  usePageDataSync(data?.sync, isLoading && !data);
   const releases = data?.data ?? [];
   const totalCount = data?.count ?? 0;
   const totalPages = pageCount(totalCount, itemsPerPage);
@@ -122,21 +131,25 @@ function ProductReleasesView({
         "div",
         {
           style: { visibility: isLoading || hasData ? "visible" : "hidden" },
-          children: isLoading ? /* @__PURE__ */ jsx(ProductReleaseCardSkeleton, { size: "lg" }) : release ? /* @__PURE__ */ jsx(ReleaseRow, { release, basePath, buildCardProps }) : /* @__PURE__ */ jsx(ProductReleaseCardSkeleton, { size: "lg" })
+          children: !isLoading && release ? /* @__PURE__ */ jsx(ReleaseRow, { release, basePath, buildCardProps }) : (
+            // Read, or a hidden slot past the page's last release: the card draws its own skeleton.
+            /* @__PURE__ */ jsx(ProductReleaseCard, { loading: true, size: "lg", title: "", version: "", formattedDate: "" })
+          )
         },
         release?.id ?? `slot-${i}`
       );
     }) }),
-    /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-center content-md:mt-8", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "m-3 h-12 w-64" }) : releases.length > 0 && totalPages > 1 ? /* @__PURE__ */ jsx(
-      PersistentPaginationWrapper,
+    /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-center content-md:mt-8", children: /* @__PURE__ */ jsx(
+      UnifiedPagination,
       {
-        isLoading: false,
+        loading: isLoading,
         currentPage,
-        totalPages,
+        totalPages: releases.length > 0 ? totalPages : 0,
         onPageChange: goToPage,
-        variant: "blog"
+        className: PAGER_ROW_CLASS,
+        reserveSpace: true
       }
-    ) : /* @__PURE__ */ jsx("div", { className: "m-3 h-12 w-64", style: { visibility: "hidden" } }) })
+    ) })
   ] }) }) });
 }
 export {