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

package/dist/components/shared/delivery/delivery-row.js

@@ -1,11 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "../../../embed-shims/next-link.js";
+import { TEXT_LINES_MIN } from "../../../styles/component-sizes.js";
 import { TASK_TYPE_LABELS, TASK_TYPE_TEXT_COLORS } from "../../../types/delivery.js";
 import { getStatusColorScheme } from "../../../utils/index.js";
 import { cn } from "../../../utils/cn.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
 import { AvatarStack } from "../../ui/avatar-stack.js";
-import { StatusBadge } from "../../ui/status-badge.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
+import { StatusBadge, StatusBadgeSkeleton } from "../../ui/status-badge.js";
 function getRelativeTime(timestamp) {
   if (!timestamp) return "recently";
   const now = Date.now();
@@ -18,21 +21,30 @@ function getRelativeTime(timestamp) {
   if (days > 0) return days === 1 ? "yesterday" : `${days} days ago`;
   return "today";
 }
+const ROW_INNER_CLASS = "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]";
+const ROW_TEXT_COLUMN_CLASS = "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]";
+const ROW_CAPTION_CLASS = "text-ods-text-secondary text-h5";
+const ROW_TITLE_LINE_CLASS = `flex items-center text-h3 ${TEXT_LINES_MIN[1]}`;
+const ROW_SUBTITLE_LINE_CLASS = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+const ROW_DESCRIPTION_LINE_CLASS = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const ROW_META_CLASS = "flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch content-md:w-auto content-md:flex-col content-md:items-end content-md:self-start";
+const ROW_BASE_CLASS = "block p-[12px] text-inherit no-underline transition-colors duration-150 content-md:p-[16px]";
 function DeliveryRow({ item, href, target, caption, id, className }) {
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(DeliveryRowSkeleton, { caption, className });
   const taskType = item.taskType;
   const typeBadgeLabel = TASK_TYPE_LABELS[taskType] || "TASK";
   const typeBadgeTextColor = TASK_TYPE_TEXT_COLORS[taskType] || "";
   const statusBadgeScheme = getStatusColorScheme(item.status);
   const relativeTime = getRelativeTime(item.dateUpdated);
   const subtitle = `ACTIVE ${relativeTime}${item.listNames.length > 0 ? `, ${item.listNames.join(", ")}` : ""}, ${item.id}`;
-  const inner = /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]", children: [
-      caption && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h5", children: caption }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[24px] items-center content-md:min-h-[24px]", children: /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate", children: item.title }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[20px] items-center", children: /* @__PURE__ */ jsx("p", { className: "truncate uppercase tracking-[-0.28px] text-ods-text-secondary text-h5", suppressHydrationWarning: true, children: subtitle }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[72px] items-center", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 break-words text-ods-text-secondary text-h4", children: item.description || "No description provided" }) })
+  const inner = /* @__PURE__ */ jsxs("div", { className: ROW_INNER_CLASS, children: [
+    /* @__PURE__ */ jsxs("div", { className: ROW_TEXT_COLUMN_CLASS, children: [
+      caption && /* @__PURE__ */ jsx("p", { className: ROW_CAPTION_CLASS, children: caption }),
+      /* @__PURE__ */ jsx("div", { className: ROW_TITLE_LINE_CLASS, children: /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate", children: item.title }) }),
+      /* @__PURE__ */ jsx("div", { className: ROW_SUBTITLE_LINE_CLASS, children: /* @__PURE__ */ jsx("p", { className: "truncate uppercase tracking-[-0.28px] text-ods-text-secondary text-h5", suppressHydrationWarning: true, children: subtitle }) }),
+      /* @__PURE__ */ jsx("div", { className: ROW_DESCRIPTION_LINE_CLASS, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 break-words text-ods-text-secondary text-h4", children: item.description || "No description provided" }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch content-md:w-auto content-md:flex-col content-md:items-end content-md:self-start", children: [
+    /* @__PURE__ */ jsxs("div", { className: ROW_META_CLASS, children: [
       /* @__PURE__ */ jsx(
         StatusBadge,
         {
@@ -65,7 +77,7 @@ function DeliveryRow({ item, href, target, caption, id, className }) {
     ] })
   ] });
   const baseClass = cn(
-    "block p-[12px] text-inherit no-underline transition-colors duration-150 content-md:p-[16px]",
+    ROW_BASE_CLASS,
     // `scroll-mt-24` is paid for whether `id` is set or not (it's a
     // single Tailwind utility, no runtime cost). Keeping it
     // unconditional means a future caller adding `id` doesn't also
@@ -82,6 +94,21 @@ function DeliveryRow({ item, href, target, caption, id, className }) {
   }
   return /* @__PURE__ */ jsx("div", { id, className: baseClass, children: inner });
 }
+function DeliveryRowSkeleton({ caption, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(ROW_BASE_CLASS, "scroll-mt-24", className), "aria-hidden": true, children: /* @__PURE__ */ jsxs("div", { className: ROW_INNER_CLASS, children: [
+    /* @__PURE__ */ jsxs("div", { className: ROW_TEXT_COLUMN_CLASS, children: [
+      caption && /* @__PURE__ */ jsx("p", { className: ROW_CAPTION_CLASS, children: caption }),
+      /* @__PURE__ */ jsx("div", { className: ROW_TITLE_LINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-3/5" }) }),
+      /* @__PURE__ */ jsx("div", { className: ROW_SUBTITLE_LINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h5", className: "w-2/5" }) }),
+      /* @__PURE__ */ jsx("div", { className: ROW_DESCRIPTION_LINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "w-full" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: ROW_META_CLASS, children: [
+      /* @__PURE__ */ jsx(StatusBadgeSkeleton, { variant: "card" }),
+      /* @__PURE__ */ jsx(StatusBadgeSkeleton, { variant: "card" })
+    ] })
+  ] }) });
+}
 export {
-  DeliveryRow
+  DeliveryRow,
+  DeliveryRowSkeleton
 };

package/dist/components/shared/delivery/delivery-table.d.ts

@@ -19,6 +19,10 @@ interface DeliveryTableProps {
     items: DeliveryItem[];
     isLoading?: boolean;
 }
+/** How many rows the skeleton draws (the table's first fold). */
+export declare const DELIVERY_TABLE_SKELETON_ROWS = 5;
+/** The table while its tasks are read: the same card, `DELIVERY_TABLE_SKELETON_ROWS` row skeletons. */
+export declare function DeliveryTableSkeleton(): import("react").JSX.Element;
 /**
  * DeliveryTable Component
  * Displays bug fixes and enhancements with fixed-height rows

package/dist/components/shared/delivery/delivery-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"delivery-table.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/delivery/delivery-table.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAM5D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAuCD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAiB,EAAE,EAAE,kBAAkB,+BAuC7E"}
+{"version":3,"file":"delivery-table.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/delivery/delivery-table.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK5D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAKD,iEAAiE;AACjE,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAE9C,uGAAuG;AACvG,wBAAgB,qBAAqB,gCAYpC;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAiB,EAAE,EAAE,kBAAkB,+BA6B7E"}

package/dist/components/shared/delivery/delivery-table.js

@@ -1,42 +1,30 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { devSectionAnchorId } from "../../../utils/dev-sections/dev-section-param-keys.js";
 import { CONTENT_CARD_SKELETON_FRAME_CLASS } from "../../chat/entity-cards/content-card-frame.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
-import { DeliveryRow } from "./delivery-row.js";
-function SkeletonRow() {
-  return /* @__PURE__ */ jsx("div", { className: "border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[24px] items-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-full rounded" }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[20px] items-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-1/2 rounded" }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[72px] items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-full rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-full rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-2/3 rounded" })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-col gap-2 self-start", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[32px] w-[100px] rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[32px] w-[120px] rounded" })
-    ] })
-  ] }) });
+import { DeliveryRow, DeliveryRowSkeleton } from "./delivery-row.js";
+const TABLE_FRAME_CLASS = `w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`;
+const ROW_SEPARATOR_CLASS = "border-b border-ods-border last:border-b-0";
+const DELIVERY_TABLE_SKELETON_ROWS = 5;
+function DeliveryTableSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: TABLE_FRAME_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: Array.from({ length: DELIVERY_TABLE_SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsx("div", { className: ROW_SEPARATOR_CLASS, children: /* @__PURE__ */ jsx(DeliveryRowSkeleton, {}) }, i)) }) });
 }
 function DeliveryTable({ items, isLoading = false }) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: `w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(SkeletonRow, {}, i)) }) });
-  }
+  if (isLoading) return /* @__PURE__ */ jsx(DeliveryTableSkeleton, {});
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: `w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS} p-[var(--spacing-system-xlf)] text-center`, children: /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "No tasks available" }) });
+    return /* @__PURE__ */ jsx("div", { className: `${TABLE_FRAME_CLASS} p-[var(--spacing-system-xlf)] text-center`, children: /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "No tasks available" }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: `w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: items.map((item) => (
+  return /* @__PURE__ */ jsx("div", { className: TABLE_FRAME_CLASS, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: items.map((item) => (
     // DOM id lives on DeliveryRow's own outer element (no wrapper
     // div). Anchor mirrors `buildDevSectionUrl('delivery', <id>)`
     // → `#delivery-<external_id>`; `useScrollToHash` in
     // `delivery-lists.tsx` finds the row by id and scrolls. The
     // outer wrapper here ONLY exists for the row separators.
-    /* @__PURE__ */ jsx("div", { className: "border-b border-ods-border last:border-b-0", children: /* @__PURE__ */ jsx(DeliveryRow, { item, id: devSectionAnchorId("delivery", item.id) }) }, item.id)
+    /* @__PURE__ */ jsx("div", { className: ROW_SEPARATOR_CLASS, children: /* @__PURE__ */ jsx(DeliveryRow, { item, id: devSectionAnchorId("delivery", item.id) }) }, item.id)
   )) }) });
 }
 export {
-  DeliveryTable
+  DELIVERY_TABLE_SKELETON_ROWS,
+  DeliveryTable,
+  DeliveryTableSkeleton
 };

package/dist/components/shared/detail-page-skeleton.d.ts

@@ -11,5 +11,8 @@ export interface DetailPageSkeletonProps {
     /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
     region?: boolean;
 }
+/**
+ * @deprecated Render the detail page itself inside a `LoadingScope` (e.g. `ArticleDetailLayout` with its sections): each part draws its own skeleton. Kept so hosts on an older release keep compiling; nothing in the lib uses it.
+ */
 export declare function DetailPageSkeleton({ metadataColumns, showImageGallery, bare, label, region, }?: DetailPageSkeletonProps): import("react").JSX.Element;
 //# sourceMappingURL=detail-page-skeleton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"detail-page-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/shared/detail-page-skeleton.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;oEAGgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,eAAmB,EACnB,gBAAuB,EACvB,IAAY,EACZ,KAAiB,EACjB,MAAa,GACd,GAAE,uBAA4B,+BAgE9B"}
+{"version":3,"file":"detail-page-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/shared/detail-page-skeleton.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;oEAGgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAYD;;GAEG;AAEH,wBAAgB,kBAAkB,CAAC,EACjC,eAAmB,EACnB,gBAAuB,EACvB,IAAY,EACZ,KAAiB,EACjB,MAAa,GACd,GAAE,uBAA4B,+BAgE9B"}

package/dist/components/shared/detail-page-skeleton.js

@@ -3,6 +3,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { PageLayout } from "../layout/page-layout.js";
 import { LoadingRegion } from "../loading/loading-region.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+const METADATA_COLUMNS_CLASS = {
+  1: "content-md:grid-cols-1",
+  2: "content-md:grid-cols-2",
+  3: "content-md:grid-cols-3",
+  4: "content-md:grid-cols-4",
+  5: "content-md:grid-cols-5",
+  6: "content-md:grid-cols-6"
+};
 function DetailPageSkeleton({
   metadataColumns = 4,
   showImageGallery = true,
@@ -20,7 +28,7 @@ function DetailPageSkeleton({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: `grid grid-cols-1 content-md:grid-cols-${metadataColumns} w-full overflow-hidden rounded-md border border-ods-border`,
+        className: `grid grid-cols-1 ${METADATA_COLUMNS_CLASS[metadataColumns] ?? METADATA_COLUMNS_CLASS[4]} w-full overflow-hidden rounded-md border border-ods-border`,
         children: Array.from({ length: metadataColumns }).map((_, i) => /* @__PURE__ */ jsxs(
           "div",
           {

package/dist/components/shared/dev-section/dev-card-row.d.ts

@@ -36,6 +36,8 @@ export interface DevCardRowContentProps {
     rightBadges: ReactNode;
 }
 export declare function DevCardRowContent({ title, subtitle, description, emptyDescription, rightBadges, }: DevCardRowContentProps): import("react").JSX.Element;
+/** A row's content while its record is read: the title, subtitle and description as bars, two badge skeletons. */
+export declare function DevCardRowContentSkeleton(): import("react").JSX.Element;
 /**
  * Skeleton rendering for a single row — the bars mirror the same
  * min-heights as `DevCardRowContent` so the loading→loaded swap

package/dist/components/shared/dev-section/dev-card-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev-card-row.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/dev-section/dev-card-row.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB;uDACmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,gBAA4C,EAC5C,WAAW,GACZ,EAAE,sBAAsB,+BAmBxB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,gCA0BjC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAa,EACb,IAAQ,GACT,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,+BAYA"}
+{"version":3,"file":"dev-card-row.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/dev-section/dev-card-row.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB;uDACmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,WAAW,EAAE,SAAS,CAAC;CACxB;AAWD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,gBAA4C,EAC5C,WAAW,GACZ,EAAE,sBAAsB,+BAqBxB;AAED,kHAAkH;AAClH,wBAAgB,yBAAyB,gCAoBxC;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,gCAMjC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAa,EACb,IAAQ,GACT,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,+BAYA"}

package/dist/components/shared/dev-section/dev-card-row.js

@@ -1,7 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { TEXT_LINES_MIN } from "../../../styles/component-sizes.js";
 import { LoadingRegion } from "../../loading/loading-region.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
+import { StatusBadgeSkeleton } from "../../ui/status-badge.js";
+const ROW_INNER_CLASS = "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]";
+const ROW_TEXT_COLUMN_CLASS = "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]";
+const ROW_TITLE_LINE_CLASS = `flex items-center text-h3 ${TEXT_LINES_MIN[1]}`;
+const ROW_SUBTITLE_LINE_CLASS = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+const ROW_DESCRIPTION_LINE_CLASS = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const ROW_BADGES_CLASS = "flex flex-shrink-0 flex-col gap-2 self-start";
 function DevCardRowContent({
   title,
   subtitle,
@@ -9,31 +18,31 @@ function DevCardRowContent({
   emptyDescription = "No description provided",
   rightBadges
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[24px] items-center", children: /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate", children: title }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[20px] items-center", children: /* @__PURE__ */ jsx("p", { className: "truncate uppercase tracking-[-0.28px] text-ods-text-secondary text-h5", children: subtitle }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[72px] items-center", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 break-words text-ods-text-secondary text-h4", children: description || emptyDescription }) })
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(DevCardRowContentSkeleton, {});
+  return /* @__PURE__ */ jsxs("div", { className: ROW_INNER_CLASS, children: [
+    /* @__PURE__ */ jsxs("div", { className: ROW_TEXT_COLUMN_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { className: ROW_TITLE_LINE_CLASS, children: /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate", children: title }) }),
+      /* @__PURE__ */ jsx("div", { className: ROW_SUBTITLE_LINE_CLASS, children: /* @__PURE__ */ jsx("p", { className: "truncate uppercase tracking-[-0.28px] text-ods-text-secondary text-h5", children: subtitle }) }),
+      /* @__PURE__ */ jsx("div", { className: ROW_DESCRIPTION_LINE_CLASS, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-3 break-words text-ods-text-secondary text-h4", children: description || emptyDescription }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-shrink-0 flex-col gap-2 self-start", children: rightBadges })
+    /* @__PURE__ */ jsx("div", { className: ROW_BADGES_CLASS, children: rightBadges })
   ] });
 }
-function DevCardRowSkeleton() {
-  return /* @__PURE__ */ jsx("div", { className: "border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[24px] items-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-full rounded" }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[20px] items-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-1/2 rounded" }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex min-h-[72px] items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-full rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-full rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[20px] w-2/3 rounded" })
-      ] }) })
+function DevCardRowContentSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: ROW_INNER_CLASS, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxs("div", { className: ROW_TEXT_COLUMN_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { className: ROW_TITLE_LINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-full" }) }),
+      /* @__PURE__ */ jsx("div", { className: ROW_SUBTITLE_LINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h5", className: "w-1/2" }) }),
+      /* @__PURE__ */ jsx("div", { className: ROW_DESCRIPTION_LINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 3, className: "w-full" }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-col gap-2 self-start", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[32px] w-[100px] rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[32px] w-[120px] rounded" })
+    /* @__PURE__ */ jsxs("div", { className: ROW_BADGES_CLASS, children: [
+      /* @__PURE__ */ jsx(StatusBadgeSkeleton, { variant: "card" }),
+      /* @__PURE__ */ jsx(StatusBadgeSkeleton, { variant: "card" })
     ] })
-  ] }) });
+  ] });
+}
+function DevCardRowSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]", children: /* @__PURE__ */ jsx(DevCardRowContentSkeleton, {}) });
 }
 function DevCardRowSkeletonList({
   region = true,
@@ -51,6 +60,7 @@ function DevCardRowSkeletonList({
 }
 export {
   DevCardRowContent,
+  DevCardRowContentSkeleton,
   DevCardRowSkeleton,
   DevCardRowSkeletonList
 };

package/dist/components/shared/dev-section/dev-section-view.js

@@ -47,7 +47,7 @@ function DevSectionView({ sectionKey, preControls, children, showHeading = true
     else params.set(filter.paramKey, value);
     router.replace(`${pathname}?${params.toString()}`, { scroll: false });
   };
-  return /* @__PURE__ */ jsx(PageDataSyncProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-10", children: [
+  return /* @__PURE__ */ jsx(PageDataSyncProvider, { stated: section.mirrored, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-10", children: [
     showHeading ? /* @__PURE__ */ jsx(SectionHeading, { title: section.hero.title, punctuation: ":", action: /* @__PURE__ */ jsx(PageDataSyncRow, { inline: true }) }) : /* @__PURE__ */ jsx(PageDataSyncRow, {}),
     preControls,
     (search || filter) && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [

package/dist/components/shared/legal-document/index.d.ts

@@ -5,7 +5,7 @@
  * formerly-duplicated `PrivacyPolicyPage` + `TermsOfServicePage`
  * (95% identical, differing only in copy strings).
  */
-export { LegalDocumentPage, legalDocumentStampLabel, type LegalDocumentPageProps, type LegalDocumentMarkdownRendererProps, } from './legal-document-page';
+export { LegalDocumentPage, legalDocumentStampLabel, LegalDocumentSkeleton, LEGAL_DOCUMENT_SKELETON_SECTIONS, type LegalDocumentPageProps, type LegalDocumentMarkdownRendererProps, } from './legal-document-page';
 export { useLegalDocs, type LegalDocument, type UseLegalDocsOptions, type UseLegalDocsReturn } from './use-legal-docs';
 export { useLegalDocuments, toLegalDocumentSummaries, type LegalDocumentSummary, type UseLegalDocumentsOptions, type UseLegalDocumentsReturn, } from './use-legal-documents';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/shared/legal-document/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/legal-document/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,kCAAkC,GACxC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACvH,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/legal-document/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,qBAAqB,EACrB,gCAAgC,EAChC,KAAK,sBAAsB,EAC3B,KAAK,kCAAkC,GACxC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACvH,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,uBAAuB,CAAC"}

package/dist/components/shared/legal-document/index.js

@@ -1,6 +1,8 @@
 import {
   LegalDocumentPage,
-  legalDocumentStampLabel
+  legalDocumentStampLabel,
+  LegalDocumentSkeleton,
+  LEGAL_DOCUMENT_SKELETON_SECTIONS
 } from "./legal-document-page.js";
 import { useLegalDocs } from "./use-legal-docs.js";
 import {
@@ -8,7 +10,9 @@ import {
   toLegalDocumentSummaries
 } from "./use-legal-documents.js";
 export {
+  LEGAL_DOCUMENT_SKELETON_SECTIONS,
   LegalDocumentPage,
+  LegalDocumentSkeleton,
   legalDocumentStampLabel,
   toLegalDocumentSummaries,
   useLegalDocs,

package/dist/components/shared/legal-document/legal-document-page.d.ts

@@ -83,5 +83,19 @@ export interface LegalDocumentPageProps {
  * null for one that states neither. One wording for every legal surface.
  */
 export declare function legalDocumentStampLabel(doc: Pick<LegalDocument, 'version' | 'effectiveDate'> | null | undefined): string | null;
+/**
+ * Sections a legal document's skeleton draws: its first fold. One section at the rendered `article` type is about
+ * 290px (a 32px heading with its rule and margins, then a three-line and a two-line paragraph at 20px / 1.6) from
+ * desktop and about 260px on a phone, so three fill the screen under the page title at 1440 and at 390; a long
+ * document is drawn no further.
+ */
+export declare const LEGAL_DOCUMENT_SKELETON_SECTIONS = 3;
+/**
+ * A legal document's body while it is read: the rich renderer's own skeleton (`RichMarkdownRendererSkeleton`, the
+ * `article` type the page renders with), opening with the document's own title row, then its first fold of sections.
+ */
+export declare function LegalDocumentSkeleton({ sections }: {
+    sections?: number;
+}): import("react").JSX.Element;
 export declare function LegalDocumentPage({ docType, title: titleProp, fallbackDescription, contactEmail, errorContactPrompt, errorTitle: errorTitleProp, emptyStateMessage: emptyStateMessageProp, initialData, apiEndpoint, MarkdownRenderer, documentsEndpoint, backButton, faq, shell, }: LegalDocumentPageProps): import("react").JSX.Element;
 //# sourceMappingURL=legal-document-page.d.ts.map

package/dist/components/shared/legal-document/legal-document-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legal-document-page.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/legal-document/legal-document-page.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,EAA4B,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKnF,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGpE,MAAM,WAAW,kCAAkC;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,sBAAsB;IACrC;;qDAEiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB;0EACsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;wEACoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;4DACwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC;0DACsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC;IACrE;mEAC+D;IAC/D,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC/C;;sCAEkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,eAAe,CAAC,GAAG,IAAI,GAAG,SAAS,GACvE,MAAM,GAAG,IAAI,CAMf;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,mBAAwB,EACxB,YAAY,EACZ,kBAAyE,EACzE,UAAU,EAAE,cAAc,EAC1B,iBAAiB,EAAE,qBAAqB,EACxC,WAAkB,EAClB,WAAW,EACX,gBAAuC,EACvC,iBAAiB,EACjB,UAAU,EACV,GAAG,EACH,KAAY,GACb,EAAE,sBAAsB,+BA6FxB"}
+{"version":3,"file":"legal-document-page.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/legal-document/legal-document-page.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,OAAO,EAA4B,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAMnF,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGpE,MAAM,WAAW,kCAAkC;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,sBAAsB;IACrC;;qDAEiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB;0EACsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;wEACoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;4DACwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC;0DACsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC;IACrE;mEAC+D;IAC/D,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC/C;;sCAEkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,eAAe,CAAC,GAAG,IAAI,GAAG,SAAS,GACvE,MAAM,GAAG,IAAI,CAMf;AAED;;;;;GAKG;AACH,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAElD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,QAA2C,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,+BAM3G;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,mBAAwB,EACxB,YAAY,EACZ,kBAAyE,EACzE,UAAU,EAAE,cAAc,EAC1B,iBAAiB,EAAE,qBAAqB,EACxC,WAAkB,EAClB,WAAW,EACX,gBAAuC,EACvC,iBAAiB,EACjB,UAAU,EACV,GAAG,EACH,KAAY,GACb,EAAE,sBAAsB,+BA2FxB"}

package/dist/components/shared/legal-document/legal-document-page.js

@@ -2,11 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "../../../embed-shims/next-link.js";
 import { useRouter } from "../../../embed-shims/next-navigation.js";
+import { cn } from "../../../utils/cn.js";
 import { FaqSection, pageFaqProps } from "../../faq/faq-section.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { LoadingRegion } from "../../loading/loading-region.js";
 import { PageShell, PageLayout } from "../../ui/index.js";
 import { DataSyncLine } from "../../ui/data-attribution.js";
-import { RichMarkdownRenderer } from "../../ui/markdown/index.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
+import { RichMarkdownRenderer, RichMarkdownRendererSkeleton } from "../../ui/markdown/index.js";
 import { useLegalDocs } from "./use-legal-docs.js";
 import { useLegalDocuments } from "./use-legal-documents.js";
 function legalDocumentStampLabel(doc) {
@@ -16,6 +18,10 @@ function legalDocumentStampLabel(doc) {
   ].filter((part) => part !== null);
   return parts.length > 0 ? parts.join(" \xB7 ") : null;
 }
+const LEGAL_DOCUMENT_SKELETON_SECTIONS = 3;
+function LegalDocumentSkeleton({ sections = LEGAL_DOCUMENT_SKELETON_SECTIONS }) {
+  return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the document", className: "w-full", children: /* @__PURE__ */ jsx(RichMarkdownRendererSkeleton, { title: true, sections }) });
+}
 function LegalDocumentPage({
   docType,
   title: titleProp,
@@ -33,7 +39,8 @@ function LegalDocumentPage({
   shell = true
 }) {
   const router = useRouter();
-  const { data, isLoading, error } = useLegalDocs(docType, { initialData, apiEndpoint });
+  const { data, isLoading: fetching, error } = useLegalDocs(docType, { initialData, apiEndpoint });
+  const isLoading = useLoadingScope() || fetching;
   const backCfg = backButton === false ? void 0 : {
     label: backButton?.label ?? "Back to home",
     onClick: () => router.push(backButton?.href ?? "/")
@@ -45,48 +52,46 @@ function LegalDocumentPage({
   const faqSlot = faq && faqTopic ? { ...faq, topic: faqTopic } : null;
   const errorTitle = errorTitleProp ?? `Unable to load ${title}`;
   const emptyStateMessage = emptyStateMessageProp ?? `${title} is not available at this time.`;
-  const subtitle = legalDocumentStampLabel(data) ?? fallbackDescription;
-  const inner = /* @__PURE__ */ jsxs(PageLayout, { title, subtitle, backButton: backCfg, titleSize: "h1", titleWrap: true, children: [
-    /* @__PURE__ */ jsx(DataSyncLine, { sync: data ? { source: "github", syncedAt: data.lastSynced } : null, loading: isLoading && !data }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-start gap-6 lg:flex-row lg:gap-10", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("article", { className: "space-y-2", children: isLoading ? (
-      // Loading skeleton matching Knowledge Hub pattern
-      /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-3/4 rounded-lg" }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-full rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-full rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-5/6 rounded" })
-        ] }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-32 rounded-lg border border-ods-border" }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-full rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-4/5 rounded" })
-        ] })
-      ] })
-    ) : error ? /* @__PURE__ */ jsxs("div", { className: "space-y-4 text-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-error bg-ods-error-secondary p-6", children: [
-        /* @__PURE__ */ jsx("p", { className: "mb-2 text-ods-error", children: errorTitle }),
-        /* @__PURE__ */ jsx("p", { className: "text-ods-error text-h6", children: error })
-      ] }),
-      contactEmail && /* @__PURE__ */ jsxs("div", { className: "text-ods-text-secondary", children: [
-        /* @__PURE__ */ jsx("p", { children: errorContactPrompt }),
-        /* @__PURE__ */ jsx(Link, { href: `mailto:${contactEmail}`, className: "text-ods-accent hover:underline", children: contactEmail })
-      ] })
-    ] }) : data ? /* @__PURE__ */ jsx(MarkdownRenderer, { content: data.content, sectionIds: data.sections || [], demoteMarkdownH1ToH2: true }) : /* @__PURE__ */ jsxs("div", { className: "py-16 text-center text-ods-text-secondary", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-h4", children: emptyStateMessage }),
-      contactEmail && /* @__PURE__ */ jsxs("p", { className: "mt-2", children: [
-        "Please contact",
-        " ",
-        /* @__PURE__ */ jsx(Link, { href: `mailto:${contactEmail}`, className: "text-ods-accent hover:underline", children: contactEmail }),
-        " ",
-        "for more information."
-      ] })
-    ] }) }) }) }) }),
-    faqSlot && /* @__PURE__ */ jsx(FaqSection, { ...pageFaqProps(faqSlot) })
-  ] });
+  const subtitle = isLoading ? void 0 : legalDocumentStampLabel(data) ?? fallbackDescription;
+  const inner = /* @__PURE__ */ jsxs(
+    PageLayout,
+    {
+      title,
+      subtitle,
+      subtitleRow: isLoading ? "always" : void 0,
+      backButton: backCfg,
+      titleSize: "h1",
+      titleWrap: true,
+      children: [
+        /* @__PURE__ */ jsx(DataSyncLine, { sync: data ? { source: "github", syncedAt: data.lastSynced } : null, loading: isLoading }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-start gap-6 lg:flex-row lg:gap-10", children: /* @__PURE__ */ jsx("div", { className: cn("flex-1", isLoading && "w-full"), children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("article", { className: "space-y-2", children: isLoading ? /* @__PURE__ */ jsx(LegalDocumentSkeleton, {}) : error ? /* @__PURE__ */ jsxs("div", { className: "space-y-4 text-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-error bg-ods-error-secondary p-6", children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-2 text-ods-error", children: errorTitle }),
+            /* @__PURE__ */ jsx("p", { className: "text-ods-error text-h6", children: error })
+          ] }),
+          contactEmail && /* @__PURE__ */ jsxs("div", { className: "text-ods-text-secondary", children: [
+            /* @__PURE__ */ jsx("p", { children: errorContactPrompt }),
+            /* @__PURE__ */ jsx(Link, { href: `mailto:${contactEmail}`, className: "text-ods-accent hover:underline", children: contactEmail })
+          ] })
+        ] }) : data ? /* @__PURE__ */ jsx(MarkdownRenderer, { content: data.content, sectionIds: data.sections || [], demoteMarkdownH1ToH2: true }) : /* @__PURE__ */ jsxs("div", { className: "py-16 text-center text-ods-text-secondary", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-h4", children: emptyStateMessage }),
+          contactEmail && /* @__PURE__ */ jsxs("p", { className: "mt-2", children: [
+            "Please contact",
+            " ",
+            /* @__PURE__ */ jsx(Link, { href: `mailto:${contactEmail}`, className: "text-ods-accent hover:underline", children: contactEmail }),
+            " ",
+            "for more information."
+          ] })
+        ] }) }) }) }) }),
+        faqSlot && /* @__PURE__ */ jsx(FaqSection, { ...pageFaqProps(faqSlot) })
+      ]
+    }
+  );
   return shell ? /* @__PURE__ */ jsx(PageShell, { children: inner }) : /* @__PURE__ */ jsx("div", { className: "page-shell-content", children: inner });
 }
 export {
+  LEGAL_DOCUMENT_SKELETON_SECTIONS,
   LegalDocumentPage,
+  LegalDocumentSkeleton,
   legalDocumentStampLabel
 };

package/dist/components/shared/legal-document/use-legal-docs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-legal-docs.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/legal-document/use-legal-docs.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D,OAAO,EAAE,MAAM,CAAC;IAChB,oFAAoF;IACpF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,6FAA6F;IAC7F,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM,CAAC;QACtB,aAAa,EAAE,MAAM,CAAC;QACtB,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC;mDAC+C;IAC/C,WAAW,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA6ED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CAiHnG"}
+{"version":3,"file":"use-legal-docs.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/legal-document/use-legal-docs.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9D,OAAO,EAAE,MAAM,CAAC;IAChB,oFAAoF;IACpF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,6FAA6F;IAC7F,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM,CAAC;QACtB,aAAa,EAAE,MAAM,CAAC;QACtB,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC;mDAC+C;IAC/C,WAAW,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA6ED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CAoHnG"}

package/dist/components/shared/legal-document/use-legal-docs.js

@@ -1,6 +1,7 @@
 "use client";
 import { useState, useEffect, useRef } from "react";
 import { contentFetch } from "../../../utils/embed-content-fetch.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 function isRecord(value) {
   return typeof value === "object" && value !== null;
 }
@@ -67,7 +68,9 @@ function useLegalDocs(docType, options = {}) {
     setIsLoading(!initialData);
     setReloadCount(0);
   }
+  const held = useLoadingScope();
   useEffect(() => {
+    if (held) return;
     if (initialData && reloadCount === 0) return;
     const requestId = ++requestIdRef.current;
     const isCurrent = () => requestId === requestIdRef.current;
@@ -99,7 +102,7 @@ function useLegalDocs(docType, options = {}) {
       }
     };
     void fetchDocument();
-  }, [docType, effectiveEndpoint, initialData, reloadCount]);
+  }, [docType, effectiveEndpoint, initialData, reloadCount, held]);
   const refetch = () => {
     setIsLoading(true);
     setError(null);

package/dist/components/shared/legal-document/use-legal-documents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-legal-documents.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/legal-document/use-legal-documents.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,oBAAoB;IACnC,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAWD,kFAAkF;AAClF,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,OAAO,GAAG,oBAAoB,EAAE,CAsBjF;AAED,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,wBAA6B,GAAG,uBAAuB,CA+BjG"}
+{"version":3,"file":"use-legal-documents.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/legal-document/use-legal-documents.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,oBAAoB;IACnC,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAWD,kFAAkF;AAClF,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,OAAO,GAAG,oBAAoB,EAAE,CAsBjF;AAED,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,wBAA6B,GAAG,uBAAuB,CAiCjG"}

package/dist/components/shared/legal-document/use-legal-documents.js

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import { contentFetch } from "../../../utils/embed-content-fetch.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 function isRecord(value) {
   return typeof value === "object" && value !== null;
 }
@@ -33,7 +34,8 @@ function toLegalDocumentSummaries(payload) {
 }
 function useLegalDocuments(options = {}) {
   const endpoint = options.apiEndpoint ?? "/api/legal";
-  const enabled = options.enabled ?? true;
+  const held = useLoadingScope();
+  const enabled = (options.enabled ?? true) && !held;
   const [state, setState] = useState({ documents: [], isLoading: enabled, error: null });
   useEffect(() => {
     let current = enabled;

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

@@ -5,6 +5,8 @@ export interface MediaGalleryStripItem {
     /** Stable key when present (e.g. release_media rows); falls back to index. */
     id?: string;
 }
+/** Tiles a skeleton draws when not told how many (a strip's first fold on a wide screen). */
+export declare const MEDIA_GALLERY_STRIP_SKELETON_COUNT = 4;
 export interface MediaGalleryStripProps {
     items: MediaGalleryStripItem[];
     className?: string;
@@ -20,4 +22,9 @@ export interface MediaGalleryStripProps {
  * pages (the release copy also had a raw-index lightbox bug this component fixes).
  */
 export declare function MediaGalleryStrip({ items, className }: MediaGalleryStripProps): import("react").JSX.Element | null;
+/** The media strip while it is read: `count` tiles of the strip's own 240×200 size. */
+export declare function MediaGalleryStripSkeleton({ count, className, }: {
+    count?: number;
+    className?: string;
+}): import("react").JSX.Element;
 //# sourceMappingURL=media-gallery-strip.d.ts.map