@orion-studios/payload-studio 0.5.0-beta.51 → 0.5.0-beta.53

package/dist/admin-app/client.d.mts

@@ -1,4 +1,7 @@
 export { AdminShellClient } from './components/AdminShellClient'
 export { HeaderNavItemsEditor } from './components/HeaderNavItemsEditor'
 export { HeaderNavEditorWithPreview } from './components/HeaderNavEditorWithPreview'
+export { MediaDetailPanel } from './components/MediaDetailPanel'
+export { MediaListItem } from './components/MediaListItem'
+export { MediaUploadForm } from './components/MediaUploadForm'
 export { PageEditorFrame } from './components/PageEditorFrame'

package/dist/admin-app/client.d.ts

@@ -1,4 +1,7 @@
 export { AdminShellClient } from './components/AdminShellClient'
 export { HeaderNavItemsEditor } from './components/HeaderNavItemsEditor'
 export { HeaderNavEditorWithPreview } from './components/HeaderNavEditorWithPreview'
+export { MediaDetailPanel } from './components/MediaDetailPanel'
+export { MediaListItem } from './components/MediaListItem'
+export { MediaUploadForm } from './components/MediaUploadForm'
 export { PageEditorFrame } from './components/PageEditorFrame'

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);
@@ -537,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);
@@ -598,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") {
@@ -643,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;
@@ -706,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;
     }
@@ -717,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: {
@@ -739,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",
@@ -752,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",
@@ -763,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",
@@ -773,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",
@@ -788,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: {
@@ -805,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,
@@ -825,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",
@@ -839,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: {
@@ -854,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",
@@ -871,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",
@@ -899,5 +1191,8 @@ function PageEditorFrame({ src }) {
   AdminShellClient,
   HeaderNavEditorWithPreview,
   HeaderNavItemsEditor,
+  MediaDetailPanel,
+  MediaListItem,
+  MediaUploadForm,
   PageEditorFrame
 });

package/dist/admin-app/client.mjs

@@ -509,22 +509,311 @@ function HeaderNavEditorWithPreview({
   ] });
 }
 
-// src/admin-app/components/PageEditorFrame.tsx
-import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+// src/admin-app/components/MediaDetailPanel.tsx
+import { useState as useState4 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "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] = useState4(false);
+  const [confirmDelete, setConfirmDelete] = useState4(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__ */ jsxs4("div", { className: "orion-admin-grid", style: { alignItems: "start" }, children: [
+    /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx4("div", { className: "orion-admin-card", children: url ? /* @__PURE__ */ jsx4("img", { alt: alt || filename || "Media", src: url, style: { borderRadius: 12, width: "100%" } }) : /* @__PURE__ */ jsx4("span", { children: "No preview available." }) }),
+      url ? /* @__PURE__ */ jsx4(
+        "button",
+        {
+          className: "orion-admin-action-button",
+          onClick: copyUrl,
+          style: { marginTop: "0.6rem", width: "100%" },
+          type: "button",
+          children: copied ? "Copied!" : "Copy URL"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+      metaRows.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "orion-admin-card orion-admin-meta-table", children: metaRows.map((row) => /* @__PURE__ */ jsxs4("div", { className: "orion-admin-meta-row", children: [
+        /* @__PURE__ */ jsx4("span", { className: "orion-admin-meta-label", children: row.label }),
+        /* @__PURE__ */ jsx4("span", { className: "orion-admin-meta-value", children: row.value })
+      ] }, row.label)) }) : null,
+      /* @__PURE__ */ jsxs4("form", { action: updateAction, className: "orion-admin-form", children: [
+        /* @__PURE__ */ jsx4("input", { name: "id", type: "hidden", value: id }),
+        /* @__PURE__ */ jsxs4("label", { children: [
+          "Alt text",
+          /* @__PURE__ */ jsx4("input", { defaultValue: alt || "", name: "alt", required: true, type: "text" })
+        ] }),
+        /* @__PURE__ */ jsx4("button", { type: "submit", children: "Save" })
+      ] }),
+      confirmDelete ? /* @__PURE__ */ jsxs4("div", { className: "orion-admin-form", style: { borderColor: "#b42318" }, children: [
+        /* @__PURE__ */ jsx4("p", { style: { fontWeight: 700, margin: 0 }, children: "Are you sure you want to delete this asset?" }),
+        /* @__PURE__ */ jsx4("p", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", margin: 0 }, children: "This action cannot be undone." }),
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ jsxs4("form", { action: deleteAction, style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx4("input", { name: "id", type: "hidden", value: id }),
+            /* @__PURE__ */ jsx4("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__ */ jsx4(
+            "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__ */ jsx4(
+        "button",
+        {
+          className: "orion-admin-action-button",
+          onClick: () => setConfirmDelete(true),
+          style: { background: "#b42318" },
+          type: "button",
+          children: "Delete Asset"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/admin-app/components/MediaListItem.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "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__ */ jsxs5("a", { className: "orion-admin-list-item", href, children: [
+    /* @__PURE__ */ jsxs5("div", { style: { alignItems: "center", display: "flex", gap: "0.8rem" }, children: [
+      url ? /* @__PURE__ */ jsx5("img", { alt: altText || label, className: "orion-admin-media-preview", src: url }) : null,
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx5("strong", { children: label }),
+        /* @__PURE__ */ jsx5("div", { className: "orion-admin-list-meta", children: altText || "No alt text" }),
+        metaParts.length > 0 ? /* @__PURE__ */ jsx5("div", { className: "orion-admin-list-meta", style: { marginTop: "0.15rem" }, children: metaParts.join(" \xB7 ") }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5("span", { className: "orion-admin-list-meta", children: "Edit" })
+  ] });
+}
+
+// src/admin-app/components/MediaUploadForm.tsx
+import { useState as useState5, useRef, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { jsx as jsx6, jsxs as jsxs6 } from "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 = useRouter();
+  const fileInputRef = useRef(null);
+  const [alt, setAlt] = useState5("");
+  const [file, setFile] = useState5(null);
+  const [preview, setPreview] = useState5(null);
+  const [dragging, setDragging] = useState5(false);
+  const [submitting, setSubmitting] = useState5(false);
+  const [error, setError] = useState5(null);
+  const handleFile = useCallback((selectedFile) => {
+    setFile(selectedFile);
+    if (preview) {
+      URL.revokeObjectURL(preview);
+      setPreview(null);
+    }
+    if (selectedFile && selectedFile.type.startsWith("image/")) {
+      setPreview(URL.createObjectURL(selectedFile));
+    }
+  }, [preview]);
+  const onDragOver = useCallback((e) => {
+    e.preventDefault();
+    setDragging(true);
+  }, []);
+  const onDragLeave = useCallback((e) => {
+    e.preventDefault();
+    setDragging(false);
+  }, []);
+  const onDrop = 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__ */ jsxs6("form", { className: "orion-admin-upload-form", onSubmit: upload, children: [
+    /* @__PURE__ */ jsxs6("label", { children: [
+      "Alt text",
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          onChange: (event) => setAlt(event.target.value),
+          placeholder: "Describe the image",
+          type: "text",
+          value: alt
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: `orion-admin-dropzone${dragging ? " is-dragging" : ""}${file ? " has-file" : ""}`,
+        onClick: () => fileInputRef.current?.click(),
+        onDragLeave,
+        onDragOver,
+        onDrop,
+        children: [
+          preview ? /* @__PURE__ */ jsxs6("div", { className: "orion-admin-dropzone-preview", children: [
+            /* @__PURE__ */ jsx6("img", { alt: "Upload preview", src: preview }),
+            /* @__PURE__ */ jsx6("span", { children: file?.name })
+          ] }) : /* @__PURE__ */ jsxs6("div", { className: "orion-admin-dropzone-label", children: [
+            /* @__PURE__ */ jsx6("strong", { children: "Drop an image here" }),
+            /* @__PURE__ */ jsx6("span", { children: "or click to browse" })
+          ] }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              accept: "image/*",
+              onChange: (event) => handleFile(event.target.files?.[0] || null),
+              ref: fileInputRef,
+              style: { display: "none" },
+              type: "file"
+            }
+          )
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx6("div", { className: "orion-admin-upload-error", children: error }) : null,
+    /* @__PURE__ */ jsx6("button", { disabled: submitting, type: "submit", children: submitting ? "Uploading..." : "Upload" })
+  ] });
+}
+
+// src/admin-app/components/PageEditorFrame.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState6 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function PageEditorFrame({ src }) {
-  const iframeRef = useRef(null);
-  const dirtyCheckTimerRef = useRef(null);
-  const [saving, setSaving] = useState4(null);
-  const [message, setMessage] = useState4("");
-  const [error, setError] = useState4("");
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState4(false);
-  const [awaitingDirtyCheck, setAwaitingDirtyCheck] = useState4(false);
-  const [pendingNavigationURL, setPendingNavigationURL] = useState4(null);
-  const [showUnsavedDialog, setShowUnsavedDialog] = useState4(false);
-  const [canUndo, setCanUndo] = useState4(false);
-  const [canRedo, setCanRedo] = useState4(false);
-  const [sessionExpired, setSessionExpired] = useState4(false);
+  const iframeRef = useRef2(null);
+  const dirtyCheckTimerRef = useRef2(null);
+  const [saving, setSaving] = useState6(null);
+  const [message, setMessage] = useState6("");
+  const [error, setError] = useState6("");
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState6(false);
+  const [awaitingDirtyCheck, setAwaitingDirtyCheck] = useState6(false);
+  const [pendingNavigationURL, setPendingNavigationURL] = useState6(null);
+  const [showUnsavedDialog, setShowUnsavedDialog] = useState6(false);
+  const [canUndo, setCanUndo] = useState6(false);
+  const [canRedo, setCanRedo] = useState6(false);
+  const [sessionExpired, setSessionExpired] = useState6(false);
   const clearDirtyCheckTimer = () => {
     if (dirtyCheckTimerRef.current) {
       window.clearTimeout(dirtyCheckTimerRef.current);
@@ -695,8 +984,8 @@ function PageEditorFrame({ src }) {
     },
     []
   );
-  return /* @__PURE__ */ jsxs4("div", { style: { display: "grid", gap: "0.8rem" }, children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+    /* @__PURE__ */ jsxs7(
       "div",
       {
         style: {
@@ -711,9 +1000,9 @@ function PageEditorFrame({ src }) {
           padding: "0.7rem 0.8rem"
         },
         children: [
-          /* @__PURE__ */ jsx4("div", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem" }, children: "Save changes to update the page layout and content." }),
-          /* @__PURE__ */ jsxs4("div", { style: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx7("div", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem" }, children: "Save changes to update the page layout and content." }),
+          /* @__PURE__ */ jsxs7("div", { style: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -724,7 +1013,7 @@ function PageEditorFrame({ src }) {
                 children: "Undo"
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -735,7 +1024,7 @@ function PageEditorFrame({ src }) {
                 children: "Redo"
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -745,7 +1034,7 @@ function PageEditorFrame({ src }) {
                 children: saving === "draft" ? "Saving..." : "Save Draft"
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -760,9 +1049,9 @@ function PageEditorFrame({ src }) {
         ]
       }
     ),
-    message ? /* @__PURE__ */ jsx4("div", { style: { color: "#0f7d52", fontSize: "0.9rem", fontWeight: 700 }, children: message }) : null,
-    error ? /* @__PURE__ */ jsx4("div", { className: "orion-admin-error", children: error }) : null,
-    sessionExpired ? /* @__PURE__ */ jsx4(
+    message ? /* @__PURE__ */ jsx7("div", { style: { color: "#0f7d52", fontSize: "0.9rem", fontWeight: 700 }, children: message }) : null,
+    error ? /* @__PURE__ */ jsx7("div", { className: "orion-admin-error", children: error }) : null,
+    sessionExpired ? /* @__PURE__ */ jsx7(
       "div",
       {
         style: {
@@ -777,7 +1066,7 @@ function PageEditorFrame({ src }) {
         children: "Session expired. Log in again in a new tab, then save your changes."
       }
     ) : null,
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx7(
       "iframe",
       {
         ref: iframeRef,
@@ -797,7 +1086,7 @@ function PageEditorFrame({ src }) {
         }
       }
     ),
-    pendingNavigationURL && showUnsavedDialog ? /* @__PURE__ */ jsx4(
+    pendingNavigationURL && showUnsavedDialog ? /* @__PURE__ */ jsx7(
       "div",
       {
         "data-orion-unsaved-dialog": "true",
@@ -811,7 +1100,7 @@ function PageEditorFrame({ src }) {
           position: "fixed",
           zIndex: 2e3
         },
-        children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -826,12 +1115,12 @@ function PageEditorFrame({ src }) {
               width: "100%"
             },
             children: [
-              /* @__PURE__ */ jsxs4("div", { children: [
-                /* @__PURE__ */ jsx4("div", { style: { color: "var(--orion-admin-text)", fontSize: "1rem", fontWeight: 700 }, children: "Unsaved changes" }),
-                /* @__PURE__ */ jsx4("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__ */ jsxs7("div", { children: [
+                /* @__PURE__ */ jsx7("div", { style: { color: "var(--orion-admin-text)", fontSize: "1rem", fontWeight: 700 }, children: "Unsaved changes" }),
+                /* @__PURE__ */ jsx7("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__ */ jsxs4("div", { style: { display: "flex", gap: "0.6rem", justifyContent: "flex-end" }, children: [
-                /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "0.6rem", justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     className: "orion-admin-action-button",
@@ -843,7 +1132,7 @@ function PageEditorFrame({ src }) {
                     children: "Stay"
                   }
                 ),
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     className: "orion-admin-action-button",
@@ -870,5 +1159,8 @@ export {
   AdminShellClient,
   HeaderNavEditorWithPreview,
   HeaderNavItemsEditor,
+  MediaDetailPanel,
+  MediaListItem,
+  MediaUploadForm,
   PageEditorFrame
 };

package/dist/admin-app/index.d.mts

@@ -1,3 +1,3 @@
-export { A as AdminBreadcrumbItem, a as AdminBreadcrumbs, b as AdminNavIcon, c as AdminNavInput, d as AdminNavItem, e as AdminNavLinkItem, f as AdminPage, g as AdminPageLinkOption, h as AdminPageRecord, j as AdminRole, N as NestedNavItem, k as NestedNavItemInput, l as NestedNavTree, m as buildAdminPageLinkOptions, n as buildNestedNavTree, o as getAdminNavRows, p as navItemIsActive, q as normalizeAdminNavInputs, r as normalizeNestedNavItems, s as parseAdminHeaderNavFromForm, t as roleCanAccessNav } from '../index-TJmWr6aF.mjs';
+export { A as AdminBreadcrumbItem, a as AdminBreadcrumbs, b as AdminNavIcon, c as AdminNavInput, d as AdminNavItem, e as AdminNavLinkItem, f as AdminPage, g as AdminPageLinkOption, h as AdminPageRecord, j as AdminRole, M as MediaDetailPanelProps, k as MediaListItemProps, N as NestedNavItem, l as NestedNavItemInput, m as NestedNavTree, n as buildAdminPageLinkOptions, o as buildNestedNavTree, p as getAdminNavRows, q as navItemIsActive, r as normalizeAdminNavInputs, s as normalizeNestedNavItems, t as parseAdminHeaderNavFromForm, u as roleCanAccessNav } from '../index-ZbOx4OCF.mjs';
 import 'react/jsx-runtime';
 import 'react';

package/dist/admin-app/index.d.ts

@@ -1,3 +1,3 @@
-export { A as AdminBreadcrumbItem, a as AdminBreadcrumbs, b as AdminNavIcon, c as AdminNavInput, d as AdminNavItem, e as AdminNavLinkItem, f as AdminPage, g as AdminPageLinkOption, h as AdminPageRecord, j as AdminRole, N as NestedNavItem, k as NestedNavItemInput, l as NestedNavTree, m as buildAdminPageLinkOptions, n as buildNestedNavTree, o as getAdminNavRows, p as navItemIsActive, q as normalizeAdminNavInputs, r as normalizeNestedNavItems, s as parseAdminHeaderNavFromForm, t as roleCanAccessNav } from '../index-TJmWr6aF.js';
+export { A as AdminBreadcrumbItem, a as AdminBreadcrumbs, b as AdminNavIcon, c as AdminNavInput, d as AdminNavItem, e as AdminNavLinkItem, f as AdminPage, g as AdminPageLinkOption, h as AdminPageRecord, j as AdminRole, M as MediaDetailPanelProps, k as MediaListItemProps, N as NestedNavItem, l as NestedNavItemInput, m as NestedNavTree, n as buildAdminPageLinkOptions, o as buildNestedNavTree, p as getAdminNavRows, q as navItemIsActive, r as normalizeAdminNavInputs, s as normalizeNestedNavItems, t as parseAdminHeaderNavFromForm, u as roleCanAccessNav } from '../index-ZbOx4OCF.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/admin-app/styles.css

@@ -253,3 +253,99 @@
     grid-template-columns: 1fr;
   }
 }
+
+.orion-admin-media-preview {
+  border-radius: 10px;
+  display: block;
+  height: 68px;
+  object-fit: cover;
+  width: 68px;
+}
+
+.orion-admin-meta-table {
+  display: grid;
+  gap: 0;
+  padding: 0;
+}
+
+.orion-admin-meta-row {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 0.6rem 1rem;
+}
+
+.orion-admin-meta-row:not(:last-child) {
+  border-bottom: 1px solid var(--orion-admin-card-border);
+}
+
+.orion-admin-meta-label {
+  color: var(--orion-admin-muted);
+  font-size: 0.88rem;
+}
+
+.orion-admin-meta-value {
+  font-size: 0.92rem;
+  font-weight: 700;
+  text-align: right;
+}
+
+.orion-admin-dropzone {
+  align-items: center;
+  border: 2px dashed var(--orion-admin-border);
+  border-radius: 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  min-height: 120px;
+  padding: 1rem;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.orion-admin-dropzone:hover {
+  border-color: var(--orion-admin-muted);
+}
+
+.orion-admin-dropzone.is-dragging {
+  background: rgba(24, 95, 69, 0.06);
+  border-color: rgba(24, 95, 69, 0.5);
+}
+
+.orion-admin-dropzone.has-file {
+  border-style: solid;
+}
+
+.orion-admin-dropzone-label {
+  display: grid;
+  gap: 0.2rem;
+  text-align: center;
+}
+
+.orion-admin-dropzone-label strong {
+  font-size: 0.95rem;
+}
+
+.orion-admin-dropzone-label span {
+  color: var(--orion-admin-muted);
+  font-size: 0.85rem;
+}
+
+.orion-admin-dropzone-preview {
+  align-items: center;
+  display: flex;
+  gap: 0.8rem;
+}
+
+.orion-admin-dropzone-preview img {
+  border-radius: 8px;
+  height: 60px;
+  object-fit: cover;
+  width: 60px;
+}
+
+.orion-admin-dropzone-preview span {
+  color: var(--orion-admin-text);
+  font-size: 0.9rem;
+  font-weight: 600;
+}

package/dist/{index-TJmWr6aF.d.mts → index-ZbOx4OCF.d.mts}

@@ -31,6 +31,32 @@ type AdminPageProps = {
 };
 declare function AdminPage({ title, description, breadcrumbs, actions, children }: AdminPageProps): react_jsx_runtime.JSX.Element;
 
+type MediaDetailPanelProps = {
+    id: string;
+    filename?: string;
+    alt?: string;
+    url?: string;
+    filesize?: number;
+    width?: number;
+    height?: number;
+    mimeType?: string;
+    createdAt?: string;
+    updateAction: (formData: FormData) => void;
+    deleteAction: (formData: FormData) => void;
+};
+
+type MediaListItemProps = {
+    id: string;
+    filename?: string;
+    alt?: string;
+    url?: string;
+    filesize?: number;
+    width?: number;
+    height?: number;
+    mimeType?: string;
+    href: string;
+};
+
 type NestedNavItemInput = {
     href?: string;
     label?: string;
@@ -82,6 +108,8 @@ declare const index_AdminPage: typeof AdminPage;
 type index_AdminPageLinkOption = AdminPageLinkOption;
 type index_AdminPageRecord = AdminPageRecord;
 type index_AdminRole = AdminRole;
+type index_MediaDetailPanelProps = MediaDetailPanelProps;
+type index_MediaListItemProps = MediaListItemProps;
 type index_NestedNavItem = NestedNavItem;
 type index_NestedNavItemInput = NestedNavItemInput;
 type index_NestedNavTree = NestedNavTree;
@@ -94,7 +122,7 @@ declare const index_normalizeNestedNavItems: typeof normalizeNestedNavItems;
 declare const index_parseAdminHeaderNavFromForm: typeof parseAdminHeaderNavFromForm;
 declare const index_roleCanAccessNav: typeof roleCanAccessNav;
 declare namespace index {
-  export { type index_AdminBreadcrumbItem as AdminBreadcrumbItem, index_AdminBreadcrumbs as AdminBreadcrumbs, type index_AdminNavIcon as AdminNavIcon, type index_AdminNavInput as AdminNavInput, type index_AdminNavItem as AdminNavItem, type index_AdminNavLinkItem as AdminNavLinkItem, index_AdminPage as AdminPage, type index_AdminPageLinkOption as AdminPageLinkOption, type index_AdminPageRecord as AdminPageRecord, type index_AdminRole as AdminRole, type index_NestedNavItem as NestedNavItem, type index_NestedNavItemInput as NestedNavItemInput, type index_NestedNavTree as NestedNavTree, index_buildAdminPageLinkOptions as buildAdminPageLinkOptions, index_buildNestedNavTree as buildNestedNavTree, index_getAdminNavRows as getAdminNavRows, index_navItemIsActive as navItemIsActive, index_normalizeAdminNavInputs as normalizeAdminNavInputs, index_normalizeNestedNavItems as normalizeNestedNavItems, index_parseAdminHeaderNavFromForm as parseAdminHeaderNavFromForm, index_roleCanAccessNav as roleCanAccessNav };
+  export { type index_AdminBreadcrumbItem as AdminBreadcrumbItem, index_AdminBreadcrumbs as AdminBreadcrumbs, type index_AdminNavIcon as AdminNavIcon, type index_AdminNavInput as AdminNavInput, type index_AdminNavItem as AdminNavItem, type index_AdminNavLinkItem as AdminNavLinkItem, index_AdminPage as AdminPage, type index_AdminPageLinkOption as AdminPageLinkOption, type index_AdminPageRecord as AdminPageRecord, type index_AdminRole as AdminRole, type index_MediaDetailPanelProps as MediaDetailPanelProps, type index_MediaListItemProps as MediaListItemProps, type index_NestedNavItem as NestedNavItem, type index_NestedNavItemInput as NestedNavItemInput, type index_NestedNavTree as NestedNavTree, index_buildAdminPageLinkOptions as buildAdminPageLinkOptions, index_buildNestedNavTree as buildNestedNavTree, index_getAdminNavRows as getAdminNavRows, index_navItemIsActive as navItemIsActive, index_normalizeAdminNavInputs as normalizeAdminNavInputs, index_normalizeNestedNavItems as normalizeNestedNavItems, index_parseAdminHeaderNavFromForm as parseAdminHeaderNavFromForm, index_roleCanAccessNav as roleCanAccessNav };
 }
 
-export { type AdminBreadcrumbItem as A, type NestedNavItem as N, AdminBreadcrumbs as a, type AdminNavIcon as b, type AdminNavInput as c, type AdminNavItem as d, type AdminNavLinkItem as e, AdminPage as f, type AdminPageLinkOption as g, type AdminPageRecord as h, index as i, type AdminRole as j, type NestedNavItemInput as k, type NestedNavTree as l, buildAdminPageLinkOptions as m, buildNestedNavTree as n, getAdminNavRows as o, navItemIsActive as p, normalizeAdminNavInputs as q, normalizeNestedNavItems as r, parseAdminHeaderNavFromForm as s, roleCanAccessNav as t };
+export { type AdminBreadcrumbItem as A, type MediaDetailPanelProps as M, type NestedNavItem as N, AdminBreadcrumbs as a, type AdminNavIcon as b, type AdminNavInput as c, type AdminNavItem as d, type AdminNavLinkItem as e, AdminPage as f, type AdminPageLinkOption as g, type AdminPageRecord as h, index as i, type AdminRole as j, type MediaListItemProps as k, type NestedNavItemInput as l, type NestedNavTree as m, buildAdminPageLinkOptions as n, buildNestedNavTree as o, getAdminNavRows as p, navItemIsActive as q, normalizeAdminNavInputs as r, normalizeNestedNavItems as s, parseAdminHeaderNavFromForm as t, roleCanAccessNav as u };

package/dist/{index-TJmWr6aF.d.ts → index-ZbOx4OCF.d.ts}

@@ -31,6 +31,32 @@ type AdminPageProps = {
 };
 declare function AdminPage({ title, description, breadcrumbs, actions, children }: AdminPageProps): react_jsx_runtime.JSX.Element;
 
+type MediaDetailPanelProps = {
+    id: string;
+    filename?: string;
+    alt?: string;
+    url?: string;
+    filesize?: number;
+    width?: number;
+    height?: number;
+    mimeType?: string;
+    createdAt?: string;
+    updateAction: (formData: FormData) => void;
+    deleteAction: (formData: FormData) => void;
+};
+
+type MediaListItemProps = {
+    id: string;
+    filename?: string;
+    alt?: string;
+    url?: string;
+    filesize?: number;
+    width?: number;
+    height?: number;
+    mimeType?: string;
+    href: string;
+};
+
 type NestedNavItemInput = {
     href?: string;
     label?: string;
@@ -82,6 +108,8 @@ declare const index_AdminPage: typeof AdminPage;
 type index_AdminPageLinkOption = AdminPageLinkOption;
 type index_AdminPageRecord = AdminPageRecord;
 type index_AdminRole = AdminRole;
+type index_MediaDetailPanelProps = MediaDetailPanelProps;
+type index_MediaListItemProps = MediaListItemProps;
 type index_NestedNavItem = NestedNavItem;
 type index_NestedNavItemInput = NestedNavItemInput;
 type index_NestedNavTree = NestedNavTree;
@@ -94,7 +122,7 @@ declare const index_normalizeNestedNavItems: typeof normalizeNestedNavItems;
 declare const index_parseAdminHeaderNavFromForm: typeof parseAdminHeaderNavFromForm;
 declare const index_roleCanAccessNav: typeof roleCanAccessNav;
 declare namespace index {
-  export { type index_AdminBreadcrumbItem as AdminBreadcrumbItem, index_AdminBreadcrumbs as AdminBreadcrumbs, type index_AdminNavIcon as AdminNavIcon, type index_AdminNavInput as AdminNavInput, type index_AdminNavItem as AdminNavItem, type index_AdminNavLinkItem as AdminNavLinkItem, index_AdminPage as AdminPage, type index_AdminPageLinkOption as AdminPageLinkOption, type index_AdminPageRecord as AdminPageRecord, type index_AdminRole as AdminRole, type index_NestedNavItem as NestedNavItem, type index_NestedNavItemInput as NestedNavItemInput, type index_NestedNavTree as NestedNavTree, index_buildAdminPageLinkOptions as buildAdminPageLinkOptions, index_buildNestedNavTree as buildNestedNavTree, index_getAdminNavRows as getAdminNavRows, index_navItemIsActive as navItemIsActive, index_normalizeAdminNavInputs as normalizeAdminNavInputs, index_normalizeNestedNavItems as normalizeNestedNavItems, index_parseAdminHeaderNavFromForm as parseAdminHeaderNavFromForm, index_roleCanAccessNav as roleCanAccessNav };
+  export { type index_AdminBreadcrumbItem as AdminBreadcrumbItem, index_AdminBreadcrumbs as AdminBreadcrumbs, type index_AdminNavIcon as AdminNavIcon, type index_AdminNavInput as AdminNavInput, type index_AdminNavItem as AdminNavItem, type index_AdminNavLinkItem as AdminNavLinkItem, index_AdminPage as AdminPage, type index_AdminPageLinkOption as AdminPageLinkOption, type index_AdminPageRecord as AdminPageRecord, type index_AdminRole as AdminRole, type index_MediaDetailPanelProps as MediaDetailPanelProps, type index_MediaListItemProps as MediaListItemProps, type index_NestedNavItem as NestedNavItem, type index_NestedNavItemInput as NestedNavItemInput, type index_NestedNavTree as NestedNavTree, index_buildAdminPageLinkOptions as buildAdminPageLinkOptions, index_buildNestedNavTree as buildNestedNavTree, index_getAdminNavRows as getAdminNavRows, index_navItemIsActive as navItemIsActive, index_normalizeAdminNavInputs as normalizeAdminNavInputs, index_normalizeNestedNavItems as normalizeNestedNavItems, index_parseAdminHeaderNavFromForm as parseAdminHeaderNavFromForm, index_roleCanAccessNav as roleCanAccessNav };
 }
 
-export { type AdminBreadcrumbItem as A, type NestedNavItem as N, AdminBreadcrumbs as a, type AdminNavIcon as b, type AdminNavInput as c, type AdminNavItem as d, type AdminNavLinkItem as e, AdminPage as f, type AdminPageLinkOption as g, type AdminPageRecord as h, index as i, type AdminRole as j, type NestedNavItemInput as k, type NestedNavTree as l, buildAdminPageLinkOptions as m, buildNestedNavTree as n, getAdminNavRows as o, navItemIsActive as p, normalizeAdminNavInputs as q, normalizeNestedNavItems as r, parseAdminHeaderNavFromForm as s, roleCanAccessNav as t };
+export { type AdminBreadcrumbItem as A, type MediaDetailPanelProps as M, type NestedNavItem as N, AdminBreadcrumbs as a, type AdminNavIcon as b, type AdminNavInput as c, type AdminNavItem as d, type AdminNavLinkItem as e, AdminPage as f, type AdminPageLinkOption as g, type AdminPageRecord as h, index as i, type AdminRole as j, type MediaListItemProps as k, type NestedNavItemInput as l, type NestedNavTree as m, buildAdminPageLinkOptions as n, buildNestedNavTree as o, getAdminNavRows as p, navItemIsActive as q, normalizeAdminNavInputs as r, normalizeNestedNavItems as s, parseAdminHeaderNavFromForm as t, roleCanAccessNav as u };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { i as admin } from './index-Dj21uD_B.mjs';
-export { i as adminApp } from './index-TJmWr6aF.mjs';
+export { i as adminApp } from './index-ZbOx4OCF.mjs';
 export { i as blocks } from './index-CluwY0ZQ.mjs';
 export { i as nextjs } from './index-CpG3UHcS.mjs';
 export { i as studio } from './index-CmR6NInu.mjs';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { i as admin } from './index-Dj21uD_B.js';
-export { i as adminApp } from './index-TJmWr6aF.js';
+export { i as adminApp } from './index-ZbOx4OCF.js';
 export { i as blocks } from './index-CluwY0ZQ.js';
 export { i as nextjs } from './index-CpG3UHcS.js';
 export { i as studio } from './index-CmR6NInu.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.5.0-beta.51",
+  "version": "0.5.0-beta.53",
   "description": "Unified Payload CMS toolkit for Orion Studios",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",