@pantheon-systems/p1-media 0.4.2 → 0.4.4

package/README.md

@@ -0,0 +1,56 @@
+# @pantheon-systems/p1-media
+
+Media library plugin for the P1 Puck editor, backed by Cloudflare R2. Adds asset upload and
+browsing to the editor, plus render helpers and a ready-made media figure block.
+
+> Part of Pantheon's **P1** platform. It is published publicly so P1 applications can install
+> it, but it requires the Pantheon-hosted media Worker and is not a general-purpose Puck
+> plugin. Pre-1.0: minor versions may carry breaking changes.
+
+## Install
+
+```bash
+npm install @pantheon-systems/p1-media
+```
+
+Peer dependencies:
+
+```bash
+npm install @pantheon-systems/puck-css @puckeditor/core react
+```
+
+## Usage
+
+Add the plugin to the editor:
+
+```tsx
+import { createMediaPlugin } from "@pantheon-systems/p1-media";
+
+const mediaPlugin = createMediaPlugin({
+  workerUrl: process.env.NEXT_PUBLIC_MEDIA_WORKER_URL,
+});
+```
+
+`siteId` defaults to the ambient `P1PuckProvider` site context — pass it explicitly only when
+rendering outside that provider, or to override it. `workerUrl` defaults to the production
+media host.
+
+Render uploaded media with the provided components, which handle R2 image transformation URLs:
+
+```tsx
+import { MediaImage, MediaFigure, buildImageUrl } from "@pantheon-systems/p1-media";
+```
+
+`createMediaFigureBlock` builds a drop-in Puck block for captioned media.
+
+## Entry points
+
+| Import | Contents |
+| --- | --- |
+| `@pantheon-systems/p1-media` | Plugin, render components, media value helpers |
+| `.../server` | Server-side helpers |
+
+## Note on the package name
+
+The source directory is `packages/p1-media-r2/`, but the package publishes as
+`@pantheon-systems/p1-media`.

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactElement, ImgHTMLAttributes, ReactNode } from 'react';
+import * as react from 'react';
+import { ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { ComponentConfig } from '@puckeditor/core';
 
 /**
@@ -116,8 +116,8 @@ declare function createMediaPlugin(options: MediaPluginOptions): {
     name: string;
     overrides: {
         fieldTypes: {
-            text: (props: any) => react_jsx_runtime.JSX.Element;
-            "p1-media": (props: any) => react_jsx_runtime.JSX.Element;
+            text: (props: any) => react.JSX.Element;
+            "p1-media": (props: any) => react.JSX.Element;
         };
     };
     fieldTransforms: {
@@ -188,7 +188,7 @@ declare function getMediaProps(value: MediaFieldValue | null | undefined, option
  * (a broken foreign-origin image is never emitted). `alt` may be overridden;
  * otherwise it comes from the value.
  */
-declare function MediaImage({ image, mediaBaseUrl, transform, alt, ...rest }: {
+declare function MediaImage({ image, mediaBaseUrl, transform, alt, loading, decoding, ...rest }: {
     image: MediaFieldValue | null | undefined;
     mediaBaseUrl?: string;
     transform?: ImageTransformParams;
@@ -198,17 +198,21 @@ declare function MediaImage({ image, mediaBaseUrl, transform, alt, ...rest }: {
  * ESCAPED text (React default escaping — never dangerouslySetInnerHTML, req.
  * R6). Renders nothing when the src is rejected/empty.
  */
-declare function MediaFigure({ image, schema, mediaBaseUrl, transform, className, captionClassName, }: {
+declare function MediaFigure({ image, schema, mediaBaseUrl, transform, className, captionClassName, loading, decoding, }: {
     image: MediaFieldValue | null | undefined;
     schema?: MetadataFieldDef[];
     mediaBaseUrl?: string;
     transform?: ImageTransformParams;
     className?: string;
     captionClassName?: string;
+    /** Defaults to "lazy"; pass "eager" for an above-the-fold figure. */
+    loading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
+    decoding?: ImgHTMLAttributes<HTMLImageElement>["decoding"];
 }): ReactElement | null;
 
 interface MediaFigureBlockProps {
     photo: MediaFieldValue | null;
+    loading?: "lazy" | "eager";
 }
 interface MediaFigureBlockOptions {
     /**
@@ -233,6 +237,12 @@ interface MediaFigureBlockOptions {
     captionClassName?: string;
     /** Rendered when no photo is chosen (or its URL fails origin validation). */
     placeholder?: ReactNode;
+    /**
+     * Default for the block's "Loading" field. "lazy" (the default) keeps
+     * off-screen images off the wire on image-heavy pages; use "eager" when the
+     * block is reliably above the fold.
+     */
+    defaultLoading?: "lazy" | "eager";
 }
 /**
  * Builds a registerable Puck component around the rich `p1-media` field and

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactElement, ImgHTMLAttributes, ReactNode } from 'react';
+import * as react from 'react';
+import { ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
 import { ComponentConfig } from '@puckeditor/core';
 
 /**
@@ -116,8 +116,8 @@ declare function createMediaPlugin(options: MediaPluginOptions): {
     name: string;
     overrides: {
         fieldTypes: {
-            text: (props: any) => react_jsx_runtime.JSX.Element;
-            "p1-media": (props: any) => react_jsx_runtime.JSX.Element;
+            text: (props: any) => react.JSX.Element;
+            "p1-media": (props: any) => react.JSX.Element;
         };
     };
     fieldTransforms: {
@@ -188,7 +188,7 @@ declare function getMediaProps(value: MediaFieldValue | null | undefined, option
  * (a broken foreign-origin image is never emitted). `alt` may be overridden;
  * otherwise it comes from the value.
  */
-declare function MediaImage({ image, mediaBaseUrl, transform, alt, ...rest }: {
+declare function MediaImage({ image, mediaBaseUrl, transform, alt, loading, decoding, ...rest }: {
     image: MediaFieldValue | null | undefined;
     mediaBaseUrl?: string;
     transform?: ImageTransformParams;
@@ -198,17 +198,21 @@ declare function MediaImage({ image, mediaBaseUrl, transform, alt, ...rest }: {
  * ESCAPED text (React default escaping — never dangerouslySetInnerHTML, req.
  * R6). Renders nothing when the src is rejected/empty.
  */
-declare function MediaFigure({ image, schema, mediaBaseUrl, transform, className, captionClassName, }: {
+declare function MediaFigure({ image, schema, mediaBaseUrl, transform, className, captionClassName, loading, decoding, }: {
     image: MediaFieldValue | null | undefined;
     schema?: MetadataFieldDef[];
     mediaBaseUrl?: string;
     transform?: ImageTransformParams;
     className?: string;
     captionClassName?: string;
+    /** Defaults to "lazy"; pass "eager" for an above-the-fold figure. */
+    loading?: ImgHTMLAttributes<HTMLImageElement>["loading"];
+    decoding?: ImgHTMLAttributes<HTMLImageElement>["decoding"];
 }): ReactElement | null;
 
 interface MediaFigureBlockProps {
     photo: MediaFieldValue | null;
+    loading?: "lazy" | "eager";
 }
 interface MediaFigureBlockOptions {
     /**
@@ -233,6 +237,12 @@ interface MediaFigureBlockOptions {
     captionClassName?: string;
     /** Rendered when no photo is chosen (or its URL fails origin validation). */
     placeholder?: ReactNode;
+    /**
+     * Default for the block's "Loading" field. "lazy" (the default) keeps
+     * off-screen images off the wire on image-heavy pages; use "eager" when the
+     * block is reliably above the fold.
+     */
+    defaultLoading?: "lazy" | "eager";
 }
 /**
  * Builds a registerable Puck component around the rich `p1-media` field and

package/dist/index.js

@@ -59,6 +59,46 @@ var DEFAULT_MEDIA_PATTERNS = [
 // src/components/media-field.tsx
 var import_react7 = require("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
 var import_react6 = require("react");
 
@@ -224,6 +264,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";
@@ -1326,12 +1369,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()
@@ -1469,46 +1513,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
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function MediaFieldRender(props) {
@@ -1663,10 +1667,73 @@ function MediaFieldRender(props) {
 // src/components/media-object-field.tsx
 var import_react10 = require("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
 var import_react9 = require("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
 var import_react8 = __toESM(require("react"), 1);
 var r = {
   x: 0,
@@ -2095,7 +2162,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
@@ -2342,69 +2409,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
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function MediaObjectFieldRender(props) {
@@ -2811,6 +2815,8 @@ function MediaImage({
   mediaBaseUrl,
   transform,
   alt,
+  loading = "lazy",
+  decoding = "async",
   ...rest
 }) {
   const props = getMediaProps(image, { mediaBaseUrl, transform });
@@ -2820,6 +2826,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
@@ -2852,7 +2860,9 @@ function MediaFigure({
   mediaBaseUrl,
   transform,
   className,
-  captionClassName
+  captionClassName,
+  loading = "lazy",
+  decoding = "async"
 }) {
   const props = getMediaProps(image, { mediaBaseUrl, transform });
   if (!props.src) return null;
@@ -2863,6 +2873,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 } : {}
       }
@@ -2894,19 +2906,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__ */ (0, import_jsx_runtime14.jsx)("div", { style: placeholderStyle, children: placeholder });
@@ -2919,7 +2941,8 @@ function createMediaFigureBlock(options) {
           transform,
           schema,
           className,
-          captionClassName
+          captionClassName,
+          loading: loading === "eager" ? "eager" : "lazy"
         }
       );
     }