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

package/dist/{chunk-IIOHHNMI.js → chunk-QESV36I2.js}

@@ -11,7 +11,6 @@ import {
   progressColorByVariant,
   scrollElementIntoView,
   toolLabels,
-  useAuthedImageSrc,
   useAutoLimitTags,
   useCopyToClipboard,
   useDebounce,
@@ -33,7 +32,7 @@ import {
   useResetOnPageHidden,
   useSuppressCloneFocus,
   useToast
-} from "./chunk-ZPUZPJDV.js";
+} from "./chunk-OTV4A6NA.js";
 import {
   AlertCircleIcon,
   AnthropicLogoGreyIcon,
@@ -1468,22 +1467,6 @@ var MermaidDiagram = ({ chart }) => {
     }
   ) }) });
 };
-var MarkdownContentImage = ({ src, alt }) => {
-  const resolvedSrc = useAuthedImageSrc(src);
-  if (!resolvedSrc) return null;
-  return /* @__PURE__ */ jsx7(
-    next_image_default,
-    {
-      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" }
-    }
-  );
-};
 function extractText(node) {
   if (typeof node === "string") return node;
   if (Array.isArray(node)) return node.map(extractText).join("");
@@ -1705,12 +1688,67 @@ var SimpleMarkdownRendererImpl = ({
       );
     },
     // --- 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 }) => {
       if (!src || typeof src !== "string" || src.trim() === "") return null;
-      return /* @__PURE__ */ jsx7(MarkdownContentImage, { src, alt });
+      return /* @__PURE__ */ jsx7(
+        next_image_default,
+        {
+          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 ---
     ul: ({ children }) => /* @__PURE__ */ jsx7("ul", { className: "list-disc list-outside my-4 ml-8 space-y-2 text-ods-text-primary", children }),
@@ -2244,7 +2282,6 @@ function formatBioText(aboutHtml, fallback = "") {
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var SquareAvatar = React2.memo(React2.forwardRef(
   ({ className, src, alt, size: size2 = "md", sizePx, fallback, variant = "square", initialsClassName, style, ...props }, ref) => {
-    const resolvedSrc = useAuthedImageSrc(src);
     const sizeClasses2 = {
       sm: "h-8 w-8",
       md: "h-10 w-10",
@@ -2287,13 +2324,13 @@ var SquareAvatar = React2.memo(React2.forwardRef(
             // 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"
           ), children: getFirstLastInitials(fallback || alt) || "?" }),
-          resolvedSrc && /* @__PURE__ */ jsx10(
+          src && /* @__PURE__ */ jsx10(
             next_image_default,
             {
               className: "absolute -inset-px h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover",
-              src: resolvedSrc,
+              src,
               alt: alt || "",
               width: sizePx ?? sizePxBySize[size2],
               height: sizePx ?? sizePxBySize[size2],
@@ -23332,16 +23369,15 @@ init_cn();
 init_cn();
 
 // src/components/ui/entity-image.tsx
-import React81 from "react";
 init_cn();
+import React81 from "react";
 import { jsx as jsx164 } from "react/jsx-runtime";
 function EntityImage({ src, alt, fallbackText, className }) {
-  const resolvedSrc = useAuthedImageSrc(src);
   const [imageFailed, setImageFailed] = React81.useState(false);
   React81.useEffect(() => {
     setImageFailed(false);
-  }, [resolvedSrc]);
-  const showFallback = imageFailed || !resolvedSrc;
+  }, [src]);
+  const showFallback = imageFailed || !src;
   const initials = getFirstLastInitials(fallbackText ?? alt);
   if (showFallback) {
     return /* @__PURE__ */ jsx164(
@@ -23359,7 +23395,7 @@ function EntityImage({ src, alt, fallbackText, className }) {
   return /* @__PURE__ */ jsx164(
     "img",
     {
-      src: resolvedSrc,
+      src: src ?? void 0,
       alt: alt ?? "",
       onError: () => setImageFailed(true),
       className: cn(
@@ -37679,7 +37715,6 @@ var MobileBurgerMenu = React115.memo(function MobileBurgerMenu2({
         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",
@@ -42560,7 +42595,6 @@ function ImageUploader({
   const [pressed, setPressed] = React128.useState(false);
   const [validationError, setValidationError] = React128.useState(null);
   const interactive = !disabled && !loading;
-  const resolvedValue = useAuthedImageSrc(value);
   const hasImage = Boolean(value);
   const displayError = error || validationError || void 0;
   const resolvedHint = hint === void 0 ? `Max. size: ${formatSize(maxSize)}` : hint;
@@ -42646,10 +42680,10 @@ function ImageUploader({
           dropzoneClassName
         ),
         children: hasImage ? /* @__PURE__ */ jsxs270(Fragment66, { children: [
-          /* @__PURE__ */ jsx339("div", { className: "relative min-h-0 w-full flex-1 overflow-hidden rounded-md", children: resolvedValue && /* @__PURE__ */ jsx339(
+          /* @__PURE__ */ jsx339("div", { className: "relative min-h-0 w-full flex-1 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx339(
             "img",
             {
-              src: resolvedValue,
+              src: value,
               alt,
               className: cn(
                 "pointer-events-none absolute inset-0 size-full",
@@ -55412,4 +55446,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-IIOHHNMI.js.map
+//# sourceMappingURL=chunk-QESV36I2.js.map