@wix/web5-core 1.56.0

package/dist/esm/components/ui/MarkdownText.js

@@ -0,0 +1,283 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { parseWeb5Url, validateLinkUrl } from '../../utils/entityLinkParser.js';
+import { Web5UrlType } from '../../types/link-types.js';
+import { cn } from '../../lib/utils.js';
+import { useWeb5Link } from '../../hooks/useWeb5Link.js';
+import { useComponentDependencies } from '../../context/ComponentDependenciesContext.js';
+import { DIAGNOSTIC_TYPES } from '../../component/diagnosticTypes.js';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './table.js';
+import { UnifiedLink } from './UnifiedLink.js';
+import { OptimizedImage } from './OptimizedImage.js';
+import { SmartIcon } from './SmartIcon.js';
+
+/** Decode a web5:// url path, tolerating malformed escape sequences. */
+function decodeWeb5Path(path) {
+  try {
+    return decodeURIComponent(path);
+  } catch {
+    return path;
+  }
+}
+export const MarkdownText = _ref => {
+  let {
+    children: markdownChildren,
+    className = '',
+    codeClassName = 'bg-muted px-1 py-0.5 rounded text-xs font-mono'
+  } = _ref;
+  const {
+    isActionRegistered
+  } = useWeb5Link();
+  const {
+    reportDiagnostic
+  } = useComponentDependencies();
+
+  // Fix malformed markdown links with space between ] and ( e.g. [text] (url) → [text](url)
+  const fixMalformedLinks = markdown => {
+    return markdown.replace(/\]\s+\(/g, '](');
+  };
+  const processedMarkdown = fixMalformedLinks(markdownChildren);
+  // Custom URL transform: only render valid URLs (react-markdown v9+ strips non-http by default)
+  const urlTransform = url => {
+    const validated = validateLinkUrl(url);
+    if (!validated) {
+      reportDiagnostic == null || reportDiagnostic(DIAGNOSTIC_TYPES.BROKEN_WEB5_LINK, 'markdownText', `URL stripped: "${url}"`);
+    }
+    return validated;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn('prose prose-slate max-w-none', className)
+  }, /*#__PURE__*/React.createElement(ReactMarkdown, {
+    remarkPlugins: [remarkGfm],
+    urlTransform: urlTransform,
+    components: {
+      p: _ref2 => {
+        let {
+          children
+        } = _ref2;
+        return /*#__PURE__*/React.createElement("p", {
+          className: "mb-4 leading-relaxed"
+        }, children);
+      },
+      code: _ref3 => {
+        let {
+          children,
+          className: inlineClassName
+        } = _ref3;
+        const isBlock = inlineClassName == null ? void 0 : inlineClassName.includes('language-');
+        if (isBlock) {
+          return /*#__PURE__*/React.createElement("code", {
+            className: cn('block bg-muted p-4 rounded-md text-sm font-mono overflow-x-auto', inlineClassName)
+          }, children);
+        }
+        return /*#__PURE__*/React.createElement("code", {
+          className: cn(codeClassName, inlineClassName)
+        }, children);
+      },
+      pre: _ref4 => {
+        let {
+          children
+        } = _ref4;
+        return /*#__PURE__*/React.createElement("pre", {
+          className: "mb-4 overflow-x-auto [&>code]:block [&>code]:my-0"
+        }, children);
+      },
+      em: _ref5 => {
+        let {
+          children
+        } = _ref5;
+        return /*#__PURE__*/React.createElement("em", {
+          className: "italic"
+        }, children);
+      },
+      strong: _ref6 => {
+        let {
+          children
+        } = _ref6;
+        return /*#__PURE__*/React.createElement("strong", {
+          className: "font-bold"
+        }, children);
+      },
+      h1: _ref7 => {
+        let {
+          children
+        } = _ref7;
+        return /*#__PURE__*/React.createElement("h1", {
+          className: "text-4xl font-bold text-foreground mb-4 mt-6"
+        }, children);
+      },
+      h2: _ref8 => {
+        let {
+          children
+        } = _ref8;
+        return /*#__PURE__*/React.createElement("h2", {
+          className: "text-3xl font-bold text-foreground mb-3 mt-6"
+        }, children);
+      },
+      h3: _ref9 => {
+        let {
+          children
+        } = _ref9;
+        return /*#__PURE__*/React.createElement("h3", {
+          className: "text-2xl font-semibold text-foreground mb-3 mt-5"
+        }, children);
+      },
+      h4: _ref0 => {
+        let {
+          children
+        } = _ref0;
+        return /*#__PURE__*/React.createElement("h4", {
+          className: "text-xl font-semibold text-foreground mb-2 mt-4"
+        }, children);
+      },
+      h5: _ref1 => {
+        let {
+          children
+        } = _ref1;
+        return /*#__PURE__*/React.createElement("h5", {
+          className: "text-lg font-semibold text-foreground mb-2 mt-4"
+        }, children);
+      },
+      h6: _ref10 => {
+        let {
+          children
+        } = _ref10;
+        return /*#__PURE__*/React.createElement("h6", {
+          className: "text-base font-semibold text-foreground mb-2 mt-3"
+        }, children);
+      },
+      blockquote: _ref11 => {
+        let {
+          children
+        } = _ref11;
+        return /*#__PURE__*/React.createElement("blockquote", {
+          className: "border-l-4 border-border pl-4 italic text-muted-foreground my-4"
+        }, children);
+      },
+      table: _ref12 => {
+        let {
+          children
+        } = _ref12;
+        return /*#__PURE__*/React.createElement("div", {
+          className: "my-6"
+        }, /*#__PURE__*/React.createElement(Table, null, children));
+      },
+      thead: _ref13 => {
+        let {
+          children
+        } = _ref13;
+        return /*#__PURE__*/React.createElement(TableHeader, null, children);
+      },
+      tbody: _ref14 => {
+        let {
+          children
+        } = _ref14;
+        return /*#__PURE__*/React.createElement(TableBody, null, children);
+      },
+      tr: _ref15 => {
+        let {
+          children
+        } = _ref15;
+        return /*#__PURE__*/React.createElement(TableRow, null, children);
+      },
+      th: _ref16 => {
+        let {
+          children
+        } = _ref16;
+        return /*#__PURE__*/React.createElement(TableHead, null, children);
+      },
+      td: _ref17 => {
+        let {
+          children
+        } = _ref17;
+        return /*#__PURE__*/React.createElement(TableCell, null, children);
+      },
+      ul: _ref18 => {
+        let {
+          children
+        } = _ref18;
+        return /*#__PURE__*/React.createElement("ul", {
+          className: "list-disc list-outside mb-4 space-y-2 text-foreground pl-6"
+        }, children);
+      },
+      ol: _ref19 => {
+        let {
+          children
+        } = _ref19;
+        return /*#__PURE__*/React.createElement("ol", {
+          className: "list-decimal list-outside mb-4 space-y-2 text-foreground pl-6"
+        }, children);
+      },
+      li: _ref20 => {
+        let {
+          children
+        } = _ref20;
+        return /*#__PURE__*/React.createElement("li", {
+          className: "text-foreground"
+        }, children);
+      },
+      a: _ref21 => {
+        let {
+          children,
+          href: url
+        } = _ref21;
+        // Validate web5://action/ links — render as plain text if unregistered
+        if (url) {
+          const parsed = parseWeb5Url(url);
+          if (parsed && parsed.type === Web5UrlType.ACTION && !isActionRegistered(parsed.actionName)) {
+            reportDiagnostic == null || reportDiagnostic(DIAGNOSTIC_TYPES.UNKNOWN_WEB5_ACTION, 'markdownText', `Unregistered action: "${parsed.actionName}"`);
+            return /*#__PURE__*/React.createElement("span", {
+              className: "text-muted-foreground"
+            }, children);
+          }
+        }
+        return /*#__PURE__*/React.createElement(UnifiedLink, {
+          href: url,
+          variant: "inline"
+        }, children);
+      },
+      hr: () => /*#__PURE__*/React.createElement("hr", {
+        className: "my-6 border-border"
+      }),
+      img: _ref22 => {
+        let {
+          src,
+          alt
+        } = _ref22;
+        const parsed = src ? parseWeb5Url(src) : null;
+
+        // `web5://icon/…` references a named icon, not a bitmap (KPI /
+        // metrics blocks emit these). Render it via SmartIcon, which
+        // resolves through the `resolveIcons` dependency and degrades to an
+        // empty inline placeholder when no resolver is present — never a
+        // broken-image box.
+        if ((parsed == null ? void 0 : parsed.type) === Web5UrlType.ICON) {
+          return /*#__PURE__*/React.createElement(SmartIcon, {
+            iconHint: decodeWeb5Path(parsed.path),
+            label: alt || undefined
+          });
+        }
+
+        // Only `web5://image/` resolves to a real asset. Any other web5://
+        // scheme used as an image source would fall through to a raw
+        // <img src="web5://…"> the browser can't load, rendering a "Failed
+        // to load image" box — skip it (keep the alt text if present).
+        if (parsed && parsed.type !== Web5UrlType.IMAGE) {
+          reportDiagnostic == null || reportDiagnostic(DIAGNOSTIC_TYPES.IMAGE_RESOLUTION_FAILED, 'markdownText', `Unsupported web5:// image source: "${src}"`);
+          return alt ? /*#__PURE__*/React.createElement(React.Fragment, null, alt) : null;
+        }
+        return /*#__PURE__*/React.createElement("span", {
+          className: "block my-4"
+        }, /*#__PURE__*/React.createElement(OptimizedImage, {
+          filename: src ?? '',
+          alt: alt ?? '',
+          className: "w-full rounded-md",
+          objectFit: "cover",
+          layout: "intrinsic"
+        }));
+      }
+    }
+  }, processedMarkdown));
+};
+//# sourceMappingURL=MarkdownText.js.map

package/dist/esm/components/ui/MarkdownText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactMarkdown","remarkGfm","parseWeb5Url","validateLinkUrl","Web5UrlType","cn","useWeb5Link","useComponentDependencies","DIAGNOSTIC_TYPES","Table","TableHeader","TableBody","TableRow","TableHead","TableCell","UnifiedLink","OptimizedImage","SmartIcon","decodeWeb5Path","path","decodeURIComponent","MarkdownText","_ref","children","markdownChildren","className","codeClassName","isActionRegistered","reportDiagnostic","fixMalformedLinks","markdown","replace","processedMarkdown","urlTransform","url","validated","BROKEN_WEB5_LINK","createElement","remarkPlugins","components","p","_ref2","code","_ref3","inlineClassName","isBlock","includes","pre","_ref4","em","_ref5","strong","_ref6","h1","_ref7","h2","_ref8","h3","_ref9","h4","_ref0","h5","_ref1","h6","_ref10","blockquote","_ref11","table","_ref12","thead","_ref13","tbody","_ref14","tr","_ref15","th","_ref16","td","_ref17","ul","_ref18","ol","_ref19","li","_ref20","a","_ref21","href","parsed","type","ACTION","actionName","UNKNOWN_WEB5_ACTION","variant","hr","img","_ref22","src","alt","ICON","iconHint","label","undefined","IMAGE","IMAGE_RESOLUTION_FAILED","Fragment","filename","objectFit","layout"],"sources":["../../../../src/components/ui/MarkdownText.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { parseWeb5Url, validateLinkUrl } from '../../utils/entityLinkParser';\nimport { Web5UrlType } from '../../types/link-types';\nimport { cn } from '../../lib/utils';\nimport { useWeb5Link } from '../../hooks/useWeb5Link';\nimport { useComponentDependencies } from '../../context/ComponentDependenciesContext';\nimport { DIAGNOSTIC_TYPES } from '../../component/diagnosticTypes';\nimport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n} from './table';\nimport { UnifiedLink } from './UnifiedLink';\nimport { OptimizedImage } from './OptimizedImage';\nimport { SmartIcon } from './SmartIcon';\n\n/** Decode a web5:// url path, tolerating malformed escape sequences. */\nfunction decodeWeb5Path(path: string): string {\n  try {\n    return decodeURIComponent(path);\n  } catch {\n    return path;\n  }\n}\n\ninterface MarkdownTextProps {\n  children: string;\n  className?: string;\n  codeClassName?: string;\n}\n\nexport const MarkdownText: FC<MarkdownTextProps> = ({\n  children: markdownChildren,\n  className = '',\n  codeClassName = 'bg-muted px-1 py-0.5 rounded text-xs font-mono',\n}) => {\n  const { isActionRegistered } = useWeb5Link();\n  const { reportDiagnostic } = useComponentDependencies();\n\n  // Fix malformed markdown links with space between ] and ( e.g. [text] (url) → [text](url)\n  const fixMalformedLinks = (markdown: string): string => {\n    return markdown.replace(/\\]\\s+\\(/g, '](');\n  };\n\n  const processedMarkdown = fixMalformedLinks(markdownChildren);\n  // Custom URL transform: only render valid URLs (react-markdown v9+ strips non-http by default)\n  const urlTransform = (url: string) => {\n    const validated = validateLinkUrl(url);\n    if (!validated) {\n      reportDiagnostic?.(\n        DIAGNOSTIC_TYPES.BROKEN_WEB5_LINK,\n        'markdownText',\n        `URL stripped: \"${url}\"`,\n      );\n    }\n    return validated;\n  };\n\n  return (\n    <div className={cn('prose prose-slate max-w-none', className)}>\n      <ReactMarkdown\n        remarkPlugins={[remarkGfm]}\n        urlTransform={urlTransform}\n        components={{\n          p: ({ children }) => (\n            <p className=\"mb-4 leading-relaxed\">{children}</p>\n          ),\n          code: ({ children, className: inlineClassName }) => {\n            const isBlock = inlineClassName?.includes('language-');\n            if (isBlock) {\n              return (\n                <code\n                  className={cn(\n                    'block bg-muted p-4 rounded-md text-sm font-mono overflow-x-auto',\n                    inlineClassName,\n                  )}\n                >\n                  {children}\n                </code>\n              );\n            }\n            return (\n              <code className={cn(codeClassName, inlineClassName)}>\n                {children}\n              </code>\n            );\n          },\n          pre: ({ children }) => {\n            return (\n              <pre className=\"mb-4 overflow-x-auto [&>code]:block [&>code]:my-0\">\n                {children}\n              </pre>\n            );\n          },\n          em: ({ children }) => <em className=\"italic\">{children}</em>,\n          strong: ({ children }) => (\n            <strong className=\"font-bold\">{children}</strong>\n          ),\n          h1: ({ children }) => (\n            <h1 className=\"text-4xl font-bold text-foreground mb-4 mt-6\">\n              {children}\n            </h1>\n          ),\n          h2: ({ children }) => (\n            <h2 className=\"text-3xl font-bold text-foreground mb-3 mt-6\">\n              {children}\n            </h2>\n          ),\n          h3: ({ children }) => (\n            <h3 className=\"text-2xl font-semibold text-foreground mb-3 mt-5\">\n              {children}\n            </h3>\n          ),\n          h4: ({ children }) => (\n            <h4 className=\"text-xl font-semibold text-foreground mb-2 mt-4\">\n              {children}\n            </h4>\n          ),\n          h5: ({ children }) => (\n            <h5 className=\"text-lg font-semibold text-foreground mb-2 mt-4\">\n              {children}\n            </h5>\n          ),\n          h6: ({ children }) => (\n            <h6 className=\"text-base font-semibold text-foreground mb-2 mt-3\">\n              {children}\n            </h6>\n          ),\n          blockquote: ({ children }) => (\n            <blockquote className=\"border-l-4 border-border pl-4 italic text-muted-foreground my-4\">\n              {children}\n            </blockquote>\n          ),\n          table: ({ children }) => (\n            <div className=\"my-6\">\n              <Table>{children}</Table>\n            </div>\n          ),\n          thead: ({ children }) => <TableHeader>{children}</TableHeader>,\n          tbody: ({ children }) => <TableBody>{children}</TableBody>,\n          tr: ({ children }) => <TableRow>{children}</TableRow>,\n          th: ({ children }) => <TableHead>{children}</TableHead>,\n          td: ({ children }) => <TableCell>{children}</TableCell>,\n          ul: ({ children }) => (\n            <ul className=\"list-disc list-outside mb-4 space-y-2 text-foreground pl-6\">\n              {children}\n            </ul>\n          ),\n          ol: ({ children }) => (\n            <ol className=\"list-decimal list-outside mb-4 space-y-2 text-foreground pl-6\">\n              {children}\n            </ol>\n          ),\n          li: ({ children }) => <li className=\"text-foreground\">{children}</li>,\n          a: ({ children, href: url }) => {\n            // Validate web5://action/ links — render as plain text if unregistered\n            if (url) {\n              const parsed = parseWeb5Url(url);\n              if (\n                parsed &&\n                parsed.type === Web5UrlType.ACTION &&\n                !isActionRegistered(parsed.actionName)\n              ) {\n                reportDiagnostic?.(\n                  DIAGNOSTIC_TYPES.UNKNOWN_WEB5_ACTION,\n                  'markdownText',\n                  `Unregistered action: \"${parsed.actionName}\"`,\n                );\n                return (\n                  <span className=\"text-muted-foreground\">{children}</span>\n                );\n              }\n            }\n\n            return (\n              <UnifiedLink href={url} variant=\"inline\">\n                {children}\n              </UnifiedLink>\n            );\n          },\n          hr: () => <hr className=\"my-6 border-border\" />,\n          img: ({ src, alt }) => {\n            const parsed = src ? parseWeb5Url(src) : null;\n\n            // `web5://icon/…` references a named icon, not a bitmap (KPI /\n            // metrics blocks emit these). Render it via SmartIcon, which\n            // resolves through the `resolveIcons` dependency and degrades to an\n            // empty inline placeholder when no resolver is present — never a\n            // broken-image box.\n            if (parsed?.type === Web5UrlType.ICON) {\n              return (\n                <SmartIcon\n                  iconHint={decodeWeb5Path(parsed.path)}\n                  label={alt || undefined}\n                />\n              );\n            }\n\n            // Only `web5://image/` resolves to a real asset. Any other web5://\n            // scheme used as an image source would fall through to a raw\n            // <img src=\"web5://…\"> the browser can't load, rendering a \"Failed\n            // to load image\" box — skip it (keep the alt text if present).\n            if (parsed && parsed.type !== Web5UrlType.IMAGE) {\n              reportDiagnostic?.(\n                DIAGNOSTIC_TYPES.IMAGE_RESOLUTION_FAILED,\n                'markdownText',\n                `Unsupported web5:// image source: \"${src}\"`,\n              );\n              return alt ? <>{alt}</> : null;\n            }\n\n            return (\n              <span className=\"block my-4\">\n                <OptimizedImage\n                  filename={src ?? ''}\n                  alt={alt ?? ''}\n                  className=\"w-full rounded-md\"\n                  objectFit=\"cover\"\n                  layout=\"intrinsic\"\n                />\n              </span>\n            );\n          },\n        }}\n      >\n        {processedMarkdown}\n      </ReactMarkdown>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/ui/OptimizedImage.js

@@ -0,0 +1,354 @@
+import React, { useState, useRef, useEffect, memo, useMemo } from 'react';
+import { getResizedImageUrl, normalizeImageUrl } from '../../utils/image-utils.js';
+import { isWeb5ImageUrl } from '../../types/link-types.js';
+import { useComponentDependencies } from '../../context/ComponentDependenciesContext.js';
+import { useResolvedImageSources } from '../../hooks/useResolvedImageSources.js';
+const lowResFallbackCache = new Map();
+export const OptimizedImage = /*#__PURE__*/memo(props => {
+  const {
+    alt,
+    className = '',
+    quality = 85,
+    format = 'auto',
+    progressive = true,
+    placeholderColor = '#f3f4f6',
+    objectFit = 'contain',
+    layout = 'fill',
+    onLoad,
+    onError,
+    onClick,
+    clickable = false,
+    imageFromText = false,
+    disableResize = false,
+    imageMode = 'fit',
+    fallbackOnLowRes,
+    lowResThreshold = 550
+  } = props;
+  void format;
+  void progressive;
+  const isResolvedMode = 'resolvedUrl' in props;
+  const unresolvedSource = 'filename' in props ? props.filename ?? '' : '';
+  const preResolvedUrl = 'resolvedUrl' in props ? props.resolvedUrl : '';
+  const filter = 'filename' in props ? props.filter : undefined;
+  const sourceIdentifier = isResolvedMode ? preResolvedUrl : unresolvedSource;
+  const deps = useComponentDependencies();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [imageUrl, setImageUrl] = useState('');
+  const [isFallback, setIsFallback] = useState(false);
+  const isDebugImageEnabled = deps.useDebugImageContext();
+  const [dimensions, setDimensions] = useState(null);
+  const containerRef = useRef(null);
+  const observerRef = useRef(null);
+  const isContextualImage = useMemo(() => !isResolvedMode && !!(unresolvedSource && isWeb5ImageUrl(unresolvedSource)), [isResolvedMode, unresolvedSource]);
+  const contextualImageKey = useMemo(() => {
+    if (!isContextualImage) {
+      return '';
+    }
+    const rawKey = unresolvedSource.slice('web5://image/'.length);
+    try {
+      return decodeURIComponent(rawKey).trim();
+    } catch {
+      return rawKey.trim();
+    }
+  }, [isContextualImage, unresolvedSource]);
+  const resolutionInputs = useMemo(() => isResolvedMode || !unresolvedSource ? [] : [{
+    src: unresolvedSource,
+    filter
+  }], [filter, isResolvedMode, unresolvedSource]);
+  const {
+    images: resolvedSources,
+    loading: isResolutionLoading
+  } = useResolvedImageSources(resolutionInputs);
+  const resolvedSource = useMemo(() => !isResolvedMode ? (resolvedSources == null ? void 0 : resolvedSources[0]) ?? null : null, [isResolvedMode, resolvedSources]);
+  useEffect(() => {
+    if (!isContextualImage || isResolvedMode || isResolutionLoading || resolvedSources === null) {
+      return;
+    }
+    deps.logContextualImage == null || deps.logContextualImage({
+      imageUrl: (resolvedSource == null ? void 0 : resolvedSource.url) ?? '',
+      contextualTerm: contextualImageKey,
+      imageEventType: imageFromText ? 'web5_image_link_from_text' : 'web5_image_link',
+      isImageResolved: !!(resolvedSource != null && resolvedSource.url),
+      isFallbackImage: false
+    });
+  }, [contextualImageKey, deps, imageFromText, isContextualImage, isResolvedMode, isResolutionLoading, resolvedSource == null ? void 0 : resolvedSource.url, resolvedSources]);
+
+  // When imageFromText contextual image resolution returns empty, use a random fallback
+  const contextualImageFallback = useMemo(() => {
+    if (!imageFromText || !isContextualImage || isResolutionLoading || resolvedSources === null || resolvedSource != null && resolvedSource.url) {
+      return '';
+    }
+    const fallbacks = deps.fallbackImages;
+    if (!fallbacks || fallbacks.length === 0) {
+      return '';
+    }
+    return fallbacks[Math.floor(Math.random() * fallbacks.length)];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageFromText, isContextualImage, isResolutionLoading, resolvedSources, resolvedSource == null ? void 0 : resolvedSource.url, deps.fallbackImages]);
+
+  // Log when a fallback image is used for an unresolved contextual image
+  useEffect(() => {
+    if (!contextualImageFallback) {
+      return;
+    }
+    deps.logContextualImage == null || deps.logContextualImage({
+      imageUrl: contextualImageFallback,
+      contextualTerm: contextualImageKey,
+      imageEventType: 'web5_image_fallback',
+      isImageResolved: false,
+      isFallbackImage: true
+    });
+  }, [contextualImageFallback, contextualImageKey, deps]);
+  const effectiveFilename = isResolvedMode ? preResolvedUrl : (resolvedSource == null ? void 0 : resolvedSource.url) || contextualImageFallback;
+  const sourceCacheKey = useMemo(() => effectiveFilename ? normalizeImageUrl(effectiveFilename).trim() : '', [effectiveFilename]);
+  const hasResolvedSourceDimensions = typeof (resolvedSource == null ? void 0 : resolvedSource.width) === 'number' && typeof (resolvedSource == null ? void 0 : resolvedSource.height) === 'number';
+  const isLowResResolvedAsset = hasResolvedSourceDimensions && (resolvedSource.width < lowResThreshold || resolvedSource.height < lowResThreshold);
+  const cachedFallbackUrl = useMemo(() => sourceCacheKey ? lowResFallbackCache.get(sourceCacheKey) ?? '' : '', [sourceCacheKey]);
+  const showDynamicBadge = isContextualImage && isDebugImageEnabled;
+  useEffect(() => {
+    setIsLoaded(false);
+    setIsError(false);
+    setIsFallback(false);
+    setImageUrl('');
+  }, [sourceCacheKey, fallbackOnLowRes]);
+  useEffect(() => {
+    if (!sourceCacheKey || !fallbackOnLowRes) {
+      return;
+    }
+    if (isLowResResolvedAsset) {
+      lowResFallbackCache.set(sourceCacheKey, fallbackOnLowRes);
+      setIsFallback(true);
+      setImageUrl(fallbackOnLowRes);
+      return;
+    }
+    if (!cachedFallbackUrl) {
+      return;
+    }
+    setIsFallback(true);
+    setImageUrl(cachedFallbackUrl);
+  }, [cachedFallbackUrl, fallbackOnLowRes, isLowResResolvedAsset, sourceCacheKey]);
+
+  // For fill layout, measure container so we can request a resized Wix image.
+  useEffect(() => {
+    if (layout === 'intrinsic' || disableResize) {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const updateDimensions = () => {
+      const rect = container.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        setDimensions({
+          width: Math.ceil(rect.width),
+          height: Math.ceil(rect.height)
+        });
+      }
+    };
+    updateDimensions();
+    if ('ResizeObserver' in window) {
+      observerRef.current = new ResizeObserver(() => {
+        updateDimensions();
+      });
+      observerRef.current.observe(container);
+    }
+    const handleResize = () => updateDimensions();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [disableResize, layout]);
+
+  // Intrinsic layout: use normalized URL without resize logic.
+  useEffect(() => {
+    if (layout !== 'intrinsic') {
+      return;
+    }
+    if (!effectiveFilename || isFallback || cachedFallbackUrl || isLowResResolvedAsset && fallbackOnLowRes) {
+      return;
+    }
+    const normalizedUrl = normalizeImageUrl(effectiveFilename);
+    setImageUrl(normalizedUrl);
+  }, [cachedFallbackUrl, effectiveFilename, isFallback, isLowResResolvedAsset, layout]);
+
+  // External non-Wix URLs skip resizing; use them immediately.
+  useEffect(() => {
+    if (layout === 'intrinsic') {
+      return;
+    }
+    if (!effectiveFilename || isFallback || cachedFallbackUrl || isLowResResolvedAsset && fallbackOnLowRes) {
+      return;
+    }
+    const normalizedUrl = normalizeImageUrl(effectiveFilename);
+    const isExternalNonWixUrl = (normalizedUrl.startsWith('http://') || normalizedUrl.startsWith('https://')) && !normalizedUrl.includes('static.wixstatic.com');
+    if (isExternalNonWixUrl) {
+      setImageUrl(normalizedUrl);
+    }
+  }, [cachedFallbackUrl, effectiveFilename, isFallback, isLowResResolvedAsset, layout]);
+
+  // Explicit opt-out: use original normalized URL even in fill layouts.
+  useEffect(() => {
+    if (layout === 'intrinsic') {
+      return;
+    }
+    if (!disableResize || !effectiveFilename || isFallback || cachedFallbackUrl || isLowResResolvedAsset && fallbackOnLowRes) {
+      return;
+    }
+    setImageUrl(normalizeImageUrl(effectiveFilename));
+  }, [cachedFallbackUrl, disableResize, effectiveFilename, isFallback, isLowResResolvedAsset, layout]);
+
+  // Wix/local URLs: wait for dimensions, then build a resized URL.
+  useEffect(() => {
+    if (layout === 'intrinsic') {
+      return;
+    }
+    if (disableResize) {
+      return;
+    }
+    if (!dimensions || !effectiveFilename || isFallback || cachedFallbackUrl || isLowResResolvedAsset && fallbackOnLowRes) {
+      return;
+    }
+    const normalizedUrl = normalizeImageUrl(effectiveFilename);
+    const isExternalNonWixUrl = (normalizedUrl.startsWith('http://') || normalizedUrl.startsWith('https://')) && !normalizedUrl.includes('static.wixstatic.com');
+    if (isExternalNonWixUrl) {
+      return;
+    }
+    let imageFilename = effectiveFilename;
+    if (normalizedUrl.includes('static.wixstatic.com')) {
+      const match = normalizedUrl.match(/media\/([^/?]+)/);
+      if (match && match[1]) {
+        imageFilename = match[1];
+      } else {
+        setImageUrl(normalizedUrl);
+        return;
+      }
+    } else if (normalizedUrl.startsWith('https://static.wixstatic.com/media/')) {
+      imageFilename = normalizedUrl.replace('https://static.wixstatic.com/media/', '');
+    }
+    const dpr = window.devicePixelRatio ?? 1;
+    const optimizedUrl = getResizedImageUrl(imageFilename, dimensions.width * dpr, dimensions.height * dpr, {
+      quality,
+      imageMode
+    });
+    setImageUrl(optimizedUrl);
+  }, [dimensions, cachedFallbackUrl, effectiveFilename, isFallback, isLowResResolvedAsset, layout, disableResize, quality, imageMode]);
+  const handleImageLoad = e => {
+    const img = e.currentTarget;
+    if (fallbackOnLowRes && !isFallback && !hasResolvedSourceDimensions && (img.naturalWidth < lowResThreshold || img.naturalHeight < lowResThreshold)) {
+      const originalImageUrl = img.currentSrc || imageUrl || effectiveFilename || sourceIdentifier;
+      if (sourceCacheKey) {
+        lowResFallbackCache.set(sourceCacheKey, fallbackOnLowRes);
+      }
+      setIsFallback(true);
+      setImageUrl(fallbackOnLowRes);
+      setIsLoaded(false);
+      console.warn('OptimizedImage applied a low-res fallback image.', {
+        originalImageUrl,
+        fallbackImageUrl: fallbackOnLowRes,
+        naturalWidth: img.naturalWidth,
+        naturalHeight: img.naturalHeight,
+        lowResThreshold
+      });
+      deps.logContextualImage == null || deps.logContextualImage({
+        imageUrl: fallbackOnLowRes,
+        contextualTerm: contextualImageKey,
+        imageEventType: 'web5_image_fallback',
+        isImageResolved: true,
+        isFallbackImage: true
+      });
+      return;
+    }
+    setIsLoaded(true);
+    onLoad == null || onLoad();
+  };
+  const handleImageError = () => {
+    setIsError(true);
+    console.error('Failed to load image:', {
+      source: sourceIdentifier,
+      imageUrl,
+      alt
+    });
+    onError == null || onError(new Error(`Failed to load image: ${sourceIdentifier}`));
+  };
+  const isTransparentPlaceholder = placeholderColor === 'transparent';
+  const placeholderStyles = isTransparentPlaceholder ? {
+    background: 'transparent',
+    animation: 'none'
+  } : {
+    background: `linear-gradient(90deg, ${placeholderColor} 0%, #e5e7eb 50%, ${placeholderColor} 100%)`,
+    backgroundSize: '200% 100%',
+    animation: 'shimmer 2s infinite ease-in-out'
+  };
+  const handleKeyDown = e => {
+    if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    ref: containerRef,
+    className: ['block', layout === 'intrinsic' ? '' : 'relative overflow-hidden', showDynamicBadge ? 'relative' : '', className].filter(Boolean).join(' '),
+    style: layout === 'intrinsic' ? undefined : {
+      minHeight: '1px'
+    },
+    onClick: clickable ? onClick : undefined,
+    onKeyDown: clickable ? handleKeyDown : undefined,
+    tabIndex: clickable ? 0 : undefined,
+    role: clickable ? 'button' : undefined,
+    "aria-label": clickable ? alt : undefined
+  }, showDynamicBadge && /*#__PURE__*/React.createElement("span", {
+    className: "absolute left-2 top-2 z-10 rounded bg-blue-600/90 px-2 py-1 text-[10px] font-semibold tracking-wide text-white shadow block"
+  }, contextualImageKey), !isLoaded && !isError && sourceIdentifier && /*#__PURE__*/React.createElement("span", {
+    className: "absolute inset-0 rounded block",
+    style: placeholderStyles,
+    role: "status",
+    "aria-label": "Loading image"
+  }), isError && /*#__PURE__*/React.createElement("span", {
+    className: "absolute inset-0 flex items-center justify-center bg-gray-100 text-gray-500 rounded block",
+    role: "alert",
+    "aria-live": "assertive"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-center p-4 block"
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: "w-8 h-8 mx-auto mb-2 text-gray-400",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "text-xs block"
+  }, "Failed to load image"))), imageUrl && !isError && /*#__PURE__*/React.createElement("img", {
+    src: imageUrl,
+    alt: alt,
+    className: `${layout === 'intrinsic' ? 'w-full h-auto' : 'absolute inset-0 w-full h-full'} transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'} ${objectFit === 'contain' ? 'object-contain' : objectFit === 'cover' ? 'object-cover' : objectFit === 'fill' ? 'object-fill' : objectFit === 'none' ? 'object-none' : objectFit === 'scale-down' ? 'object-scale-down' : ''}`,
+    style: layout === 'intrinsic' ? {
+      width: '100%',
+      height: 'auto',
+      maxWidth: '100%',
+      display: 'block'
+    } : {
+      position: 'absolute',
+      inset: 0,
+      width: '100%',
+      height: '100%',
+      objectFit,
+      maxWidth: '100%',
+      display: 'block'
+    },
+    onLoad: handleImageLoad,
+    onError: handleImageError,
+    loading: imageUrl.startsWith('data:') ? 'eager' : 'lazy'
+  })));
+});
+//# sourceMappingURL=OptimizedImage.js.map