@orion-studios/payload-studio 0.5.0-beta.7 → 0.5.0-beta.70

package/dist/admin-app/client.js

@@ -21,7 +21,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/admin-app/client.ts
 var client_exports = {};
 __export(client_exports, {
-  AdminShellClient: () => AdminShellClient
+  AdminShellClient: () => AdminShellClient,
+  HeaderNavEditorWithPreview: () => HeaderNavEditorWithPreview,
+  HeaderNavItemsEditor: () => HeaderNavItemsEditor,
+  MediaDetailPanel: () => MediaDetailPanel,
+  MediaListItem: () => MediaListItem,
+  MediaUploadForm: () => MediaUploadForm,
+  PageEditorFrame: () => PageEditorFrame
 });
 module.exports = __toCommonJS(client_exports);
 
@@ -47,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,
@@ -114,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
         );
@@ -130,7 +180,1216 @@ function AdminShellClient({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "orion-admin-main", children })
   ] });
 }
+
+// src/admin-app/components/HeaderNavItemsEditor.tsx
+var import_react2 = require("react");
+
+// src/admin-app/navigationLinks.ts
+var normalizeAdminNavInputs = (rows, pageOptions) => {
+  const allowedLinks = new Map(pageOptions.map((option) => [option.href, option.title]));
+  const deduped = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const row of rows) {
+    const href = typeof row.href === "string" ? row.href.trim() : "";
+    const defaultLabel = allowedLinks.get(href);
+    const explicitLabel = typeof row.label === "string" ? row.label.trim() : "";
+    const parentHref = typeof row.parentHref === "string" ? row.parentHref.trim() : "";
+    if (!href || !defaultLabel || seen.has(href)) {
+      continue;
+    }
+    seen.add(href);
+    deduped.push({
+      href,
+      label: explicitLabel.length > 0 ? explicitLabel : defaultLabel,
+      ...parentHref.length > 0 ? { parentHref } : {}
+    });
+  }
+  const hrefs = new Set(deduped.map((item) => item.href));
+  const parentByHref = new Map(deduped.map((item) => [item.href, item.parentHref || ""]));
+  const createsCycle = (href, parentHref) => {
+    const visited = /* @__PURE__ */ new Set([href]);
+    let current = parentHref;
+    while (current) {
+      if (visited.has(current)) {
+        return true;
+      }
+      visited.add(current);
+      current = parentByHref.get(current) || "";
+    }
+    return false;
+  };
+  return deduped.map((item) => {
+    const parentHref = item.parentHref;
+    if (!parentHref || parentHref === item.href || !hrefs.has(parentHref) || createsCycle(item.href, parentHref)) {
+      return {
+        href: item.href,
+        label: item.label
+      };
+    }
+    return item;
+  });
+};
+
+// src/admin-app/components/HeaderNavItemsEditor.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var toRow = (item, index) => ({
+  id: `row-${index}-${item.href || "empty"}`,
+  href: item.href || "",
+  label: item.label || "",
+  parentHref: item.parentHref || ""
+});
+var moveRow = (rows, fromIndex, toIndex) => {
+  if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= rows.length || toIndex >= rows.length) {
+    return rows;
+  }
+  const next = [...rows];
+  const [moved] = next.splice(fromIndex, 1);
+  if (!moved) {
+    return rows;
+  }
+  next.splice(toIndex, 0, moved);
+  return next;
+};
+function HeaderNavItemsEditor({ initialItems, pageOptions, onItemsChange }) {
+  const [rows, setRows] = (0, import_react2.useState)(() => initialItems.map(toRow));
+  const [nextRowID, setNextRowID] = (0, import_react2.useState)(initialItems.length);
+  const [draggingRowID, setDraggingRowID] = (0, import_react2.useState)(null);
+  const [dragOverRowID, setDragOverRowID] = (0, import_react2.useState)(null);
+  const pageOptionByHref = (0, import_react2.useMemo)(() => new Map(pageOptions.map((option) => [option.href, option])), [pageOptions]);
+  const serializedState = (0, import_react2.useMemo)(
+    () => JSON.stringify(
+      rows.map((row) => ({
+        href: row.href.trim(),
+        label: row.label.trim(),
+        parentHref: row.parentHref.trim() || void 0
+      }))
+    ),
+    [rows]
+  );
+  const normalizedItems = (0, import_react2.useMemo)(() => {
+    const inputs = rows.map((row) => ({
+      href: row.href,
+      label: row.label,
+      parentHref: row.parentHref
+    }));
+    return normalizeAdminNavInputs(inputs, pageOptions);
+  }, [rows, pageOptions]);
+  (0, import_react2.useEffect)(() => {
+    onItemsChange?.(normalizedItems);
+  }, [normalizedItems, onItemsChange]);
+  const setRowValue = (rowID, changes) => {
+    setRows(
+      (currentRows) => currentRows.map((row) => {
+        if (row.id !== rowID) {
+          return row;
+        }
+        const nextRow = { ...row, ...changes };
+        if (nextRow.parentHref === nextRow.href) {
+          nextRow.parentHref = "";
+        }
+        return nextRow;
+      })
+    );
+  };
+  const removeRow = (rowID) => {
+    setRows((currentRows) => {
+      const removedRow = currentRows.find((candidate) => candidate.id === rowID);
+      const removedHref = removedRow?.href || "";
+      return currentRows.filter((row) => row.id !== rowID).map((row) => removedHref && row.parentHref === removedHref ? { ...row, parentHref: "" } : row);
+    });
+  };
+  const addRow = () => {
+    setRows((currentRows) => [
+      ...currentRows,
+      {
+        id: `row-new-${nextRowID}`,
+        href: "",
+        label: "",
+        parentHref: ""
+      }
+    ]);
+    setNextRowID((current) => current + 1);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "orion-admin-nav-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { name: "navItemsState", readOnly: true, type: "hidden", value: serializedState }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "orion-admin-nav-editor-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "orion-admin-nav-editor-title", children: "Navigation Items" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "orion-admin-nav-editor-add", onClick: addRow, type: "button", children: "Add Item" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "orion-admin-nav-editor-help", children: "Add only links you want in the menu. Drag rows to reorder. Set a parent to create dropdown items." }),
+    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "orion-admin-nav-editor-empty", children: 'No navigation items yet. Click "Add Item" to start.' }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "orion-admin-nav-editor-list", children: rows.map((row, rowIndex) => {
+      const parentCandidates = rows.filter((candidate) => candidate.id !== row.id && candidate.href.trim().length > 0).map((candidate) => {
+        const resolved = pageOptionByHref.get(candidate.href);
+        return {
+          href: candidate.href,
+          label: candidate.label.trim() || resolved?.title || candidate.href
+        };
+      });
+      const selectedPage = pageOptionByHref.get(row.href);
+      const labelPlaceholder = selectedPage?.title || "Navigation Label";
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: `orion-admin-nav-editor-row${draggingRowID === row.id ? " is-dragging" : ""}${dragOverRowID === row.id && draggingRowID !== row.id ? " is-drop-target" : ""}`,
+          draggable: true,
+          onDragEnd: () => {
+            setDraggingRowID(null);
+            setDragOverRowID(null);
+          },
+          onDragEnter: () => {
+            if (draggingRowID && draggingRowID !== row.id) {
+              setDragOverRowID(row.id);
+            }
+          },
+          onDragLeave: () => {
+            if (dragOverRowID === row.id) {
+              setDragOverRowID(null);
+            }
+          },
+          onDragOver: (event) => {
+            event.preventDefault();
+            if (draggingRowID && draggingRowID !== row.id && dragOverRowID !== row.id) {
+              setDragOverRowID(row.id);
+            }
+          },
+          onDragStart: (event) => {
+            setDraggingRowID(row.id);
+            event.dataTransfer.effectAllowed = "move";
+          },
+          onDrop: (event) => {
+            event.preventDefault();
+            if (!draggingRowID || draggingRowID === row.id) {
+              return;
+            }
+            setRows((currentRows) => {
+              const fromIndex = currentRows.findIndex((entry) => entry.id === draggingRowID);
+              const toIndex = currentRows.findIndex((entry) => entry.id === row.id);
+              return moveRow(currentRows, fromIndex, toIndex);
+            });
+            setDraggingRowID(null);
+            setDragOverRowID(null);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "orion-admin-nav-editor-row-head", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "orion-admin-nav-editor-drag", children: "Drag" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "orion-admin-nav-editor-row-index", children: [
+                "#",
+                rowIndex + 1
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "orion-admin-nav-editor-remove", onClick: () => removeRow(row.id), type: "button", children: "Remove" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "orion-admin-nav-editor-row-grid", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+                "Label",
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "input",
+                  {
+                    name: `navLabel_${rowIndex}`,
+                    onChange: (event) => setRowValue(row.id, { label: event.target.value }),
+                    placeholder: labelPlaceholder,
+                    type: "text",
+                    value: row.label
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+                "Page",
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "select",
+                  {
+                    name: `navPage_${rowIndex}`,
+                    onChange: (event) => {
+                      const nextHref = event.target.value;
+                      const nextParent = row.parentHref && row.parentHref === nextHref ? "" : row.parentHref;
+                      setRowValue(row.id, { href: nextHref, parentHref: nextParent });
+                    },
+                    value: row.href,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "Select page..." }),
+                      pageOptions.map((pageOption) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: pageOption.href, children: pageOption.label }, `${pageOption.href}-${pageOption.title}`))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+                "Parent (dropdown under)",
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "select",
+                  {
+                    name: `navParentHref_${rowIndex}`,
+                    onChange: (event) => setRowValue(row.id, { parentHref: event.target.value }),
+                    value: row.parentHref,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "Top-level item" }),
+                      parentCandidates.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: candidate.href, children: candidate.label }, `${row.id}-parent-${candidate.href}`))
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        row.id
+      );
+    }) })
+  ] });
+}
+
+// src/admin-app/components/HeaderNavEditorWithPreview.tsx
+var import_react3 = require("react");
+
+// src/admin-app/nestedNavigation.ts
+var normalizeNestedNavItems = (items) => {
+  const deduped = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    const href = typeof item.href === "string" ? item.href.trim() : "";
+    const label = typeof item.label === "string" ? item.label.trim() : "";
+    const parentHref = typeof item.parentHref === "string" ? item.parentHref.trim() : "";
+    if (!href || !label || seen.has(href)) {
+      continue;
+    }
+    seen.add(href);
+    deduped.push({
+      href,
+      label,
+      ...parentHref ? { parentHref } : {}
+    });
+  }
+  const hrefs = new Set(deduped.map((item) => item.href));
+  return deduped.map((item) => ({
+    href: item.href,
+    label: item.label,
+    ...item.parentHref && item.parentHref !== item.href && hrefs.has(item.parentHref) ? { parentHref: item.parentHref } : {}
+  }));
+};
+var buildNestedNavTree = (items) => {
+  const childrenByParent = /* @__PURE__ */ new Map();
+  const topLevel = [];
+  for (const item of items) {
+    if (!item.parentHref) {
+      topLevel.push(item);
+      continue;
+    }
+    const children = childrenByParent.get(item.parentHref) || [];
+    children.push(item);
+    childrenByParent.set(item.parentHref, children);
+  }
+  if (topLevel.length === 0 && items.length > 0) {
+    return {
+      topLevel: items.map((item) => ({ href: item.href, label: item.label })),
+      childrenByParent: /* @__PURE__ */ new Map()
+    };
+  }
+  return { childrenByParent, topLevel };
+};
+
+// src/admin-app/components/HeaderNavEditorWithPreview.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var fallbackNav = [{ href: "/", label: "Home" }];
+function HeaderNavEditorWithPreview({
+  brandName,
+  initialItems,
+  logoUrl,
+  pageOptions,
+  tagline = ""
+}) {
+  const [liveItems, setLiveItems] = (0, import_react3.useState)(initialItems);
+  const previewItems = (0, import_react3.useMemo)(() => {
+    const normalized = normalizeNestedNavItems(liveItems);
+    const tree = buildNestedNavTree(normalized);
+    return tree.topLevel.length > 0 ? tree : buildNestedNavTree(fallbackNav);
+  }, [liveItems]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HeaderNavItemsEditor, { initialItems, onItemsChange: setLiveItems, pageOptions }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#5d6664", fontSize: "0.88rem", fontWeight: 700 }, children: "Header Preview" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          border: "1px solid #dce2e0",
+          borderRadius: 14,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("header", { className: "site-header", style: { position: "relative", top: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "container container-content header-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("a", { className: "brand", href: "#", children: [
+            logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { alt: `${brandName} logo`, src: logoUrl }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "brand-title", children: brandName }),
+              tagline ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "brand-subtitle", children: tagline }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { className: "site-nav open", children: previewItems.topLevel.map((item, index) => {
+            const children = previewItems.childrenByParent.get(item.href) || [];
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                className: children.length > 0 ? "site-nav-item has-children" : "site-nav-item",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: index === 0 ? "active" : "", href: item.href, children: item.label }),
+                  children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "site-subnav", children: children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: child.href, children: child.label }, `${item.href}-${child.href}`)) }) : null
+                ]
+              },
+              `${item.href}-${index}`
+            );
+          }) })
+        ] }) })
+      }
+    )
+  ] });
+}
+
+// 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");
+
+// src/shared/clientImageUploadOptimization.ts
+var MAX_DIRECT_UPLOAD_BYTES = 4e6;
+var extensionForMimeType = (mimeType) => {
+  switch (mimeType) {
+    case "image/webp":
+      return ".webp";
+    case "image/png":
+      return ".png";
+    default:
+      return ".jpg";
+  }
+};
+var detectCanvasTransparency = (context, width, height) => {
+  try {
+    const { data } = context.getImageData(0, 0, width, height);
+    for (let index = 3; index < data.length; index += 4) {
+      if (data[index] < 255) {
+        return true;
+      }
+    }
+  } catch {
+  }
+  return false;
+};
+var resolveOutputMimeTypes = (sourceMime, hasTransparency) => {
+  const candidates = [];
+  if (hasTransparency) {
+    candidates.push("image/webp", "image/png");
+  } else if (sourceMime === "image/webp") {
+    candidates.push("image/webp", "image/jpeg");
+  } else if (sourceMime === "image/png") {
+    candidates.push("image/webp", "image/jpeg", "image/png");
+  } else {
+    candidates.push("image/jpeg", "image/webp");
+  }
+  return [...new Set(candidates)];
+};
+async function optimizeImageForUpload(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  const objectURL = URL.createObjectURL(file);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
+      nextImage.src = objectURL;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, image.width);
+    canvas.height = Math.max(1, image.height);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return file;
+    }
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const sourceMime = file.type.toLowerCase();
+    const hasTransparency = detectCanvasTransparency(context, canvas.width, canvas.height);
+    const outputMimes = resolveOutputMimeTypes(sourceMime, hasTransparency);
+    const qualityPasses = [0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.36, 0.3, 0.26];
+    let bestFile = null;
+    for (const outputMime of outputMimes) {
+      const passes = outputMime === "image/png" ? [void 0] : qualityPasses;
+      for (const quality of passes) {
+        const blob = await new Promise((resolve) => {
+          canvas.toBlob((value) => resolve(value), outputMime, quality);
+        });
+        if (!blob) {
+          continue;
+        }
+        const optimizedName = file.name.replace(/\.[^/.]+$/, extensionForMimeType(outputMime));
+        const optimized = new File([blob], optimizedName, {
+          lastModified: Date.now(),
+          type: outputMime
+        });
+        if (!bestFile || optimized.size < bestFile.size) {
+          bestFile = optimized;
+        }
+        if (optimized.size <= MAX_DIRECT_UPLOAD_BYTES) {
+          break;
+        }
+      }
+    }
+    if (!bestFile) {
+      return file;
+    }
+    return bestFile.size < file.size ? bestFile : file;
+  } finally {
+    URL.revokeObjectURL(objectURL);
+  }
+}
+
+// src/admin-app/components/MediaUploadForm.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
+var notifyMediaLibraryUpdated = () => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const updatedAt = Date.now().toString();
+  window.dispatchEvent(
+    new CustomEvent(MEDIA_LIBRARY_SYNC_EVENT, {
+      detail: {
+        updatedAt
+      }
+    })
+  );
+  try {
+    window.localStorage.setItem(MEDIA_LIBRARY_SYNC_EVENT, updatedAt);
+  } catch {
+  }
+};
+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 optimizedFile = await optimizeImageForUpload(file);
+      if (optimizedFile.size > MAX_DIRECT_UPLOAD_BYTES) {
+        throw new Error("Image is too large. Use an image under 4MB or lower-resolution export.");
+      }
+      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", optimizedFile);
+      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);
+      }
+      notifyMediaLibraryUpdated();
+      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");
+var extractPageIDFromBuilderSrc = (value) => {
+  if (!value || typeof value !== "string") {
+    return null;
+  }
+  try {
+    const url = new URL(value, "http://localhost");
+    const segments = url.pathname.split("/").filter(Boolean);
+    return segments.length > 0 ? segments[segments.length - 1] || null : null;
+  } catch {
+    return null;
+  }
+};
+function PageEditorFrame({ src }) {
+  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 [hasUnpublishedChanges, setHasUnpublishedChanges] = (0, import_react6.useState)(false);
+  const pageID = extractPageIDFromBuilderSrc(src);
+  const refreshUnpublishedChanges = async () => {
+    if (!pageID) {
+      return;
+    }
+    try {
+      const response = await fetch(
+        `/api/pages/versions?depth=0&limit=25&sort=-updatedAt&where[parent][equals]=${encodeURIComponent(pageID)}`,
+        {
+          credentials: "include"
+        }
+      );
+      if (!response.ok) {
+        return;
+      }
+      const payload = await response.json();
+      const docs = Array.isArray(payload.docs) ? payload.docs : [];
+      let latestDraft = 0;
+      let latestPublished = 0;
+      docs.forEach((doc) => {
+        const status = doc.version?._status;
+        const millis = typeof doc.updatedAt === "string" ? Date.parse(doc.updatedAt) : Number.NaN;
+        if (!Number.isFinite(millis)) {
+          return;
+        }
+        if (status === "draft") {
+          latestDraft = Math.max(latestDraft, millis);
+        } else if (status === "published") {
+          latestPublished = Math.max(latestPublished, millis);
+        }
+      });
+      setHasUnpublishedChanges(latestDraft > 0 && latestDraft >= latestPublished);
+    } catch {
+    }
+  };
+  const clearDirtyCheckTimer = () => {
+    if (dirtyCheckTimerRef.current) {
+      window.clearTimeout(dirtyCheckTimerRef.current);
+      dirtyCheckTimerRef.current = null;
+    }
+  };
+  const continueNavigation = (nextURL) => {
+    setPendingNavigationURL(null);
+    setShowUnsavedDialog(false);
+    setAwaitingDirtyCheck(false);
+    clearDirtyCheckTimer();
+    window.location.assign(nextURL);
+  };
+  const sendSave = (status) => {
+    const iframe = iframeRef.current;
+    if (!iframe?.contentWindow) {
+      setError("Editor is still loading. Try again in a moment.");
+      return;
+    }
+    setSaving(status);
+    setError("");
+    setMessage("");
+    iframe.contentWindow.postMessage(
+      {
+        source: "payload-visual-builder-parent",
+        type: "save",
+        status
+      },
+      "*"
+    );
+  };
+  const sendHistory = (type) => {
+    const iframe = iframeRef.current;
+    if (!iframe?.contentWindow) {
+      setError("Editor is still loading. Try again in a moment.");
+      return;
+    }
+    iframe.contentWindow.postMessage(
+      {
+        source: "payload-visual-builder-parent",
+        type
+      },
+      "*"
+    );
+  };
+  (0, import_react6.useEffect)(() => {
+    const onMessage = (event) => {
+      const data = event.data;
+      if (!data || data.source !== "payload-visual-builder-child") {
+        return;
+      }
+      if (data.type === "dirty-state") {
+        const dirty = Boolean(data.dirty);
+        setHasUnsavedChanges(dirty);
+        if (awaitingDirtyCheck && pendingNavigationURL) {
+          clearDirtyCheckTimer();
+          setAwaitingDirtyCheck(false);
+          if (dirty) {
+            setShowUnsavedDialog(true);
+          } else {
+            continueNavigation(pendingNavigationURL);
+          }
+        }
+        return;
+      }
+      if (data.type === "history-state") {
+        setCanUndo(Boolean(data.canUndo));
+        setCanRedo(Boolean(data.canRedo));
+        return;
+      }
+      if (data.type === "session-expired") {
+        setSessionExpired(true);
+        return;
+      }
+      if (data.type !== "save-result") {
+        return;
+      }
+      setSaving(null);
+      if (data.ok) {
+        if (data.status === "draft") {
+          setHasUnpublishedChanges(true);
+        } else if (data.status === "published") {
+          setHasUnpublishedChanges(false);
+        } else {
+          void refreshUnpublishedChanges();
+        }
+        setMessage(typeof data.message === "string" ? data.message : "Saved.");
+        setError("");
+        setHasUnsavedChanges(false);
+      } else {
+        setError(typeof data.message === "string" ? data.message : "Could not save changes.");
+        setMessage("");
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [awaitingDirtyCheck, pendingNavigationURL]);
+  (0, import_react6.useEffect)(() => {
+    void refreshUnpublishedChanges();
+  }, [pageID]);
+  (0, import_react6.useEffect)(() => {
+    const onDocumentClick = (event) => {
+      if (!hasUnsavedChanges) {
+        return;
+      }
+      const target = event.target;
+      if (target?.closest('[data-orion-unsaved-dialog="true"]')) {
+        return;
+      }
+      const link = target?.closest("a[href]");
+      if (!link) {
+        return;
+      }
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+      if (link.target && link.target !== "_self") {
+        return;
+      }
+      const href = link.getAttribute("href");
+      if (!href || href.startsWith("#") || href.startsWith("mailto:") || href.startsWith("tel:")) {
+        return;
+      }
+      const destination = new URL(href, window.location.href);
+      const current = new URL(window.location.href);
+      const isSameDestination = destination.pathname === current.pathname && destination.search === current.search && destination.hash === current.hash;
+      if (destination.origin !== current.origin || isSameDestination) {
+        return;
+      }
+      event.preventDefault();
+      const nextURL = `${destination.pathname}${destination.search}${destination.hash}`;
+      setPendingNavigationURL(nextURL);
+      const iframe = iframeRef.current;
+      if (!iframe?.contentWindow) {
+        if (hasUnsavedChanges) {
+          setShowUnsavedDialog(true);
+        } else {
+          continueNavigation(nextURL);
+        }
+        return;
+      }
+      setAwaitingDirtyCheck(true);
+      setShowUnsavedDialog(false);
+      clearDirtyCheckTimer();
+      iframe.contentWindow.postMessage(
+        {
+          source: "payload-visual-builder-parent",
+          type: "dirty-check-request"
+        },
+        "*"
+      );
+      dirtyCheckTimerRef.current = window.setTimeout(() => {
+        setAwaitingDirtyCheck(false);
+        if (hasUnsavedChanges) {
+          setShowUnsavedDialog(true);
+        } else {
+          continueNavigation(nextURL);
+        }
+      }, 250);
+    };
+    document.addEventListener("click", onDocumentClick, true);
+    return () => document.removeEventListener("click", onDocumentClick, true);
+  }, [hasUnsavedChanges]);
+  (0, import_react6.useEffect)(() => {
+    if (!hasUnsavedChanges) {
+      return;
+    }
+    const onBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [hasUnsavedChanges]);
+  (0, import_react6.useEffect)(
+    () => () => {
+      clearDirtyCheckTimer();
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        style: {
+          alignItems: "center",
+          background: "var(--orion-admin-card-bg)",
+          border: "1px solid var(--orion-admin-card-border)",
+          borderRadius: 12,
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "0.6rem",
+          justifyContent: "space-between",
+          padding: "0.7rem 0.8rem"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "grid", gap: "0.2rem" }, children: [
+            /* @__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.jsx)(
+              "div",
+              {
+                style: {
+                  alignItems: "center",
+                  background: hasUnpublishedChanges ? "#fff3cd" : "#e7f7ee",
+                  border: `1px solid ${hasUnpublishedChanges ? "#f0c36d" : "#87c79e"}`,
+                  borderRadius: 999,
+                  color: hasUnpublishedChanges ? "#6a4a00" : "#0e5a2a",
+                  display: "inline-flex",
+                  fontSize: "0.75rem",
+                  fontWeight: 800,
+                  padding: "0.2rem 0.55rem",
+                  width: "fit-content"
+                },
+                title: hasUnpublishedChanges ? "This page has saved draft changes not published yet." : "The live page matches the latest published version.",
+                children: hasUnpublishedChanges ? "Unpublished draft changes" : "Live is up to date"
+              }
+            )
+          ] }),
+          /* @__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",
+                disabled: !canUndo,
+                onClick: () => sendHistory("undo"),
+                style: { background: "transparent", border: "1px solid var(--orion-admin-card-border)", color: "var(--orion-admin-text)" },
+                type: "button",
+                children: "Undo"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                className: "orion-admin-action-button",
+                disabled: !canRedo,
+                onClick: () => sendHistory("redo"),
+                style: { background: "transparent", border: "1px solid var(--orion-admin-card-border)", color: "var(--orion-admin-text)" },
+                type: "button",
+                children: "Redo"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                className: "orion-admin-action-button",
+                disabled: saving !== null,
+                onClick: () => sendSave("draft"),
+                type: "button",
+                children: saving === "draft" ? "Saving..." : "Save Draft"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                className: "orion-admin-action-button",
+                disabled: saving !== null,
+                onClick: () => sendSave("published"),
+                style: { background: "#0f7d52" },
+                type: "button",
+                children: saving === "published" ? "Publishing..." : "Publish"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    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: {
+          background: "#fef2f2",
+          borderLeft: "4px solid #8d1d1d",
+          borderRadius: 8,
+          color: "#8d1d1d",
+          fontSize: "0.9rem",
+          fontWeight: 600,
+          padding: "0.6rem 0.8rem"
+        },
+        children: "Session expired. Log in again in a new tab, then save your changes."
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "iframe",
+      {
+        ref: iframeRef,
+        src,
+        style: {
+          border: "1px solid var(--orion-admin-card-border)",
+          borderRadius: 12,
+          height: "calc(100vh - 280px)",
+          width: "100%"
+        },
+        title: "Page Builder",
+        onLoad: () => {
+          const iframe = iframeRef.current;
+          if (!iframe?.contentWindow) return;
+          iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "dirty-check-request" }, "*");
+          iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "history-check-request" }, "*");
+        }
+      }
+    ),
+    pendingNavigationURL && showUnsavedDialog ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        "data-orion-unsaved-dialog": "true",
+        style: {
+          alignItems: "center",
+          background: "rgba(0, 0, 0, 0.35)",
+          display: "grid",
+          inset: 0,
+          justifyItems: "center",
+          padding: "1rem",
+          position: "fixed",
+          zIndex: 2e3
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            style: {
+              background: "#ffffff",
+              border: "1px solid var(--orion-admin-card-border)",
+              borderRadius: 14,
+              boxShadow: "0 20px 42px rgba(13, 74, 55, 0.28)",
+              display: "grid",
+              gap: "0.9rem",
+              maxWidth: 420,
+              padding: "1rem",
+              width: "100%"
+            },
+            children: [
+              /* @__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_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",
+                    onClick: () => {
+                      setPendingNavigationURL(null);
+                      setShowUnsavedDialog(false);
+                    },
+                    type: "button",
+                    children: "Stay"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "button",
+                  {
+                    className: "orion-admin-action-button",
+                    onClick: () => {
+                      const next = pendingNavigationURL;
+                      if (next) {
+                        continueNavigation(next);
+                      }
+                    },
+                    style: { background: "#8d1d1d" },
+                    type: "button",
+                    children: "Leave Without Saving"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ) : null
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AdminShellClient
+  AdminShellClient,
+  HeaderNavEditorWithPreview,
+  HeaderNavItemsEditor,
+  MediaDetailPanel,
+  MediaListItem,
+  MediaUploadForm,
+  PageEditorFrame
 });