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

package/dist/admin/client.mjs

@@ -5928,15 +5928,11 @@ var getFormTitle2 = (value) => {
 // src/admin/components/studio/AdminStudioFormDetailView.tsx
 import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 var getNonEmptyText = (value, fallback = "") => typeof value === "string" && value.trim().length > 0 ? value : fallback;
-var formatStepsText = (value) => {
+var normalizeSteps = (value) => {
   if (!Array.isArray(value)) {
-    return "[]";
-  }
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return "[]";
+    return [];
   }
+  return value.map((step) => step && typeof step === "object" && !Array.isArray(step) ? step : {});
 };
 var toEditorState = (doc) => {
   const emails = doc.emails && typeof doc.emails === "object" ? doc.emails : null;
@@ -5952,7 +5948,7 @@ var toEditorState = (doc) => {
     sendAdmin: emails?.sendAdmin !== false,
     sendConfirmation: emails?.sendConfirmation !== false,
     slug: getNonEmptyText(doc.slug),
-    stepsText: formatStepsText(doc.steps),
+    steps: normalizeSteps(doc.steps),
     submitLabel: getNonEmptyText(doc.submitLabel, "Submit"),
     successMessage: getNonEmptyText(doc.successMessage),
     title: getNonEmptyText(doc.title, "Untitled Form")
@@ -5963,25 +5959,72 @@ var checkboxLabelStyle = {
   display: "flex",
   gap: "0.6rem"
 };
-var codeStyle = {
-  background: "color-mix(in srgb, var(--orion-admin-card-bg) 82%, black)",
-  border: "1px solid var(--orion-admin-card-border)",
-  borderRadius: "var(--orion-admin-radius-sm)",
-  color: "var(--orion-admin-text)",
-  fontFamily: "ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, monospace",
-  fontSize: "0.86rem",
-  lineHeight: 1.55,
-  margin: 0,
-  maxHeight: "28rem",
-  overflow: "auto",
-  padding: "0.9rem",
-  whiteSpace: "pre-wrap"
-};
 var sectionGridStyle = {
   display: "grid",
   gap: "1rem",
   gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))"
 };
+var fieldTypeOptions = [
+  "text",
+  "textarea",
+  "email",
+  "phone",
+  "url",
+  "select",
+  "radio",
+  "checkbox",
+  "checkbox-group",
+  "date",
+  "file"
+];
+var getFields = (step) => Array.isArray(step.fields) ? step.fields.map(
+  (field) => field && typeof field === "object" && !Array.isArray(field) ? field : {}
+) : [];
+var toOptionsText = (value) => Array.isArray(value) ? value.map((entry) => {
+  if (entry && typeof entry === "object" && !Array.isArray(entry)) {
+    const record = entry;
+    const label = typeof record.label === "string" ? record.label : "";
+    const optionValue = typeof record.value === "string" ? record.value : label;
+    return label && optionValue && label !== optionValue ? `${label} | ${optionValue}` : label || optionValue;
+  }
+  return typeof entry === "string" ? entry : "";
+}).filter(Boolean).join("\n") : "";
+var fromOptionsText = (value) => value.split("\n").map((entry) => entry.trim()).filter(Boolean).map((entry) => {
+  const [label, optionValue] = entry.split("|").map((part) => part.trim());
+  return {
+    label,
+    value: optionValue || label
+  };
+});
+var slugifyFieldName = (value) => value.trim().replace(/[^a-z0-9]+/gi, " ").trim().replace(/\s+([a-z0-9])/gi, (_, char) => char.toUpperCase()).replace(/^./, (char) => char.toLowerCase());
+var blankField = () => ({
+  label: "New field",
+  name: "newField",
+  required: false,
+  type: "text"
+});
+var blankStep = () => ({
+  fields: [blankField()],
+  title: "New step"
+});
+var getStepTitle = (step, stepIndex) => getNonEmptyText(step.title, `Step ${stepIndex + 1}`);
+var getFieldLabel = (field, fieldIndex) => getNonEmptyText(field.label, getNonEmptyText(field.name, `Field ${fieldIndex + 1}`));
+var formatFieldTypeLabel = (value) => getNonEmptyText(value, "text").replace(/-/g, " ").replace(/^./, (char) => char.toUpperCase());
+var getStepDestination = (stepIndex, stepCount) => {
+  if (stepIndex < stepCount - 1) {
+    return `Next: Step ${stepIndex + 2}`;
+  }
+  return "Then: Submit form";
+};
+var moveItem = (items, fromIndex, toIndex) => {
+  if (toIndex < 0 || toIndex >= items.length) {
+    return items;
+  }
+  const nextItems = [...items];
+  const [item] = nextItems.splice(fromIndex, 1);
+  nextItems.splice(toIndex, 0, item);
+  return nextItems;
+};
 function getFormIDFromPathname(pathname) {
   const marker = "/forms/";
   const raw = getIDFromPathname(pathname, marker);
@@ -6074,10 +6117,6 @@ function AdminStudioFormDetailView(props) {
     setError(null);
     setSavedMessage(null);
     try {
-      const parsedSteps = JSON.parse(editorState.stepsText);
-      if (!Array.isArray(parsedSteps)) {
-        throw new Error("Structure JSON must be an array of steps.");
-      }
       const payload = {
         emails: {
           adminRecipients: editorState.adminRecipientsText.split("\n").map((value) => value.trim()).filter(Boolean).map((email) => ({ email })),
@@ -6089,7 +6128,7 @@ function AdminStudioFormDetailView(props) {
           sendConfirmation: editorState.sendConfirmation
         },
         slug: editorState.slug.trim(),
-        steps: parsedSteps,
+        steps: editorState.steps,
         submitLabel: editorState.submitLabel.trim(),
         successMessage: editorState.successMessage,
         title: editorState.title.trim()
@@ -6135,8 +6174,52 @@ function AdminStudioFormDetailView(props) {
   const toneStyle = getFormToneStyle2(slug, title || formID || "form");
   const fieldLabels = doc ? buildFieldLabelMap2(doc) : /* @__PURE__ */ new Map();
   const latestSubmission = submissions[0];
-  const stepCount = doc && Array.isArray(doc.steps) ? doc.steps.length : 0;
-  const fieldCount = doc ? getFieldCount2(doc) : 0;
+  const stepCount = editorState?.steps.length || 0;
+  const fieldCount = editorState ? editorState.steps.reduce((count, step) => count + getFields(step).length, 0) : doc ? getFieldCount2(doc) : 0;
+  const updateStep = (stepIndex, patch) => {
+    setEditorState(
+      (current) => current ? {
+        ...current,
+        steps: current.steps.map(
+          (step, index) => index === stepIndex ? { ...step, ...patch } : step
+        )
+      } : current
+    );
+  };
+  const updateField = (stepIndex, fieldIndex, patch) => {
+    setEditorState((current) => {
+      if (!current) return current;
+      return {
+        ...current,
+        steps: current.steps.map((step, index) => {
+          if (index !== stepIndex) return step;
+          const fields = getFields(step).map(
+            (field, currentFieldIndex) => currentFieldIndex === fieldIndex ? { ...field, ...patch } : field
+          );
+          return { ...step, fields };
+        })
+      };
+    });
+  };
+  const moveStep = (stepIndex, direction) => {
+    setEditorState(
+      (current) => current ? {
+        ...current,
+        steps: moveItem(current.steps, stepIndex, stepIndex + direction)
+      } : current
+    );
+  };
+  const moveField = (stepIndex, fieldIndex, direction) => {
+    setEditorState((current) => {
+      if (!current) return current;
+      return {
+        ...current,
+        steps: current.steps.map(
+          (step, index) => index === stepIndex ? { ...step, fields: moveItem(getFields(step), fieldIndex, fieldIndex + direction) } : step
+        )
+      };
+    });
+  };
   return /* @__PURE__ */ jsx30(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs27(
     AdminPage,
     {
@@ -6215,10 +6298,9 @@ function AdminStudioFormDetailView(props) {
             /* @__PURE__ */ jsxs27("div", { style: { display: "grid", gap: "1rem" }, children: [
               /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card", children: [
                 /* @__PURE__ */ jsx30("strong", { children: "Step preview" }),
-                /* @__PURE__ */ jsx30("span", { children: "Review the configured workflow structure before editing the JSON source." }),
-                /* @__PURE__ */ jsx30("div", { style: { display: "grid", gap: "0.85rem", marginTop: "1rem" }, children: Array.isArray(doc.steps) && doc.steps.length > 0 ? doc.steps.map((step, stepIndex) => {
-                  const record = step && typeof step === "object" && !Array.isArray(step) ? step : null;
-                  const fields = Array.isArray(record?.fields) ? record.fields : [];
+                /* @__PURE__ */ jsx30("span", { children: "Review the public workflow as visitors will move through it." }),
+                /* @__PURE__ */ jsx30("div", { style: { display: "grid", gap: "0.85rem", marginTop: "1rem" }, children: editorState.steps.length > 0 ? editorState.steps.map((record, stepIndex) => {
+                  const fields = getFields(record);
                   return /* @__PURE__ */ jsxs27("div", { className: "orion-admin-form", children: [
                     /* @__PURE__ */ jsxs27("div", { children: [
                       /* @__PURE__ */ jsxs27("strong", { children: [
@@ -6270,7 +6352,7 @@ function AdminStudioFormDetailView(props) {
                   ] }, `step-${stepIndex}`);
                 }) : /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
                   /* @__PURE__ */ jsx30("strong", { children: "No steps configured" }),
-                  /* @__PURE__ */ jsx30("span", { children: "Add at least one step in the JSON editor to publish this form." })
+                  /* @__PURE__ */ jsx30("span", { children: "Add at least one step in Form settings to publish this form." })
                 ] }) })
               ] }),
               /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card", children: [
@@ -6452,32 +6534,315 @@ function AdminStudioFormDetailView(props) {
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs27("label", { children: [
-                "Structure JSON",
-                /* @__PURE__ */ jsx30(
-                  "textarea",
-                  {
-                    onChange: (event) => setEditorState(
-                      (current) => current ? { ...current, stepsText: event.target.value } : current
-                    ),
-                    rows: 18,
-                    spellCheck: false,
-                    style: {
-                      fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-                      minHeight: "24rem"
-                    },
-                    value: editorState.stepsText
-                  }
-                )
+              /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card orion-admin-workflow-editor", children: [
+                /* @__PURE__ */ jsxs27("div", { className: "orion-admin-workflow-editor-header", children: [
+                  /* @__PURE__ */ jsxs27("div", { children: [
+                    /* @__PURE__ */ jsx30("strong", { children: "Form steps" }),
+                    /* @__PURE__ */ jsx30("span", { children: "Build the visitor flow, then edit each step's fields below." })
+                  ] }),
+                  /* @__PURE__ */ jsx30(
+                    "button",
+                    {
+                      className: "orion-admin-action-button orion-admin-action-button--ghost",
+                      onClick: () => setEditorState(
+                        (current) => current ? { ...current, steps: [...current.steps, blankStep()] } : current
+                      ),
+                      type: "button",
+                      children: "Add step"
+                    }
+                  )
+                ] }),
+                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: [
+                  /* @__PURE__ */ jsx30("strong", { children: "No steps configured" }),
+                  /* @__PURE__ */ jsx30("span", { children: "Add a first step to start building the public form flow." })
+                ] }),
+                /* @__PURE__ */ jsx30("div", { className: "orion-admin-step-editor-list", children: editorState.steps.map((step, stepIndex) => {
+                  const fields = getFields(step);
+                  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-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)
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-body", children: [
+                      /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-actions", children: [
+                        /* @__PURE__ */ jsx30(
+                          "button",
+                          {
+                            className: "orion-admin-action-button orion-admin-action-button--ghost",
+                            disabled: stepIndex === 0,
+                            onClick: () => moveStep(stepIndex, -1),
+                            type: "button",
+                            children: "Move up"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx30(
+                          "button",
+                          {
+                            className: "orion-admin-action-button orion-admin-action-button--ghost",
+                            disabled: stepIndex === editorState.steps.length - 1,
+                            onClick: () => moveStep(stepIndex, 1),
+                            type: "button",
+                            children: "Move down"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx30(
+                          "button",
+                          {
+                            className: "orion-admin-action-button orion-admin-action-button--ghost",
+                            onClick: () => setEditorState(
+                              (current) => current ? {
+                                ...current,
+                                steps: current.steps.filter((_, index) => index !== stepIndex)
+                              } : current
+                            ),
+                            type: "button",
+                            children: "Remove step"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-settings-grid", children: [
+                        /* @__PURE__ */ jsxs27("label", { children: [
+                          "Step title",
+                          /* @__PURE__ */ jsx30(
+                            "input",
+                            {
+                              onChange: (event) => updateStep(stepIndex, { title: event.target.value }),
+                              type: "text",
+                              value: getNonEmptyText(step.title)
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs27("label", { children: [
+                          "Next button label",
+                          /* @__PURE__ */ jsx30(
+                            "input",
+                            {
+                              onChange: (event) => updateStep(stepIndex, { nextLabel: event.target.value }),
+                              placeholder: "Next",
+                              type: "text",
+                              value: getNonEmptyText(step.nextLabel)
+                            }
+                          )
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs27("label", { children: [
+                        "Step intro text",
+                        /* @__PURE__ */ jsx30(
+                          "textarea",
+                          {
+                            onChange: (event) => updateStep(stepIndex, { subtitle: event.target.value }),
+                            rows: 3,
+                            value: getNonEmptyText(step.subtitle)
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs27("label", { style: checkboxLabelStyle, children: [
+                        /* @__PURE__ */ jsx30(
+                          "input",
+                          {
+                            checked: step.allowSkip === true,
+                            onChange: (event) => updateStep(stepIndex, { allowSkip: event.target.checked }),
+                            type: "checkbox"
+                          }
+                        ),
+                        "Allow visitors to skip this step"
+                      ] }),
+                      /* @__PURE__ */ jsxs27("div", { className: "orion-admin-field-list-header", children: [
+                        /* @__PURE__ */ jsxs27("div", { children: [
+                          /* @__PURE__ */ jsx30("strong", { children: "Fields in this step" }),
+                          /* @__PURE__ */ jsx30("span", { children: "These appear together before the visitor moves to the next step." })
+                        ] }),
+                        /* @__PURE__ */ jsx30(
+                          "button",
+                          {
+                            className: "orion-admin-action-button orion-admin-action-button--ghost",
+                            onClick: () => setEditorState(
+                              (current) => current ? {
+                                ...current,
+                                steps: current.steps.map(
+                                  (currentStep, index) => index === stepIndex ? { ...currentStep, fields: [...getFields(currentStep), blankField()] } : currentStep
+                                )
+                              } : current
+                            ),
+                            type: "button",
+                            children: "Add field"
+                          }
+                        )
+                      ] }),
+                      fields.length > 0 ? /* @__PURE__ */ jsx30("div", { className: "orion-admin-field-editor-list", children: fields.map((field, fieldIndex) => {
+                        const label = getFieldLabel(field, fieldIndex);
+                        const fieldType = getNonEmptyText(field.type, "text");
+                        return /* @__PURE__ */ jsxs27("details", { className: "orion-admin-field-editor", children: [
+                          /* @__PURE__ */ jsxs27("summary", { className: "orion-admin-field-editor-summary", children: [
+                            /* @__PURE__ */ jsx30("span", { className: "orion-admin-field-order", children: fieldIndex + 1 }),
+                            /* @__PURE__ */ jsx30("span", { className: "orion-admin-field-editor-title", children: label }),
+                            /* @__PURE__ */ jsxs27("span", { className: "orion-admin-field-editor-meta", children: [
+                              formatFieldTypeLabel(fieldType),
+                              field.required === true ? " \xB7 Required" : ""
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsxs27("div", { className: "orion-admin-field-editor-body", children: [
+                            /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-actions", children: [
+                              /* @__PURE__ */ jsx30(
+                                "button",
+                                {
+                                  className: "orion-admin-action-button orion-admin-action-button--ghost",
+                                  disabled: fieldIndex === 0,
+                                  onClick: () => moveField(stepIndex, fieldIndex, -1),
+                                  type: "button",
+                                  children: "Move up"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx30(
+                                "button",
+                                {
+                                  className: "orion-admin-action-button orion-admin-action-button--ghost",
+                                  disabled: fieldIndex === fields.length - 1,
+                                  onClick: () => moveField(stepIndex, fieldIndex, 1),
+                                  type: "button",
+                                  children: "Move down"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx30(
+                                "button",
+                                {
+                                  className: "orion-admin-action-button orion-admin-action-button--ghost",
+                                  onClick: () => setEditorState((current) => {
+                                    if (!current) return current;
+                                    return {
+                                      ...current,
+                                      steps: current.steps.map(
+                                        (currentStep, index) => index === stepIndex ? {
+                                          ...currentStep,
+                                          fields: getFields(currentStep).filter(
+                                            (_, currentFieldIndex) => currentFieldIndex !== fieldIndex
+                                          )
+                                        } : currentStep
+                                      )
+                                    };
+                                  }),
+                                  type: "button",
+                                  children: "Remove field"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-settings-grid", children: [
+                              /* @__PURE__ */ jsxs27("label", { children: [
+                                "Field label",
+                                /* @__PURE__ */ jsx30(
+                                  "input",
+                                  {
+                                    onChange: (event) => {
+                                      const nextLabel = event.target.value;
+                                      const currentName = getNonEmptyText(field.name);
+                                      updateField(stepIndex, fieldIndex, {
+                                        label: nextLabel,
+                                        name: currentName || slugifyFieldName(nextLabel)
+                                      });
+                                    },
+                                    type: "text",
+                                    value: label
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs27("label", { children: [
+                                "Field type",
+                                /* @__PURE__ */ jsx30(
+                                  "select",
+                                  {
+                                    onChange: (event) => updateField(stepIndex, fieldIndex, { type: event.target.value }),
+                                    value: fieldType,
+                                    children: fieldTypeOptions.map((option) => /* @__PURE__ */ jsx30("option", { value: option, children: formatFieldTypeLabel(option) }, option))
+                                  }
+                                )
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxs27("label", { children: [
+                              "Field key",
+                              /* @__PURE__ */ jsx30(
+                                "input",
+                                {
+                                  onChange: (event) => updateField(stepIndex, fieldIndex, { name: event.target.value }),
+                                  type: "text",
+                                  value: getNonEmptyText(field.name)
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs27("label", { style: checkboxLabelStyle, children: [
+                              /* @__PURE__ */ jsx30(
+                                "input",
+                                {
+                                  checked: field.required === true,
+                                  onChange: (event) => updateField(stepIndex, fieldIndex, { required: event.target.checked }),
+                                  type: "checkbox"
+                                }
+                              ),
+                              "Required"
+                            ] }),
+                            /* @__PURE__ */ jsxs27("label", { children: [
+                              "Help text",
+                              /* @__PURE__ */ jsx30(
+                                "textarea",
+                                {
+                                  onChange: (event) => updateField(stepIndex, fieldIndex, { helpText: event.target.value }),
+                                  rows: 2,
+                                  value: getNonEmptyText(field.helpText)
+                                }
+                              )
+                            ] }),
+                            ["select", "radio", "checkbox-group"].includes(fieldType) ? /* @__PURE__ */ jsxs27("label", { children: [
+                              "Options",
+                              /* @__PURE__ */ jsx30(
+                                "textarea",
+                                {
+                                  onChange: (event) => updateField(stepIndex, fieldIndex, {
+                                    options: fromOptionsText(event.target.value)
+                                  }),
+                                  placeholder: "Option one\nOption two",
+                                  rows: 4,
+                                  value: toOptionsText(field.options)
+                                }
+                              )
+                            ] }) : null
+                          ] })
+                        ] }, `edit-field-${stepIndex}-${fieldIndex}`);
+                      }) }) : /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
+                        /* @__PURE__ */ jsx30("strong", { children: "No fields in this step" }),
+                        /* @__PURE__ */ jsx30("span", { children: "Add a field so visitors have something to answer here." })
+                      ] })
+                    ] })
+                  ] }, `edit-step-${stepIndex}`);
+                }) })
               ] }),
-              /* @__PURE__ */ jsx30("div", { className: "orion-admin-list-meta", children: "Edit the public workflow as JSON. The saved payload must remain an array of step objects compatible with the form collection schema." }),
               /* @__PURE__ */ jsx30("button", { disabled: saving, type: "submit", children: saving ? "Saving..." : "Save Form" })
             ] })
-          ] }),
-          /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card", children: [
-            /* @__PURE__ */ jsx30("strong", { children: "Current structure payload" }),
-            /* @__PURE__ */ jsx30("span", { children: "Reference snapshot of the form steps that will be written back on save." }),
-            /* @__PURE__ */ jsx30("pre", { style: { ...codeStyle, marginTop: "1rem" }, children: editorState.stepsText })
           ] })
         ] }) : null
       ]
@@ -6489,25 +6854,17 @@ function AdminStudioFormDetailView(props) {
 import Link5 from "next/link";
 import { useEffect as useEffect19, useMemo as useMemo15, useState as useState20 } from "react";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
-var codeStyle2 = {
-  background: "color-mix(in srgb, var(--orion-admin-card-bg) 82%, black)",
-  border: "1px solid var(--orion-admin-card-border)",
-  borderRadius: "var(--orion-admin-radius-sm)",
-  color: "var(--orion-admin-text)",
-  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-  fontSize: "0.86rem",
-  lineHeight: 1.55,
-  margin: 0,
-  maxHeight: "28rem",
-  overflow: "auto",
-  padding: "0.9rem",
-  whiteSpace: "pre-wrap"
-};
 var sectionGridStyle2 = {
   display: "grid",
   gap: "1rem",
   gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))"
 };
+var nestedListStyle = {
+  display: "grid",
+  gap: "0.45rem",
+  margin: 0,
+  padding: 0
+};
 var renderFieldValue = (value) => {
   if (value === null || value === void 0) {
     return /* @__PURE__ */ jsx31("span", { className: "orion-admin-list-meta", children: "No value" });
@@ -6521,7 +6878,26 @@ var renderFieldValue = (value) => {
   if (typeof value === "string") {
     return value.trim().length > 0 ? value : /* @__PURE__ */ jsx31("span", { className: "orion-admin-list-meta", children: "No value" });
   }
-  return /* @__PURE__ */ jsx31("pre", { style: codeStyle2, children: JSON.stringify(value, null, 2) });
+  if (Array.isArray(value)) {
+    const entries = value.filter((entry) => entry !== null && entry !== void 0 && entry !== "");
+    if (entries.length === 0) {
+      return /* @__PURE__ */ jsx31("span", { className: "orion-admin-list-meta", children: "No value" });
+    }
+    return /* @__PURE__ */ jsx31("ul", { style: nestedListStyle, children: entries.map((entry, index) => /* @__PURE__ */ jsx31("li", { children: renderFieldValue(entry) }, index)) });
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value).filter(
+      ([, entryValue]) => entryValue !== null && entryValue !== void 0 && entryValue !== ""
+    );
+    if (entries.length === 0) {
+      return /* @__PURE__ */ jsx31("span", { className: "orion-admin-list-meta", children: "No value" });
+    }
+    return /* @__PURE__ */ jsx31("div", { style: { display: "grid", gap: "0.65rem" }, children: entries.map(([key, entryValue]) => /* @__PURE__ */ jsxs28("div", { className: "orion-admin-meta-row", children: [
+      /* @__PURE__ */ jsx31("span", { className: "orion-admin-meta-label", children: humanizeKey2(key) }),
+      /* @__PURE__ */ jsx31("span", { className: "orion-admin-meta-value", children: renderFieldValue(entryValue) })
+    ] }, key)) });
+  }
+  return String(value);
 };
 function getSubmissionIDFromPathname(pathname) {
   return getIDFromPathname(pathname, "/forms/submissions/");
@@ -6673,31 +7049,24 @@ function AdminStudioFormSubmissionView(props) {
             /* @__PURE__ */ jsxs28("article", { className: "orion-admin-overview-stat", children: [
               /* @__PURE__ */ jsx31("span", { className: "orion-admin-overview-stat-label", children: "Highlighted answers" }),
               /* @__PURE__ */ jsx31("strong", { children: previewFields.length }),
-              /* @__PURE__ */ jsx31("p", { children: "Readable answer previews surfaced from the structured payload." })
+              /* @__PURE__ */ jsx31("p", { children: "Readable answer previews from this response." })
             ] })
           ] }),
           /* @__PURE__ */ jsxs28("div", { style: sectionGridStyle2, children: [
-            /* @__PURE__ */ jsxs28("div", { style: { display: "grid", gap: "1rem" }, children: [
-              /* @__PURE__ */ jsxs28("div", { className: "orion-admin-card", children: [
-                /* @__PURE__ */ jsx31("strong", { children: "Response details" }),
-                /* @__PURE__ */ jsx31("span", { children: "Formatted answers using the current form field labels when available." }),
-                /* @__PURE__ */ jsx31("div", { style: { display: "grid", gap: "0.85rem", marginTop: "1rem" }, children: answerEntries.length > 0 ? answerEntries.map(([key, value]) => /* @__PURE__ */ jsxs28("div", { className: "orion-admin-form", children: [
-                  /* @__PURE__ */ jsxs28("div", { children: [
-                    /* @__PURE__ */ jsx31("strong", { children: fieldLabels.get(key) || humanizeKey2(key) }),
-                    /* @__PURE__ */ jsx31("div", { className: "orion-admin-list-meta", children: key })
-                  ] }),
-                  /* @__PURE__ */ jsx31("div", { children: renderFieldValue(value) })
-                ] }, key)) : /* @__PURE__ */ jsxs28("div", { className: "orion-admin-empty-state", children: [
-                  /* @__PURE__ */ jsx31("strong", { children: "No response payload" }),
-                  /* @__PURE__ */ jsx31("span", { children: "This submission does not contain a structured data object." })
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsxs28("div", { className: "orion-admin-card", children: [
-                /* @__PURE__ */ jsx31("strong", { children: "Raw payload" }),
-                /* @__PURE__ */ jsx31("span", { children: "Verbatim submission data for troubleshooting or export checks." }),
-                /* @__PURE__ */ jsx31("pre", { style: { ...codeStyle2, marginTop: "1rem" }, children: JSON.stringify(doc.data ?? {}, null, 2) })
-              ] })
-            ] }),
+            /* @__PURE__ */ jsx31("div", { style: { display: "grid", gap: "1rem" }, children: /* @__PURE__ */ jsxs28("div", { className: "orion-admin-card", children: [
+              /* @__PURE__ */ jsx31("strong", { children: "Response details" }),
+              /* @__PURE__ */ jsx31("span", { children: "Formatted answers using the current form field labels when available." }),
+              /* @__PURE__ */ jsx31("div", { style: { display: "grid", gap: "0.85rem", marginTop: "1rem" }, children: answerEntries.length > 0 ? answerEntries.map(([key, value]) => /* @__PURE__ */ jsxs28("div", { className: "orion-admin-form", children: [
+                /* @__PURE__ */ jsxs28("div", { children: [
+                  /* @__PURE__ */ jsx31("strong", { children: fieldLabels.get(key) || humanizeKey2(key) }),
+                  /* @__PURE__ */ jsx31("div", { className: "orion-admin-list-meta", children: key })
+                ] }),
+                /* @__PURE__ */ jsx31("div", { children: renderFieldValue(value) })
+              ] }, key)) : /* @__PURE__ */ jsxs28("div", { className: "orion-admin-empty-state", children: [
+                /* @__PURE__ */ jsx31("strong", { children: "No answers available" }),
+                /* @__PURE__ */ jsx31("span", { children: "This submission does not contain visible response details." })
+              ] }) })
+            ] }) }),
             /* @__PURE__ */ jsxs28("div", { style: { display: "grid", gap: "1rem" }, children: [
               /* @__PURE__ */ jsxs28("div", { className: "orion-admin-card orion-admin-meta-table", children: [
                 /* @__PURE__ */ jsxs28("div", { className: "orion-admin-meta-row", children: [