@flamingo-stack/openframe-frontend-core 0.0.217 → 0.0.218-snapshot.20260602043552

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

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/components/onboarding-guides/index.cjs","../../../src/components/onboarding-guides/onboarding-guides-catalog-view.tsx","../../../src/components/onboarding-guides/build-default-href.ts","../../../src/components/onboarding-guides/onboarding-guide-detail-view.tsx","../../../src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx","../../../src/components/onboarding-guides/hooks/use-onboarding-guides.ts"],"names":["jsx"],"mappings":"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","file":"/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/components/onboarding-guides/index.cjs","sourcesContent":[null,"'use client'\n\n/**\n * Public-facing catalog view for `/onboarding-guides` on openframe.\n *\n * Self-contained: every concern that used to require a hub-side\n * wrapper now flows through lib primitives + the ChatRuntime context.\n *\n *   - Chrome: `<DevSectionPage sectionKey=\"onboarding\">` (same lib\n *     primitive every other dev-center surface uses).\n *   - Search bar: lib `<DocSearchBar>` + `useDocSearch` directly,\n *     pre-scoped to `tableIds: ['onboarding-guides']`. The chat\n *     runtime's `source` discriminates the RAG namespace.\n *   - Section filter: lib `<FilterSection>` + URL push via embed-shim\n *     `useRouter`/`useSearchParams`.\n *   - Cards: lib `<OnboardingGuideCard>` with hrefs composed via\n *     `runtime.composeContentUrl?.('onboarding_guide', slug, platforms)`.\n *     Falls back to a same-origin relative path when no composer is\n *     wired (single-platform embedders).\n *\n * No hub-side wrapper file required.\n */\n\nimport { useMemo, useTransition, type ReactNode } from 'react'\nimport { GraduationCap } from 'lucide-react'\n\nimport { useRouter, useSearchParams } from '../../embed-shims'\nimport { DevSectionPage } from '../shared/dev-section'\nimport { DocSearchBar, useDocSearch } from '../shared/doc-search'\nimport { FilterPillRow } from '../ui/filter-pill-row'\nimport { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card'\nimport { useChatRuntime } from '../../contexts/chat-runtime-context'\nimport type { OnboardingGuide } from '../chat/types/entities/onboarding-guide'\nimport { buildDefaultHref } from './build-default-href'\n\nexport interface OnboardingGuidesCatalogViewProps {\n  initialGuides: OnboardingGuide[]\n  initialSections: Array<{\n    section: string\n    section_order: number\n    count: number\n  }>\n  initialSection?: string\n  /** Optional per-row card renderer override. When omitted, lib\n   *  renders `<OnboardingGuideCard>` with runtime-composed href.\n   *  Embedders only override to swap the card shape entirely. */\n  renderCard?: (guide: OnboardingGuide) => ReactNode\n  /** Base path the catalog is mounted under. Used as the fallback\n   *  `href` prefix for card hrefs when `runtime.composeContentUrl` is\n   *  not wired. Embedders mounting at `/docs/onboarding/` instead of\n   *  `/onboarding-guides/` should override. Also used by `setSection`\n   *  for the `?section=` URL push. Default `/onboarding-guides`. */\n  basePath?: string\n}\n\nexport function OnboardingGuidesCatalogView({\n  initialGuides,\n  initialSections,\n  initialSection = '',\n  renderCard,\n  basePath = '/onboarding-guides',\n}: OnboardingGuidesCatalogViewProps) {\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const [isPending, startTransition] = useTransition()\n  const runtime = useChatRuntime()\n  const activeSection = initialSection || 'all'\n\n  // Section grouping. Data arrives already filtered server-side via\n  // `?section=`; this just buckets the visible rows for the section-\n  // header layout — no client-side `.filter()`.\n  const grouped = useMemo(() => {\n    const map = new Map<\n      string,\n      { section_order: number; guides: OnboardingGuide[] }\n    >()\n    for (const g of initialGuides) {\n      const existing = map.get(g.section)\n      if (existing) {\n        if (g.section_order < existing.section_order)\n          existing.section_order = g.section_order\n        existing.guides.push(g)\n      } else {\n        map.set(g.section, { section_order: g.section_order, guides: [g] })\n      }\n    }\n    for (const entry of map.values()) {\n      entry.guides.sort(\n        (a, b) =>\n          a.step_order - b.step_order || a.title.localeCompare(b.title),\n      )\n    }\n    return Array.from(map.entries())\n      .map(([section, info]) => ({ section, ...info }))\n      .sort(\n        (a, b) =>\n          a.section_order - b.section_order ||\n          a.section.localeCompare(b.section),\n      )\n  }, [initialGuides])\n\n  // Section-filter options for the lib `<FilterSection>` row.\n  const sectionFilterOptions = useMemo(\n    () => [\n      { value: 'all', label: `All (${initialGuides.length})` },\n      ...initialSections.map((s) => ({\n        value: s.section,\n        label: `${s.section} (${s.count})`,\n      })),\n    ],\n    [initialGuides.length, initialSections],\n  )\n\n  // Section pill change → push `?section=X` so the host RSC re-\n  // fetches against the DAL. Wrapped in `useTransition` so the\n  // results grid dims while the new payload is in flight.\n  const setSection = (value: string) => {\n    const params = new URLSearchParams(searchParams.toString())\n    if (value === 'all') {\n      params.delete('section')\n    } else {\n      params.set('section', value)\n    }\n    const qs = params.toString()\n    startTransition(() => {\n      router.push(qs ? `${basePath}?${qs}` : basePath)\n    })\n  }\n\n  // Search bar — scoped to onboarding-guides only via the RAG-search\n  // `tableIds` parameter. The hook calls `/api/docs/search` directly;\n  // hub or embedder must expose that endpoint (reverse-proxy on\n  // non-Next.js hosts).\n  const source = runtime?.source ?? 'openframe'\n  const docSearch = useDocSearch({\n    source,\n    baseRoute: basePath,\n    onNavigate: (path) => router.push(path),\n    tableIds: ['onboarding-guides'],\n  })\n\n  // Per-row card renderer — uses runtime-composed href for cross-\n  // platform navigation. Falls back to a same-origin relative URL\n  // when no composer is wired.\n  const defaultRenderCard = (guide: OnboardingGuide) => {\n    const cta = runtime?.composeContentUrl\n      ? runtime.composeContentUrl(\n          'onboarding_guide',\n          guide.slug,\n          guide.onboarding_guide_platforms,\n        )\n      : buildDefaultHref(basePath, guide.slug)\n    return (\n      <OnboardingGuideCard\n        guide={guide}\n        href={cta.href}\n        targetPlatform={cta.targetPlatform}\n        size=\"catalog\"\n      />\n    )\n  }\n  const renderCardFn = renderCard ?? defaultRenderCard\n\n  const preControls = (\n    <div className=\"space-y-4\">\n      <DocSearchBar\n        placeholder=\"Search onboarding guides, releases, case studies…\"\n        query={docSearch.query}\n        onQueryChange={docSearch.setQuery}\n        results={docSearch.results}\n        isLoading={docSearch.isLoading}\n        onResultSelect={docSearch.handleResultSelect}\n        showDropdown={docSearch.keepDropdownOpen}\n      />\n      {initialSections.length > 0 && (\n        <FilterPillRow\n          label=\"Section\"\n          selectedValue={activeSection}\n          onValueChange={setSection}\n          options={sectionFilterOptions}\n        />\n      )}\n    </div>\n  )\n\n  return (\n    <DevSectionPage sectionKey=\"onboarding\" preControls={preControls}>\n      {initialGuides.length === 0 ? (\n        <div className=\"text-center py-16\">\n          <GraduationCap className=\"h-12 w-12 text-ods-text-secondary mx-auto mb-4\" />\n          <h2 className=\"text-ods-text-primary font-['DM_Sans'] text-[20px] font-semibold mb-2\">\n            No onboarding guides found\n          </h2>\n          <p className=\"text-ods-text-secondary font-['DM_Sans'] text-[14px]\">\n            {activeSection !== 'all'\n              ? 'No guides in this section yet.'\n              : \"We're working on the onboarding library. Check back soon.\"}\n          </p>\n        </div>\n      ) : (\n        <div\n          className={\n            isPending\n              ? 'opacity-60 transition-opacity space-y-10'\n              : 'space-y-10'\n          }\n        >\n          {grouped.map((sec) => (\n            <section key={sec.section} className=\"space-y-4\">\n              <h2 className=\"text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2\">\n                {sec.section}\n                <span className=\"inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 text-ods-text-secondary text-xs font-medium px-2 py-0.5\">\n                  {sec.guides.length}\n                </span>\n              </h2>\n              {/* HORIZONTAL catalog list — single column so consecutive\n                  steps read top-to-bottom (Step 1 above Step 2 above\n                  Step 3); a grid would visually reorder them. */}\n              <ul className=\"flex flex-col gap-4\">\n                {sec.guides.map((guide) => (\n                  <li key={guide.id}>{renderCardFn(guide)}</li>\n                ))}\n              </ul>\n            </section>\n          ))}\n        </div>\n      )}\n    </DevSectionPage>\n  )\n}\n","/**\n * Lib-internal helper — default href shape for onboarding-guide cards\n * when `runtime.composeContentUrl` is not wired (single-platform\n * embedders without cross-platform topology).\n *\n * Shared between `OnboardingGuidesCatalogView` (per-card href) and\n * `OnboardingGuideDetailView` (per-related-card href) so both views\n * compose hrefs from the same `basePath`-derived shape — no parallel\n * 4-line helper to drift apart.\n */\nexport function buildDefaultHref(\n  basePath: string,\n  slug: string,\n): { href: string; targetPlatform: string | null } {\n  return { href: `${basePath}/${slug}`, targetPlatform: null }\n}\n","'use client'\n\n/**\n * Public-facing detail view for `/onboarding-guides/<slug>` on\n * openframe.\n *\n * Self-contained: every concern that used to require a hub-side\n * wrapper now flows through lib primitives + the ChatRuntime context.\n *\n *   - Markdown: lib `<SimpleMarkdownRenderer>` (already lib-resident).\n *   - Video warmup: lib `useVideoWarmup` (reads Supabase storage\n *     origin from `runtime.endpoints.supabaseStorageOrigin`; Mux\n *     origins are hardcoded public CDN hosts).\n *   - Captions URL: lib `getCaptionsUrl` (pure URL builder).\n *   - Video poster: inline priority chain\n *     (`main_video_thumbnail || featured_image || og_image_url`) —\n *     same fallbacks the card uses.\n *   - Related card hrefs: `runtime.composeContentUrl?.(\n *     'onboarding_guide', slug, platforms)` — falls back to same-\n *     origin relative path when no composer is wired.\n *\n * No hub-side wrapper file required. Optional `MarkdownRenderer`\n * prop lets hosts swap in a renderer with extra plugins (Reddit /\n * Twitter / X embeds) when needed.\n */\n\nimport { type ComponentType, type ReactNode } from 'react'\nimport { ArrowLeft } from 'lucide-react'\n\nimport { Link } from '../../embed-shims'\nimport { ArticleDetailLayout } from '../layout/article-detail-layout'\nimport { EntityVideoSection } from '../features/entity-video-section'\nimport { VideoBitesDisplay } from '../features/video-bites-display'\nimport { useVideoWarmup } from '../features/use-video-warmup'\nimport { getCaptionsUrl } from '../features/captions-url'\nimport { SimpleMarkdownRenderer } from '../ui/simple-markdown-renderer'\nimport { EntityAuthorCard } from '../chat/entity-cards/entity-author-card'\nimport { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card'\nimport { useChatRuntime } from '../../contexts/chat-runtime-context'\nimport type { OnboardingGuide } from '../chat/types/entities/onboarding-guide'\nimport type { VideoTeaser } from '../../types/video-processing'\nimport { buildDefaultHref } from './build-default-href'\n\nexport interface OnboardingGuideDetailViewProps {\n  initialData: OnboardingGuide\n  related?: OnboardingGuide[]\n  /** Optional markdown renderer override. Defaults to lib\n   *  `<SimpleMarkdownRenderer>`. Hosts override when they need extra\n   *  plugins (Reddit / Twitter / X / code-block enhancements). */\n  MarkdownRenderer?: ComponentType<{ content: string }>\n  /** Optional per-row related-card renderer override. When omitted,\n   *  lib renders `<OnboardingGuideCard>` with runtime-composed href. */\n  renderRelatedCard?: (guide: OnboardingGuide) => ReactNode\n  /** Back-link target. Defaults to `basePath` so the link returns to\n   *  the catalog the embedder is hosting (no drift when `basePath`\n   *  is overridden). The admin preview explicitly overrides to\n   *  `/admin/onboarding-guides`. */\n  backHref?: string\n  /** Back-link label. Defaults to \"Back to Getting Started\". */\n  backLabel?: string\n  /** Base path the related-card hrefs default to when\n   *  `runtime.composeContentUrl` is not wired. Embedders mounting at\n   *  `/docs/onboarding/` instead of `/onboarding-guides/` should\n   *  override. Default `/onboarding-guides`. */\n  basePath?: string\n}\n\nexport function OnboardingGuideDetailView({\n  initialData: guide,\n  related = [],\n  MarkdownRenderer = SimpleMarkdownRenderer,\n  renderRelatedCard,\n  backHref,\n  backLabel = 'Back to Getting Started',\n  basePath = '/onboarding-guides',\n}: OnboardingGuideDetailViewProps) {\n  // Resolve `backHref` from `basePath` when not explicitly set — so\n  // an embedder overriding `basePath=\"/docs/onboarding\"` automatically\n  // gets the right back link without remembering to thread `backHref`\n  // too. Admin preview still wins via its explicit `backHref` override.\n  const resolvedBackHref = backHref ?? basePath\n  const runtime = useChatRuntime()\n\n  // Video warmup — preconnect always fires; preload only when the\n  // container scrolls within ~1 viewport AND the URL is on the\n  // configured Supabase storage origin. No origin in runtime ⇒\n  // preconnect-only path (Mux/YouTube unaffected).\n  const { ref: videoWarmupRef } = useVideoWarmup<HTMLDivElement>({\n    videoUrl: guide.main_video_url,\n    supabaseStorageOrigin: runtime?.endpoints.supabaseStorageOrigin,\n  })\n\n  const captionsUrl = getCaptionsUrl(\n    'onboarding_guide',\n    guide.id,\n    guide.srt_content,\n  )\n\n  // Video poster — fallback chain:\n  //   1. Entity-owned thumbnails (main_video_thumbnail / featured_image / og_image_url)\n  //   2. Branded OG placeholder from `runtime.resolvePlaceholderUrl(title)`\n  //      — restores the hub's prior behavior where a video without a\n  //      thumbnail still showed a branded poster instead of a black\n  //      frame.\n  //   3. `undefined` (player picks its own default poster — usually\n  //      first-frame extraction).\n  const videoPoster =\n    guide.main_video_thumbnail ||\n    guide.featured_image ||\n    guide.og_image_url ||\n    runtime?.resolvePlaceholderUrl?.(guide.title, { aspect: 'wide' }) ||\n    undefined\n\n  // Default related-card renderer — runtime-composed cross-platform href.\n  const defaultRenderRelatedCard = (g: OnboardingGuide) => {\n    const cta = runtime?.composeContentUrl\n      ? runtime.composeContentUrl(\n          'onboarding_guide',\n          g.slug,\n          g.onboarding_guide_platforms,\n        )\n      : buildDefaultHref(basePath, g.slug)\n    return (\n      <OnboardingGuideCard\n        guide={g}\n        href={cta.href}\n        targetPlatform={cta.targetPlatform}\n      />\n    )\n  }\n  const renderRelatedCardFn = renderRelatedCard ?? defaultRenderRelatedCard\n\n  return (\n    <ArticleDetailLayout>\n      <div className=\"space-y-6 md:space-y-8\">\n        {/* Back link */}\n        <Link\n          href={resolvedBackHref}\n          className=\"inline-flex items-center gap-2 text-ods-text-secondary hover:text-ods-accent transition-colors\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" />\n          <span className=\"text-h5\">{backLabel}</span>\n        </Link>\n\n        <h1 className=\"text-h1 tracking-[-1.12px] text-ods-text-primary\">\n          {guide.title}\n        </h1>\n\n        {/* Metadata grid — Section · Step | Published | Author. */}\n        <EntityAuthorCard\n          author={guide.author}\n          publishedAt={guide.published_at}\n          extraCells={[\n            {\n              value: `${guide.section} · Step ${guide.step_order}`,\n              label: 'Section',\n              uppercase: false,\n            },\n          ]}\n        />\n\n        {/* Video. `main_video_url` (Mux/MP4) and `youtube_url` are\n            independent columns — either one populated should render\n            the player. `EntityVideoSection` routes accordingly. */}\n        {(guide.main_video_url || guide.youtube_url) && (\n          <div ref={videoWarmupRef}>\n            <EntityVideoSection\n              mainVideoUrl={guide.main_video_url}\n              youtubeUrl={guide.youtube_url || undefined}\n              highlightVideoUrl={guide.highlight_video_url}\n              mainVideoPoster={videoPoster}\n              highlightVideoThumbnail={guide.highlight_video_thumbnail || undefined}\n              videoSummary={undefined}\n              videoBites={undefined}\n              title={guide.title}\n              srtContent={guide.srt_content}\n              captionsUrl={captionsUrl}\n              MarkdownRenderer={MarkdownRenderer}\n            />\n          </div>\n        )}\n\n        {/* Markdown body */}\n        {guide.content && (\n          <div className=\"space-y-4\">\n            <MarkdownRenderer content={guide.content} />\n          </div>\n        )}\n\n        {/* Video Bites */}\n        {guide.video_bites && guide.video_bites.length > 0 && (\n          <VideoBitesDisplay\n            bites={guide.video_bites as VideoTeaser[]}\n            filterPublished={true}\n            showTitle={false}\n          />\n        )}\n\n        {/* Related — same-section, ordered by step. */}\n        {related.length > 0 && (\n          <div className=\"space-y-4 pt-8 border-t border-ods-border\">\n            <h2 className=\"text-h3 tracking-[-0.36px] text-ods-text-primary\">\n              More in {guide.section}\n            </h2>\n            <ul className=\"flex flex-col gap-3\">\n              {related.map((r) => (\n                <li key={r.id}>{renderRelatedCardFn(r)}</li>\n              ))}\n            </ul>\n          </div>\n        )}\n      </div>\n    </ArticleDetailLayout>\n  )\n}\n","'use client'\n\nimport { DevSectionPage } from '../shared/dev-section'\nimport { OnboardingGuideCardSkeleton } from '../chat/entity-cards/onboarding-guide-card'\n\n/**\n * Page-level Suspense fallback for `/onboarding-guides`.\n *\n * Mirrors the loaded `<OnboardingGuidesCatalogView>` shape — both\n * mount the same `<DevSectionPage sectionKey=\"onboarding\">` so the\n * hero, back button, and overall page scaffold render identically.\n *\n * The `preControls` slot reserves space for the search bar (h-12)\n * plus the section pill row (~74px including padding) so the\n * Suspense → loaded transition doesn't shift vertically.\n *\n * Card distribution `4 + 3 + 3 = 10` matches the typical openframe\n * onboarding dataset; per-card height (288 px) is byte-identical to\n * the loaded card so per-card shifts on resolve are zero.\n */\nexport function OnboardingGuidesCatalogSkeleton() {\n  return (\n    <DevSectionPage\n      sectionKey=\"onboarding\"\n      preControls={\n        <div className=\"space-y-4 animate-pulse\">\n          {/* Search input placeholder — matches `<SearchInput>` h-12. */}\n          <div className=\"h-12 w-full bg-ods-card border border-ods-border rounded-md\" />\n          {/* Section pill row placeholder — same wrapper class set the\n              hub-side `<FilterSection>` uses (~74 px). */}\n          <div className=\"flex flex-wrap items-center gap-3 p-4 bg-ods-card border border-ods-border rounded-lg\">\n            <div className=\"h-4 w-14 bg-ods-border/60 rounded\" />\n            {[0, 1, 2, 3].map((i) => (\n              <div\n                key={i}\n                className=\"h-10 w-24 bg-ods-card border border-ods-border rounded-md\"\n              />\n            ))}\n          </div>\n        </div>\n      }\n    >\n      <div className=\"space-y-10 animate-pulse\">\n        {[4, 3, 3].map((cardCount, sectionIdx) => (\n          <section key={sectionIdx} className=\"space-y-4\">\n            <h2 className=\"text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2\">\n              <span className=\"h-6 w-40 bg-ods-border/70 rounded\" />\n              <span className=\"h-5 w-8 bg-ods-text-secondary/20 rounded-full\" />\n            </h2>\n            <ul className=\"flex flex-col gap-4\">\n              {Array.from({ length: cardCount }).map((_, cardIdx) => (\n                <li key={cardIdx}>\n                  <OnboardingGuideCardSkeleton size=\"catalog\" />\n                </li>\n              ))}\n            </ul>\n          </section>\n        ))}\n      </div>\n    </DevSectionPage>\n  )\n}\n","'use client'\n\n/**\n * React Query hooks for Onboarding Guides — PUBLIC reads only.\n *\n * Admin mutations (create/update/delete/publish/stats/save-highlight)\n * stay HUB-side in `hooks/use-onboarding-guides.ts` and import the\n * `onboardingGuideKeys.admin` sub-namespace from this module so the\n * cache namespace `['onboarding-guides']` has a single source of truth.\n *\n * Endpoints (`/api/onboarding-guides*`) are host-supplied — non-Next.js\n * embedders must reverse-proxy the same routes. Same precedent as the\n * tickets list hook.\n */\n\nimport { useQuery } from '@tanstack/react-query'\n\nimport type {\n  OnboardingGuide,\n  OnboardingGuideFilters,\n  OnboardingGuideListResponse,\n  OnboardingGuideSectionSummary,\n} from '../../chat/types/entities/onboarding-guide'\n\n/**\n * Cache key builder for the `['onboarding-guides']` namespace.\n *\n * Includes BOTH public-read sub-keys (`lists`, `list`, `details`,\n * `detail`, `sections`) AND the `admin` sub-namespace. Admin mutations\n * live hub-side but invalidate against this same builder so a single\n * `qc.invalidateQueries({ queryKey: onboardingGuideKeys.all })` from\n * an admin hook also clears the public read cache.\n */\nexport const onboardingGuideKeys = {\n  all: ['onboarding-guides'] as const,\n  lists: () => [...onboardingGuideKeys.all, 'list'] as const,\n  list: (filters: OnboardingGuideFilters) =>\n    [...onboardingGuideKeys.lists(), filters] as const,\n  details: () => [...onboardingGuideKeys.all, 'detail'] as const,\n  detail: (slug: string) => [...onboardingGuideKeys.details(), slug] as const,\n  sections: () => [...onboardingGuideKeys.all, 'sections'] as const,\n  admin: {\n    all: ['admin', 'onboarding-guides'] as const,\n    lists: () => ['admin', 'onboarding-guides', 'list'] as const,\n    detail: (slug: string) =>\n      ['admin', 'onboarding-guide', slug] as const,\n    stats: () => ['admin', 'onboarding-guides', 'stats'] as const,\n  },\n}\n\nexport function useOnboardingGuides(filters?: OnboardingGuideFilters) {\n  return useQuery({\n    queryKey: onboardingGuideKeys.list(filters || {}),\n    queryFn: async (): Promise<OnboardingGuideListResponse> => {\n      const params = new URLSearchParams()\n      if (filters?.search) params.set('search', filters.search)\n      if (filters?.section) params.set('section', filters.section)\n      if (filters?.limit) params.set('limit', filters.limit.toString())\n      if (filters?.offset) params.set('offset', filters.offset.toString())\n      const res = await fetch(`/api/onboarding-guides?${params}`)\n      if (!res.ok) throw new Error('Failed to fetch onboarding guides')\n      return res.json()\n    },\n  })\n}\n\nexport function useOnboardingGuide(slug: string | undefined) {\n  return useQuery({\n    queryKey: onboardingGuideKeys.detail(slug || ''),\n    queryFn: async (): Promise<OnboardingGuide> => {\n      const res = await fetch(`/api/onboarding-guides/${slug}`)\n      if (!res.ok) throw new Error('Failed to fetch onboarding guide')\n      return res.json()\n    },\n    enabled: !!slug,\n  })\n}\n\nexport function useOnboardingGuideSections() {\n  return useQuery({\n    queryKey: onboardingGuideKeys.sections(),\n    queryFn: async (): Promise<OnboardingGuideSectionSummary[]> => {\n      const res = await fetch('/api/onboarding-guides/sections')\n      if (!res.ok)\n        throw new Error('Failed to fetch onboarding-guide sections')\n      return res.json()\n    },\n    staleTime: 0,\n  })\n}\n"]}
+{"version":3,"sources":["/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/components/onboarding-guides/index.cjs","../../../src/components/onboarding-guides/onboarding-guides-catalog-view.tsx","../../../src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx","../../../src/components/onboarding-guides/onboarding-guide-detail-view.tsx","../../../src/components/onboarding-guides/hooks/use-onboarding-guides.ts"],"names":["jsx","jsxs"],"mappings":"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","file":"/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/components/onboarding-guides/index.cjs","sourcesContent":[null,"'use client'\n\n/**\n * Public-facing catalog view for `/onboarding-guides`.\n *\n * Two data modes:\n *   - **controlled** (hub SSR): pass `initialGuides` + `initialSections`\n *     (server-fetched; section changes re-render the host with new props).\n *   - **self-fetching** (config-only embed): omit the data props and pass\n *     `guidesEndpoint` + `sectionsEndpoint` (the api routes). The view fetches\n *     the guides (refetching on `?section=` change) + the section list itself —\n *     no host data layer. (Plain fetch + useEffect, the DeliveryLists pattern.)\n *\n * The view renders ONLY its body + its OWN controls (the RAG `<DocSearchBar>` +\n * dynamic section pills — onboarding's controls are content-driven, unlike the\n * static search/filter the `DevSectionView` chrome ships). It does NOT render the\n * page chrome: the CALLER wraps it in `<DevSectionPage sectionKey=\"onboarding\">`\n * (hero + back button), exactly like the roadmap / releases / delivery pages — so\n * every dev-center surface composes the same way and the view stays embeddable in\n * tabbed contexts. Card hrefs flow through `runtime.composeContentUrl`.\n */\n\nimport { useMemo, useTransition, type ReactNode } from 'react'\nimport { GraduationCap } from 'lucide-react'\n\nimport { useRouter, useSearchParams } from '../../embed-shims'\nimport { useSelfFetch } from '../../hooks/use-self-fetch'\nimport { DocSearchBar, useDocSearch } from '../shared/doc-search'\nimport { FilterPillRow } from '../ui/filter-pill-row'\nimport { LoadError } from '../ui/error-state'\nimport { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card'\nimport { OnboardingGuidesCatalogSkeleton } from './onboarding-guides-catalog-skeleton'\nimport { useChatRuntime } from '../../contexts/chat-runtime-context'\nimport type { OnboardingGuide } from '../chat/types/entities/onboarding-guide'\nimport { resolveContentHref } from '../../utils/content-href'\n\ntype SectionSummary = { section: string; section_order: number; count: number }\n\nexport interface OnboardingGuidesCatalogViewProps {\n  /** Controlled / SSR: server-fetched guides. Omit + pass `guidesEndpoint`\n   *  for the self-fetching config-only mode. */\n  initialGuides?: OnboardingGuide[]\n  initialSections?: SectionSummary[]\n  initialSection?: string\n  /** Self-fetch: GET list endpoint (the api route). Appends `?section=`. */\n  guidesEndpoint?: string\n  /** Self-fetch: GET section-summary endpoint (the api route). */\n  sectionsEndpoint?: string\n  /** Optional per-row card renderer override. */\n  renderCard?: (guide: OnboardingGuide) => ReactNode\n  /** Base path the catalog is mounted under (fallback href prefix + `?section=`\n   *  push target). Default `/onboarding-guides`. */\n  basePath?: string\n}\n\nexport function OnboardingGuidesCatalogView({\n  initialGuides,\n  initialSections,\n  initialSection = '',\n  guidesEndpoint,\n  sectionsEndpoint,\n  renderCard,\n  basePath = '/onboarding-guides',\n}: OnboardingGuidesCatalogViewProps) {\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const [isPending, startTransition] = useTransition()\n  const runtime = useChatRuntime()\n\n  // Self-fetch only when the host supplied NO data but DID give an endpoint.\n  const selfFetch = initialGuides === undefined && guidesEndpoint !== undefined\n  // Active section: from the URL when self-fetching, from the prop (host RSC\n  // already read the URL server-side) when controlled.\n  const sectionValue = selfFetch ? searchParams.get('section') ?? '' : initialSection\n  const activeSection = sectionValue || 'all'\n\n  // Self-fetch the guides (refetched whenever `?section=` changes — it's folded\n  // into the url) + the section summaries. Controlled mode passes `null` urls so\n  // the hook never fetches. The guides fetch carries the error/retry affordance.\n  const guidesQs = sectionValue ? `?section=${encodeURIComponent(sectionValue)}` : ''\n  const guidesRes = useSelfFetch<{ data?: OnboardingGuide[] }>(\n    selfFetch && guidesEndpoint ? `${guidesEndpoint}${guidesQs}` : null,\n  )\n  const sectionsRes = useSelfFetch<SectionSummary[]>(\n    selfFetch && sectionsEndpoint ? sectionsEndpoint : null,\n  )\n\n  // Invariant: `guidesRes.data` is `null` until the first fetch resolves, then\n  // `{ data: [...] }`. The `?.data ?? []` chain collapses never-fetched (null) and\n  // legitimately-empty ([]) to the same `[]` — so the first-load skeleton gate below\n  // keys on the OUTER `guidesRes.data == null` to distinguish them (an empty section\n  // toggle keeps the chrome; only a true cold start shows the full-page skeleton).\n  const guides = initialGuides ?? guidesRes.data?.data ?? []\n  const sections = initialSections ?? (Array.isArray(sectionsRes.data) ? sectionsRes.data : [])\n  const isLoading = selfFetch ? guidesRes.isLoading : false\n\n  // Section grouping. Data arrives already filtered (server-side `?section=`\n  // for the host, or our `?section=` fetch); this just buckets visible rows.\n  const grouped = useMemo(() => {\n    const map = new Map<string, { section_order: number; guides: OnboardingGuide[] }>()\n    for (const g of guides) {\n      const existing = map.get(g.section)\n      if (existing) {\n        if (g.section_order < existing.section_order) existing.section_order = g.section_order\n        existing.guides.push(g)\n      } else {\n        map.set(g.section, { section_order: g.section_order, guides: [g] })\n      }\n    }\n    for (const entry of map.values()) {\n      entry.guides.sort((a, b) => a.step_order - b.step_order || a.title.localeCompare(b.title))\n    }\n    return Array.from(map.entries())\n      .map(([section, info]) => ({ section, ...info }))\n      .sort((a, b) => a.section_order - b.section_order || a.section.localeCompare(b.section))\n  }, [guides])\n\n  const sectionFilterOptions = useMemo(\n    () => [\n      { value: 'all', label: `All (${guides.length})` },\n      ...sections.map((s) => ({ value: s.section, label: `${s.section} (${s.count})` })),\n    ],\n    [guides.length, sections],\n  )\n\n  // Section pill change → push `?section=X`. Controlled mode: host RSC\n  // re-fetches. Self-fetch mode: our guides effect re-fetches on the URL change.\n  const setSection = (value: string) => {\n    const params = new URLSearchParams(searchParams.toString())\n    if (value === 'all') {\n      params.delete('section')\n    } else {\n      params.set('section', value)\n    }\n    const qs = params.toString()\n    startTransition(() => {\n      router.push(qs ? `${basePath}?${qs}` : basePath)\n    })\n  }\n\n  // Search bar — scoped to onboarding-guides only via RAG-search `tableIds`.\n  const source = runtime?.source ?? 'openframe'\n  const docSearch = useDocSearch({\n    source,\n    baseRoute: basePath,\n    onNavigate: (path) => router.push(path),\n    tableIds: ['onboarding-guides'],\n  })\n\n  // Per-row card renderer — runtime-composed href, fallback to relative.\n  const defaultRenderCard = (guide: OnboardingGuide) => {\n    const cta = resolveContentHref(runtime?.composeContentUrl, {\n      type: 'onboarding_guide',\n      slug: guide.slug,\n      basePath,\n      platforms: guide.onboarding_guide_platforms,\n    })\n    return (\n      <OnboardingGuideCard\n        guide={guide}\n        href={cta.href}\n        targetPlatform={cta.targetPlatform}\n        size=\"catalog\"\n      />\n    )\n  }\n  const renderCardFn = renderCard ?? defaultRenderCard\n\n  const preControls = (\n    <div className=\"space-y-4\">\n      <DocSearchBar\n        placeholder=\"Search onboarding guides, releases, case studies…\"\n        query={docSearch.query}\n        onQueryChange={docSearch.setQuery}\n        results={docSearch.results}\n        isLoading={docSearch.isLoading}\n        onResultSelect={docSearch.handleResultSelect}\n        showDropdown={docSearch.keepDropdownOpen}\n      />\n      {sections.length > 0 && (\n        <FilterPillRow\n          label=\"Section\"\n          selectedValue={activeSection}\n          onValueChange={setSection}\n          options={sectionFilterOptions}\n        />\n      )}\n    </div>\n  )\n\n  // A failed guides fetch → a RETRYABLE error (not the indistinguishable-from-\n  // empty \"no guides found\" state) — parity with the sibling self-fetch views.\n  if (selfFetch && guidesRes.error) {\n    return <LoadError message=\"Failed to load onboarding guides.\" onRetry={guidesRes.reload} />\n  }\n  // Full-page skeleton ONLY on the very first load (no data has loaded yet) — a\n  // later section toggle that legitimately returns ZERO guides keeps the page\n  // chrome (search + section pills) and dims the grid via the className below.\n  if (selfFetch && guidesRes.data == null && isLoading) {\n    return <OnboardingGuidesCatalogSkeleton />\n  }\n\n  return (\n    <div className=\"w-full flex flex-col gap-10\">\n      {preControls}\n      {guides.length === 0 ? (\n        <div className=\"text-center py-16\">\n          <GraduationCap className=\"h-12 w-12 text-ods-text-secondary mx-auto mb-4\" />\n          <h2 className=\"text-ods-text-primary font-['DM_Sans'] text-[20px] font-semibold mb-2\">\n            No onboarding guides found\n          </h2>\n          <p className=\"text-ods-text-secondary font-['DM_Sans'] text-[14px]\">\n            {activeSection !== 'all'\n              ? 'No guides in this section yet.'\n              : \"We're working on the onboarding library. Check back soon.\"}\n          </p>\n        </div>\n      ) : (\n        <div className={isPending || isLoading ? 'opacity-60 transition-opacity space-y-10' : 'space-y-10'}>\n          {grouped.map((sec) => (\n            <section key={sec.section} className=\"space-y-4\">\n              <h2 className=\"text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2\">\n                {sec.section}\n                <span className=\"inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 text-ods-text-secondary text-xs font-medium px-2 py-0.5\">\n                  {sec.guides.length}\n                </span>\n              </h2>\n              {/* HORIZONTAL catalog list — single column so consecutive steps\n                  read top-to-bottom; a grid would visually reorder them. */}\n              <ul className=\"flex flex-col gap-4\">\n                {sec.guides.map((guide) => (\n                  <li key={guide.id}>{renderCardFn(guide)}</li>\n                ))}\n              </ul>\n            </section>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n","'use client'\n\nimport { DevSectionPage } from '../shared/dev-section'\nimport { OnboardingGuideCardSkeleton } from '../chat/entity-cards/onboarding-guide-card'\n\n/**\n * Page-level Suspense fallback for `/onboarding-guides`.\n *\n * Mirrors the loaded `<OnboardingGuidesCatalogView>` shape — both\n * mount the same `<DevSectionPage sectionKey=\"onboarding\">` so the\n * hero, back button, and overall page scaffold render identically.\n *\n * The `preControls` slot reserves space for the search bar (h-12)\n * plus the section pill row (~74px including padding) so the\n * Suspense → loaded transition doesn't shift vertically.\n *\n * Card distribution `4 + 3 + 3 = 10` matches the typical openframe\n * onboarding dataset; per-card height (288 px) is byte-identical to\n * the loaded card so per-card shifts on resolve are zero.\n */\nexport function OnboardingGuidesCatalogSkeleton() {\n  return (\n    <DevSectionPage\n      sectionKey=\"onboarding\"\n      preControls={\n        <div className=\"space-y-4 animate-pulse\">\n          {/* Search input placeholder — matches `<SearchInput>` h-12. */}\n          <div className=\"h-12 w-full bg-ods-card border border-ods-border rounded-md\" />\n          {/* Section pill row placeholder — same wrapper class set the\n              hub-side `<FilterSection>` uses (~74 px). */}\n          <div className=\"flex flex-wrap items-center gap-3 p-4 bg-ods-card border border-ods-border rounded-lg\">\n            <div className=\"h-4 w-14 bg-ods-border/60 rounded\" />\n            {[0, 1, 2, 3].map((i) => (\n              <div\n                key={i}\n                className=\"h-10 w-24 bg-ods-card border border-ods-border rounded-md\"\n              />\n            ))}\n          </div>\n        </div>\n      }\n    >\n      <div className=\"space-y-10 animate-pulse\">\n        {[4, 3, 3].map((cardCount, sectionIdx) => (\n          <section key={sectionIdx} className=\"space-y-4\">\n            <h2 className=\"text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2\">\n              <span className=\"h-6 w-40 bg-ods-border/70 rounded\" />\n              <span className=\"h-5 w-8 bg-ods-text-secondary/20 rounded-full\" />\n            </h2>\n            <ul className=\"flex flex-col gap-4\">\n              {Array.from({ length: cardCount }).map((_, cardIdx) => (\n                <li key={cardIdx}>\n                  <OnboardingGuideCardSkeleton size=\"catalog\" />\n                </li>\n              ))}\n            </ul>\n          </section>\n        ))}\n      </div>\n    </DevSectionPage>\n  )\n}\n","'use client'\n\n/**\n * Public-facing detail view for `/onboarding-guides/<slug>`.\n *\n * Two modes:\n *   - **controlled** (hub SSR): pass `initialData` (a server-fetched guide).\n *   - **self-fetching** (config-only embed): pass `slug` + `guideEndpoint`\n *     (the api route) and the view fetches the guide itself — no host data\n *     layer. (Plain fetch + useEffect, the DeliveryLists pattern.)\n *\n * Everything else flows through lib primitives + the ChatRuntime context\n * (markdown, video warmup, captions, related-card hrefs via\n * `runtime.composeContentUrl`). Optional `MarkdownRenderer` lets hosts swap a\n * renderer with extra plugins.\n */\n\nimport { type ComponentType, type ReactNode } from 'react'\nimport { ArrowLeft } from 'lucide-react'\n\nimport { Link } from '../../embed-shims'\nimport { ArticleDetailLayout } from '../layout/article-detail-layout'\nimport { DetailPageSkeleton } from '../shared/detail-page-skeleton'\nimport { EntityVideoSection } from '../features/entity-video-section'\nimport { VideoBitesDisplay } from '../features/video-bites-display'\nimport { useVideoWarmup } from '../features/use-video-warmup'\nimport { getCaptionsUrl } from '../features/captions-url'\nimport { SimpleMarkdownRenderer } from '../ui/simple-markdown-renderer'\nimport { LoadError } from '../ui/error-state'\nimport { EntityAuthorCard } from '../chat/entity-cards/entity-author-card'\nimport { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card'\nimport { useChatRuntime } from '../../contexts/chat-runtime-context'\nimport type { OnboardingGuide } from '../chat/types/entities/onboarding-guide'\nimport type { VideoTeaser } from '../../types/video-processing'\nimport { resolveContentHref } from '../../utils/content-href'\nimport { useSelfFetch } from '../../hooks/use-self-fetch'\n\nexport interface OnboardingGuideDetailViewProps {\n  /** Server-fetched guide (controlled / SSR mode). Omit it and pass\n   *  `slug` + `guideEndpoint` for the self-fetching config-only mode. */\n  initialData?: OnboardingGuide\n  /** Self-fetch: the guide's slug (the host reads it from its route). */\n  slug?: string\n  /** Self-fetch: builds the GET url for a single guide (the api route).\n   *  e.g. `(s) => \\`/content/api/onboarding-guides/${s}\\``. */\n  guideEndpoint?: (slug: string) => string\n  related?: OnboardingGuide[]\n  /** Optional markdown renderer override. Defaults to lib\n   *  `<SimpleMarkdownRenderer>`. */\n  MarkdownRenderer?: ComponentType<{ content: string }>\n  /** Optional per-row related-card renderer override. */\n  renderRelatedCard?: (guide: OnboardingGuide) => ReactNode\n  /** Back-link target. Defaults to `basePath`. */\n  backHref?: string\n  /** Back-link label. Defaults to \"Back to Getting Started\". */\n  backLabel?: string\n  /** Base path the related-card hrefs default to when\n   *  `runtime.composeContentUrl` is not wired. Default `/onboarding-guides`. */\n  basePath?: string\n}\n\nexport function OnboardingGuideDetailView({\n  initialData,\n  slug,\n  guideEndpoint,\n  related = [],\n  MarkdownRenderer = SimpleMarkdownRenderer,\n  renderRelatedCard,\n  backHref,\n  backLabel = 'Back to Getting Started',\n  basePath = '/onboarding-guides',\n}: OnboardingGuideDetailViewProps) {\n  const resolvedBackHref = backHref ?? basePath\n  const runtime = useChatRuntime()\n\n  // Controlled (hub SSR `initialData`) OR self-fetch by slug (config-only embed).\n  const url = initialData ? null : slug && guideEndpoint ? guideEndpoint(slug) : null\n  const { data: guide, isLoading, error, reload } = useSelfFetch<OnboardingGuide>(url, { initialData })\n\n  // Hooks must run unconditionally — feed them optional-chained values so they\n  // no-op while the guide is still loading.\n  const { ref: videoWarmupRef } = useVideoWarmup<HTMLDivElement>({\n    videoUrl: guide?.main_video_url,\n    supabaseStorageOrigin: runtime?.endpoints.supabaseStorageOrigin,\n  })\n\n  if (error || (!guide && !isLoading)) {\n    return <LoadError message=\"Guide not found.\" onRetry={reload} />\n  }\n  if (!guide) {\n    // Skeleton (not a bare \"Loading…\") for parity with every other shared view —\n    // catalog, roadmap, releases all render a skeleton on first load, so the detail\n    // page shouldn't flash text then content.\n    return <DetailPageSkeleton showImageGallery={false} />\n  }\n\n  const captionsUrl = getCaptionsUrl('onboarding_guide', guide.id, guide.srt_content)\n\n  const videoPoster =\n    guide.main_video_thumbnail ||\n    guide.featured_image ||\n    guide.og_image_url ||\n    runtime?.resolvePlaceholderUrl?.(guide.title, { aspect: 'wide' }) ||\n    undefined\n\n  const defaultRenderRelatedCard = (g: OnboardingGuide) => {\n    const cta = resolveContentHref(runtime?.composeContentUrl, {\n      type: 'onboarding_guide',\n      slug: g.slug,\n      basePath,\n      platforms: g.onboarding_guide_platforms,\n    })\n    return <OnboardingGuideCard guide={g} href={cta.href} targetPlatform={cta.targetPlatform} />\n  }\n  const renderRelatedCardFn = renderRelatedCard ?? defaultRenderRelatedCard\n\n  return (\n    <ArticleDetailLayout>\n      <div className=\"space-y-6 md:space-y-8\">\n        {/* Back link */}\n        <Link\n          href={resolvedBackHref}\n          className=\"inline-flex items-center gap-2 text-ods-text-secondary hover:text-ods-accent transition-colors\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" />\n          <span className=\"text-h5\">{backLabel}</span>\n        </Link>\n\n        <h1 className=\"text-h1 tracking-[-1.12px] text-ods-text-primary\">{guide.title}</h1>\n\n        {/* Metadata grid — Section · Step | Published | Author. */}\n        <EntityAuthorCard\n          author={guide.author}\n          publishedAt={guide.published_at}\n          extraCells={[\n            {\n              value: `${guide.section} · Step ${guide.step_order}`,\n              label: 'Section',\n              uppercase: false,\n            },\n          ]}\n        />\n\n        {/* Video. `main_video_url` (Mux/MP4) and `youtube_url` are independent\n            columns — either populated renders the player. */}\n        {(guide.main_video_url || guide.youtube_url) && (\n          <div ref={videoWarmupRef}>\n            <EntityVideoSection\n              mainVideoUrl={guide.main_video_url}\n              youtubeUrl={guide.youtube_url || undefined}\n              highlightVideoUrl={guide.highlight_video_url}\n              mainVideoPoster={videoPoster}\n              highlightVideoThumbnail={guide.highlight_video_thumbnail || undefined}\n              videoSummary={undefined}\n              videoBites={undefined}\n              title={guide.title}\n              srtContent={guide.srt_content}\n              captionsUrl={captionsUrl}\n              MarkdownRenderer={MarkdownRenderer}\n            />\n          </div>\n        )}\n\n        {/* Markdown body */}\n        {guide.content && (\n          <div className=\"space-y-4\">\n            <MarkdownRenderer content={guide.content} />\n          </div>\n        )}\n\n        {/* Video Bites */}\n        {guide.video_bites && guide.video_bites.length > 0 && (\n          <VideoBitesDisplay\n            bites={guide.video_bites as VideoTeaser[]}\n            filterPublished={true}\n            showTitle={false}\n          />\n        )}\n\n        {/* Related — same-section, ordered by step. */}\n        {related.length > 0 && (\n          <div className=\"space-y-4 pt-8 border-t border-ods-border\">\n            <h2 className=\"text-h3 tracking-[-0.36px] text-ods-text-primary\">\n              More in {guide.section}\n            </h2>\n            <ul className=\"flex flex-col gap-3\">\n              {related.map((r) => (\n                <li key={r.id}>{renderRelatedCardFn(r)}</li>\n              ))}\n            </ul>\n          </div>\n        )}\n      </div>\n    </ArticleDetailLayout>\n  )\n}\n","'use client'\n\n/**\n * React Query hooks for Onboarding Guides — PUBLIC reads only.\n *\n * Admin mutations (create/update/delete/publish/stats/save-highlight)\n * stay HUB-side in `hooks/use-onboarding-guides.ts` and import the\n * `onboardingGuideKeys.admin` sub-namespace from this module so the\n * cache namespace `['onboarding-guides']` has a single source of truth.\n *\n * Endpoints (`/api/onboarding-guides*`) are host-supplied — non-Next.js\n * embedders must reverse-proxy the same routes. Same precedent as the\n * tickets list hook.\n */\n\nimport { useQuery } from '@tanstack/react-query'\n\nimport type {\n  OnboardingGuide,\n  OnboardingGuideFilters,\n  OnboardingGuideListResponse,\n  OnboardingGuideSectionSummary,\n} from '../../chat/types/entities/onboarding-guide'\n\n/**\n * Cache key builder for the `['onboarding-guides']` namespace.\n *\n * Includes BOTH public-read sub-keys (`lists`, `list`, `details`,\n * `detail`, `sections`) AND the `admin` sub-namespace. Admin mutations\n * live hub-side but invalidate against this same builder so a single\n * `qc.invalidateQueries({ queryKey: onboardingGuideKeys.all })` from\n * an admin hook also clears the public read cache.\n */\nexport const onboardingGuideKeys = {\n  all: ['onboarding-guides'] as const,\n  lists: () => [...onboardingGuideKeys.all, 'list'] as const,\n  list: (filters: OnboardingGuideFilters) =>\n    [...onboardingGuideKeys.lists(), filters] as const,\n  details: () => [...onboardingGuideKeys.all, 'detail'] as const,\n  detail: (slug: string) => [...onboardingGuideKeys.details(), slug] as const,\n  sections: () => [...onboardingGuideKeys.all, 'sections'] as const,\n  admin: {\n    all: ['admin', 'onboarding-guides'] as const,\n    lists: () => ['admin', 'onboarding-guides', 'list'] as const,\n    detail: (slug: string) =>\n      ['admin', 'onboarding-guide', slug] as const,\n    stats: () => ['admin', 'onboarding-guides', 'stats'] as const,\n  },\n}\n\nexport function useOnboardingGuides(filters?: OnboardingGuideFilters) {\n  return useQuery({\n    queryKey: onboardingGuideKeys.list(filters || {}),\n    queryFn: async (): Promise<OnboardingGuideListResponse> => {\n      const params = new URLSearchParams()\n      if (filters?.search) params.set('search', filters.search)\n      if (filters?.section) params.set('section', filters.section)\n      if (filters?.limit) params.set('limit', filters.limit.toString())\n      if (filters?.offset) params.set('offset', filters.offset.toString())\n      const res = await fetch(`/api/onboarding-guides?${params}`)\n      if (!res.ok) throw new Error('Failed to fetch onboarding guides')\n      return res.json()\n    },\n  })\n}\n\nexport function useOnboardingGuide(slug: string | undefined) {\n  return useQuery({\n    queryKey: onboardingGuideKeys.detail(slug || ''),\n    queryFn: async (): Promise<OnboardingGuide> => {\n      const res = await fetch(`/api/onboarding-guides/${slug}`)\n      if (!res.ok) throw new Error('Failed to fetch onboarding guide')\n      return res.json()\n    },\n    enabled: !!slug,\n  })\n}\n\nexport function useOnboardingGuideSections() {\n  return useQuery({\n    queryKey: onboardingGuideKeys.sections(),\n    queryFn: async (): Promise<OnboardingGuideSectionSummary[]> => {\n      const res = await fetch('/api/onboarding-guides/sections')\n      if (!res.ok)\n        throw new Error('Failed to fetch onboarding-guide sections')\n      return res.json()\n    },\n    staleTime: 0,\n  })\n}\n"]}

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

@@ -1,43 +1,47 @@
 "use client";
 import {
+  DetailPageSkeleton,
   DocSearchBar,
-  useDocSearch
-} from "../../chunk-SWZUZYWR.js";
+  useDocSearch,
+  useSelfFetch
+} from "../../chunk-VRHXAR7B.js";
 import {
   DevSectionPage
-} from "../../chunk-N5IKPYRL.js";
+} from "../../chunk-XGL57EUT.js";
 import "../../chunk-ORJREQ2W.js";
 import {
   ArticleDetailLayout,
   EntityAuthorCard,
   EntityVideoSection,
   FilterPillRow,
+  LoadError,
   OnboardingGuideCard,
   OnboardingGuideCardSkeleton,
   SimpleMarkdownRenderer,
   VideoBitesDisplay,
   getCaptionsUrl,
+  resolveContentHref,
   useVideoWarmup
-} from "../../chunk-ENBGG2K2.js";
+} from "../../chunk-IUMLQIPW.js";
 import "../../chunk-LXC6P2EO.js";
 import "../../chunk-EL5YVPD5.js";
-import "../../chunk-UEBM4PC4.js";
+import "../../chunk-AWMMB7XM.js";
 import {
   next_link_default
 } from "../../chunk-OHPI2HRK.js";
-import "../../chunk-LCLTCCXS.js";
+import "../../chunk-24Q2WLIU.js";
 import {
   useRouter,
   useSearchParams
 } from "../../chunk-PLJLE4A4.js";
-import "../../chunk-QY75VKAS.js";
-import "../../chunk-KSOOKNBG.js";
+import "../../chunk-Z46NRJWW.js";
+import "../../chunk-YICWWZ3Z.js";
 import "../../chunk-EDW2NVRV.js";
 import "../../chunk-6U3IUD57.js";
 import "../../chunk-W72U7OU7.js";
 import {
   useChatRuntime
-} from "../../chunk-RFONYT63.js";
+} from "../../chunk-4YKGXZ7W.js";
 import "../../chunk-MJNXIEV2.js";
 import "../../chunk-CZR7ARBA.js";
 import "../../chunk-GGWZFCYS.js";
@@ -46,17 +50,45 @@ import "../../chunk-GGWZFCYS.js";
 import { useMemo, useTransition } from "react";
 import { GraduationCap } from "lucide-react";
 
-// src/components/onboarding-guides/build-default-href.ts
-function buildDefaultHref(basePath, slug) {
-  return { href: `${basePath}/${slug}`, targetPlatform: null };
+// src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function OnboardingGuidesCatalogSkeleton() {
+  return /* @__PURE__ */ jsx(
+    DevSectionPage,
+    {
+      sectionKey: "onboarding",
+      preControls: /* @__PURE__ */ jsxs("div", { className: "space-y-4 animate-pulse", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-12 w-full bg-ods-card border border-ods-border rounded-md" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 p-4 bg-ods-card border border-ods-border rounded-lg", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 w-14 bg-ods-border/60 rounded" }),
+          [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-10 w-24 bg-ods-card border border-ods-border rounded-md"
+            },
+            i
+          ))
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsx("div", { className: "space-y-10 animate-pulse", children: [4, 3, 3].map((cardCount, sectionIdx) => /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("h2", { className: "text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-6 w-40 bg-ods-border/70 rounded" }),
+          /* @__PURE__ */ jsx("span", { className: "h-5 w-8 bg-ods-text-secondary/20 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)) })
+    }
+  );
 }
 
 // src/components/onboarding-guides/onboarding-guides-catalog-view.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function OnboardingGuidesCatalogView({
   initialGuides,
   initialSections,
   initialSection = "",
+  guidesEndpoint,
+  sectionsEndpoint,
   renderCard,
   basePath = "/onboarding-guides"
 }) {
@@ -64,37 +96,41 @@ function OnboardingGuidesCatalogView({
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
   const runtime = useChatRuntime();
-  const activeSection = initialSection || "all";
+  const selfFetch = initialGuides === void 0 && guidesEndpoint !== void 0;
+  const sectionValue = selfFetch ? searchParams.get("section") ?? "" : initialSection;
+  const activeSection = sectionValue || "all";
+  const guidesQs = sectionValue ? `?section=${encodeURIComponent(sectionValue)}` : "";
+  const guidesRes = useSelfFetch(
+    selfFetch && guidesEndpoint ? `${guidesEndpoint}${guidesQs}` : null
+  );
+  const sectionsRes = useSelfFetch(
+    selfFetch && sectionsEndpoint ? sectionsEndpoint : null
+  );
+  const guides = initialGuides ?? guidesRes.data?.data ?? [];
+  const sections = initialSections ?? (Array.isArray(sectionsRes.data) ? sectionsRes.data : []);
+  const isLoading = selfFetch ? guidesRes.isLoading : false;
   const grouped = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const g of initialGuides) {
+    for (const g of guides) {
       const existing = map.get(g.section);
       if (existing) {
-        if (g.section_order < existing.section_order)
-          existing.section_order = g.section_order;
+        if (g.section_order < existing.section_order) existing.section_order = g.section_order;
         existing.guides.push(g);
       } else {
         map.set(g.section, { section_order: g.section_order, guides: [g] });
       }
     }
     for (const entry of map.values()) {
-      entry.guides.sort(
-        (a, b) => a.step_order - b.step_order || a.title.localeCompare(b.title)
-      );
+      entry.guides.sort((a, b) => a.step_order - b.step_order || a.title.localeCompare(b.title));
     }
-    return Array.from(map.entries()).map(([section, info]) => ({ section, ...info })).sort(
-      (a, b) => a.section_order - b.section_order || a.section.localeCompare(b.section)
-    );
-  }, [initialGuides]);
+    return Array.from(map.entries()).map(([section, info]) => ({ section, ...info })).sort((a, b) => a.section_order - b.section_order || a.section.localeCompare(b.section));
+  }, [guides]);
   const sectionFilterOptions = useMemo(
     () => [
-      { value: "all", label: `All (${initialGuides.length})` },
-      ...initialSections.map((s) => ({
-        value: s.section,
-        label: `${s.section} (${s.count})`
-      }))
+      { value: "all", label: `All (${guides.length})` },
+      ...sections.map((s) => ({ value: s.section, label: `${s.section} (${s.count})` }))
     ],
-    [initialGuides.length, initialSections]
+    [guides.length, sections]
   );
   const setSection = (value) => {
     const params = new URLSearchParams(searchParams.toString());
@@ -116,12 +152,13 @@ function OnboardingGuidesCatalogView({
     tableIds: ["onboarding-guides"]
   });
   const defaultRenderCard = (guide) => {
-    const cta = runtime?.composeContentUrl ? runtime.composeContentUrl(
-      "onboarding_guide",
-      guide.slug,
-      guide.onboarding_guide_platforms
-    ) : buildDefaultHref(basePath, guide.slug);
-    return /* @__PURE__ */ jsx(
+    const cta = resolveContentHref(runtime?.composeContentUrl, {
+      type: "onboarding_guide",
+      slug: guide.slug,
+      basePath,
+      platforms: guide.onboarding_guide_platforms
+    });
+    return /* @__PURE__ */ jsx2(
       OnboardingGuideCard,
       {
         guide,
@@ -132,8 +169,8 @@ function OnboardingGuidesCatalogView({
     );
   };
   const renderCardFn = renderCard ?? defaultRenderCard;
-  const preControls = /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx(
+  const preControls = /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx2(
       DocSearchBar,
       {
         placeholder: "Search onboarding guides, releases, case studies\u2026",
@@ -145,7 +182,7 @@ function OnboardingGuidesCatalogView({
         showDropdown: docSearch.keepDropdownOpen
       }
     ),
-    initialSections.length > 0 && /* @__PURE__ */ jsx(
+    sections.length > 0 && /* @__PURE__ */ jsx2(
       FilterPillRow,
       {
         label: "Section",
@@ -155,30 +192,35 @@ function OnboardingGuidesCatalogView({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx(DevSectionPage, { sectionKey: "onboarding", preControls, children: initialGuides.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-16", children: [
-    /* @__PURE__ */ jsx(GraduationCap, { className: "h-12 w-12 text-ods-text-secondary mx-auto mb-4" }),
-    /* @__PURE__ */ jsx("h2", { className: "text-ods-text-primary font-['DM_Sans'] text-[20px] font-semibold mb-2", children: "No onboarding guides found" }),
-    /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary font-['DM_Sans'] text-[14px]", children: activeSection !== "all" ? "No guides in this section yet." : "We're working on the onboarding library. Check back soon." })
-  ] }) : /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: isPending ? "opacity-60 transition-opacity space-y-10" : "space-y-10",
-      children: grouped.map((sec) => /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("h2", { className: "text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2", children: [
-          sec.section,
-          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 text-ods-text-secondary text-xs font-medium px-2 py-0.5", children: sec.guides.length })
-        ] }),
-        /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-4", children: sec.guides.map((guide) => /* @__PURE__ */ jsx("li", { children: renderCardFn(guide) }, guide.id)) })
-      ] }, sec.section))
-    }
-  ) });
+  if (selfFetch && guidesRes.error) {
+    return /* @__PURE__ */ jsx2(LoadError, { message: "Failed to load onboarding guides.", onRetry: guidesRes.reload });
+  }
+  if (selfFetch && guidesRes.data == null && isLoading) {
+    return /* @__PURE__ */ jsx2(OnboardingGuidesCatalogSkeleton, {});
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full flex flex-col gap-10", children: [
+    preControls,
+    guides.length === 0 ? /* @__PURE__ */ jsxs2("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsx2(GraduationCap, { className: "h-12 w-12 text-ods-text-secondary mx-auto mb-4" }),
+      /* @__PURE__ */ jsx2("h2", { className: "text-ods-text-primary font-['DM_Sans'] text-[20px] font-semibold mb-2", children: "No onboarding guides found" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-ods-text-secondary font-['DM_Sans'] text-[14px]", children: activeSection !== "all" ? "No guides in this section yet." : "We're working on the onboarding library. Check back soon." })
+    ] }) : /* @__PURE__ */ jsx2("div", { className: isPending || isLoading ? "opacity-60 transition-opacity space-y-10" : "space-y-10", children: grouped.map((sec) => /* @__PURE__ */ jsxs2("section", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs2("h2", { className: "text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2", children: [
+        sec.section,
+        /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 text-ods-text-secondary text-xs font-medium px-2 py-0.5", children: sec.guides.length })
+      ] }),
+      /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-4", children: sec.guides.map((guide) => /* @__PURE__ */ jsx2("li", { children: renderCardFn(guide) }, guide.id)) })
+    ] }, sec.section)) })
+  ] });
 }
 
 // src/components/onboarding-guides/onboarding-guide-detail-view.tsx
 import { ArrowLeft } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function OnboardingGuideDetailView({
-  initialData: guide,
+  initialData,
+  slug,
+  guideEndpoint,
   related = [],
   MarkdownRenderer = SimpleMarkdownRenderer,
   renderRelatedCard,
@@ -188,46 +230,44 @@ function OnboardingGuideDetailView({
 }) {
   const resolvedBackHref = backHref ?? basePath;
   const runtime = useChatRuntime();
+  const url = initialData ? null : slug && guideEndpoint ? guideEndpoint(slug) : null;
+  const { data: guide, isLoading, error, reload } = useSelfFetch(url, { initialData });
   const { ref: videoWarmupRef } = useVideoWarmup({
-    videoUrl: guide.main_video_url,
+    videoUrl: guide?.main_video_url,
     supabaseStorageOrigin: runtime?.endpoints.supabaseStorageOrigin
   });
-  const captionsUrl = getCaptionsUrl(
-    "onboarding_guide",
-    guide.id,
-    guide.srt_content
-  );
+  if (error || !guide && !isLoading) {
+    return /* @__PURE__ */ jsx3(LoadError, { message: "Guide not found.", onRetry: reload });
+  }
+  if (!guide) {
+    return /* @__PURE__ */ jsx3(DetailPageSkeleton, { showImageGallery: false });
+  }
+  const captionsUrl = getCaptionsUrl("onboarding_guide", guide.id, guide.srt_content);
   const videoPoster = guide.main_video_thumbnail || guide.featured_image || guide.og_image_url || runtime?.resolvePlaceholderUrl?.(guide.title, { aspect: "wide" }) || void 0;
   const defaultRenderRelatedCard = (g) => {
-    const cta = runtime?.composeContentUrl ? runtime.composeContentUrl(
-      "onboarding_guide",
-      g.slug,
-      g.onboarding_guide_platforms
-    ) : buildDefaultHref(basePath, g.slug);
-    return /* @__PURE__ */ jsx2(
-      OnboardingGuideCard,
-      {
-        guide: g,
-        href: cta.href,
-        targetPlatform: cta.targetPlatform
-      }
-    );
+    const cta = resolveContentHref(runtime?.composeContentUrl, {
+      type: "onboarding_guide",
+      slug: g.slug,
+      basePath,
+      platforms: g.onboarding_guide_platforms
+    });
+    return /* @__PURE__ */ jsx3(OnboardingGuideCard, { guide: g, href: cta.href, targetPlatform: cta.targetPlatform });
   };
   const renderRelatedCardFn = renderRelatedCard ?? defaultRenderRelatedCard;
-  return /* @__PURE__ */ jsx2(ArticleDetailLayout, { children: /* @__PURE__ */ jsxs2("div", { className: "space-y-6 md:space-y-8", children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(ArticleDetailLayout, { children: /* @__PURE__ */ jsxs3("div", { className: "space-y-6 md:space-y-8", children: [
+    /* @__PURE__ */ jsxs3(
       next_link_default,
       {
         href: resolvedBackHref,
         className: "inline-flex items-center gap-2 text-ods-text-secondary hover:text-ods-accent transition-colors",
         children: [
-          /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx2("span", { className: "text-h5", children: backLabel })
+          /* @__PURE__ */ jsx3(ArrowLeft, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx3("span", { className: "text-h5", children: backLabel })
         ]
       }
     ),
-    /* @__PURE__ */ jsx2("h1", { className: "text-h1 tracking-[-1.12px] text-ods-text-primary", children: guide.title }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3("h1", { className: "text-h1 tracking-[-1.12px] text-ods-text-primary", children: guide.title }),
+    /* @__PURE__ */ jsx3(
       EntityAuthorCard,
       {
         author: guide.author,
@@ -241,7 +281,7 @@ function OnboardingGuideDetailView({
         ]
       }
     ),
-    (guide.main_video_url || guide.youtube_url) && /* @__PURE__ */ jsx2("div", { ref: videoWarmupRef, children: /* @__PURE__ */ jsx2(
+    (guide.main_video_url || guide.youtube_url) && /* @__PURE__ */ jsx3("div", { ref: videoWarmupRef, children: /* @__PURE__ */ jsx3(
       EntityVideoSection,
       {
         mainVideoUrl: guide.main_video_url,
@@ -257,8 +297,8 @@ function OnboardingGuideDetailView({
         MarkdownRenderer
       }
     ) }),
-    guide.content && /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: /* @__PURE__ */ jsx2(MarkdownRenderer, { content: guide.content }) }),
-    guide.video_bites && guide.video_bites.length > 0 && /* @__PURE__ */ jsx2(
+    guide.content && /* @__PURE__ */ jsx3("div", { className: "space-y-4", children: /* @__PURE__ */ jsx3(MarkdownRenderer, { content: guide.content }) }),
+    guide.video_bites && guide.video_bites.length > 0 && /* @__PURE__ */ jsx3(
       VideoBitesDisplay,
       {
         bites: guide.video_bites,
@@ -266,47 +306,16 @@ function OnboardingGuideDetailView({
         showTitle: false
       }
     ),
-    related.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "space-y-4 pt-8 border-t border-ods-border", children: [
-      /* @__PURE__ */ jsxs2("h2", { className: "text-h3 tracking-[-0.36px] text-ods-text-primary", children: [
+    related.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "space-y-4 pt-8 border-t border-ods-border", children: [
+      /* @__PURE__ */ jsxs3("h2", { className: "text-h3 tracking-[-0.36px] text-ods-text-primary", children: [
         "More in ",
         guide.section
       ] }),
-      /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-3", children: related.map((r) => /* @__PURE__ */ jsx2("li", { children: renderRelatedCardFn(r) }, r.id)) })
+      /* @__PURE__ */ jsx3("ul", { className: "flex flex-col gap-3", children: related.map((r) => /* @__PURE__ */ jsx3("li", { children: renderRelatedCardFn(r) }, r.id)) })
     ] })
   ] }) });
 }
 
-// src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function OnboardingGuidesCatalogSkeleton() {
-  return /* @__PURE__ */ jsx3(
-    DevSectionPage,
-    {
-      sectionKey: "onboarding",
-      preControls: /* @__PURE__ */ jsxs3("div", { className: "space-y-4 animate-pulse", children: [
-        /* @__PURE__ */ jsx3("div", { className: "h-12 w-full bg-ods-card border border-ods-border rounded-md" }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-3 p-4 bg-ods-card border border-ods-border rounded-lg", children: [
-          /* @__PURE__ */ jsx3("div", { className: "h-4 w-14 bg-ods-border/60 rounded" }),
-          [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx3(
-            "div",
-            {
-              className: "h-10 w-24 bg-ods-card border border-ods-border rounded-md"
-            },
-            i
-          ))
-        ] })
-      ] }),
-      children: /* @__PURE__ */ jsx3("div", { className: "space-y-10 animate-pulse", children: [4, 3, 3].map((cardCount, sectionIdx) => /* @__PURE__ */ jsxs3("section", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs3("h2", { className: "text-h3 tracking-[-0.36px] text-ods-text-primary flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx3("span", { className: "h-6 w-40 bg-ods-border/70 rounded" }),
-          /* @__PURE__ */ jsx3("span", { className: "h-5 w-8 bg-ods-text-secondary/20 rounded-full" })
-        ] }),
-        /* @__PURE__ */ jsx3("ul", { className: "flex flex-col gap-4", children: Array.from({ length: cardCount }).map((_, cardIdx) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(OnboardingGuideCardSkeleton, { size: "catalog" }) }, cardIdx)) })
-      ] }, sectionIdx)) })
-    }
-  );
-}
-
 // src/components/onboarding-guides/hooks/use-onboarding-guides.ts
 import { useQuery } from "@tanstack/react-query";
 var onboardingGuideKeys = {