@orion-studios/payload-studio 0.6.0-beta.106 → 0.6.0-beta.108

package/dist/admin/client.js

@@ -2873,8 +2873,26 @@ function NavIcon({ sectionID }) {
       return null;
   }
 }
+function LogoutIcon() {
+  const props = {
+    fill: "none",
+    height: iconSize2,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24",
+    width: iconSize2
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { ...props, "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("polyline", { points: "8 17 3 12 8 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "3", y1: "12", x2: "15", y2: "12" })
+  ] });
+}
 function AdminStudioNav(props) {
   const { user } = (0, import_ui3.useAuth)();
+  const [loggingOut, setLoggingOut] = (0, import_react13.useState)(false);
   const brandName = getPropString(props, "brandName", "Orion Studio");
   const logoUrl = getPropString(props, "logoUrl", "");
   const compact = getPropBoolean(props, "compact", false);
@@ -2885,6 +2903,18 @@ function AdminStudioNav(props) {
   const dashboardPath = adminBasePath;
   const userRole = readUserRole(user);
   const links = (0, import_react13.useMemo)(() => buildStudioNavItems(props, adminBasePath), [adminBasePath, props]);
+  const logout = async () => {
+    setLoggingOut(true);
+    try {
+      await fetch("/api/users/logout", {
+        credentials: "include",
+        method: "POST"
+      });
+      window.location.href = `${adminBasePath}/login`;
+    } finally {
+      setLoggingOut(false);
+    }
+  };
   if (isStudioShellRoute(pathname, props, adminBasePath)) {
     return null;
   }
@@ -2975,7 +3005,38 @@ function AdminStudioNav(props) {
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "var(--theme-elevation-700)", fontSize: "0.85rem" }, children: "Signed in as" }),
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontWeight: 800, marginBottom: "0.55rem" }, children: typeof user?.email === "string" ? user.email : "User" })
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui3.Logout, {})
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                "button",
+                {
+                  "aria-label": "Log out",
+                  disabled: loggingOut,
+                  onClick: () => void logout(),
+                  style: {
+                    alignItems: "center",
+                    background: "transparent",
+                    border: "1px solid var(--theme-elevation-150)",
+                    borderRadius: 10,
+                    color: "var(--theme-elevation-900)",
+                    cursor: loggingOut ? "not-allowed" : "pointer",
+                    display: "inline-flex",
+                    font: "inherit",
+                    fontWeight: 800,
+                    gap: compact ? 0 : "0.45rem",
+                    justifyContent: "center",
+                    minHeight: compact ? 48 : 34,
+                    minWidth: compact ? 48 : 0,
+                    opacity: loggingOut ? 0.55 : 1,
+                    padding: compact ? 0 : "0.4rem 0.62rem",
+                    width: compact ? 48 : "auto"
+                  },
+                  title: "Log out",
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LogoutIcon, {}),
+                    !compact ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: loggingOut ? "Logging out..." : "Log out" }) : null
+                  ]
+                }
+              )
             ]
           }
         )
@@ -3048,6 +3109,14 @@ function NavIcon2({ name }) {
       return null;
   }
 }
+function LogoutIcon2() {
+  const props = { width: iconSize3, height: iconSize3, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: iconStyle };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { ...props, "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("polyline", { points: "8 17 3 12 8 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("line", { x1: "3", y1: "12", x2: "15", y2: "12" })
+  ] });
+}
 function AdminShellClient({
   children,
   brandName,
@@ -3126,7 +3195,10 @@ function AdminShellClient({
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "orion-admin-user-label", children: "Signed in as" }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "orion-admin-user-email", children: userEmail })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "orion-admin-logout", disabled: loggingOut, onClick: handleLogout, type: "button", children: loggingOut ? "..." : "Log out" })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { className: "orion-admin-logout", disabled: loggingOut, onClick: handleLogout, type: "button", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LogoutIcon2, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: loggingOut ? "Logging out..." : "Log out" })
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("main", { className: "orion-admin-main", children })

package/dist/admin/client.mjs

@@ -9,7 +9,7 @@ import {
   SiteFooterPreview,
   adminNavIcons,
   buildAdminPageLinkOptions
-} from "../chunk-3ZKXHSG5.mjs";
+} from "../chunk-I7IBEYC5.mjs";
 import "../chunk-ROTPP5CU.mjs";
 import {
   BlockPicker,
@@ -1273,9 +1273,9 @@ function WelcomeHeader({
 }
 
 // src/admin/components/studio/AdminStudioNav.tsx
-import { useMemo } from "react";
+import { useMemo, useState as useState7 } from "react";
 import { usePathname } from "next/navigation";
-import { Logout, useAuth } from "@payloadcms/ui";
+import { useAuth } from "@payloadcms/ui";
 
 // src/admin/components/studio/adminPathUtils.ts
 import { useEffect as useEffect6, useState as useState6 } from "react";
@@ -1648,8 +1648,26 @@ function NavIcon({ sectionID }) {
       return null;
   }
 }
+function LogoutIcon() {
+  const props = {
+    fill: "none",
+    height: iconSize2,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24",
+    width: iconSize2
+  };
+  return /* @__PURE__ */ jsxs11("svg", { ...props, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx12("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ jsx12("polyline", { points: "8 17 3 12 8 7" }),
+    /* @__PURE__ */ jsx12("line", { x1: "3", y1: "12", x2: "15", y2: "12" })
+  ] });
+}
 function AdminStudioNav(props) {
   const { user } = useAuth();
+  const [loggingOut, setLoggingOut] = useState7(false);
   const brandName = getPropString(props, "brandName", "Orion Studio");
   const logoUrl = getPropString(props, "logoUrl", "");
   const compact = getPropBoolean(props, "compact", false);
@@ -1660,6 +1678,18 @@ function AdminStudioNav(props) {
   const dashboardPath = adminBasePath;
   const userRole = readUserRole(user);
   const links = useMemo(() => buildStudioNavItems(props, adminBasePath), [adminBasePath, props]);
+  const logout = async () => {
+    setLoggingOut(true);
+    try {
+      await fetch("/api/users/logout", {
+        credentials: "include",
+        method: "POST"
+      });
+      window.location.href = `${adminBasePath}/login`;
+    } finally {
+      setLoggingOut(false);
+    }
+  };
   if (isStudioShellRoute(pathname, props, adminBasePath)) {
     return null;
   }
@@ -1750,7 +1780,38 @@ function AdminStudioNav(props) {
                 /* @__PURE__ */ jsx12("div", { style: { color: "var(--theme-elevation-700)", fontSize: "0.85rem" }, children: "Signed in as" }),
                 /* @__PURE__ */ jsx12("div", { style: { fontWeight: 800, marginBottom: "0.55rem" }, children: typeof user?.email === "string" ? user.email : "User" })
               ] }) : null,
-              /* @__PURE__ */ jsx12(Logout, {})
+              /* @__PURE__ */ jsxs11(
+                "button",
+                {
+                  "aria-label": "Log out",
+                  disabled: loggingOut,
+                  onClick: () => void logout(),
+                  style: {
+                    alignItems: "center",
+                    background: "transparent",
+                    border: "1px solid var(--theme-elevation-150)",
+                    borderRadius: 10,
+                    color: "var(--theme-elevation-900)",
+                    cursor: loggingOut ? "not-allowed" : "pointer",
+                    display: "inline-flex",
+                    font: "inherit",
+                    fontWeight: 800,
+                    gap: compact ? 0 : "0.45rem",
+                    justifyContent: "center",
+                    minHeight: compact ? 48 : 34,
+                    minWidth: compact ? 48 : 0,
+                    opacity: loggingOut ? 0.55 : 1,
+                    padding: compact ? 0 : "0.4rem 0.62rem",
+                    width: compact ? 48 : "auto"
+                  },
+                  title: "Log out",
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx12(LogoutIcon, {}),
+                    !compact ? /* @__PURE__ */ jsx12("span", { children: loggingOut ? "Logging out..." : "Log out" }) : null
+                  ]
+                }
+              )
             ]
           }
         )
@@ -1840,7 +1901,7 @@ function AdminPage({ title, description, breadcrumbs, actions, children }) {
 }
 
 // src/admin/components/studio/AdminStudioDashboardClient.tsx
-import { startTransition, useEffect as useEffect7, useMemo as useMemo3, useState as useState7 } from "react";
+import { startTransition, useEffect as useEffect7, useMemo as useMemo3, useState as useState8 } from "react";
 import Link from "next/link";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1e3;
@@ -2062,7 +2123,7 @@ function AdminStudioDashboardClient({
   children
 }) {
   const role = isRole(userRole) ? userRole : void 0;
-  const [state, setState] = useState7(
+  const [state, setState] = useState8(
     () => formsEnabled && canReviewForms(role) ? {
       forms: { status: "loading" },
       media: { status: "loading" },
@@ -2667,13 +2728,13 @@ function AdminStudioDashboard(rawProps) {
 }
 
 // src/admin/components/studio/AdminStudioPagesListView.tsx
-import { useEffect as useEffect9, useMemo as useMemo5, useState as useState10 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo5, useState as useState11 } from "react";
 import Link2 from "next/link";
 import { usePathname as usePathname3 } from "next/navigation";
 import { useAuth as useAuth4 } from "@payloadcms/ui";
 
 // src/admin/components/studio/AdminStudioNewPageView.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { useAuth as useAuth3 } from "@payloadcms/ui";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var pageTemplates = ["standard", "landing", "services", "contact"];
@@ -2698,8 +2759,8 @@ function AdminStudioNewPageView(props) {
   const { user } = useAuth3();
   const adminBasePath = useAdminBasePath();
   const pagesCollectionSlug = getPropString3(props, "pagesCollectionSlug", "pages");
-  const [submitting, setSubmitting] = useState8(false);
-  const [error, setError] = useState8(null);
+  const [submitting, setSubmitting] = useState9(false);
+  const [error, setError] = useState9(null);
   if (!canManagePages(user)) {
     return /* @__PURE__ */ jsx18(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsx18(
       AdminPage,
@@ -2794,7 +2855,7 @@ function AdminStudioNewPageView(props) {
 }
 
 // src/admin/components/studio/AdminStudioPageEditView.tsx
-import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef3, useState as useState9 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef3, useState as useState10 } from "react";
 import { SetStepNav } from "@payloadcms/ui";
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var getPropString4 = (props, key, fallback) => {
@@ -2829,8 +2890,8 @@ function AdminStudioPageEditView(props) {
   const builderBasePath = getPropString4(props, "builderBasePath", "/builder");
   const pagesPath = resolveAdminPath(adminBasePath, "/pages");
   const pageIDFromParams = useMemo4(() => getParam(props.params, "id"), [props.params]);
-  const [pageID, setPageID] = useState9(pageIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState9(false);
+  const [pageID, setPageID] = useState10(pageIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState10(false);
   useEffect8(() => {
     if (pageIDFromParams) {
       setPageID(pageIDFromParams);
@@ -2932,9 +2993,9 @@ function AdminStudioPagesIndexView({
   const { user } = useAuth4();
   const pagesCollectionSlug = getPropString5(props, "pagesCollectionSlug", "pages");
   const newPagePath = resolveAdminPath(adminBasePath, "/pages/new");
-  const [loading, setLoading] = useState10(true);
-  const [error, setError] = useState10(null);
-  const [docs, setDocs] = useState10([]);
+  const [loading, setLoading] = useState11(true);
+  const [error, setError] = useState11(null);
+  const [docs, setDocs] = useState11([]);
   const apiURL = useMemo5(() => {
     const params = new URLSearchParams({
       depth: "0",
@@ -3056,7 +3117,7 @@ function AdminStudioGlobalsView(props) {
 }
 
 // src/admin/components/studio/AdminStudioSiteSettingsGlobalView.tsx
-import { useEffect as useEffect10, useMemo as useMemo6, useState as useState11 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6, useState as useState12 } from "react";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var getPropString6 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
@@ -3142,12 +3203,12 @@ function AdminStudioSiteSettingsGlobalView(props) {
   const mediaCollectionSlug = getPropString6(props, "mediaCollectionSlug", "media");
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
-  const [loading, setLoading] = useState11(true);
-  const [saving, setSaving] = useState11(false);
-  const [error, setError] = useState11(null);
-  const [savedMessage, setSavedMessage] = useState11(null);
-  const [globalData, setGlobalData] = useState11({});
-  const [mediaOptions, setMediaOptions] = useState11([]);
+  const [loading, setLoading] = useState12(true);
+  const [saving, setSaving] = useState12(false);
+  const [error, setError] = useState12(null);
+  const [savedMessage, setSavedMessage] = useState12(null);
+  const [globalData, setGlobalData] = useState12({});
+  const [mediaOptions, setMediaOptions] = useState12([]);
   useEffect10(() => {
     let cancelled = false;
     const run = async () => {
@@ -3432,7 +3493,7 @@ function AdminStudioSiteSettingsGlobalView(props) {
 }
 
 // src/admin/components/studio/AdminStudioSocialMediaGlobalView.tsx
-import { useEffect as useEffect11, useMemo as useMemo7, useState as useState12 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo7, useState as useState13 } from "react";
 
 // src/shared/socialMedia.ts
 var SOCIAL_MEDIA_PLATFORM_LABELS = {
@@ -3569,11 +3630,11 @@ function AdminStudioSocialMediaGlobalView(props) {
   const globalsBasePath = getPropString7(props, "globalsBasePath", "/globals");
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
-  const [loading, setLoading] = useState12(true);
-  const [saving, setSaving] = useState12(false);
-  const [error, setError] = useState12(null);
-  const [savedMessage, setSavedMessage] = useState12(null);
-  const [globalData, setGlobalData] = useState12({});
+  const [loading, setLoading] = useState13(true);
+  const [saving, setSaving] = useState13(false);
+  const [error, setError] = useState13(null);
+  const [savedMessage, setSavedMessage] = useState13(null);
+  const [globalData, setGlobalData] = useState13({});
   useEffect11(() => {
     let cancelled = false;
     const run = async () => {
@@ -3713,7 +3774,7 @@ function AdminStudioSocialMediaGlobalView(props) {
 }
 
 // src/admin/components/studio/AdminStudioHeaderGlobalView.tsx
-import { useEffect as useEffect12, useMemo as useMemo8, useState as useState13 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo8, useState as useState14 } from "react";
 import { SetStepNav as SetStepNav2 } from "@payloadcms/ui";
 
 // src/nextjs/utilities/socialMedia.ts
@@ -3809,15 +3870,15 @@ function AdminStudioHeaderGlobalView(props) {
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
   const rawGlobalPath = resolveAdminPath(adminBasePath, `/globals/${globalSlug}`);
-  const [loading, setLoading] = useState13(true);
-  const [saving, setSaving] = useState13(false);
-  const [error, setError] = useState13(null);
-  const [savedMessage, setSavedMessage] = useState13(null);
-  const [initialItems, setInitialItems] = useState13([]);
-  const [liveItems, setLiveItems] = useState13([]);
-  const [pages, setPages] = useState13([]);
-  const [siteSettings, setSiteSettings] = useState13({});
-  const [socialMedia, setSocialMedia] = useState13({});
+  const [loading, setLoading] = useState14(true);
+  const [saving, setSaving] = useState14(false);
+  const [error, setError] = useState14(null);
+  const [savedMessage, setSavedMessage] = useState14(null);
+  const [initialItems, setInitialItems] = useState14([]);
+  const [liveItems, setLiveItems] = useState14([]);
+  const [pages, setPages] = useState14([]);
+  const [siteSettings, setSiteSettings] = useState14({});
+  const [socialMedia, setSocialMedia] = useState14({});
   useEffect12(() => {
     let cancelled = false;
     const run = async () => {
@@ -3984,7 +4045,7 @@ function AdminStudioHeaderGlobalView(props) {
 }
 
 // src/admin/components/studio/AdminStudioFooterGlobalView.tsx
-import { useEffect as useEffect13, useMemo as useMemo9, useState as useState14 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo9, useState as useState15 } from "react";
 import { SetStepNav as SetStepNav3 } from "@payloadcms/ui";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var getPropString9 = (props, key, fallback) => {
@@ -4092,17 +4153,17 @@ function AdminStudioFooterGlobalView(props) {
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
   const rawGlobalPath = resolveAdminPath(adminBasePath, `/globals/${globalSlug}`);
-  const [loading, setLoading] = useState14(true);
-  const [saving, setSaving] = useState14(false);
-  const [error, setError] = useState14(null);
-  const [savedMessage, setSavedMessage] = useState14(null);
-  const [doc, setDoc] = useState14({
+  const [loading, setLoading] = useState15(true);
+  const [saving, setSaving] = useState15(false);
+  const [error, setError] = useState15(null);
+  const [savedMessage, setSavedMessage] = useState15(null);
+  const [doc, setDoc] = useState15({
     contactEmail: "",
     contactPhone: "",
     copyright: ""
   });
-  const [siteSettings, setSiteSettings] = useState14({});
-  const [socialMedia, setSocialMedia] = useState14({});
+  const [siteSettings, setSiteSettings] = useState15({});
+  const [socialMedia, setSocialMedia] = useState15({});
   useEffect13(() => {
     let cancelled = false;
     const run = async () => {
@@ -4359,7 +4420,7 @@ function AdminStudioFooterGlobalView(props) {
 }
 
 // src/admin/components/studio/AdminStudioContactFormView.tsx
-import { useEffect as useEffect14, useMemo as useMemo10, useState as useState15 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo10, useState as useState16 } from "react";
 import { SetStepNav as SetStepNav4 } from "@payloadcms/ui";
 import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var defaultDoc = {
@@ -4450,11 +4511,11 @@ function AdminStudioContactFormView(props) {
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
   const rawGlobalPath = resolveAdminPath(adminBasePath, `/globals/${globalSlug}`);
-  const [doc, setDoc] = useState15(defaultDoc);
-  const [error, setError] = useState15(null);
-  const [isLoading, setIsLoading] = useState15(true);
-  const [isSaving, setIsSaving] = useState15(false);
-  const [savedMessage, setSavedMessage] = useState15(null);
+  const [doc, setDoc] = useState16(defaultDoc);
+  const [error, setError] = useState16(null);
+  const [isLoading, setIsLoading] = useState16(true);
+  const [isSaving, setIsSaving] = useState16(false);
+  const [savedMessage, setSavedMessage] = useState16(null);
   useEffect14(() => {
     let mounted = true;
     const load = async () => {
@@ -4685,7 +4746,7 @@ function AdminStudioContactFormView(props) {
 }
 
 // src/admin/components/studio/AdminStudioMediaView.tsx
-import { useEffect as useEffect15, useMemo as useMemo11, useState as useState16 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo11, useState as useState17 } from "react";
 import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
 var getPropString11 = (props, key, fallback) => {
@@ -4702,9 +4763,9 @@ var getPropString11 = (props, key, fallback) => {
 function AdminStudioMediaView(props) {
   const mediaCollectionSlug = getPropString11(props, "mediaCollectionSlug", "media");
   const adminBasePath = useAdminBasePath();
-  const [docs, setDocs] = useState16([]);
-  const [loading, setLoading] = useState16(true);
-  const [error, setError] = useState16(null);
+  const [docs, setDocs] = useState17([]);
+  const [loading, setLoading] = useState17(true);
+  const [error, setError] = useState17(null);
   const apiURL = useMemo11(() => {
     const params = new URLSearchParams({
       depth: "0",
@@ -4794,7 +4855,7 @@ function AdminStudioMediaView(props) {
 }
 
 // src/admin/components/studio/AdminStudioMediaItemView.tsx
-import { useEffect as useEffect16, useMemo as useMemo12, useState as useState17 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo12, useState as useState18 } from "react";
 import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 var getPropString12 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
@@ -4826,11 +4887,11 @@ function AdminStudioMediaItemView(props) {
   const adminBasePath = useAdminBasePath();
   const mediaPath = resolveAdminPath(adminBasePath, "/media");
   const mediaIDFromParams = useMemo12(() => getParam2(props.params, "id"), [props.params]);
-  const [mediaID, setMediaID] = useState17(mediaIDFromParams);
-  const [doc, setDoc] = useState17(null);
-  const [loading, setLoading] = useState17(true);
-  const [error, setError] = useState17(null);
-  const [savedMessage, setSavedMessage] = useState17(null);
+  const [mediaID, setMediaID] = useState18(mediaIDFromParams);
+  const [doc, setDoc] = useState18(null);
+  const [loading, setLoading] = useState18(true);
+  const [error, setError] = useState18(null);
+  const [savedMessage, setSavedMessage] = useState18(null);
   useEffect16(() => {
     if (mediaIDFromParams) {
       setMediaID(mediaIDFromParams);
@@ -4942,7 +5003,7 @@ function AdminStudioMediaItemView(props) {
 
 // src/admin/components/studio/AdminStudioFormsView.tsx
 import Link3 from "next/link";
-import { useEffect as useEffect17, useMemo as useMemo13, useState as useState18 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo13, useState as useState19 } from "react";
 import { useAuth as useAuth5 } from "@payloadcms/ui";
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 var FORM_TONES = [
@@ -5172,10 +5233,10 @@ function AdminStudioFormsView(props) {
   const studioFormsPath = resolveAdminPath(adminBasePath, "/forms");
   const studioSubmissionsPath = resolveAdminPath(adminBasePath, "/forms/submissions");
   const studioUploadsPath = resolveAdminPath(adminBasePath, "/forms/uploads");
-  const [forms, setForms] = useState18([]);
-  const [submissions, setSubmissions] = useState18([]);
-  const [loading, setLoading] = useState18(true);
-  const [error, setError] = useState18(null);
+  const [forms, setForms] = useState19([]);
+  const [submissions, setSubmissions] = useState19([]);
+  const [loading, setLoading] = useState19(true);
+  const [error, setError] = useState19(null);
   useEffect17(() => {
     if (!canReviewForms2(user)) {
       return;
@@ -5472,7 +5533,7 @@ function AdminStudioFormsView(props) {
 
 // src/admin/components/studio/AdminStudioFormDetailView.tsx
 import Link4 from "next/link";
-import { useEffect as useEffect18, useMemo as useMemo14, useState as useState19 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo14, useState as useState20 } from "react";
 
 // src/admin/components/studio/formsStudioShared.ts
 var FORM_TONES2 = [
@@ -5807,15 +5868,15 @@ function AdminStudioFormDetailView(props) {
   const adminBasePath = useAdminBasePath();
   const formsPath = resolveAdminPath(adminBasePath, "/forms");
   const formIDFromParams = useMemo14(() => getParam3(props.params, "id"), [props.params]);
-  const [formID, setFormID] = useState19(formIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState19(false);
-  const [doc, setDoc] = useState19(null);
-  const [submissions, setSubmissions] = useState19([]);
-  const [editorState, setEditorState] = useState19(null);
-  const [loading, setLoading] = useState19(true);
-  const [error, setError] = useState19(null);
-  const [saving, setSaving] = useState19(false);
-  const [savedMessage, setSavedMessage] = useState19(null);
+  const [formID, setFormID] = useState20(formIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState20(false);
+  const [doc, setDoc] = useState20(null);
+  const [submissions, setSubmissions] = useState20([]);
+  const [editorState, setEditorState] = useState20(null);
+  const [loading, setLoading] = useState20(true);
+  const [error, setError] = useState20(null);
+  const [saving, setSaving] = useState20(false);
+  const [savedMessage, setSavedMessage] = useState20(null);
   useEffect18(() => {
     if (formIDFromParams) {
       setFormID(formIDFromParams);
@@ -6597,7 +6658,7 @@ function AdminStudioFormDetailView(props) {
 
 // src/admin/components/studio/AdminStudioFormSubmissionView.tsx
 import Link5 from "next/link";
-import { useEffect as useEffect19, useMemo as useMemo15, useState as useState20 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo15, useState as useState21 } from "react";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
 var sectionGridStyle2 = {
   display: "grid",
@@ -6657,14 +6718,14 @@ function AdminStudioFormSubmissionView(props) {
   const adminBasePath = useAdminBasePath();
   const formsPath = resolveAdminPath(adminBasePath, "/forms");
   const submissionIDFromParams = useMemo15(() => getParam3(props.params, "id"), [props.params]);
-  const [submissionID, setSubmissionID] = useState20(submissionIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState20(false);
-  const [doc, setDoc] = useState20(null);
-  const [formDoc, setFormDoc] = useState20(null);
-  const [loading, setLoading] = useState20(true);
-  const [error, setError] = useState20(null);
-  const [confirmDelete, setConfirmDelete] = useState20(false);
-  const [deleting, setDeleting] = useState20(false);
+  const [submissionID, setSubmissionID] = useState21(submissionIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState21(false);
+  const [doc, setDoc] = useState21(null);
+  const [formDoc, setFormDoc] = useState21(null);
+  const [loading, setLoading] = useState21(true);
+  const [error, setError] = useState21(null);
+  const [confirmDelete, setConfirmDelete] = useState21(false);
+  const [deleting, setDeleting] = useState21(false);
   useEffect19(() => {
     if (submissionIDFromParams) {
       setSubmissionID(submissionIDFromParams);
@@ -6881,7 +6942,7 @@ function AdminStudioFormSubmissionView(props) {
 }
 
 // src/admin/components/studio/AdminStudioFormUploadView.tsx
-import { useEffect as useEffect20, useMemo as useMemo16, useState as useState21 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo16, useState as useState22 } from "react";
 import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 var previewStyle = {
   borderRadius: 14,
@@ -6898,15 +6959,15 @@ function AdminStudioFormUploadView(props) {
   const adminBasePath = useAdminBasePath();
   const formsPath = resolveAdminPath(adminBasePath, "/forms");
   const uploadIDFromParams = useMemo16(() => getParam3(props.params, "id"), [props.params]);
-  const [uploadID, setUploadID] = useState21(uploadIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState21(false);
-  const [doc, setDoc] = useState21(null);
-  const [loading, setLoading] = useState21(true);
-  const [error, setError] = useState21(null);
-  const [savedMessage, setSavedMessage] = useState21(null);
-  const [saving, setSaving] = useState21(false);
-  const [confirmDelete, setConfirmDelete] = useState21(false);
-  const [deleting, setDeleting] = useState21(false);
+  const [uploadID, setUploadID] = useState22(uploadIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState22(false);
+  const [doc, setDoc] = useState22(null);
+  const [loading, setLoading] = useState22(true);
+  const [error, setError] = useState22(null);
+  const [savedMessage, setSavedMessage] = useState22(null);
+  const [saving, setSaving] = useState22(false);
+  const [confirmDelete, setConfirmDelete] = useState22(false);
+  const [deleting, setDeleting] = useState22(false);
   useEffect20(() => {
     if (uploadIDFromParams) {
       setUploadID(uploadIDFromParams);
@@ -7097,7 +7158,7 @@ function AdminStudioFormUploadView(props) {
 }
 
 // src/admin/components/studio/AdminStudioToolsView.tsx
-import { useEffect as useEffect21, useState as useState22 } from "react";
+import { useEffect as useEffect21, useState as useState23 } from "react";
 import { useAuth as useAuth6 } from "@payloadcms/ui";
 import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 var userRoles = ["admin", "developer", "editor", "client"];
@@ -7110,12 +7171,12 @@ var normalizeRole = (value) => userRoles.includes(value) ? value : "editor";
 function AdminStudioToolsView(props) {
   const { user } = useAuth6();
   const adminBasePath = useAdminBasePath();
-  const [docs, setDocs] = useState22([]);
-  const [loading, setLoading] = useState22(true);
-  const [error, setError] = useState22(null);
-  const [savedMessage, setSavedMessage] = useState22(null);
-  const [createSubmitting, setCreateSubmitting] = useState22(false);
-  const [updatingUserID, setUpdatingUserID] = useState22(null);
+  const [docs, setDocs] = useState23([]);
+  const [loading, setLoading] = useState23(true);
+  const [error, setError] = useState23(null);
+  const [savedMessage, setSavedMessage] = useState23(null);
+  const [createSubmitting, setCreateSubmitting] = useState23(false);
+  const [updatingUserID, setUpdatingUserID] = useState23(null);
   if (!hasAdminAccess3(user)) {
     return /* @__PURE__ */ jsx33(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsx33(
       AdminPage,
@@ -7389,7 +7450,7 @@ function StudioDocumentRedirect({
 }
 
 // src/admin/components/studio/StudioBackBreadcrumb.tsx
-import { useEffect as useEffect24, useState as useState23 } from "react";
+import { useEffect as useEffect24, useState as useState24 } from "react";
 import { SetStepNav as SetStepNav5 } from "@payloadcms/ui";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var toTitle = (slug) => slug.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
@@ -7436,7 +7497,7 @@ var buildNav = (pathname, adminBasePath) => {
 };
 function StudioBackBreadcrumb() {
   const adminBasePath = useAdminBasePath();
-  const [pathname, setPathname] = useState23("");
+  const [pathname, setPathname] = useState24("");
   useEffect24(() => {
     const update = () => setPathname(window.location.pathname);
     update();

package/dist/admin-app/client.js

@@ -111,6 +111,14 @@ function NavIcon({ name }) {
       return null;
   }
 }
+function LogoutIcon() {
+  const props = { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: iconStyle };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "8 17 3 12 8 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "12", x2: "15", y2: "12" })
+  ] });
+}
 function AdminShellClient({
   children,
   brandName,
@@ -189,7 +197,10 @@ function AdminShellClient({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-admin-user-label", children: "Signed in as" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-admin-user-email", children: userEmail })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "orion-admin-logout", disabled: loggingOut, onClick: handleLogout, type: "button", children: loggingOut ? "..." : "Log out" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "orion-admin-logout", disabled: loggingOut, onClick: handleLogout, type: "button", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogoutIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: loggingOut ? "Logging out..." : "Log out" })
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "orion-admin-main", children })

package/dist/admin-app/client.mjs

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

package/dist/admin-app/styles.css

@@ -299,16 +299,34 @@
 }
 
 .orion-admin-logout {
+  align-items: center;
   background: transparent;
   border: 1px solid var(--orion-admin-border);
   border-radius: var(--orion-admin-radius-xs);
   color: var(--orion-admin-text);
   cursor: pointer;
+  display: inline-flex;
   font-weight: 700;
+  gap: 0.45rem;
+  justify-content: center;
   margin-top: 0.6rem;
   padding: 0.4rem 0.65rem;
 }
 
+.orion-admin-logout svg {
+  flex: 0 0 auto;
+}
+
+.is-collapsed .orion-admin-logout {
+  height: 48px;
+  padding: 0;
+  width: 48px;
+}
+
+.is-collapsed .orion-admin-logout span {
+  display: none;
+}
+
 .orion-admin-logout:hover:not(:disabled) {
   background: var(--orion-admin-control-hover-bg);
 }

package/dist/{chunk-3ZKXHSG5.mjs → chunk-I7IBEYC5.mjs}

@@ -92,6 +92,14 @@ function NavIcon({ name }) {
       return null;
   }
 }
+function LogoutIcon() {
+  const props = { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: iconStyle };
+  return /* @__PURE__ */ jsxs("svg", { ...props, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "8 17 3 12 8 7" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "15", y2: "12" })
+  ] });
+}
 function AdminShellClient({
   children,
   brandName,
@@ -170,7 +178,10 @@ function AdminShellClient({
           /* @__PURE__ */ jsx("div", { className: "orion-admin-user-label", children: "Signed in as" }),
           /* @__PURE__ */ jsx("div", { className: "orion-admin-user-email", children: userEmail })
         ] }) : null,
-        /* @__PURE__ */ jsx("button", { className: "orion-admin-logout", disabled: loggingOut, onClick: handleLogout, type: "button", children: loggingOut ? "..." : "Log out" })
+        /* @__PURE__ */ jsxs("button", { className: "orion-admin-logout", disabled: loggingOut, onClick: handleLogout, type: "button", children: [
+          /* @__PURE__ */ jsx(LogoutIcon, {}),
+          /* @__PURE__ */ jsx("span", { children: loggingOut ? "Logging out..." : "Log out" })
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ jsx("main", { className: "orion-admin-main", children })
@@ -723,13 +734,124 @@ function HeaderNavEditorWithPreview({
   ] });
 }
 
-// src/admin-app/components/MediaListItem.tsx
+// src/admin-app/components/MediaDetailPanel.tsx
+import { useState as useState4 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function formatFileSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function MediaDetailPanel({
+  id,
+  filename,
+  alt,
+  url,
+  filesize,
+  width,
+  height,
+  mimeType,
+  createdAt,
+  updateAction,
+  deleteAction
+}) {
+  const [copied, setCopied] = useState4(false);
+  const [confirmDelete, setConfirmDelete] = useState4(false);
+  const copyUrl = async () => {
+    if (!url) return;
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      const input = document.createElement("input");
+      input.value = url;
+      document.body.appendChild(input);
+      input.select();
+      document.execCommand("copy");
+      document.body.removeChild(input);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const metaRows = [];
+  if (filename) metaRows.push({ label: "Filename", value: filename });
+  if (typeof filesize === "number") metaRows.push({ label: "File size", value: formatFileSize(filesize) });
+  if (typeof width === "number" && typeof height === "number") metaRows.push({ label: "Dimensions", value: `${width} \xD7 ${height} px` });
+  if (mimeType) metaRows.push({ label: "Type", value: mimeType });
+  if (createdAt) {
+    try {
+      metaRows.push({ label: "Uploaded", value: new Date(createdAt).toLocaleDateString() });
+    } catch {
+      metaRows.push({ label: "Uploaded", value: createdAt });
+    }
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "orion-admin-grid", style: { alignItems: "start" }, children: [
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx5("div", { className: "orion-admin-card", children: url ? /* @__PURE__ */ jsx5("img", { alt: alt || filename || "Media", src: url, style: { borderRadius: 12, width: "100%" } }) : /* @__PURE__ */ jsx5("span", { children: "No preview available." }) }),
+      url ? /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "orion-admin-action-button",
+          onClick: copyUrl,
+          style: { marginTop: "0.6rem", width: "100%" },
+          type: "button",
+          children: copied ? "Copied!" : "Copy URL"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: "0.8rem" }, children: [
+      metaRows.length > 0 ? /* @__PURE__ */ jsx5("div", { className: "orion-admin-card orion-admin-meta-table", children: metaRows.map((row) => /* @__PURE__ */ jsxs5("div", { className: "orion-admin-meta-row", children: [
+        /* @__PURE__ */ jsx5("span", { className: "orion-admin-meta-label", children: row.label }),
+        /* @__PURE__ */ jsx5("span", { className: "orion-admin-meta-value", children: row.value })
+      ] }, row.label)) }) : null,
+      /* @__PURE__ */ jsxs5("form", { action: updateAction, className: "orion-admin-form", children: [
+        /* @__PURE__ */ jsx5("input", { name: "id", type: "hidden", value: id }),
+        /* @__PURE__ */ jsxs5("label", { children: [
+          "Alt text",
+          /* @__PURE__ */ jsx5("input", { defaultValue: alt || "", name: "alt", required: true, type: "text" })
+        ] }),
+        /* @__PURE__ */ jsx5("button", { type: "submit", children: "Save" })
+      ] }),
+      confirmDelete ? /* @__PURE__ */ jsxs5("div", { className: "orion-admin-form", style: { borderColor: "#b42318" }, children: [
+        /* @__PURE__ */ jsx5("p", { style: { fontWeight: 700, margin: 0 }, children: "Are you sure you want to delete this asset?" }),
+        /* @__PURE__ */ jsx5("p", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", margin: 0 }, children: "This action cannot be undone." }),
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ jsxs5("form", { action: deleteAction, style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx5("input", { name: "id", type: "hidden", value: id }),
+            /* @__PURE__ */ jsx5("button", { style: { background: "#b42318", border: 0, borderRadius: 10, color: "#fff", cursor: "pointer", fontWeight: 800, padding: "0.55rem 0.8rem", width: "100%" }, type: "submit", children: "Yes, Delete" })
+          ] }),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: () => setConfirmDelete(false),
+              style: { background: "transparent", border: "1px solid var(--orion-admin-border)", borderRadius: 10, cursor: "pointer", flex: 1, fontWeight: 700, padding: "0.55rem 0.8rem" },
+              type: "button",
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "orion-admin-action-button",
+          onClick: () => setConfirmDelete(true),
+          style: { background: "#b42318" },
+          type: "button",
+          children: "Delete Asset"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/admin-app/components/MediaListItem.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function formatFileSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 function MediaListItem({
   id,
   filename,
@@ -744,26 +866,26 @@ function MediaListItem({
   const label = filename || `Media ${id}`;
   const altText = alt || "";
   const metaParts = [];
-  if (typeof filesize === "number") metaParts.push(formatFileSize(filesize));
+  if (typeof filesize === "number") metaParts.push(formatFileSize2(filesize));
   if (typeof width === "number" && typeof height === "number") metaParts.push(`${width}\xD7${height}`);
   if (typeof mimeType === "string") metaParts.push(mimeType);
-  return /* @__PURE__ */ jsxs5("a", { className: "orion-admin-list-item", href, children: [
-    /* @__PURE__ */ jsxs5("div", { style: { alignItems: "center", display: "flex", gap: "0.8rem" }, children: [
-      url ? /* @__PURE__ */ jsx5("img", { alt: altText || label, className: "orion-admin-media-preview", src: url }) : null,
-      /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx5("strong", { children: label }),
-        /* @__PURE__ */ jsx5("div", { className: "orion-admin-list-meta", children: altText || "No alt text" }),
-        metaParts.length > 0 ? /* @__PURE__ */ jsx5("div", { className: "orion-admin-list-meta", style: { marginTop: "0.15rem" }, children: metaParts.join(" \xB7 ") }) : null
+  return /* @__PURE__ */ jsxs6("a", { className: "orion-admin-list-item", href, children: [
+    /* @__PURE__ */ jsxs6("div", { style: { alignItems: "center", display: "flex", gap: "0.8rem" }, children: [
+      url ? /* @__PURE__ */ jsx6("img", { alt: altText || label, className: "orion-admin-media-preview", src: url }) : null,
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("strong", { children: label }),
+        /* @__PURE__ */ jsx6("div", { className: "orion-admin-list-meta", children: altText || "No alt text" }),
+        metaParts.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "orion-admin-list-meta", style: { marginTop: "0.15rem" }, children: metaParts.join(" \xB7 ") }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx5("span", { className: "orion-admin-list-meta", children: "Edit" })
+    /* @__PURE__ */ jsx6("span", { className: "orion-admin-list-meta", children: "Edit" })
   ] });
 }
 
 // src/admin-app/components/MediaUploadForm.tsx
-import { useState as useState4, useRef, useCallback } from "react";
+import { useState as useState5, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
 var notifyMediaLibraryUpdated = () => {
   if (typeof window === "undefined") {
@@ -804,12 +926,12 @@ var parseUploadError = async (response) => {
 function MediaUploadForm() {
   const router = useRouter();
   const fileInputRef = useRef(null);
-  const [alt, setAlt] = useState4("");
-  const [file, setFile] = useState4(null);
-  const [preview, setPreview] = useState4(null);
-  const [dragging, setDragging] = useState4(false);
-  const [submitting, setSubmitting] = useState4(false);
-  const [error, setError] = useState4(null);
+  const [alt, setAlt] = useState5("");
+  const [file, setFile] = useState5(null);
+  const [preview, setPreview] = useState5(null);
+  const [dragging, setDragging] = useState5(false);
+  const [submitting, setSubmitting] = useState5(false);
+  const [error, setError] = useState5(null);
   const handleFile = useCallback((selectedFile) => {
     setFile(selectedFile);
     if (preview) {
@@ -877,10 +999,10 @@ function MediaUploadForm() {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxs6("form", { className: "orion-admin-upload-form", onSubmit: upload, children: [
-    /* @__PURE__ */ jsxs6("label", { children: [
+  return /* @__PURE__ */ jsxs7("form", { className: "orion-admin-upload-form", onSubmit: upload, children: [
+    /* @__PURE__ */ jsxs7("label", { children: [
       "Alt text",
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "input",
         {
           onChange: (event) => setAlt(event.target.value),
@@ -890,7 +1012,7 @@ function MediaUploadForm() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs7(
       "div",
       {
         className: `orion-admin-dropzone${dragging ? " is-dragging" : ""}${file ? " has-file" : ""}`,
@@ -899,14 +1021,14 @@ function MediaUploadForm() {
         onDragOver,
         onDrop,
         children: [
-          preview ? /* @__PURE__ */ jsxs6("div", { className: "orion-admin-dropzone-preview", children: [
-            /* @__PURE__ */ jsx6("img", { alt: "Upload preview", src: preview }),
-            /* @__PURE__ */ jsx6("span", { children: file?.name })
-          ] }) : /* @__PURE__ */ jsxs6("div", { className: "orion-admin-dropzone-label", children: [
-            /* @__PURE__ */ jsx6("strong", { children: "Drop an image here" }),
-            /* @__PURE__ */ jsx6("span", { children: "or click to browse" })
+          preview ? /* @__PURE__ */ jsxs7("div", { className: "orion-admin-dropzone-preview", children: [
+            /* @__PURE__ */ jsx7("img", { alt: "Upload preview", src: preview }),
+            /* @__PURE__ */ jsx7("span", { children: file?.name })
+          ] }) : /* @__PURE__ */ jsxs7("div", { className: "orion-admin-dropzone-label", children: [
+            /* @__PURE__ */ jsx7("strong", { children: "Drop an image here" }),
+            /* @__PURE__ */ jsx7("span", { children: "or click to browse" })
           ] }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               accept: "image/*",
@@ -919,119 +1041,8 @@ function MediaUploadForm() {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx6("div", { className: "orion-admin-upload-error", children: error }) : null,
-    /* @__PURE__ */ jsx6("button", { disabled: submitting, type: "submit", children: submitting ? "Uploading..." : "Upload" })
-  ] });
-}
-
-// src/admin-app/components/MediaDetailPanel.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function formatFileSize2(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-function MediaDetailPanel({
-  id,
-  filename,
-  alt,
-  url,
-  filesize,
-  width,
-  height,
-  mimeType,
-  createdAt,
-  updateAction,
-  deleteAction
-}) {
-  const [copied, setCopied] = useState5(false);
-  const [confirmDelete, setConfirmDelete] = useState5(false);
-  const copyUrl = async () => {
-    if (!url) return;
-    try {
-      await navigator.clipboard.writeText(url);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-      const input = document.createElement("input");
-      input.value = url;
-      document.body.appendChild(input);
-      input.select();
-      document.execCommand("copy");
-      document.body.removeChild(input);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    }
-  };
-  const metaRows = [];
-  if (filename) metaRows.push({ label: "Filename", value: filename });
-  if (typeof filesize === "number") metaRows.push({ label: "File size", value: formatFileSize2(filesize) });
-  if (typeof width === "number" && typeof height === "number") metaRows.push({ label: "Dimensions", value: `${width} \xD7 ${height} px` });
-  if (mimeType) metaRows.push({ label: "Type", value: mimeType });
-  if (createdAt) {
-    try {
-      metaRows.push({ label: "Uploaded", value: new Date(createdAt).toLocaleDateString() });
-    } catch {
-      metaRows.push({ label: "Uploaded", value: createdAt });
-    }
-  }
-  return /* @__PURE__ */ jsxs7("div", { className: "orion-admin-grid", style: { alignItems: "start" }, children: [
-    /* @__PURE__ */ jsxs7("div", { children: [
-      /* @__PURE__ */ jsx7("div", { className: "orion-admin-card", children: url ? /* @__PURE__ */ jsx7("img", { alt: alt || filename || "Media", src: url, style: { borderRadius: 12, width: "100%" } }) : /* @__PURE__ */ jsx7("span", { children: "No preview available." }) }),
-      url ? /* @__PURE__ */ jsx7(
-        "button",
-        {
-          className: "orion-admin-action-button",
-          onClick: copyUrl,
-          style: { marginTop: "0.6rem", width: "100%" },
-          type: "button",
-          children: copied ? "Copied!" : "Copy URL"
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxs7("div", { style: { display: "grid", gap: "0.8rem" }, children: [
-      metaRows.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "orion-admin-card orion-admin-meta-table", children: metaRows.map((row) => /* @__PURE__ */ jsxs7("div", { className: "orion-admin-meta-row", children: [
-        /* @__PURE__ */ jsx7("span", { className: "orion-admin-meta-label", children: row.label }),
-        /* @__PURE__ */ jsx7("span", { className: "orion-admin-meta-value", children: row.value })
-      ] }, row.label)) }) : null,
-      /* @__PURE__ */ jsxs7("form", { action: updateAction, className: "orion-admin-form", children: [
-        /* @__PURE__ */ jsx7("input", { name: "id", type: "hidden", value: id }),
-        /* @__PURE__ */ jsxs7("label", { children: [
-          "Alt text",
-          /* @__PURE__ */ jsx7("input", { defaultValue: alt || "", name: "alt", required: true, type: "text" })
-        ] }),
-        /* @__PURE__ */ jsx7("button", { type: "submit", children: "Save" })
-      ] }),
-      confirmDelete ? /* @__PURE__ */ jsxs7("div", { className: "orion-admin-form", style: { borderColor: "#b42318" }, children: [
-        /* @__PURE__ */ jsx7("p", { style: { fontWeight: 700, margin: 0 }, children: "Are you sure you want to delete this asset?" }),
-        /* @__PURE__ */ jsx7("p", { style: { color: "var(--orion-admin-muted)", fontSize: "0.9rem", margin: 0 }, children: "This action cannot be undone." }),
-        /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "0.5rem" }, children: [
-          /* @__PURE__ */ jsxs7("form", { action: deleteAction, style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsx7("input", { name: "id", type: "hidden", value: id }),
-            /* @__PURE__ */ jsx7("button", { style: { background: "#b42318", border: 0, borderRadius: 10, color: "#fff", cursor: "pointer", fontWeight: 800, padding: "0.55rem 0.8rem", width: "100%" }, type: "submit", children: "Yes, Delete" })
-          ] }),
-          /* @__PURE__ */ jsx7(
-            "button",
-            {
-              onClick: () => setConfirmDelete(false),
-              style: { background: "transparent", border: "1px solid var(--orion-admin-border)", borderRadius: 10, cursor: "pointer", flex: 1, fontWeight: 700, padding: "0.55rem 0.8rem" },
-              type: "button",
-              children: "Cancel"
-            }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ jsx7(
-        "button",
-        {
-          className: "orion-admin-action-button",
-          onClick: () => setConfirmDelete(true),
-          style: { background: "#b42318" },
-          type: "button",
-          children: "Delete Asset"
-        }
-      )
-    ] })
+    error ? /* @__PURE__ */ jsx7("div", { className: "orion-admin-upload-error", children: error }) : null,
+    /* @__PURE__ */ jsx7("button", { disabled: submitting, type: "submit", children: submitting ? "Uploading..." : "Upload" })
   ] });
 }
 
@@ -1043,7 +1054,7 @@ export {
   SiteHeaderPreview,
   SiteFooterPreview,
   HeaderNavEditorWithPreview,
+  MediaDetailPanel,
   MediaListItem,
-  MediaUploadForm,
-  MediaDetailPanel
+  MediaUploadForm
 };

package/package.json

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