@pantheon-systems/p1-media 0.4.1 → 0.4.3

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,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactElement, ImgHTMLAttributes, 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: {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactElement, ImgHTMLAttributes, 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: {

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) {