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

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

@@ -11,6 +11,7 @@ import {
   progressColorByVariant,
   scrollElementIntoView,
   toolLabels,
+  useAuthedImageSrc,
   useAutoLimitTags,
   useCopyToClipboard,
   useDebounce,
@@ -32,7 +33,7 @@ import {
   useResetOnPageHidden,
   useSuppressCloneFocus,
   useToast
-} from "./chunk-OTV4A6NA.js";
+} from "./chunk-ZPUZPJDV.js";
 import {
   AlertCircleIcon,
   AnthropicLogoGreyIcon,
@@ -1467,6 +1468,22 @@ 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("");
@@ -1688,67 +1705,12 @@ var SimpleMarkdownRendererImpl = ({
       );
     },
     // --- 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 }) => {
       if (!src || typeof src !== "string" || src.trim() === "") return null;
-      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" }
-        }
-      );
+      return /* @__PURE__ */ jsx7(MarkdownContentImage, { src, alt });
     },
     // --- lists ---
     ul: ({ children }) => /* @__PURE__ */ jsx7("ul", { className: "list-disc list-outside my-4 ml-8 space-y-2 text-ods-text-primary", children }),
@@ -2282,6 +2244,7 @@ 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",
@@ -2324,13 +2287,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,
-            src && "hidden"
+            resolvedSrc && "hidden"
           ), children: getFirstLastInitials(fallback || alt) || "?" }),
-          src && /* @__PURE__ */ jsx10(
+          resolvedSrc && /* @__PURE__ */ jsx10(
             next_image_default,
             {
               className: "absolute -inset-px h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover",
-              src,
+              src: resolvedSrc,
               alt: alt || "",
               width: sizePx ?? sizePxBySize[size2],
               height: sizePx ?? sizePxBySize[size2],
@@ -14264,38 +14227,33 @@ AllowedDomainsInput.displayName = "AllowedDomainsInput";
 // src/components/ui/announcement-bar-view.tsx
 init_cn();
 import { jsx as jsx96, jsxs as jsxs74 } from "react/jsx-runtime";
-var MD_QUERY = "(min-width: 800px)";
 function AnnouncementBarView({
   startAdornment,
   title,
   actionBlock,
   endAdornment,
-  onContentClick,
-  contentClassName,
   className,
   style
 }) {
-  const handleContentClick = onContentClick ? () => {
-    if (!window.matchMedia(MD_QUERY).matches) onContentClick();
-  } : void 0;
-  return /* @__PURE__ */ jsxs74("div", { className: cn("flex w-full max-w-full min-h-11 items-center", className), style, children: [
-    /* @__PURE__ */ jsxs74(
-      "div",
-      {
-        className: cn(
-          "flex min-w-0 flex-1 flex-row items-center gap-[var(--spacing-system-s)] py-[var(--spacing-system-xs)] pl-[var(--spacing-system-l)]",
-          contentClassName
-        ),
-        onClick: handleContentClick,
-        children: [
+  return /* @__PURE__ */ jsxs74(
+    "div",
+    {
+      className: cn(
+        "flex w-full max-w-full flex-col gap-[var(--spacing-system-s)] px-[var(--spacing-system-l)] py-[var(--spacing-system-s)] md:min-h-14 md:flex-row md:items-center md:py-0",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs74("div", { className: "flex w-full min-w-0 flex-1 items-start gap-[var(--spacing-system-s)] md:w-auto md:items-center", children: [
           startAdornment && /* @__PURE__ */ jsx96("div", { className: "flex shrink-0 items-center", children: startAdornment }),
-          typeof title === "string" ? /* @__PURE__ */ jsx96("p", { className: "mb-0 min-w-0 max-w-full flex-1 truncate text-h6", children: title }) : title != null && /* @__PURE__ */ jsx96("div", { className: "min-w-0 max-w-full flex-1", children: title }),
-          actionBlock && /* @__PURE__ */ jsx96("div", { className: "ml-[var(--spacing-system-m)] sr-only shrink-0 focus-within:not-sr-only md:not-sr-only md:flex", children: actionBlock })
-        ]
-      }
-    ),
-    endAdornment && /* @__PURE__ */ jsx96("div", { className: "ml-[var(--spacing-system-xs)] mr-[var(--spacing-system-m)] shrink-0", children: endAdornment })
-  ] });
+          typeof title === "string" ? /* @__PURE__ */ jsx96("p", { className: "mb-0 min-w-0 max-w-full flex-1 break-words text-h4 md:truncate", children: title }) : title != null && /* @__PURE__ */ jsx96("div", { className: "min-w-0 max-w-full flex-1", children: title }),
+          actionBlock && /* @__PURE__ */ jsx96("div", { className: "hidden shrink-0 md:flex", children: actionBlock }),
+          endAdornment && /* @__PURE__ */ jsx96("div", { className: "flex shrink-0 items-center", children: endAdornment })
+        ] }),
+        actionBlock && /* @__PURE__ */ jsx96("div", { className: "flex w-full md:hidden [&>*]:w-full", children: actionBlock })
+      ]
+    }
+  );
 }
 
 // src/components/ui/autocomplete.tsx
@@ -23374,15 +23332,16 @@ init_cn();
 init_cn();
 
 // src/components/ui/entity-image.tsx
-init_cn();
 import React81 from "react";
+init_cn();
 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);
-  }, [src]);
-  const showFallback = imageFailed || !src;
+  }, [resolvedSrc]);
+  const showFallback = imageFailed || !resolvedSrc;
   const initials = getFirstLastInitials(fallbackText ?? alt);
   if (showFallback) {
     return /* @__PURE__ */ jsx164(
@@ -23400,7 +23359,7 @@ function EntityImage({ src, alt, fallbackText, className }) {
   return /* @__PURE__ */ jsx164(
     "img",
     {
-      src: src ?? void 0,
+      src: resolvedSrc,
       alt: alt ?? "",
       onError: () => setImageFailed(true),
       className: cn(
@@ -37720,6 +37679,7 @@ 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",
@@ -42600,6 +42560,7 @@ 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;
@@ -42685,10 +42646,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: /* @__PURE__ */ jsx339(
+          /* @__PURE__ */ jsx339("div", { className: "relative min-h-0 w-full flex-1 overflow-hidden rounded-md", children: resolvedValue && /* @__PURE__ */ jsx339(
             "img",
             {
-              src: value,
+              src: resolvedValue,
               alt,
               className: cn(
                 "pointer-events-none absolute inset-0 size-full",
@@ -55451,4 +55412,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-TVMARS74.js.map
+//# sourceMappingURL=chunk-IIOHHNMI.js.map