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

package/dist/components/onboarding-guides/index.cjs

@@ -7,28 +7,28 @@
 
 
 
-var _chunkFQWBIKF4cjs = require('../../chunk-FQWBIKF4.cjs');
-require('../../chunk-RM6AHNM4.cjs');
-require('../../chunk-5AV5R5RC.cjs');
-require('../../chunk-VL6IXTAI.cjs');
-require('../../chunk-ZCU2PYCW.cjs');
-require('../../chunk-GY2JESOC.cjs');
-require('../../chunk-2IFCRPNP.cjs');
+var _chunkINI4ADPTcjs = require('../../chunk-INI4ADPT.cjs');
+require('../../chunk-RMUSPTJN.cjs');
+require('../../chunk-7XFVUUVZ.cjs');
+require('../../chunk-VRDHAR3X.cjs');
+require('../../chunk-MPTMT773.cjs');
+require('../../chunk-RB7VLVMD.cjs');
+require('../../chunk-ZV45VS6K.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
-require('../../chunk-XCH7SPGI.cjs');
-require('../../chunk-FQSXZC2K.cjs');
+require('../../chunk-XVFM6SJA.cjs');
+require('../../chunk-2JRSYWFP.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-RO72PRQI.cjs');
-require('../../chunk-YUMFVQIN.cjs');
-require('../../chunk-T5FRANE6.cjs');
-require('../../chunk-74ALTXXC.cjs');
-require('../../chunk-BIA77I6B.cjs');
-require('../../chunk-3RFQPQ7Z.cjs');
-require('../../chunk-GZKWF6NH.cjs');
-require('../../chunk-EFTUFJS2.cjs');
+require('../../chunk-ZRDMGMY7.cjs');
+require('../../chunk-C42WIUH6.cjs');
+require('../../chunk-7VI7TOGI.cjs');
+require('../../chunk-YL6ZB2SR.cjs');
+require('../../chunk-GTONIRJU.cjs');
+require('../../chunk-RNLRS4ID.cjs');
+require('../../chunk-XZ6DKGT4.cjs');
+require('../../chunk-LELS4XMX.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1817,20 +1817,20 @@ require('../../chunk-LMBYZITR.cjs');
 require('../../chunk-TMVC7S2R.cjs');
 require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
-require('../../chunk-NET74KSQ.cjs');
-require('../../chunk-3RYIF4OW.cjs');
-require('../../chunk-SVP6DJFL.cjs');
+require('../../chunk-TZ4GKUO2.cjs');
+require('../../chunk-XXJL5GY3.cjs');
+require('../../chunk-57B5RUYD.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-NS64LMVE.cjs');
-require('../../chunk-22XAPV6N.cjs');
-require('../../chunk-OJJ4RL2T.cjs');
-require('../../chunk-63N4FN5V.cjs');
-require('../../chunk-M7YZGRAV.cjs');
-require('../../chunk-EQZXJUYV.cjs');
+require('../../chunk-FZB4RMRK.cjs');
+require('../../chunk-DGNBXZXT.cjs');
+require('../../chunk-R3JX4MXD.cjs');
+require('../../chunk-SETFUCZA.cjs');
+require('../../chunk-AAECWUNV.cjs');
+require('../../chunk-JTSUAHDL.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1839,29 +1839,25 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-I5MSCD57.cjs');
+require('../../chunk-3LW5TD54.cjs');
 require('../../chunk-ASMNNSUQ.cjs');
 require('../../chunk-CW3ML76U.cjs');
-require('../../chunk-MWLD6NXV.cjs');
-require('../../chunk-R3TWQ3ZJ.cjs');
+require('../../chunk-VFZFCRAL.cjs');
+require('../../chunk-5P4TDV7V.cjs');
 require('../../chunk-DGFDBPO7.cjs');
-require('../../chunk-HOTM4UM6.cjs');
+require('../../chunk-E76ONBKF.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
-require('../../chunk-HTRILBJD.cjs');
-require('../../chunk-K6VWTUCH.cjs');
-require('../../chunk-AKK3EO37.cjs');
+require('../../chunk-YXDHVHB2.cjs');
+require('../../chunk-FL2RMEDX.cjs');
+require('../../chunk-XIFEZ2JT.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
-require('../../chunk-NO5UJLLQ.cjs');
-require('../../chunk-2QMBXGMQ.cjs');
+require('../../chunk-WEANWBJH.cjs');
+require('../../chunk-XFRBEXQN.cjs');
+require('../../chunk-TF5D5MNO.cjs');
 require('../../chunk-V45KLJQP.cjs');
+require('../../chunk-65VVJSQZ.cjs');
 require('../../chunk-KHKPLOU4.cjs');
-require('../../chunk-L4UI63K6.cjs');
-require('../../chunk-OF336YWG.cjs');
-require('../../chunk-3LU4UFPS.cjs');
-require('../../chunk-RB6BSE3O.cjs');
-require('../../chunk-H3RYUTND.cjs');
-require('../../chunk-3ATAYP36.cjs');
 
 
 
@@ -1870,4 +1866,4 @@ require('../../chunk-3ATAYP36.cjs');
 
 
 
-exports.OnboardingGuideDetailView = _chunkFQWBIKF4cjs.OnboardingGuideDetailView; exports.OnboardingGuidesCatalogSkeleton = _chunkFQWBIKF4cjs.OnboardingGuidesCatalogSkeleton; exports.OnboardingGuidesCatalogView = _chunkFQWBIKF4cjs.OnboardingGuidesCatalogView; exports.onboardingGuideKeys = _chunkFQWBIKF4cjs.onboardingGuideKeys; exports.useOnboardingGuide = _chunkFQWBIKF4cjs.useOnboardingGuide; exports.useOnboardingGuideSections = _chunkFQWBIKF4cjs.useOnboardingGuideSections; exports.useOnboardingGuides = _chunkFQWBIKF4cjs.useOnboardingGuides;
+exports.ONBOARDING_GUIDE_RELATED_SKELETON_COUNT = _chunkINI4ADPTcjs.ONBOARDING_GUIDE_RELATED_SKELETON_COUNT; exports.OnboardingGuideDetailView = _chunkINI4ADPTcjs.OnboardingGuideDetailView; exports.OnboardingGuidesCatalogView = _chunkINI4ADPTcjs.OnboardingGuidesCatalogView; exports.onboardingGuideKeys = _chunkINI4ADPTcjs.onboardingGuideKeys; exports.useOnboardingGuide = _chunkINI4ADPTcjs.useOnboardingGuide; exports.useOnboardingGuideSections = _chunkINI4ADPTcjs.useOnboardingGuideSections; exports.useOnboardingGuides = _chunkINI4ADPTcjs.useOnboardingGuides;

package/dist/components/onboarding-guides/index.d.ts

@@ -19,7 +19,6 @@
  *     '@flamingo-stack/openframe-frontend-core/components/chat'
  */
 export { OnboardingGuidesCatalogView, type OnboardingGuidesCatalogViewProps } from './onboarding-guides-catalog-view';
-export { OnboardingGuideDetailView, type OnboardingGuideDetailViewProps } from './onboarding-guide-detail-view';
-export { OnboardingGuidesCatalogSkeleton } from './onboarding-guides-catalog-skeleton';
+export { OnboardingGuideDetailView, ONBOARDING_GUIDE_RELATED_SKELETON_COUNT, type OnboardingGuideDetailViewProps, } from './onboarding-guide-detail-view';
 export { useOnboardingGuides, useOnboardingGuide, useOnboardingGuideSections, onboardingGuideKeys, } from './hooks/use-onboarding-guides';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/onboarding-guides/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-guides/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,2BAA2B,EAAE,KAAK,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AACtH,OAAO,EAAE,yBAAyB,EAAE,KAAK,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AAChH,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AAEvF,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-guides/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,2BAA2B,EAAE,KAAK,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AACtH,OAAO,EACL,yBAAyB,EACzB,uCAAuC,EACvC,KAAK,8BAA8B,GACpC,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,+BAA+B,CAAC"}

package/dist/components/onboarding-guides/index.js

@@ -1,6 +1,8 @@
 import { OnboardingGuidesCatalogView } from "./onboarding-guides-catalog-view.js";
-import { OnboardingGuideDetailView } from "./onboarding-guide-detail-view.js";
-import { OnboardingGuidesCatalogSkeleton } from "./onboarding-guides-catalog-skeleton.js";
+import {
+  OnboardingGuideDetailView,
+  ONBOARDING_GUIDE_RELATED_SKELETON_COUNT
+} from "./onboarding-guide-detail-view.js";
 import {
   useOnboardingGuides,
   useOnboardingGuide,
@@ -8,8 +10,8 @@ import {
   onboardingGuideKeys
 } from "./hooks/use-onboarding-guides.js";
 export {
+  ONBOARDING_GUIDE_RELATED_SKELETON_COUNT,
   OnboardingGuideDetailView,
-  OnboardingGuidesCatalogSkeleton,
   OnboardingGuidesCatalogView,
   onboardingGuideKeys,
   useOnboardingGuide,

package/dist/components/onboarding-guides/onboarding-guide-detail-view.d.ts

@@ -11,6 +11,12 @@
  * (markdown, video warmup, captions, related-card hrefs via
  * `runtime.composeContentUrl`). Optional `MarkdownRenderer` lets hosts swap a
  * renderer with extra plugins.
+ *
+ * LOADING: the view is its own loading state. While the guide is read (or in a host's loading scope) it renders the
+ * SAME page over an empty guide (`EMPTY_ONBOARDING_GUIDE`, or the host's empty placeholder) inside a `LoadingScope`:
+ * the title block, the tags, the metadata grid, the body, the byline and the related guides each draw their own
+ * skeleton; the back button and the static labels are real. Parts a guide may not have (its video, its bites) are left
+ * out while loading and carry `data-loading-optional` once loaded.
  */
 import { type ComponentType, type ReactNode } from 'react';
 import type { OnboardingGuide } from '../chat/types/entities/onboarding-guide';
@@ -57,5 +63,7 @@ export interface OnboardingGuideDetailViewProps {
      *  avoiding a nested `<main>`. */
     shell?: boolean;
 }
+/** Related guide cards the related block's skeleton draws (a guide's first fold). */
+export declare const ONBOARDING_GUIDE_RELATED_SKELETON_COUNT = 3;
 export declare function OnboardingGuideDetailView({ authorHref, authorBio, fallbackBio, initialData, slug, guideEndpoint, related, MarkdownRenderer, renderRelatedCard, backHref, backLabel, basePath, relatedContent, shell, }: OnboardingGuideDetailViewProps): import("react").JSX.Element;
 //# sourceMappingURL=onboarding-guide-detail-view.d.ts.map

package/dist/components/onboarding-guides/onboarding-guide-detail-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-guide-detail-view.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-guides/onboarding-guide-detail-view.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAkB/E,MAAM,WAAW,8BAA8B;IAC7C;2EACuE;IACvE,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;iEAC6D;IAC7D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B;iEAC6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;+EAC2E;IAC3E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;uEAEmE;IACnE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;oCACgC;IAChC,gBAAgB,CAAC,EAAE,aAAa,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtD,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IAC1D,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;kFAC8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;0EAEsE;IACtE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;sCAEkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,UAAU,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,IAAI,EACJ,aAAa,EACb,OAAY,EACZ,gBAAuC,EACvC,iBAAiB,EACjB,QAAQ,EACR,SAAqC,EACrC,QAA+B,EAC/B,cAAc,EACd,KAAY,GACb,EAAE,8BAA8B,+BAuKhC"}
+{"version":3,"file":"onboarding-guide-detail-view.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-guides/onboarding-guide-detail-view.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAoB/E,MAAM,WAAW,8BAA8B;IAC7C;2EACuE;IACvE,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;iEAC6D;IAC7D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B;iEAC6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;+EAC2E;IAC3E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;uEAEmE;IACnE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;oCACgC;IAChC,gBAAgB,CAAC,EAAE,aAAa,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtD,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IAC1D,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;kFAC8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;0EAEsE;IACtE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;sCAEkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AASD,qFAAqF;AACrF,eAAO,MAAM,uCAAuC,IAAI,CAAC;AAiFzD,wBAAgB,yBAAyB,CAAC,EACxC,UAAU,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,IAAI,EACJ,aAAa,EACb,OAAY,EACZ,gBAAuC,EACvC,iBAAiB,EACjB,QAAQ,EACR,SAAqC,EACrC,QAA+B,EAC/B,cAAc,EACd,KAAY,GACb,EAAE,8BAA8B,+BAyKhC"}

package/dist/components/onboarding-guides/onboarding-guide-detail-view.js

@@ -16,10 +16,76 @@ import { toStripProfile } from "../features/video-bites-shared.js";
 import { VideoBitesStrip } from "../features/video-bites-strip.js";
 import { PageShell } from "../layout/article-detail-layout.js";
 import { PageLayout } from "../layout/page-layout.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { ArticleAuthorByline } from "../shared/article-author-byline.js";
-import { DetailPageSkeleton } from "../shared/detail-page-skeleton.js";
 import { LoadError } from "../ui/error-state.js";
+import { LoadingScope, useLoadingScope } from "../ui/loading-scope.js";
 import { RichMarkdownRenderer } from "../ui/markdown/index.js";
+const RELATED_BLOCK_CLASS = "space-y-4 border-t border-ods-border pt-8";
+const RELATED_HEADING_CLASS = "tracking-[-0.36px] text-ods-text-primary text-h3";
+const RELATED_LIST_CLASS = "flex flex-col gap-3";
+const BODY_CLASS = "space-y-4";
+const SECTION_CELL_LABEL = "Section";
+const ONBOARDING_GUIDE_RELATED_SKELETON_COUNT = 3;
+const EMPTY_ONBOARDING_GUIDE = {
+  id: "",
+  title: "",
+  slug: "",
+  section: "",
+  step_order: 0,
+  section_order: 0,
+  content: "",
+  video_summary: null,
+  transcript: null,
+  transcript_words_data: null,
+  srt_content: null,
+  ai_transcript_formatted: null,
+  main_video_url: null,
+  main_video_thumbnail: null,
+  youtube_url: null,
+  highlight_video_url: null,
+  highlight_video_thumbnail: null,
+  highlight_video_duration_ms: null,
+  highlight_video_source: null,
+  video_bites: [],
+  featured_image: null,
+  og_image_url: null,
+  seo_title: null,
+  seo_description: null,
+  seo_keywords: null,
+  status: "published",
+  published_at: null,
+  author_id: null,
+  custom_instructions: null,
+  config: null,
+  ai_effort_score: null,
+  onboarding_guide_tags: [],
+  created_at: "",
+  updated_at: "",
+  created_by: null,
+  updated_by: null
+};
+function RelatedGuides({
+  section,
+  related,
+  renderCard
+}) {
+  const loading = useLoadingScope();
+  const guides = loading ? Array.from({ length: ONBOARDING_GUIDE_RELATED_SKELETON_COUNT }, (_, i) => ({
+    ...EMPTY_ONBOARDING_GUIDE,
+    id: `skeleton-${i}`
+  })) : related;
+  if (guides.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: RELATED_BLOCK_CLASS, children: [
+    /* @__PURE__ */ jsxs("h2", { className: RELATED_HEADING_CLASS, children: [
+      "More in",
+      " ",
+      loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "inline-block w-32 align-middle" }) : section
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: RELATED_LIST_CLASS, children: guides.map((guide) => /* @__PURE__ */ jsx("li", { "data-loading-item": true, children: renderCard(guide) }, guide.id)) })
+  ] });
+}
 function OnboardingGuideDetailView({
   authorHref,
   authorBio,
@@ -42,25 +108,29 @@ function OnboardingGuideDetailView({
   const router = useRouter();
   const renderShell = (node) => shell ? /* @__PURE__ */ jsx(PageShell, { children: node }) : /* @__PURE__ */ jsx("div", { className: "page-shell-content", children: node });
   const url = initialData ? null : slug && guideEndpoint ? guideEndpoint(slug) : null;
-  const { data: guide, isLoading, error, reload } = useSelfFetch(url, { initialData });
+  const scoped = useLoadingScope();
+  const {
+    data: guide,
+    isLoading,
+    error,
+    reload
+  } = useSelfFetch(scoped ? null : url, {
+    initialData
+  });
   const { ref: videoWarmupRef } = useVideoWarmup({
     videoUrl: guide?.main_video_url,
     supabaseStorageOrigin: runtime?.endpoints.supabaseStorageOrigin
   });
-  if (error || !guide && !isLoading) {
+  const backCfg = { label: backLabel, onClick: () => router.push(resolvedBackHref) };
+  const loading = scoped || !guide && isLoading;
+  if (!loading && (error || !guide)) {
     return renderShell(/* @__PURE__ */ jsx(LoadError, { message: "Guide not found.", onRetry: reload }));
   }
-  if (!guide) {
-    return renderShell(
-      // Match the loaded page's top offset (TitleBlock's
-      // `pt-[var(--spacing-system-l)]`) so content doesn't jump on load.
-      /* @__PURE__ */ jsx("div", { className: "pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ jsx(DetailPageSkeleton, { bare: true, showImageGallery: false }) })
-    );
-  }
-  const { captionsUrl, highlightCaptionsUrl } = captions.forEntity("onboarding_guide", guide);
-  const videoPoster = guide.main_video_thumbnail || guide.featured_image || guide.og_image_url || // `buildOgPlaceholderUrl` always returns a usable string (relative route at
+  const view = guide ?? EMPTY_ONBOARDING_GUIDE;
+  const { captionsUrl, highlightCaptionsUrl } = captions.forEntity("onboarding_guide", view);
+  const videoPoster = view.main_video_thumbnail || view.featured_image || view.og_image_url || // `buildOgPlaceholderUrl` always returns a usable string (relative route at
   // worst), so it's the terminal fallback — no trailing `|| undefined` needed.
-  buildOgPlaceholderUrl(runtime?.endpoints, guide.title, { aspect: "wide" });
+  buildOgPlaceholderUrl(runtime?.endpoints, view.title, { aspect: "wide" });
   const defaultRenderRelatedCard = (g) => {
     const cta = resolveContentHref(runtime?.composeContentUrl, {
       type: "onboarding_guide",
@@ -71,82 +141,70 @@ function OnboardingGuideDetailView({
     return /* @__PURE__ */ jsx(OnboardingGuideCard, { guide: g, href: cta.href, targetPlatform: cta.targetPlatform });
   };
   const renderRelatedCardFn = renderRelatedCard ?? defaultRenderRelatedCard;
-  return renderShell(
-    /* @__PURE__ */ jsxs(
-      PageLayout,
+  const page = /* @__PURE__ */ jsxs(PageLayout, { title: view.title, loading, titleSize: "h1", titleWrap: true, backButton: backCfg, children: [
+    /* @__PURE__ */ jsx(EntityTagBadges, { tags: view.onboarding_guide_tags }),
+    /* @__PURE__ */ jsx(
+      EntityAuthorCard,
       {
-        title: guide.title,
-        titleSize: "h1",
-        titleWrap: true,
-        backButton: { label: backLabel, onClick: () => router.push(resolvedBackHref) },
-        children: [
-          /* @__PURE__ */ jsx(EntityTagBadges, { tags: guide.onboarding_guide_tags }),
-          /* @__PURE__ */ jsx(
-            EntityAuthorCard,
-            {
-              author: guide.author,
-              authorHref,
-              publishedAt: guide.published_at,
-              extraCells: [
-                {
-                  value: `${guide.section} \xB7 Step ${guide.step_order}`,
-                  label: "Section",
-                  uppercase: false
-                }
-              ]
-            }
-          ),
-          (guide.main_video_url || guide.youtube_url) && /* @__PURE__ */ jsx("div", { ref: videoWarmupRef, children: /* @__PURE__ */ jsx(
-            EntityVideoSection,
-            {
-              mainVideoUrl: guide.main_video_url,
-              youtubeUrl: guide.youtube_url || void 0,
-              highlightVideoUrl: guide.highlight_video_url,
-              mainVideoPoster: videoPoster,
-              highlightVideoThumbnail: guide.highlight_video_thumbnail || void 0,
-              videoSummary: void 0,
-              videoBites: void 0,
-              title: guide.title,
-              captionsUrl,
-              highlightCaptionsUrl,
-              MarkdownRenderer
-            }
-          ) }),
-          guide.content && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: guide.content }) }),
-          /* @__PURE__ */ jsx(
-            VideoBitesStrip,
-            {
-              bites: guide.video_bites ?? [],
-              filterPublished: true,
-              showTitle: false,
-              profile: toStripProfile(guide.author),
-              href: `/onboarding-guides/${guide.slug}`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ArticleAuthorByline,
-            {
-              author: guide.author?.full_name ?? null,
-              avatar: guide.author?.avatar_url,
-              jobTitle: guide.author?.job_title,
-              bio: authorBio ?? guide.author?.about,
-              href: authorHref,
-              fallbackBio
-            }
-          ),
-          related.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4 border-t border-ods-border pt-8", children: [
-            /* @__PURE__ */ jsxs("h2", { className: "tracking-[-0.36px] text-ods-text-primary text-h3", children: [
-              "More in ",
-              guide.section
-            ] }),
-            /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: related.map((r) => /* @__PURE__ */ jsx("li", { children: renderRelatedCardFn(r) }, r.id)) })
-          ] }),
-          /* @__PURE__ */ jsx(Fragment, { children: relatedContent }, "related-content")
+        author: view.author,
+        authorHref,
+        publishedAt: view.published_at,
+        extraCells: [
+          {
+            value: `${view.section} \xB7 Step ${view.step_order}`,
+            label: SECTION_CELL_LABEL,
+            uppercase: false
+          }
         ]
       }
-    )
+    ),
+    !loading && (view.main_video_url || view.youtube_url) && // A guide's video is optional: the loading state leaves it out.
+    /* @__PURE__ */ jsx("div", { ref: videoWarmupRef, "data-loading-optional": "", children: /* @__PURE__ */ jsx(
+      EntityVideoSection,
+      {
+        mainVideoUrl: view.main_video_url,
+        youtubeUrl: view.youtube_url || void 0,
+        highlightVideoUrl: view.highlight_video_url,
+        mainVideoPoster: videoPoster,
+        highlightVideoThumbnail: view.highlight_video_thumbnail || void 0,
+        videoSummary: void 0,
+        videoBites: void 0,
+        title: view.title,
+        captionsUrl,
+        highlightCaptionsUrl,
+        MarkdownRenderer
+      }
+    ) }),
+    (loading || view.content) && /* @__PURE__ */ jsx("div", { className: BODY_CLASS, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: view.content ?? "" }) }),
+    loading ? null : /* @__PURE__ */ jsx("div", { className: "contents", "data-loading-optional": "", children: /* @__PURE__ */ jsx(
+      VideoBitesStrip,
+      {
+        bites: view.video_bites ?? [],
+        filterPublished: true,
+        showTitle: false,
+        profile: toStripProfile(view.author),
+        href: `/onboarding-guides/${view.slug}`
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ArticleAuthorByline,
+      {
+        author: view.author?.full_name ?? null,
+        avatar: view.author?.avatar_url,
+        jobTitle: view.author?.job_title,
+        bio: authorBio ?? view.author?.about,
+        href: authorHref,
+        fallbackBio
+      }
+    ),
+    /* @__PURE__ */ jsx(RelatedGuides, { section: view.section, related, renderCard: renderRelatedCardFn }),
+    /* @__PURE__ */ jsx(Fragment, { children: relatedContent }, "related-content")
+  ] });
+  return renderShell(
+    loading ? /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the guide", announce: !scoped, children: /* @__PURE__ */ jsx(LoadingScope, { children: page }) }) : page
   );
 }
 export {
+  ONBOARDING_GUIDE_RELATED_SKELETON_COUNT,
   OnboardingGuideDetailView
 };

package/dist/components/onboarding-guides/onboarding-guides-catalog-skeleton.d.ts

@@ -1,20 +1,21 @@
+/** The catalog's layout, read by the loaded view and by its sections' skeleton, so the skeleton is the view's size. */
+export declare const CATALOG_VIEW_CLASS = "flex w-full flex-col gap-10";
+export declare const CATALOG_CONTROLS_CLASS = "space-y-4";
+export declare const CATALOG_SECTIONS_CLASS = "space-y-10";
+export declare const CATALOG_SECTION_CLASS = "space-y-4";
+export declare const CATALOG_SECTION_HEADING_CLASS = "flex items-center gap-2 text-ods-text-primary text-h3";
+export declare const CATALOG_SECTION_COUNT_CLASS = "inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 px-2 py-0.5 text-ods-text-secondary text-h6";
+export declare const CATALOG_LIST_CLASS = "flex flex-col gap-4";
 /**
- * Loading skeleton for `/onboarding-guides` — CHROME-LESS, exactly like the
- * loaded `<OnboardingGuidesCatalogView>`. The HOST page owns the
- * `<DevSectionPage sectionKey="onboarding">` shell (hero + back button);
- * this component renders only what replaces the view: the search/pill
- * placeholder block and the section card lists.
- *
- * HISTORY: this used to mount its own `<DevSectionPage>` — nested inside the
- * page's shell that double-rendered the hero + back button during loading
- * (the view was made chrome-less in the page restructure; the skeleton was
- * missed). Keep BOTH chrome-less.
- *
- * Wrapper mirrors the loaded view's `w-full flex flex-col gap-10`; per-card
- * height matches the loaded catalog card so resolve shifts are zero.
+ * Catalog cards one screen shows under the search and the section pills (a 1440x900 desktop and a 390x844 phone
+ * both fit three of the `catalog` card's height before the fold). The section count is the data's: the skeleton
+ * draws ONE section of this fold, and every loaded section is a `data-loading-item`.
  */
-export declare function OnboardingGuidesCatalogSkeleton({ region, }?: {
-    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-    region?: boolean;
-}): import("react").JSX.Element;
+export declare const ONBOARDING_CATALOG_CARD_FOLD = 3;
+/**
+ * The catalog's sections while the guides are read: ONE section of `ONBOARDING_CATALOG_CARD_FOLD` cards in the view's
+ * own classes (its heading and count bars). The view draws it itself (`useLoadingScope() || loading`): its search bar
+ * is real and its section pills draw their own skeleton.
+ */
+export declare function OnboardingCatalogSectionsSkeleton(): import("react").JSX.Element;
 //# sourceMappingURL=onboarding-guides-catalog-skeleton.d.ts.map

package/dist/components/onboarding-guides/onboarding-guides-catalog-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-guides-catalog-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,+BAA+B,CAAC,EAC9C,MAAa,GACd,GAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CACb,+BAkCL"}
+{"version":3,"file":"onboarding-guides-catalog-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx"],"names":[],"mappings":"AAKA,uHAAuH;AACvH,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAChE,eAAO,MAAM,sBAAsB,cAAc,CAAC;AAClD,eAAO,MAAM,sBAAsB,eAAe,CAAC;AACnD,eAAO,MAAM,qBAAqB,cAAc,CAAC;AACjD,eAAO,MAAM,6BAA6B,0DAA0D,CAAC;AACrG,eAAO,MAAM,2BAA2B,8HACqF,CAAC;AAC9H,eAAO,MAAM,kBAAkB,wBAAwB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAC9C;;;;GAIG;AACH,wBAAgB,iCAAiC,gCAqBhD"}

package/dist/components/onboarding-guides/onboarding-guides-catalog-skeleton.js

@@ -1,28 +1,35 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { OnboardingGuideCardSkeleton } from "../chat/entity-cards/onboarding-guide-card.js";
-import { LoadingRegion } from "../loading/loading-region.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
-function OnboardingGuidesCatalogSkeleton({
-  region = true
-} = {}) {
-  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading onboarding guides", announce: region, className: "flex w-full flex-col gap-10", children: [
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-full rounded-md" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 rounded-lg border border-ods-border bg-ods-card p-4", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-14 rounded" }),
-        [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-24 rounded-md" }, i))
-      ] })
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+const CATALOG_VIEW_CLASS = "flex w-full flex-col gap-10";
+const CATALOG_CONTROLS_CLASS = "space-y-4";
+const CATALOG_SECTIONS_CLASS = "space-y-10";
+const CATALOG_SECTION_CLASS = "space-y-4";
+const CATALOG_SECTION_HEADING_CLASS = "flex items-center gap-2 text-ods-text-primary text-h3";
+const CATALOG_SECTION_COUNT_CLASS = "inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 px-2 py-0.5 text-ods-text-secondary text-h6";
+const CATALOG_LIST_CLASS = "flex flex-col gap-4";
+const ONBOARDING_CATALOG_CARD_FOLD = 3;
+function OnboardingCatalogSectionsSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: CATALOG_SECTIONS_CLASS, children: /* @__PURE__ */ jsxs("section", { className: CATALOG_SECTION_CLASS, "data-loading-item": true, children: [
+    /* @__PURE__ */ jsxs("h2", { className: CATALOG_SECTION_HEADING_CLASS, children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-40" }),
+      /* @__PURE__ */ jsx("span", { className: CATALOG_SECTION_COUNT_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-3" }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-10", children: [4, 3, 3].map((cardCount, sectionIdx) => /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 tracking-[-0.36px] text-ods-text-primary text-h3", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-40 rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-8 rounded-full" })
-      ] }),
-      /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-4", children: Array.from({ length: cardCount }).map((_, cardIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(OnboardingGuideCardSkeleton, { size: "catalog" }) }, cardIdx)) })
-    ] }, sectionIdx)) })
-  ] });
+    /* @__PURE__ */ jsx("ul", { className: CATALOG_LIST_CLASS, children: Array.from({ length: ONBOARDING_CATALOG_CARD_FOLD }, (_, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(OnboardingGuideCardSkeleton, { size: "catalog" }) }, i)
+    )) })
+  ] }) });
 }
 export {
-  OnboardingGuidesCatalogSkeleton
+  CATALOG_CONTROLS_CLASS,
+  CATALOG_LIST_CLASS,
+  CATALOG_SECTIONS_CLASS,
+  CATALOG_SECTION_CLASS,
+  CATALOG_SECTION_COUNT_CLASS,
+  CATALOG_SECTION_HEADING_CLASS,
+  CATALOG_VIEW_CLASS,
+  ONBOARDING_CATALOG_CARD_FOLD,
+  OnboardingCatalogSectionsSkeleton
 };

package/dist/components/onboarding-guides/onboarding-guides-catalog-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-guides-catalog-view.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-guides/onboarding-guides-catalog-view.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAM/E,KAAK,cAAc,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhF,MAAM,WAAW,gCAAgC;IAC/C;kDAC8C;IAC9C,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAClC,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IACnD;sDACkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,aAAa,EACb,eAAe,EACf,cAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,QAA+B,GAChC,EAAE,gCAAgC,+BA2KlC"}
+{"version":3,"file":"onboarding-guides-catalog-view.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding-guides/onboarding-guides-catalog-view.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAiB/E,KAAK,cAAc,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhF,MAAM,WAAW,gCAAgC;IAC/C;kDAC8C;IAC9C,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAClC,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IACnD;sDACkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,aAAa,EACb,eAAe,EACf,cAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,QAA+B,GAChC,EAAE,gCAAgC,+BA4JlC"}