@pantheon-systems/p1-media 0.4.2 → 0.4.4

package/dist/index.mjs

@@ -17,6 +17,46 @@ var DEFAULT_MEDIA_PATTERNS = [
 // src/components/media-field.tsx
 import { useState as useState5 } from "react";
 
+// src/crop.ts
+function getBaseUrl(value) {
+  return value ? value.split("?")[0] : "";
+}
+function getParams(value) {
+  return new URLSearchParams(value.includes("?") ? value.split("?")[1] : "");
+}
+function getCropMode(value) {
+  if (!value) return "fit";
+  const params = getParams(value);
+  if (params.has("trim.left")) return "custom";
+  return params.get("fit") === "cover" ? "smart" : "fit";
+}
+function getTrimRect(value) {
+  if (!value) return null;
+  const params = getParams(value);
+  const read = (key) => {
+    const raw = params.get(key);
+    if (raw === null || raw === "") return null;
+    const n2 = Number(raw);
+    return Number.isFinite(n2) ? n2 : null;
+  };
+  const left = read("trim.left");
+  const top = read("trim.top");
+  const width = read("trim.width");
+  const height = read("trim.height");
+  if (left === null || top === null || width === null || height === null) return null;
+  return { left, top, width, height };
+}
+function buildValueWithCrop(baseUrl, crop) {
+  return crop === "smart" ? `${baseUrl}?fit=cover&gravity=auto` : `${baseUrl}?fit=scale-down`;
+}
+function buildValueWithTrim(baseUrl, rect) {
+  const left = Math.max(0, Math.round(rect.left));
+  const top = Math.max(0, Math.round(rect.top));
+  const width = Math.max(1, Math.round(rect.width));
+  const height = Math.max(1, Math.round(rect.height));
+  return `${baseUrl}?trim.left=${left}&trim.top=${top}&trim.width=${width}&trim.height=${height}`;
+}
+
 // src/components/media-library.tsx
 import { useState as useState4, useEffect as useEffect4, useRef as useRef4, useCallback } from "react";
 
@@ -182,6 +222,9 @@ async function runUpload(target, file, metadata, assetId, progress, onStep) {
     uploaded = true;
   }
   const nextProgress = { presigned, uploaded };
+  if (presigned === void 0) {
+    throw new UploadFlowError("Resume state is missing its presign result", nextProgress);
+  }
   const presignedResult = presigned;
   onStep("finalizing");
   const finalizePath = assetId ? `/media/${encodeURIComponent(assetId)}/versions/finalize` : "/media/finalize";
@@ -1284,12 +1327,13 @@ function MediaLibrary({ isOpen, onClose, onSelect, onSelectItem }) {
     onClose();
   };
   const deleteItem = (item) => {
-    if (!item.assetId) return;
+    const { assetId } = item;
+    if (!assetId) return;
     (async () => {
       try {
         const params = siteParams(config);
         const response = await fetch(
-          config.workerUrl + "/media/" + encodeURIComponent(item.assetId) + "?" + params.toString(),
+          config.workerUrl + "/media/" + encodeURIComponent(assetId) + "?" + params.toString(),
           {
             method: "DELETE",
             headers: await getAuthHeaders()
@@ -1427,46 +1471,6 @@ function MediaLibrary({ isOpen, onClose, onSelect, onSelectItem }) {
   );
 }
 
-// src/crop.ts
-function getBaseUrl(value) {
-  return value ? value.split("?")[0] : "";
-}
-function getParams(value) {
-  return new URLSearchParams(value.includes("?") ? value.split("?")[1] : "");
-}
-function getCropMode(value) {
-  if (!value) return "fit";
-  const params = getParams(value);
-  if (params.has("trim.left")) return "custom";
-  return params.get("fit") === "cover" ? "smart" : "fit";
-}
-function getTrimRect(value) {
-  if (!value) return null;
-  const params = getParams(value);
-  const read = (key) => {
-    const raw = params.get(key);
-    if (raw === null || raw === "") return null;
-    const n2 = Number(raw);
-    return Number.isFinite(n2) ? n2 : null;
-  };
-  const left = read("trim.left");
-  const top = read("trim.top");
-  const width = read("trim.width");
-  const height = read("trim.height");
-  if (left === null || top === null || width === null || height === null) return null;
-  return { left, top, width, height };
-}
-function buildValueWithCrop(baseUrl, crop) {
-  return crop === "smart" ? `${baseUrl}?fit=cover&gravity=auto` : `${baseUrl}?fit=scale-down`;
-}
-function buildValueWithTrim(baseUrl, rect) {
-  const left = Math.max(0, Math.round(rect.left));
-  const top = Math.max(0, Math.round(rect.top));
-  const width = Math.max(1, Math.round(rect.width));
-  const height = Math.max(1, Math.round(rect.height));
-  return `${baseUrl}?trim.left=${left}&trim.top=${top}&trim.width=${width}&trim.height=${height}`;
-}
-
 // src/components/media-field.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function MediaFieldRender(props) {
@@ -1621,10 +1625,73 @@ function MediaFieldRender(props) {
 // src/components/media-object-field.tsx
 import { useState as useState7 } from "react";
 
+// src/media-value.ts
+var STRUCTURAL_MEDIA_KEYS = /* @__PURE__ */ new Set([
+  "assetId",
+  "versionId",
+  "url",
+  "metaSchemaVersion"
+]);
+function isMediaValue(value) {
+  return typeof value === "object" && value !== null;
+}
+function makeMediaValue(input) {
+  if (!input.assetId || !input.versionId) {
+    return input.url;
+  }
+  const value = {
+    assetId: input.assetId,
+    versionId: input.versionId,
+    url: input.url
+  };
+  if (typeof input.metaSchemaVersion === "number") {
+    value.metaSchemaVersion = input.metaSchemaVersion;
+  }
+  if (input.metadata) {
+    for (const [k, v] of Object.entries(input.metadata)) {
+      if (v === void 0 || v === "") continue;
+      if (STRUCTURAL_MEDIA_KEYS.has(k)) continue;
+      value[k] = v;
+    }
+  }
+  return value;
+}
+function buildValueFromAsset(asset, crop) {
+  const metadata = { ...asset.metadata ?? {} };
+  if (typeof asset.width === "number") metadata.width = asset.width;
+  if (typeof asset.height === "number") metadata.height = asset.height;
+  return makeMediaValue({
+    assetId: asset.assetId,
+    versionId: asset.versionId,
+    url: buildValueWithCrop(getBaseUrl(asset.url), crop),
+    metaSchemaVersion: asset.metaSchemaVersion,
+    metadata
+  });
+}
+function applyCropToValue(value, crop) {
+  const currentUrl = isMediaValue(value) ? value.url : value;
+  const baseUrl = getBaseUrl(typeof currentUrl === "string" ? currentUrl : "");
+  if (!baseUrl) return value;
+  const url = buildValueWithCrop(baseUrl, crop);
+  return isMediaValue(value) ? { ...value, url } : url;
+}
+function applyTrimToValue(value, rect) {
+  const currentUrl = isMediaValue(value) ? value.url : value;
+  const baseUrl = getBaseUrl(typeof currentUrl === "string" ? currentUrl : "");
+  if (!baseUrl) return value;
+  const url = buildValueWithTrim(baseUrl, rect);
+  return isMediaValue(value) ? { ...value, url } : url;
+}
+function setMetaOnValue(value, fieldName, fieldValue) {
+  if (!isMediaValue(value)) return value;
+  if (STRUCTURAL_MEDIA_KEYS.has(fieldName)) return value;
+  return { ...value, [fieldName]: fieldValue };
+}
+
 // src/components/crop-dialog.tsx
 import { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
 
-// ../../node_modules/.pnpm/react-image-crop@11.1.2_react@19.2.6/node_modules/react-image-crop/dist/index.js
+// ../../node_modules/.pnpm/react-image-crop@11.1.2_react@19.2.7/node_modules/react-image-crop/dist/index.js
 import e, { PureComponent as t, createRef as n } from "react";
 var r = {
   x: 0,
@@ -2053,7 +2120,7 @@ function styleInject(css, { insertAt } = {}) {
   }
 }
 
-// ../../node_modules/.pnpm/react-image-crop@11.1.2_react@19.2.6/node_modules/react-image-crop/dist/ReactCrop.css
+// ../../node_modules/.pnpm/react-image-crop@11.1.2_react@19.2.7/node_modules/react-image-crop/dist/ReactCrop.css
 styleInject('@keyframes marching-ants {\n  0% {\n    background-position:\n      0 0,\n      0 100%,\n      0 0,\n      100% 0;\n  }\n  to {\n    background-position:\n      20px 0,\n      -20px 100%,\n      0 -20px,\n      100% 20px;\n  }\n}\n:root {\n  --rc-drag-handle-size:12px;\n  --rc-drag-handle-mobile-size:24px;\n  --rc-drag-handle-bg-colour:#0003;\n  --rc-drag-bar-size:6px;\n  --rc-border-color:#ffffffb3;\n  --rc-focus-color:#08f;\n}\n.ReactCrop {\n  cursor: crosshair;\n  max-width: 100%;\n  display: inline-block;\n  position: relative;\n}\n.ReactCrop *,\n.ReactCrop :before,\n.ReactCrop :after {\n  box-sizing: border-box;\n}\n.ReactCrop--disabled,\n.ReactCrop--locked {\n  cursor: inherit;\n}\n.ReactCrop__child-wrapper {\n  max-height: inherit;\n  overflow: hidden;\n}\n.ReactCrop__child-wrapper > img,\n.ReactCrop__child-wrapper > video {\n  max-width: 100%;\n  max-height: inherit;\n  display: block;\n}\n.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img,\n.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video,\n.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {\n  touch-action: none;\n}\n.ReactCrop__crop-mask {\n  pointer-events: none;\n  width: calc(100% + .5px);\n  height: calc(100% + .5px);\n  position: absolute;\n  inset: 0;\n}\n.ReactCrop__crop-selection {\n  cursor: move;\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(0, 0);\n}\n.ReactCrop--disabled .ReactCrop__crop-selection {\n  cursor: inherit;\n}\n.ReactCrop--circular-crop .ReactCrop__crop-selection {\n  border-radius: 50%;\n}\n.ReactCrop--circular-crop .ReactCrop__crop-selection:after {\n  pointer-events: none;\n  content: "";\n  border: 1px solid var(--rc-border-color);\n  opacity: .3;\n  position: absolute;\n  inset: -1px;\n}\n.ReactCrop--no-animate .ReactCrop__crop-selection {\n  outline: 1px dashed #fff;\n}\n.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) {\n  color: #fff;\n  background-image:\n    linear-gradient(\n      90deg,\n      #fff 50%,\n      #444 50%),\n    linear-gradient(\n      90deg,\n      #fff 50%,\n      #444 50%),\n    linear-gradient(#fff 50%, #444 50%),\n    linear-gradient(#fff 50%, #444 50%);\n  background-position:\n    0 0,\n    0 100%,\n    0 0,\n    100% 0;\n  background-repeat:\n    repeat-x,\n    repeat-x,\n    repeat-y,\n    repeat-y;\n  background-size:\n    10px 1px,\n    10px 1px,\n    1px 10px,\n    1px 10px;\n  animation: 1s linear infinite marching-ants;\n}\n.ReactCrop__crop-selection:focus {\n  outline: 2px solid var(--rc-focus-color);\n  outline-offset: -1px;\n}\n.ReactCrop--invisible-crop .ReactCrop__crop-mask,\n.ReactCrop--invisible-crop .ReactCrop__crop-selection {\n  display: none;\n}\n.ReactCrop__rule-of-thirds-vt:before,\n.ReactCrop__rule-of-thirds-vt:after,\n.ReactCrop__rule-of-thirds-hz:before,\n.ReactCrop__rule-of-thirds-hz:after {\n  content: "";\n  background-color: #fff6;\n  display: block;\n  position: absolute;\n}\n.ReactCrop__rule-of-thirds-vt:before,\n.ReactCrop__rule-of-thirds-vt:after {\n  width: 1px;\n  height: 100%;\n}\n.ReactCrop__rule-of-thirds-vt:before {\n  left: 33.3333%;\n}\n.ReactCrop__rule-of-thirds-vt:after {\n  left: 66.6667%;\n}\n.ReactCrop__rule-of-thirds-hz:before,\n.ReactCrop__rule-of-thirds-hz:after {\n  width: 100%;\n  height: 1px;\n}\n.ReactCrop__rule-of-thirds-hz:before {\n  top: 33.3333%;\n}\n.ReactCrop__rule-of-thirds-hz:after {\n  top: 66.6667%;\n}\n.ReactCrop__drag-handle {\n  width: var(--rc-drag-handle-size);\n  height: var(--rc-drag-handle-size);\n  background-color: var(--rc-drag-handle-bg-colour);\n  border: 1px solid var(--rc-border-color);\n  position: absolute;\n}\n.ReactCrop__drag-handle:focus {\n  background: var(--rc-focus-color);\n}\n.ReactCrop .ord-nw {\n  cursor: nw-resize;\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n}\n.ReactCrop .ord-n {\n  cursor: n-resize;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ReactCrop .ord-ne {\n  cursor: ne-resize;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n}\n.ReactCrop .ord-e {\n  cursor: e-resize;\n  top: 50%;\n  right: 0;\n  transform: translate(50%, -50%);\n}\n.ReactCrop .ord-se {\n  cursor: se-resize;\n  bottom: 0;\n  right: 0;\n  transform: translate(50%, 50%);\n}\n.ReactCrop .ord-s {\n  cursor: s-resize;\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n.ReactCrop .ord-sw {\n  cursor: sw-resize;\n  bottom: 0;\n  left: 0;\n  transform: translate(-50%, 50%);\n}\n.ReactCrop .ord-w {\n  cursor: w-resize;\n  top: 50%;\n  left: 0;\n  transform: translate(-50%, -50%);\n}\n.ReactCrop__disabled .ReactCrop__drag-handle {\n  cursor: inherit;\n}\n.ReactCrop__drag-bar {\n  position: absolute;\n}\n.ReactCrop__drag-bar.ord-n {\n  width: 100%;\n  height: var(--rc-drag-bar-size);\n  top: 0;\n  left: 0;\n  transform: translateY(-50%);\n}\n.ReactCrop__drag-bar.ord-e {\n  width: var(--rc-drag-bar-size);\n  height: 100%;\n  top: 0;\n  right: 0;\n  transform: translate(50%);\n}\n.ReactCrop__drag-bar.ord-s {\n  width: 100%;\n  height: var(--rc-drag-bar-size);\n  bottom: 0;\n  left: 0;\n  transform: translateY(50%);\n}\n.ReactCrop__drag-bar.ord-w {\n  width: var(--rc-drag-bar-size);\n  height: 100%;\n  top: 0;\n  left: 0;\n  transform: translate(-50%);\n}\n.ReactCrop--new-crop .ReactCrop__drag-bar,\n.ReactCrop--new-crop .ReactCrop__drag-handle,\n.ReactCrop--fixed-aspect .ReactCrop__drag-bar,\n.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,\n.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,\n.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,\n.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {\n  display: none;\n}\n@media (pointer: coarse) {\n  .ReactCrop .ord-n,\n  .ReactCrop .ord-e,\n  .ReactCrop .ord-s,\n  .ReactCrop .ord-w {\n    display: none;\n  }\n  .ReactCrop__drag-handle {\n    width: var(--rc-drag-handle-mobile-size);\n    height: var(--rc-drag-handle-mobile-size);\n  }\n}\n');
 
 // src/components/crop-dialog.tsx
@@ -2300,69 +2367,6 @@ function CropDialog(props) {
   );
 }
 
-// src/media-value.ts
-var STRUCTURAL_MEDIA_KEYS = /* @__PURE__ */ new Set([
-  "assetId",
-  "versionId",
-  "url",
-  "metaSchemaVersion"
-]);
-function isMediaValue(value) {
-  return typeof value === "object" && value !== null;
-}
-function makeMediaValue(input) {
-  if (!input.assetId || !input.versionId) {
-    return input.url;
-  }
-  const value = {
-    assetId: input.assetId,
-    versionId: input.versionId,
-    url: input.url
-  };
-  if (typeof input.metaSchemaVersion === "number") {
-    value.metaSchemaVersion = input.metaSchemaVersion;
-  }
-  if (input.metadata) {
-    for (const [k, v] of Object.entries(input.metadata)) {
-      if (v === void 0 || v === "") continue;
-      if (STRUCTURAL_MEDIA_KEYS.has(k)) continue;
-      value[k] = v;
-    }
-  }
-  return value;
-}
-function buildValueFromAsset(asset, crop) {
-  const metadata = { ...asset.metadata ?? {} };
-  if (typeof asset.width === "number") metadata.width = asset.width;
-  if (typeof asset.height === "number") metadata.height = asset.height;
-  return makeMediaValue({
-    assetId: asset.assetId,
-    versionId: asset.versionId,
-    url: buildValueWithCrop(getBaseUrl(asset.url), crop),
-    metaSchemaVersion: asset.metaSchemaVersion,
-    metadata
-  });
-}
-function applyCropToValue(value, crop) {
-  const currentUrl = isMediaValue(value) ? value.url : value;
-  const baseUrl = getBaseUrl(typeof currentUrl === "string" ? currentUrl : "");
-  if (!baseUrl) return value;
-  const url = buildValueWithCrop(baseUrl, crop);
-  return isMediaValue(value) ? { ...value, url } : url;
-}
-function applyTrimToValue(value, rect) {
-  const currentUrl = isMediaValue(value) ? value.url : value;
-  const baseUrl = getBaseUrl(typeof currentUrl === "string" ? currentUrl : "");
-  if (!baseUrl) return value;
-  const url = buildValueWithTrim(baseUrl, rect);
-  return isMediaValue(value) ? { ...value, url } : url;
-}
-function setMetaOnValue(value, fieldName, fieldValue) {
-  if (!isMediaValue(value)) return value;
-  if (STRUCTURAL_MEDIA_KEYS.has(fieldName)) return value;
-  return { ...value, [fieldName]: fieldValue };
-}
-
 // src/components/media-object-field.tsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function MediaObjectFieldRender(props) {
@@ -2769,6 +2773,8 @@ function MediaImage({
   mediaBaseUrl,
   transform,
   alt,
+  loading = "lazy",
+  decoding = "async",
   ...rest
 }) {
   const props = getMediaProps(image, { mediaBaseUrl, transform });
@@ -2778,6 +2784,8 @@ function MediaImage({
     {
       src: props.src,
       alt: alt ?? props.alt,
+      loading,
+      decoding,
       ...props.width !== void 0 ? { width: props.width } : {},
       ...props.height !== void 0 ? { height: props.height } : {},
       ...rest
@@ -2810,7 +2818,9 @@ function MediaFigure({
   mediaBaseUrl,
   transform,
   className,
-  captionClassName
+  captionClassName,
+  loading = "lazy",
+  decoding = "async"
 }) {
   const props = getMediaProps(image, { mediaBaseUrl, transform });
   if (!props.src) return null;
@@ -2821,6 +2831,8 @@ function MediaFigure({
       {
         src: props.src,
         alt: props.alt,
+        loading,
+        decoding,
         ...props.width !== void 0 ? { width: props.width } : {},
         ...props.height !== void 0 ? { height: props.height } : {}
       }
@@ -2852,19 +2864,29 @@ function createMediaFigureBlock(options) {
     schema,
     className,
     captionClassName,
-    placeholder = "Choose a photo from the media library"
+    placeholder = "Choose a photo from the media library",
+    defaultLoading = "lazy"
   } = options;
   return {
     label,
     fields: {
       // `p1-media` is registered by createMediaPlugin via overrides.fieldTypes,
       // so it is not part of Puck's built-in Field union.
-      photo: { type: "p1-media", label: fieldLabel }
+      photo: { type: "p1-media", label: fieldLabel },
+      loading: {
+        type: "radio",
+        label: "Loading",
+        options: [
+          { label: "Lazy", value: "lazy" },
+          { label: "Eager", value: "eager" }
+        ]
+      }
     },
     defaultProps: {
-      photo: null
+      photo: null,
+      loading: defaultLoading
     },
-    render: ({ photo }) => {
+    render: ({ photo, loading }) => {
       const { src } = getMediaProps(photo ?? null, { mediaBaseUrl });
       if (!src) {
         return /* @__PURE__ */ jsx14("div", { style: placeholderStyle, children: placeholder });
@@ -2877,7 +2899,8 @@ function createMediaFigureBlock(options) {
           transform,
           schema,
           className,
-          captionClassName
+          captionClassName,
+          loading: loading === "eager" ? "eager" : "lazy"
         }
       );
     }