@orion-studios/payload-studio 0.5.0-beta.50 → 0.5.0-beta.52

package/dist/admin-app/client.js

@@ -24,6 +24,9 @@ __export(client_exports, {
   AdminShellClient: () => AdminShellClient,
   HeaderNavEditorWithPreview: () => HeaderNavEditorWithPreview,
   HeaderNavItemsEditor: () => HeaderNavItemsEditor,
+  MediaDetailPanel: () => MediaDetailPanel,
+  MediaListItem: () => MediaListItem,
+  MediaUploadForm: () => MediaUploadForm,
   PageEditorFrame: () => PageEditorFrame
 });
 module.exports = __toCommonJS(client_exports);
@@ -50,6 +53,47 @@ var navItemIsActive = (pathname, item) => {
 
 // src/admin-app/components/AdminShellClient.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var iconSize = 20;
+var iconStyle = { display: "block", flexShrink: 0 };
+function NavIcon({ name }) {
+  const props = { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: iconStyle };
+  switch (name) {
+    case "dashboard":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "7", height: "9", rx: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "14", y: "3", width: "7", height: "5", rx: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "14", y: "12", width: "7", height: "9", rx: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "16", width: "7", height: "5", rx: "1" })
+      ] });
+    case "pages":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "13", x2: "16", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "17", x2: "12", y2: "17" })
+      ] });
+    case "globals":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
+      ] });
+    case "media":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "21 15 16 10 5 21" })
+      ] });
+    case "tools":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z" }) });
+    case "account":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "7", r: "4" })
+      ] });
+    default:
+      return null;
+  }
+}
 function AdminShellClient({
   children,
   brandName,
@@ -117,7 +161,10 @@ function AdminShellClient({
             className: `orion-admin-nav-link ${active ? "is-active" : ""}`,
             href: item.href,
             title: item.label,
-            children: collapsed ? item.label.slice(0, 1) : item.label
+            children: item.icon ? collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavIcon, { name: item.icon }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { alignItems: "center", display: "flex", gap: "0.6rem" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavIcon, { name: item.icon }),
+              item.label
+            ] }) : collapsed ? item.label.slice(0, 1) : item.label
           },
           item.href
         );
@@ -493,22 +540,311 @@ function HeaderNavEditorWithPreview({
   ] });
 }
 
-// src/admin-app/components/PageEditorFrame.tsx
+// src/admin-app/components/MediaDetailPanel.tsx
 var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function MediaDetailPanel({
+  id,
+  filename,
+  alt,
+  url,
+  filesize,
+  width,
+  height,
+  mimeType,
+  createdAt,
+  updateAction,
+  deleteAction
+}) {
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const [confirmDelete, setConfirmDelete] = (0, import_react4.useState)(false);
+  const copyUrl = async () => {
+    if (!url) return;
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      const input = document.createElement("input");
+      input.value = url;
+      document.body.appendChild(input);
+      input.select();
+      document.execCommand("copy");
+      document.body.removeChild(input);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const metaRows = [];
+  if (filename) metaRows.push({ label: "Filename", value: filename });
+  if (typeof filesize === "number") metaRows.push({ label: "File size", value: formatFileSize(filesize) });
+  if (typeof width === "number" && typeof height === "number") metaRows.push({ label: "Dimensions", value: `${width} \xD7 ${height} px` });
+  if (mimeType) metaRows.push({ label: "Type", value: mimeType });
+  if (createdAt) {
+    try {
+      metaRows.push({ label: "Uploaded", value: new Date(createdAt).toLocaleDateString() });
+    } catch {
+      metaRows.push({ label: "Uploaded", value: createdAt });
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orion-admin-grid", style: { alignItems: "start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orion-admin-card", children: url ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { alt: alt || filename || "Media", src: url, style: { borderRadius: 12, width: "100%" } }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "No preview available." }) }),
+      url ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          className: "orion-admin-action-button",
+          onClick: copyUrl,
+          style: { marginTop: "0.6rem", width: "100%" },
+          type: "button",
+          children: copied ? "Copied!" : "Copy URL"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+      metaRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orion-admin-card orion-admin-meta-table", children: metaRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orion-admin-meta-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "orion-admin-meta-label", children: row.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "orion-admin-meta-value", children: row.value })
+      ] }, row.label)) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { action: updateAction, className: "orion-admin-form", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { name: "id", type: "hidden", value: id }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+          "Alt text",
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { defaultValue: alt || "", name: "alt", required: true, type: "text" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", children: "Save" })
+      ] }),
+      confirmDelete ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "orion-admin-form", style: { borderColor: "#b42318" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { fontWeight: 700, margin: 0 }, children: "Are you sure you want to delete this asset?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", margin: 0 }, children: "This action cannot be undone." }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { action: deleteAction, style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { name: "id", type: "hidden", value: id }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { style: { background: "#b42318", border: 0, borderRadius: 10, color: "#fff", cursor: "pointer", fontWeight: 800, padding: "0.55rem 0.8rem", width: "100%" }, type: "submit", children: "Yes, Delete" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: () => setConfirmDelete(false),
+              style: { background: "transparent", border: "1px solid var(--orion-admin-border)", borderRadius: 10, cursor: "pointer", flex: 1, fontWeight: 700, padding: "0.55rem 0.8rem" },
+              type: "button",
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          className: "orion-admin-action-button",
+          onClick: () => setConfirmDelete(true),
+          style: { background: "#b42318" },
+          type: "button",
+          children: "Delete Asset"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/admin-app/components/MediaListItem.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function formatFileSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function MediaListItem({
+  id,
+  filename,
+  alt,
+  url,
+  filesize,
+  width,
+  height,
+  mimeType,
+  href
+}) {
+  const label = filename || `Media ${id}`;
+  const altText = alt || "";
+  const metaParts = [];
+  if (typeof filesize === "number") metaParts.push(formatFileSize2(filesize));
+  if (typeof width === "number" && typeof height === "number") metaParts.push(`${width}\xD7${height}`);
+  if (typeof mimeType === "string") metaParts.push(mimeType);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("a", { className: "orion-admin-list-item", href, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { alignItems: "center", display: "flex", gap: "0.8rem" }, children: [
+      url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { alt: altText || label, className: "orion-admin-media-preview", src: url }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "orion-admin-list-meta", children: altText || "No alt text" }),
+        metaParts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "orion-admin-list-meta", style: { marginTop: "0.15rem" }, children: metaParts.join(" \xB7 ") }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "orion-admin-list-meta", children: "Edit" })
+  ] });
+}
+
+// src/admin-app/components/MediaUploadForm.tsx
+var import_react5 = require("react");
+var import_navigation = require("next/navigation");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var parseUploadError = async (response) => {
+  const fallback = "Upload failed. Please check the image and required fields, then try again.";
+  try {
+    const body = await response.json();
+    const nestedMessage = body.errors?.[0]?.data?.errors?.[0]?.message;
+    if (typeof nestedMessage === "string" && nestedMessage.trim().length > 0) {
+      return nestedMessage;
+    }
+    const topMessage = body.errors?.[0]?.message;
+    if (typeof topMessage === "string" && topMessage.trim().length > 0) {
+      return topMessage;
+    }
+    if (typeof body.message === "string" && body.message.trim().length > 0) {
+      return body.message;
+    }
+  } catch {
+  }
+  return fallback;
+};
+function MediaUploadForm() {
+  const router = (0, import_navigation.useRouter)();
+  const fileInputRef = (0, import_react5.useRef)(null);
+  const [alt, setAlt] = (0, import_react5.useState)("");
+  const [file, setFile] = (0, import_react5.useState)(null);
+  const [preview, setPreview] = (0, import_react5.useState)(null);
+  const [dragging, setDragging] = (0, import_react5.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const handleFile = (0, import_react5.useCallback)((selectedFile) => {
+    setFile(selectedFile);
+    if (preview) {
+      URL.revokeObjectURL(preview);
+      setPreview(null);
+    }
+    if (selectedFile && selectedFile.type.startsWith("image/")) {
+      setPreview(URL.createObjectURL(selectedFile));
+    }
+  }, [preview]);
+  const onDragOver = (0, import_react5.useCallback)((e) => {
+    e.preventDefault();
+    setDragging(true);
+  }, []);
+  const onDragLeave = (0, import_react5.useCallback)((e) => {
+    e.preventDefault();
+    setDragging(false);
+  }, []);
+  const onDrop = (0, import_react5.useCallback)((e) => {
+    e.preventDefault();
+    setDragging(false);
+    const droppedFile = e.dataTransfer.files?.[0] || null;
+    if (droppedFile) {
+      handleFile(droppedFile);
+    }
+  }, [handleFile]);
+  const upload = async (event) => {
+    event.preventDefault();
+    if (!file) {
+      setError("Select an image to upload.");
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const formData = new FormData();
+      const fallbackAlt = file.name.replace(/\.[^/.]+$/, "").trim();
+      const resolvedAlt = alt.trim() || fallbackAlt || "Uploaded image";
+      formData.set("_payload", JSON.stringify({ alt: resolvedAlt }));
+      formData.set("alt", resolvedAlt);
+      formData.set("file", file);
+      const response = await fetch("/api/media", {
+        method: "POST",
+        credentials: "include",
+        body: formData
+      });
+      if (!response.ok) {
+        throw new Error(await parseUploadError(response));
+      }
+      setAlt("");
+      setFile(null);
+      if (preview) {
+        URL.revokeObjectURL(preview);
+        setPreview(null);
+      }
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { className: "orion-admin-upload-form", onSubmit: upload, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
+      "Alt text",
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          onChange: (event) => setAlt(event.target.value),
+          placeholder: "Describe the image",
+          type: "text",
+          value: alt
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        className: `orion-admin-dropzone${dragging ? " is-dragging" : ""}${file ? " has-file" : ""}`,
+        onClick: () => fileInputRef.current?.click(),
+        onDragLeave,
+        onDragOver,
+        onDrop,
+        children: [
+          preview ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "orion-admin-dropzone-preview", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { alt: "Upload preview", src: preview }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: file?.name })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "orion-admin-dropzone-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Drop an image here" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "or click to browse" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              accept: "image/*",
+              onChange: (event) => handleFile(event.target.files?.[0] || null),
+              ref: fileInputRef,
+              style: { display: "none" },
+              type: "file"
+            }
+          )
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "orion-admin-upload-error", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { disabled: submitting, type: "submit", children: submitting ? "Uploading..." : "Upload" })
+  ] });
+}
+
+// src/admin-app/components/PageEditorFrame.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function PageEditorFrame({ src }) {
-  const iframeRef = (0, import_react4.useRef)(null);
-  const dirtyCheckTimerRef = (0, import_react4.useRef)(null);
-  const [saving, setSaving] = (0, import_react4.useState)(null);
-  const [message, setMessage] = (0, import_react4.useState)("");
-  const [error, setError] = (0, import_react4.useState)("");
-  const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react4.useState)(false);
-  const [awaitingDirtyCheck, setAwaitingDirtyCheck] = (0, import_react4.useState)(false);
-  const [pendingNavigationURL, setPendingNavigationURL] = (0, import_react4.useState)(null);
-  const [showUnsavedDialog, setShowUnsavedDialog] = (0, import_react4.useState)(false);
-  const [canUndo, setCanUndo] = (0, import_react4.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react4.useState)(false);
-  const [sessionExpired, setSessionExpired] = (0, import_react4.useState)(false);
+  const iframeRef = (0, import_react6.useRef)(null);
+  const dirtyCheckTimerRef = (0, import_react6.useRef)(null);
+  const [saving, setSaving] = (0, import_react6.useState)(null);
+  const [message, setMessage] = (0, import_react6.useState)("");
+  const [error, setError] = (0, import_react6.useState)("");
+  const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react6.useState)(false);
+  const [awaitingDirtyCheck, setAwaitingDirtyCheck] = (0, import_react6.useState)(false);
+  const [pendingNavigationURL, setPendingNavigationURL] = (0, import_react6.useState)(null);
+  const [showUnsavedDialog, setShowUnsavedDialog] = (0, import_react6.useState)(false);
+  const [canUndo, setCanUndo] = (0, import_react6.useState)(false);
+  const [canRedo, setCanRedo] = (0, import_react6.useState)(false);
+  const [sessionExpired, setSessionExpired] = (0, import_react6.useState)(false);
   const clearDirtyCheckTimer = () => {
     if (dirtyCheckTimerRef.current) {
       window.clearTimeout(dirtyCheckTimerRef.current);
@@ -554,7 +890,7 @@ function PageEditorFrame({ src }) {
       "*"
     );
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const onMessage = (event) => {
       const data = event.data;
       if (!data || data.source !== "payload-visual-builder-child") {
@@ -599,7 +935,7 @@ function PageEditorFrame({ src }) {
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [awaitingDirtyCheck, pendingNavigationURL]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const onDocumentClick = (event) => {
       if (!hasUnsavedChanges) {
         return;
@@ -662,7 +998,7 @@ function PageEditorFrame({ src }) {
     document.addEventListener("click", onDocumentClick, true);
     return () => document.removeEventListener("click", onDocumentClick, true);
   }, [hasUnsavedChanges]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!hasUnsavedChanges) {
       return;
     }
@@ -673,14 +1009,14 @@ function PageEditorFrame({ src }) {
     window.addEventListener("beforeunload", onBeforeUnload);
     return () => window.removeEventListener("beforeunload", onBeforeUnload);
   }, [hasUnsavedChanges]);
-  (0, import_react4.useEffect)(
+  (0, import_react6.useEffect)(
     () => () => {
       clearDirtyCheckTimer();
     },
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "grid", gap: "0.8rem" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         style: {
@@ -695,9 +1031,9 @@ function PageEditorFrame({ src }) {
           padding: "0.7rem 0.8rem"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem" }, children: "Save changes to update the page layout and content." }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem" }, children: "Save changes to update the page layout and content." }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -708,7 +1044,7 @@ function PageEditorFrame({ src }) {
                 children: "Undo"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -719,7 +1055,7 @@ function PageEditorFrame({ src }) {
                 children: "Redo"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -729,7 +1065,7 @@ function PageEditorFrame({ src }) {
                 children: saving === "draft" ? "Saving..." : "Save Draft"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -744,9 +1080,9 @@ function PageEditorFrame({ src }) {
         ]
       }
     ),
-    message ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#0f7d52", fontSize: "0.9rem", fontWeight: 700 }, children: message }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orion-admin-error", children: error }) : null,
-    sessionExpired ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    message ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { color: "#0f7d52", fontSize: "0.9rem", fontWeight: 700 }, children: message }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "orion-admin-error", children: error }) : null,
+    sessionExpired ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         style: {
@@ -761,7 +1097,7 @@ function PageEditorFrame({ src }) {
         children: "Session expired. Log in again in a new tab, then save your changes."
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "iframe",
       {
         ref: iframeRef,
@@ -781,7 +1117,7 @@ function PageEditorFrame({ src }) {
         }
       }
     ),
-    pendingNavigationURL && showUnsavedDialog ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    pendingNavigationURL && showUnsavedDialog ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         "data-orion-unsaved-dialog": "true",
@@ -795,7 +1131,7 @@ function PageEditorFrame({ src }) {
           position: "fixed",
           zIndex: 2e3
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             style: {
@@ -810,12 +1146,12 @@ function PageEditorFrame({ src }) {
               width: "100%"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "var(--orion-admin-text)", fontSize: "1rem", fontWeight: 700 }, children: "Unsaved changes" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", marginTop: "0.4rem" }, children: "You have unsaved edits in the page builder. Save before leaving this page?" })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { color: "var(--orion-admin-text)", fontSize: "1rem", fontWeight: 700 }, children: "Unsaved changes" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", marginTop: "0.4rem" }, children: "You have unsaved edits in the page builder. Save before leaving this page?" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "0.6rem", justifyContent: "flex-end" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: "0.6rem", justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     className: "orion-admin-action-button",
@@ -827,7 +1163,7 @@ function PageEditorFrame({ src }) {
                     children: "Stay"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     className: "orion-admin-action-button",
@@ -855,5 +1191,8 @@ function PageEditorFrame({ src }) {
   AdminShellClient,
   HeaderNavEditorWithPreview,
   HeaderNavItemsEditor,
+  MediaDetailPanel,
+  MediaListItem,
+  MediaUploadForm,
   PageEditorFrame
 });