@orion-studios/payload-studio 0.5.0-beta.113 → 0.5.0-beta.114

package/dist/admin-app/client.js

@@ -27,7 +27,9 @@ __export(client_exports, {
   MediaDetailPanel: () => MediaDetailPanel,
   MediaListItem: () => MediaListItem,
   MediaUploadForm: () => MediaUploadForm,
-  PageEditorFrame: () => PageEditorFrame
+  PageEditorFrame: () => PageEditorFrame,
+  SiteFooterPreview: () => SiteFooterPreview,
+  SiteHeaderPreview: () => SiteHeaderPreview
 });
 module.exports = __toCommonJS(client_exports);
 
@@ -493,14 +495,175 @@ var buildNestedNavTree = (items) => {
   return { childrenByParent, topLevel };
 };
 
-// src/admin-app/components/HeaderNavEditorWithPreview.tsx
+// src/admin-app/components/SitePreview.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var fallbackHeaderNav = [{ href: "/", label: "Home" }];
+var socialGlyphByPlatform = {
+  facebook: "f",
+  instagram: "ig",
+  linkedin: "in",
+  pinterest: "p",
+  snapchat: "sc",
+  tiktok: "tt",
+  x: "x",
+  youtube: "yt"
+};
+var getInitials = (value) => {
+  const initials = value.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() || "").join("");
+  return initials || "OS";
+};
+var getSocialGlyph = (platform) => {
+  const normalized = platform.trim().toLowerCase();
+  return socialGlyphByPlatform[normalized] || normalized.slice(0, 2).toUpperCase() || "\u2022";
+};
+var getTaglineLines = (tagline) => {
+  const parts = (tagline || "").split(".").map((part) => part.trim()).filter(Boolean);
+  const first = parts[0] ? `${parts[0]}.` : "Warm Gifts.";
+  const second = parts[1] ? `${parts[1]}.` : "Local Heart.";
+  return [first, second];
+};
+function PreviewSocialLinks({
+  links,
+  variant
+}) {
+  if (links.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: variant === "header" ? "orion-admin-site-preview-social-list" : "orion-admin-site-preview-social-list orion-admin-site-preview-social-list--footer",
+      children: links.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "a",
+        {
+          className: variant === "header" ? "orion-admin-site-preview-social-badge" : "orion-admin-site-preview-social-badge orion-admin-site-preview-social-badge--footer",
+          href: item.url,
+          tabIndex: -1,
+          children: getSocialGlyph(item.platform)
+        },
+        `${item.platform}-${item.url}`
+      ))
+    }
+  );
+}
+function PreviewLogo({
+  className,
+  logoUrl,
+  siteName
+}) {
+  if (logoUrl && logoUrl.trim().length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { alt: `${siteName} logo`, className, src: logoUrl });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${className} orion-admin-site-preview-logo-fallback`, children: getInitials(siteName) });
+}
+function SiteHeaderPreview({ site }) {
+  const navItems = site.navItems.length > 0 ? site.navItems : fallbackHeaderNav;
+  const [taglineLineOne, taglineLineTwo] = getTaglineLines(site.tagline);
+  const socialLinks = site.socialLinks?.slice(0, 4) || [];
+  const activePath = site.activePath || navItems[0]?.href || "/";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "aria-hidden": "true", className: "orion-admin-site-preview orion-admin-site-preview--header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-admin-site-preview-header-bar", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-shell orion-admin-site-preview-shell--utility", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-utility-copy", children: site.locationSummary?.address?.trim() || "Neighborhood gift shop" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-utility-meta", children: [
+        site.locationSummary?.hours?.trim() ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-utility-copy", children: site.locationSummary.hours.trim() }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PreviewSocialLinks, { links: socialLinks, variant: "header" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "orion-admin-site-preview-header-action", href: site.actionHref || "/contact", tabIndex: -1, children: site.actionLabel || "Visit Today" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-admin-site-preview-header-main", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-shell orion-admin-site-preview-shell--main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("a", { className: "orion-admin-site-preview-brand", href: "/", tabIndex: -1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          PreviewLogo,
+          {
+            className: "orion-admin-site-preview-header-logo",
+            logoUrl: site.logoUrl,
+            siteName: site.siteName
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-tagline", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-tagline-line", children: taglineLineOne }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-tagline-line", children: taglineLineTwo })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { className: "orion-admin-site-preview-nav", children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "a",
+        {
+          className: item.href === activePath ? "is-active" : void 0,
+          href: item.href,
+          tabIndex: -1,
+          children: item.label
+        },
+        `${item.href}-${item.label}`
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-mobile-toggle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {})
+      ] })
+    ] }) })
+  ] });
+}
+function SiteFooterPreview({ site }) {
+  const description = site.description?.trim() || site.tagline?.trim() || "Thoughtful gifts, warm local service, and a beautifully stocked neighborhood shop.";
+  const socialLinks = site.socialLinks?.slice(0, 4) || [];
+  const builtByLabel = site.builtByLabel || "Built by Orion Studios";
+  const builtByHref = site.builtByHref || "https://orionstudios.dev";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "aria-hidden": "true", className: "orion-admin-site-preview orion-admin-site-preview--footer", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-footer-shell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-footer-grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-footer-brand", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            PreviewLogo,
+            {
+              className: "orion-admin-site-preview-footer-logo",
+              logoUrl: site.logoUrl,
+              siteName: site.siteName
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-footer-name", children: site.siteName })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-footer-description", children: description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-footer-eyebrow", children: "Shop focus" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-admin-site-preview-footer-list", children: site.footerCategories.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: item }, item)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-footer-eyebrow", children: "Explore" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "orion-admin-site-preview-footer-list", children: site.footerLinks.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: item.href, tabIndex: -1, children: item.label }, `${item.href}-${item.label}`)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "orion-admin-site-preview-footer-eyebrow", children: "Visit" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-footer-contact", children: [
+          site.locationSummary.address?.trim() ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: site.locationSummary.address.trim() }) : null,
+          site.locationSummary.hours?.trim() ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: site.locationSummary.hours.trim() }) : null,
+          site.locationSummary.phone?.trim() ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: `tel:${site.locationSummary.phone.trim()}`, tabIndex: -1, children: site.locationSummary.phone.trim() }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: `mailto:${site.contactEmail}`, tabIndex: -1, children: site.contactEmail })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PreviewSocialLinks, { links: socialLinks, variant: "footer" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "orion-admin-site-preview-footer-meta", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: site.copyright }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: builtByHref, tabIndex: -1, children: builtByLabel })
+    ] })
+  ] }) });
+}
+
+// src/admin-app/components/HeaderNavEditorWithPreview.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var fallbackNav = [{ href: "/", label: "Home" }];
 function HeaderNavEditorWithPreview({
+  activePath,
+  actionHref,
+  actionLabel,
   brandName,
   initialItems,
+  locationSummary,
   logoUrl,
+  onItemsChange,
   pageOptions,
+  socialLinks,
   tagline = ""
 }) {
   const [liveItems, setLiveItems] = (0, import_react3.useState)(initialItems);
@@ -509,48 +672,44 @@ function HeaderNavEditorWithPreview({
     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",
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      HeaderNavItemsEditor,
       {
-        style: {
-          border: "1px solid #dce2e0",
-          borderRadius: 14,
-          overflow: "hidden"
+        initialItems,
+        onItemsChange: (items) => {
+          setLiveItems(items);
+          onItemsChange?.(items);
         },
-        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}`
-            );
-          }) })
-        ] }) })
+        pageOptions
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orion-admin-preview-label", children: "Header Preview" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orion-admin-preview-frame", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orion-admin-preview-surface", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SiteHeaderPreview,
+      {
+        site: {
+          activePath,
+          actionHref,
+          actionLabel,
+          locationSummary,
+          logoUrl,
+          navItems: previewItems.topLevel.map((item) => ({
+            href: item.href,
+            label: item.label
+          })),
+          siteName: brandName,
+          socialLinks,
+          tagline
+        }
       }
-    )
+    ) }) })
   ] });
 }
 
 // src/admin-app/components/MediaDetailPanel.tsx
 var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function formatFileSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -600,10 +759,10 @@ function MediaDetailPanel({
       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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "orion-admin-grid", style: { alignItems: "start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "orion-admin-card", children: url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { alt: alt || filename || "Media", src: url, style: { borderRadius: 12, width: "100%" } }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "No preview available." }) }),
+      url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           className: "orion-admin-action-button",
@@ -614,28 +773,28 @@ function MediaDetailPanel({
         }
       ) : 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 })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+      metaRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "orion-admin-card orion-admin-meta-table", children: metaRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "orion-admin-meta-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "orion-admin-meta-label", children: row.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.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: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { action: updateAction, className: "orion-admin-form", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { name: "id", type: "hidden", value: id }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { children: [
           "Alt text",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { defaultValue: alt || "", name: "alt", required: true, type: "text" })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { defaultValue: alt || "", name: "alt", required: true, type: "text" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", children: "Save" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.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" })
+      confirmDelete ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "orion-admin-form", style: { borderColor: "#b42318" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { fontWeight: 700, margin: 0 }, children: "Are you sure you want to delete this asset?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", margin: 0 }, children: "This action cannot be undone." }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { action: deleteAction, style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { name: "id", type: "hidden", value: id }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.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)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               onClick: () => setConfirmDelete(false),
@@ -645,7 +804,7 @@ function MediaDetailPanel({
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           className: "orion-admin-action-button",
@@ -660,7 +819,7 @@ function MediaDetailPanel({
 }
 
 // src/admin-app/components/MediaListItem.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function formatFileSize2(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -683,16 +842,16 @@ function MediaListItem({
   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
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("a", { className: "orion-admin-list-item", href, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { alignItems: "center", display: "flex", gap: "0.8rem" }, children: [
+      url ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { alt: altText || label, className: "orion-admin-media-preview", src: url }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "orion-admin-list-meta", children: altText || "No alt text" }),
+        metaParts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.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" })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "orion-admin-list-meta", children: "Edit" })
   ] });
 }
 
@@ -794,7 +953,7 @@ async function optimizeImageForUpload(file) {
 }
 
 // src/admin-app/components/MediaUploadForm.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
 var notifyMediaLibraryUpdated = () => {
   if (typeof window === "undefined") {
@@ -908,10 +1067,10 @@ function MediaUploadForm() {
       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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { className: "orion-admin-upload-form", onSubmit: upload, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { children: [
       "Alt text",
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           onChange: (event) => setAlt(event.target.value),
@@ -921,7 +1080,7 @@ function MediaUploadForm() {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         className: `orion-admin-dropzone${dragging ? " is-dragging" : ""}${file ? " has-file" : ""}`,
@@ -930,14 +1089,14 @@ function MediaUploadForm() {
         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" })
+          preview ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "orion-admin-dropzone-preview", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { alt: "Upload preview", src: preview }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: file?.name })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "orion-admin-dropzone-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: "Drop an image here" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "or click to browse" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
               accept: "image/*",
@@ -950,14 +1109,14 @@ function MediaUploadForm() {
         ]
       }
     ),
-    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" })
+    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "orion-admin-upload-error", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.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 import_jsx_runtime8 = require("react/jsx-runtime");
 var extractPageIDFromBuilderSrc = (value) => {
   if (!value || typeof value !== "string") {
     return null;
@@ -1199,8 +1358,8 @@ function PageEditorFrame({ src }) {
     },
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "grid", gap: "0.8rem" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         style: {
@@ -1215,9 +1374,9 @@ function PageEditorFrame({ src }) {
           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)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "grid", gap: "0.2rem" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(
               "div",
               {
                 style: {
@@ -1237,8 +1396,8 @@ function PageEditorFrame({ src }) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -1249,7 +1408,7 @@ function PageEditorFrame({ src }) {
                 children: "Undo"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -1260,7 +1419,7 @@ function PageEditorFrame({ src }) {
                 children: "Redo"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -1270,7 +1429,7 @@ function PageEditorFrame({ src }) {
                 children: saving === "draft" ? "Saving..." : "Save Draft"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 className: "orion-admin-action-button",
@@ -1285,9 +1444,9 @@ function PageEditorFrame({ src }) {
         ]
       }
     ),
-    message ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { color: "var(--orion-admin-accent)", 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)(
+    message ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "var(--orion-admin-accent)", fontSize: "0.9rem", fontWeight: 700 }, children: message }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "orion-admin-error", children: error }) : null,
+    sessionExpired ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         style: {
@@ -1302,7 +1461,7 @@ function PageEditorFrame({ src }) {
         children: "Session expired. Log in again in a new tab, then save your changes."
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "iframe",
       {
         ref: iframeRef,
@@ -1322,7 +1481,7 @@ function PageEditorFrame({ src }) {
         }
       }
     ),
-    pendingNavigationURL && showUnsavedDialog ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    pendingNavigationURL && showUnsavedDialog ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         "data-orion-unsaved-dialog": "true",
@@ -1336,7 +1495,7 @@ function PageEditorFrame({ src }) {
           position: "fixed",
           zIndex: 2e3
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             style: {
@@ -1351,12 +1510,12 @@ function PageEditorFrame({ src }) {
               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_runtime8.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "var(--orion-admin-text)", fontSize: "1rem", fontWeight: 700 }, children: "Unsaved changes" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "0.6rem", justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     className: "orion-admin-action-button",
@@ -1368,7 +1527,7 @@ function PageEditorFrame({ src }) {
                     children: "Stay"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     className: "orion-admin-action-button",
@@ -1399,5 +1558,7 @@ function PageEditorFrame({ src }) {
   MediaDetailPanel,
   MediaListItem,
   MediaUploadForm,
-  PageEditorFrame
+  PageEditorFrame,
+  SiteFooterPreview,
+  SiteHeaderPreview
 });