@flamingo-stack/openframe-frontend-core 0.0.274 → 0.0.275

package/dist/{chunk-BSOHVQ7X.js → chunk-GHWOQUB4.js}

@@ -4,16 +4,13 @@ import {
   useDebounce,
   useNearViewport,
   useOgPlaceholder
-} from "./chunk-ZXZJSTNV.js";
+} from "./chunk-RGALV4UX.js";
 import {
   useChatRuntime
-} from "./chunk-4YKGXZ7W.js";
+} from "./chunk-7AH75KFQ.js";
 import {
   next_image_default
 } from "./chunk-LXC6P2EO.js";
-import {
-  SECTION_HEADING_CLASS
-} from "./chunk-OO4ZGDRO.js";
 import {
   Button,
   DropdownMenu,
@@ -2328,8 +2325,29 @@ function YouTubeFacadeInner({
   ) });
 }
 
-// src/components/features/video-ratio-tabs.tsx
+// src/components/layout/page-heading.tsx
 import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var PAGE_HEADING_CLASS = "text-h1 text-ods-text-primary";
+var SECTION_HEADING_CLASS = "text-h2 text-ods-text-primary";
+var DESCRIPTION_CLASS = "mt-6 max-w-[640px] font-['DM_Sans'] text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary";
+function PageHeading({
+  children,
+  as: Tag2 = "h1",
+  description,
+  className,
+  descriptionClassName
+}) {
+  const headingClass = className ? `${PAGE_HEADING_CLASS} ${className}` : PAGE_HEADING_CLASS;
+  const descClass = descriptionClassName ? `${DESCRIPTION_CLASS} ${descriptionClassName}` : DESCRIPTION_CLASS;
+  const hasDescription = description != null && description !== "" && typeof description !== "boolean";
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsx12(Tag2, { className: headingClass, children }),
+    hasDescription && /* @__PURE__ */ jsx12("p", { className: descClass, children: description })
+  ] });
+}
+
+// src/components/features/video-ratio-tabs.tsx
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var TAB_TRIGGER_CLASS = "rounded-none border-b-2 border-transparent data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2 text-sm text-ods-text-secondary data-[state=active]:text-ods-text-primary";
 var RATIO_GRID_CLASS = {
   portrait: "grid grid-cols-2 md:grid-cols-3 gap-4",
@@ -2354,17 +2372,17 @@ function RatioTabs({
   const activeTabs = RATIO_TAB_CONFIG.filter((t) => groups[t.key].count > 0);
   if (activeTabs.length <= 1) {
     const active = activeTabs[0];
-    return active ? /* @__PURE__ */ jsx12(Fragment2, { children: groups[active.key].render() }) : null;
+    return active ? /* @__PURE__ */ jsx13(Fragment3, { children: groups[active.key].render() }) : null;
   }
   const firstTab = defaultTab && groups[defaultTab].count > 0 ? defaultTab : activeTabs[0].key;
-  return /* @__PURE__ */ jsxs9(Tabs, { defaultValue: firstTab, className: `w-full ${className}`, children: [
-    /* @__PURE__ */ jsx12(TabsList, { className: "inline-flex justify-start rounded-none bg-transparent h-auto p-0 gap-0 mb-2", children: activeTabs.map((t) => /* @__PURE__ */ jsxs9(TabsTrigger, { value: t.key, className: TAB_TRIGGER_CLASS, children: [
+  return /* @__PURE__ */ jsxs10(Tabs, { defaultValue: firstTab, className: `w-full ${className}`, children: [
+    /* @__PURE__ */ jsx13(TabsList, { className: "inline-flex justify-start rounded-none bg-transparent h-auto p-0 gap-0 mb-2", children: activeTabs.map((t) => /* @__PURE__ */ jsxs10(TabsTrigger, { value: t.key, className: TAB_TRIGGER_CLASS, children: [
       t.label,
       " (",
       groups[t.key].count,
       ")"
     ] }, t.key)) }),
-    activeTabs.map((t) => /* @__PURE__ */ jsx12(
+    activeTabs.map((t) => /* @__PURE__ */ jsx13(
       TabsContent,
       {
         value: t.key,
@@ -2407,7 +2425,7 @@ function groupByAspectRatio(items, getAspectRatio) {
 
 // src/components/features/video-bites-display.tsx
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var RATIO_TO_CSS_ASPECT = {
   portrait: "9 / 16",
   square: "1 / 1",
@@ -2415,7 +2433,7 @@ var RATIO_TO_CSS_ASPECT = {
 };
 function LazyBite({ ratio, children }) {
   const { ref, isNear } = useNearViewport("500px");
-  return /* @__PURE__ */ jsx13("div", { ref, style: { aspectRatio: RATIO_TO_CSS_ASPECT[ratio] }, children: isNear ? children : /* @__PURE__ */ jsx13("div", { className: "w-full h-full bg-ods-card rounded-md" }) });
+  return /* @__PURE__ */ jsx14("div", { ref, style: { aspectRatio: RATIO_TO_CSS_ASPECT[ratio] }, children: isNear ? children : /* @__PURE__ */ jsx14("div", { className: "w-full h-full bg-ods-card rounded-md" }) });
 }
 function VideoBitesDisplay({
   bites,
@@ -2438,27 +2456,27 @@ function VideoBitesDisplay({
   }, [bites, filterPublished]);
   const totalCount = grouped.portrait.length + grouped.square.length + grouped.landscape.length;
   if (totalCount === 0) return null;
-  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-6 w-full min-w-0", children: [
-    showTitle && /* @__PURE__ */ jsx13("h2", { className: `${SECTION_HEADING_CLASS} break-words`, children: title }),
-    grouped.hasMultiple ? /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-6 w-full min-w-0", children: [
+    showTitle && /* @__PURE__ */ jsx14("h2", { className: `${SECTION_HEADING_CLASS} break-words`, children: title }),
+    grouped.hasMultiple ? /* @__PURE__ */ jsx14(
       RatioTabs,
       {
         groups: {
           portrait: {
             count: grouped.portrait.length,
-            render: () => /* @__PURE__ */ jsx13(BiteGrid, { bites: grouped.portrait, ratio: "portrait" })
+            render: () => /* @__PURE__ */ jsx14(BiteGrid, { bites: grouped.portrait, ratio: "portrait" })
           },
           square: {
             count: grouped.square.length,
-            render: () => /* @__PURE__ */ jsx13(BiteGrid, { bites: grouped.square, ratio: "square" })
+            render: () => /* @__PURE__ */ jsx14(BiteGrid, { bites: grouped.square, ratio: "square" })
           },
           landscape: {
             count: grouped.landscape.length,
-            render: () => /* @__PURE__ */ jsx13(BiteGrid, { bites: grouped.landscape, ratio: "landscape" })
+            render: () => /* @__PURE__ */ jsx14(BiteGrid, { bites: grouped.landscape, ratio: "landscape" })
           }
         }
       }
-    ) : /* @__PURE__ */ jsx13(
+    ) : /* @__PURE__ */ jsx14(
       BiteGrid,
       {
         bites: grouped.portrait.length > 0 ? grouped.portrait : grouped.square.length > 0 ? grouped.square : grouped.landscape,
@@ -2468,17 +2486,17 @@ function VideoBitesDisplay({
   ] });
 }
 function BiteGrid({ bites, ratio }) {
-  return /* @__PURE__ */ jsx13("div", { className: RATIO_DISPLAY_GRID_CLASS[ratio], children: bites.map((bite, index) => /* @__PURE__ */ jsx13(LazyBite, { ratio, children: /* @__PURE__ */ jsx13(VideoBiteCard, { url: bite.url, title: bite.title, thumbnailUrl: bite.thumbnail_url }) }, bite.url || index)) });
+  return /* @__PURE__ */ jsx14("div", { className: RATIO_DISPLAY_GRID_CLASS[ratio], children: bites.map((bite, index) => /* @__PURE__ */ jsx14(LazyBite, { ratio, children: /* @__PURE__ */ jsx14(VideoBiteCard, { url: bite.url, title: bite.title, thumbnailUrl: bite.thumbnail_url }) }, bite.url || index)) });
 }
 function VideoBiteCard({ url, title, thumbnailUrl }) {
-  return /* @__PURE__ */ jsxs10(Card, { className: "overflow-hidden border border-ods-border bg-ods-card hover:border-ods-accent transition-colors flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx13("div", { className: "relative flex-1 min-h-0", children: /* @__PURE__ */ jsx13(Video, { url, poster: thumbnailUrl || void 0, layout: "fill" }) }),
-    title && /* @__PURE__ */ jsx13("div", { className: "p-4", children: /* @__PURE__ */ jsx13("p", { className: "text-h4 text-ods-text-primary line-clamp-2", title, children: title }) })
+  return /* @__PURE__ */ jsxs11(Card, { className: "overflow-hidden border border-ods-border bg-ods-card hover:border-ods-accent transition-colors flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx14("div", { className: "relative flex-1 min-h-0", children: /* @__PURE__ */ jsx14(Video, { url, poster: thumbnailUrl || void 0, layout: "fill" }) }),
+    title && /* @__PURE__ */ jsx14("div", { className: "p-4", children: /* @__PURE__ */ jsx14("p", { className: "text-h4 text-ods-text-primary line-clamp-2", title, children: title }) })
   ] });
 }
 
 // src/components/features/entity-video-section.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function EntityVideoSection({
   mainVideoUrl,
   youtubeUrl,
@@ -2503,10 +2521,10 @@ function EntityVideoSection({
   }
   const fullVideoUrl = youtubeUrl || mainVideoUrl || null;
   const fullVideoKind = youtubeUrl ? "youtube" : "auto";
-  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    hasVideo && (hasFullVideo && hasHighlight ? /* @__PURE__ */ jsxs11(Tabs, { defaultValue: "full-video", className: "w-full", children: [
-      /* @__PURE__ */ jsxs11(TabsList, { className: "inline-flex justify-start rounded-none bg-transparent h-auto p-0 gap-0", children: [
-        /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    hasVideo && (hasFullVideo && hasHighlight ? /* @__PURE__ */ jsxs12(Tabs, { defaultValue: "full-video", className: "w-full", children: [
+      /* @__PURE__ */ jsxs12(TabsList, { className: "inline-flex justify-start rounded-none bg-transparent h-auto p-0 gap-0", children: [
+        /* @__PURE__ */ jsx15(
           TabsTrigger,
           {
             value: "full-video",
@@ -2514,7 +2532,7 @@ function EntityVideoSection({
             children: "Full Video"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           TabsTrigger,
           {
             value: "highlights",
@@ -2523,7 +2541,7 @@ function EntityVideoSection({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx14(TabsContent, { value: "full-video", className: "mt-4", children: /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(TabsContent, { value: "full-video", className: "mt-4", children: /* @__PURE__ */ jsx15(
         Video,
         {
           kind: fullVideoKind,
@@ -2536,7 +2554,7 @@ function EntityVideoSection({
           priority
         }
       ) }),
-      /* @__PURE__ */ jsx14(TabsContent, { value: "highlights", className: "mt-4", children: /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(TabsContent, { value: "highlights", className: "mt-4", children: /* @__PURE__ */ jsx15(
         Video,
         {
           url: highlightVideoUrl,
@@ -2544,7 +2562,7 @@ function EntityVideoSection({
           layout: "centered"
         }
       ) })
-    ] }) : hasFullVideo ? /* @__PURE__ */ jsx14(
+    ] }) : hasFullVideo ? /* @__PURE__ */ jsx15(
       Video,
       {
         kind: fullVideoKind,
@@ -2556,7 +2574,7 @@ function EntityVideoSection({
         layout: "centered",
         priority
       }
-    ) : /* @__PURE__ */ jsx14(
+    ) : /* @__PURE__ */ jsx15(
       Video,
       {
         url: highlightVideoUrl,
@@ -2565,11 +2583,11 @@ function EntityVideoSection({
         priority
       }
     )),
-    videoSummary && MarkdownRenderer && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-6 w-full min-w-0", children: [
-      /* @__PURE__ */ jsx14("h2", { className: `${SECTION_HEADING_CLASS} break-words`, children: "Summary" }),
-      /* @__PURE__ */ jsx14("div", { className: "text-h4 text-ods-text-primary break-words overflow-hidden", children: /* @__PURE__ */ jsx14(MarkdownRenderer, { content: videoSummary }) })
+    videoSummary && MarkdownRenderer && /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-6 w-full min-w-0", children: [
+      /* @__PURE__ */ jsx15("h2", { className: `${SECTION_HEADING_CLASS} break-words`, children: "Summary" }),
+      /* @__PURE__ */ jsx15("div", { className: "text-h4 text-ods-text-primary break-words overflow-hidden", children: /* @__PURE__ */ jsx15(MarkdownRenderer, { content: videoSummary }) })
     ] }),
-    videoBites && videoBites.length > 0 && /* @__PURE__ */ jsx14(
+    videoBites && videoBites.length > 0 && /* @__PURE__ */ jsx15(
       VideoBitesDisplay,
       {
         bites: videoBites,
@@ -2654,7 +2672,7 @@ function useEntityCardPlaceholder({
 }
 
 // src/components/chat/entity-cards/onboarding-guide-card.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function stripMarkdownPreview(text) {
   return text.replace(/```[\s\S]*?```/g, " ").replace(/^#{1,6}\s+/gm, "").replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/[*_~`>]/g, "").replace(/^\s*[-+]\s+/gm, "").replace(/-{3,}/g, " ").replace(/\s+/g, " ").trim().replace(/^([\s\S]{240})[\s\S]+$/, "$1\u2026");
 }
@@ -2668,64 +2686,64 @@ var HORIZONTAL_SIZE_TOKENS = {
 };
 function OnboardingGuideCardSkeleton({ size = "default" }) {
   if (size === "catalog") {
-    return /* @__PURE__ */ jsxs12("div", { className: "bg-ods-system-greys-black border border-ods-border rounded-lg overflow-hidden flex flex-col p-6 gap-4 animate-pulse", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col md:flex-row gap-4 md:gap-6", children: [
-        /* @__PURE__ */ jsx15("div", { className: "w-full md:w-[256px] aspect-[1200/630] bg-ods-border rounded-lg flex-shrink-0" }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0 flex flex-col", children: [
-          /* @__PURE__ */ jsxs12("div", { className: "min-h-[60px] md:min-h-[72px] flex flex-col gap-1.5 justify-start mb-3", children: [
-            /* @__PURE__ */ jsx15("div", { className: "h-[25px] md:h-[30px] w-3/4 bg-ods-border rounded" }),
-            /* @__PURE__ */ jsx15("div", { className: "h-[25px] md:h-[30px] w-1/2 bg-ods-border rounded" })
+    return /* @__PURE__ */ jsxs13("div", { className: "bg-ods-system-greys-black border border-ods-border rounded-lg overflow-hidden flex flex-col p-6 gap-4 animate-pulse", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex flex-col md:flex-row gap-4 md:gap-6", children: [
+        /* @__PURE__ */ jsx16("div", { className: "w-full md:w-[256px] aspect-[1200/630] bg-ods-border rounded-lg flex-shrink-0" }),
+        /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0 flex flex-col", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "min-h-[60px] md:min-h-[72px] flex flex-col gap-1.5 justify-start mb-3", children: [
+            /* @__PURE__ */ jsx16("div", { className: "h-[25px] md:h-[30px] w-3/4 bg-ods-border rounded" }),
+            /* @__PURE__ */ jsx16("div", { className: "h-[25px] md:h-[30px] w-1/2 bg-ods-border rounded" })
           ] }),
-          /* @__PURE__ */ jsxs12("div", { className: "min-h-[46px] md:min-h-[52px] flex flex-col gap-2 justify-start", children: [
-            /* @__PURE__ */ jsx15("div", { className: "h-3 w-full bg-ods-border/70 rounded" }),
-            /* @__PURE__ */ jsx15("div", { className: "h-3 w-5/6 bg-ods-border/70 rounded" })
+          /* @__PURE__ */ jsxs13("div", { className: "min-h-[46px] md:min-h-[52px] flex flex-col gap-2 justify-start", children: [
+            /* @__PURE__ */ jsx16("div", { className: "h-3 w-full bg-ods-border/70 rounded" }),
+            /* @__PURE__ */ jsx16("div", { className: "h-3 w-5/6 bg-ods-border/70 rounded" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "grid grid-cols-1 md:grid-cols-3 border border-ods-border rounded-md overflow-hidden w-full", children: [
-        [0, 1].map((i) => /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-1 md:grid-cols-3 border border-ods-border rounded-md overflow-hidden w-full", children: [
+        [0, 1].map((i) => /* @__PURE__ */ jsx16(
           "div",
           {
             className: "bg-ods-card p-4 flex flex-col gap-3 border-b md:border-b-0 md:border-r border-ods-border",
-            children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsx15("div", { className: "h-6 w-32 bg-ods-bg rounded" }),
-              /* @__PURE__ */ jsx15("div", { className: "h-3 w-20 bg-ods-bg/60 rounded" })
+            children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx16("div", { className: "h-6 w-32 bg-ods-bg rounded" }),
+              /* @__PURE__ */ jsx16("div", { className: "h-3 w-20 bg-ods-bg/60 rounded" })
             ] })
           },
           `cell-${i}`
         )),
-        /* @__PURE__ */ jsxs12("div", { className: "bg-ods-card p-4 flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx15("div", { className: "h-10 w-10 rounded-full bg-ods-bg shrink-0" }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx15("div", { className: "h-4 w-3/4 bg-ods-bg rounded" }),
-            /* @__PURE__ */ jsx15("div", { className: "h-3 w-1/2 bg-ods-bg/60 rounded" })
+        /* @__PURE__ */ jsxs13("div", { className: "bg-ods-card p-4 flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx16("div", { className: "h-10 w-10 rounded-full bg-ods-bg shrink-0" }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx16("div", { className: "h-4 w-3/4 bg-ods-bg rounded" }),
+            /* @__PURE__ */ jsx16("div", { className: "h-3 w-1/2 bg-ods-bg/60 rounded" })
           ] })
         ] })
       ] })
     ] });
   }
   if (size === "sm") {
-    return /* @__PURE__ */ jsxs12("span", { className: COMPACT_CARD_SKELETON_OUTER, children: [
-      /* @__PURE__ */ jsx15("span", { className: COMPACT_CARD_SKELETON_IMAGE_SLOT }),
-      /* @__PURE__ */ jsxs12("span", { className: COMPACT_CARD_TEXT_COL, children: [
-        /* @__PURE__ */ jsx15("span", { className: COMPACT_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx15("span", { className: "h-3.5 w-3/5 rounded bg-ods-bg" }) }),
-        /* @__PURE__ */ jsx15("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx15("span", { className: "h-3 w-2/5 rounded bg-ods-bg/70" }) }),
-        /* @__PURE__ */ jsx15("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx15("span", { className: "h-3 w-11/12 rounded bg-ods-bg/40" }) })
+    return /* @__PURE__ */ jsxs13("span", { className: COMPACT_CARD_SKELETON_OUTER, children: [
+      /* @__PURE__ */ jsx16("span", { className: COMPACT_CARD_SKELETON_IMAGE_SLOT }),
+      /* @__PURE__ */ jsxs13("span", { className: COMPACT_CARD_TEXT_COL, children: [
+        /* @__PURE__ */ jsx16("span", { className: COMPACT_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx16("span", { className: "h-3.5 w-3/5 rounded bg-ods-bg" }) }),
+        /* @__PURE__ */ jsx16("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx16("span", { className: "h-3 w-2/5 rounded bg-ods-bg/70" }) }),
+        /* @__PURE__ */ jsx16("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx16("span", { className: "h-3 w-11/12 rounded bg-ods-bg/40" }) })
       ] }),
-      /* @__PURE__ */ jsx15("span", { className: "flex shrink-0 items-center self-start h-5", children: /* @__PURE__ */ jsx15("span", { className: "h-3.5 w-3.5 rounded bg-ods-bg" }) })
+      /* @__PURE__ */ jsx16("span", { className: "flex shrink-0 items-center self-start h-5", children: /* @__PURE__ */ jsx16("span", { className: "h-3.5 w-3.5 rounded bg-ods-bg" }) })
     ] });
   }
   const t = HORIZONTAL_SIZE_TOKENS.default;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "span",
     {
       className: `flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding} animate-pulse`,
       children: [
-        /* @__PURE__ */ jsx15("span", { className: `shrink-0 inline-flex items-center justify-center rounded-full bg-ods-bg ${t.step}` }),
-        /* @__PURE__ */ jsxs12("span", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx15("span", { className: "block h-4 w-2/3 rounded bg-ods-bg" }),
-          /* @__PURE__ */ jsx15("span", { className: "block h-3 w-1/3 rounded bg-ods-bg/70" }),
-          /* @__PURE__ */ jsx15("span", { className: "block h-3 w-full rounded bg-ods-bg/40" })
+        /* @__PURE__ */ jsx16("span", { className: `shrink-0 inline-flex items-center justify-center rounded-full bg-ods-bg ${t.step}` }),
+        /* @__PURE__ */ jsxs13("span", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx16("span", { className: "block h-4 w-2/3 rounded bg-ods-bg" }),
+          /* @__PURE__ */ jsx16("span", { className: "block h-3 w-1/3 rounded bg-ods-bg/70" }),
+          /* @__PURE__ */ jsx16("span", { className: "block h-3 w-full rounded bg-ods-bg/40" })
         ] })
       ]
     }
@@ -2757,7 +2775,7 @@ function OnboardingGuideCard({
     const hasVideoCover = !!(guide.main_video_thumbnail || guide.highlight_video_thumbnail);
     const stepLabel = typeof guide.step_order === "number" ? String(guide.step_order).padStart(2, "0") : "\u2014";
     const durationLabel = typeof guide.highlight_video_duration_ms === "number" && guide.highlight_video_duration_ms > 0 ? formatDurationMMSS(Math.floor(guide.highlight_video_duration_ms / 1e3)) : "";
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       next_link_default,
       {
         href,
@@ -2773,10 +2791,10 @@ function OnboardingGuideCard({
           className
         ),
         "aria-label": `Open ${guide.title}`,
-        children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col p-6 gap-4", children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex flex-col md:flex-row gap-4 md:gap-6", children: [
-            /* @__PURE__ */ jsx15("div", { className: "w-full md:w-[256px] flex-shrink-0", children: /* @__PURE__ */ jsxs12("div", { className: "relative rounded-lg overflow-hidden w-full aspect-[1200/630] bg-ods-bg", children: [
-              coverImage ? /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col p-6 gap-4", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "flex flex-col md:flex-row gap-4 md:gap-6", children: [
+            /* @__PURE__ */ jsx16("div", { className: "w-full md:w-[256px] flex-shrink-0", children: /* @__PURE__ */ jsxs13("div", { className: "relative rounded-lg overflow-hidden w-full aspect-[1200/630] bg-ods-bg", children: [
+              coverImage ? /* @__PURE__ */ jsx16(
                 next_image_default,
                 {
                   src: coverImage,
@@ -2786,7 +2804,7 @@ function OnboardingGuideCard({
                   className: "object-cover",
                   unoptimized: true
                 }
-              ) : /* @__PURE__ */ jsx15(
+              ) : /* @__PURE__ */ jsx16(
                 BlogImagePlaceholder,
                 {
                   title: guide.title,
@@ -2794,18 +2812,18 @@ function OnboardingGuideCard({
                   className: "absolute inset-0"
                 }
               ),
-              hasVideoCover && coverImage && /* @__PURE__ */ jsx15("span", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx15(Play, { className: "w-10 h-10 text-white", fill: "white" }) }),
-              durationLabel && /* @__PURE__ */ jsxs12("span", { className: "absolute bottom-2 right-2 inline-flex items-center gap-1 px-2 py-1 rounded bg-black/60 text-white text-xs font-medium font-mono", children: [
-                /* @__PURE__ */ jsx15(Clock, { className: "w-3 h-3" }),
+              hasVideoCover && coverImage && /* @__PURE__ */ jsx16("span", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx16(Play, { className: "w-10 h-10 text-white", fill: "white" }) }),
+              durationLabel && /* @__PURE__ */ jsxs13("span", { className: "absolute bottom-2 right-2 inline-flex items-center gap-1 px-2 py-1 rounded bg-black/60 text-white text-xs font-medium font-mono", children: [
+                /* @__PURE__ */ jsx16(Clock, { className: "w-3 h-3" }),
                 durationLabel
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0 flex flex-col", children: [
-              /* @__PURE__ */ jsx15("div", { className: "min-h-[60px] md:min-h-[72px] flex items-start mb-3", children: /* @__PURE__ */ jsx15("h3", { className: "font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight line-clamp-2", children: guide.title }) }),
-              /* @__PURE__ */ jsx15("div", { className: "min-h-[46px] md:min-h-[52px]", children: /* @__PURE__ */ jsx15("p", { className: "font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed line-clamp-2", children: stripMarkdownPreview(guide.video_summary || guide.content || "") }) })
+            /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0 flex flex-col", children: [
+              /* @__PURE__ */ jsx16("div", { className: "min-h-[60px] md:min-h-[72px] flex items-start mb-3", children: /* @__PURE__ */ jsx16("h3", { className: "font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight line-clamp-2", children: guide.title }) }),
+              /* @__PURE__ */ jsx16("div", { className: "min-h-[46px] md:min-h-[52px]", children: /* @__PURE__ */ jsx16("p", { className: "font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed line-clamp-2", children: stripMarkdownPreview(guide.video_summary || guide.content || "") }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             EntityAuthorCard,
             {
               author: guide.author,
@@ -2835,9 +2853,9 @@ function OnboardingGuideCard({
       guide.section,
       author
     ].filter((s) => typeof s === "string" && s.length > 0);
-    return /* @__PURE__ */ jsxs12(next_link_default, { href, target, rel, prefetch: false, className: cn(COMPACT_CARD_OUTER, className), children: [
-      /* @__PURE__ */ jsxs12("span", { className: COMPACT_CARD_IMAGE_SLOT, children: [
-        compactCover ? /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsxs13(next_link_default, { href, target, rel, prefetch: false, className: cn(COMPACT_CARD_OUTER, className), children: [
+      /* @__PURE__ */ jsxs13("span", { className: COMPACT_CARD_IMAGE_SLOT, children: [
+        compactCover ? /* @__PURE__ */ jsx16(
           next_image_default,
           {
             src: compactCover,
@@ -2847,20 +2865,20 @@ function OnboardingGuideCard({
             className: "object-contain",
             unoptimized: true
           }
-        ) : /* @__PURE__ */ jsx15("span", { className: "flex h-full w-full items-center justify-center text-ods-accent", children: /* @__PURE__ */ jsx15(GraduationCap, { className: "w-4 h-4" }) }),
-        hasVideoCover && compactCover && /* @__PURE__ */ jsx15("span", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx15(Play, { className: "h-4 w-4 text-white", fill: "white" }) })
+        ) : /* @__PURE__ */ jsx16("span", { className: "flex h-full w-full items-center justify-center text-ods-accent", children: /* @__PURE__ */ jsx16(GraduationCap, { className: "w-4 h-4" }) }),
+        hasVideoCover && compactCover && /* @__PURE__ */ jsx16("span", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx16(Play, { className: "h-4 w-4 text-white", fill: "white" }) })
       ] }),
-      /* @__PURE__ */ jsxs12("span", { className: COMPACT_CARD_TEXT_COL, children: [
-        /* @__PURE__ */ jsx15("span", { className: COMPACT_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx15("span", { className: cn(COMPACT_CARD_TITLE, "font-['Azeret_Mono']"), children: guide.title }) }),
-        /* @__PURE__ */ jsx15("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx15("span", { className: "truncate text-[11px] leading-4 text-[var(--color-accent-primary)]", children: subtitleParts.join(" \xB7 ") }) }),
-        /* @__PURE__ */ jsx15("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx15("span", { className: COMPACT_CARD_SUMMARY, children: summary2 || COMPACT_CARD_ROW_FILLER }) })
+      /* @__PURE__ */ jsxs13("span", { className: COMPACT_CARD_TEXT_COL, children: [
+        /* @__PURE__ */ jsx16("span", { className: COMPACT_CARD_TITLE_ROW, children: /* @__PURE__ */ jsx16("span", { className: cn(COMPACT_CARD_TITLE, "font-['Azeret_Mono']"), children: guide.title }) }),
+        /* @__PURE__ */ jsx16("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx16("span", { className: "truncate text-[11px] leading-4 text-[var(--color-accent-primary)]", children: subtitleParts.join(" \xB7 ") }) }),
+        /* @__PURE__ */ jsx16("span", { className: COMPACT_CARD_META_ROW_BOX, children: /* @__PURE__ */ jsx16("span", { className: COMPACT_CARD_SUMMARY, children: summary2 || COMPACT_CARD_ROW_FILLER }) })
       ] }),
-      /* @__PURE__ */ jsx15("span", { className: "flex shrink-0 items-center self-start h-5 text-ods-text-secondary", children: /* @__PURE__ */ jsx15(ExternalLink, { className: "w-3.5 h-3.5" }) })
+      /* @__PURE__ */ jsx16("span", { className: "flex shrink-0 items-center self-start h-5 text-ods-text-secondary", children: /* @__PURE__ */ jsx16(ExternalLink, { className: "w-3.5 h-3.5" }) })
     ] });
   }
   const t = HORIZONTAL_SIZE_TOKENS.default;
   const summary = stripMarkdownPreview(guide.video_summary || guide.content || "");
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     next_link_default,
     {
       href,
@@ -2872,7 +2890,7 @@ function OnboardingGuideCard({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "span",
           {
             className: `shrink-0 inline-flex items-center justify-center rounded-full bg-ods-accent/10 text-ods-accent font-semibold ${t.step}`,
@@ -2880,13 +2898,13 @@ function OnboardingGuideCard({
             children: guide.step_order
           }
         ),
-        /* @__PURE__ */ jsxs12("span", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx15("span", { className: `block ${t.title} text-ods-text-primary truncate`, children: guide.title }),
-          /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 font-['DM_Sans'] text-[12px] leading-[16px] text-ods-text-secondary", children: [
-            /* @__PURE__ */ jsx15(GraduationCap, { className: "h-3 w-3 shrink-0" }),
-            /* @__PURE__ */ jsx15("span", { className: "truncate", children: guide.section })
+        /* @__PURE__ */ jsxs13("span", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx16("span", { className: `block ${t.title} text-ods-text-primary truncate`, children: guide.title }),
+          /* @__PURE__ */ jsxs13("span", { className: "inline-flex items-center gap-1 font-['DM_Sans'] text-[12px] leading-[16px] text-ods-text-secondary", children: [
+            /* @__PURE__ */ jsx16(GraduationCap, { className: "h-3 w-3 shrink-0" }),
+            /* @__PURE__ */ jsx16("span", { className: "truncate", children: guide.section })
           ] }),
-          summary && /* @__PURE__ */ jsx15("span", { className: `font-['DM_Sans'] text-[14px] leading-[20px] text-ods-text-secondary ${t.summaryClamp}`, children: summary })
+          summary && /* @__PURE__ */ jsx16("span", { className: `font-['DM_Sans'] text-[14px] leading-[20px] text-ods-text-secondary ${t.summaryClamp}`, children: summary })
         ] })
       ]
     }
@@ -3305,7 +3323,7 @@ function resolveSourceIcon(input, ctx = {}) {
 init_cn();
 import React11 from "react";
 init_button();
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function actionKey(action, idx) {
   return `${action.label ?? action.ariaLabel ?? "action"}-${idx}`;
 }
@@ -3337,7 +3355,7 @@ function actionToMenuItems(action, idx) {
 }
 function renderActionButton(action, opts = {}) {
   if (action.iconAction) {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       SplitButton,
       {
         variant: action.variant ?? void 0,
@@ -3355,18 +3373,18 @@ function renderActionButton(action, opts = {}) {
     );
   }
   if (action.submenu && action.submenu.length > 0) {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       ActionsMenuDropdown,
       {
         groups: [{ items: action.submenu }],
-        customTrigger: /* @__PURE__ */ jsx16(
+        customTrigger: /* @__PURE__ */ jsx17(
           Button,
           {
             variant: "outline",
             disabled: action.disabled,
             loading: action.loading,
             leftIcon: action.icon,
-            splitIcon: /* @__PURE__ */ jsx16(Chevron02DownIcon, { className: "h-4 w-4" }),
+            splitIcon: /* @__PURE__ */ jsx17(Chevron02DownIcon, { className: "h-4 w-4" }),
             className: opts.fullWidth ? "flex-1" : void 0,
             children: action.label
           }
@@ -3376,8 +3394,8 @@ function renderActionButton(action, opts = {}) {
   }
   const isIconOnly = opts.iconOnly || !action.label || action.iconOnlyOnDesktop;
   if (isIconOnly) {
-    const iconNode = action.iconOnlyOnDesktop ? /* @__PURE__ */ jsx16("span", { className: "inline-flex [&_svg]:!text-ods-text-primary", children: action.icon }) : action.icon;
-    return /* @__PURE__ */ jsx16(
+    const iconNode = action.iconOnlyOnDesktop ? /* @__PURE__ */ jsx17("span", { className: "inline-flex [&_svg]:!text-ods-text-primary", children: action.icon }) : action.icon;
+    return /* @__PURE__ */ jsx17(
       Button,
       {
         variant: action.variant,
@@ -3393,7 +3411,7 @@ function renderActionButton(action, opts = {}) {
       }
     );
   }
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Button,
     {
       variant: action.variant,
@@ -3418,12 +3436,12 @@ function PageActions({
   className
 }) {
   if (variant === "icon-buttons") {
-    return /* @__PURE__ */ jsx16(IconButtonsVariant, { actions, menuActions, selector, className });
+    return /* @__PURE__ */ jsx17(IconButtonsVariant, { actions, menuActions, selector, className });
   }
   if (variant === "menu-primary") {
-    return /* @__PURE__ */ jsx16(MenuPrimaryVariant, { actions, menuActions: menuActions || [], selector, className });
+    return /* @__PURE__ */ jsx17(MenuPrimaryVariant, { actions, menuActions: menuActions || [], selector, className });
   }
-  return /* @__PURE__ */ jsx16(PrimaryButtonsVariant, { actions, className });
+  return /* @__PURE__ */ jsx17(PrimaryButtonsVariant, { actions, className });
 }
 function IconButtonsVariant({
   actions,
@@ -3436,13 +3454,13 @@ function IconButtonsVariant({
   const isSingleAction = actions.length === 1 && !actions[0].submenu?.length;
   const singleAction = isSingleAction ? actions[0] : null;
   const useSingleActionMobile = isSingleAction && !hasMenuActions;
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsxs13("div", { className: cn("hidden md:flex items-center", ACTIONS_GAP, className), children: [
+  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: cn("hidden md:flex items-center", ACTIONS_GAP, className), children: [
       selector,
-      desktopActions.map((action, idx) => /* @__PURE__ */ jsx16(React11.Fragment, { children: renderActionButton(action) }, actionKey(action, idx))),
-      hasMenuActions && /* @__PURE__ */ jsx16(ActionsMenuDropdown, { groups: menuActions })
+      desktopActions.map((action, idx) => /* @__PURE__ */ jsx17(React11.Fragment, { children: renderActionButton(action) }, actionKey(action, idx))),
+      hasMenuActions && /* @__PURE__ */ jsx17(ActionsMenuDropdown, { groups: menuActions })
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: cn("flex md:hidden", className), children: useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17("div", { className: cn("flex md:hidden", className), children: useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : /* @__PURE__ */ jsx17(
       ActionsMenuDropdown,
       {
         groups: [
@@ -3463,9 +3481,9 @@ function PrimaryButtonsVariant({
     return 0;
   });
   const desktopActions = sortedActions.filter((a) => !a.showOnlyMobile);
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx16("div", { className: cn("hidden md:flex items-center", ACTIONS_GAP, className), children: desktopActions.map((action, idx) => /* @__PURE__ */ jsx16(React11.Fragment, { children: renderActionButton(action) }, `desktop-${actionKey(action, idx)}`)) }),
-    /* @__PURE__ */ jsx16(MobileBottomActions, { actions: sortedActions })
+  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx17("div", { className: cn("hidden md:flex items-center", ACTIONS_GAP, className), children: desktopActions.map((action, idx) => /* @__PURE__ */ jsx17(React11.Fragment, { children: renderActionButton(action) }, `desktop-${actionKey(action, idx)}`)) }),
+    /* @__PURE__ */ jsx17(MobileBottomActions, { actions: sortedActions })
   ] });
 }
 function MenuPrimaryVariant({
@@ -3476,13 +3494,13 @@ function MenuPrimaryVariant({
 }) {
   const desktopActions = actions.filter((a) => !a.showOnlyMobile);
   const hasMenuActions = menuActions.some((g) => g.items.length > 0);
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsxs13("div", { className: cn("hidden md:flex items-center", ACTIONS_GAP, className), children: [
+  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: cn("hidden md:flex items-center", ACTIONS_GAP, className), children: [
       selector,
-      hasMenuActions && /* @__PURE__ */ jsx16(ActionsMenuDropdown, { groups: menuActions }),
-      desktopActions.map((action, idx) => /* @__PURE__ */ jsx16(React11.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }) }, `desktop-${actionKey(action, idx)}`))
+      hasMenuActions && /* @__PURE__ */ jsx17(ActionsMenuDropdown, { groups: menuActions }),
+      desktopActions.map((action, idx) => /* @__PURE__ */ jsx17(React11.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }) }, `desktop-${actionKey(action, idx)}`))
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: cn("flex md:hidden", className), children: /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17("div", { className: cn("flex md:hidden", className), children: /* @__PURE__ */ jsx17(
       ActionsMenuDropdown,
       {
         groups: [
@@ -3494,25 +3512,63 @@ function MenuPrimaryVariant({
   ] });
 }
 function MobileBottomActions({ actions }) {
-  return /* @__PURE__ */ jsx16("div", { className: cn(
+  return /* @__PURE__ */ jsx17("div", { className: cn(
     "fixed md:hidden bottom-0 left-0 right-0 z-50",
     "bg-ods-card border-t border-ods-border",
     "flex items-start pt-6 pb-6 px-6",
     ACTIONS_GAP
-  ), children: actions.map((action, idx) => /* @__PURE__ */ jsx16(React11.Fragment, { children: renderActionButton(action, { fullWidth: !!action.label }) }, `mobile-${actionKey(action, idx)}`)) });
+  ), children: actions.map((action, idx) => /* @__PURE__ */ jsx17(React11.Fragment, { children: renderActionButton(action, { fullWidth: !!action.label }) }, `mobile-${actionKey(action, idx)}`)) });
 }
 function usePageActionsBottomPadding(variant) {
   return variant === "primary-buttons" || variant === "menu-primary" ? "pb-40 md:pb-0" : "";
 }
 
-// src/components/layout/page-container.tsx
+// src/components/ui/entity-image.tsx
+init_cn();
+import React12 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function EntityImage({ src, alt, fallbackText, className }) {
+  const [imageFailed, setImageFailed] = React12.useState(false);
+  React12.useEffect(() => {
+    setImageFailed(false);
+  }, [src]);
+  const showFallback = imageFailed || !src;
+  const initials = getFirstLastInitials(fallbackText ?? alt);
+  if (showFallback) {
+    return /* @__PURE__ */ jsx18(
+      "div",
+      {
+        "aria-label": alt,
+        className: cn(
+          "size-[52px] md:size-[60px] shrink-0 rounded-md border border-ods-border bg-ods-bg flex items-center justify-center text-ods-text-secondary text-h4 select-none",
+          className
+        ),
+        children: initials || "?"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx18(
+    "img",
+    {
+      src: src ?? void 0,
+      alt: alt ?? "",
+      onError: () => setImageFailed(true),
+      className: cn(
+        "size-[52px] md:size-[60px] shrink-0 rounded-md border border-ods-border object-contain",
+        className
+      )
+    }
+  );
+}
+
+// src/components/layout/title-block.tsx
 init_cn();
 
 // src/components/layout/back-button.tsx
 init_cn();
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function BackButton({ label = "Back", className, type = "button", ...props }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "button",
     {
       type,
@@ -3526,139 +3582,48 @@ function BackButton({ label = "Back", className, type = "button", ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx17(Chevron02LeftIcon, { className: "size-6 shrink-0" }),
-        /* @__PURE__ */ jsx17("span", { className: "text-h4", children: label })
+        /* @__PURE__ */ jsx19(Chevron02LeftIcon, { className: "size-6 shrink-0" }),
+        /* @__PURE__ */ jsx19("span", { className: "text-h4", children: label })
       ]
     }
   );
 }
 
-// src/components/layout/page-container.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
-function isAdvancedProps(props) {
-  return "variant" in props || "title" in props || "subtitle" in props || "backButton" in props || "headerActions" in props || "headerContent" in props || "showHeader" in props || "contentClassName" in props || "actions" in props || "actionsVariant" in props;
-}
-function PageContainer(props) {
-  if (isAdvancedProps(props)) {
-    return renderAdvancedPageContainer(props);
-  } else {
-    return renderLegacyPageContainer(props);
-  }
-}
-function renderLegacyPageContainer({
-  children,
-  className = "",
-  fullWidthBackground = true,
-  backgroundClassName = "bg-ods-bg",
-  backgroundStyle,
-  contentPadding,
-  maxWidth = "max-w-[1920px]",
-  as: Component = "section",
-  id
-}) {
-  const content = /* @__PURE__ */ jsx18("div", { className: cn(maxWidth, contentPadding, "mx-auto", className), children });
-  if (fullWidthBackground) {
-    return /* @__PURE__ */ jsx18(
-      Component,
-      {
-        className: cn("w-full", backgroundClassName),
-        style: backgroundStyle,
-        id,
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx18(Component, { className: "w-full", id, children: /* @__PURE__ */ jsx18("div", { className: cn(maxWidth, contentPadding, "mx-auto", backgroundClassName, className), style: backgroundStyle, children }) });
-}
-function renderAdvancedPageContainer({
-  children,
-  variant = "content",
+// src/components/layout/title-block.tsx
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+function TitleBlock({
   title,
   subtitle,
+  image,
   backButton,
-  headerActions,
-  headerContent,
   actions,
-  actionsVariant,
+  actionsVariant = "icon-buttons",
   menuActions,
-  padding = "none",
-  background = "transparent",
-  className,
-  contentClassName,
-  showHeader = true
+  selector,
+  variant = "plain",
+  className
 }) {
-  const getActionsVariant = () => {
-    if (actionsVariant) return actionsVariant;
-    if (variant === "list") return "icon-buttons";
-    return "primary-buttons";
-  };
-  const renderActions = () => {
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx18(PageActions, { variant: getActionsVariant(), actions, menuActions });
-  };
-  const needsBottomPadding = actions && actions.length > 0 && getActionsVariant() === "primary-buttons";
-  const paddingClasses = {
-    none: "",
-    sm: "p-4",
-    md: "p-6",
-    lg: "p-8"
-  };
-  const backgroundClasses = {
-    default: "bg-ods-bg",
-    card: "bg-ods-card",
-    transparent: ""
-  };
-  const renderHeader = () => {
-    if (!showHeader) return null;
-    if (headerContent) {
-      return /* @__PURE__ */ jsx18("div", { className: cn(
-        "flex items-end justify-between gap-4"
-      ), children: headerContent });
-    }
-    if (variant === "detail") {
-      return /* @__PURE__ */ jsxs15("div", { className: "flex items-end justify-between md:flex-col md:items-start md:justify-start lg:flex-row lg:items-end lg:justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
-          backButton && /* @__PURE__ */ jsx18(
-            BackButton,
-            {
-              onClick: backButton.onClick,
-              label: backButton.label,
-              className: "hidden md:inline-flex"
-            }
-          ),
-          title && /* @__PURE__ */ jsx18("h1", { className: "text-h2 tracking-[-0.64px] text-ods-text-primary", children: title }),
-          subtitle && /* @__PURE__ */ jsx18("div", { className: "text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]", children: subtitle })
-        ] }),
-        (headerActions || actions) && /* @__PURE__ */ jsxs15("div", { className: "flex gap-2 items-center shrink-0", children: [
-          headerActions,
-          renderActions()
-        ] })
-      ] });
-    }
-    if (variant === "list") {
-      return /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center lg:justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-          backButton && /* @__PURE__ */ jsx18(
-            BackButton,
-            {
-              onClick: backButton.onClick,
-              label: backButton.label,
-              className: "hidden md:inline-flex"
-            }
-          ),
-          title && /* @__PURE__ */ jsx18("h1", { className: "text-h2 tracking-[-0.48px] text-ods-text-primary", children: title }),
-          subtitle && /* @__PURE__ */ jsx18("div", { className: "text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]", children: subtitle })
-        ] }),
-        (headerActions || actions) && /* @__PURE__ */ jsxs15("div", { className: "flex gap-3 items-center shrink-0", children: [
-          headerActions,
-          renderActions()
-        ] })
-      ] });
-    }
-    if (variant === "form") {
-      return /* @__PURE__ */ jsxs15("div", { className: "flex items-end justify-between md:flex-col md:items-start md:justify-start lg:flex-row lg:items-end lg:justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
-          backButton && /* @__PURE__ */ jsx18(
+  const hasActions = actions && actions.length > 0;
+  const hasMenuActions = !!menuActions && menuActions.some((g) => g.items.length > 0);
+  return /* @__PURE__ */ jsxs16(
+    "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",
+        "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",
+          "md:mb-[var(--spacing-system-l)]"
+        ) : "mb-[var(--spacing-system-l)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-[var(--spacing-system-xs)] flex-1 min-w-0", children: [
+          backButton && /* @__PURE__ */ jsx20(
             BackButton,
             {
               onClick: backButton.onClick,
@@ -3666,79 +3631,88 @@ function renderAdvancedPageContainer({
               className: "hidden md:inline-flex"
             }
           ),
-          title && /* @__PURE__ */ jsx18("h1", { className: "text-[32px] font-['Azeret_Mono:SemiBold',_sans-serif] font-semibold text-ods-text-primary tracking-[-0.64px]", children: title })
+          image || subtitle ? /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-[var(--spacing-system-m)] min-w-0 w-full", children: [
+            image && /* @__PURE__ */ jsx20(
+              EntityImage,
+              {
+                src: image.src,
+                alt: image.alt,
+                fallbackText: image.alt || title
+              }
+            ),
+            /* @__PURE__ */ jsxs16("div", { className: "flex flex-col justify-center min-w-0 flex-1", children: [
+              title && /* @__PURE__ */ jsx20("h1", { className: "text-h2 text-ods-text-primary truncate", title, children: title }),
+              subtitle && /* @__PURE__ */ jsx20("p", { className: "text-h6 text-ods-text-secondary truncate", title: subtitle, children: subtitle })
+            ] })
+          ] }) : title && /* @__PURE__ */ jsx20("h1", { className: "text-h2 text-ods-text-primary", children: title })
         ] }),
-        (headerActions || actions) && /* @__PURE__ */ jsxs15("div", { className: "flex gap-4 items-center shrink-0", children: [
-          headerActions,
-          renderActions()
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between md:flex-col md:items-start md:justify-start lg:flex-row lg:items-center lg:justify-between gap-4", children: [
-      (title || subtitle) && /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-        title && /* @__PURE__ */ jsx18("h1", { className: "text-h2 text-ods-text-primary", children: title }),
-        subtitle && /* @__PURE__ */ jsx18("div", { className: "text-ods-text-secondary font-['DM_Sans'] font-medium text-[16px]", children: subtitle })
-      ] }),
-      (headerActions || actions) && /* @__PURE__ */ jsxs15("div", { className: "flex gap-3 items-center shrink-0", children: [
-        headerActions,
-        renderActions()
-      ] })
-    ] });
-  };
-  const getContainerClasses = () => {
-    const baseClasses = [
-      "flex flex-col w-full",
-      backgroundClasses[background],
-      paddingClasses[padding]
-    ];
-    switch (variant) {
-      case "list":
-        return cn(baseClasses, "gap-4 md:gap-6", className);
-      case "detail":
-        return cn(baseClasses, "gap-4 md:gap-6", className);
-      case "form":
-        return cn(baseClasses, "gap-6 md:gap-10", className);
-      case "content":
-      default:
-        return cn(baseClasses, "gap-4 md:gap-6", className);
-    }
-  };
-  const getContentClasses = () => {
-    const mobilePadding = needsBottomPadding ? "pb-28 md:pb-0" : "";
-    switch (variant) {
-      case "detail":
-        return cn("flex-1 overflow-auto", mobilePadding, contentClassName);
-      case "list":
-        return cn("flex flex-col gap-4 md:gap-6", mobilePadding, contentClassName);
-      case "form":
-        return cn("flex flex-col gap-4 md:gap-10", mobilePadding, contentClassName);
-      case "content":
-      default:
-        return cn("flex-1", mobilePadding, contentClassName);
+        (hasActions || hasMenuActions || selector) && /* @__PURE__ */ jsx20("div", { className: "flex gap-2 items-center shrink-0", children: /* @__PURE__ */ jsx20(
+          PageActions,
+          {
+            variant: actionsVariant,
+            actions: actions ?? [],
+            menuActions,
+            selector
+          }
+        ) })
+      ]
     }
-  };
-  return /* @__PURE__ */ jsxs15("div", { className: getContainerClasses(), children: [
-    renderHeader(),
-    /* @__PURE__ */ jsx18("div", { className: getContentClasses(), children })
+  );
+}
+
+// src/components/layout/page-layout.tsx
+init_cn();
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+function PageLayout({
+  children,
+  title,
+  subtitle,
+  image,
+  backButton,
+  actions,
+  actionsVariant = "icon-buttons",
+  menuActions,
+  selector,
+  headerVariant,
+  className,
+  contentClassName,
+  showHeader = true
+}) {
+  const hasActions = actions && actions.length > 0;
+  const needsBottomPadding = hasActions && actionsVariant === "primary-buttons";
+  const hasHeader = showHeader && (title || subtitle || image || backButton || hasActions || selector);
+  return /* @__PURE__ */ jsxs17("div", { className: cn("flex flex-col w-full", className), children: [
+    hasHeader && /* @__PURE__ */ jsx21(
+      TitleBlock,
+      {
+        title,
+        subtitle,
+        image,
+        backButton,
+        actions,
+        actionsVariant,
+        menuActions,
+        selector,
+        variant: headerVariant
+      }
+    ),
+    /* @__PURE__ */ jsx21("div", { className: cn("flex flex-col flex-1 gap-[var(--spacing-system-l)]", needsBottomPadding && "pb-28 md:pb-0", contentClassName), children })
   ] });
 }
-var ListPageContainer = (props) => /* @__PURE__ */ jsx18(PageContainer, { ...props, variant: "list" });
-var DetailPageContainer = (props) => /* @__PURE__ */ jsx18(PageContainer, { ...props, variant: "detail" });
-var FormPageContainer = (props) => /* @__PURE__ */ jsx18(PageContainer, { ...props, variant: "form" });
-var ContentPageContainer = (props) => /* @__PURE__ */ jsx18(PageContainer, { ...props, variant: "content" });
 
 // src/components/layout/article-detail-layout.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
-function PageShell({ children, schemas }) {
-  return /* @__PURE__ */ jsxs16("main", { className: "bg-ods-bg min-h-screen", children: [
+init_cn();
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+function PageShell({ children, schemas, contentClassName }) {
+  return /* @__PURE__ */ jsxs18("main", { className: "bg-ods-bg min-h-screen", children: [
     schemas,
-    /* @__PURE__ */ jsx19("div", { className: "max-w-[1920px] mx-auto px-6 md:px-20 py-6 md:py-10", children })
+    /* @__PURE__ */ jsx22("div", { className: cn("page-shell-content max-w-[1920px] mx-auto", contentClassName), children })
   ] });
 }
-function ArticleDetailLayout({ children, schemas }) {
-  return /* @__PURE__ */ jsxs16("main", { className: "bg-ods-bg min-h-screen", children: [
+function ArticleDetailLayout({ children, schemas, contentClassName }) {
+  return /* @__PURE__ */ jsxs18("main", { className: "bg-ods-bg min-h-screen", children: [
     schemas,
-    /* @__PURE__ */ jsx19("div", { className: "max-w-[1280px] mx-auto px-6 md:px-20 py-6 md:py-10", children })
+    /* @__PURE__ */ jsx22("div", { className: cn("max-w-[1280px] mx-auto px-6 md:px-20 py-6 md:py-10", contentClassName), children })
   ] });
 }
 
@@ -3793,7 +3767,7 @@ function resolveContentHref(composeContentUrl, args) {
 init_button();
 init_cn();
 import { AlertTriangle, RefreshCw, Home } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function ErrorState({
   title = "Error",
   message,
@@ -3832,36 +3806,36 @@ function ErrorState({
     }
   };
   const styles = getVariantStyles();
-  return /* @__PURE__ */ jsx20("div", { className: cn("p-6", containerClassName), children: /* @__PURE__ */ jsx20("div", { className: cn(
+  return /* @__PURE__ */ jsx23("div", { className: cn("p-6", containerClassName), children: /* @__PURE__ */ jsx23("div", { className: cn(
     "rounded-lg p-4 border",
     styles.bg,
     styles.border,
     className
-  ), children: /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-3", children: [
-    showIcon && /* @__PURE__ */ jsx20(AlertTriangle, { className: cn("h-5 w-5 mt-0.5 flex-shrink-0", styles.icon) }),
-    /* @__PURE__ */ jsxs17("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsx20("h3", { className: cn("font-semibold mb-1", styles.text), children: title }),
-      /* @__PURE__ */ jsx20("p", { className: cn("text-sm", styles.text), children: message }),
-      (showRetry || showHome) && /* @__PURE__ */ jsxs17("div", { className: "flex gap-2 mt-3", children: [
-        showRetry && onRetry && /* @__PURE__ */ jsx20(
+  ), children: /* @__PURE__ */ jsxs19("div", { className: "flex items-start gap-3", children: [
+    showIcon && /* @__PURE__ */ jsx23(AlertTriangle, { className: cn("h-5 w-5 mt-0.5 flex-shrink-0", styles.icon) }),
+    /* @__PURE__ */ jsxs19("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx23("h3", { className: cn("font-semibold mb-1", styles.text), children: title }),
+      /* @__PURE__ */ jsx23("p", { className: cn("text-sm", styles.text), children: message }),
+      (showRetry || showHome) && /* @__PURE__ */ jsxs19("div", { className: "flex gap-2 mt-3", children: [
+        showRetry && onRetry && /* @__PURE__ */ jsx23(
           Button,
           {
             onClick: onRetry,
             variant: "outline",
             size: "small-legacy",
             className: "h-8",
-            leftIcon: /* @__PURE__ */ jsx20(RefreshCw, { className: "h-4 w-4" }),
+            leftIcon: /* @__PURE__ */ jsx23(RefreshCw, { className: "h-4 w-4" }),
             children: "Try Again"
           }
         ),
-        showHome && onHome && /* @__PURE__ */ jsx20(
+        showHome && onHome && /* @__PURE__ */ jsx23(
           Button,
           {
             onClick: onHome,
             variant: "outline",
             size: "small-legacy",
             className: "h-8",
-            leftIcon: /* @__PURE__ */ jsx20(Home, { className: "h-4 w-4" }),
+            leftIcon: /* @__PURE__ */ jsx23(Home, { className: "h-4 w-4" }),
             children: "Go Home"
           }
         )
@@ -3870,7 +3844,7 @@ function ErrorState({
   ] }) }) });
 }
 function PageError({ message, onRetry, onHome }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx23(
     ErrorState,
     {
       title: "Page Error",
@@ -3884,7 +3858,7 @@ function PageError({ message, onRetry, onHome }) {
   );
 }
 function LoadError({ message, onRetry }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx23(
     ErrorState,
     {
       title: "Loading Error",
@@ -3896,7 +3870,7 @@ function LoadError({ message, onRetry }) {
   );
 }
 function NotFoundError({ message = "The requested item was not found", onHome }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx23(
     ErrorState,
     {
       title: "Not Found",
@@ -3910,7 +3884,7 @@ function NotFoundError({ message = "The requested item was not found", onHome })
 
 // src/components/features/entity-tag-badges.tsx
 import Link from "next/link";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var TAG_BADGE_CLASS = "bg-ods-card border border-ods-border";
 var BADGE_CLASS = TAG_BADGE_CLASS;
 function EntityTagBadges({ tags, basePath, max, className }) {
@@ -3919,12 +3893,12 @@ function EntityTagBadges({ tags, basePath, max, className }) {
   const visibleLimit = max == null ? items.length : Math.max(0, max);
   const shown = items.slice(0, visibleLimit);
   const overflow = items.length - shown.length;
-  return /* @__PURE__ */ jsxs18("div", { className: `flex flex-wrap items-center gap-2 w-full ${className || ""}`, children: [
+  return /* @__PURE__ */ jsxs20("div", { className: `flex flex-wrap items-center gap-2 w-full ${className || ""}`, children: [
     shown.map((tag) => {
       const key = tag.tag_id ?? tag.id ?? tag.slug ?? tag.name;
       const label = (tag.name || "").toUpperCase();
       if (basePath && tag.slug) {
-        return /* @__PURE__ */ jsx21(Link, { href: `${basePath}?tags=${tag.slug}`, className: "inline-flex", children: /* @__PURE__ */ jsx21(
+        return /* @__PURE__ */ jsx24(Link, { href: `${basePath}?tags=${tag.slug}`, className: "inline-flex", children: /* @__PURE__ */ jsx24(
           StatusBadge,
           {
             text: label,
@@ -3933,9 +3907,9 @@ function EntityTagBadges({ tags, basePath, max, className }) {
           }
         ) }, key);
       }
-      return /* @__PURE__ */ jsx21(StatusBadge, { text: label, variant: "card", className: BADGE_CLASS }, key);
+      return /* @__PURE__ */ jsx24(StatusBadge, { text: label, variant: "card", className: BADGE_CLASS }, key);
     }),
-    overflow > 0 && /* @__PURE__ */ jsx21(StatusBadge, { text: `+${overflow}`, variant: "card", className: `${BADGE_CLASS} text-ods-text-secondary` })
+    overflow > 0 && /* @__PURE__ */ jsx24(StatusBadge, { text: `+${overflow}`, variant: "card", className: `${BADGE_CLASS} text-ods-text-secondary` })
   ] });
 }
 
@@ -4011,8 +3985,8 @@ function getCaptionsUrl(entityType, entityId, srtContent) {
 init_cn();
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React12 from "react";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import * as React13 from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var containerStyles = cn(
   // Layout & spacing — matches lib Input component
   "flex items-center gap-2 rounded-[6px] border px-3 h-11 md:h-12 cursor-text",
@@ -4067,12 +4041,12 @@ function SearchInput({
   limitTags = "auto",
   getLimitTagsText = (more) => `+${more}`
 }) {
-  const [internalValue, setInternalValue] = React12.useState(defaultValue);
+  const [internalValue, setInternalValue] = React13.useState(defaultValue);
   const currentValue = onChange ? value ?? "" : internalValue;
   const debouncedValue = useDebounce(currentValue, debounceMs);
-  const [isOpen, setIsOpen] = React12.useState(false);
-  const [highlightedIndex, setHighlightedIndex] = React12.useState(-1);
-  const containerRef = React12.useRef(null);
+  const [isOpen, setIsOpen] = React13.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React13.useState(-1);
+  const containerRef = React13.useRef(null);
   const currentPlaceholder = filterChips.length > 0 ? "Add filter..." : placeholder;
   const {
     visibleCount: rawVisibleCount,
@@ -4089,10 +4063,10 @@ function SearchInput({
     placeholder: filterChips.length > 0 ? "" : placeholder
   });
   const visibleCount = filterChips.length > 0 ? Math.max(1, rawVisibleCount) : rawVisibleCount;
-  const hiddenTagsRef = React12.useRef(null);
-  const hiddenTagsPopupRef = React12.useRef(null);
-  const [showHiddenTags, setShowHiddenTags] = React12.useState(false);
-  React12.useEffect(() => {
+  const hiddenTagsRef = React13.useRef(null);
+  const hiddenTagsPopupRef = React13.useRef(null);
+  const [showHiddenTags, setShowHiddenTags] = React13.useState(false);
+  React13.useEffect(() => {
     if (!showHiddenTags) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -4106,7 +4080,7 @@ function SearchInput({
   const hiddenCount = filterChips.length - visibleCount;
   const visibleChips = filterChips.slice(0, visibleCount);
   const hiddenChips = filterChips.slice(visibleCount);
-  const { flatResults, groups } = React12.useMemo(() => {
+  const { flatResults, groups } = React13.useMemo(() => {
     if (!groupBy) return { flatResults: results, groups: null };
     const grouped = /* @__PURE__ */ new Map();
     for (const r of results) {
@@ -4123,7 +4097,7 @@ function SearchInput({
   const meetsMinQuery = debouncedValue.length >= minQueryLength;
   const autoShow = meetsMinQuery;
   const dropdownVisible = showDropdownProp ?? (isOpen && autoShow);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     setHighlightedIndex(-1);
   }, [flatResults.length]);
   const handleChange = (e) => {
@@ -4196,20 +4170,20 @@ function SearchInput({
   const handleOpenChange = (open) => {
     setIsOpen(open);
   };
-  const defaultRenderResult = (result, isHighlighted) => /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3 w-full min-w-0", children: [
-    result.icon && /* @__PURE__ */ jsx22("span", { className: "flex-shrink-0 text-ods-text-secondary [&_svg]:size-4", children: result.icon }),
-    /* @__PURE__ */ jsxs19("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx22("div", { className: cn(
+  const defaultRenderResult = (result, isHighlighted) => /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 w-full min-w-0", children: [
+    result.icon && /* @__PURE__ */ jsx25("span", { className: "flex-shrink-0 text-ods-text-secondary [&_svg]:size-4", children: result.icon }),
+    /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx25("div", { className: cn(
         "text-sm font-medium leading-5 truncate",
         isHighlighted ? "text-ods-accent" : "text-ods-text-primary"
       ), title: result.title, children: result.title }),
-      result.description && /* @__PURE__ */ jsx22("div", { className: "text-xs leading-4 text-ods-text-secondary truncate mt-0.5", title: result.description, children: result.description })
+      result.description && /* @__PURE__ */ jsx25("div", { className: "text-xs leading-4 text-ods-text-secondary truncate mt-0.5", title: result.description, children: result.description })
     ] }),
-    result.type && /* @__PURE__ */ jsx22("span", { className: "flex-shrink-0 text-[11px] font-medium text-ods-text-muted uppercase tracking-wider", children: result.type })
+    result.type && /* @__PURE__ */ jsx25("span", { className: "flex-shrink-0 text-[11px] font-medium text-ods-text-muted uppercase tracking-wider", children: result.type })
   ] });
   const renderRow = (result, index) => {
     const isHighlighted = index === highlightedIndex;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx25(
       "div",
       {
         role: "option",
@@ -4228,15 +4202,15 @@ function SearchInput({
   };
   const renderDropdownContent = () => {
     if (isLoading) {
-      return /* @__PURE__ */ jsx22("div", { className: "px-4 py-3 text-ods-text-secondary text-[14px]", children: "Loading..." });
+      return /* @__PURE__ */ jsx25("div", { className: "px-4 py-3 text-ods-text-secondary text-[14px]", children: "Loading..." });
     }
     if (flatResults.length === 0) {
-      return /* @__PURE__ */ jsx22("div", { className: "px-4 py-3 text-ods-text-secondary text-[14px]", children: emptyResultsText });
+      return /* @__PURE__ */ jsx25("div", { className: "px-4 py-3 text-ods-text-secondary text-[14px]", children: emptyResultsText });
     }
     if (groups) {
       let globalIndex = 0;
-      return Array.from(groups.entries()).map(([groupLabel, groupResults]) => /* @__PURE__ */ jsxs19("div", { children: [
-        /* @__PURE__ */ jsx22("div", { className: "px-4 py-2 text-[12px] font-semibold text-ods-text-secondary uppercase tracking-wide bg-ods-bg", children: groupLabel }),
+      return Array.from(groups.entries()).map(([groupLabel, groupResults]) => /* @__PURE__ */ jsxs21("div", { children: [
+        /* @__PURE__ */ jsx25("div", { className: "px-4 py-2 text-[12px] font-semibold text-ods-text-secondary uppercase tracking-wide bg-ods-bg", children: groupLabel }),
         groupResults.map((result) => {
           const idx = globalIndex++;
           return renderRow(result, idx);
@@ -4246,9 +4220,9 @@ function SearchInput({
     return flatResults.map((result, index) => renderRow(result, index));
   };
   const hasValue = currentValue.length > 0;
-  return /* @__PURE__ */ jsxs19("div", { className: cn("relative", className), ref: containerRef, children: [
-    /* @__PURE__ */ jsxs19(PopoverPrimitive.Root, { open: dropdownVisible, onOpenChange: handleOpenChange, modal: false, children: [
-      /* @__PURE__ */ jsx22(PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs21("div", { className: cn("relative", className), ref: containerRef, children: [
+    /* @__PURE__ */ jsxs21(PopoverPrimitive.Root, { open: dropdownVisible, onOpenChange: handleOpenChange, modal: false, children: [
+      /* @__PURE__ */ jsx25(PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs21(
         "div",
         {
           className: cn(
@@ -4261,9 +4235,9 @@ function SearchInput({
             setIsOpen(true);
           },
           children: [
-            /* @__PURE__ */ jsx22("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment !== void 0 ? startAdornment : /* @__PURE__ */ jsx22(SearchIcon, {}) }),
-            /* @__PURE__ */ jsxs19("div", { ref: middleRef, className: "flex-1 flex items-center gap-2 min-w-0 overflow-hidden", children: [
-              visibleChips.map((chip) => /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx25("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment !== void 0 ? startAdornment : /* @__PURE__ */ jsx25(SearchIcon, {}) }),
+            /* @__PURE__ */ jsxs21("div", { ref: middleRef, className: "flex-1 flex items-center gap-2 min-w-0 overflow-hidden", children: [
+              visibleChips.map((chip) => /* @__PURE__ */ jsx25(
                 Tag,
                 {
                   variant: chipVariantToTagVariant(chip.variant),
@@ -4273,7 +4247,7 @@ function SearchInput({
                 },
                 chip.id
               )),
-              hiddenCount > 0 && /* @__PURE__ */ jsx22("div", { ref: hiddenTagsRef, className: "shrink-0", children: /* @__PURE__ */ jsx22(
+              hiddenCount > 0 && /* @__PURE__ */ jsx25("div", { ref: hiddenTagsRef, className: "shrink-0", children: /* @__PURE__ */ jsx25(
                 "button",
                 {
                   ref: badgeRef,
@@ -4292,7 +4266,7 @@ function SearchInput({
                   children: getLimitTagsText(hiddenCount)
                 }
               ) }),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx25(
                 "input",
                 {
                   ref: inputRef,
@@ -4309,15 +4283,15 @@ function SearchInput({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 shrink-0 ml-auto", children: [
-              hasValue && /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 shrink-0 ml-auto", children: [
+              hasValue && /* @__PURE__ */ jsx25(
                 "button",
                 {
                   type: "button",
                   onClick: handleClear,
                   className: "flex items-center justify-center hover:opacity-70 transition-opacity",
                   "aria-label": "Clear search",
-                  children: /* @__PURE__ */ jsx22(XmarkCircleIcon, { className: "text-ods-text-secondary", size: 24 })
+                  children: /* @__PURE__ */ jsx25(XmarkCircleIcon, { className: "text-ods-text-secondary", size: 24 })
                 }
               ),
               endAdornment
@@ -4325,7 +4299,7 @@ function SearchInput({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx25(
         PopoverPrimitive.Content,
         {
           className: cn(
@@ -4348,14 +4322,14 @@ function SearchInput({
               e.preventDefault();
             }
           },
-          children: /* @__PURE__ */ jsxs19(ScrollAreaPrimitive.Root, { className: "overflow-hidden", children: [
-            /* @__PURE__ */ jsx22(ScrollAreaPrimitive.Viewport, { className: "max-h-[320px] w-full", children: /* @__PURE__ */ jsx22("div", { role: "listbox", children: renderDropdownContent() }) }),
-            /* @__PURE__ */ jsx22(ScrollAreaPrimitive.Scrollbar, { className: "hidden", orientation: "vertical", children: /* @__PURE__ */ jsx22(ScrollAreaPrimitive.Thumb, {}) })
+          children: /* @__PURE__ */ jsxs21(ScrollAreaPrimitive.Root, { className: "overflow-hidden", children: [
+            /* @__PURE__ */ jsx25(ScrollAreaPrimitive.Viewport, { className: "max-h-[320px] w-full", children: /* @__PURE__ */ jsx25("div", { role: "listbox", children: renderDropdownContent() }) }),
+            /* @__PURE__ */ jsx25(ScrollAreaPrimitive.Scrollbar, { className: "hidden", orientation: "vertical", children: /* @__PURE__ */ jsx25(ScrollAreaPrimitive.Thumb, {}) })
           ] })
         }
       )
     ] }),
-    showHiddenTags && hiddenCount > 0 && /* @__PURE__ */ jsx22(
+    showHiddenTags && hiddenCount > 0 && /* @__PURE__ */ jsx25(
       HiddenTagsPopup,
       {
         ref: hiddenTagsPopupRef,
@@ -4369,7 +4343,7 @@ function SearchInput({
         }
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx25(
       "span",
       {
         ref: textMeasureRef,
@@ -4378,13 +4352,13 @@ function SearchInput({
         children: currentPlaceholder
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx25(
       "div",
       {
         ref: measureRef,
         "aria-hidden": "true",
         className: "fixed -left-[9999px] top-0 flex gap-2 pointer-events-none",
-        children: filterChips.map((chip) => /* @__PURE__ */ jsx22(
+        children: filterChips.map((chip) => /* @__PURE__ */ jsx25(
           Tag,
           {
             variant: chipVariantToTagVariant(chip.variant),
@@ -4403,7 +4377,7 @@ function SearchInput({
 // src/components/ui/filter-pill-row.tsx
 init_button();
 import { Filter } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function FilterPillRow({
   label,
   selectedValue,
@@ -4412,12 +4386,12 @@ function FilterPillRow({
   countLabel,
   children
 }) {
-  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-wrap items-center gap-3 p-4 bg-ods-card border border-ods-border rounded-lg", children: [
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx23(Filter, { className: "h-4 w-4 text-ods-accent" }),
-      /* @__PURE__ */ jsx23("span", { className: "text-h5 text-ods-text-secondary", children: label })
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-3 p-4 bg-ods-card border border-ods-border rounded-lg", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx26(Filter, { className: "h-4 w-4 text-ods-accent" }),
+      /* @__PURE__ */ jsx26("span", { className: "text-h5 text-ods-text-secondary", children: label })
     ] }),
-    children || options.map((opt) => /* @__PURE__ */ jsx23(
+    children || options.map((opt) => /* @__PURE__ */ jsx26(
       Button,
       {
         type: "button",
@@ -4429,7 +4403,7 @@ function FilterPillRow({
       },
       opt.value
     )),
-    countLabel && /* @__PURE__ */ jsx23("div", { className: "ml-auto text-[12px] font-['DM_Sans'] text-ods-text-secondary shrink-0", children: countLabel })
+    countLabel && /* @__PURE__ */ jsx26("div", { className: "ml-auto text-[12px] font-['DM_Sans'] text-ods-text-secondary shrink-0", children: countLabel })
   ] });
 }
 
@@ -4507,6 +4481,9 @@ export {
   fetchPriorityProp,
   extractYouTubeId,
   Video,
+  PAGE_HEADING_CLASS,
+  SECTION_HEADING_CLASS,
+  PageHeading,
   RATIO_GRID_CLASS,
   RATIO_DISPLAY_GRID_CLASS,
   RatioTabs,
@@ -4551,11 +4528,9 @@ export {
   PageActions,
   usePageActionsBottomPadding,
   BackButton,
-  PageContainer,
-  ListPageContainer,
-  DetailPageContainer,
-  FormPageContainer,
-  ContentPageContainer,
+  EntityImage,
+  TitleBlock,
+  PageLayout,
   PageShell,
   ArticleDetailLayout,
   DEFAULT_CONTENT_SUFFIXES,
@@ -4576,4 +4551,4 @@ export {
   SearchInput,
   FilterPillRow
 };
-//# sourceMappingURL=chunk-BSOHVQ7X.js.map
+//# sourceMappingURL=chunk-GHWOQUB4.js.map