@canopy-iiif/app 0.13.0 → 0.13.2

package/ui/dist/server.mjs

@@ -2126,12 +2126,9 @@ function Container({
   );
 }
 
-// ui/src/content/ReferencedItems.jsx
-import React24 from "react";
-import navigationHelpers4 from "@canopy-iiif/app/lib/components/navigation.js";
-
 // ui/src/layout/Card.jsx
 import React23, { useEffect as useEffect5, useRef, useState as useState5 } from "react";
+var DEFAULT_CARD_ASPECT_RATIO = 4 / 3;
 function Card({
   href,
   src,
@@ -2149,12 +2146,15 @@ function Card({
   ...rest
 }) {
   const containerRef = useRef(null);
-  const [inView, setInView] = useState5(!lazy);
-  const [imageLoaded, setImageLoaded] = useState5(!lazy);
+  const isBrowser = typeof window !== "undefined";
+  const supportsIntersectionObserver = typeof IntersectionObserver === "function";
+  const shouldRenderImmediately = !lazy || !isBrowser || !supportsIntersectionObserver;
+  const [inView, setInView] = useState5(shouldRenderImmediately);
+  const [imageLoaded, setImageLoaded] = useState5(shouldRenderImmediately);
   useEffect5(() => {
     if (!lazy) return;
     if (!containerRef.current) return;
-    if (typeof IntersectionObserver !== "function") {
+    if (!supportsIntersectionObserver) {
       setInView(true);
       return;
     }
@@ -2184,10 +2184,12 @@ function Card({
       } catch (_) {
       }
     };
-  }, [lazy]);
+  }, [lazy, supportsIntersectionObserver]);
   const w = Number(imgWidth);
   const h = Number(imgHeight);
-  const ratio = Number.isFinite(Number(aspectRatio)) && Number(aspectRatio) > 0 ? Number(aspectRatio) : Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0 ? w / h : void 0;
+  const hasAspectRatio = Number.isFinite(Number(aspectRatio)) && Number(aspectRatio) > 0;
+  const hasDimensions = Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0;
+  const ratio = hasAspectRatio ? Number(aspectRatio) : hasDimensions ? w / h : src ? DEFAULT_CARD_ASPECT_RATIO : void 0;
   const paddingPercent = ratio ? 100 / ratio : 100;
   const caption = /* @__PURE__ */ React23.createElement("figcaption", null, title && /* @__PURE__ */ React23.createElement("span", null, title), subtitle && /* @__PURE__ */ React23.createElement("span", null, subtitle), children);
   return /* @__PURE__ */ React23.createElement(
@@ -2233,6 +2235,8 @@ function Card({
 }
 
 // ui/src/content/ReferencedItems.jsx
+import React24 from "react";
+import navigationHelpers4 from "@canopy-iiif/app/lib/components/navigation.js";
 function useReferencedItems(itemsProp) {
   if (Array.isArray(itemsProp)) return itemsProp;
   const PageContext = navigationHelpers4 && typeof navigationHelpers4.getPageContext === "function" ? navigationHelpers4.getPageContext() : null;
@@ -7394,6 +7398,7 @@ export {
   CanopyFooter,
   CanopyHeader,
   CanopyModal,
+  Card,
   Container,
   DocsCodeBlock,
   MarkdownTable as DocsMarkdownTable,