@multiplatform.one/backoffice 7.34.4 → 7.36.0

package/dist/jsx/formBuilder/FieldPropertiesPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["ConfirmDialog","EmptyState","SizableText","Text","YStack","Button","Checkbox","Input","Select","TextArea","useResolvedKnobs","useState","useTranslation","BACKOFFICE_I18N_NAMESPACE","fieldtypeCatalog","holdsValue","optionsHint","canDeleteField","findField","removeColumn","removeField","removeSection","removeTab","updateBreak","updateField","Fragment","jsx","jsxs","FieldPropertiesPanel","layout","selection","mode","errors","onChange","t","knobProps","confirm","setConfirm","field","tab","tabs","find","node","node2","key","section","flatMap","sections","column","s","columns","size","title","df","error","update","patch","remove","deletable","removable","length","some","t2","c","hint","fieldtype","gap","minWidth","testID","children","heading","gapSm","label","numberOfLines","fieldname","body","color","value","onChangeText","readOnly","isNew","options","map","entry","labelKey","String","helperText","default","description","checked","reqd","read_only","in_list_view","hidden","outlined","onPress","open","onOpenChange","confirmLabel","destructive","onConfirm"],"sources":["../../../src/formBuilder/FieldPropertiesPanel.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/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/jsx/formBuilder/FieldPropertiesPanel.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","FieldPropertiesPanel_exports","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","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"],"sources":["../../../src/formBuilder/FieldPropertiesPanel.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/formBuilder/FormBuilderCanvas.mjs

@@ -0,0 +1,382 @@
+import { Card, Chip, ConfirmDialog, DropdownMenu, EmptyState, LIFT_SCALE, SizableText, ScrollView, SortableHandle, Tabs, Text, VisuallyHidden, XStack, YStack, isWeb } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { DotsThreeIcon, PlusIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n/index.mjs";
+import { addColumn, addSection, addTab, canDeleteField, fieldLocation, fieldsFromLayout, insertField, newFieldFromType, moveFieldBy, moveFieldToSection, removeColumn, removeField, removeSection, updateField } from "./model.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormBuilderCanvas({
+  layout,
+  activeTab,
+  selection,
+  stacked,
+  mode,
+  errors,
+  drag,
+  onChange,
+  onTab,
+  onSelect,
+  onAdd
+}) {
+  const {
+    t
+  } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon.width);
+  const [deleteKey, setDeleteKey] = 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 = 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(moveFieldBy(layout, field.key, -1))
+    }, {
+      key: "down",
+      label: t("formBuilder.moveDown", "Move down"),
+      onSelect: () => onChange(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 = moveFieldToSection(layout, field.key, section.key);
+        onChange(next);
+        const nextLocation = fieldLocation(next, field.key);
+        if (nextLocation) onTab(nextLocation.tabKey);
+      }
+    })), {
+      key: "remove",
+      label: canDeleteField(field, mode) ? t("formBuilder.delete", "Delete") : t("formBuilder.hide", "Hide"),
+      onSelect: () => canDeleteField(field, mode) ? setDeleteKey(field.key) : onChange(updateField(layout, field.key, {
+        hidden: 1
+      }))
+    }];
+  }
+  function renderFieldCard(field) {
+    return /* @__PURE__ */jsx(Card, {
+      minWidth: 0,
+      tier: "elevated",
+      ...(selection === field.key ? {
+        borderColor: "$accentColor"
+      } : void 0),
+      onPress: event => {
+        const target = event.target;
+        if (isWeb && target.closest?.("button, [role=button], [data-sortable-handle]")) return;
+        if (!drag.suppressClick.current) onSelect(field.key);
+      },
+      children: /* @__PURE__ */jsxs(XStack, {
+        ...knobProps.gapSm,
+        alignItems: "center",
+        minWidth: 0,
+        children: [isWeb ? /* @__PURE__ */jsx(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__ */jsxs(YStack, {
+          flex: 1,
+          minWidth: 0,
+          ...knobProps.gapSm,
+          children: [/* @__PURE__ */jsxs(XStack, {
+            ...knobProps.gapSm,
+            alignItems: "center",
+            minWidth: 0,
+            children: [/* @__PURE__ */jsx(Text, {
+              ...knobProps.label,
+              numberOfLines: 1,
+              flexShrink: 1,
+              children: fieldTitle(field)
+            }), field.df.reqd ? /* @__PURE__ */jsx(Text, {
+              ...knobProps.label,
+              color: "$red10",
+              "aria-label": t("formBuilder.required", "Required"),
+              children: "*"
+            }) : null]
+          }), /* @__PURE__ */jsxs(XStack, {
+            ...knobProps.gapSm,
+            flexWrap: "wrap",
+            minWidth: 0,
+            alignItems: "center",
+            children: [/* @__PURE__ */jsx(Chip, {
+              size: "$2",
+              children: field.df.fieldtype
+            }), /* @__PURE__ */jsx(Text, {
+              ...knobProps.body,
+              color: "$color11",
+              numberOfLines: 1,
+              flexShrink: 1,
+              children: field.df.fieldname
+            }), field.df.hidden ? /* @__PURE__ */jsx(Chip, {
+              size: "$2",
+              children: t("formBuilder.hidden", "Hidden")
+            }) : null, field.df.read_only ? /* @__PURE__ */jsx(Chip, {
+              size: "$2",
+              children: t("formBuilder.readOnly", "Read Only")
+            }) : null]
+          })]
+        }), errors[field.key] ? /* @__PURE__ */jsx(WarningCircleIcon, {
+          size: iconSize,
+          "aria-label": t("formBuilder.fieldError", "Field needs attention")
+        }) : null, /* @__PURE__ */jsx(YStack, {
+          flexShrink: 0,
+          children: /* @__PURE__ */jsx(DropdownMenu, {
+            items: fieldMenu(field),
+            children: /* @__PURE__ */jsx(Button, {
+              size: "$2",
+              chromeless: true,
+              icon: /* @__PURE__ */jsx(DotsThreeIcon, {
+                size: iconSize
+              }),
+              "aria-label": t("formBuilder.fieldMenu", "Menu for {{field}}", {
+                field: fieldTitle(field)
+              })
+            })
+          })
+        })]
+      })
+    });
+  }
+  return /* @__PURE__ */jsxs(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__ */jsx(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__ */jsxs(XStack, {
+      ...knobProps.gapSm,
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */jsx(Button, {
+        size: "$2",
+        outlined: true,
+        icon: /* @__PURE__ */jsx(PlusIcon, {
+          size: iconSize
+        }),
+        onPress: () => {
+          const next = addTab(layout);
+          onChange(next);
+          onTab(next.tabs.at(-1).key);
+          onSelect(next.tabs.at(-1).key);
+        },
+        children: t("formBuilder.addTab", "Add tab")
+      }), /* @__PURE__ */jsx(Button, {
+        size: "$2",
+        onPress: () => onSelect(tab.key),
+        children: t("formBuilder.tabProperties", "Tab properties")
+      }), /* @__PURE__ */jsx(Button, {
+        size: "$2",
+        outlined: true,
+        onPress: () => {
+          const next = 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__ */jsx(ScrollView, {
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0,
+      ref: node => {
+        if (isWeb) drag.scrollRef.current = node?.getScrollableNode?.() ?? node;
+      },
+      children: /* @__PURE__ */jsxs(YStack, {
+        ...knobProps.gapLg,
+        minWidth: 0,
+        flexShrink: 0,
+        children: [fieldsFromLayout(layout).length === 0 ? /* @__PURE__ */jsx(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__ */jsx(Button, {
+            onPress: onAdd,
+            children: t("formBuilder.addField", "Add field")
+          })
+        }) : null, tab.sections.map(section => /* @__PURE__ */jsxs(Card, {
+          tier: "content",
+          "data-fb-section": section.key,
+          minWidth: 0,
+          flexShrink: 0,
+          children: [/* @__PURE__ */jsxs(XStack, {
+            alignItems: "center",
+            ...knobProps.gapSm,
+            minWidth: 0,
+            children: [/* @__PURE__ */jsx(SizableText, {
+              ...knobProps.heading,
+              flex: 1,
+              minWidth: 0,
+              numberOfLines: 1,
+              ...(!section.df?.label ? {
+                color: "$color11"
+              } : void 0),
+              children: sectionLabel(section.df?.label)
+            }), /* @__PURE__ */jsx(Chip, {
+              size: "$2",
+              children: t("formBuilder.fieldCount", "{{count}} fields", {
+                count: section.columns.reduce((n, column) => n + column.fields.length, 0)
+              })
+            }), /* @__PURE__ */jsx(YStack, {
+              flexShrink: 0,
+              children: /* @__PURE__ */jsx(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 = addColumn(layout, section.key);
+                    onChange(next);
+                  }
+                }, ...(section.columns.length > 1 ? [{
+                  key: "remove-column",
+                  label: t("formBuilder.removeColumn", "Remove column"),
+                  onSelect: () => onChange(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(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(removeSection(layout, section.key))
+                }] : [])],
+                children: /* @__PURE__ */jsx(Button, {
+                  size: "$2",
+                  chromeless: true,
+                  icon: /* @__PURE__ */jsx(DotsThreeIcon, {
+                    size: iconSize
+                  }),
+                  "aria-label": t("formBuilder.sectionMenu", "Menu for section {{section}}", {
+                    section: sectionLabel(section.df?.label)
+                  })
+                })
+              })
+            })]
+          }), /* @__PURE__ */jsx(YStack, {
+            flexDirection: stacked ? "column" : "row",
+            ...knobProps.gap,
+            minWidth: 0,
+            "data-fb-columns": "",
+            "data-fb-stacked": String(stacked),
+            children: section.columns.map((column, columnIndex) => /* @__PURE__ */jsxs(YStack, {
+              flex: stacked ? void 0 : 1,
+              flexShrink: 0,
+              minWidth: 0,
+              ...knobProps.gapSm,
+              "data-fb-column": column.key,
+              children: [column.fields.map((field, index) => /* @__PURE__ */jsx(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__ */jsx(YStack, {
+                minWidth: 0,
+                "data-fb-dropzone": column.key,
+                children: /* @__PURE__ */jsx(Button, {
+                  size: "$2",
+                  outlined: true,
+                  icon: /* @__PURE__ */jsx(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 = insertField(layout, 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__ */jsx(VisuallyHidden, {
+      children: /* @__PURE__ */jsx(Text, {
+        ...knobProps.body,
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: drag.announcement
+      })
+    }), isWeb && drag.drag ? /* @__PURE__ */jsx(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__ */jsx(YStack, {
+        scale: LIFT_SCALE,
+        children: renderFieldCard(drag.drag.field)
+      })
+    }) : null, /* @__PURE__ */jsx(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(removeField(layout, deleteKey));
+      }
+    })]
+  });
+}
+export { FormBuilderCanvas };
+//# sourceMappingURL=FormBuilderCanvas.mjs.map