@orion-studios/payload-studio 0.6.0-beta.27 → 0.6.0-beta.29

package/dist/admin/client.js

@@ -8882,43 +8882,24 @@ function AdminStudioFormDetailView(props) {
                     }
                   )
                 ] }),
-                editorState.steps.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "orion-admin-workflow-map", "aria-label": "Form step flow", children: editorState.steps.map((step, stepIndex) => {
-                  const fields = getFields(step);
-                  const requiredCount = fields.filter((field) => field.required === true).length;
-                  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-workflow-node", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "orion-admin-workflow-node-number", children: stepIndex + 1 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-workflow-node-body", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: getStepTitle(step, stepIndex) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { children: [
-                        fields.length,
-                        " field",
-                        fields.length === 1 ? "" : "s",
-                        requiredCount > 0 ? ` \xB7 ${requiredCount} required` : ""
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "orion-admin-workflow-node-destination", children: getStepDestination(stepIndex, editorState.steps.length) })
-                  ] }, `flow-step-${stepIndex}`);
-                }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-empty-state", children: [
+                editorState.steps.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-empty-state", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: "No steps configured" }),
                   /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Add a first step to start building the public form flow." })
-                ] }),
+                ] }) : null,
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "orion-admin-step-editor-list", children: editorState.steps.map((step, stepIndex) => {
                   const fields = getFields(step);
+                  const requiredCount = fields.filter((field) => field.required === true).length;
                   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("details", { className: "orion-admin-step-editor", open: true, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("summary", { className: "orion-admin-step-editor-summary", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "orion-admin-step-editor-index", children: [
-                        "Step ",
-                        stepIndex + 1
-                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "orion-admin-workflow-node-number", children: stepIndex + 1 }),
                       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "orion-admin-step-editor-title", children: getStepTitle(step, stepIndex) }),
                       /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "orion-admin-step-editor-meta", children: [
                         fields.length,
                         " field",
                         fields.length === 1 ? "" : "s",
-                        " \xB7",
-                        " ",
-                        getStepDestination(stepIndex, editorState.steps.length)
-                      ] })
+                        requiredCount > 0 ? ` \xB7 ${requiredCount} required` : ""
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "orion-admin-workflow-node-destination", children: getStepDestination(stepIndex, editorState.steps.length) })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-step-editor-body", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-step-editor-actions", children: [

package/dist/admin/client.mjs

@@ -6552,43 +6552,24 @@ function AdminStudioFormDetailView(props) {
                     }
                   )
                 ] }),
-                editorState.steps.length > 0 ? /* @__PURE__ */ jsx30("div", { className: "orion-admin-workflow-map", "aria-label": "Form step flow", children: editorState.steps.map((step, stepIndex) => {
-                  const fields = getFields(step);
-                  const requiredCount = fields.filter((field) => field.required === true).length;
-                  return /* @__PURE__ */ jsxs27("div", { className: "orion-admin-workflow-node", children: [
-                    /* @__PURE__ */ jsx30("div", { className: "orion-admin-workflow-node-number", children: stepIndex + 1 }),
-                    /* @__PURE__ */ jsxs27("div", { className: "orion-admin-workflow-node-body", children: [
-                      /* @__PURE__ */ jsx30("strong", { children: getStepTitle(step, stepIndex) }),
-                      /* @__PURE__ */ jsxs27("span", { children: [
-                        fields.length,
-                        " field",
-                        fields.length === 1 ? "" : "s",
-                        requiredCount > 0 ? ` \xB7 ${requiredCount} required` : ""
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx30("div", { className: "orion-admin-workflow-node-destination", children: getStepDestination(stepIndex, editorState.steps.length) })
-                  ] }, `flow-step-${stepIndex}`);
-                }) }) : /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
+                editorState.steps.length === 0 ? /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
                   /* @__PURE__ */ jsx30("strong", { children: "No steps configured" }),
                   /* @__PURE__ */ jsx30("span", { children: "Add a first step to start building the public form flow." })
-                ] }),
+                ] }) : null,
                 /* @__PURE__ */ jsx30("div", { className: "orion-admin-step-editor-list", children: editorState.steps.map((step, stepIndex) => {
                   const fields = getFields(step);
+                  const requiredCount = fields.filter((field) => field.required === true).length;
                   return /* @__PURE__ */ jsxs27("details", { className: "orion-admin-step-editor", open: true, children: [
                     /* @__PURE__ */ jsxs27("summary", { className: "orion-admin-step-editor-summary", children: [
-                      /* @__PURE__ */ jsxs27("span", { className: "orion-admin-step-editor-index", children: [
-                        "Step ",
-                        stepIndex + 1
-                      ] }),
+                      /* @__PURE__ */ jsx30("span", { className: "orion-admin-workflow-node-number", children: stepIndex + 1 }),
                       /* @__PURE__ */ jsx30("span", { className: "orion-admin-step-editor-title", children: getStepTitle(step, stepIndex) }),
                       /* @__PURE__ */ jsxs27("span", { className: "orion-admin-step-editor-meta", children: [
                         fields.length,
                         " field",
                         fields.length === 1 ? "" : "s",
-                        " \xB7",
-                        " ",
-                        getStepDestination(stepIndex, editorState.steps.length)
-                      ] })
+                        requiredCount > 0 ? ` \xB7 ${requiredCount} required` : ""
+                      ] }),
+                      /* @__PURE__ */ jsx30("span", { className: "orion-admin-workflow-node-destination", children: getStepDestination(stepIndex, editorState.steps.length) })
                     ] }),
                     /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-body", children: [
                       /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-actions", children: [

package/dist/admin-app/styles.css

@@ -1640,11 +1640,6 @@
   justify-content: space-between;
 }
 
-.orion-admin-workflow-map {
-  display: grid;
-  gap: 0.75rem;
-}
-
 .orion-admin-workflow-node {
   align-items: center;
   background:
@@ -1658,11 +1653,11 @@
   position: relative;
 }
 
-.orion-admin-workflow-node:not(:last-child)::after {
+.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.75rem;
+  bottom: -0.85rem;
   content: '';
-  height: 0.75rem;
+  height: 0.85rem;
   left: 1.42rem;
   position: absolute;
   width: 2px;
@@ -1679,8 +1674,11 @@
   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 {
@@ -1731,6 +1729,31 @@
   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,
@@ -1739,12 +1762,16 @@
   cursor: pointer;
   display: grid;
   gap: 0.65rem;
-  grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) auto;
+  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;
@@ -1783,6 +1810,11 @@
   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;
@@ -1796,13 +1828,40 @@
 }
 
 .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;

package/package.json

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