@flamingo-stack/openframe-frontend-core 0.0.203 → 0.0.204-snapshot.20260523020255

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.203",
+  "version": "0.0.204-snapshot.20260523020255",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,6 +18,12 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
+    "./contexts": {
+      "types": "./dist/contexts/index.d.ts",
+      "import": "./dist/contexts/index.js",
+      "require": "./dist/contexts/index.cjs",
+      "default": "./dist/contexts/index.js"
+    },
     "./components": {
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js",

package/src/components/announcement-bar.tsx

@@ -12,6 +12,7 @@ import {
 } from '../utils/announcement-storage';
 import { Announcement } from '../types/announcement';
 import { getAppType } from '../utils/app-config';
+import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
 
 // Helper that defers to renderSvgIcon so we don't need local icon imports
 const getSvgIcon = (
@@ -33,6 +34,15 @@ export function AnnouncementBar() {
   // Get the platform type for platform-specific localStorage keys
   const platform = getAppType();
 
+  // Optional endpoint runtime: when no provider is mounted (e.g. on a
+  // bare React-tree page that doesn't wrap with HubRuntimeProvider),
+  // the bar silently skips its fetch instead of throwing. Apps that DO
+  // mount the provider get the configured URL — typically
+  // '/api/announcements/active' in the hub, or a proxied path in an
+  // embedded host.
+  const endpoints = useEndpointsRuntime();
+  const announcementsUrl = endpoints?.announcementsUrl;
+
   // Helper to determine dismissal key for localStorage
   const getDismissKey = (id: string) => `${platform}-announcement-${id}-dismissed`;
   
@@ -41,9 +51,12 @@ export function AnnouncementBar() {
 
   // Fetch active announcement from API and update state + LS
   const fetchActiveAnnouncement = async () => {
+    // No provider mounted → no URL configured → skip fetch silently.
+    // Cached announcement from previous sessions still renders if present.
+    if (!announcementsUrl) return;
     try {
       // Server-side platform injection - no URL parameter needed
-      const response = await fetch(`/api/announcements/active`);
+      const response = await fetch(announcementsUrl);
       
       if (response.ok) {
         const data = await response.json();
@@ -92,13 +105,22 @@ export function AnnouncementBar() {
       setIsVisible(!isDismissed);
     }
 
+    // No provider mounted → no URL → no fetch / no polling. Cached
+    // announcement still painted above. Skip scheduling the 5-min
+    // interval entirely to avoid an idle timer + repeated short-circuit
+    // calls.
+    if (!announcementsUrl) return;
+
     // Always fetch latest on mount
     fetchActiveAnnouncement();
 
-    // Schedule refresh every 5 minutes
+    // Schedule refresh every 5 minutes. When announcementsUrl flips
+    // (e.g. provider value swap), the effect re-runs and restarts the
+    // interval against the new URL — no stale captured fetch.
     const interval = setInterval(fetchActiveAnnouncement, 300_000);
     return () => clearInterval(interval);
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [announcementsUrl]);
 
   // helpers
   const handleDismiss = () => {

package/src/components/navigation/navigation-sidebar.tsx

@@ -83,7 +83,9 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
     } else if (item.path) {
       config.onNavigate?.(item.path)
     }
-  }, [config])
+
+    if (isTablet) setTabletMinimized(true)
+  }, [config, isTablet])
 
   const { primaryItems, secondaryItems } = useMemo(() => ({
     primaryItems: config.items.filter(item => item.section !== 'secondary'),

package/src/components/shared/product-release/product-release-card-skeleton.tsx

@@ -8,23 +8,20 @@ export interface ProductReleaseCardSkeletonProps {
   className?: string
   /** Card density. Must match the loaded card's `size` prop so the loading
    *  height matches the resolved height (no layout shift on resolve). */
-  size?: 'default' | 'sm' | 'catalog'
+  size?: 'lg' | 'sm'
 }
 
-export function ProductReleaseCardSkeleton({ className, size = 'default' }: ProductReleaseCardSkeletonProps) {
-  // ----- CATALOG branch — must match ProductReleaseCard size='catalog'.
+export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductReleaseCardSkeletonProps) {
+  // ----- LG branch — must match ProductReleaseCard size='lg'.
   // Same outer frame (`bg-ods-system-greys-black border border-ods-border …
   // p-6 gap-4`). Inner: hero (16:9 cover + version pill + title + summary),
-  // changelog strip placeholder (always rendered — see note), metadata-grid
-  // footer (4 cells via grid). Heights chosen to match the loaded card's
-  // rendered metrics so the 5-card slot grid in `ReleasesList` doesn't
-  // jump on resolve.
-  //
-  // Note: the loaded card hides the changelog strip when total === 0
-  // (rare — most releases have at least one feature/fix/improvement).
-  // The skeleton always renders the placeholder; net effect is a ~28px
-  // shrink on empty-changelog releases. Documented tradeoff.
-  if (size === 'catalog') {
+  // changelog strip placeholder, metadata-grid footer (4 cells via grid).
+  // Heights chosen to match the loaded card's rendered metrics so the
+  // 5-card slot grid in `ReleasesList` doesn't jump on resolve. The
+  // loaded card ALSO always renders the changelog strip + a fixed 4-cell
+  // grid (with em-dash placeholders for missing values), so this
+  // skeleton's shape matches exactly with zero load-to-resolve reflow.
+  if (size === 'lg') {
     return (
       <div
         className={cn(
@@ -34,27 +31,62 @@ export function ProductReleaseCardSkeleton({ className, size = 'default' }: Prod
           className,
         )}
       >
-        {/* HERO */}
+        {/* HERO — placeholders use `bg-ods-border` (#3a3a3a) so they
+            contrast against the card's `bg-ods-system-greys-black`
+            (#212121) container. The metadata grid cells below use
+            `bg-ods-card` containers so `bg-ods-bg` placeholders work
+            there, but in the hero the card IS `bg-ods-card`-equivalent —
+            `bg-ods-bg` (#161616) is only 6 hex points darker than the
+            card and renders nearly invisible.
+
+            CRITICAL: title + summary use the SAME min-h containers as
+            the loaded card so total card height is byte-identical
+            between skeleton state and loaded state. Without this,
+            individual placeholder heights underrun the loaded card's
+            min-h reservations and the page jumps on resolve. */}
         <div className="flex flex-col md:flex-row gap-4 md:gap-6">
-          <div className="w-full md:w-[256px] aspect-[16/9] bg-ods-bg rounded-lg flex-shrink-0" />
+          <div className="w-full md:w-[256px] aspect-[16/9] bg-ods-border rounded-lg flex-shrink-0" />
           <div className="flex-1 min-w-0 flex flex-col">
-            {/* Version pill */}
-            <div className="h-6 w-20 bg-ods-bg rounded mb-3" />
-            {/* Title — 2 lines */}
-            <div className="h-7 w-3/4 bg-ods-bg rounded mb-2" />
-            <div className="h-7 w-1/2 bg-ods-bg rounded mb-3" />
-            {/* Summary — 2 lines */}
-            <div className="h-3 w-full bg-ods-bg/60 rounded mb-1" />
-            <div className="h-3 w-5/6 bg-ods-bg/60 rounded" />
+            {/* Version pill — mirrors `flex items-center gap-3 mb-3` in
+                the loaded card. The loaded `<span text-lg>` renders at
+                line-height 28 px (Tailwind text-lg = 18 px / 28 px LH);
+                placeholder uses `h-7` (28 px) to match exactly. */}
+            <div className="flex items-center gap-3 mb-3">
+              <div className="h-7 w-20 bg-ods-border rounded" />
+            </div>
+            {/* Title container — SAME min-h as the loaded card so the
+                card height contributed by this region matches exactly. */}
+            <div className="min-h-[60px] md:min-h-[72px] flex flex-col gap-1.5 justify-start mb-3">
+              <div className="h-[25px] md:h-[30px] w-3/4 bg-ods-border rounded" />
+              <div className="h-[25px] md:h-[30px] w-1/2 bg-ods-border rounded" />
+            </div>
+            {/* Summary container — SAME min-h as the loaded card. The
+                3 placeholder lines mirror the rendered 3-line clamp;
+                `bg-ods-border/70` keeps summary placeholders slightly
+                dimmer than title placeholders (primary vs secondary
+                text hierarchy). */}
+            <div className="min-h-[68px] md:min-h-[78px] flex flex-col gap-2 justify-start">
+              <div className="h-3 w-full bg-ods-border/70 rounded" />
+              <div className="h-3 w-11/12 bg-ods-border/70 rounded" />
+              <div className="h-3 w-5/6 bg-ods-border/70 rounded" />
+            </div>
           </div>
         </div>
 
-        {/* CHANGELOG strip placeholder — always rendered */}
+        {/* CHANGELOG strip placeholder — always rendered. Inner
+            placeholder `h-5` mirrors the loaded strip's `text-sm`
+            line-height (20 px) so total height is consistent with the
+            loaded `border-t pt-3 + text content` (~32-33 px). */}
         <div className="border-t border-ods-border pt-3">
-          <div className="h-4 w-2/3 bg-ods-bg/60 rounded" />
+          <div className="h-5 w-2/3 bg-ods-border/70 rounded" />
         </div>
 
-        {/* METADATA GRID — 4-cell placeholder */}
+        {/* METADATA GRID — 4-cell placeholder. The grid cells use
+            `bg-ods-card` containers and `bg-ods-bg` placeholders, which
+            DO contrast correctly because the cells are brighter than
+            the placeholders. Inner content heights mirror the loaded
+            cells (`text-h4` ≈ 28 px + `DM_Sans 14px leading-20`) so
+            total grid height matches the loaded ~86 px. */}
         <div className="grid grid-cols-1 md:grid-cols-4 border border-ods-border rounded-md overflow-hidden w-full">
           {[0, 1, 2].map((i) => (
             <div
@@ -62,8 +94,8 @@ export function ProductReleaseCardSkeleton({ className, size = 'default' }: Prod
               className="bg-ods-card p-4 flex flex-col gap-3 border-b md:border-b-0 md:border-r border-ods-border"
             >
               <div className="flex flex-col gap-2">
-                <div className="h-6 w-24 bg-ods-bg rounded" />
-                <div className="h-3 w-16 bg-ods-bg/60 rounded" />
+                <div className="h-7 w-24 bg-ods-bg rounded" />
+                <div className="h-4 w-16 bg-ods-bg/60 rounded" />
               </div>
             </div>
           ))}
@@ -71,8 +103,8 @@ export function ProductReleaseCardSkeleton({ className, size = 'default' }: Prod
           <div className="bg-ods-card p-4 flex items-center gap-3">
             <div className="h-10 w-10 rounded-full bg-ods-bg shrink-0" />
             <div className="flex flex-col gap-2 flex-1 min-w-0">
-              <div className="h-4 w-3/4 bg-ods-bg rounded" />
-              <div className="h-3 w-1/2 bg-ods-bg/60 rounded" />
+              <div className="h-5 w-3/4 bg-ods-bg rounded" />
+              <div className="h-4 w-1/2 bg-ods-bg/60 rounded" />
             </div>
           </div>
         </div>
@@ -119,44 +151,8 @@ export function ProductReleaseCardSkeleton({ className, size = 'default' }: Prod
     )
   }
 
-  return (
-    <div
-      className={cn(
-        'bg-ods-card border border-ods-border rounded-[6px]',
-        'flex flex-col md:flex-row',
-        'items-start md:items-center',
-        'gap-3 md:gap-4',
-        'p-4',
-        'animate-pulse',
-        className
-      )}
-    >
-      {/* Left column - content */}
-      <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-2">
-        {/* Title skeleton - 2 lines height */}
-        <div className="min-h-[48px] flex items-center">
-          <div className="flex flex-col gap-1 w-full">
-            <div className="h-[24px] w-3/4 bg-ods-border rounded" />
-            <div className="h-[24px] w-1/2 bg-ods-border rounded" />
-          </div>
-        </div>
-        {/* Description skeleton - 3 lines */}
-        <div className="flex flex-col gap-1">
-          <div className="h-[24px] w-full bg-ods-border rounded" />
-          <div className="h-[24px] w-full bg-ods-border rounded" />
-          <div className="h-[24px] w-2/3 bg-ods-border rounded" />
-        </div>
-      </div>
-
-      {/* Right column - version + date */}
-      <div className="flex items-center gap-2 w-full md:w-auto justify-start md:justify-end shrink-0">
-        <div className="w-[200px] flex flex-col justify-center gap-2">
-          <div className="h-[24px] w-20 bg-ods-border rounded" />
-          <div className="h-[20px] w-32 bg-ods-border rounded" />
-        </div>
-        {/* Icon column */}
-        <div className="h-6 w-6 bg-ods-border rounded shrink-0 mx-3" />
-      </div>
-    </div>
-  )
+  // Unreachable — `size` is typed `'lg' | 'sm'` and both branches return
+  // above. Kept as a defensive throw so a future variant addition that
+  // forgets to return doesn't silently render `undefined`.
+  throw new Error(`ProductReleaseCardSkeleton: unsupported size '${size as string}'`)
 }