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

package/package.json

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

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

@@ -79,7 +79,6 @@ 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",

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

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

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

@@ -5,7 +5,6 @@ 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"
 
@@ -99,12 +98,6 @@ 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
@@ -203,20 +196,18 @@ export function ImageUploader({
         {hasImage ? (
           <>
             <div className="relative min-h-0 w-full flex-1 overflow-hidden rounded-md">
-              {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",
-                  )}
-                />
-              )}
+              <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",
+                )}
+              />
             </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,7 +9,6 @@ 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';
@@ -454,58 +453,6 @@ 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
 // ---------------------------------------------------------------------------
@@ -873,12 +820,66 @@ const SimpleMarkdownRendererImpl: React.FC<SimpleMarkdownRendererProps> = ({
     },
 
     // --- images ---
-    // Delegates to MarkdownContentImage (module scope, above) — sizing
-    // rules, Next.js <Image> rationale, and the bearer-mode authed-src
-    // handling are documented there.
+    // 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).
     img: ({ src, alt }: any) => {
       if (!src || typeof src !== 'string' || src.trim() === '') return null;
-      return <MarkdownContentImage src={src} alt={alt} />;
+      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' }}
+        />
+      );
     },
 
     // --- lists ---

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

@@ -2,7 +2,6 @@
 
 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";
 
@@ -23,7 +22,6 @@ 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',
@@ -68,14 +66,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,
-          resolvedSrc && 'hidden'
+          src && 'hidden'
         )}>
           {getFirstLastInitials(fallback || alt) || '?'}
         </div>
-        {resolvedSrc && (
+        {src && (
           <Image
             className="absolute -inset-px h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover"
-            src={resolvedSrc}
+            src={src}
             alt={alt || ''}
             width={sizePx ?? sizePxBySize[size]}
             height={sizePx ?? sizePxBySize[size]}

package/src/hooks/index.ts

@@ -8,7 +8,6 @@ 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/utils/embed-authed-fetch.ts

@@ -156,36 +156,6 @@ 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'`