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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/admin/client.js +251 -125
  2. package/dist/admin/client.mjs +251 -125
  3. package/dist/admin-app/styles.css +176 -0
  4. package/package.json +1 -1
package/dist/admin/client.js CHANGED
@@ -8337,6 +8337,24 @@ var blankStep = () => ({
8337
8337
  fields: [blankField()],
8338
8338
  title: "New step"
8339
8339
  });
8340
+ var getStepTitle = (step, stepIndex) => getNonEmptyText(step.title, `Step ${stepIndex + 1}`);
8341
+ var getFieldLabel = (field, fieldIndex) => getNonEmptyText(field.label, getNonEmptyText(field.name, `Field ${fieldIndex + 1}`));
8342
+ var formatFieldTypeLabel = (value) => getNonEmptyText(value, "text").replace(/-/g, " ").replace(/^./, (char) => char.toUpperCase());
8343
+ var getStepDestination = (stepIndex, stepCount) => {
8344
+ if (stepIndex < stepCount - 1) {
8345
+ return `Next: Step ${stepIndex + 2}`;
8346
+ }
8347
+ return "Then: Submit form";
8348
+ };
8349
+ var moveItem = (items, fromIndex, toIndex) => {
8350
+ if (toIndex < 0 || toIndex >= items.length) {
8351
+ return items;
8352
+ }
8353
+ const nextItems = [...items];
8354
+ const [item] = nextItems.splice(fromIndex, 1);
8355
+ nextItems.splice(toIndex, 0, item);
8356
+ return nextItems;
8357
+ };
8340
8358
  function getFormIDFromPathname(pathname) {
8341
8359
  const marker = "/forms/";
8342
8360
  const raw = getIDFromPathname(pathname, marker);
@@ -8513,6 +8531,25 @@ function AdminStudioFormDetailView(props) {
8513
8531
  };
8514
8532
  });
8515
8533
  };
8534
+ const moveStep = (stepIndex, direction) => {
8535
+ setEditorState(
8536
+ (current) => current ? {
8537
+ ...current,
8538
+ steps: moveItem(current.steps, stepIndex, stepIndex + direction)
8539
+ } : current
8540
+ );
8541
+ };
8542
+ const moveField = (stepIndex, fieldIndex, direction) => {
8543
+ setEditorState((current) => {
8544
+ if (!current) return current;
8545
+ return {
8546
+ ...current,
8547
+ steps: current.steps.map(
8548
+ (step, index) => index === stepIndex ? { ...step, fields: moveItem(getFields(step), fieldIndex, fieldIndex + direction) } : step
8549
+ )
8550
+ };
8551
+ });
8552
+ };
8516
8553
  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
8517
8554
  AdminPage,
8518
8555
  {
@@ -8827,16 +8864,84 @@ function AdminStudioFormDetailView(props) {
8827
8864
  ] })
8828
8865
  ] })
8829
8866
  ] }),
8830
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-card", children: [
8831
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: "Form steps" }),
8832
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Edit the public workflow with plain labels and field settings." }),
8833
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "grid", gap: "1rem", marginTop: "1rem" }, children: [
8834
- editorState.steps.map((step, stepIndex) => {
8835
- const fields = getFields(step);
8836
- const title2 = getNonEmptyText(step.title, `Step ${stepIndex + 1}`);
8837
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-form", children: [
8838
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-inline-actions", style: { justifyContent: "space-between" }, children: [
8839
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: title2 }),
8867
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-card orion-admin-workflow-editor", children: [
8868
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-workflow-editor-header", children: [
8869
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
8870
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: "Form steps" }),
8871
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Build the visitor flow, then edit each step's fields below." })
8872
+ ] }),
8873
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8874
+ "button",
8875
+ {
8876
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
8877
+ onClick: () => setEditorState(
8878
+ (current) => current ? { ...current, steps: [...current.steps, blankStep()] } : current
8879
+ ),
8880
+ type: "button",
8881
+ children: "Add step"
8882
+ }
8883
+ )
8884
+ ] }),
8885
+ 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) => {
8886
+ const fields = getFields(step);
8887
+ const requiredCount = fields.filter((field) => field.required === true).length;
8888
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-workflow-node", children: [
8889
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "orion-admin-workflow-node-number", children: stepIndex + 1 }),
8890
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-workflow-node-body", children: [
8891
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: getStepTitle(step, stepIndex) }),
8892
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { children: [
8893
+ fields.length,
8894
+ " field",
8895
+ fields.length === 1 ? "" : "s",
8896
+ requiredCount > 0 ? ` \xB7 ${requiredCount} required` : ""
8897
+ ] })
8898
+ ] }),
8899
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "orion-admin-workflow-node-destination", children: getStepDestination(stepIndex, editorState.steps.length) })
8900
+ ] }, `flow-step-${stepIndex}`);
8901
+ }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-empty-state", children: [
8902
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: "No steps configured" }),
8903
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Add a first step to start building the public form flow." })
8904
+ ] }),
8905
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "orion-admin-step-editor-list", children: editorState.steps.map((step, stepIndex) => {
8906
+ const fields = getFields(step);
8907
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("details", { className: "orion-admin-step-editor", open: true, children: [
8908
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("summary", { className: "orion-admin-step-editor-summary", children: [
8909
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "orion-admin-step-editor-index", children: [
8910
+ "Step ",
8911
+ stepIndex + 1
8912
+ ] }),
8913
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "orion-admin-step-editor-title", children: getStepTitle(step, stepIndex) }),
8914
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "orion-admin-step-editor-meta", children: [
8915
+ fields.length,
8916
+ " field",
8917
+ fields.length === 1 ? "" : "s",
8918
+ " \xB7",
8919
+ " ",
8920
+ getStepDestination(stepIndex, editorState.steps.length)
8921
+ ] })
8922
+ ] }),
8923
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-step-editor-body", children: [
8924
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-step-editor-actions", children: [
8925
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8926
+ "button",
8927
+ {
8928
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
8929
+ disabled: stepIndex === 0,
8930
+ onClick: () => moveStep(stepIndex, -1),
8931
+ type: "button",
8932
+ children: "Move up"
8933
+ }
8934
+ ),
8935
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8936
+ "button",
8937
+ {
8938
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
8939
+ disabled: stepIndex === editorState.steps.length - 1,
8940
+ onClick: () => moveStep(stepIndex, 1),
8941
+ type: "button",
8942
+ children: "Move down"
8943
+ }
8944
+ ),
8840
8945
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8841
8946
  "button",
8842
8947
  {
@@ -8852,16 +8957,30 @@ function AdminStudioFormDetailView(props) {
8852
8957
  }
8853
8958
  )
8854
8959
  ] }),
8855
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
8856
- "Step title",
8857
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8858
- "input",
8859
- {
8860
- onChange: (event) => updateStep(stepIndex, { title: event.target.value }),
8861
- type: "text",
8862
- value: getNonEmptyText(step.title)
8863
- }
8864
- )
8960
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-step-settings-grid", children: [
8961
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
8962
+ "Step title",
8963
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8964
+ "input",
8965
+ {
8966
+ onChange: (event) => updateStep(stepIndex, { title: event.target.value }),
8967
+ type: "text",
8968
+ value: getNonEmptyText(step.title)
8969
+ }
8970
+ )
8971
+ ] }),
8972
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
8973
+ "Next button label",
8974
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8975
+ "input",
8976
+ {
8977
+ onChange: (event) => updateStep(stepIndex, { nextLabel: event.target.value }),
8978
+ placeholder: "Next",
8979
+ type: "text",
8980
+ value: getNonEmptyText(step.nextLabel)
8981
+ }
8982
+ )
8983
+ ] })
8865
8984
  ] }),
8866
8985
  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
8867
8986
  "Step intro text",
@@ -8874,18 +8993,6 @@ function AdminStudioFormDetailView(props) {
8874
8993
  }
8875
8994
  )
8876
8995
  ] }),
8877
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
8878
- "Next button label",
8879
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8880
- "input",
8881
- {
8882
- onChange: (event) => updateStep(stepIndex, { nextLabel: event.target.value }),
8883
- placeholder: "Next",
8884
- type: "text",
8885
- value: getNonEmptyText(step.nextLabel)
8886
- }
8887
- )
8888
- ] }),
8889
8996
  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { style: checkboxLabelStyle, children: [
8890
8997
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8891
8998
  "input",
@@ -8897,62 +9004,116 @@ function AdminStudioFormDetailView(props) {
8897
9004
  ),
8898
9005
  "Allow visitors to skip this step"
8899
9006
  ] }),
8900
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "grid", gap: "0.85rem" }, children: [
8901
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: "Fields" }),
8902
- fields.map((field, fieldIndex) => {
8903
- const label = getNonEmptyText(field.label, `Field ${fieldIndex + 1}`);
8904
- const fieldType = getNonEmptyText(field.type, "text");
8905
- return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-card", children: [
8906
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
8907
- "div",
8908
- {
8909
- className: "orion-admin-inline-actions",
8910
- style: { justifyContent: "space-between" },
8911
- children: [
8912
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: label }),
8913
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8914
- "button",
8915
- {
8916
- className: "orion-admin-action-button orion-admin-action-button--ghost",
8917
- onClick: () => setEditorState((current) => {
8918
- if (!current) return current;
8919
- return {
8920
- ...current,
8921
- steps: current.steps.map(
8922
- (currentStep, index) => index === stepIndex ? {
8923
- ...currentStep,
8924
- fields: getFields(currentStep).filter(
8925
- (_, currentFieldIndex) => currentFieldIndex !== fieldIndex
8926
- )
8927
- } : currentStep
8928
- )
8929
- };
8930
- }),
8931
- type: "button",
8932
- children: "Remove field"
8933
- }
8934
- )
8935
- ]
8936
- }
9007
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-field-list-header", children: [
9008
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
9009
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: "Fields in this step" }),
9010
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "These appear together before the visitor moves to the next step." })
9011
+ ] }),
9012
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
9013
+ "button",
9014
+ {
9015
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
9016
+ onClick: () => setEditorState(
9017
+ (current) => current ? {
9018
+ ...current,
9019
+ steps: current.steps.map(
9020
+ (currentStep, index) => index === stepIndex ? { ...currentStep, fields: [...getFields(currentStep), blankField()] } : currentStep
9021
+ )
9022
+ } : current
8937
9023
  ),
8938
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
8939
- "Field label",
9024
+ type: "button",
9025
+ children: "Add field"
9026
+ }
9027
+ )
9028
+ ] }),
9029
+ fields.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "orion-admin-field-editor-list", children: fields.map((field, fieldIndex) => {
9030
+ const label = getFieldLabel(field, fieldIndex);
9031
+ const fieldType = getNonEmptyText(field.type, "text");
9032
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("details", { className: "orion-admin-field-editor", children: [
9033
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("summary", { className: "orion-admin-field-editor-summary", children: [
9034
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "orion-admin-field-order", children: fieldIndex + 1 }),
9035
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "orion-admin-field-editor-title", children: label }),
9036
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "orion-admin-field-editor-meta", children: [
9037
+ formatFieldTypeLabel(fieldType),
9038
+ field.required === true ? " \xB7 Required" : ""
9039
+ ] })
9040
+ ] }),
9041
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-field-editor-body", children: [
9042
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-step-editor-actions", children: [
8940
9043
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8941
- "input",
9044
+ "button",
8942
9045
  {
8943
- onChange: (event) => {
8944
- const nextLabel = event.target.value;
8945
- const currentName = getNonEmptyText(field.name);
8946
- updateField(stepIndex, fieldIndex, {
8947
- label: nextLabel,
8948
- name: currentName || slugifyFieldName(nextLabel)
8949
- });
8950
- },
8951
- type: "text",
8952
- value: label
9046
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
9047
+ disabled: fieldIndex === 0,
9048
+ onClick: () => moveField(stepIndex, fieldIndex, -1),
9049
+ type: "button",
9050
+ children: "Move up"
9051
+ }
9052
+ ),
9053
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
9054
+ "button",
9055
+ {
9056
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
9057
+ disabled: fieldIndex === fields.length - 1,
9058
+ onClick: () => moveField(stepIndex, fieldIndex, 1),
9059
+ type: "button",
9060
+ children: "Move down"
9061
+ }
9062
+ ),
9063
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
9064
+ "button",
9065
+ {
9066
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
9067
+ onClick: () => setEditorState((current) => {
9068
+ if (!current) return current;
9069
+ return {
9070
+ ...current,
9071
+ steps: current.steps.map(
9072
+ (currentStep, index) => index === stepIndex ? {
9073
+ ...currentStep,
9074
+ fields: getFields(currentStep).filter(
9075
+ (_, currentFieldIndex) => currentFieldIndex !== fieldIndex
9076
+ )
9077
+ } : currentStep
9078
+ )
9079
+ };
9080
+ }),
9081
+ type: "button",
9082
+ children: "Remove field"
8953
9083
  }
8954
9084
  )
8955
9085
  ] }),
9086
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-step-settings-grid", children: [
9087
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
9088
+ "Field label",
9089
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
9090
+ "input",
9091
+ {
9092
+ onChange: (event) => {
9093
+ const nextLabel = event.target.value;
9094
+ const currentName = getNonEmptyText(field.name);
9095
+ updateField(stepIndex, fieldIndex, {
9096
+ label: nextLabel,
9097
+ name: currentName || slugifyFieldName(nextLabel)
9098
+ });
9099
+ },
9100
+ type: "text",
9101
+ value: label
9102
+ }
9103
+ )
9104
+ ] }),
9105
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
9106
+ "Field type",
9107
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
9108
+ "select",
9109
+ {
9110
+ onChange: (event) => updateField(stepIndex, fieldIndex, { type: event.target.value }),
9111
+ value: fieldType,
9112
+ children: fieldTypeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("option", { value: option, children: formatFieldTypeLabel(option) }, option))
9113
+ }
9114
+ )
9115
+ ] })
9116
+ ] }),
8956
9117
  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
8957
9118
  "Field key",
8958
9119
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -8964,17 +9125,6 @@ function AdminStudioFormDetailView(props) {
8964
9125
  }
8965
9126
  )
8966
9127
  ] }),
8967
- /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
8968
- "Field type",
8969
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8970
- "select",
8971
- {
8972
- onChange: (event) => updateField(stepIndex, fieldIndex, { type: event.target.value }),
8973
- value: fieldType,
8974
- children: fieldTypeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("option", { value: option, children: option }, option))
8975
- }
8976
- )
8977
- ] }),
8978
9128
  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { style: checkboxLabelStyle, children: [
8979
9129
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8980
9130
  "input",
@@ -9011,39 +9161,15 @@ function AdminStudioFormDetailView(props) {
9011
9161
  }
9012
9162
  )
9013
9163
  ] }) : null
9014
- ] }, `edit-field-${stepIndex}-${fieldIndex}`);
9015
- }),
9016
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
9017
- "button",
9018
- {
9019
- className: "orion-admin-action-button orion-admin-action-button--ghost",
9020
- onClick: () => setEditorState(
9021
- (current) => current ? {
9022
- ...current,
9023
- steps: current.steps.map(
9024
- (currentStep, index) => index === stepIndex ? { ...currentStep, fields: [...getFields(currentStep), blankField()] } : currentStep
9025
- )
9026
- } : current
9027
- ),
9028
- type: "button",
9029
- children: "Add field"
9030
- }
9031
- )
9164
+ ] })
9165
+ ] }, `edit-field-${stepIndex}-${fieldIndex}`);
9166
+ }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "orion-admin-empty-state", children: [
9167
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: "No fields in this step" }),
9168
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Add a field so visitors have something to answer here." })
9032
9169
  ] })
9033
- ] }, `edit-step-${stepIndex}`);
9034
- }),
9035
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
9036
- "button",
9037
- {
9038
- className: "orion-admin-action-button orion-admin-action-button--ghost",
9039
- onClick: () => setEditorState(
9040
- (current) => current ? { ...current, steps: [...current.steps, blankStep()] } : current
9041
- ),
9042
- type: "button",
9043
- children: "Add step"
9044
- }
9045
- )
9046
- ] })
9170
+ ] })
9171
+ ] }, `edit-step-${stepIndex}`);
9172
+ }) })
9047
9173
  ] }),
9048
9174
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { disabled: saving, type: "submit", children: saving ? "Saving..." : "Save Form" })
9049
9175
  ] })
package/dist/admin/client.mjs CHANGED
@@ -6007,6 +6007,24 @@ var blankStep = () => ({
6007
6007
  fields: [blankField()],
6008
6008
  title: "New step"
6009
6009
  });
6010
+ var getStepTitle = (step, stepIndex) => getNonEmptyText(step.title, `Step ${stepIndex + 1}`);
6011
+ var getFieldLabel = (field, fieldIndex) => getNonEmptyText(field.label, getNonEmptyText(field.name, `Field ${fieldIndex + 1}`));
6012
+ var formatFieldTypeLabel = (value) => getNonEmptyText(value, "text").replace(/-/g, " ").replace(/^./, (char) => char.toUpperCase());
6013
+ var getStepDestination = (stepIndex, stepCount) => {
6014
+ if (stepIndex < stepCount - 1) {
6015
+ return `Next: Step ${stepIndex + 2}`;
6016
+ }
6017
+ return "Then: Submit form";
6018
+ };
6019
+ var moveItem = (items, fromIndex, toIndex) => {
6020
+ if (toIndex < 0 || toIndex >= items.length) {
6021
+ return items;
6022
+ }
6023
+ const nextItems = [...items];
6024
+ const [item] = nextItems.splice(fromIndex, 1);
6025
+ nextItems.splice(toIndex, 0, item);
6026
+ return nextItems;
6027
+ };
6010
6028
  function getFormIDFromPathname(pathname) {
6011
6029
  const marker = "/forms/";
6012
6030
  const raw = getIDFromPathname(pathname, marker);
@@ -6183,6 +6201,25 @@ function AdminStudioFormDetailView(props) {
6183
6201
  };
6184
6202
  });
6185
6203
  };
6204
+ const moveStep = (stepIndex, direction) => {
6205
+ setEditorState(
6206
+ (current) => current ? {
6207
+ ...current,
6208
+ steps: moveItem(current.steps, stepIndex, stepIndex + direction)
6209
+ } : current
6210
+ );
6211
+ };
6212
+ const moveField = (stepIndex, fieldIndex, direction) => {
6213
+ setEditorState((current) => {
6214
+ if (!current) return current;
6215
+ return {
6216
+ ...current,
6217
+ steps: current.steps.map(
6218
+ (step, index) => index === stepIndex ? { ...step, fields: moveItem(getFields(step), fieldIndex, fieldIndex + direction) } : step
6219
+ )
6220
+ };
6221
+ });
6222
+ };
6186
6223
  return /* @__PURE__ */ jsx30(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs27(
6187
6224
  AdminPage,
6188
6225
  {
@@ -6497,16 +6534,84 @@ function AdminStudioFormDetailView(props) {
6497
6534
  ] })
6498
6535
  ] })
6499
6536
  ] }),
6500
- /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card", children: [
6501
- /* @__PURE__ */ jsx30("strong", { children: "Form steps" }),
6502
- /* @__PURE__ */ jsx30("span", { children: "Edit the public workflow with plain labels and field settings." }),
6503
- /* @__PURE__ */ jsxs27("div", { style: { display: "grid", gap: "1rem", marginTop: "1rem" }, children: [
6504
- editorState.steps.map((step, stepIndex) => {
6505
- const fields = getFields(step);
6506
- const title2 = getNonEmptyText(step.title, `Step ${stepIndex + 1}`);
6507
- return /* @__PURE__ */ jsxs27("div", { className: "orion-admin-form", children: [
6508
- /* @__PURE__ */ jsxs27("div", { className: "orion-admin-inline-actions", style: { justifyContent: "space-between" }, children: [
6509
- /* @__PURE__ */ jsx30("strong", { children: title2 }),
6537
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card orion-admin-workflow-editor", children: [
6538
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-workflow-editor-header", children: [
6539
+ /* @__PURE__ */ jsxs27("div", { children: [
6540
+ /* @__PURE__ */ jsx30("strong", { children: "Form steps" }),
6541
+ /* @__PURE__ */ jsx30("span", { children: "Build the visitor flow, then edit each step's fields below." })
6542
+ ] }),
6543
+ /* @__PURE__ */ jsx30(
6544
+ "button",
6545
+ {
6546
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
6547
+ onClick: () => setEditorState(
6548
+ (current) => current ? { ...current, steps: [...current.steps, blankStep()] } : current
6549
+ ),
6550
+ type: "button",
6551
+ children: "Add step"
6552
+ }
6553
+ )
6554
+ ] }),
6555
+ editorState.steps.length > 0 ? /* @__PURE__ */ jsx30("div", { className: "orion-admin-workflow-map", "aria-label": "Form step flow", children: editorState.steps.map((step, stepIndex) => {
6556
+ const fields = getFields(step);
6557
+ const requiredCount = fields.filter((field) => field.required === true).length;
6558
+ return /* @__PURE__ */ jsxs27("div", { className: "orion-admin-workflow-node", children: [
6559
+ /* @__PURE__ */ jsx30("div", { className: "orion-admin-workflow-node-number", children: stepIndex + 1 }),
6560
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-workflow-node-body", children: [
6561
+ /* @__PURE__ */ jsx30("strong", { children: getStepTitle(step, stepIndex) }),
6562
+ /* @__PURE__ */ jsxs27("span", { children: [
6563
+ fields.length,
6564
+ " field",
6565
+ fields.length === 1 ? "" : "s",
6566
+ requiredCount > 0 ? ` \xB7 ${requiredCount} required` : ""
6567
+ ] })
6568
+ ] }),
6569
+ /* @__PURE__ */ jsx30("div", { className: "orion-admin-workflow-node-destination", children: getStepDestination(stepIndex, editorState.steps.length) })
6570
+ ] }, `flow-step-${stepIndex}`);
6571
+ }) }) : /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
6572
+ /* @__PURE__ */ jsx30("strong", { children: "No steps configured" }),
6573
+ /* @__PURE__ */ jsx30("span", { children: "Add a first step to start building the public form flow." })
6574
+ ] }),
6575
+ /* @__PURE__ */ jsx30("div", { className: "orion-admin-step-editor-list", children: editorState.steps.map((step, stepIndex) => {
6576
+ const fields = getFields(step);
6577
+ return /* @__PURE__ */ jsxs27("details", { className: "orion-admin-step-editor", open: true, children: [
6578
+ /* @__PURE__ */ jsxs27("summary", { className: "orion-admin-step-editor-summary", children: [
6579
+ /* @__PURE__ */ jsxs27("span", { className: "orion-admin-step-editor-index", children: [
6580
+ "Step ",
6581
+ stepIndex + 1
6582
+ ] }),
6583
+ /* @__PURE__ */ jsx30("span", { className: "orion-admin-step-editor-title", children: getStepTitle(step, stepIndex) }),
6584
+ /* @__PURE__ */ jsxs27("span", { className: "orion-admin-step-editor-meta", children: [
6585
+ fields.length,
6586
+ " field",
6587
+ fields.length === 1 ? "" : "s",
6588
+ " \xB7",
6589
+ " ",
6590
+ getStepDestination(stepIndex, editorState.steps.length)
6591
+ ] })
6592
+ ] }),
6593
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-body", children: [
6594
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-actions", children: [
6595
+ /* @__PURE__ */ jsx30(
6596
+ "button",
6597
+ {
6598
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
6599
+ disabled: stepIndex === 0,
6600
+ onClick: () => moveStep(stepIndex, -1),
6601
+ type: "button",
6602
+ children: "Move up"
6603
+ }
6604
+ ),
6605
+ /* @__PURE__ */ jsx30(
6606
+ "button",
6607
+ {
6608
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
6609
+ disabled: stepIndex === editorState.steps.length - 1,
6610
+ onClick: () => moveStep(stepIndex, 1),
6611
+ type: "button",
6612
+ children: "Move down"
6613
+ }
6614
+ ),
6510
6615
  /* @__PURE__ */ jsx30(
6511
6616
  "button",
6512
6617
  {
@@ -6522,16 +6627,30 @@ function AdminStudioFormDetailView(props) {
6522
6627
  }
6523
6628
  )
6524
6629
  ] }),
6525
- /* @__PURE__ */ jsxs27("label", { children: [
6526
- "Step title",
6527
- /* @__PURE__ */ jsx30(
6528
- "input",
6529
- {
6530
- onChange: (event) => updateStep(stepIndex, { title: event.target.value }),
6531
- type: "text",
6532
- value: getNonEmptyText(step.title)
6533
- }
6534
- )
6630
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-settings-grid", children: [
6631
+ /* @__PURE__ */ jsxs27("label", { children: [
6632
+ "Step title",
6633
+ /* @__PURE__ */ jsx30(
6634
+ "input",
6635
+ {
6636
+ onChange: (event) => updateStep(stepIndex, { title: event.target.value }),
6637
+ type: "text",
6638
+ value: getNonEmptyText(step.title)
6639
+ }
6640
+ )
6641
+ ] }),
6642
+ /* @__PURE__ */ jsxs27("label", { children: [
6643
+ "Next button label",
6644
+ /* @__PURE__ */ jsx30(
6645
+ "input",
6646
+ {
6647
+ onChange: (event) => updateStep(stepIndex, { nextLabel: event.target.value }),
6648
+ placeholder: "Next",
6649
+ type: "text",
6650
+ value: getNonEmptyText(step.nextLabel)
6651
+ }
6652
+ )
6653
+ ] })
6535
6654
  ] }),
6536
6655
  /* @__PURE__ */ jsxs27("label", { children: [
6537
6656
  "Step intro text",
@@ -6544,18 +6663,6 @@ function AdminStudioFormDetailView(props) {
6544
6663
  }
6545
6664
  )
6546
6665
  ] }),
6547
- /* @__PURE__ */ jsxs27("label", { children: [
6548
- "Next button label",
6549
- /* @__PURE__ */ jsx30(
6550
- "input",
6551
- {
6552
- onChange: (event) => updateStep(stepIndex, { nextLabel: event.target.value }),
6553
- placeholder: "Next",
6554
- type: "text",
6555
- value: getNonEmptyText(step.nextLabel)
6556
- }
6557
- )
6558
- ] }),
6559
6666
  /* @__PURE__ */ jsxs27("label", { style: checkboxLabelStyle, children: [
6560
6667
  /* @__PURE__ */ jsx30(
6561
6668
  "input",
@@ -6567,62 +6674,116 @@ function AdminStudioFormDetailView(props) {
6567
6674
  ),
6568
6675
  "Allow visitors to skip this step"
6569
6676
  ] }),
6570
- /* @__PURE__ */ jsxs27("div", { style: { display: "grid", gap: "0.85rem" }, children: [
6571
- /* @__PURE__ */ jsx30("strong", { children: "Fields" }),
6572
- fields.map((field, fieldIndex) => {
6573
- const label = getNonEmptyText(field.label, `Field ${fieldIndex + 1}`);
6574
- const fieldType = getNonEmptyText(field.type, "text");
6575
- return /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card", children: [
6576
- /* @__PURE__ */ jsxs27(
6577
- "div",
6578
- {
6579
- className: "orion-admin-inline-actions",
6580
- style: { justifyContent: "space-between" },
6581
- children: [
6582
- /* @__PURE__ */ jsx30("strong", { children: label }),
6583
- /* @__PURE__ */ jsx30(
6584
- "button",
6585
- {
6586
- className: "orion-admin-action-button orion-admin-action-button--ghost",
6587
- onClick: () => setEditorState((current) => {
6588
- if (!current) return current;
6589
- return {
6590
- ...current,
6591
- steps: current.steps.map(
6592
- (currentStep, index) => index === stepIndex ? {
6593
- ...currentStep,
6594
- fields: getFields(currentStep).filter(
6595
- (_, currentFieldIndex) => currentFieldIndex !== fieldIndex
6596
- )
6597
- } : currentStep
6598
- )
6599
- };
6600
- }),
6601
- type: "button",
6602
- children: "Remove field"
6603
- }
6604
- )
6605
- ]
6606
- }
6677
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-field-list-header", children: [
6678
+ /* @__PURE__ */ jsxs27("div", { children: [
6679
+ /* @__PURE__ */ jsx30("strong", { children: "Fields in this step" }),
6680
+ /* @__PURE__ */ jsx30("span", { children: "These appear together before the visitor moves to the next step." })
6681
+ ] }),
6682
+ /* @__PURE__ */ jsx30(
6683
+ "button",
6684
+ {
6685
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
6686
+ onClick: () => setEditorState(
6687
+ (current) => current ? {
6688
+ ...current,
6689
+ steps: current.steps.map(
6690
+ (currentStep, index) => index === stepIndex ? { ...currentStep, fields: [...getFields(currentStep), blankField()] } : currentStep
6691
+ )
6692
+ } : current
6607
6693
  ),
6608
- /* @__PURE__ */ jsxs27("label", { children: [
6609
- "Field label",
6694
+ type: "button",
6695
+ children: "Add field"
6696
+ }
6697
+ )
6698
+ ] }),
6699
+ fields.length > 0 ? /* @__PURE__ */ jsx30("div", { className: "orion-admin-field-editor-list", children: fields.map((field, fieldIndex) => {
6700
+ const label = getFieldLabel(field, fieldIndex);
6701
+ const fieldType = getNonEmptyText(field.type, "text");
6702
+ return /* @__PURE__ */ jsxs27("details", { className: "orion-admin-field-editor", children: [
6703
+ /* @__PURE__ */ jsxs27("summary", { className: "orion-admin-field-editor-summary", children: [
6704
+ /* @__PURE__ */ jsx30("span", { className: "orion-admin-field-order", children: fieldIndex + 1 }),
6705
+ /* @__PURE__ */ jsx30("span", { className: "orion-admin-field-editor-title", children: label }),
6706
+ /* @__PURE__ */ jsxs27("span", { className: "orion-admin-field-editor-meta", children: [
6707
+ formatFieldTypeLabel(fieldType),
6708
+ field.required === true ? " \xB7 Required" : ""
6709
+ ] })
6710
+ ] }),
6711
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-field-editor-body", children: [
6712
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-actions", children: [
6610
6713
  /* @__PURE__ */ jsx30(
6611
- "input",
6714
+ "button",
6612
6715
  {
6613
- onChange: (event) => {
6614
- const nextLabel = event.target.value;
6615
- const currentName = getNonEmptyText(field.name);
6616
- updateField(stepIndex, fieldIndex, {
6617
- label: nextLabel,
6618
- name: currentName || slugifyFieldName(nextLabel)
6619
- });
6620
- },
6621
- type: "text",
6622
- value: label
6716
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
6717
+ disabled: fieldIndex === 0,
6718
+ onClick: () => moveField(stepIndex, fieldIndex, -1),
6719
+ type: "button",
6720
+ children: "Move up"
6721
+ }
6722
+ ),
6723
+ /* @__PURE__ */ jsx30(
6724
+ "button",
6725
+ {
6726
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
6727
+ disabled: fieldIndex === fields.length - 1,
6728
+ onClick: () => moveField(stepIndex, fieldIndex, 1),
6729
+ type: "button",
6730
+ children: "Move down"
6731
+ }
6732
+ ),
6733
+ /* @__PURE__ */ jsx30(
6734
+ "button",
6735
+ {
6736
+ className: "orion-admin-action-button orion-admin-action-button--ghost",
6737
+ onClick: () => setEditorState((current) => {
6738
+ if (!current) return current;
6739
+ return {
6740
+ ...current,
6741
+ steps: current.steps.map(
6742
+ (currentStep, index) => index === stepIndex ? {
6743
+ ...currentStep,
6744
+ fields: getFields(currentStep).filter(
6745
+ (_, currentFieldIndex) => currentFieldIndex !== fieldIndex
6746
+ )
6747
+ } : currentStep
6748
+ )
6749
+ };
6750
+ }),
6751
+ type: "button",
6752
+ children: "Remove field"
6623
6753
  }
6624
6754
  )
6625
6755
  ] }),
6756
+ /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-settings-grid", children: [
6757
+ /* @__PURE__ */ jsxs27("label", { children: [
6758
+ "Field label",
6759
+ /* @__PURE__ */ jsx30(
6760
+ "input",
6761
+ {
6762
+ onChange: (event) => {
6763
+ const nextLabel = event.target.value;
6764
+ const currentName = getNonEmptyText(field.name);
6765
+ updateField(stepIndex, fieldIndex, {
6766
+ label: nextLabel,
6767
+ name: currentName || slugifyFieldName(nextLabel)
6768
+ });
6769
+ },
6770
+ type: "text",
6771
+ value: label
6772
+ }
6773
+ )
6774
+ ] }),
6775
+ /* @__PURE__ */ jsxs27("label", { children: [
6776
+ "Field type",
6777
+ /* @__PURE__ */ jsx30(
6778
+ "select",
6779
+ {
6780
+ onChange: (event) => updateField(stepIndex, fieldIndex, { type: event.target.value }),
6781
+ value: fieldType,
6782
+ children: fieldTypeOptions.map((option) => /* @__PURE__ */ jsx30("option", { value: option, children: formatFieldTypeLabel(option) }, option))
6783
+ }
6784
+ )
6785
+ ] })
6786
+ ] }),
6626
6787
  /* @__PURE__ */ jsxs27("label", { children: [
6627
6788
  "Field key",
6628
6789
  /* @__PURE__ */ jsx30(
@@ -6634,17 +6795,6 @@ function AdminStudioFormDetailView(props) {
6634
6795
  }
6635
6796
  )
6636
6797
  ] }),
6637
- /* @__PURE__ */ jsxs27("label", { children: [
6638
- "Field type",
6639
- /* @__PURE__ */ jsx30(
6640
- "select",
6641
- {
6642
- onChange: (event) => updateField(stepIndex, fieldIndex, { type: event.target.value }),
6643
- value: fieldType,
6644
- children: fieldTypeOptions.map((option) => /* @__PURE__ */ jsx30("option", { value: option, children: option }, option))
6645
- }
6646
- )
6647
- ] }),
6648
6798
  /* @__PURE__ */ jsxs27("label", { style: checkboxLabelStyle, children: [
6649
6799
  /* @__PURE__ */ jsx30(
6650
6800
  "input",
@@ -6681,39 +6831,15 @@ function AdminStudioFormDetailView(props) {
6681
6831
  }
6682
6832
  )
6683
6833
  ] }) : null
6684
- ] }, `edit-field-${stepIndex}-${fieldIndex}`);
6685
- }),
6686
- /* @__PURE__ */ jsx30(
6687
- "button",
6688
- {
6689
- className: "orion-admin-action-button orion-admin-action-button--ghost",
6690
- onClick: () => setEditorState(
6691
- (current) => current ? {
6692
- ...current,
6693
- steps: current.steps.map(
6694
- (currentStep, index) => index === stepIndex ? { ...currentStep, fields: [...getFields(currentStep), blankField()] } : currentStep
6695
- )
6696
- } : current
6697
- ),
6698
- type: "button",
6699
- children: "Add field"
6700
- }
6701
- )
6834
+ ] })
6835
+ ] }, `edit-field-${stepIndex}-${fieldIndex}`);
6836
+ }) }) : /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
6837
+ /* @__PURE__ */ jsx30("strong", { children: "No fields in this step" }),
6838
+ /* @__PURE__ */ jsx30("span", { children: "Add a field so visitors have something to answer here." })
6702
6839
  ] })
6703
- ] }, `edit-step-${stepIndex}`);
6704
- }),
6705
- /* @__PURE__ */ jsx30(
6706
- "button",
6707
- {
6708
- className: "orion-admin-action-button orion-admin-action-button--ghost",
6709
- onClick: () => setEditorState(
6710
- (current) => current ? { ...current, steps: [...current.steps, blankStep()] } : current
6711
- ),
6712
- type: "button",
6713
- children: "Add step"
6714
- }
6715
- )
6716
- ] })
6840
+ ] })
6841
+ ] }, `edit-step-${stepIndex}`);
6842
+ }) })
6717
6843
  ] }),
6718
6844
  /* @__PURE__ */ jsx30("button", { disabled: saving, type: "submit", children: saving ? "Saving..." : "Save Form" })
6719
6845
  ] })
package/dist/admin-app/styles.css CHANGED
@@ -1627,6 +1627,182 @@
1627
1627
  gap: 0.75rem;
1628
1628
  }
1629
1629
 
1630
+ .orion-admin-workflow-editor {
1631
+ gap: 1rem;
1632
+ }
1633
+
1634
+ .orion-admin-workflow-editor-header,
1635
+ .orion-admin-field-list-header {
1636
+ align-items: flex-start;
1637
+ display: flex;
1638
+ flex-wrap: wrap;
1639
+ gap: 0.8rem;
1640
+ justify-content: space-between;
1641
+ }
1642
+
1643
+ .orion-admin-workflow-map {
1644
+ display: grid;
1645
+ gap: 0.75rem;
1646
+ }
1647
+
1648
+ .orion-admin-workflow-node {
1649
+ align-items: center;
1650
+ background:
1651
+ linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-card-bg) 88%, white), var(--orion-admin-card-bg));
1652
+ border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 80%, transparent);
1653
+ border-radius: var(--orion-admin-radius-md);
1654
+ display: grid;
1655
+ gap: 0.75rem;
1656
+ grid-template-columns: auto minmax(0, 1fr) auto;
1657
+ padding: 0.85rem;
1658
+ position: relative;
1659
+ }
1660
+
1661
+ .orion-admin-workflow-node:not(:last-child)::after {
1662
+ background: color-mix(in srgb, var(--orion-admin-accent) 34%, var(--orion-admin-card-border));
1663
+ bottom: -0.75rem;
1664
+ content: '';
1665
+ height: 0.75rem;
1666
+ left: 1.42rem;
1667
+ position: absolute;
1668
+ width: 2px;
1669
+ }
1670
+
1671
+ .orion-admin-workflow-node-number,
1672
+ .orion-admin-step-editor-index,
1673
+ .orion-admin-field-order {
1674
+ align-items: center;
1675
+ background: var(--orion-admin-accent-subtle);
1676
+ border: 1px solid var(--orion-admin-accent-border);
1677
+ border-radius: var(--orion-admin-radius-pill);
1678
+ color: var(--orion-admin-accent);
1679
+ display: inline-flex;
1680
+ flex: 0 0 auto;
1681
+ font-size: 0.78rem;
1682
+ font-weight: 900;
1683
+ justify-content: center;
1684
+ }
1685
+
1686
+ .orion-admin-workflow-node-number {
1687
+ height: 2rem;
1688
+ width: 2rem;
1689
+ }
1690
+
1691
+ .orion-admin-workflow-node-body {
1692
+ display: grid;
1693
+ gap: 0.18rem;
1694
+ min-width: 0;
1695
+ }
1696
+
1697
+ .orion-admin-workflow-node-body strong,
1698
+ .orion-admin-step-editor-title,
1699
+ .orion-admin-field-editor-title {
1700
+ color: var(--orion-admin-text);
1701
+ overflow-wrap: anywhere;
1702
+ }
1703
+
1704
+ .orion-admin-workflow-node-body span,
1705
+ .orion-admin-workflow-node-destination,
1706
+ .orion-admin-step-editor-meta,
1707
+ .orion-admin-field-editor-meta,
1708
+ .orion-admin-field-list-header span {
1709
+ color: var(--orion-admin-muted);
1710
+ font-size: 0.86rem;
1711
+ }
1712
+
1713
+ .orion-admin-workflow-node-destination {
1714
+ background: color-mix(in srgb, var(--orion-admin-card-bg) 78%, white);
1715
+ border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 72%, transparent);
1716
+ border-radius: var(--orion-admin-radius-pill);
1717
+ font-weight: 800;
1718
+ padding: 0.35rem 0.65rem;
1719
+ white-space: nowrap;
1720
+ }
1721
+
1722
+ .orion-admin-step-editor-list,
1723
+ .orion-admin-field-editor-list {
1724
+ display: grid;
1725
+ gap: 0.85rem;
1726
+ }
1727
+
1728
+ .orion-admin-step-editor,
1729
+ .orion-admin-field-editor {
1730
+ background: color-mix(in srgb, var(--orion-admin-card-bg) 92%, white);
1731
+ border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 84%, transparent);
1732
+ border-radius: var(--orion-admin-radius-md);
1733
+ overflow: hidden;
1734
+ }
1735
+
1736
+ .orion-admin-step-editor-summary,
1737
+ .orion-admin-field-editor-summary {
1738
+ align-items: center;
1739
+ cursor: pointer;
1740
+ display: grid;
1741
+ gap: 0.65rem;
1742
+ grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) auto;
1743
+ list-style: none;
1744
+ min-height: 52px;
1745
+ padding: 0.75rem 0.9rem;
1746
+ }
1747
+
1748
+ .orion-admin-step-editor-summary::-webkit-details-marker,
1749
+ .orion-admin-field-editor-summary::-webkit-details-marker {
1750
+ display: none;
1751
+ }
1752
+
1753
+ .orion-admin-step-editor-summary::after,
1754
+ .orion-admin-field-editor-summary::after {
1755
+ color: var(--orion-admin-muted);
1756
+ content: 'Edit';
1757
+ font-size: 0.78rem;
1758
+ font-weight: 900;
1759
+ justify-self: end;
1760
+ text-transform: uppercase;
1761
+ }
1762
+
1763
+ .orion-admin-step-editor[open] > .orion-admin-step-editor-summary::after,
1764
+ .orion-admin-field-editor[open] > .orion-admin-field-editor-summary::after {
1765
+ content: 'Hide';
1766
+ }
1767
+
1768
+ .orion-admin-step-editor-index {
1769
+ min-height: 1.8rem;
1770
+ padding: 0 0.58rem;
1771
+ }
1772
+
1773
+ .orion-admin-field-order {
1774
+ height: 1.75rem;
1775
+ width: 1.75rem;
1776
+ }
1777
+
1778
+ .orion-admin-step-editor-body,
1779
+ .orion-admin-field-editor-body {
1780
+ border-top: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 72%, transparent);
1781
+ display: grid;
1782
+ gap: 0.85rem;
1783
+ padding: 0.95rem;
1784
+ }
1785
+
1786
+ .orion-admin-step-editor-actions {
1787
+ display: flex;
1788
+ flex-wrap: wrap;
1789
+ gap: 0.55rem;
1790
+ }
1791
+
1792
+ .orion-admin-step-settings-grid {
1793
+ display: grid;
1794
+ gap: 0.75rem;
1795
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
1796
+ }
1797
+
1798
+ .orion-admin-field-editor {
1799
+ border-radius: var(--orion-admin-radius-sm);
1800
+ }
1801
+
1802
+ .orion-admin-field-editor-summary {
1803
+ padding: 0.68rem 0.75rem;
1804
+ }
1805
+
1630
1806
  .orion-admin-response-stack.is-scrollable {
1631
1807
  mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
1632
1808
  max-height: 34rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.6.0-beta.26",
3
+ "version": "0.6.0-beta.27",
4
4
  "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
5
5
  "types": "./dist/index.d.ts",
6
6
  "main": "./dist/index.js",