@pantheon-systems/p1-media 0.4.0

package/dist/index.mjs

@@ -0,0 +1,2897 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/patterns.ts
+var DEFAULT_MEDIA_PATTERNS = [
+  /^image(?:Url)?$/,
+  /^logo(?:Url)?$/,
+  /^media(?:Url)?$/,
+  /^icon(?:Url)?$/,
+  /^thumbnail(?:Url)?$/,
+  /ImageUrl$/,
+  /LogoUrl$/
+];
+
+// src/components/media-field.tsx
+import { useState as useState5 } from "react";
+
+// src/components/media-library.tsx
+import { useState as useState4, useEffect as useEffect4, useRef as useRef4, useCallback } from "react";
+
+// src/context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var MediaConfigContext = createContext(null);
+function MediaConfigProvider({
+  config,
+  children
+}) {
+  return /* @__PURE__ */ jsx(MediaConfigContext.Provider, { value: config, children });
+}
+function useMediaConfig() {
+  const ctx = useContext(MediaConfigContext);
+  if (!ctx)
+    throw new Error("useMediaConfig must be used within MediaConfigProvider");
+  return ctx;
+}
+
+// src/components/use-media-schema.ts
+import { useState, useEffect } from "react";
+var DEFAULT_METADATA_FIELDS = [
+  { name: "alt", label: "Alt text", type: "string" }
+];
+function orderAltFirst(schema) {
+  const alt = schema.find((f2) => f2.name === "alt");
+  if (!alt) return schema;
+  return [alt, ...schema.filter((f2) => f2.name !== "alt")];
+}
+function useMediaSchema() {
+  const config = useMediaConfig();
+  const fallback = config.metadataFields && config.metadataFields.length > 0 ? config.metadataFields : DEFAULT_METADATA_FIELDS;
+  const [schema, setSchema] = useState(fallback);
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const token = await config.getAuthToken();
+        const headers = token ? { Authorization: "Bearer " + token } : {};
+        const res = await fetch(config.workerUrl + "/media/schema", { headers });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!cancelled && Array.isArray(data) && data.length > 0) {
+          setSchema(data);
+        }
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [config]);
+  return schema;
+}
+
+// src/components/staging.ts
+function buildPatchBody(fields, row) {
+  const body = {};
+  fields.forEach((f2, c2) => {
+    const value = row[c2]?.trim();
+    body[f2.name] = value ? value : null;
+  });
+  return body;
+}
+function keepIncompleteRows(rows, values, progress, statuses) {
+  const kept = [];
+  const keptValues = [];
+  const keptProgress = [];
+  const keptStatuses = [];
+  rows.forEach((row, i2) => {
+    if (statuses[i2]?.step === "done") return;
+    kept.push(row);
+    keptValues.push(values[i2] ?? []);
+    keptProgress.push(progress[i2] ?? {});
+    keptStatuses.push(statuses[i2] ?? { step: "staged" });
+  });
+  return { rows: kept, values: keptValues, progress: keptProgress, statuses: keptStatuses };
+}
+
+// src/components/media-item.ts
+function normalizeItem(raw) {
+  let metadata = raw.metadata;
+  if (typeof metadata === "string") {
+    try {
+      metadata = JSON.parse(metadata);
+    } catch {
+      metadata = void 0;
+    }
+  }
+  return {
+    assetId: raw.assetId,
+    versionId: raw.versionId,
+    url: String(raw.url ?? ""),
+    filename: String(raw.filename ?? ""),
+    contentType: raw.contentType,
+    size: raw.size,
+    width: raw.width,
+    height: raw.height,
+    metadata: metadata && typeof metadata === "object" ? metadata : void 0,
+    metaSchemaVersion: raw.metaSchemaVersion,
+    createdAt: raw.createdAt
+  };
+}
+function parseMediaList(data) {
+  if (!Array.isArray(data)) return [];
+  return data.map((r2) => normalizeItem(r2));
+}
+
+// src/components/upload-flow.ts
+var STAGED_STATUS = { step: "staged" };
+var UploadFlowError = class extends Error {
+  constructor(message, progress) {
+    super(message);
+    this.name = "UploadFlowError";
+    this.progress = progress;
+  }
+};
+function targetParams(target) {
+  const params = new URLSearchParams({ siteId: target.siteId });
+  if (target.workstreamId) params.set("workstreamId", target.workstreamId);
+  return params.toString();
+}
+async function postJson(target, path, body) {
+  return fetch(`${target.workerUrl}${path}?${targetParams(target)}`, {
+    method: "POST",
+    body: JSON.stringify(body),
+    headers: { ...await target.getAuthHeaders(), "Content-Type": "application/json" }
+  });
+}
+async function runUpload(target, file, metadata, assetId, progress, onStep) {
+  let presigned = progress.presigned;
+  let uploaded = progress.uploaded ?? false;
+  if (!uploaded) {
+    onStep("presigning");
+    const presignPath = assetId ? `/media/${encodeURIComponent(assetId)}/versions/presign` : "/media/presign";
+    let presignResponse;
+    try {
+      presignResponse = await postJson(target, presignPath, {
+        filename: file.name,
+        contentType: file.type,
+        size: file.size,
+        metadata
+      });
+    } catch (err) {
+      throw new UploadFlowError(`Could not reach the server: ${err.message}`, {});
+    }
+    if (!presignResponse.ok) throw new UploadFlowError(`Presign failed (${presignResponse.status})`, {});
+    const freshlyPresigned = await presignResponse.json();
+    presigned = freshlyPresigned;
+    onStep("uploading");
+    let putResponse;
+    try {
+      putResponse = await fetch(freshlyPresigned.uploadUrl, {
+        method: "PUT",
+        body: file,
+        headers: { "Content-Type": file.type }
+      });
+    } catch (err) {
+      throw new UploadFlowError(`Upload to storage failed: ${err.message}`, {});
+    }
+    if (!putResponse.ok) throw new UploadFlowError(`Upload to storage failed (${putResponse.status})`, {});
+    uploaded = true;
+  }
+  const nextProgress = { presigned, uploaded };
+  const presignedResult = presigned;
+  onStep("finalizing");
+  const finalizePath = assetId ? `/media/${encodeURIComponent(assetId)}/versions/finalize` : "/media/finalize";
+  const finalizeBody = assetId ? { versionId: presignedResult.versionId, filename: presignedResult.filename } : {
+    assetId: presignedResult.assetId,
+    versionId: presignedResult.versionId,
+    filename: presignedResult.filename,
+    metadata
+  };
+  let finalizeResponse;
+  try {
+    finalizeResponse = await postJson(target, finalizePath, finalizeBody);
+  } catch (err) {
+    throw new UploadFlowError(`Could not reach the server: ${err.message}`, nextProgress);
+  }
+  if (!finalizeResponse.ok) throw new UploadFlowError(`Finalize failed (${finalizeResponse.status})`, nextProgress);
+  const item = normalizeItem(await finalizeResponse.json());
+  return { item, progress: nextProgress };
+}
+
+// src/components/media-upload-dropzone.tsx
+import { useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MediaUploadDropzone(props) {
+  const { uploading, onFilesSelected } = props;
+  const [dragActive, setDragActive] = useState2(false);
+  const fileInputRef = useRef(null);
+  const handleDragOver = (e2) => {
+    e2.preventDefault();
+    e2.stopPropagation();
+    setDragActive(true);
+  };
+  const handleDragLeave = (e2) => {
+    e2.preventDefault();
+    e2.stopPropagation();
+    setDragActive(false);
+  };
+  const handleDrop = (e2) => {
+    e2.preventDefault();
+    e2.stopPropagation();
+    setDragActive(false);
+    onFilesSelected(e2.dataTransfer.files);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: dragActive ? "2px solid #2563eb" : "2px dashed #d0d0d0",
+        borderRadius: "8px",
+        padding: "32px",
+        textAlign: "center",
+        marginBottom: "16px",
+        cursor: "pointer",
+        backgroundColor: dragActive ? "#eff6ff" : "#fafafa",
+        transition: "all 0.2s"
+      },
+      onClick: () => fileInputRef.current?.click(),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            multiple: true,
+            style: { display: "none" },
+            onChange: (e2) => onFilesSelected(e2.target.files)
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: "28px", marginBottom: "8px", color: "#999" }, children: uploading ? "\u23F3" : "\u2191" }),
+        /* @__PURE__ */ jsx2("div", { style: { color: "#666", fontSize: "14px" }, children: uploading ? "Uploading..." : "Drag & drop files here or click to browse" })
+      ]
+    }
+  );
+}
+
+// src/components/metadata-grid.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/delimited.ts
+function parseWithDelimiter(text, delim) {
+  const rows = [];
+  let row = [];
+  let cell = "";
+  let inQuotes = false;
+  for (let i2 = 0; i2 < text.length; i2++) {
+    const ch = text[i2];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i2 + 1] === '"') {
+          cell += '"';
+          i2++;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        cell += ch;
+      }
+    } else if (ch === '"' && cell === "") {
+      inQuotes = true;
+    } else if (ch === delim) {
+      row.push(cell);
+      cell = "";
+    } else if (ch === "\n" || ch === "\r") {
+      if (ch === "\r" && text[i2 + 1] === "\n") i2++;
+      row.push(cell);
+      cell = "";
+      rows.push(row);
+      row = [];
+    } else {
+      cell += ch;
+    }
+  }
+  if (cell !== "" || row.length > 0) {
+    row.push(cell);
+    rows.push(row);
+  }
+  while (rows.length > 0 && rows[rows.length - 1].every((c2) => c2 === "")) rows.pop();
+  return rows;
+}
+function parseDelimited(text) {
+  if (!text) return [];
+  return parseWithDelimiter(text, text.includes("	") ? "	" : ",");
+}
+function norm(s2) {
+  return s2.trim().toLowerCase();
+}
+var FILENAME_HEADERS = /* @__PURE__ */ new Set(["filename", "file", "name"]);
+function detectHeader(row, fields) {
+  let matched = 0;
+  const mapping = row.map(() => -1);
+  for (let c2 = 0; c2 < row.length; c2++) {
+    const cell = norm(row[c2]);
+    if (cell === "") continue;
+    if (FILENAME_HEADERS.has(cell)) {
+      mapping[c2] = "filename";
+      matched++;
+      continue;
+    }
+    const idx = fields.findIndex((f2) => norm(f2.name) === cell || norm(f2.label) === cell);
+    if (idx === -1) return null;
+    mapping[c2] = idx;
+    matched++;
+  }
+  return matched > 0 ? mapping : null;
+}
+function applyDelimited(opts) {
+  const { text, fields, rowLabels, current, anchorRow, anchorCol } = opts;
+  const parsed = parseDelimited(text);
+  if (parsed.length === 0) return null;
+  const multiCell = parsed.length > 1 || parsed[0].length > 1 && text.includes("	");
+  if (!multiCell) return null;
+  const next = current.map((r2) => [...r2]);
+  const header = detectHeader(parsed[0], fields);
+  if (header && parsed.length > 1) {
+    const dataRows = parsed.slice(1);
+    const filenameCol = header.indexOf("filename");
+    for (let i2 = 0; i2 < dataRows.length; i2++) {
+      let targetRow;
+      if (filenameCol !== -1) {
+        const wanted = norm(dataRows[i2][filenameCol] ?? "");
+        targetRow = rowLabels.findIndex((l2) => norm(l2) === wanted);
+        if (targetRow === -1) continue;
+      } else {
+        targetRow = i2;
+        if (targetRow >= next.length) break;
+      }
+      for (let c2 = 0; c2 < dataRows[i2].length; c2++) {
+        const fieldIdx = header[c2];
+        if (typeof fieldIdx !== "number" || fieldIdx < 0) continue;
+        next[targetRow][fieldIdx] = dataRows[i2][c2] ?? "";
+      }
+    }
+    return next;
+  }
+  for (let r2 = 0; r2 < parsed.length; r2++) {
+    const targetRow = anchorRow + r2;
+    if (targetRow >= next.length) break;
+    for (let c2 = 0; c2 < parsed[r2].length; c2++) {
+      const targetCol = anchorCol + c2;
+      if (targetCol >= fields.length) break;
+      next[targetRow][targetCol] = parsed[r2][c2];
+    }
+  }
+  return next;
+}
+
+// src/components/metadata-grid.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function MetadataGrid(props) {
+  const { fields, rows, values, onChange, disabled, autoFocus } = props;
+  const inputRefs = useRef2([]);
+  inputRefs.current = rows.map((_, r2) => inputRefs.current[r2] ?? []);
+  useEffect2(() => {
+    if (autoFocus) inputRefs.current[0]?.[0]?.focus();
+  }, []);
+  const setCell = (r2, c2, v) => {
+    const next = values.map((row) => [...row]);
+    next[r2][c2] = v;
+    onChange(next);
+  };
+  const focusCell = (r2, c2) => {
+    inputRefs.current[r2]?.[c2]?.focus();
+  };
+  const handleKeyDown = (e2, r2, c2) => {
+    if (e2.key === "Enter" || e2.key === "ArrowDown") {
+      e2.preventDefault();
+      focusCell(Math.min(r2 + 1, rows.length - 1), c2);
+    } else if (e2.key === "ArrowUp") {
+      e2.preventDefault();
+      focusCell(Math.max(r2 - 1, 0), c2);
+    }
+  };
+  const handlePaste = (e2, r2, c2) => {
+    const text = e2.clipboardData.getData("text/plain");
+    const next = applyDelimited({
+      text,
+      fields,
+      rowLabels: rows.map((row) => row.label),
+      current: values,
+      anchorRow: r2,
+      anchorCol: c2
+    });
+    if (next) {
+      e2.preventDefault();
+      onChange(next);
+    }
+  };
+  const cellInputStyle = {
+    width: "100%",
+    minWidth: "110px",
+    padding: "5px 7px",
+    border: "1px solid #d0d0d0",
+    borderRadius: "4px",
+    fontSize: "13px",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+    outline: "none"
+  };
+  const thStyle = {
+    textAlign: "left",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#666",
+    padding: "4px 6px",
+    whiteSpace: "nowrap"
+  };
+  return /* @__PURE__ */ jsx3("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs2(
+    "table",
+    {
+      role: "grid",
+      "aria-label": "Image metadata",
+      style: { borderCollapse: "separate", borderSpacing: "4px", width: "100%" },
+      children: [
+        /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+          /* @__PURE__ */ jsx3("th", { style: thStyle, scope: "col", children: "File" }),
+          fields.map((f2) => /* @__PURE__ */ jsxs2("th", { style: thStyle, scope: "col", children: [
+            f2.label,
+            f2.required ? " *" : ""
+          ] }, f2.name))
+        ] }) }),
+        /* @__PURE__ */ jsx3("tbody", { children: rows.map((row, r2) => /* @__PURE__ */ jsxs2("tr", { children: [
+          /* @__PURE__ */ jsx3(
+            "th",
+            {
+              scope: "row",
+              style: {
+                ...thStyle,
+                fontWeight: 500,
+                color: "#444",
+                maxWidth: "180px"
+              },
+              children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                row.thumbnailUrl && /* @__PURE__ */ jsx3(
+                  "img",
+                  {
+                    src: row.thumbnailUrl,
+                    alt: "",
+                    style: {
+                      width: "32px",
+                      height: "32px",
+                      objectFit: "cover",
+                      borderRadius: "4px",
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs2("div", { style: { overflow: "hidden" }, children: [
+                  /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      title: row.label,
+                      style: {
+                        display: "block",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        maxWidth: "140px"
+                      },
+                      children: row.label
+                    }
+                  ),
+                  row.status && /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      style: {
+                        display: "block",
+                        fontSize: "11px",
+                        fontWeight: 400,
+                        color: row.status.isError ? "#c0392b" : "#888"
+                      },
+                      children: row.status.text
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          fields.map((f2, c2) => /* @__PURE__ */ jsx3("td", { style: { padding: 0 }, children: /* @__PURE__ */ jsx3(
+            "input",
+            {
+              ref: (el) => {
+                inputRefs.current[r2][c2] = el;
+              },
+              type: "text",
+              value: values[r2]?.[c2] ?? "",
+              disabled,
+              "aria-label": `${f2.label} for ${row.label}`,
+              onChange: (e2) => setCell(r2, c2, e2.target.value),
+              onKeyDown: (e2) => handleKeyDown(e2, r2, c2),
+              onPaste: (e2) => handlePaste(e2, r2, c2),
+              style: { ...cellInputStyle, opacity: disabled ? 0.6 : 1 }
+            }
+          ) }, f2.name))
+        ] }, row.key)) })
+      ]
+    }
+  ) });
+}
+
+// src/components/media-panel-styles.ts
+function primaryBtnStyle(uploading) {
+  return {
+    padding: "8px 16px",
+    backgroundColor: "#2563eb",
+    color: "white",
+    border: "none",
+    borderRadius: "6px",
+    fontSize: "13px",
+    fontWeight: 500,
+    cursor: uploading ? "not-allowed" : "pointer",
+    opacity: uploading ? 0.6 : 1,
+    fontFamily: "inherit"
+  };
+}
+function secondaryBtnStyle(uploading) {
+  return {
+    padding: "8px 16px",
+    backgroundColor: "white",
+    color: "#666",
+    border: "1px solid #d0d0d0",
+    borderRadius: "6px",
+    fontSize: "13px",
+    fontWeight: 500,
+    cursor: uploading ? "not-allowed" : "pointer",
+    fontFamily: "inherit"
+  };
+}
+var panelErrorStyle = {
+  color: "#b91c1c",
+  fontSize: "12px",
+  marginTop: "8px"
+};
+var panelHeadingStyle = {
+  fontSize: "15px",
+  fontWeight: 600,
+  color: "#333",
+  marginBottom: "4px"
+};
+var panelButtonRowStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "8px",
+  marginTop: "16px"
+};
+
+// src/components/media-upload-panel.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var STEP_LABEL = {
+  staged: null,
+  presigning: "Preparing\u2026",
+  uploading: "Uploading\u2026",
+  finalizing: "Finalizing\u2026",
+  done: "Done",
+  failed: null
+  // uses the row's own error message instead
+};
+function statusBadge(status) {
+  if (!status) return void 0;
+  if (status.step === "failed") return { text: status.error ?? "Failed", isError: true };
+  const text = STEP_LABEL[status.step];
+  return text ? { text } : void 0;
+}
+function MediaUploadPanel(props) {
+  const { schema, pending, pendingValues, onValuesChange, pendingStatus, uploading, panelError, onCancel, onUpload } = props;
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3("div", { style: panelHeadingStyle, children: [
+      "Add details for ",
+      pending.length,
+      " ",
+      pending.length === 1 ? "image" : "images"
+    ] }),
+    /* @__PURE__ */ jsx4("div", { style: { fontSize: "12px", color: "#888", marginBottom: "12px" }, children: "Tab, Enter and the arrow keys move between cells. Paste TSV or CSV from a spreadsheet to fill many rows at once \u2014 include a header row (alt, caption, \u2026) plus an optional filename column to map values automatically." }),
+    /* @__PURE__ */ jsx4(
+      MetadataGrid,
+      {
+        fields: schema,
+        rows: pending.map((p2, i2) => ({
+          key: i2 + "-" + p2.file.name,
+          label: p2.file.name,
+          thumbnailUrl: p2.previewUrl,
+          status: statusBadge(pendingStatus[i2])
+        })),
+        values: pendingValues,
+        onChange: onValuesChange,
+        disabled: uploading,
+        autoFocus: true
+      }
+    ),
+    panelError && /* @__PURE__ */ jsx4("div", { style: panelErrorStyle, children: panelError }),
+    /* @__PURE__ */ jsxs3("div", { style: panelButtonRowStyle, children: [
+      /* @__PURE__ */ jsx4("button", { type: "button", onClick: onCancel, disabled: uploading, style: secondaryBtnStyle(uploading), children: "Cancel" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", onClick: onUpload, disabled: uploading, style: primaryBtnStyle(uploading), children: uploading ? "Uploading\u2026" : `Upload ${pending.length} ${pending.length === 1 ? "image" : "images"}` })
+    ] })
+  ] });
+}
+
+// src/components/media-edit-panel.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function MediaEditPanel(props) {
+  const {
+    editing,
+    editFields,
+    editValues,
+    onValuesChange,
+    uploading,
+    panelError,
+    onCancel,
+    onSave,
+    onReplaceImage,
+    replaceInputRef
+  } = props;
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsxs4("div", { style: { ...panelHeadingStyle, marginBottom: "12px" }, children: [
+      "Edit details \u2014 ",
+      editing.filename
+    ] }),
+    /* @__PURE__ */ jsx5(
+      MetadataGrid,
+      {
+        fields: editFields,
+        rows: [
+          {
+            key: editing.assetId ?? editing.url,
+            label: editing.filename,
+            thumbnailUrl: editing.url
+          }
+        ],
+        values: editValues,
+        onChange: onValuesChange,
+        disabled: uploading,
+        autoFocus: true
+      }
+    ),
+    panelError && /* @__PURE__ */ jsx5("div", { style: panelErrorStyle, children: panelError }),
+    /* @__PURE__ */ jsxs4("div", { style: panelButtonRowStyle, children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref: replaceInputRef,
+          type: "file",
+          accept: "image/*",
+          style: { display: "none" },
+          onChange: (e2) => onReplaceImage(e2.target.files?.[0])
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: () => replaceInputRef.current?.click(),
+          disabled: uploading,
+          title: "Upload a new image as a new version of this asset",
+          style: { ...secondaryBtnStyle(uploading), marginRight: "auto" },
+          children: "Replace image\u2026"
+        }
+      ),
+      /* @__PURE__ */ jsx5("button", { type: "button", onClick: onCancel, disabled: uploading, style: secondaryBtnStyle(uploading), children: "Cancel" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", onClick: onSave, disabled: uploading, style: primaryBtnStyle(uploading), children: uploading ? "Saving\u2026" : "Save details" })
+    ] })
+  ] });
+}
+
+// src/components/media-grid.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var TILE_BATCH = 60;
+function MediaGrid(props) {
+  const {
+    media,
+    loading,
+    searchQuery,
+    onSearchChange,
+    onSelectItem,
+    onStartEdit,
+    onDeleteItem,
+    scrollRef,
+    focusIdx,
+    onFocusIdxChange
+  } = props;
+  const [visibleCount, setVisibleCount] = useState3(TILE_BATCH);
+  const [confirmDeleteId, setConfirmDeleteId] = useState3(null);
+  const sentinelRef = useRef3(null);
+  const tileRefs = useRef3([]);
+  useEffect3(() => {
+    setVisibleCount(TILE_BATCH);
+  }, [media]);
+  useEffect3(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setVisibleCount((count) => count + TILE_BATCH);
+        }
+      },
+      { root: scrollRef.current, rootMargin: "200px" }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [media.length, visibleCount, scrollRef]);
+  const computeColumns = () => {
+    const tiles = tileRefs.current.filter((t2) => t2 !== null);
+    if (tiles.length <= 1) return 1;
+    const firstTop = tiles[0].offsetTop;
+    let columns = 0;
+    for (const tile of tiles) {
+      if (tile.offsetTop !== firstTop) break;
+      columns++;
+    }
+    return Math.max(1, columns);
+  };
+  const focusTile = (index) => {
+    onFocusIdxChange(index);
+    tileRefs.current[index]?.focus();
+  };
+  const handleTileKeyDown = (e2, index, item) => {
+    const rendered = Math.min(media.length, visibleCount);
+    const columns = computeColumns();
+    let next = null;
+    switch (e2.key) {
+      case "ArrowRight":
+        next = Math.min(index + 1, rendered - 1);
+        break;
+      case "ArrowLeft":
+        next = Math.max(index - 1, 0);
+        break;
+      case "ArrowDown":
+        next = Math.min(index + columns, rendered - 1);
+        break;
+      case "ArrowUp":
+        next = Math.max(index - columns, 0);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = rendered - 1;
+        break;
+      case "Enter":
+      case " ":
+        e2.preventDefault();
+        onSelectItem(item);
+        return;
+      case "e":
+      case "E":
+        if (item.assetId) {
+          e2.preventDefault();
+          onStartEdit(item);
+        }
+        return;
+      case "Delete":
+      case "Backspace":
+        if (item.assetId) {
+          e2.preventDefault();
+          setConfirmDeleteId(item.assetId);
+        }
+        return;
+      case "Escape":
+        if (confirmDeleteId) {
+          e2.preventDefault();
+          setConfirmDeleteId(null);
+        }
+        return;
+      default:
+        return;
+    }
+    e2.preventDefault();
+    focusTile(next);
+  };
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search by filename or metadata...",
+        value: searchQuery,
+        onChange: (e2) => onSearchChange(e2.target.value),
+        style: {
+          width: "100%",
+          padding: "10px 12px",
+          border: "1px solid #e0e0e0",
+          borderRadius: "6px",
+          fontSize: "14px",
+          fontFamily: "inherit",
+          outline: "none",
+          boxSizing: "border-box",
+          marginBottom: "16px"
+        }
+      }
+    ),
+    loading ? /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", padding: "40px", color: "#999", fontSize: "14px" }, children: "Loading..." }) : media.length === 0 ? /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", padding: "40px", color: "#999", fontSize: "14px" }, children: "No media found" }) : /* @__PURE__ */ jsx6(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "Media items \u2014 arrow keys to navigate, Enter to select, E to edit, Delete to remove",
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
+          gap: "12px"
+        },
+        children: media.slice(0, visibleCount).map((item, i2) => /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            ref: (el) => {
+              tileRefs.current[i2] = el;
+            },
+            role: "option",
+            "aria-selected": false,
+            "aria-label": item.filename,
+            tabIndex: i2 === Math.min(focusIdx, Math.min(media.length, visibleCount) - 1) ? 0 : -1,
+            style: {
+              position: "relative",
+              cursor: "pointer",
+              border: "2px solid transparent",
+              borderRadius: "8px",
+              overflow: "hidden",
+              transition: "border-color 0.15s",
+              backgroundColor: "#f9f9f9",
+              outline: "none"
+            },
+            onClick: () => onSelectItem(item),
+            onKeyDown: (e2) => handleTileKeyDown(e2, i2, item),
+            onFocus: (e2) => {
+              onFocusIdxChange(i2);
+              e2.currentTarget.style.borderColor = "#2563eb";
+              e2.currentTarget.style.boxShadow = "0 0 0 2px rgba(37, 99, 235, 0.35)";
+            },
+            onBlur: (e2) => {
+              e2.currentTarget.style.borderColor = "transparent";
+              e2.currentTarget.style.boxShadow = "none";
+            },
+            onMouseEnter: (e2) => {
+              e2.currentTarget.style.borderColor = "#2563eb";
+              e2.currentTarget.querySelectorAll("[data-delete-btn], [data-edit-btn]").forEach((btn) => btn.style.opacity = "1");
+            },
+            onMouseLeave: (e2) => {
+              e2.currentTarget.style.borderColor = "transparent";
+              e2.currentTarget.querySelectorAll("[data-delete-btn], [data-edit-btn]").forEach((btn) => btn.style.opacity = "0.6");
+            },
+            children: [
+              item.assetId && /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  "data-edit-btn": true,
+                  title: "Edit details",
+                  "aria-label": `Edit details for ${item.filename}`,
+                  tabIndex: -1,
+                  onClick: (e2) => {
+                    e2.stopPropagation();
+                    onStartEdit(item);
+                  },
+                  style: {
+                    position: "absolute",
+                    top: "4px",
+                    right: "32px",
+                    zIndex: 1,
+                    width: "24px",
+                    height: "24px",
+                    padding: 0,
+                    border: "none",
+                    borderRadius: "4px",
+                    backgroundColor: "rgba(0, 0, 0, 0.55)",
+                    color: "white",
+                    fontSize: "12px",
+                    lineHeight: "24px",
+                    textAlign: "center",
+                    cursor: "pointer",
+                    opacity: 0.6,
+                    transition: "opacity 0.15s",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: "\u270E"
+                }
+              ),
+              item.assetId && /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  "data-delete-btn": true,
+                  title: "Delete image",
+                  "aria-label": `Delete ${item.filename}`,
+                  tabIndex: -1,
+                  onClick: (e2) => {
+                    e2.stopPropagation();
+                    setConfirmDeleteId(item.assetId ?? null);
+                  },
+                  style: {
+                    position: "absolute",
+                    top: "4px",
+                    right: "4px",
+                    zIndex: 1,
+                    width: "24px",
+                    height: "24px",
+                    padding: 0,
+                    border: "none",
+                    borderRadius: "4px",
+                    backgroundColor: "rgba(0, 0, 0, 0.55)",
+                    color: "white",
+                    fontSize: "14px",
+                    lineHeight: "24px",
+                    textAlign: "center",
+                    cursor: "pointer",
+                    opacity: 0.6,
+                    transition: "opacity 0.15s, background-color 0.15s",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  onMouseEnter: (e2) => {
+                    e2.currentTarget.style.opacity = "1";
+                    e2.currentTarget.style.backgroundColor = "rgba(220, 38, 38, 0.9)";
+                  },
+                  onMouseLeave: (e2) => {
+                    e2.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.55)";
+                  },
+                  children: "\xD7"
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "img",
+                {
+                  src: item.url,
+                  alt: item.filename,
+                  loading: "lazy",
+                  decoding: "async",
+                  style: { width: "100%", height: "120px", objectFit: "cover", display: "block" }
+                }
+              ),
+              item.assetId && confirmDeleteId === item.assetId && /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  role: "alertdialog",
+                  "aria-label": `Delete ${item.filename}?`,
+                  onClick: (e2) => e2.stopPropagation(),
+                  onKeyDown: (e2) => {
+                    e2.stopPropagation();
+                    if (e2.key === "Escape") {
+                      setConfirmDeleteId(null);
+                      tileRefs.current[i2]?.focus();
+                    }
+                  },
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    zIndex: 2,
+                    backgroundColor: "rgba(0, 0, 0, 0.72)",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "8px",
+                    padding: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx6("div", { style: { color: "white", fontSize: "12px", fontWeight: 600, textAlign: "center" }, children: "Delete this image?" }),
+                    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "6px" }, children: [
+                      /* @__PURE__ */ jsx6(
+                        "button",
+                        {
+                          type: "button",
+                          autoFocus: true,
+                          onClick: (e2) => {
+                            e2.stopPropagation();
+                            setConfirmDeleteId(null);
+                            onDeleteItem(item);
+                          },
+                          style: {
+                            padding: "4px 10px",
+                            backgroundColor: "#dc2626",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "4px",
+                            fontSize: "12px",
+                            fontWeight: 600,
+                            cursor: "pointer",
+                            fontFamily: "inherit"
+                          },
+                          children: "Delete"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (e2) => {
+                            e2.stopPropagation();
+                            setConfirmDeleteId(null);
+                            tileRefs.current[i2]?.focus();
+                          },
+                          style: {
+                            padding: "4px 10px",
+                            backgroundColor: "white",
+                            color: "#444",
+                            border: "none",
+                            borderRadius: "4px",
+                            fontSize: "12px",
+                            fontWeight: 600,
+                            cursor: "pointer",
+                            fontFamily: "inherit"
+                          },
+                          children: "Cancel"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  style: {
+                    padding: "6px 8px",
+                    fontSize: "11px",
+                    color: "#555",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  title: item.filename,
+                  children: item.filename
+                }
+              )
+            ]
+          },
+          item.assetId ?? item.url
+        ))
+      }
+    ),
+    media.length > visibleCount && /* @__PURE__ */ jsx6("div", { ref: sentinelRef, "aria-hidden": "true", style: { height: "1px" } })
+  ] });
+}
+
+// src/components/media-library.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var LIST_LIMIT = "500";
+function siteParams(config) {
+  const params = new URLSearchParams({ siteId: config.siteId });
+  if (config.workstreamId) params.set("workstreamId", config.workstreamId);
+  return params;
+}
+function MediaLibrary({ isOpen, onClose, onSelect, onSelectItem }) {
+  const config = useMediaConfig();
+  const schema = orderAltFirst(useMediaSchema());
+  const [media, setMedia] = useState4([]);
+  const [loading, setLoading] = useState4(false);
+  const [uploading, setUploading] = useState4(false);
+  const [searchQuery, setSearchQuery] = useState4("");
+  const [focusIdx, setFocusIdx] = useState4(0);
+  const [pending, setPending] = useState4([]);
+  const [pendingValues, setPendingValues] = useState4([]);
+  const [pendingProgress, setPendingProgress] = useState4([]);
+  const [pendingStatus, setPendingStatus] = useState4([]);
+  const [editing, setEditing] = useState4(null);
+  const [editFields, setEditFields] = useState4([]);
+  const [editValues, setEditValues] = useState4([]);
+  const [panelError, setPanelError] = useState4(null);
+  const replaceInputRef = useRef4(null);
+  const scrollRef = useRef4(null);
+  const getAuthHeaders = useCallback(async () => {
+    const token = await config.getAuthToken();
+    return token ? { Authorization: "Bearer " + token } : {};
+  }, [config]);
+  const fetchMedia = useCallback(
+    async (search) => {
+      setLoading(true);
+      try {
+        const params = siteParams(config);
+        params.set("limit", LIST_LIMIT);
+        if (search) params.set("search", search);
+        const response = await fetch(
+          config.workerUrl + "/media?" + params.toString(),
+          { headers: await getAuthHeaders() }
+        );
+        if (response.ok) {
+          setMedia(parseMediaList(await response.json()));
+          setFocusIdx(0);
+        }
+      } catch (error) {
+        console.error("Failed to fetch media:", error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [config, getAuthHeaders]
+  );
+  useEffect4(() => {
+    if (isOpen) {
+      fetchMedia();
+      setSearchQuery("");
+    }
+  }, [isOpen, fetchMedia]);
+  const searchInitialized = useRef4(false);
+  useEffect4(() => {
+    if (!isOpen) {
+      searchInitialized.current = false;
+      return;
+    }
+    if (!searchInitialized.current) {
+      searchInitialized.current = true;
+      return;
+    }
+    const timer = setTimeout(() => {
+      fetchMedia(searchQuery || void 0);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery, isOpen, fetchMedia]);
+  const stageFiles = (files) => {
+    if (!files || files.length === 0) return;
+    const staged = Array.from(files).map((file) => ({
+      file,
+      previewUrl: URL.createObjectURL(file)
+    }));
+    setPending(staged);
+    setPendingValues(staged.map(() => schema.map(() => "")));
+    setPendingProgress(staged.map(() => ({})));
+    setPendingStatus(staged.map(() => STAGED_STATUS));
+    setPanelError(null);
+  };
+  const clearPending = useCallback(() => {
+    setPending((prev) => {
+      prev.forEach((p2) => URL.revokeObjectURL(p2.previewUrl));
+      return [];
+    });
+    setPendingValues([]);
+    setPendingProgress([]);
+    setPendingStatus([]);
+    setPanelError(null);
+  }, []);
+  useEffect4(() => {
+    if (!isOpen) {
+      clearPending();
+      setEditing(null);
+    }
+  }, [isOpen, clearPending]);
+  const uploadAll = async () => {
+    setUploading(true);
+    setPanelError(null);
+    const target = {
+      workerUrl: config.workerUrl,
+      siteId: config.siteId,
+      workstreamId: config.workstreamId,
+      getAuthHeaders
+    };
+    const progress = pending.map((_, i2) => pendingProgress[i2] ?? {});
+    const statuses = pending.map((_, i2) => pendingStatus[i2] ?? STAGED_STATUS);
+    for (let i2 = 0; i2 < pending.length; i2++) {
+      const metadata = {};
+      schema.forEach((f2, c2) => {
+        const value = pendingValues[i2]?.[c2]?.trim();
+        if (value) metadata[f2.name] = value;
+      });
+      try {
+        const result = await runUpload(target, pending[i2].file, metadata, void 0, progress[i2], (step) => {
+          statuses[i2] = { step };
+          setPendingStatus([...statuses]);
+        });
+        progress[i2] = result.progress;
+        statuses[i2] = { step: "done" };
+      } catch (error) {
+        const message = error instanceof UploadFlowError ? error.message : "Upload failed";
+        if (error instanceof UploadFlowError) progress[i2] = error.progress;
+        statuses[i2] = { step: "failed", error: message };
+        console.error("Upload failed:", error);
+      }
+      setPendingProgress([...progress]);
+      setPendingStatus([...statuses]);
+    }
+    try {
+      if (statuses.every((s2) => s2.step === "done")) {
+        clearPending();
+      } else {
+        pending.forEach((p2, i2) => {
+          if (statuses[i2].step === "done") URL.revokeObjectURL(p2.previewUrl);
+        });
+        const kept = keepIncompleteRows(pending, pendingValues, progress, statuses);
+        setPending(kept.rows);
+        setPendingValues(kept.values);
+        setPendingProgress(kept.progress);
+        setPendingStatus(kept.statuses);
+        const failures = kept.rows.length;
+        setPanelError(
+          `${failures} of ${pending.length} uploads failed \u2014 successful files are already in the library; only the failed rows below will be retried`
+        );
+      }
+      await fetchMedia(searchQuery || void 0);
+    } finally {
+      setUploading(false);
+    }
+  };
+  const startEdit = (item) => {
+    setEditing(item);
+    setEditFields(schema);
+    setEditValues([schema.map((f2) => item.metadata?.[f2.name] ?? "")]);
+    setPanelError(null);
+  };
+  const saveEdit = async () => {
+    if (!editing?.assetId) return;
+    setUploading(true);
+    setPanelError(null);
+    try {
+      const body = buildPatchBody(editFields, editValues[0] ?? []);
+      const params = siteParams(config);
+      const response = await fetch(
+        config.workerUrl + "/media/" + encodeURIComponent(editing.assetId) + "?" + params.toString(),
+        {
+          method: "PATCH",
+          body: JSON.stringify(body),
+          headers: { ...await getAuthHeaders(), "Content-Type": "application/json" }
+        }
+      );
+      if (response.ok) {
+        setEditing(null);
+        await fetchMedia(searchQuery || void 0);
+      } else {
+        setPanelError("Failed to save metadata");
+      }
+    } catch (error) {
+      console.error("Failed to save metadata:", error);
+      setPanelError("Failed to save metadata");
+    } finally {
+      setUploading(false);
+    }
+  };
+  const replaceImage = async (file) => {
+    if (!file || !editing?.assetId) return;
+    setUploading(true);
+    setPanelError(null);
+    try {
+      const target = {
+        workerUrl: config.workerUrl,
+        siteId: config.siteId,
+        workstreamId: config.workstreamId,
+        getAuthHeaders
+      };
+      const { item } = await runUpload(target, file, void 0, editing.assetId, {}, () => {
+      });
+      setEditing(item);
+      await fetchMedia(searchQuery || void 0);
+    } catch (error) {
+      console.error("Failed to replace image:", error);
+      setPanelError(
+        error instanceof UploadFlowError ? `Failed to replace image: ${error.message}` : "Failed to replace image"
+      );
+    } finally {
+      setUploading(false);
+      if (replaceInputRef.current) replaceInputRef.current.value = "";
+    }
+  };
+  const selectItem = (item) => {
+    if (onSelectItem) {
+      onSelectItem(item);
+    } else {
+      onSelect(item.url);
+    }
+    onClose();
+  };
+  const deleteItem = (item) => {
+    if (!item.assetId) return;
+    (async () => {
+      try {
+        const params = siteParams(config);
+        const response = await fetch(
+          config.workerUrl + "/media/" + encodeURIComponent(item.assetId) + "?" + params.toString(),
+          {
+            method: "DELETE",
+            headers: await getAuthHeaders()
+          }
+        );
+        if (response.ok) {
+          await fetchMedia(searchQuery || void 0);
+        } else {
+          console.error("Failed to delete media:", response.statusText);
+        }
+      } catch (error) {
+        console.error("Failed to delete media:", error);
+      }
+    })();
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 99999,
+        padding: "20px"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          style: {
+            backgroundColor: "white",
+            borderRadius: "12px",
+            boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)",
+            maxWidth: "900px",
+            width: "100%",
+            maxHeight: "80vh",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          onClick: (e2) => e2.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                style: {
+                  padding: "20px 24px",
+                  borderBottom: "1px solid #e0e0e0",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsx7("h2", { style: { margin: 0, fontSize: "20px", fontWeight: 600, color: "#333" }, children: "Media Library" }),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        fontSize: "24px",
+                        cursor: "pointer",
+                        color: "#666",
+                        padding: "0",
+                        width: "32px",
+                        height: "32px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: "4px"
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx7("div", { ref: scrollRef, style: { padding: "24px", overflowY: "auto", flex: 1 }, children: pending.length > 0 ? /* @__PURE__ */ jsx7(
+              MediaUploadPanel,
+              {
+                schema,
+                pending,
+                pendingValues,
+                onValuesChange: setPendingValues,
+                pendingStatus,
+                uploading,
+                panelError,
+                onCancel: clearPending,
+                onUpload: uploadAll
+              }
+            ) : editing ? /* @__PURE__ */ jsx7(
+              MediaEditPanel,
+              {
+                editing,
+                editFields,
+                editValues,
+                onValuesChange: setEditValues,
+                uploading,
+                panelError,
+                onCancel: () => setEditing(null),
+                onSave: saveEdit,
+                onReplaceImage: replaceImage,
+                replaceInputRef
+              }
+            ) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+              /* @__PURE__ */ jsx7(MediaUploadDropzone, { uploading, onFilesSelected: stageFiles }),
+              /* @__PURE__ */ jsx7(
+                MediaGrid,
+                {
+                  media,
+                  loading,
+                  searchQuery,
+                  onSearchChange: setSearchQuery,
+                  onSelectItem: selectItem,
+                  onStartEdit: startEdit,
+                  onDeleteItem: deleteItem,
+                  scrollRef,
+                  focusIdx,
+                  onFocusIdxChange: setFocusIdx
+                }
+              )
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// 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) {
+  const { value, onChange, readOnly } = props;
+  const [isLibraryOpen, setIsLibraryOpen] = useState5(false);
+  const baseUrl = getBaseUrl(value);
+  const cropMode = getCropMode(value);
+  const handleCropChange = (crop) => {
+    if (!baseUrl) return;
+    onChange(buildValueWithCrop(baseUrl, crop));
+  };
+  const handleSelect = (url) => {
+    onChange(buildValueWithCrop(url.split("?")[0], cropMode));
+    setIsLibraryOpen(false);
+  };
+  const buttonBase = {
+    padding: "3px 10px",
+    fontSize: "12px",
+    fontWeight: 500,
+    border: "1px solid #d0d0d0",
+    borderRadius: "4px",
+    cursor: readOnly ? "not-allowed" : "pointer",
+    fontFamily: "inherit"
+  };
+  return /* @__PURE__ */ jsxs7("div", { style: { width: "100%" }, children: [
+    value ? /* @__PURE__ */ jsx8("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx8(
+      "img",
+      {
+        src: baseUrl,
+        alt: "Preview",
+        style: {
+          width: "100%",
+          maxHeight: "120px",
+          objectFit: "cover",
+          borderRadius: "6px",
+          display: "block",
+          border: "1px solid #e0e0e0"
+        }
+      }
+    ) }) : /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          height: "80px",
+          border: "2px dashed #d0d0d0",
+          borderRadius: "6px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "8px",
+          color: "#999",
+          fontSize: "13px",
+          cursor: readOnly ? "default" : "pointer"
+        },
+        onClick: () => !readOnly && setIsLibraryOpen(true),
+        children: "Click to select image"
+      }
+    ),
+    value && /* @__PURE__ */ jsxs7("div", { style: { marginBottom: "8px" }, children: [
+      /* @__PURE__ */ jsx8("div", { style: { fontSize: "11px", color: "#666", fontWeight: 500, marginBottom: "4px" }, children: "Crop" }),
+      /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            disabled: readOnly,
+            onClick: () => handleCropChange("fit"),
+            style: {
+              ...buttonBase,
+              backgroundColor: cropMode === "fit" ? "#2563eb" : "white",
+              color: cropMode === "fit" ? "white" : "#444",
+              borderColor: cropMode === "fit" ? "#2563eb" : "#d0d0d0",
+              opacity: readOnly ? 0.5 : 1
+            },
+            children: "Fit in"
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            disabled: readOnly,
+            onClick: () => handleCropChange("smart"),
+            style: {
+              ...buttonBase,
+              backgroundColor: cropMode === "smart" ? "#2563eb" : "white",
+              color: cropMode === "smart" ? "white" : "#444",
+              borderColor: cropMode === "smart" ? "#2563eb" : "#d0d0d0",
+              opacity: readOnly ? 0.5 : 1
+            },
+            children: "Smart crop"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsLibraryOpen(true),
+          disabled: readOnly,
+          style: {
+            flex: 1,
+            padding: "6px 12px",
+            backgroundColor: "#2563eb",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            fontSize: "13px",
+            fontWeight: 500,
+            cursor: readOnly ? "not-allowed" : "pointer",
+            opacity: readOnly ? 0.5 : 1,
+            fontFamily: "inherit"
+          },
+          children: "Choose from Library"
+        }
+      ),
+      value && /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(""),
+          disabled: readOnly,
+          style: {
+            padding: "6px 12px",
+            backgroundColor: "white",
+            color: "#666",
+            border: "1px solid #d0d0d0",
+            borderRadius: "4px",
+            fontSize: "13px",
+            fontWeight: 500,
+            cursor: readOnly ? "not-allowed" : "pointer",
+            opacity: readOnly ? 0.5 : 1,
+            fontFamily: "inherit"
+          },
+          children: "Clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8(
+      MediaLibrary,
+      {
+        isOpen: isLibraryOpen,
+        onClose: () => setIsLibraryOpen(false),
+        onSelect: handleSelect
+      }
+    )
+  ] });
+}
+
+// src/components/media-object-field.tsx
+import { useState as useState7 } from "react";
+
+// 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
+import e, { PureComponent as t, createRef as n } from "react";
+var r = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  unit: "px"
+};
+var i = (e2, t2, n2) => Math.min(Math.max(e2, t2), n2);
+var a = (...e2) => e2.filter((e3) => e3 && typeof e3 == "string").join(" ");
+var o = (e2, t2) => e2 === t2 || e2.width === t2.width && e2.height === t2.height && e2.x === t2.x && e2.y === t2.y && e2.unit === t2.unit;
+function s(e2, t2, n2, r2) {
+  let i2 = u(e2, n2, r2);
+  return e2.width && (i2.height = i2.width / t2), e2.height && (i2.width = i2.height * t2), i2.y + i2.height > r2 && (i2.height = r2 - i2.y, i2.width = i2.height * t2), i2.x + i2.width > n2 && (i2.width = n2 - i2.x, i2.height = i2.width / t2), e2.unit === "%" ? l(i2, n2, r2) : i2;
+}
+function c(e2, t2, n2) {
+  let r2 = u(e2, t2, n2);
+  return r2.x = (t2 - r2.width) / 2, r2.y = (n2 - r2.height) / 2, e2.unit === "%" ? l(r2, t2, n2) : r2;
+}
+function l(e2, t2, n2) {
+  return e2.unit === "%" ? {
+    ...r,
+    ...e2,
+    unit: "%"
+  } : {
+    unit: "%",
+    x: e2.x ? e2.x / t2 * 100 : 0,
+    y: e2.y ? e2.y / n2 * 100 : 0,
+    width: e2.width ? e2.width / t2 * 100 : 0,
+    height: e2.height ? e2.height / n2 * 100 : 0
+  };
+}
+function u(e2, t2, n2) {
+  return !e2.unit || e2.unit === "px" ? {
+    ...r,
+    ...e2,
+    unit: "px"
+  } : {
+    unit: "px",
+    x: e2.x ? e2.x * t2 / 100 : 0,
+    y: e2.y ? e2.y * n2 / 100 : 0,
+    width: e2.width ? e2.width * t2 / 100 : 0,
+    height: e2.height ? e2.height * n2 / 100 : 0
+  };
+}
+function d(e2, t2, n2, r2, i2, a2 = 0, o2 = 0, s2 = r2, c2 = i2) {
+  let l2 = { ...e2 }, u2 = Math.min(a2, r2), d2 = Math.min(o2, i2), f2 = Math.min(s2, r2), p2 = Math.min(c2, i2);
+  t2 && (t2 > 1 ? (u2 = o2 ? o2 * t2 : u2, d2 = u2 / t2, f2 = s2 * t2) : (d2 = a2 ? a2 / t2 : d2, u2 = d2 * t2, p2 = c2 / t2)), l2.y < 0 && (l2.height = Math.max(l2.height + l2.y, d2), l2.y = 0), l2.x < 0 && (l2.width = Math.max(l2.width + l2.x, u2), l2.x = 0);
+  let m2 = r2 - (l2.x + l2.width);
+  m2 < 0 && (l2.x = Math.min(l2.x, r2 - u2), l2.width += m2);
+  let h2 = i2 - (l2.y + l2.height);
+  if (h2 < 0 && (l2.y = Math.min(l2.y, i2 - d2), l2.height += h2), l2.width < u2 && ((n2 === "sw" || n2 == "nw") && (l2.x -= u2 - l2.width), l2.width = u2), l2.height < d2 && ((n2 === "nw" || n2 == "ne") && (l2.y -= d2 - l2.height), l2.height = d2), l2.width > f2 && ((n2 === "sw" || n2 == "nw") && (l2.x -= f2 - l2.width), l2.width = f2), l2.height > p2 && ((n2 === "nw" || n2 == "ne") && (l2.y -= p2 - l2.height), l2.height = p2), t2) {
+    let e3 = l2.width / l2.height;
+    if (e3 < t2) {
+      let e4 = Math.max(l2.width / t2, d2);
+      (n2 === "nw" || n2 == "ne") && (l2.y -= e4 - l2.height), l2.height = e4;
+    } else if (e3 > t2) {
+      let e4 = Math.max(l2.height * t2, u2);
+      (n2 === "sw" || n2 == "nw") && (l2.x -= e4 - l2.width), l2.width = e4;
+    }
+  }
+  return l2;
+}
+function f(e2, t2, n2, r2) {
+  let i2 = { ...e2 };
+  return t2 === "ArrowLeft" ? r2 === "nw" ? (i2.x -= n2, i2.y -= n2, i2.width += n2, i2.height += n2) : r2 === "w" ? (i2.x -= n2, i2.width += n2) : r2 === "sw" ? (i2.x -= n2, i2.width += n2, i2.height += n2) : r2 === "ne" ? (i2.y += n2, i2.width -= n2, i2.height -= n2) : r2 === "e" ? i2.width -= n2 : r2 === "se" && (i2.width -= n2, i2.height -= n2) : t2 === "ArrowRight" && (r2 === "nw" ? (i2.x += n2, i2.y += n2, i2.width -= n2, i2.height -= n2) : r2 === "w" ? (i2.x += n2, i2.width -= n2) : r2 === "sw" ? (i2.x += n2, i2.width -= n2, i2.height -= n2) : r2 === "ne" ? (i2.y -= n2, i2.width += n2, i2.height += n2) : r2 === "e" ? i2.width += n2 : r2 === "se" && (i2.width += n2, i2.height += n2)), t2 === "ArrowUp" ? r2 === "nw" ? (i2.x -= n2, i2.y -= n2, i2.width += n2, i2.height += n2) : r2 === "n" ? (i2.y -= n2, i2.height += n2) : r2 === "ne" ? (i2.y -= n2, i2.width += n2, i2.height += n2) : r2 === "sw" ? (i2.x += n2, i2.width -= n2, i2.height -= n2) : r2 === "s" ? i2.height -= n2 : r2 === "se" && (i2.width -= n2, i2.height -= n2) : t2 === "ArrowDown" && (r2 === "nw" ? (i2.x += n2, i2.y += n2, i2.width -= n2, i2.height -= n2) : r2 === "n" ? (i2.y += n2, i2.height -= n2) : r2 === "ne" ? (i2.y += n2, i2.width -= n2, i2.height -= n2) : r2 === "sw" ? (i2.x -= n2, i2.width += n2, i2.height += n2) : r2 === "s" ? i2.height += n2 : r2 === "se" && (i2.width += n2, i2.height += n2)), i2;
+}
+var p = {
+  capture: true,
+  passive: false
+};
+var m = 0;
+var _a;
+var h = (_a = class extends t {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "docMoveBound", false);
+    __publicField(this, "mouseDownOnCrop", false);
+    __publicField(this, "dragStarted", false);
+    __publicField(this, "evData", {
+      startClientX: 0,
+      startClientY: 0,
+      startCropX: 0,
+      startCropY: 0,
+      clientX: 0,
+      clientY: 0,
+      isResize: true
+    });
+    __publicField(this, "componentRef", n());
+    __publicField(this, "mediaRef", n());
+    __publicField(this, "resizeObserver");
+    __publicField(this, "initChangeCalled", false);
+    __publicField(this, "instanceId", `rc-${m++}`);
+    __publicField(this, "state", {
+      cropIsActive: false,
+      newCropIsBeingDrawn: false
+    });
+    __publicField(this, "onCropPointerDown", (e2) => {
+      let { crop: t2, disabled: n2 } = this.props, r2 = this.getBox();
+      if (!t2) return;
+      let i2 = u(t2, r2.width, r2.height);
+      if (n2) return;
+      e2.cancelable && e2.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: true });
+      let a2 = e2.target.dataset.ord, o2 = !!a2, s2 = e2.clientX, c2 = e2.clientY, l2 = i2.x, d2 = i2.y;
+      if (a2) {
+        let t3 = e2.clientX - r2.x, n3 = e2.clientY - r2.y, o3 = 0, u2 = 0;
+        a2 === "ne" || a2 == "e" ? (o3 = t3 - (i2.x + i2.width), u2 = n3 - i2.y, l2 = i2.x, d2 = i2.y + i2.height) : a2 === "se" || a2 === "s" ? (o3 = t3 - (i2.x + i2.width), u2 = n3 - (i2.y + i2.height), l2 = i2.x, d2 = i2.y) : a2 === "sw" || a2 == "w" ? (o3 = t3 - i2.x, u2 = n3 - (i2.y + i2.height), l2 = i2.x + i2.width, d2 = i2.y) : (a2 === "nw" || a2 == "n") && (o3 = t3 - i2.x, u2 = n3 - i2.y, l2 = i2.x + i2.width, d2 = i2.y + i2.height), s2 = l2 + r2.x + o3, c2 = d2 + r2.y + u2;
+      }
+      this.evData = {
+        startClientX: s2,
+        startClientY: c2,
+        startCropX: l2,
+        startCropY: d2,
+        clientX: e2.clientX,
+        clientY: e2.clientY,
+        isResize: o2,
+        ord: a2
+      }, this.mouseDownOnCrop = true, this.setState({ cropIsActive: true });
+    });
+    __publicField(this, "onComponentPointerDown", (e2) => {
+      let { crop: t2, disabled: n2, locked: r2, keepSelection: i2, onChange: a2 } = this.props, o2 = this.getBox();
+      if (n2 || r2 || i2 && t2) return;
+      e2.cancelable && e2.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: true });
+      let s2 = e2.clientX - o2.x, c2 = e2.clientY - o2.y, d2 = {
+        unit: "px",
+        x: s2,
+        y: c2,
+        width: 0,
+        height: 0
+      };
+      this.evData = {
+        startClientX: e2.clientX,
+        startClientY: e2.clientY,
+        startCropX: s2,
+        startCropY: c2,
+        clientX: e2.clientX,
+        clientY: e2.clientY,
+        isResize: true
+      }, this.mouseDownOnCrop = true, a2(u(d2, o2.width, o2.height), l(d2, o2.width, o2.height)), this.setState({
+        cropIsActive: true,
+        newCropIsBeingDrawn: true
+      });
+    });
+    __publicField(this, "onDocPointerMove", (e2) => {
+      let { crop: t2, disabled: n2, onChange: r2, onDragStart: i2 } = this.props, a2 = this.getBox();
+      if (n2 || !t2 || !this.mouseDownOnCrop) return;
+      e2.cancelable && e2.preventDefault(), this.dragStarted || (this.dragStarted = true, i2 && i2(e2));
+      let { evData: s2 } = this;
+      s2.clientX = e2.clientX, s2.clientY = e2.clientY;
+      let c2;
+      c2 = s2.isResize ? this.resizeCrop() : this.dragCrop(), o(t2, c2) || r2(u(c2, a2.width, a2.height), l(c2, a2.width, a2.height));
+    });
+    __publicField(this, "onComponentKeyDown", (e2) => {
+      let { crop: t2, disabled: n2, onChange: r2, onComplete: a2 } = this.props;
+      if (n2) return;
+      let o2 = e2.key, c2 = false;
+      if (!t2) return;
+      let d2 = this.getBox(), f2 = this.makePixelCrop(d2), p2 = (navigator.platform.match("Mac") ? e2.metaKey : e2.ctrlKey) ? _a.nudgeStepLarge : e2.shiftKey ? _a.nudgeStepMedium : _a.nudgeStep;
+      if (o2 === "ArrowLeft" ? (f2.x -= p2, c2 = true) : o2 === "ArrowRight" ? (f2.x += p2, c2 = true) : o2 === "ArrowUp" ? (f2.y -= p2, c2 = true) : o2 === "ArrowDown" && (f2.y += p2, c2 = true), c2) {
+        e2.cancelable && e2.preventDefault(), f2.x = i(f2.x, 0, d2.width - f2.width), f2.y = i(f2.y, 0, d2.height - f2.height);
+        let t3 = u(f2, d2.width, d2.height), n3 = l(f2, d2.width, d2.height);
+        r2(t3, n3), a2 && a2(t3, n3);
+      }
+    });
+    __publicField(this, "onHandlerKeyDown", (e2, t2) => {
+      let { aspect: n2 = 0, crop: r2, disabled: i2, minWidth: a2 = 0, minHeight: c2 = 0, maxWidth: p2, maxHeight: m2, onChange: h2, onComplete: g2 } = this.props, _ = this.getBox();
+      if (i2 || !r2) return;
+      if (e2.key === "ArrowUp" || e2.key === "ArrowDown" || e2.key === "ArrowLeft" || e2.key === "ArrowRight") e2.stopPropagation(), e2.preventDefault();
+      else return;
+      let v = (navigator.platform.match("Mac") ? e2.metaKey : e2.ctrlKey) ? _a.nudgeStepLarge : e2.shiftKey ? _a.nudgeStepMedium : _a.nudgeStep, y = d(f(u(r2, _.width, _.height), e2.key, v, t2), n2, t2, _.width, _.height, a2, c2, p2, m2);
+      if (!o(r2, y)) {
+        let e3 = l(y, _.width, _.height);
+        h2(y, e3), g2 && g2(y, e3);
+      }
+    });
+    __publicField(this, "onDocPointerDone", (e2) => {
+      let { crop: t2, disabled: n2, onComplete: r2, onDragEnd: i2 } = this.props, a2 = this.getBox();
+      this.unbindDocMove(), !(n2 || !t2) && this.mouseDownOnCrop && (this.mouseDownOnCrop = false, this.dragStarted = false, i2 && i2(e2), r2 && r2(u(t2, a2.width, a2.height), l(t2, a2.width, a2.height)), this.setState({
+        cropIsActive: false,
+        newCropIsBeingDrawn: false
+      }));
+    });
+    __publicField(this, "onDragFocus", () => {
+      this.componentRef.current?.scrollTo(0, 0);
+    });
+  }
+  get document() {
+    return document;
+  }
+  getBox() {
+    let e2 = this.mediaRef.current;
+    if (!e2) return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    let { x: t2, y: n2, width: r2, height: i2 } = e2.getBoundingClientRect();
+    return {
+      x: t2,
+      y: n2,
+      width: r2,
+      height: i2
+    };
+  }
+  componentDidUpdate(e2) {
+    let { crop: t2, onComplete: n2 } = this.props;
+    if (n2 && !e2.crop && t2) {
+      let { width: e3, height: r2 } = this.getBox();
+      e3 && r2 && n2(u(t2, e3, r2), l(t2, e3, r2));
+    }
+  }
+  componentWillUnmount() {
+    this.resizeObserver && this.resizeObserver.disconnect(), this.unbindDocMove();
+  }
+  bindDocMove() {
+    this.docMoveBound || (this.docMoveBound = (this.document.addEventListener("pointermove", this.onDocPointerMove, p), this.document.addEventListener("pointerup", this.onDocPointerDone, p), this.document.addEventListener("pointercancel", this.onDocPointerDone, p), true));
+  }
+  unbindDocMove() {
+    this.docMoveBound && (this.docMoveBound = (this.document.removeEventListener("pointermove", this.onDocPointerMove, p), this.document.removeEventListener("pointerup", this.onDocPointerDone, p), this.document.removeEventListener("pointercancel", this.onDocPointerDone, p), false));
+  }
+  getCropStyle() {
+    let { crop: e2 } = this.props;
+    if (e2) return {
+      top: `${e2.y}${e2.unit}`,
+      left: `${e2.x}${e2.unit}`,
+      width: `${e2.width}${e2.unit}`,
+      height: `${e2.height}${e2.unit}`
+    };
+  }
+  dragCrop() {
+    let { evData: e2 } = this, t2 = this.getBox(), n2 = this.makePixelCrop(t2), r2 = e2.clientX - e2.startClientX, a2 = e2.clientY - e2.startClientY;
+    return n2.x = i(e2.startCropX + r2, 0, t2.width - n2.width), n2.y = i(e2.startCropY + a2, 0, t2.height - n2.height), n2;
+  }
+  getPointRegion(e2, t2, n2, r2) {
+    let { evData: i2 } = this, a2 = i2.clientX - e2.x, o2 = i2.clientY - e2.y, s2;
+    s2 = r2 && t2 ? t2 === "nw" || t2 === "n" || t2 === "ne" : o2 < i2.startCropY;
+    let c2;
+    return c2 = n2 && t2 ? t2 === "nw" || t2 === "w" || t2 === "sw" : a2 < i2.startCropX, c2 ? s2 ? "nw" : "sw" : s2 ? "ne" : "se";
+  }
+  resolveMinDimensions(e2, t2, n2 = 0, r2 = 0) {
+    let i2 = Math.min(n2, e2.width), a2 = Math.min(r2, e2.height);
+    return !t2 || !i2 && !a2 ? [i2, a2] : t2 > 1 ? i2 ? [i2, i2 / t2] : [a2 * t2, a2] : a2 ? [a2 * t2, a2] : [i2, i2 / t2];
+  }
+  resizeCrop() {
+    let { evData: e2 } = this, { aspect: t2 = 0, maxWidth: n2, maxHeight: r2 } = this.props, a2 = this.getBox(), [o2, c2] = this.resolveMinDimensions(a2, t2, this.props.minWidth, this.props.minHeight), l2 = this.makePixelCrop(a2), u2 = this.getPointRegion(a2, e2.ord, o2, c2), f2 = e2.ord || u2, p2 = e2.clientX - e2.startClientX, m2 = e2.clientY - e2.startClientY;
+    (o2 && f2 === "nw" || f2 === "w" || f2 === "sw") && (p2 = Math.min(p2, -o2)), (c2 && f2 === "nw" || f2 === "n" || f2 === "ne") && (m2 = Math.min(m2, -c2));
+    let h2 = {
+      unit: "px",
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    u2 === "ne" ? (h2.x = e2.startCropX, h2.width = p2, t2 ? (h2.height = h2.width / t2, h2.y = e2.startCropY - h2.height) : (h2.height = Math.abs(m2), h2.y = e2.startCropY - h2.height)) : u2 === "se" ? (h2.x = e2.startCropX, h2.y = e2.startCropY, h2.width = p2, t2 ? h2.height = h2.width / t2 : h2.height = m2) : u2 === "sw" ? (h2.x = e2.startCropX + p2, h2.y = e2.startCropY, h2.width = Math.abs(p2), t2 ? h2.height = h2.width / t2 : h2.height = m2) : u2 === "nw" && (h2.x = e2.startCropX + p2, h2.width = Math.abs(p2), t2 ? (h2.height = h2.width / t2, h2.y = e2.startCropY - h2.height) : (h2.height = Math.abs(m2), h2.y = e2.startCropY + m2));
+    let g2 = d(h2, t2, u2, a2.width, a2.height, o2, c2, n2, r2);
+    return t2 || _a.xyOrds.indexOf(f2) > -1 ? l2 = g2 : _a.xOrds.indexOf(f2) > -1 ? (l2.x = g2.x, l2.width = g2.width) : _a.yOrds.indexOf(f2) > -1 && (l2.y = g2.y, l2.height = g2.height), l2.x = i(l2.x, 0, a2.width - l2.width), l2.y = i(l2.y, 0, a2.height - l2.height), l2;
+  }
+  renderCropSelection() {
+    let { ariaLabels: t2 = _a.defaultProps.ariaLabels, disabled: n2, locked: r2, renderSelectionAddon: i2, ruleOfThirds: a2, crop: o2 } = this.props, c2 = this.getCropStyle();
+    if (o2) return /* @__PURE__ */ e.createElement("div", {
+      style: c2,
+      className: "ReactCrop__crop-selection",
+      onPointerDown: this.onCropPointerDown,
+      "aria-label": t2.cropArea,
+      tabIndex: 0,
+      onKeyDown: this.onComponentKeyDown,
+      role: "group"
+    }, !n2 && !r2 && /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-elements",
+      onFocus: this.onDragFocus
+    }, /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-bar ord-n",
+      "data-ord": "n"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-bar ord-e",
+      "data-ord": "e"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-bar ord-s",
+      "data-ord": "s"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-bar ord-w",
+      "data-ord": "w"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-handle ord-nw",
+      "data-ord": "nw",
+      tabIndex: 0,
+      "aria-label": t2.nwDragHandle,
+      onKeyDown: (e2) => this.onHandlerKeyDown(e2, "nw"),
+      role: "button"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-handle ord-n",
+      "data-ord": "n",
+      tabIndex: 0,
+      "aria-label": t2.nDragHandle,
+      onKeyDown: (e2) => this.onHandlerKeyDown(e2, "n"),
+      role: "button"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-handle ord-ne",
+      "data-ord": "ne",
+      tabIndex: 0,
+      "aria-label": t2.neDragHandle,
+      onKeyDown: (e2) => this.onHandlerKeyDown(e2, "ne"),
+      role: "button"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-handle ord-e",
+      "data-ord": "e",
+      tabIndex: 0,
+      "aria-label": t2.eDragHandle,
+      onKeyDown: (e2) => this.onHandlerKeyDown(e2, "e"),
+      role: "button"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-handle ord-se",
+      "data-ord": "se",
+      tabIndex: 0,
+      "aria-label": t2.seDragHandle,
+      onKeyDown: (e2) => this.onHandlerKeyDown(e2, "se"),
+      role: "button"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-handle ord-s",
+      "data-ord": "s",
+      tabIndex: 0,
+      "aria-label": t2.sDragHandle,
+      onKeyDown: (e2) => this.onHandlerKeyDown(e2, "s"),
+      role: "button"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-handle ord-sw",
+      "data-ord": "sw",
+      tabIndex: 0,
+      "aria-label": t2.swDragHandle,
+      onKeyDown: (e2) => this.onHandlerKeyDown(e2, "sw"),
+      role: "button"
+    }), /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__drag-handle ord-w",
+      "data-ord": "w",
+      tabIndex: 0,
+      "aria-label": t2.wDragHandle,
+      onKeyDown: (e2) => this.onHandlerKeyDown(e2, "w"),
+      role: "button"
+    })), i2 && /* @__PURE__ */ e.createElement("div", {
+      className: "ReactCrop__selection-addon",
+      onPointerDown: (e2) => e2.stopPropagation()
+    }, i2(this.state)), a2 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ e.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" })));
+  }
+  makePixelCrop(e2) {
+    return u({
+      ...r,
+      ...this.props.crop || {}
+    }, e2.width, e2.height);
+  }
+  render() {
+    let { aspect: t2, children: n2, circularCrop: r2, className: i2, crop: o2, disabled: s2, locked: c2, style: l2, ruleOfThirds: u2 } = this.props, { cropIsActive: d2, newCropIsBeingDrawn: f2 } = this.state, p2 = o2 ? this.renderCropSelection() : null, m2 = a("ReactCrop", i2, d2 && "ReactCrop--active", s2 && "ReactCrop--disabled", c2 && "ReactCrop--locked", f2 && "ReactCrop--new-crop", o2 && t2 && "ReactCrop--fixed-aspect", o2 && r2 && "ReactCrop--circular-crop", o2 && u2 && "ReactCrop--rule-of-thirds", !this.dragStarted && o2 && !o2.width && !o2.height && "ReactCrop--invisible-crop", r2 && "ReactCrop--no-animate");
+    return /* @__PURE__ */ e.createElement("div", {
+      ref: this.componentRef,
+      className: m2,
+      style: l2
+    }, /* @__PURE__ */ e.createElement("div", {
+      ref: this.mediaRef,
+      className: "ReactCrop__child-wrapper",
+      onPointerDown: this.onComponentPointerDown
+    }, n2), o2 ? /* @__PURE__ */ e.createElement("svg", {
+      className: "ReactCrop__crop-mask",
+      width: "100%",
+      height: "100%"
+    }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ e.createElement("rect", {
+      width: "100%",
+      height: "100%",
+      fill: "white"
+    }), r2 ? /* @__PURE__ */ e.createElement("ellipse", {
+      cx: `${o2.x + o2.width / 2}${o2.unit}`,
+      cy: `${o2.y + o2.height / 2}${o2.unit}`,
+      rx: `${o2.width / 2}${o2.unit}`,
+      ry: `${o2.height / 2}${o2.unit}`,
+      fill: "black"
+    }) : /* @__PURE__ */ e.createElement("rect", {
+      x: `${o2.x}${o2.unit}`,
+      y: `${o2.y}${o2.unit}`,
+      width: `${o2.width}${o2.unit}`,
+      height: `${o2.height}${o2.unit}`,
+      fill: "black"
+    }))), /* @__PURE__ */ e.createElement("rect", {
+      fill: "black",
+      fillOpacity: 0.5,
+      width: "100%",
+      height: "100%",
+      mask: `url(#hole-${this.instanceId})`
+    })) : void 0, p2);
+  }
+}, __publicField(_a, "xOrds", ["e", "w"]), __publicField(_a, "yOrds", ["n", "s"]), __publicField(_a, "xyOrds", [
+  "nw",
+  "ne",
+  "se",
+  "sw"
+]), __publicField(_a, "nudgeStep", 1), __publicField(_a, "nudgeStepMedium", 10), __publicField(_a, "nudgeStepLarge", 100), __publicField(_a, "defaultProps", { ariaLabels: {
+  cropArea: "Use the arrow keys to move the crop selection area",
+  nwDragHandle: "Use the arrow keys to move the north west drag handle to change the crop selection area",
+  nDragHandle: "Use the up and down arrow keys to move the north drag handle to change the crop selection area",
+  neDragHandle: "Use the arrow keys to move the north east drag handle to change the crop selection area",
+  eDragHandle: "Use the up and down arrow keys to move the east drag handle to change the crop selection area",
+  seDragHandle: "Use the arrow keys to move the south east drag handle to change the crop selection area",
+  sDragHandle: "Use the up and down arrow keys to move the south drag handle to change the crop selection area",
+  swDragHandle: "Use the arrow keys to move the south west drag handle to change the crop selection area",
+  wDragHandle: "Use the up and down arrow keys to move the west drag handle to change the crop selection area"
+} }), _a);
+var g = Math.PI / 180;
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// ../../node_modules/.pnpm/react-image-crop@11.1.2_react@19.2.6/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
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var ASPECT_PRESETS = [
+  { label: "Free", value: void 0 },
+  { label: "1:1", value: 1 },
+  { label: "4:3", value: 4 / 3 },
+  { label: "3:2", value: 3 / 2 },
+  { label: "16:9", value: 16 / 9 }
+];
+function centeredCrop(naturalWidth, naturalHeight, aspect) {
+  if (!aspect) {
+    return { unit: "%", x: 10, y: 10, width: 80, height: 80 };
+  }
+  return c(
+    s({ unit: "%", width: 80 }, aspect, naturalWidth, naturalHeight),
+    naturalWidth,
+    naturalHeight
+  );
+}
+function trimToPercentCrop(trim, naturalWidth, naturalHeight) {
+  return {
+    unit: "%",
+    x: trim.left / naturalWidth * 100,
+    y: trim.top / naturalHeight * 100,
+    width: trim.width / naturalWidth * 100,
+    height: trim.height / naturalHeight * 100
+  };
+}
+function CropDialog(props) {
+  const { isOpen, imageUrl, initialTrim, onApply, onClose } = props;
+  const [crop, setCrop] = useState6(void 0);
+  const [aspect, setAspect] = useState6(void 0);
+  const [imageLoaded, setImageLoaded] = useState6(false);
+  const naturalSize = useRef5(null);
+  useEffect5(() => {
+    if (isOpen) {
+      setCrop(void 0);
+      setAspect(void 0);
+      setImageLoaded(false);
+      naturalSize.current = null;
+    }
+  }, [isOpen, imageUrl]);
+  if (!isOpen) return null;
+  const handleImageLoad = (e2) => {
+    const { naturalWidth, naturalHeight } = e2.currentTarget;
+    if (naturalWidth <= 0 || naturalHeight <= 0) return;
+    naturalSize.current = { width: naturalWidth, height: naturalHeight };
+    setImageLoaded(true);
+    setCrop(
+      initialTrim ? trimToPercentCrop(initialTrim, naturalWidth, naturalHeight) : centeredCrop(naturalWidth, naturalHeight, void 0)
+    );
+  };
+  const handleAspectChange = (next) => {
+    setAspect(next);
+    const size = naturalSize.current;
+    if (size) setCrop(centeredCrop(size.width, size.height, next));
+  };
+  const handleApply = () => {
+    const size = naturalSize.current;
+    if (!size || !imageLoaded || !crop || crop.width <= 0 || crop.height <= 0) return;
+    const left = Math.min(Math.max(crop.x / 100 * size.width, 0), size.width - 1);
+    const top = Math.min(Math.max(crop.y / 100 * size.height, 0), size.height - 1);
+    onApply({
+      left,
+      top,
+      width: Math.min(crop.width / 100 * size.width, size.width - left),
+      height: Math.min(crop.height / 100 * size.height, size.height - top)
+    });
+  };
+  const chipStyle = (active) => ({
+    padding: "3px 10px",
+    fontSize: "12px",
+    fontWeight: 500,
+    border: "1px solid " + (active ? "#2563eb" : "#d0d0d0"),
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    backgroundColor: active ? "#2563eb" : "white",
+    color: active ? "white" : "#444"
+  });
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 99999,
+        padding: "20px"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          style: {
+            backgroundColor: "white",
+            borderRadius: "12px",
+            boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)",
+            maxWidth: "720px",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          onClick: (e2) => e2.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs8(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "16px 20px",
+                  borderBottom: "1px solid #eee"
+                },
+                children: [
+                  /* @__PURE__ */ jsx9("div", { style: { fontSize: "16px", fontWeight: 600 }, children: "Crop image" }),
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      "aria-label": "Close",
+                      style: {
+                        border: "none",
+                        background: "none",
+                        fontSize: "18px",
+                        cursor: "pointer",
+                        color: "#666",
+                        lineHeight: 1
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx9("div", { style: { padding: "16px 20px", display: "flex", gap: "6px", flexWrap: "wrap" }, children: ASPECT_PRESETS.map((preset) => /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleAspectChange(preset.value),
+                style: chipStyle(aspect === preset.value),
+                children: preset.label
+              },
+              preset.label
+            )) }),
+            /* @__PURE__ */ jsx9(
+              "div",
+              {
+                style: {
+                  padding: "0 20px",
+                  display: "flex",
+                  justifyContent: "center",
+                  overflow: "auto",
+                  maxHeight: "55vh"
+                },
+                children: /* @__PURE__ */ jsx9(
+                  h,
+                  {
+                    crop,
+                    onChange: (_, percentCrop) => setCrop(percentCrop),
+                    aspect,
+                    keepSelection: true,
+                    children: /* @__PURE__ */ jsx9(
+                      "img",
+                      {
+                        src: imageUrl,
+                        onLoad: handleImageLoad,
+                        onError: () => setImageLoaded(false),
+                        alt: "Image to crop",
+                        style: { maxWidth: "100%", maxHeight: "55vh", display: "block" }
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs8(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: "8px",
+                  padding: "16px 20px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      style: {
+                        padding: "6px 14px",
+                        backgroundColor: "white",
+                        color: "#666",
+                        border: "1px solid #d0d0d0",
+                        borderRadius: "4px",
+                        fontSize: "13px",
+                        fontWeight: 500,
+                        cursor: "pointer",
+                        fontFamily: "inherit"
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleApply,
+                      disabled: !imageLoaded || !crop || crop.width <= 0 || crop.height <= 0,
+                      style: {
+                        padding: "6px 14px",
+                        backgroundColor: "#2563eb",
+                        color: "white",
+                        border: "none",
+                        borderRadius: "4px",
+                        fontSize: "13px",
+                        fontWeight: 500,
+                        cursor: "pointer",
+                        fontFamily: "inherit"
+                      },
+                      children: "Apply crop"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// 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) {
+  const { value, onChange, readOnly } = props;
+  const [isLibraryOpen, setIsLibraryOpen] = useState7(false);
+  const [isCropOpen, setIsCropOpen] = useState7(false);
+  const schema = orderAltFirst(useMediaSchema());
+  const isObject = isMediaValue(value);
+  const urlString = isObject ? value.url : typeof value === "string" ? value : "";
+  const baseUrl = getBaseUrl(urlString);
+  const cropMode = getCropMode(urlString);
+  const handleCropChange = (crop) => {
+    if (!baseUrl) return;
+    onChange(applyCropToValue(value, crop));
+  };
+  const handleApplyTrim = (rect) => {
+    onChange(applyTrimToValue(value, rect));
+    setIsCropOpen(false);
+  };
+  const handleMetaChange = (fieldName, fieldValue) => {
+    onChange(setMetaOnValue(value, fieldName, fieldValue));
+  };
+  const handleSelectItem = (item) => {
+    onChange(buildValueFromAsset(item, cropMode));
+    setIsLibraryOpen(false);
+  };
+  const buttonBase = {
+    padding: "3px 10px",
+    fontSize: "12px",
+    fontWeight: 500,
+    border: "1px solid #d0d0d0",
+    borderRadius: "4px",
+    cursor: readOnly ? "not-allowed" : "pointer",
+    fontFamily: "inherit"
+  };
+  const inputStyle = {
+    width: "100%",
+    padding: "6px 8px",
+    border: "1px solid #d0d0d0",
+    borderRadius: "4px",
+    fontSize: "13px",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+    outline: "none"
+  };
+  return /* @__PURE__ */ jsxs9("div", { style: { width: "100%" }, children: [
+    baseUrl ? /* @__PURE__ */ jsx10("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx10(
+      "img",
+      {
+        src: urlString,
+        alt: "Preview",
+        style: {
+          width: "100%",
+          maxHeight: "120px",
+          objectFit: "cover",
+          borderRadius: "6px",
+          display: "block",
+          border: "1px solid #e0e0e0"
+        }
+      }
+    ) }) : /* @__PURE__ */ jsx10(
+      "div",
+      {
+        style: {
+          height: "80px",
+          border: "2px dashed #d0d0d0",
+          borderRadius: "6px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "8px",
+          color: "#999",
+          fontSize: "13px",
+          cursor: readOnly ? "default" : "pointer"
+        },
+        onClick: () => !readOnly && setIsLibraryOpen(true),
+        children: "Click to select image"
+      }
+    ),
+    baseUrl && /* @__PURE__ */ jsxs9("div", { style: { marginBottom: "8px" }, children: [
+      /* @__PURE__ */ jsx10("div", { style: { fontSize: "11px", color: "#666", fontWeight: 500, marginBottom: "4px" }, children: "Crop" }),
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            disabled: readOnly,
+            onClick: () => handleCropChange("fit"),
+            style: {
+              ...buttonBase,
+              backgroundColor: cropMode === "fit" ? "#2563eb" : "white",
+              color: cropMode === "fit" ? "white" : "#444",
+              borderColor: cropMode === "fit" ? "#2563eb" : "#d0d0d0",
+              opacity: readOnly ? 0.5 : 1
+            },
+            children: "Fit in"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            disabled: readOnly,
+            onClick: () => handleCropChange("smart"),
+            style: {
+              ...buttonBase,
+              backgroundColor: cropMode === "smart" ? "#2563eb" : "white",
+              color: cropMode === "smart" ? "white" : "#444",
+              borderColor: cropMode === "smart" ? "#2563eb" : "#d0d0d0",
+              opacity: readOnly ? 0.5 : 1
+            },
+            children: "Smart crop"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            disabled: readOnly,
+            onClick: () => setIsCropOpen(true),
+            style: {
+              ...buttonBase,
+              backgroundColor: cropMode === "custom" ? "#2563eb" : "white",
+              color: cropMode === "custom" ? "white" : "#444",
+              borderColor: cropMode === "custom" ? "#2563eb" : "#d0d0d0",
+              opacity: readOnly ? 0.5 : 1
+            },
+            children: "Custom\u2026"
+          }
+        )
+      ] })
+    ] }),
+    baseUrl && /* @__PURE__ */ jsxs9("div", { style: { marginBottom: "8px" }, children: [
+      !isObject && /* @__PURE__ */ jsx10("div", { style: { fontSize: "11px", color: "#a15c00", marginBottom: "6px" }, children: "Select from the library to add metadata." }),
+      schema.map((f2) => {
+        const current = isObject && typeof value[f2.name] === "string" ? value[f2.name] : "";
+        return /* @__PURE__ */ jsxs9("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsxs9(
+            "div",
+            {
+              style: {
+                fontSize: "11px",
+                color: "#666",
+                fontWeight: 500,
+                marginBottom: "4px"
+              },
+              children: [
+                f2.label,
+                f2.required ? " *" : ""
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              type: "text",
+              value: current,
+              disabled: readOnly || !isObject,
+              placeholder: !isObject ? "Re-select image to edit" : "",
+              onChange: (e2) => handleMetaChange(f2.name, e2.target.value),
+              style: { ...inputStyle, opacity: readOnly || !isObject ? 0.6 : 1 }
+            }
+          )
+        ] }, f2.name);
+      })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsLibraryOpen(true),
+          disabled: readOnly,
+          style: {
+            flex: 1,
+            padding: "6px 12px",
+            backgroundColor: "#2563eb",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            fontSize: "13px",
+            fontWeight: 500,
+            cursor: readOnly ? "not-allowed" : "pointer",
+            opacity: readOnly ? 0.5 : 1,
+            fontFamily: "inherit"
+          },
+          children: "Choose from Library"
+        }
+      ),
+      baseUrl && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(""),
+          disabled: readOnly,
+          style: {
+            padding: "6px 12px",
+            backgroundColor: "white",
+            color: "#666",
+            border: "1px solid #d0d0d0",
+            borderRadius: "4px",
+            fontSize: "13px",
+            fontWeight: 500,
+            cursor: readOnly ? "not-allowed" : "pointer",
+            opacity: readOnly ? 0.5 : 1,
+            fontFamily: "inherit"
+          },
+          children: "Clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10(
+      MediaLibrary,
+      {
+        isOpen: isLibraryOpen,
+        onClose: () => setIsLibraryOpen(false),
+        onSelect: () => {
+        },
+        onSelectItem: handleSelectItem
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      CropDialog,
+      {
+        isOpen: isCropOpen,
+        imageUrl: baseUrl,
+        initialTrim: getTrimRect(urlString),
+        onApply: handleApplyTrim,
+        onClose: () => setIsCropOpen(false)
+      }
+    )
+  ] });
+}
+
+// src/puck-css-bridge.tsx
+import { useContext as useContext2, useMemo } from "react";
+import { P1PuckContext, useP1Auth } from "@pantheon-systems/puck-css";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var DEFAULT_WORKER_URL = "https://media.p1.pantheon.io";
+function resolveSiteId(explicit, contextSiteId) {
+  const siteId = explicit ?? contextSiteId;
+  if (!siteId) {
+    throw new Error(
+      "p1-media: siteId is required. Pass it explicitly to createMediaPlugin(), or render the plugin inside a puck-css P1PuckProvider so it can be read from context."
+    );
+  }
+  return siteId;
+}
+function resolveGetAuthToken(explicit, contextGetToken) {
+  const getAuthToken = explicit ?? contextGetToken;
+  if (!getAuthToken) {
+    throw new Error(
+      "p1-media: getAuthToken is required. Pass it explicitly to createMediaPlugin(), or render the plugin inside a puck-css P1AuthProvider so it can be read from context."
+    );
+  }
+  return getAuthToken;
+}
+function useAmbientSiteId() {
+  return useContext2(P1PuckContext)?.siteId;
+}
+function useAmbientGetAuthToken() {
+  try {
+    return useP1Auth().getToken;
+  } catch {
+    return void 0;
+  }
+}
+function buildMediaConfig(options, ambient = {}) {
+  return {
+    workerUrl: options.workerUrl ?? DEFAULT_WORKER_URL,
+    siteId: resolveSiteId(options.siteId, ambient.siteId),
+    workstreamId: options.workstreamId,
+    getAuthToken: resolveGetAuthToken(options.getAuthToken, ambient.getAuthToken),
+    metadataFields: options.metadataFields
+  };
+}
+function MediaConfigResolver({
+  options,
+  children
+}) {
+  const ambientSiteId = useAmbientSiteId();
+  const ambientGetAuthToken = useAmbientGetAuthToken();
+  const config = useMemo(
+    () => buildMediaConfig(options, { siteId: ambientSiteId, getAuthToken: ambientGetAuthToken }),
+    [options, ambientSiteId, ambientGetAuthToken]
+  );
+  return /* @__PURE__ */ jsx11(MediaConfigProvider, { config, children });
+}
+
+// src/plugin.tsx
+import { Fragment as Fragment3, jsx as jsx12 } from "react/jsx-runtime";
+function createMediaPlugin(options) {
+  const patterns = options.fieldNamePatterns ?? DEFAULT_MEDIA_PATTERNS;
+  return {
+    name: "p1-media",
+    overrides: {
+      fieldTypes: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        text: (props) => {
+          const { children, name, field, value, onChange, readOnly, id } = props;
+          const bareFieldName = name?.split(".").pop() ?? name;
+          const isMediaField = patterns.some((p2) => p2.test(bareFieldName));
+          if (!isMediaField) {
+            return /* @__PURE__ */ jsx12(Fragment3, { children });
+          }
+          return /* @__PURE__ */ jsx12(MediaConfigResolver, { options, children: /* @__PURE__ */ jsx12(
+            MediaFieldRender,
+            {
+              field: {
+                type: "custom",
+                label: field?.label ?? name,
+                render: () => /* @__PURE__ */ jsx12(Fragment3, {})
+              },
+              name,
+              id: id ?? name,
+              value: value ?? "",
+              onChange,
+              readOnly
+            }
+          ) });
+        },
+        // Rich mode: a first-class `p1-media` field whose value is an object.
+        // Puck ≥0.20 dispatches overrides.fieldTypes[field.type] for new types.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        "p1-media": (props) => {
+          const { name, field, value, onChange, readOnly, id } = props;
+          return /* @__PURE__ */ jsx12(MediaConfigResolver, { options, children: /* @__PURE__ */ jsx12(
+            MediaObjectFieldRender,
+            {
+              label: field?.label ?? name,
+              name,
+              id: id ?? name,
+              value: value ?? "",
+              onChange,
+              readOnly
+            }
+          ) });
+        }
+      }
+    },
+    // Editor-preview only (never written back): normalize a legacy string to
+    // the object shape so components reading the raw prop see `{ url, alt }`.
+    // The R10 write-path guard lives in makeMediaValue, not here.
+    fieldTransforms: {
+      "p1-media": ({ value }) => typeof value === "string" ? { url: value, alt: "" } : value
+    }
+  };
+}
+
+// src/utils.ts
+function buildImageUrl(url, params) {
+  if (!url) return url;
+  const parsed = new URL(url);
+  if (parsed.protocol !== "https:" && parsed.protocol !== "http:") return url;
+  for (const [k, v] of Object.entries(params)) {
+    if (v !== void 0) {
+      parsed.searchParams.set(k, String(v));
+    }
+  }
+  return parsed.toString();
+}
+
+// src/render.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
+function validateSrc(url, mediaBaseUrl) {
+  if (!url || !mediaBaseUrl) return "";
+  let parsed;
+  let base;
+  try {
+    parsed = new URL(url);
+    base = new URL(mediaBaseUrl);
+  } catch {
+    return "";
+  }
+  if (parsed.origin !== base.origin) return "";
+  if (parsed.protocol !== "https:") {
+    const isLocalDevBase = base.protocol === "http:" && LOOPBACK_HOSTS.has(base.hostname);
+    if (!isLocalDevBase || parsed.protocol !== "http:") return "";
+  }
+  return url;
+}
+function getMediaProps(value, options) {
+  const mediaBaseUrl = options?.mediaBaseUrl;
+  const transform = options?.transform;
+  const finalize = (rawUrl) => {
+    const validated = validateSrc(rawUrl, mediaBaseUrl);
+    return validated && transform ? buildImageUrl(validated, transform) : validated;
+  };
+  if (value == null) return { src: "", alt: "" };
+  if (typeof value === "string") {
+    return { src: finalize(value), alt: "" };
+  }
+  const props = {
+    src: finalize(typeof value.url === "string" ? value.url : ""),
+    alt: typeof value.alt === "string" ? value.alt : ""
+  };
+  if (typeof value.width === "number") props.width = value.width;
+  if (typeof value.height === "number") props.height = value.height;
+  return props;
+}
+function MediaImage({
+  image,
+  mediaBaseUrl,
+  transform,
+  alt,
+  ...rest
+}) {
+  const props = getMediaProps(image, { mediaBaseUrl, transform });
+  if (!props.src) return null;
+  return /* @__PURE__ */ jsx13(
+    "img",
+    {
+      src: props.src,
+      alt: alt ?? props.alt,
+      ...props.width !== void 0 ? { width: props.width } : {},
+      ...props.height !== void 0 ? { height: props.height } : {},
+      ...rest
+    }
+  );
+}
+function collectFigureFields(image, schema) {
+  if (!isMediaValue(image)) return [];
+  const out = [];
+  if (schema && schema.length > 0) {
+    for (const entry of schema) {
+      if (entry.name === "alt") continue;
+      const raw = image[entry.name];
+      if (raw === void 0 || raw === "") continue;
+      out.push({ name: entry.name, label: entry.label, value: String(raw) });
+    }
+  } else {
+    for (const [k, v] of Object.entries(image)) {
+      if (k === "alt") continue;
+      if (STRUCTURAL_MEDIA_KEYS.has(k)) continue;
+      if (typeof v !== "string" || v === "") continue;
+      out.push({ name: k, value: v });
+    }
+  }
+  return out;
+}
+function MediaFigure({
+  image,
+  schema,
+  mediaBaseUrl,
+  transform,
+  className,
+  captionClassName
+}) {
+  const props = getMediaProps(image, { mediaBaseUrl, transform });
+  if (!props.src) return null;
+  const fields = collectFigureFields(image, schema);
+  return /* @__PURE__ */ jsxs10("figure", { className, children: [
+    /* @__PURE__ */ jsx13(
+      "img",
+      {
+        src: props.src,
+        alt: props.alt,
+        ...props.width !== void 0 ? { width: props.width } : {},
+        ...props.height !== void 0 ? { height: props.height } : {}
+      }
+    ),
+    fields.length > 0 && /* @__PURE__ */ jsx13("figcaption", { className: captionClassName, children: fields.map((f2) => /* @__PURE__ */ jsx13("span", { "data-field": f2.name, children: f2.value }, f2.name)) })
+  ] });
+}
+
+// src/media-figure-block.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var DEFAULT_TRANSFORM = { width: 1200, height: 630, format: "auto" };
+var DEFAULT_MEDIA_BASE_URL = "https://media.p1.pantheon.io";
+var placeholderStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: "200px",
+  borderRadius: "8px",
+  backgroundColor: "#e5e5e5",
+  color: "#525252",
+  fontSize: "14px"
+};
+function createMediaFigureBlock(options) {
+  const {
+    mediaBaseUrl = DEFAULT_MEDIA_BASE_URL,
+    transform = DEFAULT_TRANSFORM,
+    label = "Media Figure",
+    fieldLabel = "Photo",
+    schema,
+    className,
+    captionClassName,
+    placeholder = "Choose a photo from the media library"
+  } = 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 }
+    },
+    defaultProps: {
+      photo: null
+    },
+    render: ({ photo }) => {
+      const { src } = getMediaProps(photo ?? null, { mediaBaseUrl });
+      if (!src) {
+        return /* @__PURE__ */ jsx14("div", { style: placeholderStyle, children: placeholder });
+      }
+      return /* @__PURE__ */ jsx14(
+        MediaFigure,
+        {
+          image: photo ?? null,
+          mediaBaseUrl,
+          transform,
+          schema,
+          className,
+          captionClassName
+        }
+      );
+    }
+  };
+}
+export {
+  DEFAULT_MEDIA_PATTERNS,
+  MediaFigure,
+  MediaImage,
+  buildImageUrl,
+  createMediaFigureBlock,
+  createMediaPlugin,
+  getMediaProps,
+  isMediaValue,
+  makeMediaValue
+};
+//# sourceMappingURL=index.mjs.map