@multiplatform.one/backoffice 7.34.4 → 7.35.0

package/dist/cjs/formBuilder/FieldPropertiesPanel.native.js

@@ -0,0 +1,237 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FieldPropertiesPanel_exports = {};
+__export(FieldPropertiesPanel_exports, {
+  FieldPropertiesPanel: () => FieldPropertiesPanel
+});
+module.exports = __toCommonJS(FieldPropertiesPanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.native.js");
+var import_fieldtypes = require("./fieldtypes.native.js");
+var import_model = require("./model.native.js");
+function FieldPropertiesPanel(param) {
+  var {
+    layout,
+    selection,
+    mode,
+    errors,
+    onChange
+  } = param;
+  var _ref, _ref1, _errors_node_key, _ref2, _error_label, _ref3, _ref4, _ref5;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [confirm, setConfirm] = (0, import_react.useState)(false);
+  var field = selection ? (0, import_model.findField)(layout, selection) : void 0;
+  var tab = layout.tabs.find(function (node2) {
+    return node2.key === selection;
+  });
+  var section = layout.tabs.flatMap(function (node2) {
+    return node2.sections;
+  }).find(function (node2) {
+    return node2.key === selection;
+  });
+  var column = layout.tabs.flatMap(function (node2) {
+    return node2.sections.flatMap(function (s) {
+      return s.columns;
+    });
+  }).find(function (node2) {
+    return node2.key === selection;
+  });
+  var node = (_ref = (_ref1 = field !== null && field !== void 0 ? field : tab) !== null && _ref1 !== void 0 ? _ref1 : section) !== null && _ref !== void 0 ? _ref : column;
+  if (!node) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+    size: "$2",
+    title: t("formBuilder.selectField", "Select a field to edit its properties")
+  });
+  var df = node.df;
+  var error = (_errors_node_key = errors[node.key]) !== null && _errors_node_key !== void 0 ? _errors_node_key : {};
+  var update = function update2(patch) {
+    return onChange(field ? (0, import_model.updateField)(layout, node.key, patch) : (0, import_model.updateBreak)(layout, node.key, patch));
+  };
+  var remove = function remove2() {
+    return onChange(field ? (0, import_model.removeField)(layout, node.key) : tab ? (0, import_model.removeTab)(layout, node.key) : section ? (0, import_model.removeSection)(layout, node.key) : (0, import_model.removeColumn)(layout, node.key));
+  };
+  var deletable = !field || (0, import_model.canDeleteField)(field, mode);
+  var removable = field || (tab ? layout.tabs.length > 1 : section ? layout.tabs.length > 1 || layout.tabs[0].sections.length > 1 : layout.tabs.some(function (t2) {
+    return t2.sections.some(function (s) {
+      return s.columns.length > 1 && s.columns.some(function (c) {
+        return c.key === selection;
+      });
+    });
+  }));
+  var hint = df ? (0, import_fieldtypes.optionsHint)(df.fieldtype) : void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gap,
+    minWidth: 0,
+    testID: "form-builder-properties",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+      ...knobProps.heading,
+      children: field ? t("formBuilder.properties", "Field properties") : tab ? t("formBuilder.tabProperties", "Tab properties") : section ? t("formBuilder.sectionProperties", "Section properties") : t("formBuilder.columnProperties", "Column properties")
+    }), field ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...knobProps.gapSm,
+      minWidth: 0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.label,
+        numberOfLines: 1,
+        children: field.df.label || field.df.fieldname
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.body,
+        color: "$color11",
+        numberOfLines: 1,
+        children: field.df.fieldname
+      })]
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+      label: t("formBuilder.label", "Label"),
+      value: (_ref2 = df === null || df === void 0 ? void 0 : df.label) !== null && _ref2 !== void 0 ? _ref2 : "",
+      onChangeText: function onChangeText(label) {
+        return update({
+          label
+        });
+      },
+      error: (_error_label = error.label) !== null && _error_label !== void 0 ? _error_label : !field ? error.fieldname : void 0
+    }), field ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+        label: t("formBuilder.fieldname", "Fieldname"),
+        value: field.df.fieldname,
+        readOnly: !field.isNew,
+        onChangeText: function onChangeText(fieldname) {
+          return update({
+            fieldname
+          });
+        },
+        error: error.fieldname
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        label: t("formBuilder.fieldType", "Field Type"),
+        value: field.df.fieldtype,
+        options: import_fieldtypes.fieldtypeCatalog.map(function (entry) {
+          return {
+            value: entry.fieldtype,
+            label: t(entry.labelKey, entry.label)
+          };
+        }),
+        onChange: function onChange2(value) {
+          return update({
+            fieldtype: String(value)
+          });
+        },
+        error: error.fieldtype
+      }), hint ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+        label: t("formBuilder.optionsLabel", "Options"),
+        helperText: t(hint.key, hint.default),
+        value: String((_ref3 = df === null || df === void 0 ? void 0 : df.options) !== null && _ref3 !== void 0 ? _ref3 : ""),
+        onChange: function onChange2(options) {
+          return update({
+            options
+          });
+        },
+        error: error.options
+      }) : null, (0, import_fieldtypes.holdsValue)(field.df.fieldtype) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+        label: t("formBuilder.default", "Default"),
+        value: String((_ref4 = df === null || df === void 0 ? void 0 : df.default) !== null && _ref4 !== void 0 ? _ref4 : ""),
+        onChangeText: function onChangeText(value) {
+          return update({
+            default: value
+          });
+        },
+        error: error.default
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+        label: t("formBuilder.description", "Description"),
+        value: String((_ref5 = df === null || df === void 0 ? void 0 : df.description) !== null && _ref5 !== void 0 ? _ref5 : ""),
+        onChange: function onChange2(description) {
+          return update({
+            description
+          });
+        },
+        error: error.description
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gapSm,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+          ...knobProps.label,
+          children: t("formBuilder.behaviour", "Behaviour")
+        }), (0, import_fieldtypes.holdsValue)(field.df.fieldtype) ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+            label: t("formBuilder.mandatory", "Mandatory"),
+            checked: !!(df === null || df === void 0 ? void 0 : df.reqd),
+            onChange: function onChange2(value) {
+              return update({
+                reqd: value ? 1 : 0
+              });
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+            label: t("formBuilder.readOnly", "Read Only"),
+            checked: !!(df === null || df === void 0 ? void 0 : df.read_only),
+            onChange: function onChange2(value) {
+              return update({
+                read_only: value ? 1 : 0
+              });
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+            label: t("formBuilder.inListView", "In List View"),
+            checked: !!(df === null || df === void 0 ? void 0 : df.in_list_view),
+            onChange: function onChange2(value) {
+              return update({
+                in_list_view: value ? 1 : 0
+              });
+            }
+          })]
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+          label: t("formBuilder.hidden", "Hidden"),
+          checked: !!(df === null || df === void 0 ? void 0 : df.hidden),
+          onChange: function onChange2(value) {
+            return update({
+              hidden: value ? 1 : 0
+            });
+          }
+        })]
+      })]
+    }) : null, removable ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      error: deletable,
+      outlined: true,
+      onPress: function onPress() {
+        return deletable ? setConfirm(true) : update({
+          hidden: 1
+        });
+      },
+      children: deletable ? t("formBuilder.delete", "Delete") : t("formBuilder.hide", "Hide")
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ConfirmDialog, {
+      open: confirm,
+      onOpenChange: setConfirm,
+      title: t("formBuilder.deleteTitle", "Remove this form item?"),
+      body: field ? t("formBuilder.deleteFieldBody", "This field will be removed when you save.") : t("formBuilder.deleteBreakBody", "Fields will move into the neighbouring layout."),
+      confirmLabel: t("formBuilder.delete", "Delete"),
+      destructive: true,
+      onConfirm: remove
+    })]
+  });
+}
+//# sourceMappingURL=FieldPropertiesPanel.native.js.map

package/dist/cjs/formBuilder/FieldPropertiesPanel.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FieldPropertiesPanel_exports","__export","FieldPropertiesPanel","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react_i18next","import_i18n","import_fieldtypes","import_model","param","layout","selection","mode","errors","onChange","_ref","_ref1","_errors_node_key","_ref2","_error_label","_ref3","_ref4","_ref5","t","useTranslation","BACKOFFICE_I18N_NAMESPACE","knobProps","useResolvedKnobs","confirm","setConfirm","useState","field","findField","tab","tabs","find","node2","key","section","flatMap","sections","column","s","columns","node","jsx","EmptyState","size","title","df","error","update","update2","patch","updateField","updateBreak","remove","remove2","removeField","removeTab","removeSection","removeColumn","deletable","canDeleteField","removable","length","some","t2","c","hint","optionsHint","fieldtype","jsxs","YStack","gap","minWidth","testID","children","SizableText","heading","gapSm","Text","label","numberOfLines","fieldname","body","color","Input","onChangeText","Fragment","readOnly","isNew","Select","options","fieldtypeCatalog","map","entry","labelKey","onChange2","String","TextArea","helperText","default","holdsValue","description","Checkbox","checked","reqd","read_only"],"sources":["../../../src/formBuilder/FieldPropertiesPanel.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/formBuilder/FormBuilderCanvas.cjs

@@ -0,0 +1,407 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FormBuilderCanvas_exports = {};
+__export(FormBuilderCanvas_exports, {
+  FormBuilderCanvas: () => FormBuilderCanvas
+});
+module.exports = __toCommonJS(FormBuilderCanvas_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.cjs");
+var import_model = require("./model.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FormBuilderCanvas({
+  layout,
+  activeTab,
+  selection,
+  stacked,
+  mode,
+  errors,
+  drag,
+  onChange,
+  onTab,
+  onSelect,
+  onAdd
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const iconSize = Number(knobProps.controlIcon.width);
+  const [deleteKey, setDeleteKey] = (0, import_react2.useState)();
+  const tab = layout.tabs.find(node => node.key === activeTab) ?? layout.tabs[0];
+  const sectionLabel = label => label || t("formBuilder.untitledSection", "Untitled section");
+  const fieldTitle = field => field.df.label || field.df.fieldname;
+  function fieldMenu(field) {
+    const location = (0, import_model.fieldLocation)(layout, field.key);
+    if (!location) return [];
+    return [{
+      key: "edit",
+      label: t("formBuilder.editProperties", "Edit properties"),
+      onSelect: () => onSelect(field.key)
+    }, {
+      key: "up",
+      label: t("formBuilder.moveUp", "Move up"),
+      onSelect: () => onChange((0, import_model.moveFieldBy)(layout, field.key, -1))
+    }, {
+      key: "down",
+      label: t("formBuilder.moveDown", "Move down"),
+      onSelect: () => onChange((0, import_model.moveFieldBy)(layout, field.key, 1))
+    }, ...layout.tabs.flatMap(item => item.sections).filter(section => section.key !== location.sectionKey).map(section => ({
+      key: section.key,
+      label: t("formBuilder.moveToSection", "Move to section: {{section}}", {
+        section: sectionLabel(section.df?.label)
+      }),
+      onSelect: () => {
+        const next = (0, import_model.moveFieldToSection)(layout, field.key, section.key);
+        onChange(next);
+        const nextLocation = (0, import_model.fieldLocation)(next, field.key);
+        if (nextLocation) onTab(nextLocation.tabKey);
+      }
+    })), {
+      key: "remove",
+      label: (0, import_model.canDeleteField)(field, mode) ? t("formBuilder.delete", "Delete") : t("formBuilder.hide", "Hide"),
+      onSelect: () => (0, import_model.canDeleteField)(field, mode) ? setDeleteKey(field.key) : onChange((0, import_model.updateField)(layout, field.key, {
+        hidden: 1
+      }))
+    }];
+  }
+  function renderFieldCard(field) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Card, {
+      minWidth: 0,
+      tier: "elevated",
+      ...(selection === field.key ? {
+        borderColor: "$accentColor"
+      } : void 0),
+      onPress: event => {
+        const target = event.target;
+        if (import_components.isWeb && target.closest?.("button, [role=button], [data-sortable-handle]")) return;
+        if (!drag.suppressClick.current) onSelect(field.key);
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        ...knobProps.gapSm,
+        alignItems: "center",
+        minWidth: 0,
+        children: [import_components.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SortableHandle, {
+          itemId: field.key,
+          label: fieldTitle(field),
+          dragging: drag.drag?.field.key === field.key,
+          onPointerDown: event => drag.fieldPointerDown(field.key, event),
+          onKeyDown: event => drag.keyDown(field.key, event)
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          flex: 1,
+          minWidth: 0,
+          ...knobProps.gapSm,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            ...knobProps.gapSm,
+            alignItems: "center",
+            minWidth: 0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              ...knobProps.label,
+              numberOfLines: 1,
+              flexShrink: 1,
+              children: fieldTitle(field)
+            }), field.df.reqd ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              ...knobProps.label,
+              color: "$red10",
+              "aria-label": t("formBuilder.required", "Required"),
+              children: "*"
+            }) : null]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            ...knobProps.gapSm,
+            flexWrap: "wrap",
+            minWidth: 0,
+            alignItems: "center",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+              size: "$2",
+              children: field.df.fieldtype
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              ...knobProps.body,
+              color: "$color11",
+              numberOfLines: 1,
+              flexShrink: 1,
+              children: field.df.fieldname
+            }), field.df.hidden ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+              size: "$2",
+              children: t("formBuilder.hidden", "Hidden")
+            }) : null, field.df.read_only ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+              size: "$2",
+              children: t("formBuilder.readOnly", "Read Only")
+            }) : null]
+          })]
+        }), errors[field.key] ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.WarningCircleIcon, {
+          size: iconSize,
+          "aria-label": t("formBuilder.fieldError", "Field needs attention")
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          flexShrink: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu, {
+            items: fieldMenu(field),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              size: "$2",
+              chromeless: true,
+              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsThreeIcon, {
+                size: iconSize
+              }),
+              "aria-label": t("formBuilder.fieldMenu", "Menu for {{field}}", {
+                field: fieldTitle(field)
+              })
+            })
+          })
+        })]
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    ...knobProps.gap,
+    testID: "form-builder-canvas",
+    ...{
+      onClickCapture: event => {
+        if (event.target.closest?.("[data-sortable-handle]")) event.preventDefault();
+      }
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tabs, {
+      value: tab.key,
+      onChange: onTab,
+      items: layout.tabs.map((item, index) => ({
+        value: item.key,
+        label: item.df?.label || (index === 0 ? t("formBuilder.details", "Details") : t("formBuilder.untitledTab", "Untitled tab"))
+      }))
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gapSm,
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        outlined: true,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+          size: iconSize
+        }),
+        onPress: () => {
+          const next = (0, import_model.addTab)(layout);
+          onChange(next);
+          onTab(next.tabs.at(-1).key);
+          onSelect(next.tabs.at(-1).key);
+        },
+        children: t("formBuilder.addTab", "Add tab")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        onPress: () => onSelect(tab.key),
+        children: t("formBuilder.tabProperties", "Tab properties")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        outlined: true,
+        onPress: () => {
+          const next = (0, import_model.addSection)(layout, tab.key);
+          onChange(next);
+          onSelect(next.tabs.find(item => item.key === tab.key).sections.at(-1).key);
+        },
+        children: t("formBuilder.addSection", "Add section")
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0,
+      ref: node => {
+        if (import_components.isWeb) drag.scrollRef.current = node?.getScrollableNode?.() ?? node;
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gapLg,
+        minWidth: 0,
+        flexShrink: 0,
+        children: [(0, import_model.fieldsFromLayout)(layout).length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+          size: "$2",
+          title: t("formBuilder.emptyTitle", "This form has no fields"),
+          description: t("formBuilder.emptyDescription", "Add a field to start building the form."),
+          action: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            onPress: onAdd,
+            children: t("formBuilder.addField", "Add field")
+          })
+        }) : null, tab.sections.map(section => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Card, {
+          tier: "content",
+          "data-fb-section": section.key,
+          minWidth: 0,
+          flexShrink: 0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            alignItems: "center",
+            ...knobProps.gapSm,
+            minWidth: 0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+              ...knobProps.heading,
+              flex: 1,
+              minWidth: 0,
+              numberOfLines: 1,
+              ...(!section.df?.label ? {
+                color: "$color11"
+              } : void 0),
+              children: sectionLabel(section.df?.label)
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+              size: "$2",
+              children: t("formBuilder.fieldCount", "{{count}} fields", {
+                count: section.columns.reduce((n, column) => n + column.fields.length, 0)
+              })
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+              flexShrink: 0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu, {
+                items: [{
+                  key: "section-properties",
+                  label: t("formBuilder.sectionProperties", "Section properties"),
+                  onSelect: () => onSelect(section.key)
+                }, ...section.columns.map((column, index) => ({
+                  key: column.key,
+                  label: t("formBuilder.numberedColumnProperties", "Column {{number}} properties", {
+                    number: index + 1
+                  }),
+                  onSelect: () => onSelect(column.key)
+                })), {
+                  key: "add-column",
+                  label: t("formBuilder.addColumn", "Add column"),
+                  onSelect: () => {
+                    const next = (0, import_model.addColumn)(layout, section.key);
+                    onChange(next);
+                  }
+                }, ...(section.columns.length > 1 ? [{
+                  key: "remove-column",
+                  label: t("formBuilder.removeColumn", "Remove column"),
+                  onSelect: () => onChange((0, import_model.removeColumn)(layout, section.columns.find(column => column.key === selection)?.key ?? section.columns.at(-1).key))
+                }] : []), {
+                  key: "add-section",
+                  label: t("formBuilder.addSectionBelow", "Add section below"),
+                  onSelect: () => onChange((0, import_model.addSection)(layout, tab.key, section.key))
+                }, ...(layout.tabs.length > 1 || tab.sections.length > 1 ? [{
+                  key: "remove-section",
+                  label: t("formBuilder.removeSection", "Remove section"),
+                  onSelect: () => onChange((0, import_model.removeSection)(layout, section.key))
+                }] : [])],
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                  size: "$2",
+                  chromeless: true,
+                  icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsThreeIcon, {
+                    size: iconSize
+                  }),
+                  "aria-label": t("formBuilder.sectionMenu", "Menu for section {{section}}", {
+                    section: sectionLabel(section.df?.label)
+                  })
+                })
+              })
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+            flexDirection: stacked ? "column" : "row",
+            ...knobProps.gap,
+            minWidth: 0,
+            "data-fb-columns": "",
+            "data-fb-stacked": String(stacked),
+            children: section.columns.map((column, columnIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+              flex: stacked ? void 0 : 1,
+              flexShrink: 0,
+              minWidth: 0,
+              ...knobProps.gapSm,
+              "data-fb-column": column.key,
+              children: [column.fields.map((field, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+                "data-fb-field": field.key,
+                "data-fb-fieldname": field.df.fieldname,
+                "data-fb-selected": String(selection === field.key),
+                minWidth: 0,
+                flexShrink: 0,
+                y: drag.offset(column.key, index),
+                opacity: drag.drag?.field.key === field.key && !drag.drag.palette ? 0 : 1,
+                transition: knobProps.transition,
+                children: renderFieldCard(field)
+              }, field.key)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+                minWidth: 0,
+                "data-fb-dropzone": column.key,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                  size: "$2",
+                  outlined: true,
+                  icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+                    size: iconSize
+                  }),
+                  "aria-label": t("formBuilder.addFieldToColumn", "Add field to {{column}}", {
+                    column: t("formBuilder.columnPosition", "{{section}}, column {{number}}", {
+                      section: sectionLabel(section.df?.label),
+                      number: columnIndex + 1
+                    })
+                  }),
+                  onPress: () => {
+                    const inserted = (0, import_model.insertField)(layout, (0, import_model.newFieldFromType)(layout, "Data"), {
+                      columnId: column.key,
+                      index: column.fields.length
+                    });
+                    onChange(inserted.layout);
+                    onSelect(inserted.key);
+                  },
+                  children: t("formBuilder.addFieldHere", "Add field")
+                })
+              })]
+            }, column.key))
+          })]
+        }, section.key))]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.body,
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: drag.announcement
+      })
+    }), import_components.isWeb && drag.drag ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      "data-fb-overlay": "",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      x: drag.drag.x,
+      y: drag.drag.y,
+      width: drag.drag.width,
+      pointerEvents: "none",
+      zIndex: 1e3,
+      transition: drag.drag.mode === "pointer" ? "none" : knobProps.transition,
+      "aria-hidden": true,
+      ...{
+        inert: true
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        scale: import_components.LIFT_SCALE,
+        children: renderFieldCard(drag.drag.field)
+      })
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ConfirmDialog, {
+      open: !!deleteKey,
+      onOpenChange: open => {
+        if (!open) setDeleteKey(void 0);
+      },
+      title: t("formBuilder.deleteTitle", "Remove this form item?"),
+      confirmLabel: t("formBuilder.delete", "Delete"),
+      destructive: true,
+      onConfirm: () => {
+        if (deleteKey) onChange((0, import_model.removeField)(layout, deleteKey));
+      }
+    })]
+  });
+}