@flamingo-stack/openframe-frontend-core 0.0.702 → 0.0.703-snapshot.20261006080901

package/dist/{chunk-6YCXA7CN.js → chunk-CH5232HV.js}

@@ -3,12 +3,13 @@ import {
   next_image_default
 } from "./chunk-FBZMAPWO.js";
 import {
+  ViewportBreakpoints,
   getPlatformBrandClasses,
   useAuthedImageSrc,
   useImageEdgeColor,
   useIsTruncated,
   useOgPlaceholderUrl
-} from "./chunk-2T6QWNXU.js";
+} from "./chunk-NDESEPW5.js";
 import {
   FigmaIcon,
   ImageIcon,
@@ -359,7 +360,7 @@ function CardHorizontal({ icon, title, description, className = "", borderLeft =
     "div",
     {
       className: cn(
-        "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
       ),
@@ -1034,7 +1035,7 @@ var Modal = forwardRef3(({ isOpen, onClose, children, className }, ref) => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs5("div", { className: "fixed inset-0 z-[1300] flex items-center justify-center", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "ods-viewport-layer fixed inset-0 z-[1300] flex items-center justify-center", children: [
     /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 bg-ods-overlay", onClick: onClose, "aria-hidden": "true" }),
     /* @__PURE__ */ jsx6(
       "div",
@@ -1046,7 +1047,7 @@ var Modal = forwardRef3(({ isOpen, onClose, children, className }, ref) => {
         ),
         role: "dialog",
         "aria-modal": "true",
-        children
+        children: /* @__PURE__ */ jsx6(ViewportBreakpoints, { children })
       }
     )
   ] });
@@ -2228,7 +2229,7 @@ import { Children, Fragment as Fragment6, cloneElement, isValidElement } from "r
 import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs16 } 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-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",
@@ -2391,8 +2392,8 @@ function ProductReleaseCard({
       } : { value: "\u2014", label: "Released", uppercase: false }
     ];
     const effectiveAuthor = author?.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 = cn(
       interactive ? CONTENT_CARD_FRAME_CLASS : CONTENT_CARD_SKELETON_FRAME_CLASS,
@@ -2402,8 +2403,8 @@ function ProductReleaseCard({
       className
     );
     const innerLayout = /* @__PURE__ */ jsxs17(Fragment8, { children: [
-      /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-4 md:flex-row md:gap-6", children: [
-        /* @__PURE__ */ jsx27("div", { className: "w-full flex-shrink-0 md:w-[256px]", children: /* @__PURE__ */ jsxs17("div", { className: "relative aspect-[1200/630] w-full overflow-hidden rounded-lg bg-ods-bg", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-4 content-md:flex-row content-md:gap-6", children: [
+        /* @__PURE__ */ jsx27("div", { className: "w-full flex-shrink-0 content-md:w-[256px]", children: /* @__PURE__ */ jsxs17("div", { className: "relative aspect-[1200/630] w-full overflow-hidden rounded-lg bg-ods-bg", children: [
           coverImage ? /* @__PURE__ */ jsx27(
             next_image_default,
             {
@@ -2422,8 +2423,8 @@ function ProductReleaseCard({
             "v",
             version
           ] }) }),
-          /* @__PURE__ */ jsx27("div", { className: "mb-3 flex min-h-[60px] items-start md:min-h-[72px]", children: /* @__PURE__ */ jsx27("h3", { className: "line-clamp-2 font-['Azeret_Mono'] text-xl font-semibold leading-tight text-ods-text-primary md:text-2xl", children: title }) }),
-          /* @__PURE__ */ jsx27("div", { className: "min-h-[68px] md:min-h-[78px]", children: /* @__PURE__ */ jsx27("p", { className: "line-clamp-3 font-['DM_Sans'] text-sm leading-relaxed text-ods-text-secondary md:text-base", children: summary ?? "" }) })
+          /* @__PURE__ */ jsx27("div", { className: "mb-3 flex min-h-[60px] items-start content-md:min-h-[72px]", children: /* @__PURE__ */ jsx27("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__ */ jsx27("div", { className: "min-h-[68px] content-md:min-h-[78px]", children: /* @__PURE__ */ jsx27("p", { className: "line-clamp-3 font-['DM_Sans'] text-sm leading-relaxed text-ods-text-secondary content-md:text-base", children: summary ?? "" }) })
         ] })
       ] }),
       /* @__PURE__ */ jsx27("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__ */ jsxs17(Fragment8, { children: [
@@ -2581,15 +2582,15 @@ import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function ProductReleaseCardSkeleton({ className, size: size2 = "lg" }) {
   if (size2 === "lg") {
     return /* @__PURE__ */ jsxs18("div", { className: cn(CONTENT_CARD_SKELETON_FRAME_CLASS, "flex flex-col gap-4 p-6", "animate-pulse", className), children: [
-      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-4 md:flex-row md:gap-6", children: [
-        /* @__PURE__ */ jsx28("div", { className: "aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border md:w-[256px]" }),
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-4 content-md:flex-row content-md:gap-6", children: [
+        /* @__PURE__ */ jsx28("div", { className: "aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border content-md:w-[256px]" }),
         /* @__PURE__ */ jsxs18("div", { className: "flex min-w-0 flex-1 flex-col", children: [
           /* @__PURE__ */ jsx28("div", { className: "mb-3 flex items-center gap-3", children: /* @__PURE__ */ jsx28("div", { className: "h-7 w-20 rounded bg-ods-border" }) }),
-          /* @__PURE__ */ jsxs18("div", { className: "mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 md:min-h-[72px]", children: [
-            /* @__PURE__ */ jsx28("div", { className: "h-[25px] w-3/4 rounded bg-ods-border md:h-[30px]" }),
-            /* @__PURE__ */ jsx28("div", { className: "h-[25px] w-1/2 rounded bg-ods-border md:h-[30px]" })
+          /* @__PURE__ */ jsxs18("div", { className: "mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 content-md:min-h-[72px]", children: [
+            /* @__PURE__ */ jsx28("div", { className: "h-[25px] w-3/4 rounded bg-ods-border content-md:h-[30px]" }),
+            /* @__PURE__ */ jsx28("div", { className: "h-[25px] w-1/2 rounded bg-ods-border content-md:h-[30px]" })
           ] }),
-          /* @__PURE__ */ jsxs18("div", { className: "flex min-h-[68px] flex-col justify-start gap-2 md:min-h-[78px]", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "flex min-h-[68px] flex-col justify-start gap-2 content-md:min-h-[78px]", children: [
             /* @__PURE__ */ jsx28("div", { className: "h-3 w-full rounded bg-ods-border/70" }),
             /* @__PURE__ */ jsx28("div", { className: "h-3 w-11/12 rounded bg-ods-border/70" }),
             /* @__PURE__ */ jsx28("div", { className: "h-3 w-5/6 rounded bg-ods-border/70" })
@@ -2597,11 +2598,11 @@ function ProductReleaseCardSkeleton({ className, size: size2 = "lg" }) {
         ] })
       ] }),
       /* @__PURE__ */ jsx28("div", { className: "border-t border-ods-border pt-3", children: /* @__PURE__ */ jsx28("div", { className: "h-5 w-2/3 rounded bg-ods-border/70" }) }),
-      /* @__PURE__ */ jsxs18("div", { className: "grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border md:grid-cols-4", children: [
+      /* @__PURE__ */ jsxs18("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__ */ jsx28(
           "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__ */ jsxs18("div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ jsx28("div", { className: "h-7 w-24 rounded bg-ods-border" }),
               /* @__PURE__ */ jsx28("div", { className: "h-4 w-16 rounded bg-ods-border" })

package/dist/{chunk-UIBSSVON.cjs → chunk-D7BTSVMS.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkHUOLB7ZNcjs = require('./chunk-HUOLB7ZN.cjs');
+var _chunkOHFS7VOUcjs = require('./chunk-OHFS7VOU.cjs');
 
 
 var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
@@ -116,7 +116,7 @@ function PersistentPaginationWrapper({
             },
             "aria-hidden": isPaginationDisabled,
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkHUOLB7ZNcjs.UnifiedPagination,
+              _chunkOHFS7VOUcjs.UnifiedPagination,
               {
                 currentPage: displayCurrentPage,
                 totalPages: displayTotalPages,

package/dist/{chunk-BO5ZHDA4.js → chunk-ERCV6HHJ.js}

@@ -2,14 +2,14 @@
 import {
   ArticleAuthorByline,
   DetailPageSkeleton
-} from "./chunk-JOY6HVPV.js";
+} from "./chunk-XATTBO5X.js";
 import {
   DocSearchBar,
   useDocSearch
-} from "./chunk-446KS5BG.js";
+} from "./chunk-5QJDM6UV.js";
 import {
   useSelfFetch
-} from "./chunk-5FFNNJM7.js";
+} from "./chunk-VR2ZLFCP.js";
 import {
   EntityTagBadges,
   FilterPillRow,
@@ -18,13 +18,13 @@ import {
   PageShell,
   RichMarkdownRenderer,
   resolveContentHref
-} from "./chunk-CZ34HXDW.js";
+} from "./chunk-4KGXLVCF.js";
 import {
   EntityVideoSection,
   VideoBitesStrip,
   useCaptions,
   useVideoWarmup
-} from "./chunk-6JPQDYYY.js";
+} from "./chunk-2JDVL7UV.js";
 import {
   useRouter,
   useSearchParams
@@ -34,10 +34,10 @@ import {
   OnboardingGuideCard,
   OnboardingGuideCardSkeleton,
   toStripProfile
-} from "./chunk-6YCXA7CN.js";
+} from "./chunk-CH5232HV.js";
 import {
   buildOgPlaceholderUrl
-} from "./chunk-2T6QWNXU.js";
+} from "./chunk-NDESEPW5.js";
 import {
   useChatRuntime
 } from "./chunk-E4ABZWTJ.js";

package/dist/{chunk-5V6O73EH.js → chunk-FLKJYMVB.js}

@@ -411,9 +411,9 @@ var SkeletonGrid = forwardRef5(
         ref,
         className: cn(
           `grid grid-cols-1 gap-6`,
-          columns === 2 && "md:grid-cols-2",
-          columns === 3 && "md:grid-cols-3",
-          columns === 4 && "md:grid-cols-4",
+          columns === 2 && "content-md:grid-cols-2",
+          columns === 3 && "content-md:grid-cols-3",
+          columns === 4 && "content-md:grid-cols-4",
           className
         ),
         ...props,

package/dist/{chunk-Z5HDCZAS.js → chunk-FXENTYE5.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   EmptyState
-} from "./chunk-OGLCD3UL.js";
+} from "./chunk-MFFCUVWG.js";
 import {
   OPENFRAME_DEV_SECTIONS,
   PageLayout,
@@ -10,7 +10,7 @@ import {
   StatusFilterComponent,
   TASK_TYPE_LABELS,
   TASK_TYPE_TEXT_COLORS
-} from "./chunk-CZ34HXDW.js";
+} from "./chunk-4KGXLVCF.js";
 import {
   usePathname,
   useRouter,
@@ -20,7 +20,7 @@ import {
   AvatarStack,
   StatusBadge,
   getStatusColorScheme
-} from "./chunk-6YCXA7CN.js";
+} from "./chunk-CH5232HV.js";
 import {
   next_link_default
 } from "./chunk-DAAVMYUT.js";
@@ -107,7 +107,7 @@ function DevSectionView({ sectionKey, hero, preControls, children, showHeading =
         hero.title ?? section.hero.title
       ] }),
       /* @__PURE__ */ jsx2("p", { className: "max-w-3xl text-ods-text-secondary text-h4", children: hero.description })
-    ] }) : /* @__PURE__ */ jsx2("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxs("h2", { className: "font-['Azeret_Mono'] text-[32px] font-semibold leading-[40px] tracking-[-0.64px] text-ods-text-primary md:text-[40px] md:leading-[48px] md:tracking-[-0.8px] lg:text-[48px] lg:leading-[56px] lg:tracking-[-0.96px]", children: [
+    ] }) : /* @__PURE__ */ jsx2("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxs("h2", { className: "font-['Azeret_Mono'] text-[32px] font-semibold leading-[40px] tracking-[-0.64px] text-ods-text-primary content-md:text-[40px] content-md:leading-[48px] content-md:tracking-[-0.8px] content-lg:text-[48px] content-lg:leading-[56px] content-lg:tracking-[-0.96px]", children: [
       section.hero.title,
       /* @__PURE__ */ jsx2("span", { className: "text-ods-accent", children: ":" })
     ] }) })),
@@ -184,9 +184,9 @@ function DevCardRowContent({
   emptyDescription = "No description provided",
   rightBadges
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] md:flex-row md:gap-[16px]", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] md:w-auto md:gap-[16px]", children: [
-      /* @__PURE__ */ jsx4("div", { className: "flex min-h-[24px] items-center", children: /* @__PURE__ */ jsx4("h3", { className: "line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 md:truncate", children: title }) }),
+  return /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]", children: [
+      /* @__PURE__ */ jsx4("div", { className: "flex min-h-[24px] items-center", children: /* @__PURE__ */ jsx4("h3", { className: "line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate", children: title }) }),
       /* @__PURE__ */ jsx4("div", { className: "flex min-h-[20px] items-center", children: /* @__PURE__ */ jsx4("p", { className: "truncate uppercase tracking-[-0.28px] text-ods-text-secondary text-h5", children: subtitle }) }),
       /* @__PURE__ */ jsx4("div", { className: "flex min-h-[72px] items-center", children: /* @__PURE__ */ jsx4("p", { className: "line-clamp-3 break-words text-ods-text-secondary text-h4", children: description || emptyDescription }) })
     ] }),
@@ -194,8 +194,8 @@ function DevCardRowContent({
   ] });
 }
 function DevCardRowSkeleton() {
-  return /* @__PURE__ */ jsx4("div", { className: "border-b border-ods-border p-[12px] last:border-b-0 md:p-[16px]", children: /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] md:flex-row md:gap-[16px]", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] md:w-auto md:gap-[16px]", children: [
+  return /* @__PURE__ */ jsx4("div", { className: "border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]", children: /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]", children: [
       /* @__PURE__ */ jsx4("div", { className: "flex min-h-[24px] items-center", children: /* @__PURE__ */ jsx4("div", { className: "h-[20px] w-full animate-pulse rounded bg-ods-border" }) }),
       /* @__PURE__ */ jsx4("div", { className: "flex min-h-[20px] items-center", children: /* @__PURE__ */ jsx4("div", { className: "h-[20px] w-1/2 animate-pulse rounded bg-ods-border" }) }),
       /* @__PURE__ */ jsx4("div", { className: "flex min-h-[72px] items-center", children: /* @__PURE__ */ jsxs2("div", { className: "flex-1 space-y-1", children: [
@@ -235,14 +235,14 @@ function DeliveryRow({ item, href, target, caption, id, className }) {
   const statusBadgeScheme = getStatusColorScheme(item.status);
   const relativeTime = getRelativeTime(item.dateUpdated);
   const subtitle = `ACTIVE ${relativeTime}${item.listNames.length > 0 ? `, ${item.listNames.join(", ")}` : ""}, ${item.id}`;
-  const inner = /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] md:flex-row md:gap-[16px]", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] md:w-auto md:gap-[16px]", children: [
+  const inner = /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]", children: [
       caption && /* @__PURE__ */ jsx5("p", { className: "text-ods-text-secondary text-h5", children: caption }),
-      /* @__PURE__ */ jsx5("div", { className: "flex min-h-[24px] items-center md:min-h-[24px]", children: /* @__PURE__ */ jsx5("h3", { className: "line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 md:truncate", children: item.title }) }),
+      /* @__PURE__ */ jsx5("div", { className: "flex min-h-[24px] items-center content-md:min-h-[24px]", children: /* @__PURE__ */ jsx5("h3", { className: "line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate", children: item.title }) }),
       /* @__PURE__ */ jsx5("div", { className: "flex min-h-[20px] items-center", children: /* @__PURE__ */ jsx5("p", { className: "truncate uppercase tracking-[-0.28px] text-ods-text-secondary text-h5", suppressHydrationWarning: true, children: subtitle }) }),
       /* @__PURE__ */ jsx5("div", { className: "flex min-h-[72px] items-center", children: /* @__PURE__ */ jsx5("p", { className: "line-clamp-3 break-words text-ods-text-secondary text-h4", children: item.description || "No description provided" }) })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch md:w-auto md:flex-col md:items-end md:self-start", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch content-md:w-auto content-md:flex-col content-md:items-end content-md:self-start", children: [
       /* @__PURE__ */ jsx5(
         StatusBadge,
         {
@@ -264,7 +264,7 @@ function DeliveryRow({ item, href, target, caption, id, className }) {
         AvatarStack,
         {
           size: "xs",
-          className: "ml-auto md:ml-0",
+          className: "ml-auto content-md:ml-0",
           people: item.assignees.map((a) => ({
             key: a.id,
             name: a.name ?? "Unknown",
@@ -275,7 +275,7 @@ function DeliveryRow({ item, href, target, caption, id, className }) {
     ] })
   ] });
   const baseClass = cn(
-    "block p-[12px] text-inherit no-underline transition-colors duration-150 md:p-[16px]",
+    "block p-[12px] text-inherit no-underline transition-colors duration-150 content-md:p-[16px]",
     // `scroll-mt-24` is paid for whether `id` is set or not (it's a
     // single Tailwind utility, no runtime cost). Keeping it
     // unconditional means a future caller adding `id` doesn't also