@flamingo-stack/openframe-frontend-core 0.0.473 → 0.0.474-snapshot.20260724131235

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.473",
+  "version": "0.0.474-snapshot.20260724131235",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/auth/auth-shell.tsx

@@ -20,13 +20,19 @@ export interface AuthShellProps {
 /**
  * Responsive layout shell for the auth pages. Desktop shows a two-column split
  * (form left, marketing right); tablet and mobile stack into a single centered
- * column (logo → tabs → form → benefits → powered-by). Content is top-aligned.
+ * column (tabs → form → benefits → powered-by). Content is top-aligned. The
+ * wordmark appears only in the desktop marketing column — narrow screens go
+ * without it (in the native mobile shell a top logo sat under the status bar
+ * and was clipped inconsistently across devices).
+ *
+ * `of-auth-shell` on the root is a stable hook for shell/consumer CSS (the
+ * native mobile shell pads it by the top safe-area inset).
  */
 export function AuthShell({ tabs, children, benefits, footer, className }: AuthShellProps) {
   const benefitsNode = benefits ?? <AuthBenefitsPanel />
 
   return (
-    <div className={cn('min-h-screen w-full bg-ods-bg lg:flex lg:h-screen lg:overflow-hidden', className)}>
+    <div className={cn('of-auth-shell min-h-screen w-full bg-ods-bg lg:flex lg:h-screen lg:overflow-hidden', className)}>
       {/* Main column — form */}
       <div className="flex min-h-screen w-full flex-col items-center p-[var(--spacing-system-l)] lg:h-full lg:min-h-0 lg:w-1/2 lg:justify-start lg:overflow-y-auto lg:px-[var(--spacing-system-xl)] lg:py-[var(--spacing-system-xxl)]">
         <div
@@ -35,11 +41,6 @@ export function AuthShell({ tabs, children, benefits, footer, className }: AuthS
             footer && 'lg:min-h-full',
           )}
         >
-          {/* Logo — narrow screens only (desktop shows the logo in the right column) */}
-          <div className="flex w-full flex-col items-center gap-[var(--spacing-system-l)] lg:hidden">
-            <OpenFrameWordmark />
-          </div>
-
           {/* Full width on mobile; fixed 320px from tablet up (matches desktop) */}
           {tabs && <div className="w-full md:max-w-[320px]">{tabs}</div>}
           <div className="w-full">{children}</div>

package/src/components/navigation/mobile-burger-menu.tsx

@@ -79,10 +79,11 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
         disabled={disabled}
         className={cn(
           "flex items-center gap-1 p-3 relative",
+          "focus:outline-none focus-visible:outline-none",
           "transition-colors duration-200",
           "bg-ods-card border border-ods-border rounded-md",
           !disabled && "hover:bg-ods-bg-hover",
-          isGridItem ? "flex-1 min-w-0" : "w-full",
+          isGridItem ? "w-full min-w-0" : "w-full",
           // Active state
           isActive && !disabled && "border-ods-accent",
           // Disabled state
@@ -111,29 +112,18 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
     )
   }
 
-  // Render grid of navigation items (2 columns)
-  const renderNavigationGrid = (items: NavigationSidebarItem[]) => {
-    const rows: NavigationSidebarItem[][] = []
-    for (let i = 0; i < items.length; i += 2) {
-      rows.push(items.slice(i, i + 2))
-    }
-
-    return (
-      <div className="flex flex-col gap-3">
-        {rows.map((row, rowIndex) => (
-          <div key={rowIndex} className="flex gap-3">
-            {row.map((item) => (
-              <React.Fragment key={item.id}>
-                {renderNavigationItem(item, true)}
-              </React.Fragment>
-            ))}
-            {/* Fill empty space if odd number of items in last row */}
-            {row.length === 1 && <div className="flex-1" />}
-          </div>
-        ))}
-      </div>
-    )
-  }
+  // Render grid of navigation items (2 columns). CSS grid keeps a lone last-row
+  // item exactly one column wide (aligned with the column above) instead of
+  // stretching to fill the row.
+  const renderNavigationGrid = (items: NavigationSidebarItem[]) => (
+    <div className="grid grid-cols-2 gap-3">
+      {items.map((item) => (
+        <React.Fragment key={item.id}>
+          {renderNavigationItem(item, true)}
+        </React.Fragment>
+      ))}
+    </div>
+  )
 
   return (
     <>

package/src/components/ui/entity-image.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React from 'react'
+import { useAuthedImageSrc } from '../../hooks/use-authed-image-src'
 import { cn } from '../../utils/cn'
 import { getFirstLastInitials } from '../../utils/format'
 
@@ -13,13 +14,14 @@ export interface EntityImageProps {
 }
 
 export function EntityImage({ src, alt, fallbackText, className }: EntityImageProps) {
+  const resolvedSrc = useAuthedImageSrc(src)
   const [imageFailed, setImageFailed] = React.useState(false)
 
   React.useEffect(() => {
     setImageFailed(false)
-  }, [src])
+  }, [resolvedSrc])
 
-  const showFallback = imageFailed || !src
+  const showFallback = imageFailed || !resolvedSrc
   const initials = getFirstLastInitials(fallbackText ?? alt)
 
   if (showFallback) {
@@ -38,7 +40,7 @@ export function EntityImage({ src, alt, fallbackText, className }: EntityImagePr
 
   return (
     <img
-      src={src ?? undefined}
+      src={resolvedSrc}
       alt={alt ?? ''}
       onError={() => setImageFailed(true)}
       className={cn(

package/src/components/ui/image-uploader.tsx

@@ -5,6 +5,7 @@ import { Loader2 } from "lucide-react"
 import { ImagePlusIcon } from "../icons-v2-generated/audio-and-visual/image-plus-icon"
 import { Refresh02VrIcon } from "../icons-v2-generated/media-playback/refresh-02-vr-icon"
 import { TrashIcon } from "../icons-v2-generated/interface/trash-icon"
+import { useAuthedImageSrc } from "../../hooks/use-authed-image-src"
 import { cn } from "../../utils/cn"
 import { FieldWrapper } from "./field-wrapper"
 
@@ -98,6 +99,12 @@ export function ImageUploader({
   const [validationError, setValidationError] = React.useState<string | null>(null)
 
   const interactive = !disabled && !loading
+  // Bearer-mode shells: swap a gateway URL for an authed blob URL (native
+  // <img> loads can't carry Authorization); pass-through everywhere else,
+  // including local blob/data preview URLs. `hasImage` stays keyed on the
+  // caller's `value` so the preview chrome doesn't flash to the empty
+  // state while the blob fetch is in flight.
+  const resolvedValue = useAuthedImageSrc(value)
   const hasImage = Boolean(value)
   const displayError = error || validationError || undefined
   const resolvedHint = hint === undefined ? `Max. size: ${formatSize(maxSize)}` : hint
@@ -196,18 +203,20 @@ export function ImageUploader({
         {hasImage ? (
           <>
             <div className="relative min-h-0 w-full flex-1 overflow-hidden rounded-md">
-              <img
-                src={value}
-                alt={alt}
-                className={cn(
-                  "pointer-events-none absolute inset-0 size-full",
-                  objectFit === "cover" && "object-cover",
-                  objectFit === "contain" && "object-contain",
-                  objectFit === "fill" && "object-fill",
-                  objectFit === "none" && "object-none",
-                  objectFit === "scale-down" && "object-scale-down",
-                )}
-              />
+              {resolvedValue && (
+                <img
+                  src={resolvedValue}
+                  alt={alt}
+                  className={cn(
+                    "pointer-events-none absolute inset-0 size-full",
+                    objectFit === "cover" && "object-cover",
+                    objectFit === "contain" && "object-contain",
+                    objectFit === "fill" && "object-fill",
+                    objectFit === "none" && "object-none",
+                    objectFit === "scale-down" && "object-scale-down",
+                  )}
+                />
+              )}
             </div>
 
             <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-4">

package/src/components/ui/simple-markdown-renderer.tsx

@@ -9,6 +9,7 @@ import rehypeHighlight from 'rehype-highlight';
 import rehypeRaw from 'rehype-raw';
 import { visit } from 'unist-util-visit';
 import Image from '../../embed-shims/next-image';
+import { useAuthedImageSrc } from '../../hooks/use-authed-image-src';
 import { AlertCircleIcon } from '../icons-v2-generated';
 import { cn } from '../../utils/cn';
 import type { ResolveLinkResult } from '../../types/doc-source';
@@ -453,6 +454,58 @@ const MermaidDiagram: React.FC<{ chart: string }> = ({ chart }) => {
   );
 };
 
+// ---------------------------------------------------------------------------
+// MarkdownContentImage
+// ---------------------------------------------------------------------------
+// Inline content image renderer. Used by blog posts, docs, AND chat
+// messages (where users may attach screenshots / photos via the +
+// attachment button). A standalone component (rather than inline JSX in
+// the `img` renderer) because it needs `useAuthedImageSrc`: in
+// bearer-mode native shells a gateway-hosted image can't load via a
+// plain `<img>` (no Authorization header on native asset loads), so the
+// hook swaps in an authed blob URL; everywhere else it passes `src`
+// through untouched. While the blob fetch is in flight the component
+// renders nothing — same as the no-src case.
+//
+// Sizing rules (2025-2026 best practice — Claude.ai, ChatGPT,
+// iMessage, Slack, Discord inline image patterns):
+//
+//   - CAP max-width at 400px so inline images don't blow out the
+//     message column on wide panels. Click-to-expand opens a
+//     full-resolution modal for users who need detail.
+//   - CAP max-height at 400px so portrait-orientation images
+//     don't dominate vertical space (a 1000x3000 phone screenshot
+//     would otherwise push the next message off-screen).
+//   - Small images render at NATURAL pixel size — a 64x64
+//     thumbnail stays 64x64, not stretched to fill the column.
+//   - `object-contain` preserves aspect ratio when both dimensions
+//     are constrained (long landscape, tall portrait).
+//
+// Implementation: Next.js `<Image>` — the project's canonical
+// image primitive (WebP/AVIF conversion, responsive `srcset`, lazy
+// loading, async decode). `width={400} height={400}` are REQUIRED by
+// Next.js `<Image>` (non-`fill` mode throws without them) but they're
+// effectively a CEILING here, not the display size — the CSS overrides
+// (`w-auto h-auto max-w-full max-h-[400px]`) drive the actual rendered
+// size, and the inline `style={{ width: 'auto', height: 'auto' }}` is
+// belt-and-suspenders against the rendered `<img>`'s HTML width/height
+// attributes.
+const MarkdownContentImage: React.FC<{ src: string; alt?: string }> = ({ src, alt }) => {
+  const resolvedSrc = useAuthedImageSrc(src);
+  if (!resolvedSrc) return null;
+  return (
+    <Image
+      src={resolvedSrc}
+      alt={alt ?? 'No image available'}
+      width={400}
+      height={400}
+      sizes="(max-width: 400px) 100vw, 400px"
+      className="max-w-full max-h-[400px] w-auto h-auto rounded-lg object-contain"
+      style={{ width: 'auto', height: 'auto' }}
+    />
+  );
+};
+
 // ---------------------------------------------------------------------------
 // Utility: extract plain text from React children
 // ---------------------------------------------------------------------------
@@ -820,66 +873,12 @@ const SimpleMarkdownRendererImpl: React.FC<SimpleMarkdownRendererProps> = ({
     },
 
     // --- images ---
-    // Inline content image renderer. Used by blog posts, docs, AND chat
-    // messages (where users may attach screenshots / photos via the +
-    // attachment button).
-    //
-    // Sizing rules (2025-2026 best practice — Claude.ai, ChatGPT,
-    // iMessage, Slack, Discord inline image patterns):
-    //
-    //   - CAP max-width at 400px so inline images don't blow out the
-    //     message column on wide panels. Click-to-expand opens a
-    //     full-resolution modal for users who need detail.
-    //   - CAP max-height at 400px so portrait-orientation images
-    //     don't dominate vertical space (a 1000x3000 phone screenshot
-    //     would otherwise push the next message off-screen).
-    //   - Small images render at NATURAL pixel size — a 64x64
-    //     thumbnail stays 64x64, not stretched to fill the column.
-    //   - `object-contain` preserves aspect ratio when both dimensions
-    //     are constrained (long landscape, tall portrait).
-    //
-    // Implementation: Next.js `<Image>` — the project's canonical
-    // image primitive. Gives us:
-    //   - WebP/AVIF format conversion for modern browsers (smaller
-    //     bytes for the same visual quality).
-    //   - Responsive `srcset` via the `sizes` prop (browser picks the
-    //     right variant for the viewport).
-    //   - Automatic lazy-loading (`loading="lazy"` by default, mid-
-    //     page images skipped until they near the viewport).
-    //   - Automatic `decoding="async"` so image decode doesn't block
-    //     paint.
-    //
-    // `width={400} height={400}` props are REQUIRED by Next.js
-    // `<Image>` (non-`fill` mode throws without them) but they're
-    // effectively a CEILING here, not the display size — the CSS
-    // overrides (`w-auto h-auto max-w-full max-h-[400px]`) drive
-    // the actual rendered size. The inline `style={{ width: 'auto',
-    // height: 'auto' }}` is belt-and-suspenders: Next.js Image sets
-    // matching HTML `width`/`height` attributes on the rendered
-    // `<img>` and inline style wins over both HTML attributes AND
-    // utility classes regardless of CSS-specificity surprises.
-    //
-    // Layout reservation trade-off: until image bytes arrive, the
-    // browser may reserve a placeholder box up to 400x400 (the props'
-    // intrinsic-ratio hint). Once loaded, the box collapses to the
-    // natural size if smaller. This is the standard Next.js Image
-    // behavior across the codebase — accepted for the optimizer +
-    // responsive-srcset benefits. Chat attachments hosted in side
-    // panels see this only on first render of a fresh attachment
-    // (cached re-renders pop in without a perceptible shift).
+    // Delegates to MarkdownContentImage (module scope, above) — sizing
+    // rules, Next.js <Image> rationale, and the bearer-mode authed-src
+    // handling are documented there.
     img: ({ src, alt }: any) => {
       if (!src || typeof src !== 'string' || src.trim() === '') return null;
-      return (
-        <Image
-          src={src}
-          alt={alt ?? 'No image available'}
-          width={400}
-          height={400}
-          sizes="(max-width: 400px) 100vw, 400px"
-          className="max-w-full max-h-[400px] w-auto h-auto rounded-lg object-contain"
-          style={{ width: 'auto', height: 'auto' }}
-        />
-      );
+      return <MarkdownContentImage src={src} alt={alt} />;
     },
 
     // --- lists ---

package/src/components/ui/square-avatar.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import Image from "../../embed-shims/next-image";
+import { useAuthedImageSrc } from "../../hooks/use-authed-image-src";
 import { cn } from "../../utils/cn";
 import { getFirstLastInitials } from "../../utils/format";
 
@@ -22,6 +23,7 @@ interface SquareAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarProps>(
   ({ className, src, alt, size = 'md', sizePx, fallback, variant = 'square', initialsClassName, style, ...props }, ref) => {
+    const resolvedSrc = useAuthedImageSrc(src)
     const sizeClasses = {
       sm: 'h-8 w-8',
       md: 'h-10 w-10',
@@ -66,14 +68,14 @@ const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarPro
           // keeps the later class).
           'flex items-center justify-center text-xs font-medium text-[color:var(--ods-avatar-initials,var(--color-text-primary))]',
           initialsClassName,
-          src && 'hidden'
+          resolvedSrc && 'hidden'
         )}>
           {getFirstLastInitials(fallback || alt) || '?'}
         </div>
-        {src && (
+        {resolvedSrc && (
           <Image
             className="absolute -inset-px h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover"
-            src={src}
+            src={resolvedSrc}
             alt={alt || ''}
             width={sizePx ?? sizePxBySize[size]}
             height={sizePx ?? sizePxBySize[size]}

package/src/hooks/index.ts

@@ -8,6 +8,7 @@ export * from './use-copy-to-clipboard'
 // Image authentication hooks
 export * from './use-batch-images'
 export * from './use-authenticated-image'
+export * from './use-authed-image-src'
 
 // URL State Management hooks
 export * from './state'

package/src/hooks/use-authed-image-src.ts

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useReducer } from 'react'
+import { embedAuthedFetch, needsBearerAssetFetch } from '../utils/embed-authed-fetch'
+
+/**
+ * Resolve an image URL for hosts whose auth rides in request headers
+ * instead of cookies (native shells — `capacitor://localhost`,
+ * `tauri://localhost` — running in bearer mode). A native `<img>` load
+ * can't carry an `Authorization` header, so a gateway image URL that
+ * works on the cookie-auth web 401s in a shell. When
+ * `needsBearerAssetFetch` says the URL's origin is bearer-authed, this
+ * hook fetches it through `embedAuthedFetch` (bearer + deduped
+ * 401-refresh-retry + the adapter's cross-origin guard) and returns a
+ * blob object-URL; every other URL is returned unchanged, so on the
+ * cookie-auth web the hook is a pass-through.
+ *
+ * Returns `undefined` while the fetch is in flight OR after it fails, so
+ * callers show their existing initials/placeholder fallback instead of a
+ * broken image; a failed fetch retries on the next mount.
+ *
+ * Cache: module-level, session-lifetime, keyed by full URL. Gateway image
+ * URLs carry a `?v=<content-hash>` cache-buster, so a changed image is a
+ * new key; entries are never revoked (avatars are a few KB — refcount
+ * churn isn't worth it).
+ *
+ * Distinct from the legacy `useAuthenticatedImage`, which ALWAYS
+ * blob-fetches with `credentials: 'include'` and its own global config.
+ * This hook is pass-through-first and keys off the single auth knob the
+ * lib already has: the registered `EmbedAuthAdapter`.
+ */
+
+const resolvedCache = new Map<string, string>()
+const inFlight = new Map<string, Promise<void>>()
+let cacheGeneration = 0
+
+/**
+ * Drop every cached blob and revoke its object URL. Hosts call this at
+ * session end (logout / forced re-login) so a follow-on login as a
+ * different identity cannot be served blobs fetched under the previous
+ * one's bearer. Fetches still in flight when the clear happens are fenced
+ * by a generation counter — their results are revoked instead of cached.
+ */
+export function clearAuthedImageCache(): void {
+  cacheGeneration++
+  for (const url of resolvedCache.values()) URL.revokeObjectURL(url)
+  resolvedCache.clear()
+  inFlight.clear()
+}
+
+function fetchAsBlobUrl(src: string): Promise<void> {
+  let pending = inFlight.get(src)
+  if (!pending) {
+    const startedGeneration = cacheGeneration
+    pending = embedAuthedFetch(src, { headers: { Accept: 'image/*' } })
+      .then(async response => {
+        if (!response.ok) throw new Error(`image fetch failed: ${response.status}`)
+        const blobUrl = URL.createObjectURL(await response.blob())
+        if (startedGeneration === cacheGeneration) {
+          resolvedCache.set(src, blobUrl)
+        } else {
+          URL.revokeObjectURL(blobUrl)
+        }
+      })
+      .finally(() => {
+        if (inFlight.get(src) === pending) inFlight.delete(src)
+      })
+    inFlight.set(src, pending)
+  }
+  return pending
+}
+
+export function useAuthedImageSrc(src?: string | null): string | undefined {
+  const bearerSrc = src && needsBearerAssetFetch(src) ? src : null
+  const [, rerender] = useReducer((c: number) => c + 1, 0)
+
+  useEffect(() => {
+    if (!bearerSrc || resolvedCache.has(bearerSrc)) return
+    let cancelled = false
+    fetchAsBlobUrl(bearerSrc)
+      .catch(() => {})
+      .finally(() => {
+        if (!cancelled) rerender()
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [bearerSrc])
+
+  if (!src) return undefined
+  if (!bearerSrc) return src
+  return resolvedCache.get(bearerSrc)
+}

package/src/utils/embed-authed-fetch.ts

@@ -156,6 +156,36 @@ export function hasEmbedAuthAdapter(): boolean {
   return getRegisteredAuthAdapter() !== null
 }
 
+/**
+ * Whether `url` is an asset the browser CANNOT load natively because its
+ * auth rides in request headers: the registered adapter is currently
+ * supplying an `Authorization` header AND the URL's origin is one the
+ * adapter explicitly sanctions for that bearer (`allowedOrigins` — the
+ * host's gateway, cross-origin by construction in native shells).
+ *
+ * Native asset loads (`<img src>`, CSS `background-image`) can't carry
+ * custom headers, so a URL this returns `true` for must go through
+ * `embedAuthedFetch` → blob object-URL instead (see `useAuthedImageSrc`).
+ * Everything else — cookie-auth web (no Authorization), relative /
+ * same-origin URLs (cookies work), third-party origins the bearer does
+ * NOT belong to (public images) — loads natively, unchanged.
+ */
+export function needsBearerAssetFetch(url: string): boolean {
+  if (typeof window === 'undefined') return false
+  const adapter = getRegisteredAuthAdapter()
+  if (!adapter?.allowedOrigins?.length || adapter.getHeaders?.().Authorization === undefined) {
+    return false
+  }
+  let target: URL
+  try {
+    target = new URL(url, window.location.href)
+  } catch {
+    return false
+  }
+  if (target.protocol !== 'http:' && target.protocol !== 'https:') return false
+  return adapter.allowedOrigins.includes(target.origin)
+}
+
 /**
  * `fetch` wrapper that attaches embed-proxy bearer headers (when
  * present in sessionStorage) and forces `credentials: 'same-origin'`