@octaviaflow/core 3.1.0-beta.85 → 3.1.0-beta.86

package/dist/index.cjs

@@ -12986,22 +12986,92 @@ var TYPE_CLASSES = {
 function pathOf(f) {
   return f.path ?? f.key;
 }
-function flatten(fields, expanded, depth = 0, parentArray = false) {
+function flatten(fields, expanded, depth = 0, parentKey = null, ancestors = []) {
   const out = [];
-  for (const f of fields) {
-    out.push({ field: f, depth, isArrayItem: parentArray });
-    if (f.children && f.children.length > 0 && expanded.has(f.key)) {
-      out.push(...flatten(f.children, expanded, depth + 1, !!f.isArray || f.type === "array"));
+  fields.forEach((f, i) => {
+    const isGroup = isGroupField(f);
+    const isOpen = expanded.has(f.key);
+    const insertAt = isGroup && isOpen ? { parentKey: f.key, index: 0, depth: depth + 1 } : { parentKey, index: i + 1, depth };
+    out.push({
+      field: f,
+      depth,
+      insertAt,
+      // Deepest first, so one step left is one level out. When the gap is
+      // already inside a group, this level's own "after me" point is the
+      // first alternative.
+      insertAlternatives: [
+        ...isGroup && isOpen ? [{ parentKey, index: i + 1, depth }] : [],
+        ...[...ancestors].reverse()
+      ]
+    });
+    if (isGroup && isOpen) {
+      out.push(
+        ...flatten(f.children ?? [], expanded, depth + 1, f.key, [
+          ...ancestors,
+          { parentKey, index: i + 1, depth }
+        ])
+      );
     }
-  }
+  });
   return out;
 }
+function flattenFields(fields, expanded) {
+  return flatten(fields, expanded);
+}
 function collectAll(fields) {
   return fields.flatMap((f) => [f, ...f.children ? collectAll(f.children) : []]);
 }
+function isGroupField(f) {
+  if (f.children && f.children.length > 0) return true;
+  const t = String(f.type ?? "").toLowerCase();
+  return !!f.custom && (f.isArray === true || t === "array" || t === "object");
+}
+function isArrayField(f) {
+  return f.isArray === true || String(f.type ?? "").toLowerCase() === "array";
+}
 function collectGroupKeys(fields) {
   return collectAll(fields).filter((f) => !!f.children && f.children.length > 0).map((f) => f.key);
 }
+var DEFAULT_ADD_FIELD_TYPES = [
+  "string",
+  "number",
+  "boolean",
+  "datetime",
+  "object",
+  "array"
+];
+function insertField(fields, parentKey, index, field) {
+  if (parentKey === null) {
+    const next = [...fields];
+    next.splice(index, 0, field);
+    return next;
+  }
+  return fields.map((f) => {
+    if (f.key === parentKey) {
+      const kids = [...f.children ?? []];
+      kids.splice(index, 0, field);
+      return { ...f, children: kids };
+    }
+    if (f.children && f.children.length > 0) {
+      return { ...f, children: insertField(f.children, parentKey, index, field) };
+    }
+    return f;
+  });
+}
+function removeField(fields, key) {
+  return fields.filter((f) => f.key !== key).map(
+    (f) => f.children && f.children.length > 0 ? { ...f, children: removeField(f.children, key) } : f
+  );
+}
+function makeFieldKey(fields, parentKey, name) {
+  const slug = name.trim().replace(/\s+/g, "_");
+  const base = parentKey ? `${parentKey}.${slug}` : slug;
+  const taken = new Set(collectAll(fields).map((f) => f.key));
+  if (!taken.has(base)) return base;
+  let n = 2;
+  while (taken.has(`${base}_${n}`)) n += 1;
+  return `${base}_${n}`;
+}
 var TOKEN_RE = /\{\{([^}]+)\}\}/g;
 var FN_RE = /\b([a-zA-Z_][a-zA-Z0-9_]*)\(/g;
 function fieldToken(path) {
@@ -13318,6 +13388,9 @@ var DataMapper = (0, import_react76.forwardRef)(
     onClose,
     defaultSidebarOpen = true,
     defaultGroupsExpanded = true,
+    allowAddFields = false,
+    onTargetFieldsChange,
+    addFieldTypes = DEFAULT_ADD_FIELD_TYPES,
     className,
     ...rest
   }, forwardedRef) {
@@ -13330,6 +13403,68 @@ var DataMapper = (0, import_react76.forwardRef)(
     const appliedGroupKeysRef = (0, import_react76.useRef)(
       new Set(defaultGroupsExpanded ? collectGroupKeys(targetFields) : [])
     );
+    const [addingAt, setAddingAt] = (0, import_react76.useState)(null);
+    const [newFieldName, setNewFieldName] = (0, import_react76.useState)("");
+    const [hoverDepth, setHoverDepth] = (0, import_react76.useState)({});
+    const [newFieldType, setNewFieldType] = (0, import_react76.useState)(addFieldTypes[0] ?? "string");
+    const canAddFields = allowAddFields && typeof onTargetFieldsChange === "function";
+    const commitAddField = (0, import_react76.useCallback)(() => {
+      const raw = newFieldName.trim();
+      if (!raw || !onTargetFieldsChange || !addingAt) return;
+      const { parentKey, index } = addingAt;
+      const parsed = raw.split(".").map((p) => p.trim()).filter(Boolean).map((p) => {
+        const isArr = p.endsWith("[]");
+        return { name: isArr ? p.slice(0, -2).trim() : p, isArray: isArr };
+      }).filter((p) => p.name.length > 0);
+      if (parsed.length === 0) return;
+      const last = parsed[parsed.length - 1];
+      const leafType = last.isArray ? "array" : newFieldType;
+      const leafIsGroup = leafType === "object" || leafType === "array";
+      const baseKey = makeFieldKey(targetFields, parentKey, parsed[0].name);
+      const prefixOf = (depth) => [baseKey, ...parsed.slice(1, depth + 1).map((p) => p.name)].join(".");
+      let node = {
+        key: prefixOf(parsed.length - 1),
+        label: last.name,
+        type: leafType,
+        custom: true,
+        // A group with no children renders as a leaf and could never be added
+        // to; seed it so it is immediately expandable.
+        ...leafIsGroup ? { children: [], isArray: leafType === "array" } : {}
+      };
+      const opened = leafIsGroup ? [node.key] : [];
+      for (let i = parsed.length - 2; i >= 0; i--) {
+        const key = prefixOf(i);
+        const seg = parsed[i];
+        node = {
+          key,
+          label: seg.name,
+          // Intermediate levels are objects unless explicitly marked `[]`.
+          type: seg.isArray ? "array" : "object",
+          custom: true,
+          ...seg.isArray ? { isArray: true } : {},
+          children: [node]
+        };
+        opened.push(key);
+      }
+      onTargetFieldsChange(insertField(targetFields, parentKey, index, node));
+      setNewFieldName("");
+      setAddingAt(null);
+      if (opened.length > 0) {
+        setExpandedTargets((prev) => {
+          const next = new Set(prev);
+          opened.forEach((k) => next.add(k));
+          return next;
+        });
+      }
+    }, [newFieldName, newFieldType, addingAt, targetFields, onTargetFieldsChange]);
+    const commitRemoveField = (0, import_react76.useCallback)(
+      (key) => {
+        if (!onTargetFieldsChange) return;
+        onTargetFieldsChange(removeField(targetFields, key));
+        onChange(mappings.filter((m) => m.target !== key && !m.target.startsWith(`${key}.`)));
+      },
+      [targetFields, onTargetFieldsChange, mappings, onChange]
+    );
     const [targetSearch, setTargetSearch] = (0, import_react76.useState)("");
     const [sourceSearch, setSourceSearch] = (0, import_react76.useState)("");
     const [display, setDisplay] = (0, import_react76.useState)(defaultDisplay);
@@ -13485,13 +13620,119 @@ var DataMapper = (0, import_react76.forwardRef)(
       e.dataTransfer.setData("application/x-ods-mapper", JSON.stringify({ snippet }));
       e.dataTransfer.setData("text/plain", snippet);
     };
+    const renderGap = (at, key, alternatives = []) => {
+      const hovered = hoverDepth[key];
+      const choices = [at, ...alternatives];
+      const active = choices[Math.min(hovered ?? 0, choices.length - 1)] ?? at;
+      const isOpen = addingAt?.parentKey === active.parentKey && addingAt?.index === active.index;
+      if (isOpen) {
+        return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+          "div",
+          {
+            className: "ods-data-mapper__add-form",
+            style: { paddingLeft: 12 + active.depth * 16 },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitAddField();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                setAddingAt(null);
+                setNewFieldName("");
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__add-name", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                Input,
+                {
+                  size: "sm",
+                  autoFocus: true,
+                  value: newFieldName,
+                  placeholder: "Name \xB7 Address.City to nest \xB7 Lines[].Amount for a list",
+                  "aria-label": "New field name",
+                  onChange: (e) => setNewFieldName(e.target.value)
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__add-type", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                Select,
+                {
+                  size: "sm",
+                  options: addFieldTypes.map((t) => ({ value: t, label: t })),
+                  value: newFieldType,
+                  "aria-label": "New field type",
+                  onChange: setNewFieldType
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size: "sm", disabled: !newFieldName.trim(), onClick: commitAddField, children: "Add" }),
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                Button,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: () => {
+                    setAddingAt(null);
+                    setNewFieldName("");
+                  },
+                  children: "Cancel"
+                }
+              )
+            ]
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ods-data-mapper__gap",
+          "aria-label": choices.length > 1 ? "Add a field here \u2014 move left to add it to an outer level" : "Add a field here",
+          onMouseMove: (e) => {
+            if (choices.length < 2) return;
+            const x = e.clientX - e.currentTarget.getBoundingClientRect().left;
+            const stepsOut = Math.round(Math.max(0, 12 + at.depth * 16 - x) / 16);
+            const next = Math.min(stepsOut, choices.length - 1);
+            setHoverDepth((prev) => prev[key] === next ? prev : { ...prev, [key]: next });
+          },
+          onMouseLeave: () => setHoverDepth((prev) => {
+            if (prev[key] === void 0) return prev;
+            const next = { ...prev };
+            delete next[key];
+            return next;
+          }),
+          onClick: () => {
+            setAddingAt(active);
+            setNewFieldName("");
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+            "span",
+            {
+              className: "ods-data-mapper__gap-line",
+              style: { left: 12 + active.depth * 16 },
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__gap-rule" }),
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__gap-label", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__gap-plus", children: "+" }),
+                  "Add field"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__gap-rule" })
+              ]
+            }
+          )
+        },
+        key
+      );
+    };
     const rows = (0, import_react76.useMemo)(
       () => flatten(targetFields, expandedTargets),
       [targetFields, expandedTargets]
     );
     const filteredRows = (0, import_react76.useMemo)(() => {
       const q2 = targetSearch.trim().toLowerCase();
-      return rows.filter(({ field }) => {
+      return rows.filter((row) => {
+        const { field } = row;
         if (q2) {
           const hay = `${field.label} ${field.apiName ?? ""} ${field.key}`.toLowerCase();
           if (!hay.includes(q2)) return false;
@@ -13510,7 +13751,7 @@ var DataMapper = (0, import_react76.forwardRef)(
       return all.filter((f) => f.required && !mappings.some((m) => m.target === f.key)).length;
     }, [targetFields, mappings]);
     const sourceRows = (0, import_react76.useMemo)(() => {
-      const flat = flatten(sourceFields, expandedSource);
+      const flat = flattenFields(sourceFields, expandedSource);
       const q2 = sourceSearch.trim().toLowerCase();
       if (!q2) return flat;
       return flat.filter(
@@ -13716,218 +13957,241 @@ var DataMapper = (0, import_react76.forwardRef)(
                 /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ods-data-mapper__grid-head-cell", children: "Target field" }),
                 /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ods-data-mapper__grid-head-cell", children: "Expression" })
               ] }),
-              filteredRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ods-data-mapper__empty", children: targetSearch ? "No matching target fields" : "No target fields" }) : filteredRows.map(({ field, depth, isArrayItem }) => {
+              canAddFields && !targetSearch.trim() && display === "all" && renderGap({ parentKey: null, index: 0, depth: 0 }, "gap-top"),
+              filteredRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ods-data-mapper__empty", children: targetSearch ? "No matching target fields" : "No target fields" }) : filteredRows.map((row) => {
+                const { field, depth } = row;
                 const isSelected = selectedTarget === field.key;
-                const hasChildren = !!(field.children && field.children.length > 0);
+                const hasChildren = isGroupField(field);
+                const isInert = hasChildren;
                 const isExpanded = expandedTargets.has(field.key);
                 const expr = expressionFor(field.key);
                 const isMapped = !!expr;
                 const mappedChildren = hasChildren ? mappedDescendantCount(field) : 0;
                 const groupHasHiddenMappings = hasChildren && !isExpanded && mappedChildren > 0;
-                return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-                  "div",
-                  {
-                    className: cn(
-                      "ods-data-mapper__row",
-                      isSelected && "ods-data-mapper__row--selected",
-                      isMapped && "ods-data-mapper__row--mapped",
-                      groupHasHiddenMappings && "ods-data-mapper__row--group-mapped",
-                      dropTarget === field.key && "ods-data-mapper__row--drop-target"
-                    ),
-                    "data-target-key": field.key,
-                    onDragEnter: (e) => {
-                      if (hasChildren) return;
-                      e.preventDefault();
-                      setDropTarget((prev) => prev === field.key ? prev : field.key);
-                    },
-                    onDragOver: (e) => {
-                      if (hasChildren) return;
-                      e.preventDefault();
-                      e.dataTransfer.dropEffect = "copy";
-                      if (dropTarget !== field.key) setDropTarget(field.key);
-                    },
-                    onDragLeave: (e) => {
-                      if (hasChildren) return;
-                      const next = e.relatedTarget;
-                      if (next && e.currentTarget.contains(next)) return;
-                      setDropTarget((prev) => prev === field.key ? null : prev);
-                    },
-                    onDrop: (e) => {
-                      if (hasChildren) return;
-                      e.preventDefault();
-                      const snippet = readDragSnippet(e);
-                      setDropTarget(null);
-                      if (snippet) dropOntoTarget(field.key, snippet);
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-                        "div",
-                        {
-                          className: "ods-data-mapper__cell ods-data-mapper__cell--target",
-                          onClick: () => !hasChildren && setSelectedTarget(field.key),
-                          children: [
-                            depth > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__guides", "aria-hidden": "true", children: Array.from({ length: depth }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                              "span",
-                              {
-                                className: cn(
-                                  "ods-data-mapper__guide",
-                                  i === depth - 1 && "ods-data-mapper__guide--last"
-                                )
-                              },
-                              i
-                            )) }),
-                            hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                              "button",
-                              {
-                                type: "button",
-                                className: cn(
-                                  "ods-data-mapper__caret",
-                                  isExpanded && "ods-data-mapper__caret--open"
-                                ),
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  handleToggleTarget(field.key);
-                                },
-                                "aria-label": isExpanded ? "Collapse" : "Expand",
-                                "aria-expanded": isExpanded,
-                                children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChevronDownIcon6, {}) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChevronRightIcon3, {})
-                              }
-                            ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__caret-spacer" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__field-meta", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__field-label", children: [
-                                field.label,
-                                field.required && // Asterisk is decorative; the required state is
-                                // communicated to AT via the visually-hidden text
-                                // below — keeping `aria-label` on a plain <span>
-                                // would trigger axe's aria-prohibited-attr rule.
-                                /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                                    "span",
-                                    {
-                                      className: "ods-data-mapper__field-req",
-                                      "aria-hidden": "true",
-                                      children: "*"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-                                    "span",
-                                    {
-                                      style: {
-                                        position: "absolute",
-                                        width: 1,
-                                        height: 1,
-                                        padding: 0,
-                                        margin: -1,
-                                        overflow: "hidden",
-                                        clip: "rect(0,0,0,0)",
-                                        whiteSpace: "nowrap",
-                                        border: 0
-                                      },
-                                      children: [
-                                        " ",
-                                        "(required)"
-                                      ]
-                                    }
-                                  )
-                                ] })
-                              ] }),
-                              field.apiName && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__field-api", children: field.apiName })
-                            ] }),
-                            renderTypePill(field.type),
-                            (field.isArray || field.type === "array" || isArrayItem) && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-                              "label",
-                              {
-                                className: "ods-data-mapper__foreach",
-                                onClick: (e) => e.stopPropagation(),
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("input", { type: "checkbox", defaultChecked: true, "aria-label": "For each record" }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: "For each record" })
-                                ]
-                              }
-                            )
-                          ]
-                        }
+                const showGaps = canAddFields && !targetSearch.trim() && display === "all";
+                return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react76.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+                    "div",
+                    {
+                      className: cn(
+                        "ods-data-mapper__row",
+                        isSelected && "ods-data-mapper__row--selected",
+                        isMapped && "ods-data-mapper__row--mapped",
+                        groupHasHiddenMappings && "ods-data-mapper__row--group-mapped",
+                        dropTarget === field.key && "ods-data-mapper__row--drop-target"
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                        "div",
-                        {
-                          className: cn(
-                            "ods-data-mapper__cell",
-                            "ods-data-mapper__cell--expr",
-                            isSelected && "ods-data-mapper__cell--expr-editing"
-                          ),
-                          onClick: () => !hasChildren && setSelectedTarget(field.key),
-                          children: hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__expr-group", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__expr-group-count", children: [
-                              "Group \xB7 ",
-                              field.children?.length ?? 0,
-                              " sub-field",
-                              field.children?.length === 1 ? "" : "s"
-                            ] }),
-                            mappedChildren > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-                              "span",
-                              {
-                                className: "ods-data-mapper__expr-group-badge",
-                                title: `${mappedChildren} of ${field.children?.length ?? 0} sub-fields mapped`,
-                                children: [
-                                  mappedChildren,
-                                  " mapped"
-                                ]
-                              }
-                            )
-                          ] }) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ods-data-mapper__editor", onClick: (e) => e.stopPropagation(), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                              ExpressionEditor,
-                              {
-                                editorRef,
-                                value: expr,
-                                sourceFields,
-                                variables,
-                                onChange: (v) => setExpression(field.key, v),
-                                onEscape: () => setSelectedTarget(null),
-                                onDropSnippet: (snippet) => dropOntoTarget(field.key, snippet),
-                                readDragSnippet
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ods-data-mapper__editor-actions", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                      "data-target-key": field.key,
+                      onDragEnter: (e) => {
+                        if (isInert) return;
+                        e.preventDefault();
+                        setDropTarget((prev) => prev === field.key ? prev : field.key);
+                      },
+                      onDragOver: (e) => {
+                        if (isInert) return;
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "copy";
+                        if (dropTarget !== field.key) setDropTarget(field.key);
+                      },
+                      onDragLeave: (e) => {
+                        if (isInert) return;
+                        const next = e.relatedTarget;
+                        if (next && e.currentTarget.contains(next)) return;
+                        setDropTarget((prev) => prev === field.key ? null : prev);
+                      },
+                      onDrop: (e) => {
+                        if (isInert) return;
+                        e.preventDefault();
+                        const snippet = readDragSnippet(e);
+                        setDropTarget(null);
+                        if (snippet) dropOntoTarget(field.key, snippet);
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+                          "div",
+                          {
+                            className: "ods-data-mapper__cell ods-data-mapper__cell--target",
+                            onClick: () => !isInert && setSelectedTarget(field.key),
+                            children: [
+                              depth > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__guides", "aria-hidden": "true", children: Array.from({ length: depth }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                                "span",
+                                {
+                                  className: cn(
+                                    "ods-data-mapper__guide",
+                                    i === depth - 1 && "ods-data-mapper__guide--last"
+                                  )
+                                },
+                                i
+                              )) }),
+                              hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                                 "button",
                                 {
                                   type: "button",
-                                  className: "ods-data-mapper__editor-fx",
-                                  onClick: () => {
-                                    setSidebarOpen(true);
-                                    setSidebarTab("functions");
+                                  className: cn(
+                                    "ods-data-mapper__caret",
+                                    isExpanded && "ods-data-mapper__caret--open"
+                                  ),
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    handleToggleTarget(field.key);
                                   },
-                                  "aria-label": "Insert function",
-                                  title: "Functions",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(FxIcon, {})
+                                  "aria-label": isExpanded ? "Collapse" : "Expand",
+                                  "aria-expanded": isExpanded,
+                                  children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChevronDownIcon6, {}) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChevronRightIcon3, {})
                                 }
-                              ),
-                              expr && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-                                "button",
+                              ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__caret-spacer" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__field-meta", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__field-label", children: [
+                                  field.label,
+                                  field.required && // Asterisk is decorative; the required state is
+                                  // communicated to AT via the visually-hidden text
+                                  // below — keeping `aria-label` on a plain <span>
+                                  // would trigger axe's aria-prohibited-attr rule.
+                                  /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                                      "span",
+                                      {
+                                        className: "ods-data-mapper__field-req",
+                                        "aria-hidden": "true",
+                                        children: "*"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+                                      "span",
+                                      {
+                                        style: {
+                                          position: "absolute",
+                                          width: 1,
+                                          height: 1,
+                                          padding: 0,
+                                          margin: -1,
+                                          overflow: "hidden",
+                                          clip: "rect(0,0,0,0)",
+                                          whiteSpace: "nowrap",
+                                          border: 0
+                                        },
+                                        children: [
+                                          " ",
+                                          "(required)"
+                                        ]
+                                      }
+                                    )
+                                  ] })
+                                ] }),
+                                field.apiName && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__field-api", children: field.apiName })
+                              ] }),
+                              field.custom && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__field-custom", children: "custom" }),
+                                canAddFields && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    className: "ods-data-mapper__field-remove",
+                                    "aria-label": `Remove ${field.label}`,
+                                    title: `Remove ${field.label}`,
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      commitRemoveField(field.key);
+                                    },
+                                    children: "\xD7"
+                                  }
+                                )
+                              ] }),
+                              renderTypePill(field.type),
+                              isArrayField(field) && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+                                "label",
                                 {
-                                  type: "button",
-                                  className: "ods-data-mapper__editor-clear",
-                                  onClick: () => setExpression(field.key, ""),
-                                  "aria-label": "Clear expression",
-                                  title: "Clear",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TrashIcon, {})
+                                  className: "ods-data-mapper__foreach",
+                                  onClick: (e) => e.stopPropagation(),
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("input", { type: "checkbox", defaultChecked: true, "aria-label": "For each record" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: "For each record" })
+                                  ]
                                 }
                               )
-                            ] })
-                          ] }) : isMapped ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__expr-render", title: expr, children: renderExpressionSegments(
-                            expr,
-                            sourceFields,
-                            variables,
-                            (tokenIndex) => removeTokenAt(field.key, tokenIndex)
-                          ) }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__expr-empty", children: dropTarget === field.key ? "Drop to map" : "Drag a field here or click to edit" })
-                        }
-                      )
-                    ]
-                  },
-                  field.key
-                );
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                          "div",
+                          {
+                            className: cn(
+                              "ods-data-mapper__cell",
+                              "ods-data-mapper__cell--expr",
+                              isSelected && "ods-data-mapper__cell--expr-editing"
+                            ),
+                            onClick: () => !isInert && setSelectedTarget(field.key),
+                            children: isInert ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__expr-group", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ods-data-mapper__expr-group-count", children: [
+                                "Group \xB7 ",
+                                field.children?.length ?? 0,
+                                " sub-field",
+                                field.children?.length === 1 ? "" : "s"
+                              ] }),
+                              mappedChildren > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+                                "span",
+                                {
+                                  className: "ods-data-mapper__expr-group-badge",
+                                  title: `${mappedChildren} of ${field.children?.length ?? 0} sub-fields mapped`,
+                                  children: [
+                                    mappedChildren,
+                                    " mapped"
+                                  ]
+                                }
+                              )
+                            ] }) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ods-data-mapper__editor", onClick: (e) => e.stopPropagation(), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                                ExpressionEditor,
+                                {
+                                  editorRef,
+                                  value: expr,
+                                  sourceFields,
+                                  variables,
+                                  onChange: (v) => setExpression(field.key, v),
+                                  onEscape: () => setSelectedTarget(null),
+                                  onDropSnippet: (snippet) => dropOntoTarget(field.key, snippet),
+                                  readDragSnippet
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ods-data-mapper__editor-actions", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    className: "ods-data-mapper__editor-fx",
+                                    onClick: () => {
+                                      setSidebarOpen(true);
+                                      setSidebarTab("functions");
+                                    },
+                                    "aria-label": "Insert function",
+                                    title: "Functions",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(FxIcon, {})
+                                  }
+                                ),
+                                expr && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    className: "ods-data-mapper__editor-clear",
+                                    onClick: () => setExpression(field.key, ""),
+                                    "aria-label": "Clear expression",
+                                    title: "Clear",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TrashIcon, {})
+                                  }
+                                )
+                              ] })
+                            ] }) : isMapped ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__expr-render", title: expr, children: renderExpressionSegments(
+                              expr,
+                              sourceFields,
+                              variables,
+                              (tokenIndex) => removeTokenAt(field.key, tokenIndex)
+                            ) }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ods-data-mapper__expr-empty", children: dropTarget === field.key ? "Drop to map" : "Drag a field here or click to edit" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  showGaps && renderGap(row.insertAt, `gap-${field.key}`, row.insertAlternatives)
+                ] }, field.key);
               })
             ] }),
             sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("aside", { className: "ods-data-mapper__sidebar", "aria-label": "Data Stream", children: [