@orion-studios/payload-studio 0.6.0-beta.11 → 0.6.0-beta.110

package/dist/admin/index.d.mts

@@ -1,4 +1,4 @@
-export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioDashboardPanel, f as ResolvedStudioSection, S as StudioDashboardPanel, g as StudioDashboardPanelSpan, h as StudioGlobalLink, j as StudioSection, k as StudioSectionCard, l as StudioSectionComponent, m as StudioSectionRole, n as StudioSectionView, o as configureAdmin, p as createHeaderNavItemsField, q as createSocialMediaConnectionsField, r as createSocialMediaGlobal, s as createThemePreferenceField, t as socialMediaConnectionsField, u as themePreferenceField, w as withTooltips } from '../index-Xt3Ep8WV.mjs';
+export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioDashboardPanel, f as ResolvedStudioSection, S as StudioDashboardPanel, g as StudioDashboardPanelSpan, h as StudioGlobalLink, j as StudioSection, k as StudioSectionCard, l as StudioSectionComponent, m as StudioSectionRole, n as StudioSectionView, o as configureAdmin, p as createHeaderNavItemsField, q as createSocialMediaConnectionsField, r as createSocialMediaGlobal, s as createThemePreferenceField, t as socialMediaConnectionsField, u as themePreferenceField, w as withTooltips } from '../index-DLfPOqYA.mjs';
 export { b as SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM, c as SOCIAL_MEDIA_ICON_OPTIONS, d as SOCIAL_MEDIA_PLATFORMS, e as SOCIAL_MEDIA_PLATFORM_LABELS, S as SocialMediaGlobalData, f as SocialMediaIconLibrary, g as SocialMediaIconOption, a as SocialMediaPlatform, h as SocialMediaProfileData, i as SocialMediaProfilesData } from '../socialMedia-C05Iy-SV.mjs';
 import 'payload';
-import '../sitePreviewTypes-BkHCWxNW.mjs';
+import '../sitePreviewTypes-BrJwGzJj.mjs';

package/dist/admin/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioDashboardPanel, f as ResolvedStudioSection, S as StudioDashboardPanel, g as StudioDashboardPanelSpan, h as StudioGlobalLink, j as StudioSection, k as StudioSectionCard, l as StudioSectionComponent, m as StudioSectionRole, n as StudioSectionView, o as configureAdmin, p as createHeaderNavItemsField, q as createSocialMediaConnectionsField, r as createSocialMediaGlobal, s as createThemePreferenceField, t as socialMediaConnectionsField, u as themePreferenceField, w as withTooltips } from '../index-yhpAgqDS.js';
+export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioDashboardPanel, f as ResolvedStudioSection, S as StudioDashboardPanel, g as StudioDashboardPanelSpan, h as StudioGlobalLink, j as StudioSection, k as StudioSectionCard, l as StudioSectionComponent, m as StudioSectionRole, n as StudioSectionView, o as configureAdmin, p as createHeaderNavItemsField, q as createSocialMediaConnectionsField, r as createSocialMediaGlobal, s as createThemePreferenceField, t as socialMediaConnectionsField, u as themePreferenceField, w as withTooltips } from '../index-BV0vEGl6.js';
 export { b as SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM, c as SOCIAL_MEDIA_ICON_OPTIONS, d as SOCIAL_MEDIA_PLATFORMS, e as SOCIAL_MEDIA_PLATFORM_LABELS, S as SocialMediaGlobalData, f as SocialMediaIconLibrary, g as SocialMediaIconOption, a as SocialMediaPlatform, h as SocialMediaProfileData, i as SocialMediaProfilesData } from '../socialMedia-C05Iy-SV.js';
 import 'payload';
-import '../sitePreviewTypes-BkHCWxNW.js';
+import '../sitePreviewTypes-BrJwGzJj.js';

package/dist/admin/index.js

@@ -81,7 +81,7 @@ var adminNavIcons = [
 ];
 
 // src/shared/studioSections.ts
-var studioRoles = /* @__PURE__ */ new Set(["admin", "editor", "client"]);
+var studioRoles = /* @__PURE__ */ new Set(["admin", "developer", "editor", "client"]);
 var studioIcons = new Set(adminNavIcons);
 var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
 var isAbsoluteExternalURL = (value) => /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(value) || value.startsWith("//");
@@ -323,6 +323,49 @@ function configureAdmin(config) {
       }
     };
   };
+  const attachStudioEditRedirectToCollection = (collection, options) => {
+    if (!studioEnabled) {
+      return collection;
+    }
+    const collectionWithBreadcrumb = attachStudioBackBreadcrumbToCollection(collection);
+    const existingViews = collectionWithBreadcrumb.admin?.components?.views;
+    const existingEditViews = existingViews?.edit;
+    const hasCustomEditView = Boolean(
+      existingEditViews?.root || existingEditViews?.default && typeof existingEditViews.default === "object" && existingEditViews.default.Component
+    );
+    if (hasCustomEditView) {
+      return collectionWithBreadcrumb;
+    }
+    return {
+      ...collectionWithBreadcrumb,
+      admin: {
+        ...collectionWithBreadcrumb.admin,
+        components: {
+          ...collectionWithBreadcrumb.admin?.components,
+          views: {
+            ...existingViews,
+            edit: {
+              ...existingEditViews,
+              default: {
+                ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
+                Component: {
+                  exportName: "StudioDocumentRedirect",
+                  path: clientPath,
+                  clientProps: {
+                    description: options.description,
+                    ...options.emptyHref ? { emptyHref: options.emptyHref } : {},
+                    ...options.emptyLabel ? { emptyLabel: options.emptyLabel } : {},
+                    pathBase: options.pathBase,
+                    title: options.title
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+  };
   return {
     admin: {
       css: cssPath,
@@ -364,6 +407,7 @@ function configureAdmin(config) {
           },
           ...studioEnabled ? {
             studioGlobals: {
+              exact: true,
               path: globalsBasePath,
               Component: {
                 exportName: "AdminStudioGlobalsView",
@@ -375,10 +419,11 @@ function configureAdmin(config) {
                 }
               }
             },
-            studioPages: {
-              path: pagesBasePath,
+            studioPageNew: {
+              exact: true,
+              path: `${pagesBasePath}/new`,
               Component: {
-                exportName: "AdminStudioPagesListView",
+                exportName: "AdminStudioNewPageView",
                 path: clientPath,
                 clientProps: {
                   ...studioNavClientProps,
@@ -387,6 +432,7 @@ function configureAdmin(config) {
               }
             },
             studioPageEditor: {
+              exact: true,
               path: `${pagesBasePath}/:id`,
               Component: {
                 exportName: "AdminStudioPageEditView",
@@ -397,10 +443,11 @@ function configureAdmin(config) {
                 }
               }
             },
-            studioPageNew: {
-              path: `${pagesBasePath}/new`,
+            studioPages: {
+              exact: true,
+              path: pagesBasePath,
               Component: {
-                exportName: "AdminStudioNewPageView",
+                exportName: "AdminStudioPagesListView",
                 path: clientPath,
                 clientProps: {
                   ...studioNavClientProps,
@@ -409,6 +456,7 @@ function configureAdmin(config) {
               }
             },
             studioContactForm: {
+              exact: true,
               path: contactFormStudioPath,
               Component: {
                 exportName: "AdminStudioContactFormView",
@@ -421,7 +469,47 @@ function configureAdmin(config) {
               }
             },
             ...formsEnabled ? {
+              studioFormSubmission: {
+                exact: true,
+                path: `${formsBasePath}/submissions/:id`,
+                Component: {
+                  exportName: "AdminStudioFormSubmissionView",
+                  path: clientPath,
+                  clientProps: {
+                    ...studioNavClientProps,
+                    formsCollectionSlug,
+                    formSubmissionsCollectionSlug,
+                    formUploadsCollectionSlug
+                  }
+                }
+              },
+              studioFormUpload: {
+                exact: true,
+                path: `${formsBasePath}/uploads/:id`,
+                Component: {
+                  exportName: "AdminStudioFormUploadView",
+                  path: clientPath,
+                  clientProps: {
+                    ...studioNavClientProps,
+                    formUploadsCollectionSlug
+                  }
+                }
+              },
+              studioFormDetail: {
+                exact: true,
+                path: `${formsBasePath}/:id`,
+                Component: {
+                  exportName: "AdminStudioFormDetailView",
+                  path: clientPath,
+                  clientProps: {
+                    ...studioNavClientProps,
+                    formsCollectionSlug,
+                    formSubmissionsCollectionSlug
+                  }
+                }
+              },
               studioForms: {
+                exact: true,
                 path: formsBasePath,
                 Component: {
                   exportName: "AdminStudioFormsView",
@@ -435,10 +523,11 @@ function configureAdmin(config) {
                 }
               }
             } : {},
-            studioMedia: {
-              path: mediaBasePath,
+            studioMediaItem: {
+              exact: true,
+              path: `${mediaBasePath}/:id`,
               Component: {
-                exportName: "AdminStudioMediaView",
+                exportName: "AdminStudioMediaItemView",
                 path: clientPath,
                 clientProps: {
                   ...studioNavClientProps,
@@ -446,10 +535,11 @@ function configureAdmin(config) {
                 }
               }
             },
-            studioMediaItem: {
-              path: `${mediaBasePath}/:id`,
+            studioMedia: {
+              exact: true,
+              path: mediaBasePath,
               Component: {
-                exportName: "AdminStudioMediaItemView",
+                exportName: "AdminStudioMediaView",
                 path: clientPath,
                 clientProps: {
                   ...studioNavClientProps,
@@ -458,6 +548,7 @@ function configureAdmin(config) {
               }
             },
             studioTools: {
+              exact: true,
               path: toolsBasePath,
               Component: {
                 exportName: "AdminStudioToolsView",
@@ -611,13 +702,31 @@ function configureAdmin(config) {
       return attachStudioBackBreadcrumbToCollection(mediaCollection);
     },
     wrapFormsCollection(formsCollection) {
-      return attachStudioBackBreadcrumbToCollection(formsCollection);
+      return attachStudioEditRedirectToCollection(formsCollection, {
+        description: "Redirecting to the Studio form workspace.",
+        emptyHref: formsBasePath,
+        emptyLabel: "Open Forms",
+        pathBase: formsBasePath,
+        title: "Opening Form..."
+      });
     },
     wrapFormSubmissionsCollection(formSubmissionsCollection) {
-      return attachStudioBackBreadcrumbToCollection(formSubmissionsCollection);
+      return attachStudioEditRedirectToCollection(formSubmissionsCollection, {
+        description: "Redirecting to the Studio submission workspace.",
+        emptyHref: formsBasePath,
+        emptyLabel: "Open Forms",
+        pathBase: `${formsBasePath}/submissions`,
+        title: "Opening Submission..."
+      });
     },
     wrapFormUploadsCollection(formUploadsCollection) {
-      return attachStudioBackBreadcrumbToCollection(formUploadsCollection);
+      return attachStudioEditRedirectToCollection(formUploadsCollection, {
+        description: "Redirecting to the Studio upload workspace.",
+        emptyHref: formsBasePath,
+        emptyLabel: "Open Forms",
+        pathBase: `${formsBasePath}/uploads`,
+        title: "Opening Upload..."
+      });
     },
     wrapGlobals(globals2) {
       const labelMap = {

package/dist/admin/index.mjs

@@ -7,7 +7,7 @@ import {
   socialMediaConnectionsField,
   themePreferenceField,
   withTooltips
-} from "../chunk-T4OH6KI6.mjs";
+} from "../chunk-JC3UV74N.mjs";
 import "../chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,

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: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "10 17 5 12 10 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "12", x2: "17", y2: "12" })
+  ] });
+}
 function AdminShellClient({
   children,
   brandName,
@@ -122,14 +130,12 @@ function AdminShellClient({
   onLogout,
   storageKey = "orion-admin-shell-collapsed"
 }) {
-  const [collapsed, setCollapsed] = (0, import_react.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react.useState)(true);
   const [loggingOut, setLoggingOut] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     try {
       const stored = window.localStorage.getItem(storageKey);
-      if (stored === "1") {
-        setCollapsed(true);
-      }
+      setCollapsed(stored === "1");
     } catch {
     }
   }, [storageKey]);
@@ -191,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-KPIX7OSV.mjs";
+} from "../chunk-NF37A575.mjs";
 import "../chunk-ROTPP5CU.mjs";
 
 // src/admin-app/components/PageEditorFrame.tsx

package/dist/admin-app/index.d.mts

@@ -1,4 +1,4 @@
-export { A as AdminBreadcrumbs, a as AdminNavInput, b as AdminNavLinkItem, c as AdminPage, d as AdminPageLinkOption, e as AdminPageRecord, M as MediaDetailPanelProps, f as MediaListItemProps, N as NestedNavItem, g as NestedNavItemInput, h as NestedNavTree, j as buildAdminPageLinkOptions, k as buildNestedNavTree, l as getAdminNavRows, n as normalizeAdminNavInputs, m as normalizeNestedNavItems, p as parseAdminHeaderNavFromForm } from '../index-DEQC3Dwj.mjs';
-export { A as AdminBreadcrumbItem, a as AdminNavIcon, b as AdminNavItem, c as AdminRole, S as SiteFooterPreviewData, d as SiteHeaderPreviewData, e as SitePreviewLink, f as SitePreviewLocationSummary, g as SitePreviewSocialLink, n as navItemIsActive, r as roleCanAccessNav } from '../sitePreviewTypes-BkHCWxNW.mjs';
+export { A as AdminBreadcrumbs, a as AdminNavInput, b as AdminNavLinkItem, c as AdminPage, d as AdminPageLinkOption, e as AdminPageRecord, M as MediaDetailPanelProps, f as MediaListItemProps, N as NestedNavItem, g as NestedNavItemInput, h as NestedNavTree, j as buildAdminPageLinkOptions, k as buildNestedNavTree, l as getAdminNavRows, n as normalizeAdminNavInputs, m as normalizeNestedNavItems, p as parseAdminHeaderNavFromForm } from '../index-G_uTNffQ.mjs';
+export { A as AdminBreadcrumbItem, a as AdminNavIcon, b as AdminNavItem, c as AdminRole, S as SiteFooterPreviewData, d as SiteHeaderPreviewData, e as SitePreviewLink, f as SitePreviewLocationSummary, g as SitePreviewSocialLink, n as navItemIsActive, r as roleCanAccessNav } from '../sitePreviewTypes-BrJwGzJj.mjs';
 import 'react/jsx-runtime';
 import 'react';

package/dist/admin-app/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AdminBreadcrumbs, a as AdminNavInput, b as AdminNavLinkItem, c as AdminPage, d as AdminPageLinkOption, e as AdminPageRecord, M as MediaDetailPanelProps, f as MediaListItemProps, N as NestedNavItem, g as NestedNavItemInput, h as NestedNavTree, j as buildAdminPageLinkOptions, k as buildNestedNavTree, l as getAdminNavRows, n as normalizeAdminNavInputs, m as normalizeNestedNavItems, p as parseAdminHeaderNavFromForm } from '../index-52HdVLQq.js';
-export { A as AdminBreadcrumbItem, a as AdminNavIcon, b as AdminNavItem, c as AdminRole, S as SiteFooterPreviewData, d as SiteHeaderPreviewData, e as SitePreviewLink, f as SitePreviewLocationSummary, g as SitePreviewSocialLink, n as navItemIsActive, r as roleCanAccessNav } from '../sitePreviewTypes-BkHCWxNW.js';
+export { A as AdminBreadcrumbs, a as AdminNavInput, b as AdminNavLinkItem, c as AdminPage, d as AdminPageLinkOption, e as AdminPageRecord, M as MediaDetailPanelProps, f as MediaListItemProps, N as NestedNavItem, g as NestedNavItemInput, h as NestedNavTree, j as buildAdminPageLinkOptions, k as buildNestedNavTree, l as getAdminNavRows, n as normalizeAdminNavInputs, m as normalizeNestedNavItems, p as parseAdminHeaderNavFromForm } from '../index-DAdN56fM.js';
+export { A as AdminBreadcrumbItem, a as AdminNavIcon, b as AdminNavItem, c as AdminRole, S as SiteFooterPreviewData, d as SiteHeaderPreviewData, e as SitePreviewLink, f as SitePreviewLocationSummary, g as SitePreviewSocialLink, n as navItemIsActive, r as roleCanAccessNav } from '../sitePreviewTypes-BrJwGzJj.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/admin-app/styles.css

@@ -25,7 +25,17 @@
     --orion-cms-accent-border,
     var(--orion-cms-accent-border-resolved, color-mix(in srgb, var(--orion-admin-accent) 36%, transparent))
   );
-  --orion-admin-selection-bg: color-mix(in srgb, var(--orion-admin-accent) 18%, var(--orion-admin-main-bg));
+  --orion-admin-selection-bg: var(
+    --orion-cms-selection-bg,
+    var(
+      --orion-cms-selection-bg-resolved,
+      color-mix(in srgb, var(--orion-admin-accent) 18%, var(--orion-admin-main-bg))
+    )
+  );
+  --orion-admin-selection-text: var(
+    --orion-cms-selection-text,
+    var(--orion-cms-selection-text-resolved, var(--orion-admin-text))
+  );
   --orion-admin-radius-xs: var(--orion-cms-radius-xs, var(--orion-cms-radius-xs-resolved, 8px));
   --orion-admin-radius-sm: var(--orion-cms-radius-sm, var(--orion-cms-radius-sm-resolved, 12px));
   --orion-admin-radius-md: var(--orion-cms-radius-md, var(--orion-cms-radius-md-resolved, 16px));
@@ -116,6 +126,15 @@
 .orion-admin-page ::selection,
 .orion-admin-login-shell ::selection {
   background: var(--orion-admin-selection-bg);
+  color: var(--orion-admin-selection-text);
+}
+
+.orion-admin-shell ::-moz-selection,
+.orion-admin-main ::-moz-selection,
+.orion-admin-page ::-moz-selection,
+.orion-admin-login-shell ::-moz-selection {
+  background: var(--orion-admin-selection-bg);
+  color: var(--orion-admin-selection-text);
 }
 
 .orion-admin-shell {
@@ -280,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);
 }
@@ -1608,6 +1645,245 @@
   gap: 0.75rem;
 }
 
+.orion-admin-workflow-editor {
+  gap: 1rem;
+}
+
+.orion-admin-workflow-editor-header,
+.orion-admin-field-list-header {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+  justify-content: space-between;
+}
+
+.orion-admin-workflow-node {
+  align-items: center;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-card-bg) 88%, white), var(--orion-admin-card-bg));
+  border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 80%, transparent);
+  border-radius: var(--orion-admin-radius-md);
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding: 0.85rem;
+  position: relative;
+}
+
+.orion-admin-step-editor:not(:last-child)::after {
+  background: color-mix(in srgb, var(--orion-admin-accent) 34%, var(--orion-admin-card-border));
+  bottom: -0.85rem;
+  content: '';
+  height: 0.85rem;
+  left: 1.42rem;
+  position: absolute;
+  width: 2px;
+}
+
+.orion-admin-workflow-node-number,
+.orion-admin-step-editor-index,
+.orion-admin-field-order {
+  align-items: center;
+  background: var(--orion-admin-accent-subtle);
+  border: 1px solid var(--orion-admin-accent-border);
+  border-radius: var(--orion-admin-radius-pill);
+  color: var(--orion-admin-accent);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 900;
+  justify-content: center;
+  line-height: 1;
+  text-align: center;
+}
+
+.orion-admin-workflow-node-number {
+  box-sizing: border-box;
+  height: 2rem;
+  padding-top: 5px;
+  width: 2rem;
+}
+
+.orion-admin-workflow-node-body {
+  display: grid;
+  gap: 0.18rem;
+  min-width: 0;
+}
+
+.orion-admin-workflow-node-body strong,
+.orion-admin-step-editor-title,
+.orion-admin-field-editor-title {
+  color: var(--orion-admin-text);
+  overflow-wrap: anywhere;
+}
+
+.orion-admin-workflow-node-body span,
+.orion-admin-workflow-node-destination,
+.orion-admin-step-editor-meta,
+.orion-admin-field-editor-meta,
+.orion-admin-field-list-header span {
+  color: var(--orion-admin-muted);
+  font-size: 0.86rem;
+}
+
+.orion-admin-workflow-node-destination {
+  background: color-mix(in srgb, var(--orion-admin-card-bg) 78%, white);
+  border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 72%, transparent);
+  border-radius: var(--orion-admin-radius-pill);
+  font-weight: 800;
+  padding: 0.35rem 0.65rem;
+  white-space: nowrap;
+}
+
+.orion-admin-step-editor-list,
+.orion-admin-field-editor-list {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.orion-admin-step-editor,
+.orion-admin-field-editor {
+  background: color-mix(in srgb, var(--orion-admin-card-bg) 92%, white);
+  border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 84%, transparent);
+  border-radius: var(--orion-admin-radius-md);
+  overflow: hidden;
+  position: relative;
+}
+
+.orion-admin-step-editor {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-card-bg) 97%, white), var(--orion-admin-card-bg));
+  box-shadow:
+    0 1px 0 color-mix(in srgb, var(--orion-admin-card-bg) 88%, white) inset,
+    0 10px 24px color-mix(in srgb, var(--orion-admin-text) 5%, transparent);
+}
+
+.orion-admin-step-editor[open] {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-accent-subtle) 38%, var(--orion-admin-card-bg)), var(--orion-admin-card-bg));
+  border-color: color-mix(in srgb, var(--orion-admin-accent) 34%, var(--orion-admin-card-border));
+}
+
+.orion-admin-step-editor[open]::before {
+  background: linear-gradient(180deg, var(--orion-admin-accent), color-mix(in srgb, var(--orion-admin-accent) 46%, var(--brand-secondary)));
+  bottom: 0;
+  content: '';
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 4px;
+}
+
+.orion-admin-step-editor-summary,
+.orion-admin-field-editor-summary {
+  align-items: center;
+  cursor: pointer;
+  display: grid;
+  gap: 0.65rem;
+  grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) auto auto;
+  list-style: none;
+  min-height: 52px;
+  padding: 0.75rem 0.9rem;
+}
+
+.orion-admin-step-editor-summary {
+  padding-left: 1rem;
+}
+
+.orion-admin-step-editor-summary::-webkit-details-marker,
+.orion-admin-field-editor-summary::-webkit-details-marker {
+  display: none;
+}
+
+.orion-admin-step-editor-summary::after,
+.orion-admin-field-editor-summary::after {
+  color: var(--orion-admin-muted);
+  content: 'Edit';
+  font-size: 0.78rem;
+  font-weight: 900;
+  justify-self: end;
+  text-transform: uppercase;
+}
+
+.orion-admin-step-editor[open] > .orion-admin-step-editor-summary::after,
+.orion-admin-field-editor[open] > .orion-admin-field-editor-summary::after {
+  content: 'Hide';
+}
+
+.orion-admin-step-editor-index {
+  min-height: 1.8rem;
+  padding: 0 0.58rem;
+}
+
+.orion-admin-field-order {
+  box-sizing: border-box;
+  height: 1.75rem;
+  padding-top: 5px;
+  width: 1.75rem;
+}
+
+.orion-admin-step-editor-body,
+.orion-admin-field-editor-body {
+  border-top: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 72%, transparent);
+  display: grid;
+  gap: 0.85rem;
+  padding: 0.95rem;
+}
+
+.orion-admin-step-editor-body {
+  background: color-mix(in srgb, var(--orion-admin-card-bg) 86%, var(--orion-admin-main-bg));
+  padding-left: 1.15rem;
+}
+
+.orion-admin-step-editor-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.orion-admin-step-settings-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.orion-admin-field-editor {
+  background: color-mix(in srgb, var(--orion-admin-main-bg) 72%, var(--orion-admin-card-bg));
+  border-color: color-mix(in srgb, var(--brand-secondary) 22%, var(--orion-admin-card-border));
+  border-radius: var(--orion-admin-radius-sm);
+  box-shadow: none;
+}
+
+.orion-admin-field-editor-summary {
+  grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) auto;
+  padding: 0.68rem 0.75rem;
+}
+
+.orion-admin-field-editor-list {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-main-bg) 74%, var(--orion-admin-card-bg)), color-mix(in srgb, var(--orion-admin-main-bg) 88%, white));
+  border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--orion-admin-card-border));
+  border-radius: var(--orion-admin-radius-md);
+  padding: 0.7rem;
+}
+
+.orion-admin-field-order {
+  background: color-mix(in srgb, var(--brand-secondary) 10%, var(--orion-admin-card-bg));
+  border-color: color-mix(in srgb, var(--brand-secondary) 32%, var(--orion-admin-card-border));
+  color: color-mix(in srgb, var(--brand-secondary) 74%, var(--orion-admin-text));
+}
+
+.orion-admin-field-editor-meta {
+  background: color-mix(in srgb, var(--brand-secondary) 8%, var(--orion-admin-card-bg));
+  border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, transparent);
+  border-radius: var(--orion-admin-radius-pill);
+  font-weight: 800;
+  justify-self: end;
+  padding: 0.28rem 0.55rem;
+}
+
 .orion-admin-response-stack.is-scrollable {
   mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
   max-height: 34rem;