@flamingo-stack/openframe-frontend-core 0.0.854 → 0.0.855

package/src/components/chat/hooks/use-chat-attachment-image-gallery.tsx

@@ -11,8 +11,9 @@
  *     while closed.
  *
  * Behavior on click:
- *   1. Filter for `<img>` whose `src` starts with the runtime's
- *      `attachmentViewUrlPrefix` (so non-chat images don't intercept).
+ *   1. Filter for `<img>` whose address (`assetSrcOf`) starts with the
+ *      runtime's `attachmentViewUrlPrefix` (so non-chat images don't
+ *      intercept).
  *   2. Walk up to the nearest `[data-message-role]` ancestor — the
  *      boundary the chat-shell wraps each message bubble with.
  *   3. Collect ALL chat-attachment `<img>`s inside that boundary in
@@ -51,32 +52,32 @@ export function useChatAttachmentImageGallery() {
     const onClick = (ev: Event) => {
       const target = ev.target as HTMLElement | null;
       if (!target) return;
-      // Match an <img> whose `src` starts with the proxy URL prefix.
+      // Match an <img> whose address starts with the proxy URL prefix.
       const img = target.closest('img');
-      if (!img || !img.src.startsWith(absolutize(viewUrlPrefix))) return;
+      if (!img || !assetSrcOf(img).startsWith(absolutize(viewUrlPrefix))) return;
 
       // Walk up to the message-bubble boundary.
       const bubble = img.closest('[data-message-role]');
       if (!bubble) {
         // Fallback: open the modal with just the clicked image.
         ev.preventDefault();
-        setState({ isOpen: true, images: [img.src], initialIndex: 0 });
+        setState({ isOpen: true, images: [assetSrcOf(img)], initialIndex: 0 });
         return;
       }
 
       // Collect all chat-attachment images inside this bubble in DOM
-      // order. The `closest` lookup matched img.src.startsWith already,
+      // order. The `closest` lookup matched the clicked one's address already,
       // but we re-check below because `querySelectorAll` returns ALL
       // <img>s in the bubble (avatar images etc.).
       const allImgs = Array.from(bubble.querySelectorAll('img'));
-      const matching = allImgs.filter(el => el.src.startsWith(absolutize(viewUrlPrefix)));
+      const matching = allImgs.filter(el => assetSrcOf(el).startsWith(absolutize(viewUrlPrefix)));
       if (matching.length === 0) return;
 
       const idx = Math.max(0, matching.indexOf(img));
       ev.preventDefault();
       setState({
         isOpen: true,
-        images: matching.map(el => el.src),
+        images: matching.map(assetSrcOf),
         initialIndex: idx,
       });
     };
@@ -112,3 +113,13 @@ function absolutize(prefix: string): string {
   if (typeof window === 'undefined') return prefix;
   return `${window.location.origin}${prefix.startsWith('/') ? '' : '/'}${prefix}`;
 }
+
+/**
+ * The address an `<img>` was asked to draw. Where auth rides in a header, the boxed `Image` draws a blob fetched
+ * with it and keeps the address in `data-asset-src`: `.src` would be `blob:…`, matching no prefix, and the gallery
+ * would never open in the native shells. Resolved against the page, as `.src` is: on dev-ticket web it is relative.
+ */
+function assetSrcOf(img: HTMLImageElement): string {
+  const declared = img.dataset.assetSrc;
+  return declared ? new URL(declared, window.location.href).href : img.src;
+}

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

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
 import Image from '../../embed-shims/next-image';
 import { useAuthedImageSrc } from '../../hooks/use-authed-image-src';
+import { useImageFallback } from '../../hooks/use-image-fallback';
 import { TILE_SIZE } from '../../styles/component-sizes';
 import { IMAGE_FIXED_PX } from '../../styles/image-sizes';
 import { cn } from '../../utils/cn';
@@ -37,20 +37,12 @@ export interface EntityImageProps {
 export function EntityImage({ src, alt, fallbackText, sizeClassName, className }: EntityImageProps) {
   // In a loading scope the image is its skeleton, and it is not fetched.
   const held = useLoadingScope();
-  const authedSrc = useAuthedImageSrc(held ? undefined : src);
-  const resolvedSrc = authedSrc;
-  // Which src failed, rather than a bare "failed" flag reset from an effect on
-  // every src change. The reset is then implicit — a new src simply is not the
-  // one that failed — so the fallback initials never survive into the render
-  // that swapped the image, and a new src costs no second render pass.
-  const [failedSrc, setFailedSrc] = React.useState<string | null>(null);
-  const imageFailed = resolvedSrc !== undefined && failedSrc === resolvedSrc;
+  const { src: resolvedSrc, onError } = useImageFallback(useAuthedImageSrc(held ? undefined : src));
 
   if (held) return <EntityImageSkeleton sizeClassName={sizeClassName} className={className} />;
-  const showFallback = imageFailed || !resolvedSrc;
   const initials = personInitials(fallbackText ?? alt);
 
-  if (showFallback) {
+  if (!resolvedSrc) {
     return (
       <div
         aria-label={alt}
@@ -70,7 +62,7 @@ export function EntityImage({ src, alt, fallbackText, sizeClassName, className }
     <Image
       src={resolvedSrc}
       alt={alt ?? ''}
-      onError={() => setFailedSrc(resolvedSrc)}
+      onError={onError}
       className={cn(
         'shrink-0 border border-ods-border object-contain',
         ENTITY_IMAGE_RADIUS_CLASS,

package/src/components/ui/markdown/base-components.tsx

@@ -54,19 +54,6 @@ export interface StandardLeafRenderers {
  * the rich composition's `img` / `video` overrides so the empty-`![]()`
  * guard has exactly one definition.
  */
-/**
- * Inline content image (blog / docs / chat attachments). A standalone
- * component — NOT inline JSX in the `img` renderer — because it must call
- * `useAuthedImageSrc`: in bearer-mode native shells (`capacitor://`,
- * `tauri://`) a gateway-hosted image can't load through a plain `<img>` (no
- * Authorization header on native asset loads), so the hook swaps in an authed
- * blob URL; everywhere else it returns `src` untouched. While the blob fetch
- * is in flight `resolvedSrc` is null and the component renders nothing — same
- * as the no-src case. Ported from #1548 into the unified engine (the original
- * lived in the now-deleted `ui/simple-markdown-renderer.tsx`). Sizing matches
- * the engine's cap: 400x400 intrinsic, `w-auto h-auto max-h-[400px]` drives
- * the actual rendered box; click-to-expand surfaces provide full resolution.
- */
 /**
  * The page title, a section heading and a paragraph of rendered markdown (before the text size): read by the
  * renderer and by every skeleton that stands in for a markdown body.
@@ -76,16 +63,23 @@ export const MARKDOWN_H2_CLASS =
   'mb-4 mt-8 border-b border-ods-border pb-2 font-sans font-semibold text-ods-text-primary';
 export const MARKDOWN_PARAGRAPH_CLASS = 'mb-4 leading-relaxed text-ods-text-primary first:mt-0 last:mb-0';
 
+/**
+ * Inline content image (blog / docs / chat attachments). The boxed `Image` resolves and authenticates it
+ * (`useAuthedAsset`); this component reads the same store only to draw nothing while there is nothing to draw (the
+ * authed fetch in flight or failed, as with no src), where `Image` would draw its box or the failing URL. Ported from
+ * #1548 into the unified engine (the original lived in the now-deleted `ui/simple-markdown-renderer.tsx`). Sizing
+ * matches the engine's cap: 400x400 intrinsic, `w-auto h-auto max-h-[400px]` drives the actual rendered box;
+ * click-to-expand surfaces provide full resolution.
+ */
 const MarkdownContentImage: React.FC<{ src: string; alt?: string }> = ({ src, alt }) => {
   // In a loading scope the image is a box and nothing is fetched: the authed fetch is skipped, and the `Image` shim
   // draws its skeleton box (`HeldImage`) without reading `src`. `src` is passed only so the box is drawn at all.
   const inScope = useLoadingScope();
-  const authedSrc = useAuthedImageSrc(inScope ? undefined : src);
-  const resolvedSrc = inScope ? src : authedSrc;
-  if (!resolvedSrc) return null;
+  const drawable = useAuthedImageSrc(inScope ? undefined : src);
+  if (!inScope && !drawable) return null;
   return (
     <Image
-      src={resolvedSrc}
+      src={src}
       alt={alt ?? 'No image available'}
       width={400}
       height={400}
@@ -363,9 +357,10 @@ export function buildBaseComponents({
 
     // --- images ---
     // Inline content image renderer (blog, docs, chat attachments) —
-    // delegates to `MarkdownContentImage` (above), which handles bearer-mode
-    // authed loading for native shells and the 400x400 cap with click-to-
-    // expand for full resolution.
+    // delegates to `MarkdownContentImage` (above), which draws nothing until
+    // there is a picture to draw and applies the 400x400 cap with click-to-
+    // expand for full resolution; the boxed `Image` it renders resolves and
+    // authenticates it.
     //
     // A third-party `src` never reaches here unless the composition set
     // `allowRemoteMedia`: `rehypeStripUnsafe` moves it to `data-blocked-src`,

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

@@ -3,6 +3,7 @@
 import { type HTMLAttributes, memo, forwardRef } from 'react';
 import Image from '../../embed-shims/next-image';
 import { useAuthedImageSrc } from '../../hooks/use-authed-image-src';
+import { useImageFallback } from '../../hooks/use-image-fallback';
 import { AVATAR_SIZE, AVATAR_SIZE_PX, type AvatarSize } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { personInitials } from '../../utils/format';
@@ -66,7 +67,9 @@ const SquareAvatar = memo(
       // is not fetched.
       const inScope = useLoadingScope();
       const held = inScope || !!loading;
-      const authedSrc = useAuthedImageSrc(held ? undefined : src);
+      // The initials fallback used to be written into the DOM from `onError`, and the hidden picture stayed hidden
+      // for the avatar's lifetime, even once a src that loads arrived.
+      const { src: resolvedSrc, onError } = useImageFallback(useAuthedImageSrc(held ? undefined : src));
       if (held) {
         return (
           <SquareAvatarSkeleton
@@ -78,7 +81,6 @@ const SquareAvatar = memo(
           />
         );
       }
-      const resolvedSrc = authedSrc;
       const sizeClasses = AVATAR_SIZE;
       const sizePxBySize = AVATAR_SIZE_PX;
 
@@ -137,12 +139,7 @@ const SquareAvatar = memo(
               alt={alt || ''}
               width={sizePx ?? sizePxBySize[size]}
               height={sizePx ?? sizePxBySize[size]}
-              onError={e => {
-                const img = e.currentTarget;
-                img.style.display = 'none';
-                const el = img.previousElementSibling as HTMLElement;
-                if (el) el.classList.remove('hidden');
-              }}
+              onError={onError}
             />
           )}
         </div>

package/src/embed-shims/next-image.tsx

@@ -24,6 +24,8 @@ import { forwardRef, type ComponentType, type CSSProperties, type ImgHTMLAttribu
 
 import { UnifiedSkeleton } from '../components/loading/unified-skeleton';
 import { useLoadingScope } from '../components/ui/loading-scope';
+import type { AuthedAsset } from '../hooks/use-authed-asset-src';
+import { useAuthedImage } from '../hooks/use-authed-image-src';
 import { cn } from '../utils/cn';
 import { fetchPriorityProp } from '../utils/fetch-priority';
 
@@ -49,6 +51,8 @@ type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'placeholder
   optimizedWidth?: number;
   onLoadingComplete?: (img: HTMLImageElement) => void;
   loader?: unknown;
+  /** The picture's address when `src` is the blob fetched from it (set by the shim; see `drawnAsset`). */
+  'data-asset-src'?: string;
 };
 
 /** What the shim renders once a host has registered `next/image`. */
@@ -122,12 +126,22 @@ function HeldImage({ className, style, width, height, fill }: ImageProps) {
 const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({ optimizedWidth, ...given }, ref) {
   // In a loading scope the picture is a box of its own size, and it is not fetched.
   const held = useLoadingScope();
-  if (held) return <HeldImage {...given} />;
   // A picture asked for at a width is the host resizer's URL, drawn as it comes.
-  const props: ImageProps =
+  const sized: ImageProps =
     optimizedWidth && resizer && typeof given.src === 'string'
       ? { ...given, src: resizer(given.src, optimizedWidth), unoptimized: true }
       : given;
+  // Every picture is drawn from where it lives and with the credential it needs: the host's `resolveAssetUrl`
+  // sends a backend path to its gateway, and a bearer-auth host's picture is fetched with the bearer and drawn
+  // from a blob (`useAuthedAsset`). Cookie-auth web and public pictures pass through unchanged.
+  const asset = useAuthedImage(!held && typeof sized.src === 'string' ? sized.src : undefined);
+  // Waiting for the credential or for the fetch: the picture's box, with nothing requested.
+  if (held || asset.status === 'pending') return <HeldImage {...given} />;
+  const props: ImageProps = typeof sized.src !== 'string' ? sized : drawnAsset(sized, asset);
+  // The element that failed is not the one a retry draws into: a caller that hid it in `onError` would keep it
+  // hidden. Only that transition remounts: a native in-place src swap keeps the old picture until the new one loads
+  // (a bearer swap draws the box while the new blob is fetched).
+  const key = asset.status === 'failed' ? 'failed' : undefined;
   // `priority` means "this is the picture the page is waiting for", so its
   // request is ranked high on EVERY host. Stated here, once: since Next 16
   // `priority` only preloads and no longer ranks the request, and the plain
@@ -139,7 +153,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
   // (priority, placeholder, sizes, loader…) reaches the real component intact.
   if (impl) {
     const Real = impl;
-    return <Real ref={ref} {...props} fetchPriority={fetchPriority} />;
+    return <Real key={key} ref={ref} {...props} fetchPriority={fetchPriority} />;
   }
 
   // Fallback path — plain <img>. Drops Next-only props and reduces
@@ -183,6 +197,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
     : style;
   return (
     <img
+      key={key}
       ref={ref}
       src={srcStr}
       alt={alt ?? ''}
@@ -197,4 +212,20 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
   );
 });
 
+/**
+ * The props drawn for a string `src` once `useAuthedAsset` answered:
+ *
+ * - `native` / `ready`: its `src` (the URL, or the fetched blob). A blob goes to no optimizer.
+ * - `failed`: the URL itself, so the element fails the way a plain `<img>` would and the caller's `onError`
+ *   fallback runs. It used to stay blank, with nothing to tell the caller.
+ *
+ * `data-asset-src` keeps the URL on the element when the drawn `src` is a blob, for code that reads a picture's
+ * address off the DOM (the chat's click-to-expand gallery).
+ */
+function drawnAsset(props: ImageProps, asset: AuthedAsset): ImageProps {
+  const src = asset.status === 'failed' ? asset.url : asset.src;
+  if (asset.status !== 'ready') return { ...props, src };
+  return { ...props, src, unoptimized: true, 'data-asset-src': asset.url };
+}
+
 export default Image;

package/src/hooks/index.ts

@@ -12,6 +12,7 @@ export * from './use-batch-images';
 export * from './use-authenticated-image';
 export * from './use-authed-asset-src';
 export * from './use-authed-image-src';
+export * from './use-image-fallback';
 
 // URL State Management hooks
 export * from './state';