@flamingo-stack/openframe-frontend-core 0.0.303 → 0.0.304

package/dist/chunk-YKP7UXWT.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/chunk-YKP7UXWT.cjs","../src/components/unified-pagination.tsx","../src/components/empty-state.tsx","../src/components/shared/dev-section/dev-section-view.tsx","../src/components/shared/dev-section/dev-section-page.tsx","../src/components/shared/dev-section/dev-card-row.tsx","../src/components/shared/delivery/delivery-row.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"/home/runner/work/openframe-oss-lib/openframe-oss-lib/openframe-frontend-core/dist/chunk-YKP7UXWT.cjs","sourcesContent":[null,"\"use client\"\n\nimport { useRouter, useSearchParams, usePathname } from \"../embed-shims/next-navigation\"\nimport { Pagination } from \"./pagination\"\n\ninterface UnifiedPaginationProps {\n  currentPage: number\n  totalPages: number\n  onPageChange?: (page: number) => void\n  className?: string\n}\n\nexport function UnifiedPagination({ \n  currentPage, \n  totalPages, \n  onPageChange,\n  className = \"mt-8 flex justify-center w-full\"\n}: UnifiedPaginationProps) {\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const pathname = usePathname()\n\n  const handlePageChange = (page: number) => {\n    // Preserve current scroll position\n    const currentScrollY = window.scrollY\n    \n    // Call the callback to update local state (prevents reload)\n    if (onPageChange) {\n      onPageChange(page)\n    }\n    \n    // Update URL for bookmarking without navigation\n    const params = new URLSearchParams(searchParams.toString())\n    params.set(\"page\", page.toString())\n    \n    // Update URL without navigation (for bookmarking support)\n    const newUrl = `${pathname}?${params.toString()}`\n    window.history.replaceState(null, '', newUrl)\n    \n    // Restore scroll position after a brief delay to allow content to render\n    setTimeout(() => {\n      window.scrollTo({\n        top: currentScrollY,\n        behavior: 'instant' // Instant to prevent any scroll animation\n      })\n    }, 0)\n  }\n\n  // Don't render pagination if there's only one page\n  if (totalPages <= 1) return null\n\n  return (\n    <div className={className}>\n      <Pagination\n        currentPage={currentPage}\n        totalPages={totalPages}\n        onPageChange={handlePageChange}\n      />\n    </div>\n  )\n} ","\"use client\";\n\nimport { Search, FileText, Package } from \"lucide-react\"\nimport { Button } from \"./ui/button\"\nimport { useRouter } from \"../embed-shims/next-navigation\"\n\nexport interface EmptyStateProps {\n  type: 'vendors' | 'posts' | 'search' | 'generic'\n  title?: string\n  description?: string\n  showBackButton?: boolean\n  onGoBack?: () => void\n  backButtonText?: string\n  // New CTA properties\n  showCTA?: boolean\n  ctaText?: string\n  onCtaClick?: () => void\n  ctaVariant?: 'primary' | 'secondary'\n}\n\nexport function EmptyState({\n  type,\n  title,\n  description,\n  showBackButton = false,\n  onGoBack,\n  backButtonText = \"Go Back\",\n  showCTA = true,\n  ctaText,\n  onCtaClick,\n  ctaVariant = 'primary'\n}: EmptyStateProps) {\n  const router = useRouter()\n\n  // Default content based on type\n  const getDefaultContent = () => {\n    switch (type) {\n      case 'vendors':\n        return {\n          icon: <Package className=\"w-full h-full\" />,\n          title: \"No vendors found\",\n          description: \"We couldn't find any vendors matching your criteria. Try adjusting your filters or search terms.\"\n        }\n      case 'posts':\n        return {\n          icon: <FileText className=\"w-full h-full\" />,\n          title: \"No articles found\",\n          description: \"We couldn't find any articles matching your criteria. Try different categories, tags, or search terms.\"\n        }\n      case 'search':\n        return {\n          icon: <Search className=\"w-full h-full\" />,\n          title: \"No results found\",\n          description: \"Your search didn't return any results. Try different keywords or browse our categories.\"\n        }\n      default:\n        return {\n          icon: <Search className=\"w-full h-full\" />,\n          title: \"Nothing found\",\n          description: \"We couldn't find what you're looking for. Try adjusting your search or filters.\"\n        }\n    }\n  }\n\n  // Smart CTA logic based on context\n  const getSmartCTA = () => {\n    // If custom CTA is provided, use it\n    if (ctaText && onCtaClick) {\n      return {\n        text: ctaText,\n        action: onCtaClick\n      }\n    }\n\n    // Check if we're on the client side\n    const isClient = typeof window !== 'undefined'\n    const currentPath = isClient ? window.location.pathname : ''\n\n    // Smart defaults based on type and context\n    switch (type) {\n      case 'search':\n        return {\n          text: \"Reset Filters\",\n          action: () => {\n            if (isClient) {\n              // Try to reset search by clearing URL params and refreshing\n              const url = new URL(window.location.href)\n              url.search = ''\n              router.push(url.pathname)\n            }\n          }\n        }\n      case 'posts':\n        // If we're on blog/community pages, reset blog filters\n        if (currentPath.includes('/blog')) {\n          return {\n            text: \"Reset Filters\",\n            action: () => {\n              if (isClient) {\n                // Reset blog search and filters by clearing URL params\n                const url = new URL(window.location.href)\n                url.search = ''\n                router.push(url.pathname)\n              }\n            }\n          }\n        } else if (currentPath.includes('/profile')) {\n          return {\n            text: \"Browse Vendors\",\n            action: () => router.push('/vendors')\n          }\n        }\n        return {\n          text: \"View All Posts\",\n          action: () => router.push('/blog')\n        }\n      case 'vendors':\n        // If we're in profile or other pages, direct to main content\n        if (currentPath.includes('/profile')) {\n          return {\n            text: \"Browse Vendors\",\n            action: () => router.push('/vendors')\n          }\n        } else if (currentPath.includes('/vendors') || currentPath.includes('/margin-increase/compare')) {\n          return {\n            text: \"Reset Filters\",\n            action: () => {\n              if (isClient) {\n                // Reset vendor search and filters by clearing URL params\n                const url = new URL(window.location.href)\n                url.search = ''\n                router.push(url.pathname)\n              }\n            }\n          }\n        }\n        return {\n          text: \"Browse Vendors\",\n          action: () => router.push('/vendors')\n        }\n      default:\n        return {\n          text: \"Browse Vendors\",\n          action: () => router.push('/vendors')\n        }\n    }\n  }\n\n  const defaultContent = getDefaultContent()\n  const displayTitle = title || defaultContent.title\n  const displayDescription = description || defaultContent.description\n  const smartCTA = getSmartCTA()\n\n  return (\n    <div className=\"flex flex-col items-center justify-center py-6 md:py-16 px-6 text-center\">\n      {/* Icon */}\n      <div className=\"mb-3 md:mb-6 flex items-center justify-center\">\n        <div className=\"rounded-full bg-ods-card p-3 md:p-6 border border-ods-border\">\n          <div className=\"w-8 h-8 md:w-16 md:h-16 text-ods-text-secondary flex items-center justify-center\">\n            {defaultContent.icon}\n          </div>\n        </div>\n      </div>\n\n      {/* Title */}\n      <h2 className=\"mb-2 md:mb-3 text-lg md:text-xl font-semibold font-['DM_Sans'] text-ods-text-primary tracking-[-0.02em]\">\n        {displayTitle}\n      </h2>\n\n      {/* Description */}\n      <p className=\"mb-4 md:mb-8 max-w-md text-sm font-medium font-['DM_Sans'] text-ods-text-secondary leading-[1.43em]\">\n        {displayDescription}\n      </p>\n\n      {/* Smart CTA Button */}\n      {showCTA && smartCTA && (\n        <div className=\"w-full max-w-xs mb-3\">\n          <Button\n            onClick={smartCTA.action}\n            className={ctaVariant === 'primary'\n              ? \"w-full bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover transition-all duration-150 font-['DM_Sans'] font-medium\"\n              : \"w-full bg-transparent border border-ods-border text-ods-text-primary hover:border-ods-accent hover:text-ods-accent transition-all duration-150 font-['DM_Sans'] font-medium\"\n            }\n          >\n            {smartCTA.text}\n          </Button>\n        </div>\n      )}\n\n      {/* Optional Back Button */}\n      {showBackButton && onGoBack && (\n        <div className=\"w-full max-w-xs\">\n          <Button\n            onClick={onGoBack}\n            variant=\"outline\"\n            className=\"w-full transition-all duration-150 font-['DM_Sans'] font-medium\"\n          >\n            {backButtonText}\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n} ","'use client';\n\n/**\n * DevSectionView — the canonical chrome for ANY dev-center section\n * (Roadmap / Delivery / Releases). One component, used in BOTH:\n *\n *   - tabbed `/roadmap-and-releases` (compact title mode, no `hero`)\n *   - full-page `/roadmap`, `/bug-fixes-and-enhancements`, `/releases`\n *     (hero mode with icon + description + back link)\n *\n * Owns: title rendering, the inline search input, the filter pill row,\n * and the URL-param wiring that connects both. The list `children`\n * receive a clean URL contract — they read `?<paramKey>=...` via\n * `useSearchParams()` and refetch on change. No duplicated controls.\n */\n\nimport type { ReactNode } from 'react';\nimport { useState, useEffect } from 'react';\nimport { useRouter, useSearchParams, usePathname } from '../../../embed-shims';\nimport { SearchInput } from '../../ui';\nimport { StatusFilterComponent } from '../../features';\nimport { PageHeader } from '../../layout/page-header';\nimport {\n  OPENFRAME_DEV_SECTIONS,\n  type OpenframeDevSectionKey,\n} from '../../../utils/dev-sections/openframe-dev-sections';\n\nexport interface DevSectionViewProps {\n  /** Which section to render — drives title, search, and filter\n   *  config via the `OPENFRAME_DEV_SECTIONS` registry. */\n  sectionKey: OpenframeDevSectionKey;\n  /** When set, renders the rich page-level hero (icon + h1 + description).\n   *  Omit for the compact tab-context heading. */\n  hero?: {\n    /** Pre-rendered icon JSX. Server components render the icon themselves\n     *  and pass the element here — function references can't cross the\n     *  server→client boundary, but React elements can. */\n    icon: ReactNode;\n    /** Hero title. Falls back to `OPENFRAME_DEV_SECTIONS[sectionKey].hero.title`\n     *  when omitted, so embedders can override the (OpenFrame-specific) default\n     *  copy without forking the registry. */\n    title?: string;\n    description: string;\n  };\n  /** Optional slot rendered BETWEEN the hero and the search/filter\n   *  controls. Use this for an entry-action surface that should sit\n   *  above the list (e.g. the Help Center's \"Open a new ticket\" form).\n   *  The slot is wrapped in the same `gap-10` flex column so spacing\n   *  matches the surrounding chrome — callers should NOT add their\n   *  own top/bottom margin. Renders `null` (no DOM) when omitted. */\n  preControls?: ReactNode;\n  /** The page-specific list body. Reads URL params written by this\n   *  component (search input + filter pills). */\n  children: ReactNode;\n}\n\nexport function DevSectionView({ sectionKey, hero, preControls, children }: DevSectionViewProps) {\n  const section = OPENFRAME_DEV_SECTIONS[sectionKey];\n  const router = useRouter();\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n\n  const search = section.search;\n  const filter = section.filter;\n\n  const currentSearch = search ? searchParams.get(search.paramKey) || '' : '';\n  const currentFilterValue = filter\n    ? searchParams.get(filter.paramKey) || filter.defaultValue\n    : '';\n\n  // Controlled search-input state — input commits to the URL only on\n  // Enter (not on every keystroke), preserving the legacy behavior.\n  // Lazy init from URL avoids a brief flash of stale value on first\n  // paint after URL-driven re-render (e.g. tab switch).\n  const [searchValue, setSearchValue] = useState(() => currentSearch);\n  useEffect(() => {\n    setSearchValue(currentSearch);\n  }, [currentSearch]);\n\n  const handleSearchSubmit = (value: string) => {\n    if (!search) return;\n    const params = new URLSearchParams(searchParams.toString());\n    if (value.trim()) params.set(search.paramKey, value.trim());\n    else params.delete(search.paramKey);\n    router.replace(`${pathname}?${params.toString()}`, { scroll: false });\n  };\n\n  const handleFilterChange = (value: string) => {\n    if (!filter) return;\n    const params = new URLSearchParams(searchParams.toString());\n    if (value === filter.defaultValue) params.delete(filter.paramKey);\n    else params.set(filter.paramKey, value);\n    router.replace(`${pathname}?${params.toString()}`, { scroll: false });\n  };\n\n  return (\n    <div className=\"w-full flex flex-col gap-10\">\n      {hero ? (\n        // Render through the shared `<PageHeader>` primitive so the dev-\n        // section hero (Releases, Roadmap, Onboarding catalog) and the\n        // docs-hub hero (Knowledge Hub, Data Room) are LITERALLY the same\n        // component rendering the same DOM/CSS. `noBottomMargin` because\n        // the parent `gap-10` already supplies the spacing to the next\n        // sibling (preControls / search / filter).\n        <PageHeader\n          title={hero.title ?? section.hero.title}\n          titleIcon={hero.icon}\n          subtitle={hero.description}\n          noBottomMargin\n          noTopPadding\n        />\n      ) : (\n        <div className=\"flex items-center justify-between w-full\">\n          <h2 className=\"font-['Azeret_Mono'] font-semibold text-[32px] md:text-[40px] lg:text-[48px] leading-[40px] md:leading-[48px] lg:leading-[56px] text-ods-text-primary tracking-[-0.64px] md:tracking-[-0.8px] lg:tracking-[-0.96px]\">\n            {section.hero.title}\n            <span className=\"text-ods-accent\">:</span>\n          </h2>\n        </div>\n      )}\n\n      {preControls}\n\n      {(search || filter) && (\n        <div className=\"space-y-4\">\n          {search && (\n            <SearchInput\n              showDropdown={false}\n              placeholder={search.placeholder}\n              value={searchValue}\n              onChange={setSearchValue}\n              onSubmit={handleSearchSubmit}\n            />\n          )}\n          {filter && (\n            <StatusFilterComponent\n              selectedStatus={currentFilterValue}\n              onStatusChange={handleFilterChange}\n              statusOptions={[...filter.options]}\n            />\n          )}\n        </div>\n      )}\n\n      {children}\n    </div>\n  );\n}\n","'use client';\n\n/**\n * DevSectionPage — full-page wrapper for a dev-center section\n * (`/roadmap`, `/bug-fixes-and-enhancements`, `/releases`).\n *\n * Mounts the lib's canonical `PageLayout` directly (no in-app wrapper)\n * so the back-button affordance stays in lockstep with whatever the\n * design system ships — any future lib change to BackButton / TitleBlock\n * propagates automatically.\n *\n * Composition: `PageShell` → `PageLayout` (back-to-home wired) →\n * `DevSectionView` (icon hero + search + filter pills) → list body.\n *\n * Adding a new section is one entry in `OPENFRAME_DEV_SECTIONS` plus a\n * single-line page file mounting this factory with the new key.\n */\n\nimport type { ReactNode } from 'react';\nimport { useRouter } from '../../../embed-shims/next-navigation';\nimport { PageShell, PageLayout } from '../../ui';\nimport { DevSectionView } from './dev-section-view';\nimport {\n  OPENFRAME_DEV_SECTIONS,\n  type OpenframeDevSectionKey,\n} from '../../../utils/dev-sections/openframe-dev-sections';\n\n/** Re-export the constant so existing dev-section call sites keep their\n *  old import path. The canonical home is `src/utils/page-header-constants.ts`\n *  (NOT a `'use client'` module) so server modules can import it without\n *  Next.js turning it into a client reference proxy — that proxy is what\n *  blew up lucide's `mergeClasses().trim()` when used as\n *  `<Icon className={SECTION_HERO_ICON_CLASS} />` inside a hub\n *  server-component preset. */\nimport { SECTION_HERO_ICON_CLASS } from '../../../utils/page-header-constants';\nexport { SECTION_HERO_ICON_CLASS };\n\nexport interface DevSectionPageProps {\n  sectionKey: OpenframeDevSectionKey;\n  /** The page-specific list body (e.g. `<RoadmapList />`). */\n  children: ReactNode;\n  /** Optional slot rendered BETWEEN the hero and search/filter — see\n   *  `DevSectionView.preControls`. Used by surfaces that want an entry\n   *  action (e.g. Help Center's \"Open a new ticket\" form) above the\n   *  controls instead of below them. */\n  preControls?: ReactNode;\n  /** Back-button config — same shape as `LegalDocumentPage` /\n   *  `ReleaseDetailPage`. Pass `false` to hide entirely. Default\n   *  `{ label: 'Back to home', href: '/' }` — embedders whose \"home\" isn't `/`\n   *  should override `href`, or pass `false` if the embed has no home page. */\n  backButton?: { label?: string; href?: string } | false;\n  /** Override the hero title. Defaults to the (OpenFrame-specific) copy in\n   *  `OPENFRAME_DEV_SECTIONS[sectionKey].hero.title`. Set this to brand the\n   *  section for a non-OpenFrame embed. */\n  title?: string;\n  /** Override the hero subtitle/description. Defaults to\n   *  `OPENFRAME_DEV_SECTIONS[sectionKey].hero.description`. */\n  subtitle?: string;\n}\n\nexport function DevSectionPage({\n  sectionKey,\n  children,\n  preControls,\n  backButton,\n  title,\n  subtitle,\n}: DevSectionPageProps) {\n  const router = useRouter();\n  const section = OPENFRAME_DEV_SECTIONS[sectionKey];\n  const Icon = section.icon;\n\n  // Back-button config — mirrors LegalDocumentPage / ReleaseDetailPage.\n  // Default: { label: 'Back to home', href: '/' }. Pass `false` to hide.\n  // After `backButton &&` narrowing, inner type is `{ label?, href? } |\n  // undefined`; don't re-compare to `false` (TS2367).\n  const backCfg =\n    backButton === false\n      ? undefined\n      : {\n          label: (backButton ? backButton.label : undefined) ?? 'Back to home',\n          onClick: () => router.push((backButton ? backButton.href : undefined) ?? '/'),\n        };\n\n  return (\n    <PageShell>\n      <PageLayout backButton={backCfg}>\n        <DevSectionView\n          sectionKey={sectionKey}\n          hero={{\n            icon: <Icon className={SECTION_HERO_ICON_CLASS} />,\n            title,\n            description: subtitle ?? section.hero.description,\n          }}\n          preControls={preControls}\n        >\n          {children}\n        </DevSectionView>\n      </PageLayout>\n    </PageShell>\n  );\n}\n","'use client';\n\n/**\n * Shared row chrome for any `DevSectionPage` list (delivery, tickets,\n * future sections). One source of truth for the layout that every\n * dev-section card row uses:\n *   left column  → title (h3) / subtitle (h5 uppercase) / description\n *                  (h4 line-clamp-3), each in a fixed min-height block\n *                  so rows align across the grid\n *   right column → caller-supplied stacked badges\n *\n * Surface stays small on purpose — `rightBadges` is a `ReactNode` so\n * the caller decides how many badges (delivery: 2, tickets: 1-2,\n * future: anything). No behavior baked in: the caller wraps the row\n * in a `<div>` (static, like delivery) or `<button>` (clickable, like\n * tickets) and renders the row content via this component.\n *\n * Pair with `DevCardRowSkeletonList` for the loading state — the\n * skeleton mirrors the same min-heights so the in-flight UI doesn't\n * shift the layout when real data lands.\n *\n * NOTE: the ticket conversation row is NOT here — it renders the shared\n * `<ChatMessageRow>` (`components/chat/chat-message-row.tsx`), the SAME\n * component the OpenMSP Slack-community feed uses, so the two surfaces stay\n * pixel-identical by construction.\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface DevCardRowContentProps {\n  title: string;\n  /** Single-line uppercase metadata (e.g. \"UPDATED today, #4271, Code review\"). */\n  subtitle: string;\n  /** 3-line description block. Empty string renders the fallback. */\n  description: string;\n  /** Fallback copy when `description` is empty. Defaults to a generic\n   *  string; ticket / delivery surfaces override. */\n  emptyDescription?: string;\n  /** Right column — caller renders its own stacked badges. */\n  rightBadges: ReactNode;\n}\n\nexport function DevCardRowContent({\n  title,\n  subtitle,\n  description,\n  emptyDescription = 'No description provided',\n  rightBadges,\n}: DevCardRowContentProps) {\n  return (\n    <div className=\"flex flex-col md:flex-row items-start justify-between gap-[12px] md:gap-[16px] w-full\">\n      <div className=\"flex-1 min-w-0 w-full md:w-auto flex flex-col gap-[12px] md:gap-[16px]\">\n        <div className=\"min-h-[24px] flex items-center\">\n          <h3 className=\"text-h3 text-ods-text-primary tracking-[-0.36px] flex-1 line-clamp-2 md:truncate break-words\">\n            {title}\n          </h3>\n        </div>\n        <div className=\"min-h-[20px] flex items-center\">\n          <p className=\"text-h5 text-ods-text-secondary uppercase tracking-[-0.28px] truncate\">\n            {subtitle}\n          </p>\n        </div>\n        <div className=\"min-h-[72px] flex items-center\">\n          <p className=\"text-h4 text-ods-text-secondary line-clamp-3 break-words\">\n            {description || emptyDescription}\n          </p>\n        </div>\n      </div>\n      <div className=\"flex-shrink-0 self-start flex flex-col gap-2\">\n        {rightBadges}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Skeleton rendering for a single row — the bars mirror the same\n * min-heights as `DevCardRowContent` so the loading→loaded swap\n * doesn't reflow.\n */\nexport function DevCardRowSkeleton() {\n  return (\n    <div className=\"border-b border-ods-border last:border-b-0 p-[12px] md:p-[16px]\">\n      <div className=\"flex flex-col md:flex-row items-start justify-between gap-[12px] md:gap-[16px] w-full\">\n        <div className=\"flex-1 min-w-0 w-full md:w-auto flex flex-col gap-[12px] md:gap-[16px]\">\n          <div className=\"min-h-[24px] flex items-center\">\n            <div className=\"h-[20px] bg-ods-border rounded animate-pulse w-full\" />\n          </div>\n          <div className=\"min-h-[20px] flex items-center\">\n            <div className=\"h-[20px] bg-ods-border rounded animate-pulse w-1/2\" />\n          </div>\n          <div className=\"min-h-[72px] flex items-center\">\n            <div className=\"flex-1 space-y-1\">\n              <div className=\"h-[20px] bg-ods-border rounded animate-pulse w-full\" />\n              <div className=\"h-[20px] bg-ods-border rounded animate-pulse w-full\" />\n              <div className=\"h-[20px] bg-ods-border rounded animate-pulse w-2/3\" />\n            </div>\n          </div>\n        </div>\n        <div className=\"flex-shrink-0 self-start flex flex-col gap-2\">\n          <div className=\"h-[32px] w-[100px] bg-ods-border rounded animate-pulse\" />\n          <div className=\"h-[32px] w-[120px] bg-ods-border rounded animate-pulse\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * The standard \"5 skeleton rows inside a bordered card\" loading state\n * used by every list shell. Both delivery (`delivery-table.tsx`) and\n * tickets (`tickets-list.tsx`) mount this directly.\n */\nexport function DevCardRowSkeletonList({ rows = 5 }: { rows?: number }) {\n  return (\n    <div className=\"bg-ods-card border border-ods-border rounded-[6px] overflow-hidden w-full\">\n      {Array.from({ length: rows }, (_, i) => (\n        <DevCardRowSkeleton key={i} />\n      ))}\n    </div>\n  );\n}\n","'use client'\n\n/**\n * `<DeliveryRow />` — canonical single-row presentation for a ClickUp\n * delivery item.\n *\n * Single source of truth: both the `/bug-fixes-and-enhancements` page\n * (via `DeliveryTable`) AND the linked-delivery card on a HubSpot ticket\n * (via `TicketLinkedDeliveryCard`) compose this primitive. Visual parity\n * across those two surfaces is the design goal — the user reads the\n * card on their ticket and recognises it as a row from the public\n * delivery list.\n *\n * Behaviors:\n *   - `href` set → outer element is an `<a>`, the whole row becomes\n *     clickable (used by the linked-card surface to deep-link into\n *     `/bug-fixes-and-enhancements?focus=<id>`).\n *   - `id` set → outer element gets that DOM id so the consuming page\n *     can `scrollIntoView` to it when the URL carries `?focus=<id>`.\n *   - `highlighted` true → brief accent border + background pulse\n *     (`animate-flash-focus` keyframe defined in `tailwind.config.ts`).\n *   - `caption` set → small uppercase label rendered above the title\n *     (\"LINKED DELIVERY\" on the ticket-side variant). Omitted on the\n *     standard list rendering.\n */\n\nimport * as React from 'react'\nimport Link from '../../../embed-shims/next-link'\nimport { StatusBadge } from '../../ui/status-badge'\nimport { getStatusColorScheme } from '../../../utils'\nimport {\n  type DeliveryItem,\n  TASK_TYPE_LABELS,\n  TASK_TYPE_TEXT_COLORS,\n} from '../../../types/delivery'\nimport { cn } from '../../../utils/cn'\n\n/** Same heuristic as DeliveryTable's local helper. Inlined so the row\n *  primitive owns its complete rendering contract. */\nfunction getRelativeTime(timestamp: number): string {\n  const now = Date.now()\n  const diff = now - timestamp\n  const days = Math.floor(diff / (1000 * 60 * 60 * 24))\n  const weeks = Math.floor(days / 7)\n  const months = Math.floor(days / 30)\n  if (months > 0) return months === 1 ? 'last month' : `${months} months ago`\n  if (weeks > 0) return weeks === 1 ? 'last week' : `${weeks} weeks ago`\n  if (days > 0) return days === 1 ? 'yesterday' : `${days} days ago`\n  return 'today'\n}\n\nexport interface DeliveryRowProps {\n  item: DeliveryItem\n  /** When set, the row becomes a clickable anchor. The ticket-side\n   *  linked-card composes this from `buildDevSectionUrl('delivery', id)`\n   *  which carries `?search=<id>` — the delivery list filters to that\n   *  exact task on landing (canonical deep-link mechanism, same one\n   *  the chat-inline delivery card uses). */\n  href?: string\n  /** Small uppercase caption rendered above the title. Used by the\n   *  linked-delivery card variant (\"LINKED DELIVERY\"). */\n  caption?: string\n  /** DOM `id` applied to the row's outer element. `DeliveryTable`\n   *  always sets `delivery-<external_id>` so chat-card deep-links\n   *  (`?search=<id>#delivery-<id>`) and the ticket linked-card path\n   *  both have a target for `useScrollToHash` to scroll to. Always\n   *  paired with `scroll-mt-24` on the outer element so the row lands\n   *  BELOW the sticky chrome after the scroll. */\n  id?: string\n  className?: string\n}\n\nexport function DeliveryRow({\n  item,\n  href,\n  caption,\n  id,\n  className,\n}: DeliveryRowProps) {\n  const taskType = item.taskType as keyof typeof TASK_TYPE_LABELS\n  const typeBadgeLabel = TASK_TYPE_LABELS[taskType] || 'TASK'\n  const typeBadgeTextColor = TASK_TYPE_TEXT_COLORS[taskType] || ''\n  const statusBadgeScheme = getStatusColorScheme(item.status)\n  const relativeTime = getRelativeTime(item.dateUpdated)\n  const subtitle = `ACTIVE ${relativeTime}${item.listNames.length > 0 ? `, ${item.listNames.join(', ')}` : ''}, ${item.id}`\n\n  const inner = (\n    <div className=\"flex flex-col md:flex-row items-start justify-between gap-[12px] md:gap-[16px] w-full\">\n      {/* Left: caption (optional) + title + subtitle + description */}\n      <div className=\"flex-1 min-w-0 w-full md:w-auto flex flex-col gap-[12px] md:gap-[16px]\">\n        {caption && (\n          <p className=\"text-xs font-medium uppercase tracking-wider text-ods-text-secondary\">\n            {caption}\n          </p>\n        )}\n        <div className=\"min-h-[24px] md:min-h-[24px] flex items-center\">\n          <h3 className=\"text-h3 text-ods-text-primary tracking-[-0.36px] flex-1 line-clamp-2 md:truncate break-words\">\n            {item.title}\n          </h3>\n        </div>\n        <div className=\"min-h-[20px] flex items-center\">\n          <p className=\"text-h5 text-ods-text-secondary uppercase tracking-[-0.28px] truncate\">\n            {subtitle}\n          </p>\n        </div>\n        <div className=\"min-h-[72px] flex items-center\">\n          <p className=\"text-h4 text-ods-text-secondary line-clamp-3 break-words\">\n            {item.description || 'No description provided'}\n          </p>\n        </div>\n      </div>\n\n      {/* Right: status + task-type badges */}\n      <div className=\"flex-shrink-0 self-start flex flex-col gap-2\">\n        <StatusBadge\n          text={item.status.toUpperCase()}\n          colorScheme={statusBadgeScheme}\n          variant=\"card\"\n          className=\"border border-ods-border\"\n        />\n        <StatusBadge\n          text={typeBadgeLabel}\n          variant=\"card\"\n          className={`border border-ods-border ${typeBadgeTextColor}`}\n        />\n      </div>\n    </div>\n  )\n\n  const baseClass = cn(\n    'block p-[12px] md:p-[16px] no-underline text-inherit transition-colors duration-150',\n    // `scroll-mt-24` is paid for whether `id` is set or not (it's a\n    // single Tailwind utility, no runtime cost). Keeping it\n    // unconditional means a future caller adding `id` doesn't also\n    // have to remember to ask for the offset.\n    'scroll-mt-24',\n    href && 'hover:bg-ods-bg-hover cursor-pointer',\n    className,\n  )\n\n  if (href) {\n    // `Link` is the env-aware embed-shim — delegates to `next/link` on\n    // a Next.js host (soft RSC nav, back-button restores the previous\n    // page's React state intact), falls back to a plain `<a>` on\n    // non-Next embedders. A raw `<a href>` was hard-navigating +\n    // losing TanStack-Query state on back, leaving /tickets stuck on\n    // its skeleton.\n    return (\n      <Link href={href} id={id} className={baseClass} prefetch={false}>\n        {inner}\n      </Link>\n    )\n  }\n\n  return <div id={id} className={baseClass}>{inner}</div>\n}\n"]}

package/dist/components/layout/page-header.d.ts

@@ -1,78 +0,0 @@
-import React from 'react';
-/**
- * Page-header primitive — the canonical "back-button + title + subtitle
- * + (optional) image / actions" chrome every lib page uses.
- *
- * Owns the SSOT for the page-header DOM/CSS that the rest of the lib
- * was duplicating: pre-`mb` top padding, h1 typography (`text-h2`), h6
- * subtitle (`text-h6`), the gap between the back button and the title
- * block, and the right-side actions slot. Consumers either render this
- * directly (e.g. `<DocViewer>` / `<DocsHubPage>`) or compose it through
- * the `<TitleBlock>` adapter which adds the `PageActions` /
- * `ActionsMenu` / selector wiring on top.
- *
- * Why this exists: knowledge-hub vs releases sat at different vertical
- * rhythms (px-perfect mismatch on title baseline + subtitle offset)
- * because the docs surface hand-rolled its own chrome instead of going
- * through `TitleBlock`. Centralizing the layout here means every
- * embeddable lib page (DocViewer, DevSectionPage, LegalDocumentPage,
- * OnboardingGuideDetailView) renders pixel-identical title/subtitle/
- * back-button typography + spacing — and a future spacing/typography
- * tweak is one file.
- */
-export interface PageHeaderProps {
-    /** Page title (h1). Plain string — ReactNode is intentionally not
-     *  supported here so every consumer renders the same typography. */
-    title?: string;
-    /** Optional icon rendered inline before the title text (e.g. the
-     *  rocket emoji on /releases, the docs icon on /knowledge-base).
-     *  Same `flex items-center gap-3` row as `<DevSectionView>`'s hero. */
-    titleIcon?: React.ReactNode;
-    /** Page subtitle (description paragraph). */
-    subtitle?: string;
-    /**
-     * Render a yellow accent dot (`.`) after the title. Mirrors the
-     * hub's legacy `<AdminPageHeader accentDot>` flag — now lib-wide so
-     * surfaces like `/knowledge-base` keep their existing accent styling
-     * after the migration.
-     */
-    accentDot?: boolean;
-    /** Optional thumbnail / hero image rendered to the left of the
-     *  title block. Used by entity-image-style headers (onboarding
-     *  guides, knowledge-base entries). */
-    image?: {
-        src: string;
-        alt?: string;
-    };
-    /** Back-button shown above the title block. Hidden on mobile (matches
-     *  the existing TitleBlock + DocViewer behavior). */
-    backButton?: {
-        label?: string;
-        onClick: () => void;
-    };
-    /** Right-side actions slot (action buttons / menu / tab selector).
-     *  Composed externally (e.g. `<TitleBlock>` builds `PageActions` + menu
-     *  + selector and passes the result here). */
-    actions?: React.ReactNode;
-    /**
-     * Visual variant.
-     * - `plain` (default): transparent background, no border.
-     * - `card`: card background, border, and padding on mobile only —
-     *   collapses to plain on md+ (legacy `TitleBlock` variant — kept so
-     *   surfaces that depend on the card affordance don't regress).
-     */
-    variant?: 'plain' | 'card';
-    /** When the consumer wraps `<PageHeader>` in its OWN spacing container
-     *  (e.g. `<DevSectionView>`'s `gap-10 flex-col`), the default `mb-l`
-     *  bottom margin doubles up. Pass `noBottomMargin` to opt out. */
-    noBottomMargin?: boolean;
-    /** Same as `noBottomMargin` for the default `pt-l` top padding. Set
-     *  this when PageHeader is nested INSIDE another layout that already
-     *  provides top spacing (e.g. `<DevSectionView>`'s hero, which sits
-     *  inside `<PageLayout>`'s children flow). */
-    noTopPadding?: boolean;
-    className?: string;
-}
-export declare function PageHeader({ title, titleIcon, subtitle, accentDot, image, backButton, actions, variant, noBottomMargin, noTopPadding, className, }: PageHeaderProps): React.JSX.Element;
-export default PageHeader;
-//# sourceMappingURL=page-header.d.ts.map

package/dist/components/layout/page-header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/layout/page-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,eAAe;IAC9B;wEACoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;2EAEuE;IACvE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;2CAEuC;IACvC,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC;yDACqD;IACrD,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IACpD;;kDAE8C;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B;;sEAEkE;IAClE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;kDAG8C;IAC9C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,EACV,OAAO,EACP,OAAiB,EACjB,cAAsB,EACtB,YAAoB,EACpB,SAAS,GACV,EAAE,eAAe,qBA0EjB;AAED,eAAe,UAAU,CAAA"}

package/dist/components/layout/page-with-header.d.ts

@@ -1,67 +0,0 @@
-import React from 'react';
-import { type PageHeaderProps } from './page-header';
-/**
- * `<PageWithHeader>` — the canonical 4-layer unified-chrome wrapper that
- * every public lib/hub page now uses (Knowledge Hub, Roadmap, FAQs,
- * Authors, Blog, Vendors, Case Studies, Interviews, Investor Updates,
- * /webinars-/podcasts-/events, hub admin-but-public pages, …).
- *
- * Renders the same JSX tree every consumer was hand-rolling individually
- * before this helper landed:
- *
- *   PageShell                         ← bg-ods-bg, max-w-[1920px],
- *                                       page-shell-px/pt/pb gutters
- *     PageLayout backButton           ← TitleBlock → PageHeader #1 (back-btn row
- *                                       only, pt-l + mb-l)
- *       div.w-full.flex-col.gap-10    ← matches DevSectionView's hero container
- *         PageHeader title/subtitle   ← PageHeader #2 (noTopPadding +
- *           titleIcon accentDot         noBottomMargin so PageLayout's gap-l owns
- *           noTopPadding                the spacing between #1 and #2)
- *           noBottomMargin
- *         children                    ← page-specific body (search, lists, forms)
- *
- * Why this exists: 15+ pages copy-pasted the EXACT same nesting + the
- * EXACT same `noTopPadding + noBottomMargin + accentDot` triplet on the
- * inner `<PageHeader>`. Forgetting one of those flags collapsed the gap
- * to ~8px (the FAQs-vs-Onboarding-Guides bug). Centralizing the chain
- * here makes the spacing invariant compiler-enforced — consumers can't
- * pick the wrong combination.
- *
- * **Back button is config-driven by default.** Consumers don't have to
- * thread `useRouter()` + `() => router.push('/')` themselves anymore —
- * the helper supplies a sane default (`{ label: 'Back to home', href: '/' }`).
- * Hosts whose `/` lives elsewhere should pass their own `href`. Pass
- * `backButton={false}` to suppress entirely (the lib's own
- * `<DocsHubPage>` does this on the platform-home docs landing).
- */
-export interface PageWithHeaderProps {
-    /** Title — passed straight to inner `<PageHeader>`. */
-    title?: string;
-    /** Inline icon rendered before the title (lucide / SVG node). Wrap with
-     *  `SECTION_HERO_ICON_CLASS` at the call site, or use the lib's
-     *  `<PageHeader>`'s `titleIcon` ReactNode signature directly. */
-    titleIcon?: PageHeaderProps['titleIcon'];
-    /** Subtitle (1-2 lines, auto-clamped to 2 + min-h-[56px]). */
-    subtitle?: string;
-    /** Render yellow accent dot after the title (default true — matches every
-     *  unified surface). Pass `false` to opt out. */
-    accentDot?: boolean;
-    /** Back-button config. Defaults to `{ label: 'Back to home', href: '/' }`.
-     *  Pass `false` to hide entirely (platform-home docs landings). */
-    backButton?: {
-        label?: string;
-        href?: string;
-    } | false;
-    /** Optional image (entity-image-style — onboarding guides etc.). */
-    image?: PageHeaderProps['image'];
-    /** Optional actions slot (right side of header). */
-    actions?: React.ReactNode;
-    /** Page body — search bars, lists, forms, sections. Rendered INSIDE the
-     *  gap-10 flex column so it shares gutters + vertical rhythm with the
-     *  header. */
-    children: React.ReactNode;
-    /** Extra class applied to the gap-10 content wrapper. */
-    contentClassName?: string;
-}
-export declare function PageWithHeader({ title, titleIcon, subtitle, accentDot, backButton, image, actions, children, contentClassName, }: PageWithHeaderProps): React.JSX.Element;
-//# sourceMappingURL=page-with-header.d.ts.map

package/dist/components/layout/page-with-header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-with-header.d.ts","sourceRoot":"","sources":["../../../src/components/layout/page-with-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,mBAAmB;IAClC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;qEAEiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;qDACiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;uEACmE;IACnE,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;IACtD,oEAAoE;IACpE,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IAChC,oDAAoD;IACpD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;kBAEc;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAgB,EAChB,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,gBAAgB,GACjB,EAAE,mBAAmB,qBA8BrB"}

package/src/components/layout/page-header.tsx

@@ -1,182 +0,0 @@
-'use client'
-
-import React from 'react'
-import { cn } from '../../utils/cn'
-import { EntityImage } from '../ui/entity-image'
-import { BackButton } from './back-button'
-
-/**
- * Page-header primitive — the canonical "back-button + title + subtitle
- * + (optional) image / actions" chrome every lib page uses.
- *
- * Owns the SSOT for the page-header DOM/CSS that the rest of the lib
- * was duplicating: pre-`mb` top padding, h1 typography (`text-h2`), h6
- * subtitle (`text-h6`), the gap between the back button and the title
- * block, and the right-side actions slot. Consumers either render this
- * directly (e.g. `<DocViewer>` / `<DocsHubPage>`) or compose it through
- * the `<TitleBlock>` adapter which adds the `PageActions` /
- * `ActionsMenu` / selector wiring on top.
- *
- * Why this exists: knowledge-hub vs releases sat at different vertical
- * rhythms (px-perfect mismatch on title baseline + subtitle offset)
- * because the docs surface hand-rolled its own chrome instead of going
- * through `TitleBlock`. Centralizing the layout here means every
- * embeddable lib page (DocViewer, DevSectionPage, LegalDocumentPage,
- * OnboardingGuideDetailView) renders pixel-identical title/subtitle/
- * back-button typography + spacing — and a future spacing/typography
- * tweak is one file.
- */
-export interface PageHeaderProps {
-  /** Page title (h1). Plain string — ReactNode is intentionally not
-   *  supported here so every consumer renders the same typography. */
-  title?: string
-  /** Optional icon rendered inline before the title text (e.g. the
-   *  rocket emoji on /releases, the docs icon on /knowledge-base).
-   *  Same `flex items-center gap-3` row as `<DevSectionView>`'s hero. */
-  titleIcon?: React.ReactNode
-  /** Page subtitle (description paragraph). */
-  subtitle?: string
-  /**
-   * Render a yellow accent dot (`.`) after the title. Mirrors the
-   * hub's legacy `<AdminPageHeader accentDot>` flag — now lib-wide so
-   * surfaces like `/knowledge-base` keep their existing accent styling
-   * after the migration.
-   */
-  accentDot?: boolean
-  /** Optional thumbnail / hero image rendered to the left of the
-   *  title block. Used by entity-image-style headers (onboarding
-   *  guides, knowledge-base entries). */
-  image?: { src: string; alt?: string }
-  /** Back-button shown above the title block. Hidden on mobile (matches
-   *  the existing TitleBlock + DocViewer behavior). */
-  backButton?: { label?: string; onClick: () => void }
-  /** Right-side actions slot (action buttons / menu / tab selector).
-   *  Composed externally (e.g. `<TitleBlock>` builds `PageActions` + menu
-   *  + selector and passes the result here). */
-  actions?: React.ReactNode
-  /**
-   * Visual variant.
-   * - `plain` (default): transparent background, no border.
-   * - `card`: card background, border, and padding on mobile only —
-   *   collapses to plain on md+ (legacy `TitleBlock` variant — kept so
-   *   surfaces that depend on the card affordance don't regress).
-   */
-  variant?: 'plain' | 'card'
-  /** When the consumer wraps `<PageHeader>` in its OWN spacing container
-   *  (e.g. `<DevSectionView>`'s `gap-10 flex-col`), the default `mb-l`
-   *  bottom margin doubles up. Pass `noBottomMargin` to opt out. */
-  noBottomMargin?: boolean
-  /** Same as `noBottomMargin` for the default `pt-l` top padding. Set
-   *  this when PageHeader is nested INSIDE another layout that already
-   *  provides top spacing (e.g. `<DevSectionView>`'s hero, which sits
-   *  inside `<PageLayout>`'s children flow). */
-  noTopPadding?: boolean
-  className?: string
-}
-
-// Title typography — copied verbatim from <DevSectionView>'s hero h1
-// (`src/components/shared/dev-section/dev-section-view.tsx`). The user-
-// reported "header text not aligned" between /knowledge-base and
-// /releases bottomed out here: DevSectionView rendered text-h1 with
-// tracking-[-1.12px] while this component used text-h2 — visually huge
-// gap. Now both render through the exact same class string. DevSectionView
-// is being refactored in this commit to delegate to <PageHeader> so the
-// shared-component claim is enforced at the code level too.
-const TITLE_CLASS = 'text-h1 tracking-[-1.12px] text-ods-text-primary flex items-center gap-3'
-// Subtitle ALWAYS occupies exactly 2 lines of vertical space.
-//   `min-h-[56px]` (= 2 × 28px leading) reserves the row height so a
-//   single-line subtitle doesn't shrink the header — page-to-page height
-//   stays consistent.
-//   `line-clamp-2` caps long copy at 2 lines + ellipsis so wrapping doesn't
-//   push the search bar down.
-const SUBTITLE_CLASS = "font-['DM_Sans'] font-medium text-[18px] leading-[28px] text-ods-text-secondary max-w-3xl line-clamp-2 min-h-[56px]"
-
-export function PageHeader({
-  title,
-  titleIcon,
-  subtitle,
-  accentDot,
-  image,
-  backButton,
-  actions,
-  variant = 'plain',
-  noBottomMargin = false,
-  noTopPadding = false,
-  className,
-}: PageHeaderProps) {
-  return (
-    <div
-      className={cn(
-        'flex items-end justify-between gap-[var(--spacing-system-m)]',
-        'md:flex-col md:items-start md:justify-start lg:flex-row lg:items-end lg:justify-between',
-        !noTopPadding && 'pt-[var(--spacing-system-l)]',
-        variant === 'card'
-          ? cn(
-              'bg-ods-card border-b border-ods-border',
-              'px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]',
-              'md:bg-transparent md:border-b-0',
-              'md:px-0 md:pb-0',
-              !noBottomMargin && 'md:mb-[var(--spacing-system-l)]',
-            )
-          : !noBottomMargin && 'mb-[var(--spacing-system-l)]',
-        className,
-      )}
-    >
-      <div className="flex flex-col gap-[var(--spacing-system-xs)] flex-1 min-w-0">
-        {backButton && (
-          <BackButton
-            onClick={backButton.onClick}
-            label={backButton.label}
-            className="hidden md:inline-flex"
-          />
-        )}
-        {/* Title + subtitle stack. Matches `<DevSectionView>`'s hero
-         *  exactly: `space-y-4` between h1 and p, `flex items-center
-         *  gap-3` for icon-inline title row, identical class strings.
-         *  Image (entity-image-style) prefixes the title row, NOT a
-         *  separate column with its own vertical rhythm — that's the
-         *  legacy TitleBlock 2-col layout which broke the title-to-
-         *  subtitle gap. */}
-        {(title || subtitle || image || titleIcon) && (
-          <div className="space-y-4">
-            {(title || image || titleIcon) && (
-              <h1 className={TITLE_CLASS}>
-                {image && (
-                  <EntityImage
-                    src={image.src}
-                    alt={image.alt}
-                    fallbackText={image.alt || title}
-                  />
-                )}
-                {titleIcon}
-                {title && (
-                  <span>
-                    {title}
-                    {accentDot && <span className="text-ods-accent">.</span>}
-                  </span>
-                )}
-              </h1>
-            )}
-            {(title || titleIcon || image) && (
-              // Always render the subtitle <p> when the title block exists,
-              // even when `subtitle` is empty — `SUBTITLE_CLASS` reserves
-              // `min-h-[56px]` so headers WITH and WITHOUT subtitles share a
-              // baseline (the JSDoc on SUBTITLE_CLASS claims "ALWAYS occupies
-              // exactly 2 lines"; gating the <p> on truthy `subtitle` broke
-              // that contract — pages without subtitle were ~56px shorter).
-              // Falsy subtitles render an NBSP placeholder so the empty <p>
-              // still takes its reserved height.
-              <p className={SUBTITLE_CLASS}>{subtitle || ' '}</p>
-            )}
-          </div>
-        )}
-      </div>
-
-      {actions && (
-        <div className="flex gap-2 items-center shrink-0">{actions}</div>
-      )}
-    </div>
-  )
-}
-
-export default PageHeader

package/src/components/layout/page-with-header.tsx

@@ -1,110 +0,0 @@
-'use client'
-
-import React from 'react'
-import { useRouter } from '../../embed-shims/next-navigation'
-import { PageShell } from './article-detail-layout'
-import { PageLayout } from './page-layout'
-import { PageHeader, type PageHeaderProps } from './page-header'
-
-/**
- * `<PageWithHeader>` — the canonical 4-layer unified-chrome wrapper that
- * every public lib/hub page now uses (Knowledge Hub, Roadmap, FAQs,
- * Authors, Blog, Vendors, Case Studies, Interviews, Investor Updates,
- * /webinars-/podcasts-/events, hub admin-but-public pages, …).
- *
- * Renders the same JSX tree every consumer was hand-rolling individually
- * before this helper landed:
- *
- *   PageShell                         ← bg-ods-bg, max-w-[1920px],
- *                                       page-shell-px/pt/pb gutters
- *     PageLayout backButton           ← TitleBlock → PageHeader #1 (back-btn row
- *                                       only, pt-l + mb-l)
- *       div.w-full.flex-col.gap-10    ← matches DevSectionView's hero container
- *         PageHeader title/subtitle   ← PageHeader #2 (noTopPadding +
- *           titleIcon accentDot         noBottomMargin so PageLayout's gap-l owns
- *           noTopPadding                the spacing between #1 and #2)
- *           noBottomMargin
- *         children                    ← page-specific body (search, lists, forms)
- *
- * Why this exists: 15+ pages copy-pasted the EXACT same nesting + the
- * EXACT same `noTopPadding + noBottomMargin + accentDot` triplet on the
- * inner `<PageHeader>`. Forgetting one of those flags collapsed the gap
- * to ~8px (the FAQs-vs-Onboarding-Guides bug). Centralizing the chain
- * here makes the spacing invariant compiler-enforced — consumers can't
- * pick the wrong combination.
- *
- * **Back button is config-driven by default.** Consumers don't have to
- * thread `useRouter()` + `() => router.push('/')` themselves anymore —
- * the helper supplies a sane default (`{ label: 'Back to home', href: '/' }`).
- * Hosts whose `/` lives elsewhere should pass their own `href`. Pass
- * `backButton={false}` to suppress entirely (the lib's own
- * `<DocsHubPage>` does this on the platform-home docs landing).
- */
-export interface PageWithHeaderProps {
-  /** Title — passed straight to inner `<PageHeader>`. */
-  title?: string
-  /** Inline icon rendered before the title (lucide / SVG node). Wrap with
-   *  `SECTION_HERO_ICON_CLASS` at the call site, or use the lib's
-   *  `<PageHeader>`'s `titleIcon` ReactNode signature directly. */
-  titleIcon?: PageHeaderProps['titleIcon']
-  /** Subtitle (1-2 lines, auto-clamped to 2 + min-h-[56px]). */
-  subtitle?: string
-  /** Render yellow accent dot after the title (default true — matches every
-   *  unified surface). Pass `false` to opt out. */
-  accentDot?: boolean
-  /** Back-button config. Defaults to `{ label: 'Back to home', href: '/' }`.
-   *  Pass `false` to hide entirely (platform-home docs landings). */
-  backButton?: { label?: string; href?: string } | false
-  /** Optional image (entity-image-style — onboarding guides etc.). */
-  image?: PageHeaderProps['image']
-  /** Optional actions slot (right side of header). */
-  actions?: React.ReactNode
-  /** Page body — search bars, lists, forms, sections. Rendered INSIDE the
-   *  gap-10 flex column so it shares gutters + vertical rhythm with the
-   *  header. */
-  children: React.ReactNode
-  /** Extra class applied to the gap-10 content wrapper. */
-  contentClassName?: string
-}
-
-export function PageWithHeader({
-  title,
-  titleIcon,
-  subtitle,
-  accentDot = true,
-  backButton,
-  image,
-  actions,
-  children,
-  contentClassName,
-}: PageWithHeaderProps) {
-  const router = useRouter()
-
-  const backCfg =
-    backButton === false
-      ? undefined
-      : {
-          label: backButton?.label ?? 'Back to home',
-          onClick: () => router.push(backButton?.href ?? '/'),
-        }
-
-  return (
-    <PageShell>
-      <PageLayout backButton={backCfg}>
-        <div className={`w-full flex flex-col gap-10${contentClassName ? ` ${contentClassName}` : ''}`}>
-          <PageHeader
-            title={title}
-            titleIcon={titleIcon}
-            subtitle={subtitle}
-            accentDot={accentDot}
-            image={image}
-            actions={actions}
-            noTopPadding
-            noBottomMargin
-          />
-          {children}
-        </div>
-      </PageLayout>
-    </PageShell>
-  )
-}