@orion-studios/payload-studio 0.6.0-beta.133 → 0.6.0-beta.135

package/dist/admin/client.mjs

@@ -9,7 +9,7 @@ import {
   SiteFooterPreview,
   adminNavIcons,
   buildAdminPageLinkOptions
-} from "../chunk-KOBQX2HL.mjs";
+} from "../chunk-NF37A575.mjs";
 import "../chunk-ROTPP5CU.mjs";
 import {
   BlockPicker,

package/dist/admin-app/client.mjs

@@ -8,7 +8,7 @@ import {
   MediaUploadForm,
   SiteFooterPreview,
   SiteHeaderPreview
-} from "../chunk-KOBQX2HL.mjs";
+} from "../chunk-NF37A575.mjs";
 import "../chunk-ROTPP5CU.mjs";
 
 // src/admin-app/components/PageEditorFrame.tsx

package/dist/builder-v2/client.js

@@ -1314,7 +1314,7 @@ var decorateBuilderSettingHelp = (root = document) => {
       trigger.className = "orion-builder-v2-help-trigger";
       trigger.dataset.builderHelpText = help;
       trigger.role = "button";
-      trigger.tabIndex = 0;
+      trigger.tabIndex = -1;
       trigger.textContent = "?";
       element.appendChild(trigger);
     }
@@ -1356,6 +1356,7 @@ var decorateBuilderColorEyeDroppers = (root = document) => {
     button.dataset.orionColorEyedropper = "true";
     button.setAttribute("aria-label", "Pick color from screen");
     button.setAttribute("title", "Pick color from screen");
+    button.tabIndex = -1;
     button.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 4.3a2.4 2.4 0 0 1 3.4 0l1.6 1.6a2.4 2.4 0 0 1 0 3.4l-1.2 1.2 1 1a1 1 0 1 1-1.4 1.4l-1-1-8.9 8.9H4v-4.2l8.9-8.9-1-1a1 1 0 0 1 1.4-1.4l1 1 1.4-1.4Zm-.4 4.8-8.3 8.3V19h1.6l8.3-8.3-1.6-1.6Z" fill="currentColor"/></svg>';
     swatch.insertAdjacentElement("afterend", button);
   });
@@ -1373,6 +1374,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
       return;
     }
     field.classList.add("has-orion-builder-stepper");
+    field.querySelector("select")?.setAttribute("tabindex", "-1");
     const stepper = document.createElement("span");
     stepper.className = "orion-builder-v2-stepper";
     const updateValue = (direction) => {
@@ -1390,6 +1392,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
       button.type = "button";
       button.className = `orion-builder-v2-stepper-button ${step.className}`;
       button.setAttribute("aria-label", `${step.label} ${property.replace(/-/g, " ")}`);
+      button.tabIndex = -1;
       button.textContent = step.text;
       button.addEventListener("click", (event) => {
         event.preventDefault();
@@ -2142,6 +2145,7 @@ function GrapesPageEditor({
   const stylePanelEditActiveRef = (0, import_react.useRef)(false);
   const historyRestoreActiveRef = (0, import_react.useRef)(false);
   const stylePanelHistoryBeforeRef = (0, import_react.useRef)(null);
+  const historyReadyRef = (0, import_react.useRef)(false);
   const lastComponentSnapshotRef = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
   const customUndoStackRef = (0, import_react.useRef)([]);
   const customRedoStackRef = (0, import_react.useRef)([]);
@@ -2761,6 +2765,12 @@ function GrapesPageEditor({
     }
     callback();
   };
+  const clearNativeUndoHistory = () => {
+    const undoManager = editorRef.current?.UndoManager;
+    if (typeof undoManager?.clear === "function") {
+      undoManager.clear();
+    }
+  };
   const isComponentAttached = (component) => Boolean(component.parent?.());
   const addComponentFromSnapshot = (snapshot) => {
     const parent = snapshot.parent;
@@ -2830,6 +2840,7 @@ function GrapesPageEditor({
     }
     customUndoStackRef.current.push({ after, before });
     customRedoStackRef.current = [];
+    clearNativeUndoHistory();
     if (after) {
       lastComponentSnapshotRef.current.set(after.component, after);
     }
@@ -3095,8 +3106,18 @@ function GrapesPageEditor({
           registerOrionBuilderV2Blocks(editor);
         }
         registerProjectDynamicComponents(editor, adapter);
+        historyReadyRef.current = false;
         editor.loadProjectData(projectData);
         void loadPayloadMediaAssets(editor);
+        window.setTimeout(() => {
+          customUndoStackRef.current = [];
+          customRedoStackRef.current = [];
+          lastComponentSnapshotRef.current = /* @__PURE__ */ new WeakMap();
+          clearNativeUndoHistory();
+          editor.clearDirtyCount?.();
+          updateHistoryState(editor);
+          historyReadyRef.current = true;
+        }, 0);
         editor.on("update", () => {
           const hasDirtyChanges = editor.getDirtyCount() > 0;
           refreshSelectedState(selectedComponentRef.current);
@@ -3115,6 +3136,9 @@ function GrapesPageEditor({
           }, autosaveIntervalMs);
         });
         editor.on("orion:component-history", (entry) => {
+          if (!historyReadyRef.current) {
+            return;
+          }
           if (!entry || typeof entry !== "object" || !("component" in entry) || !("before" in entry) || !("after" in entry)) {
             return;
           }
@@ -3136,7 +3160,7 @@ function GrapesPageEditor({
           );
         });
         editor.on("component:add", (component) => {
-          if (historyRestoreActiveRef.current) {
+          if (!historyReadyRef.current || historyRestoreActiveRef.current) {
             return;
           }
           const typed = component;
@@ -3144,7 +3168,7 @@ function GrapesPageEditor({
             return;
           }
           window.setTimeout(() => {
-            if (historyRestoreActiveRef.current) {
+            if (!historyReadyRef.current || historyRestoreActiveRef.current) {
               return;
             }
             pushCustomHistoryEntry(null, snapshotComponent(typed));

package/dist/builder-v2/client.mjs

@@ -1190,7 +1190,7 @@ var decorateBuilderSettingHelp = (root = document) => {
       trigger.className = "orion-builder-v2-help-trigger";
       trigger.dataset.builderHelpText = help;
       trigger.role = "button";
-      trigger.tabIndex = 0;
+      trigger.tabIndex = -1;
       trigger.textContent = "?";
       element.appendChild(trigger);
     }
@@ -1232,6 +1232,7 @@ var decorateBuilderColorEyeDroppers = (root = document) => {
     button.dataset.orionColorEyedropper = "true";
     button.setAttribute("aria-label", "Pick color from screen");
     button.setAttribute("title", "Pick color from screen");
+    button.tabIndex = -1;
     button.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 4.3a2.4 2.4 0 0 1 3.4 0l1.6 1.6a2.4 2.4 0 0 1 0 3.4l-1.2 1.2 1 1a1 1 0 1 1-1.4 1.4l-1-1-8.9 8.9H4v-4.2l8.9-8.9-1-1a1 1 0 0 1 1.4-1.4l1 1 1.4-1.4Zm-.4 4.8-8.3 8.3V19h1.6l8.3-8.3-1.6-1.6Z" fill="currentColor"/></svg>';
     swatch.insertAdjacentElement("afterend", button);
   });
@@ -1249,6 +1250,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
       return;
     }
     field.classList.add("has-orion-builder-stepper");
+    field.querySelector("select")?.setAttribute("tabindex", "-1");
     const stepper = document.createElement("span");
     stepper.className = "orion-builder-v2-stepper";
     const updateValue = (direction) => {
@@ -1266,6 +1268,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
       button.type = "button";
       button.className = `orion-builder-v2-stepper-button ${step.className}`;
       button.setAttribute("aria-label", `${step.label} ${property.replace(/-/g, " ")}`);
+      button.tabIndex = -1;
       button.textContent = step.text;
       button.addEventListener("click", (event) => {
         event.preventDefault();
@@ -2018,6 +2021,7 @@ function GrapesPageEditor({
   const stylePanelEditActiveRef = useRef(false);
   const historyRestoreActiveRef = useRef(false);
   const stylePanelHistoryBeforeRef = useRef(null);
+  const historyReadyRef = useRef(false);
   const lastComponentSnapshotRef = useRef(/* @__PURE__ */ new WeakMap());
   const customUndoStackRef = useRef([]);
   const customRedoStackRef = useRef([]);
@@ -2637,6 +2641,12 @@ function GrapesPageEditor({
     }
     callback();
   };
+  const clearNativeUndoHistory = () => {
+    const undoManager = editorRef.current?.UndoManager;
+    if (typeof undoManager?.clear === "function") {
+      undoManager.clear();
+    }
+  };
   const isComponentAttached = (component) => Boolean(component.parent?.());
   const addComponentFromSnapshot = (snapshot) => {
     const parent = snapshot.parent;
@@ -2706,6 +2716,7 @@ function GrapesPageEditor({
     }
     customUndoStackRef.current.push({ after, before });
     customRedoStackRef.current = [];
+    clearNativeUndoHistory();
     if (after) {
       lastComponentSnapshotRef.current.set(after.component, after);
     }
@@ -2971,8 +2982,18 @@ function GrapesPageEditor({
           registerOrionBuilderV2Blocks(editor);
         }
         registerProjectDynamicComponents(editor, adapter);
+        historyReadyRef.current = false;
         editor.loadProjectData(projectData);
         void loadPayloadMediaAssets(editor);
+        window.setTimeout(() => {
+          customUndoStackRef.current = [];
+          customRedoStackRef.current = [];
+          lastComponentSnapshotRef.current = /* @__PURE__ */ new WeakMap();
+          clearNativeUndoHistory();
+          editor.clearDirtyCount?.();
+          updateHistoryState(editor);
+          historyReadyRef.current = true;
+        }, 0);
         editor.on("update", () => {
           const hasDirtyChanges = editor.getDirtyCount() > 0;
           refreshSelectedState(selectedComponentRef.current);
@@ -2991,6 +3012,9 @@ function GrapesPageEditor({
           }, autosaveIntervalMs);
         });
         editor.on("orion:component-history", (entry) => {
+          if (!historyReadyRef.current) {
+            return;
+          }
           if (!entry || typeof entry !== "object" || !("component" in entry) || !("before" in entry) || !("after" in entry)) {
             return;
           }
@@ -3012,7 +3036,7 @@ function GrapesPageEditor({
           );
         });
         editor.on("component:add", (component) => {
-          if (historyRestoreActiveRef.current) {
+          if (!historyReadyRef.current || historyRestoreActiveRef.current) {
             return;
           }
           const typed = component;
@@ -3020,7 +3044,7 @@ function GrapesPageEditor({
             return;
           }
           window.setTimeout(() => {
-            if (historyRestoreActiveRef.current) {
+            if (!historyReadyRef.current || historyRestoreActiveRef.current) {
               return;
             }
             pushCustomHistoryEntry(null, snapshotComponent(typed));

package/dist/{chunk-KOBQX2HL.mjs → chunk-NF37A575.mjs}

@@ -734,124 +734,13 @@ function HeaderNavEditorWithPreview({
   ] });
 }
 
-// src/admin-app/components/MediaDetailPanel.tsx
-import { useState as useState4 } from "react";
+// src/admin-app/components/MediaListItem.tsx
 import { jsx as jsx5, jsxs as jsxs5 } 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__ */ jsxs5("div", { className: "orion-admin-grid", style: { alignItems: "start" }, children: [
-    /* @__PURE__ */ jsxs5("div", { children: [
-      /* @__PURE__ */ jsx5("div", { className: "orion-admin-card", children: url ? /* @__PURE__ */ jsx5("img", { alt: alt || filename || "Media", src: url, style: { borderRadius: 12, width: "100%" } }) : /* @__PURE__ */ jsx5("span", { children: "No preview available." }) }),
-      url ? /* @__PURE__ */ jsx5(
-        "button",
-        {
-          className: "orion-admin-action-button",
-          onClick: copyUrl,
-          style: { marginTop: "0.6rem", width: "100%" },
-          type: "button",
-          children: copied ? "Copied!" : "Copy URL"
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: "0.8rem" }, children: [
-      metaRows.length > 0 ? /* @__PURE__ */ jsx5("div", { className: "orion-admin-card orion-admin-meta-table", children: metaRows.map((row) => /* @__PURE__ */ jsxs5("div", { className: "orion-admin-meta-row", children: [
-        /* @__PURE__ */ jsx5("span", { className: "orion-admin-meta-label", children: row.label }),
-        /* @__PURE__ */ jsx5("span", { className: "orion-admin-meta-value", children: row.value })
-      ] }, row.label)) }) : null,
-      /* @__PURE__ */ jsxs5("form", { action: updateAction, className: "orion-admin-form", children: [
-        /* @__PURE__ */ jsx5("input", { name: "id", type: "hidden", value: id }),
-        /* @__PURE__ */ jsxs5("label", { children: [
-          "Alt text",
-          /* @__PURE__ */ jsx5("input", { defaultValue: alt || "", name: "alt", required: true, type: "text" })
-        ] }),
-        /* @__PURE__ */ jsx5("button", { type: "submit", children: "Save" })
-      ] }),
-      confirmDelete ? /* @__PURE__ */ jsxs5("div", { className: "orion-admin-form", style: { borderColor: "#b42318" }, children: [
-        /* @__PURE__ */ jsx5("p", { style: { fontWeight: 700, margin: 0 }, children: "Are you sure you want to delete this asset?" }),
-        /* @__PURE__ */ jsx5("p", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", margin: 0 }, children: "This action cannot be undone." }),
-        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "0.5rem" }, children: [
-          /* @__PURE__ */ jsxs5("form", { action: deleteAction, style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsx5("input", { name: "id", type: "hidden", value: id }),
-            /* @__PURE__ */ jsx5("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__ */ jsx5(
-            "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__ */ jsx5(
-        "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 jsx6, jsxs as jsxs6 } 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,
@@ -866,26 +755,26 @@ function MediaListItem({
   const label = filename || `Media ${id}`;
   const altText = alt || "";
   const metaParts = [];
-  if (typeof filesize === "number") metaParts.push(formatFileSize2(filesize));
+  if (typeof filesize === "number") metaParts.push(formatFileSize(filesize));
   if (typeof width === "number" && typeof height === "number") metaParts.push(`${width}\xD7${height}`);
   if (typeof mimeType === "string") metaParts.push(mimeType);
-  return /* @__PURE__ */ jsxs6("a", { className: "orion-admin-list-item", href, children: [
-    /* @__PURE__ */ jsxs6("div", { style: { alignItems: "center", display: "flex", gap: "0.8rem" }, children: [
-      url ? /* @__PURE__ */ jsx6("img", { alt: altText || label, className: "orion-admin-media-preview", src: url }) : null,
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6("strong", { children: label }),
-        /* @__PURE__ */ jsx6("div", { className: "orion-admin-list-meta", children: altText || "No alt text" }),
-        metaParts.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "orion-admin-list-meta", style: { marginTop: "0.15rem" }, children: metaParts.join(" \xB7 ") }) : null
+  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__ */ jsx6("span", { className: "orion-admin-list-meta", children: "Edit" })
+    /* @__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 { useState as useState4, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
 var notifyMediaLibraryUpdated = () => {
   if (typeof window === "undefined") {
@@ -926,12 +815,12 @@ var parseUploadError = async (response) => {
 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 [alt, setAlt] = useState4("");
+  const [file, setFile] = useState4(null);
+  const [preview, setPreview] = useState4(null);
+  const [dragging, setDragging] = useState4(false);
+  const [submitting, setSubmitting] = useState4(false);
+  const [error, setError] = useState4(null);
   const handleFile = useCallback((selectedFile) => {
     setFile(selectedFile);
     if (preview) {
@@ -999,10 +888,10 @@ function MediaUploadForm() {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxs7("form", { className: "orion-admin-upload-form", onSubmit: upload, children: [
-    /* @__PURE__ */ jsxs7("label", { children: [
+  return /* @__PURE__ */ jsxs6("form", { className: "orion-admin-upload-form", onSubmit: upload, children: [
+    /* @__PURE__ */ jsxs6("label", { children: [
       "Alt text",
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx6(
         "input",
         {
           onChange: (event) => setAlt(event.target.value),
@@ -1012,7 +901,7 @@ function MediaUploadForm() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs6(
       "div",
       {
         className: `orion-admin-dropzone${dragging ? " is-dragging" : ""}${file ? " has-file" : ""}`,
@@ -1021,14 +910,14 @@ function MediaUploadForm() {
         onDragOver,
         onDrop,
         children: [
-          preview ? /* @__PURE__ */ jsxs7("div", { className: "orion-admin-dropzone-preview", children: [
-            /* @__PURE__ */ jsx7("img", { alt: "Upload preview", src: preview }),
-            /* @__PURE__ */ jsx7("span", { children: file?.name })
-          ] }) : /* @__PURE__ */ jsxs7("div", { className: "orion-admin-dropzone-label", children: [
-            /* @__PURE__ */ jsx7("strong", { children: "Drop an image here" }),
-            /* @__PURE__ */ jsx7("span", { children: "or click to browse" })
+          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__ */ jsx7(
+          /* @__PURE__ */ jsx6(
             "input",
             {
               accept: "image/*",
@@ -1041,8 +930,119 @@ function MediaUploadForm() {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx7("div", { className: "orion-admin-upload-error", children: error }) : null,
-    /* @__PURE__ */ jsx7("button", { disabled: submitting, type: "submit", children: submitting ? "Uploading..." : "Upload" })
+    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/MediaDetailPanel.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } 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 MediaDetailPanel({
+  id,
+  filename,
+  alt,
+  url,
+  filesize,
+  width,
+  height,
+  mimeType,
+  createdAt,
+  updateAction,
+  deleteAction
+}) {
+  const [copied, setCopied] = useState5(false);
+  const [confirmDelete, setConfirmDelete] = useState5(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: formatFileSize2(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__ */ jsxs7("div", { className: "orion-admin-grid", style: { alignItems: "start" }, children: [
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx7("div", { className: "orion-admin-card", children: url ? /* @__PURE__ */ jsx7("img", { alt: alt || filename || "Media", src: url, style: { borderRadius: 12, width: "100%" } }) : /* @__PURE__ */ jsx7("span", { children: "No preview available." }) }),
+      url ? /* @__PURE__ */ jsx7(
+        "button",
+        {
+          className: "orion-admin-action-button",
+          onClick: copyUrl,
+          style: { marginTop: "0.6rem", width: "100%" },
+          type: "button",
+          children: copied ? "Copied!" : "Copy URL"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+      metaRows.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "orion-admin-card orion-admin-meta-table", children: metaRows.map((row) => /* @__PURE__ */ jsxs7("div", { className: "orion-admin-meta-row", children: [
+        /* @__PURE__ */ jsx7("span", { className: "orion-admin-meta-label", children: row.label }),
+        /* @__PURE__ */ jsx7("span", { className: "orion-admin-meta-value", children: row.value })
+      ] }, row.label)) }) : null,
+      /* @__PURE__ */ jsxs7("form", { action: updateAction, className: "orion-admin-form", children: [
+        /* @__PURE__ */ jsx7("input", { name: "id", type: "hidden", value: id }),
+        /* @__PURE__ */ jsxs7("label", { children: [
+          "Alt text",
+          /* @__PURE__ */ jsx7("input", { defaultValue: alt || "", name: "alt", required: true, type: "text" })
+        ] }),
+        /* @__PURE__ */ jsx7("button", { type: "submit", children: "Save" })
+      ] }),
+      confirmDelete ? /* @__PURE__ */ jsxs7("div", { className: "orion-admin-form", style: { borderColor: "#b42318" }, children: [
+        /* @__PURE__ */ jsx7("p", { style: { fontWeight: 700, margin: 0 }, children: "Are you sure you want to delete this asset?" }),
+        /* @__PURE__ */ jsx7("p", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", margin: 0 }, children: "This action cannot be undone." }),
+        /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ jsxs7("form", { action: deleteAction, style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx7("input", { name: "id", type: "hidden", value: id }),
+            /* @__PURE__ */ jsx7("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__ */ jsx7(
+            "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__ */ jsx7(
+        "button",
+        {
+          className: "orion-admin-action-button",
+          onClick: () => setConfirmDelete(true),
+          style: { background: "#b42318" },
+          type: "button",
+          children: "Delete Asset"
+        }
+      )
+    ] })
   ] });
 }
 
@@ -1054,7 +1054,7 @@ export {
   SiteHeaderPreview,
   SiteFooterPreview,
   HeaderNavEditorWithPreview,
-  MediaDetailPanel,
   MediaListItem,
-  MediaUploadForm
+  MediaUploadForm,
+  MediaDetailPanel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.133",
+  "version": "0.6.0-beta.135",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",