@orion-studios/payload-studio 0.5.0-beta.3 → 0.5.0-beta.31

package/dist/admin-app/client.js

@@ -21,7 +21,10 @@ 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,
+  PageEditorFrame: () => PageEditorFrame
 });
 module.exports = __toCommonJS(client_exports);
 
@@ -130,7 +133,707 @@ 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/PageEditorFrame.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = 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 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_react4.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 !== "save-result") {
+        return;
+      }
+      setSaving(null);
+      if (data.ok) {
+        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_react4.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_react4.useEffect)(() => {
+    if (!hasUnsavedChanges) {
+      return;
+    }
+    const onBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [hasUnsavedChanges]);
+  (0, import_react4.useEffect)(
+    () => () => {
+      clearDirtyCheckTimer();
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.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_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)(
+              "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_runtime4.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_runtime4.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_runtime4.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_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,
+    /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.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_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_runtime4.jsxs)("div", { style: { display: "flex", gap: "0.6rem", justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    className: "orion-admin-action-button",
+                    onClick: () => {
+                      setPendingNavigationURL(null);
+                      setShowUnsavedDialog(false);
+                    },
+                    type: "button",
+                    children: "Stay"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.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,
+  PageEditorFrame
 });