@flamingo-stack/openframe-frontend-core 0.0.703 → 0.0.704-snapshot.20261006133653

package/dist/{chunk-NYSYSKSH.cjs → chunk-M6HTJTFH.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkMXHJROXJcjs = require('./chunk-MXHJROXJ.cjs');
+var _chunkP23CRLU4cjs = require('./chunk-P23CRLU4.cjs');
 
 
-var _chunk4OGAXAEGcjs = require('./chunk-4OGAXAEG.cjs');
+var _chunkABU3TGXAcjs = require('./chunk-ABU3TGXA.cjs');
 
 
 
@@ -12,16 +12,16 @@ var _chunk4OGAXAEGcjs = require('./chunk-4OGAXAEG.cjs');
 
 
 
-var _chunkHY5YL3U5cjs = require('./chunk-HY5YL3U5.cjs');
+var _chunkXBWE423Rcjs = require('./chunk-XBWE423R.cjs');
 
 
-var _chunkIIMICN7Lcjs = require('./chunk-IIMICN7L.cjs');
+var _chunkTYWLNCNHcjs = require('./chunk-TYWLNCNH.cjs');
 
 
 var _chunk7DNL734Scjs = require('./chunk-7DNL734S.cjs');
 
 
-var _chunkEMCQGFXDcjs = require('./chunk-EMCQGFXD.cjs');
+var _chunkMMOODW57cjs = require('./chunk-MMOODW57.cjs');
 
 
 var _chunkUJ7AXHRZcjs = require('./chunk-UJ7AXHRZ.cjs');
@@ -39,7 +39,7 @@ var _jsxruntime = require('react/jsx-runtime');
 function DocSearchResultRow({ result, isHighlighted }) {
   const docType = _optionalChain([result, 'access', _ => _.metadata, 'optionalAccess', _2 => _2.documentType]) || void 0;
   const sourceRepo = _optionalChain([result, 'access', _3 => _3.metadata, 'optionalAccess', _4 => _4.sourceRepo]) || void 0;
-  const { Icon: SourceIcon, label: iconLabel } = _chunkHY5YL3U5cjs.resolveSourceIcon.call(void 0, {
+  const { Icon: SourceIcon, label: iconLabel } = _chunkXBWE423Rcjs.resolveSourceIcon.call(void 0, {
     sourceRepo,
     documentType: docType
   });
@@ -69,7 +69,7 @@ function DocSearchBar({
   renderResult
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkMXHJROXJcjs.SearchInput,
+    _chunkP23CRLU4cjs.SearchInput,
     {
       placeholder,
       value: query,
@@ -119,7 +119,7 @@ function mapDocSearchResults(docs) {
       results.push({
         id: `group-${entry.repo}`,
         // Same table label and count as the chat's grouped chip: one owner each.
-        title: `${_chunkHY5YL3U5cjs.getSourceLabel.call(void 0, entry.repo)} ${_chunkHY5YL3U5cjs.recordCountLabel.call(void 0, rows.length)}`,
+        title: `${_chunkXBWE423Rcjs.getSourceLabel.call(void 0, entry.repo)} ${_chunkXBWE423Rcjs.recordCountLabel.call(void 0, rows.length)}`,
         path: rows[0].path,
         type: "file",
         metadata: {
@@ -182,7 +182,7 @@ function resolveSearchResultAction(result, source, runtimeMode, composeContentUr
     if (composed && !isAbsoluteHref(href)) {
       return { kind: "navigate-same-tab", href };
     }
-    const isNewTab = _chunkEMCQGFXDcjs.decideNewTab.call(void 0, {
+    const isNewTab = _chunkMMOODW57cjs.decideNewTab.call(void 0, {
       href,
       targetPlatform: composed ? composed.targetPlatform : targetPlatform,
       surface: "useUnifiedNav",
@@ -254,7 +254,7 @@ function useDocSearch(config) {
   const [query, setQuery] = _react.useState.call(void 0, "");
   const [results, setResults] = _react.useState.call(void 0, NO_RESULTS);
   const [isFetching, setIsFetching] = _react.useState.call(void 0, false);
-  const debouncedQuery = _chunkIIMICN7Lcjs.useDebounce.call(void 0, query, 300);
+  const debouncedQuery = _chunkTYWLNCNHcjs.useDebounce.call(void 0, query, 300);
   const searchable = debouncedQuery.trim().length >= 2;
   const [wasSearchable, setWasSearchable] = _react.useState.call(void 0, searchable);
   if (wasSearchable !== searchable) {
@@ -276,7 +276,7 @@ function useDocSearch(config) {
           limit: "10"
         });
         if (tableIdsKey) params.set("tableIds", tableIdsKey);
-        const response = await _chunk4OGAXAEGcjs.contentFetch.call(void 0, `${resolvedSearchEndpoint}?${params.toString()}`);
+        const response = await _chunkABU3TGXAcjs.contentFetch.call(void 0, `${resolvedSearchEndpoint}?${params.toString()}`);
         if (!response.ok) {
           throw new Error(`Search request failed: ${response.status}`);
         }
@@ -311,27 +311,27 @@ function useDocSearch(config) {
         case "navigate-same-tab": {
           if (wantsNewTab) {
             setKeepOpen(true);
-            window.open(action.href, "_blank", _chunkHY5YL3U5cjs.NEW_TAB_FEATURES);
+            window.open(action.href, "_blank", _chunkXBWE423Rcjs.NEW_TAB_FEATURES);
             return;
           }
           setKeepOpen(false);
           const path = baseRoute && action.href.startsWith(`${baseRoute}/`) ? action.href.slice(baseRoute.length + 1) : null;
           if (path && _optionalChain([onInPageSwap, 'optionalCall', _16 => _16(path)])) return;
-          router.push(_chunkHY5YL3U5cjs.stripSameOriginToPath.call(void 0, action.href));
+          router.push(_chunkXBWE423Rcjs.stripSameOriginToPath.call(void 0, action.href));
           return;
         }
         case "navigate-new-tab":
           setKeepOpen(true);
           if (_optionalChain([runtime, 'optionalAccess', _17 => _17.navigation, 'access', _18 => _18.mode]) === "embed") {
             const targetPlatform = _nullishCoalesce(_optionalChain([result, 'access', _19 => _19.metadata, 'optionalAccess', _20 => _20.targetPlatform]), () => ( null));
-            _chunkHY5YL3U5cjs.resolveExternalNavigation.call(void 0, {
+            _chunkXBWE423Rcjs.resolveExternalNavigation.call(void 0, {
               href: action.href,
               targetPlatform,
               runtime
             }).open();
             return;
           }
-          window.open(action.href, "_blank", _chunkHY5YL3U5cjs.NEW_TAB_FEATURES);
+          window.open(action.href, "_blank", _chunkXBWE423Rcjs.NEW_TAB_FEATURES);
           return;
         case "ask-ai":
           setKeepOpen(false);

package/dist/{chunk-OGLCD3UL.js → chunk-MFFCUVWG.js}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Pagination
-} from "./chunk-HUMWQMCU.js";
+} from "./chunk-UT4YHQZW.js";
 import {
   withQuery
-} from "./chunk-Q76ZTHNV.js";
+} from "./chunk-MP2C3LJ4.js";
 import {
   usePathname,
   useRouter,
@@ -126,10 +126,10 @@ function EmptyState({
   const displayDescription = description || defaultContent.description;
   const smartCTA = ctaHref ? null : getSmartCTA();
   const ctaButtonVariant = ctaVariant === "primary" ? "accent" : "outline";
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-6 py-6 text-center md:py-16", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center justify-center md:mb-6", children: /* @__PURE__ */ jsx("div", { className: "rounded-full border border-ods-border bg-ods-card p-3 md:p-6", children: /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center text-ods-text-secondary md:h-16 md:w-16", children: defaultContent.icon }) }) }),
-    /* @__PURE__ */ jsx("h2", { className: "mb-2 text-ods-text-primary text-h3 md:mb-3", children: displayTitle }),
-    /* @__PURE__ */ jsx("p", { className: "mb-4 max-w-md text-ods-text-secondary text-h6 md:mb-8", children: displayDescription }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-6 py-6 text-center content-md:py-16", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center justify-center content-md:mb-6", children: /* @__PURE__ */ jsx("div", { className: "rounded-full border border-ods-border bg-ods-card p-3 content-md:p-6", children: /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center text-ods-text-secondary content-md:h-16 content-md:w-16", children: defaultContent.icon }) }) }),
+    /* @__PURE__ */ jsx("h2", { className: "mb-2 text-ods-text-primary text-h3 content-md:mb-3", children: displayTitle }),
+    /* @__PURE__ */ jsx("p", { className: "mb-4 max-w-md text-ods-text-secondary text-h6 content-md:mb-8", children: displayDescription }),
     showCTA && ctaHref && /* @__PURE__ */ jsx("div", { className: "mb-3 w-full max-w-xs", children: /* @__PURE__ */ jsx(Button, { href: ctaHref, variant: ctaButtonVariant, className: "w-full", children: ctaText || "Contact us" }) }),
     showCTA && !ctaHref && smartCTA && /* @__PURE__ */ jsx("div", { className: "mb-3 w-full max-w-xs", children: /* @__PURE__ */ jsx(Button, { onClick: smartCTA.action, variant: ctaButtonVariant, className: "w-full", children: smartCTA.text }) }),
     showBackButton && onGoBack && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ jsx(

package/dist/{chunk-KJ5LWATV.js → chunk-MKXO4Q5P.js}

@@ -9,18 +9,16 @@ import {
   parseSchemaParams,
   positiveInt,
   shouldIncludeInUrl
-} from "./chunk-Q76ZTHNV.js";
+} from "./chunk-MP2C3LJ4.js";
 import {
   ToolIcon,
   apiErrorMessage,
-  breakpoints,
   getHashTargetElement,
   normalizeHashFragment,
   scrollElementIntoView,
   useAutoplay,
-  useDebounce,
-  useMediaQuery
-} from "./chunk-64O4L7WN.js";
+  useDebounce
+} from "./chunk-PDWVPI3S.js";
 import {
   useRouter,
   useSearchParams
@@ -35,9 +33,11 @@ import {
   XmarkIcon
 } from "./chunk-Z2VNQQ74.js";
 import {
+  breakpoints,
   createLocalStorageAdapter,
-  getPlatformBrandClasses
-} from "./chunk-2T6QWNXU.js";
+  getPlatformBrandClasses,
+  useMediaQuery
+} from "./chunk-NDESEPW5.js";
 import {
   MiamiCyberGangLogoFaceOnly,
   OpenFrameLogo

package/dist/{chunk-EMCQGFXD.cjs → chunk-MMOODW57.cjs}

@@ -8,7 +8,8 @@ var _chunkMGHIV4L6cjs = require('./chunk-MGHIV4L6.cjs');
 
 
 
-var _chunkMDBHZBW7cjs = require('./chunk-MDBHZBW7.cjs');
+
+var _chunkRKV5B7EUcjs = require('./chunk-RKV5B7EU.cjs');
 
 
 
@@ -266,7 +267,7 @@ var disabledTagClasses = [
 ];
 function TagLabel({ label, labelClassName }) {
   const isString = typeof label === "string";
-  const { ref, isTruncated } = _chunkMDBHZBW7cjs.useIsTruncated.call(void 0, isString ? label : null);
+  const { ref, isTruncated } = _chunkRKV5B7EUcjs.useIsTruncated.call(void 0, isString ? label : null);
   if (!isString) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunk3ATAYP36cjs.cn.call(void 0, "truncate", labelClassName), children: label });
   }
@@ -359,7 +360,7 @@ function CardHorizontal({ icon, title, description, className = "", borderLeft =
     "div",
     {
       className: _chunk3ATAYP36cjs.cn.call(void 0, 
-        "flex min-h-[80px] w-full flex-row items-center gap-3 bg-ods-card p-4 md:gap-4 md:p-6",
+        "flex min-h-[80px] w-full flex-row items-center gap-3 bg-ods-card p-4 content-md:gap-4 content-md:p-6",
         borderLeft ? "border-l border-ods-border" : "",
         className
       ),
@@ -853,7 +854,7 @@ var SquareAvatar = _react3.memo.call(void 0,
       style,
       ...props
     }, ref) => {
-      const resolvedSrc = _chunkMDBHZBW7cjs.useAuthedImageSrc.call(void 0, src);
+      const resolvedSrc = _chunkRKV5B7EUcjs.useAuthedImageSrc.call(void 0, src);
       const sizeClasses2 = {
         // xs (24px): dense card meta rows — avatar stacks on delivery/
         // roadmap cards. Part of the shared scale so no caller ever
@@ -1034,7 +1035,7 @@ var Modal = _react3.forwardRef.call(void 0, ({ isOpen, onClose, children, classN
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "fixed inset-0 z-[1300] flex items-center justify-center", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ods-viewport-layer fixed inset-0 z-[1300] flex items-center justify-center", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 bg-ods-overlay", onClick: onClose, "aria-hidden": "true" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
@@ -1046,7 +1047,7 @@ var Modal = _react3.forwardRef.call(void 0, ({ isOpen, onClose, children, classN
         ),
         role: "dialog",
         "aria-modal": "true",
-        children
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRKV5B7EUcjs.ViewportBreakpoints, { children })
       }
     )
   ] });
@@ -1707,7 +1708,7 @@ function EntityPortraitCard({
       setMeasured({ src, isWide: img.naturalWidth / img.naturalHeight >= MIN_WIDE_RATIO });
     }
   };
-  const edgeColor = _chunkMDBHZBW7cjs.useImageEdgeColor.call(void 0, isWide === false ? src : null, "var(--color-bg-surface)");
+  const edgeColor = _chunkRKV5B7EUcjs.useImageEdgeColor.call(void 0, isWide === false ? src : null, "var(--color-bg-surface)");
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href, target, rel, className: _chunk3ATAYP36cjs.cn.call(void 0, "block h-full", className), "aria-label": `Open ${title}`, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Card, { className: _chunk3ATAYP36cjs.cn.call(void 0, CONTENT_CARD_FRAME_CLASS, "flex h-full flex-col gap-6 p-6"), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
@@ -1920,7 +1921,7 @@ function PlatformBadge({ platform, size: size2 = "sm", showLabel = true, classNa
     return null;
   }
   const sizes = sizeClasses[size2];
-  const colors = _chunkMDBHZBW7cjs.getPlatformBrandClasses.call(void 0, platform.name);
+  const colors = _chunkRKV5B7EUcjs.getPlatformBrandClasses.call(void 0, platform.name);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
@@ -1962,7 +1963,7 @@ function AdminContentCard({
   const [loadedUrl, setLoadedUrl] = _react3.useState.call(void 0, null);
   const displayUrl = imageUrl && !imageError ? imageUrl : placeholderUrl;
   const imageLoaded = Boolean(displayUrl) && loadedUrl === displayUrl;
-  const imageBgColor = _chunkMDBHZBW7cjs.useImageEdgeColor.call(void 0, displayUrl || null, "transparent");
+  const imageBgColor = _chunkRKV5B7EUcjs.useImageEdgeColor.call(void 0, displayUrl || null, "transparent");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "article", { className: _chunk3ATAYP36cjs.cn.call(void 0, CONTENT_CARD_FRAME_CLASS, "flex h-full flex-col", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative aspect-[3/2] w-full shrink-0 overflow-hidden", style: { backgroundColor: imageBgColor }, children: displayUrl ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       !imageLoaded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 animate-pulse bg-ods-border/20" }),
@@ -2228,7 +2229,7 @@ var AiPromptCardSkeleton = EmployeeEntryCardSkeleton;
 
 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-body text-[16px] md:text-[18px] leading-[24px] md:leading-[28px] text-ods-text-secondary";
+var DESCRIPTION_CLASS = "mt-6 max-w-[640px] font-body text-[16px] content-md:text-[18px] leading-[24px] content-md:leading-[28px] text-ods-text-secondary";
 function PageHeading({
   children,
   as: Tag2 = "h1",
@@ -2247,7 +2248,7 @@ function PageHeading({
 var SENTENCE_MARK = /([.:?!]+)(?=\s|$)/g;
 var ONLY_MARKS = /^\s*[.:?!]+\s*$/;
 function headingAccentClass(platform) {
-  return platform ? _chunkMDBHZBW7cjs.getPlatformBrandClasses.call(void 0, platform).accentText : "text-ods-accent";
+  return platform ? _chunkRKV5B7EUcjs.getPlatformBrandClasses.call(void 0, platform).accentText : "text-ods-accent";
 }
 function accentSentenceMarks(node, platform) {
   return accentMarks(node, headingAccentClass(platform));
@@ -2391,8 +2392,8 @@ function ProductReleaseCard({
       } : { value: "\u2014", label: "Released", uppercase: false }
     ];
     const effectiveAuthor = _optionalChain([author, 'optionalAccess', _45 => _45.full_name]) ? author : { full_name: "\u2014", avatar_url: null, job_title: "Unknown" };
-    const gridColsClass = "md:grid-cols-4";
-    const dividerClass = "border-b md:border-b-0 md:border-r border-ods-border";
+    const gridColsClass = "content-md:grid-cols-4";
+    const dividerClass = "border-b content-md:border-b-0 content-md:border-r border-ods-border";
     const interactive = !!anchorProps || !!onClick;
     const frameClass = _chunk3ATAYP36cjs.cn.call(void 0, 
       interactive ? CONTENT_CARD_FRAME_CLASS : CONTENT_CARD_SKELETON_FRAME_CLASS,
@@ -2402,8 +2403,8 @@ function ProductReleaseCard({
       className
     );
     const innerLayout = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-4 md:flex-row md:gap-6", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full flex-shrink-0 md:w-[256px]", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative aspect-[1200/630] w-full overflow-hidden rounded-lg bg-ods-bg", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-4 content-md:flex-row content-md:gap-6", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full flex-shrink-0 content-md:w-[256px]", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative aspect-[1200/630] w-full overflow-hidden rounded-lg bg-ods-bg", children: [
           coverImage ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _chunkMGHIV4L6cjs.next_image_default,
             {
@@ -2422,8 +2423,8 @@ function ProductReleaseCard({
             "v",
             version
           ] }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-3 flex min-h-[60px] items-start md:min-h-[72px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "line-clamp-2 font-['Azeret_Mono'] text-xl font-semibold leading-tight text-ods-text-primary md:text-2xl", children: title }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-[68px] md:min-h-[78px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "line-clamp-3 font-['DM_Sans'] text-sm leading-relaxed text-ods-text-secondary md:text-base", children: _nullishCoalesce(summary, () => ( "")) }) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-3 flex min-h-[60px] items-start content-md:min-h-[72px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "line-clamp-2 font-['Azeret_Mono'] text-xl font-semibold leading-tight text-ods-text-primary content-md:text-2xl", children: title }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-[68px] content-md:min-h-[78px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "line-clamp-3 font-['DM_Sans'] text-sm leading-relaxed text-ods-text-secondary content-md:text-base", children: _nullishCoalesce(summary, () => ( "")) }) })
         ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t border-ods-border pt-3 text-ods-text-secondary text-h6", children: totalChangelog > 0 && changelogCounts ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
@@ -2581,15 +2582,15 @@ function ProductReleaseCard({
 function ProductReleaseCardSkeleton({ className, size: size2 = "lg" }) {
   if (size2 === "lg") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, CONTENT_CARD_SKELETON_FRAME_CLASS, "flex flex-col gap-4 p-6", "animate-pulse", className), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-4 md:flex-row md:gap-6", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border md:w-[256px]" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-4 content-md:flex-row content-md:gap-6", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border content-md:w-[256px]" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-3 flex items-center gap-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-7 w-20 rounded bg-ods-border" }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 md:min-h-[72px]", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[25px] w-3/4 rounded bg-ods-border md:h-[30px]" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[25px] w-1/2 rounded bg-ods-border md:h-[30px]" })
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 content-md:min-h-[72px]", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[25px] w-3/4 rounded bg-ods-border content-md:h-[30px]" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[25px] w-1/2 rounded bg-ods-border content-md:h-[30px]" })
           ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-[68px] flex-col justify-start gap-2 md:min-h-[78px]", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-[68px] flex-col justify-start gap-2 content-md:min-h-[78px]", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 w-full rounded bg-ods-border/70" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 w-11/12 rounded bg-ods-border/70" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 w-5/6 rounded bg-ods-border/70" })
@@ -2597,11 +2598,11 @@ function ProductReleaseCardSkeleton({ className, size: size2 = "lg" }) {
         ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border-t border-ods-border pt-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-5 w-2/3 rounded bg-ods-border/70" }) }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border md:grid-cols-4", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border content-md:grid-cols-4", children: [
         [0, 1, 2].map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
-            className: "flex flex-col gap-3 border-b border-ods-border p-4 md:border-b-0 md:border-r",
+            className: "flex flex-col gap-3 border-b border-ods-border p-4 content-md:border-b-0 content-md:border-r",
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-7 w-24 rounded bg-ods-border" }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 w-16 rounded bg-ods-border" })
@@ -2810,7 +2811,7 @@ function useEntityCardPlaceholder({
   siteName = "",
   aspect = "wide"
 }) {
-  const derived = _chunkMDBHZBW7cjs.useOgPlaceholderUrl.call(void 0, { title, siteName, aspect });
+  const derived = _chunkRKV5B7EUcjs.useOgPlaceholderUrl.call(void 0, { title, siteName, aspect });
   return placeholderUrl !== void 0 ? placeholderUrl : derived;
 }
 
@@ -4416,7 +4417,7 @@ function ProgramEditorialCard({
   playable,
   className
 }) {
-  const edgeColor = _chunkMDBHZBW7cjs.useImageEdgeColor.call(void 0, feature ? cover : null, "transparent");
+  const edgeColor = _chunkRKV5B7EUcjs.useImageEdgeColor.call(void 0, feature ? cover : null, "transparent");
   const meta = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: EDITORIAL_META_ROW, children: [
     date && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-ods-flamingo-pink", children: date }),
     [typeMeta, feature ? null : _optionalChain([profile, 'optionalAccess', _140 => _140.name])].filter((part) => !!part).map((part) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-[var(--spacing-system-s)] text-ods-text-secondary", children: [

package/dist/{chunk-Q76ZTHNV.js → chunk-MP2C3LJ4.js}

@@ -2,7 +2,7 @@
 import {
   embedAuthedFetch,
   hasEmbedAuthAdapter
-} from "./chunk-2T6QWNXU.js";
+} from "./chunk-NDESEPW5.js";
 
 // src/utils/search-params.ts
 function positiveInt(raw, fallback, { min = 1, max } = {}) {

package/dist/{chunk-J4K5JOLI.js → chunk-MV4HYG3B.js}

@@ -1,12 +1,12 @@
 "use client";
 import {
   PageLayout
-} from "./chunk-ENGBNKUJ.js";
+} from "./chunk-5EFZO5EB.js";
 import {
   formatBioText,
   formatDateWithTimezone,
   getProxiedImageUrl
-} from "./chunk-6YCXA7CN.js";
+} from "./chunk-CH5232HV.js";
 import {
   next_image_default
 } from "./chunk-FBZMAPWO.js";
@@ -27,8 +27,8 @@ function DetailPageSkeleton({
   showImageGallery = true,
   bare = false
 } = {}) {
-  const content = /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6 md:space-y-10", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-6", children: /* @__PURE__ */ jsx("div", { className: "h-16 w-full max-w-3xl rounded bg-ods-card md:h-20" }) }),
+  const content = /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6 content-md:space-y-10", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-6", children: /* @__PURE__ */ jsx("div", { className: "h-16 w-full max-w-3xl rounded bg-ods-card content-md:h-20" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-8 w-32 rounded bg-ods-card" }),
       /* @__PURE__ */ jsx("div", { className: "h-8 w-28 rounded bg-ods-card" }),
@@ -37,11 +37,18 @@ function DetailPageSkeleton({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: `grid grid-cols-1 md:grid-cols-${metadataColumns} w-full overflow-hidden rounded-md border border-ods-border`,
-        children: Array.from({ length: metadataColumns }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "border-b border-ods-border bg-ods-card p-4 last:border-r-0 md:border-b-0 md:border-r", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-2 h-6 w-24 rounded bg-ods-border" }),
-          /* @__PURE__ */ jsx("div", { className: "h-5 w-20 rounded bg-ods-border" })
-        ] }, i))
+        className: `grid grid-cols-1 content-md:grid-cols-${metadataColumns} w-full overflow-hidden rounded-md border border-ods-border`,
+        children: Array.from({ length: metadataColumns }).map((_, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "border-b border-ods-border bg-ods-card p-4 last:border-r-0 content-md:border-b-0 content-md:border-r",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "mb-2 h-6 w-24 rounded bg-ods-border" }),
+              /* @__PURE__ */ jsx("div", { className: "h-5 w-20 rounded bg-ods-border" })
+            ]
+          },
+          i
+        ))
       }
     ),
     showImageGallery && /* @__PURE__ */ jsx("div", { className: "flex w-full gap-6 overflow-x-auto", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx("div", { className: "h-[200px] w-[240px] shrink-0 rounded-md border border-ods-border bg-ods-card" }, i)) }),
@@ -56,7 +63,14 @@ function DetailPageSkeleton({
     ] }, section))
   ] });
   if (bare) return content;
-  return /* @__PURE__ */ jsx(PageLayout, { showHeader: false, className: "mx-auto max-w-[1280px] bg-ods-bg px-6 py-6 md:px-20 md:py-10", children: content });
+  return /* @__PURE__ */ jsx(
+    PageLayout,
+    {
+      showHeader: false,
+      className: "mx-auto max-w-[1280px] bg-ods-bg px-6 py-6 content-md:px-20 content-md:py-10",
+      children: content
+    }
+  );
 }
 
 // src/components/shared/article-author-byline.tsx
@@ -94,7 +108,7 @@ function ArticleAuthorByline({
     {
       className: cn(
         "rounded-lg border border-ods-border bg-ods-card p-6",
-        "flex flex-col items-start gap-4 md:flex-row",
+        "flex flex-col items-start gap-4 content-md:flex-row",
         className
       ),
       children: [

package/dist/{chunk-2T6QWNXU.js → chunk-NDESEPW5.js}

@@ -3,14 +3,64 @@ import {
   useChatRuntime
 } from "./chunk-E4ABZWTJ.js";
 
+// src/hooks/ui/use-isomorphic-layout-effect.ts
+import { useEffect, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+// src/hooks/ui/use-media-query.ts
+import { useState } from "react";
+
+// src/styles/layout-steps.ts
+var LAYOUT_STEPS = {
+  sm: { viewport: 640, content: 640 },
+  md: { viewport: 800, content: 720 },
+  lg: { viewport: 1280, content: 1024 },
+  xl: { viewport: 1440, content: 1216 },
+  "2xl": { viewport: 1536, content: 1312 }
+};
+
+// src/hooks/ui/use-media-query.ts
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(void 0);
+  useIsomorphicLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+    const handleChange = () => {
+      setMatches(matchMedia.matches);
+    };
+    handleChange();
+    matchMedia.addEventListener("change", handleChange);
+    return () => {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+  return matches;
+}
+var breakpoints = {
+  md: `(min-width: ${LAYOUT_STEPS.md.viewport}px)`,
+  // Tablet
+  lg: `(min-width: ${LAYOUT_STEPS.lg.viewport}px)`
+  // Desktop
+};
+function useSmUp() {
+  return useMdUp();
+}
+function useMdUp() {
+  const matches = useMediaQuery(breakpoints.md);
+  return matches === void 0 ? void 0 : matches;
+}
+function useLgUp() {
+  const matches = useMediaQuery(breakpoints.lg);
+  return matches === void 0 ? void 0 : matches;
+}
+
 // src/hooks/ui/use-is-truncated.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
 function useIsTruncated(value, options) {
   const multiline = options?.multiline ?? false;
-  const [element, setElement] = useState(null);
-  const [isTruncated, setIsTruncated] = useState(false);
+  const [element, setElement] = useState2(null);
+  const [isTruncated, setIsTruncated] = useState2(false);
   const ref = useCallback((node) => setElement(node), []);
-  useEffect(() => {
+  useEffect2(() => {
     if (!element) return void 0;
     const check = () => {
       setIsTruncated(
@@ -25,12 +75,38 @@ function useIsTruncated(value, options) {
   return { ref, isTruncated: element ? isTruncated : false };
 }
 
-// src/hooks/ui/use-isomorphic-layout-effect.ts
-import { useEffect as useEffect2, useLayoutEffect } from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect2;
+// src/hooks/ui/use-content-breakpoint.ts
+import { createContext, createElement, useContext } from "react";
+var CONTENT_BREAKPOINTS = { md: LAYOUT_STEPS.md.content, lg: LAYOUT_STEPS.lg.content };
+var ContentAreaWidthContext = createContext(null);
+function ViewportBreakpoints({ children }) {
+  return createElement(ContentAreaWidthContext.Provider, { value: null }, children);
+}
+function contentBreakpointFor(width) {
+  if (width >= CONTENT_BREAKPOINTS.lg) return "desktop";
+  if (width >= CONTENT_BREAKPOINTS.md) return "tablet";
+  return "mobile";
+}
+function useContentBreakpoint() {
+  const width = useContext(ContentAreaWidthContext);
+  const mdUp = useMdUp();
+  const lgUp = useLgUp();
+  if (width !== null) return contentBreakpointFor(width);
+  if (mdUp === void 0) return void 0;
+  if (lgUp) return "desktop";
+  return mdUp ? "tablet" : "mobile";
+}
+function useContentMdUp() {
+  const breakpoint = useContentBreakpoint();
+  return breakpoint === void 0 ? void 0 : breakpoint !== "mobile";
+}
+function useContentLgUp() {
+  const breakpoint = useContentBreakpoint();
+  return breakpoint === void 0 ? void 0 : breakpoint === "desktop";
+}
 
 // src/hooks/ui/use-image-edge-color.ts
-import { useState as useState2, useEffect as useEffect3 } from "react";
+import { useState as useState3, useEffect as useEffect3 } from "react";
 function extractEdgeColor(img) {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
@@ -86,8 +162,8 @@ function extractEdgeColor(img) {
   return `rgb(${r}, ${g}, ${b})`;
 }
 function useImageEdgeColor(imageUrl, fallback = "#000000") {
-  const [color, setColor] = useState2(fallback);
-  const [resetFor, setResetFor] = useState2({ imageUrl, fallback });
+  const [color, setColor] = useState3(fallback);
+  const [resetFor, setResetFor] = useState3({ imageUrl, fallback });
   if (resetFor.imageUrl !== imageUrl || resetFor.fallback !== fallback) {
     setResetFor({ imageUrl, fallback });
     if (!imageUrl) setColor(fallback);
@@ -732,8 +808,20 @@ function useOgPlaceholderUrl({
 }
 
 export {
-  useIsTruncated,
   useIsomorphicLayoutEffect,
+  useMediaQuery,
+  breakpoints,
+  useSmUp,
+  useMdUp,
+  useLgUp,
+  useIsTruncated,
+  CONTENT_BREAKPOINTS,
+  ContentAreaWidthContext,
+  ViewportBreakpoints,
+  contentBreakpointFor,
+  useContentBreakpoint,
+  useContentMdUp,
+  useContentLgUp,
   useImageEdgeColor,
   createLocalStorageAdapter,
   platformDisplayNames,