@nivaro/react 0.3.36 → 0.3.37

package/dist/shared/components/layout-editor/inspector/GroupInspector.js

@@ -1,4 +1,4 @@
-import { jsxs as r, jsx as t, Fragment as I } from "react/jsx-runtime";
+import { jsxs as s, jsx as t, Fragment as I } from "react/jsx-runtime";
 import { useState as U, useEffect as ae } from "react";
 import { readGroupStructure as ne } from "../../../lib/form-structure.js";
 import { lazySectionsOf as oe, lazySectionPatch as ie } from "../../../lib/layout-resolve.js";
@@ -10,10 +10,10 @@ import { SwapConfigEditor as de } from "../editors/swap-config.js";
 import { IconPicker as ce } from "../pickers/icon-picker.js";
 import { SectionReuseActions as he } from "../reuse/SectionReuseActions.js";
 import { emptyTextOp as pe, stickyPlan as fe, rowUpdatePlan as X } from "../section-structure.js";
-import { useCollectionMeta as ue } from "./field-context.js";
-import { useInspectorEnv as me, Setting as d, TextInput as S, Choice as F, Segmented as y, Toggle as g, TextArea as Y, Section as $, FieldMultiPicker as be, ConditionBuilder as ye } from "./kit.js";
-import { groupFields as ge, asArray as k, describeField as Z, relKindOf as ke, relatedCollectionOf as _e } from "./model.js";
-import { GroupTranslations as ve } from "./Translations.js";
+import { useCollectionMeta as me } from "./field-context.js";
+import { useInspectorEnv as ue, Setting as d, TextInput as S, Choice as F, Segmented as g, Toggle as k, TextArea as Y, Section as $, FieldMultiPicker as be, ConditionBuilder as ye } from "./kit.js";
+import { groupFields as ge, asArray as v, describeField as Z, relKindOf as ke, relatedCollectionOf as ve } from "./model.js";
+import { GroupTranslations as _e } from "./Translations.js";
 const T = {
   section: "Section",
   tab: "Tab or step",
@@ -25,30 +25,30 @@ function we(l) {
   return typeof l == "string" ? { field: l } : l && typeof l == "object" && typeof l.field == "string" ? l : null;
 }
 function xe(l) {
-  const { field: u, label: o, agg: p, agg_field: m, field_options: f } = l;
-  return !o && !p ? u : {
-    field: u,
+  const { field: m, label: o, agg: p, agg_field: u, field_options: f } = l;
+  return !o && !p ? m : {
+    field: m,
     ...o ? { label: o } : {},
-    ...p ? { agg: p, agg_field: m, ...f ? { field_options: f } : {} } : {}
+    ...p ? { agg: p, agg_field: u, ...f ? { field_options: f } : {} } : {}
   };
 }
 const _ = (l) => l.length ? JSON.stringify(l) : null;
-function je({ group: l, readOnly: u }) {
+function je({ group: l, readOnly: m }) {
   var B, H;
-  const o = me(), { data: p } = ue(o.collection), m = (p == null ? void 0 : p.fields) ?? [], f = (p == null ? void 0 : p.relations) ?? [], n = l.label || W(l.key), i = l.type, s = (e, a, c) => o.apply([{ op: "group_update", key: l.key, patch: e }], { label: a, text: c }), L = o.bundle.groups.filter((e) => e.parent_key === l.key), Q = o.bundle.groups.filter((e) => e.type === "container" && e.key !== l.key), P = o.bundle.placements.some((e) => e.group_key === l.key), V = (l.parent_key ? ["tab"] : Object.keys(T)).filter((e) => e === i || !(P && (e === "container" || e === "content"))).map((e) => ({ value: e, label: T[e] })), v = i === "section" || i === "metadata" || i === "tab", R = oe(o.bundle.layout.conditions).includes(l.key), M = !!o.bundle.layout.accordion_mode, w = ne(l.swap_config), D = m.filter((e) => !e.field.startsWith("__") && e.type !== "alias").map((e) => ({ value: e.field, label: e.label || W(e.field) })).sort((e, a) => e.label.localeCompare(a.label)), j = ge(o.bundle, l.key), x = k(l.summary_fields).map(we).filter((e) => !!e), G = (e, a, c) => s({ summary_fields: _(e.map(xe)) }, a, c), J = k(l.visible_when), C = JSON.stringify(J), [ee, K] = U(J);
+  const o = ue(), { data: p } = me(o.collection), u = (p == null ? void 0 : p.fields) ?? [], f = (p == null ? void 0 : p.relations) ?? [], n = l.label || W(l.key), i = l.type, r = (e, a, c) => o.apply([{ op: "group_update", key: l.key, patch: e }], { label: a, text: c }), L = o.bundle.groups.filter((e) => e.parent_key === l.key), Q = o.bundle.groups.filter((e) => e.type === "container" && e.key !== l.key), P = o.bundle.placements.some((e) => e.group_key === l.key), V = (l.parent_key ? ["tab"] : Object.keys(T)).filter((e) => e === i || !(P && (e === "container" || e === "content"))).map((e) => ({ value: e, label: T[e] })), w = i === "section" || i === "metadata" || i === "tab", R = oe(o.bundle.layout.conditions).includes(l.key), M = !!o.bundle.layout.accordion_mode, x = ne(l.swap_config), D = u.filter((e) => !e.field.startsWith("__") && e.type !== "alias").map((e) => ({ value: e.field, label: e.label || W(e.field) })).sort((e, a) => e.label.localeCompare(a.label)), j = ge(o.bundle, l.key), b = v(l.summary_fields).map(we).filter((e) => !!e), G = (e, a, c) => r({ summary_fields: _(e.map(xe)) }, a, c), J = v(l.visible_when), C = JSON.stringify(J), [ee, K] = U(J);
   ae(() => {
     K(
       (e) => JSON.stringify(e.filter((a) => a.field)) === C ? e : JSON.parse(C)
     );
   }, [C]);
   const [te, z] = U(!1);
-  return /* @__PURE__ */ r("fieldset", { disabled: u, className: "min-w-0 space-y-5", children: [
+  return /* @__PURE__ */ s("fieldset", { disabled: m, className: "min-w-0 space-y-5", children: [
     /* @__PURE__ */ t(d, { k: "group.label", label: "Name", effect: "The heading people see.", children: /* @__PURE__ */ t(
       S,
       {
         ariaLabel: "Name",
         value: l.label,
-        onChange: (e) => s({ label: e }, `Rename ${n}`, !0)
+        onChange: (e) => r({ label: e }, `Rename ${n}`, !0)
       }
     ) }),
     /* @__PURE__ */ t(d, { k: "group.icon", label: "Icon", effect: "Shown before the section title.", children: /* @__PURE__ */ t(
@@ -56,7 +56,7 @@ function je({ group: l, readOnly: u }) {
       {
         className: "h-8 rounded-md border-slate-200 bg-white px-2.5 text-[13px] hover:bg-white dark:border-border dark:bg-background dark:hover:bg-background",
         value: l.icon ?? "",
-        onChange: (e) => s({ icon: e || null }, `Change the icon of ${n}`)
+        onChange: (e) => r({ icon: e || null }, `Change the icon of ${n}`)
       }
     ) }),
     /* @__PURE__ */ t(
@@ -74,7 +74,7 @@ function je({ group: l, readOnly: u }) {
             options: V,
             onChange: (e) => {
               var a;
-              return s(
+              return r(
                 e === "container" ? { type: e, tab_mode: l.tab_mode ?? "tabs" } : { type: e },
                 `Make ${n} a ${(a = T[e]) == null ? void 0 : a.toLowerCase()}`
               );
@@ -90,14 +90,14 @@ function je({ group: l, readOnly: u }) {
         label: "Show its tabs as",
         effect: "Steps walk people through in order.",
         children: /* @__PURE__ */ t(
-          y,
+          g,
           {
             value: l.tab_mode === "steps" ? "steps" : "tabs",
             options: [
               { value: "tabs", label: "Tabs" },
               { value: "steps", label: "Steps" }
             ],
-            onChange: (e) => s({ tab_mode: e }, `Show ${n} as ${e}`)
+            onChange: (e) => r({ tab_mode: e }, `Show ${n} as ${e}`)
           }
         )
       }
@@ -133,17 +133,17 @@ function je({ group: l, readOnly: u }) {
       }
     ),
     (i === "section" || i === "metadata") && /* @__PURE__ */ t(
-      g,
+      k,
       {
         k: "group.is_collapsed",
         label: "Starts collapsed",
         effect: "The section opens folded; people unfold it.",
         checked: l.is_collapsed,
-        onChange: (e) => s({ is_collapsed: e }, e ? `Collapse ${n}` : `Expand ${n}`)
+        onChange: (e) => r({ is_collapsed: e }, e ? `Collapse ${n}` : `Expand ${n}`)
       }
     ),
     (i === "section" || i === "metadata") && /* @__PURE__ */ t(
-      g,
+      k,
       {
         k: "group.load_on_open",
         label: "Load when opened",
@@ -161,7 +161,7 @@ function je({ group: l, readOnly: u }) {
         )
       }
     ),
-    i === "content" && /* @__PURE__ */ r(I, { children: [
+    i === "content" && /* @__PURE__ */ s(I, { children: [
       /* @__PURE__ */ t(
         d,
         {
@@ -169,7 +169,7 @@ function je({ group: l, readOnly: u }) {
           label: "Style",
           effect: "Note and Warning are coloured boxes; Divider is a line with the text.",
           children: /* @__PURE__ */ t(
-            y,
+            g,
             {
               value: l.content_tone ?? "info",
               options: [
@@ -177,7 +177,7 @@ function je({ group: l, readOnly: u }) {
                 { value: "warn", label: "Warning" },
                 { value: "divider", label: "Divider" }
               ],
-              onChange: (e) => s({ content_tone: e }, `Change the style of ${n}`)
+              onChange: (e) => r({ content_tone: e }, `Change the style of ${n}`)
             }
           )
         }
@@ -187,11 +187,11 @@ function je({ group: l, readOnly: u }) {
         {
           ariaLabel: "Text",
           value: l.content ?? "",
-          onChange: (e) => s({ content: e || null }, `Edit the text of ${n}`, !0)
+          onChange: (e) => r({ content: e || null }, `Edit the text of ${n}`, !0)
         }
       ) })
     ] }),
-    (i === "section" || i === "tab") && /* @__PURE__ */ r(I, { children: [
+    (i === "section" || i === "tab") && /* @__PURE__ */ s(I, { children: [
       /* @__PURE__ */ t(
         d,
         {
@@ -203,7 +203,7 @@ function je({ group: l, readOnly: u }) {
             {
               ariaLabel: "Intro",
               value: l.content ?? "",
-              onChange: (e) => s({ content: e || null }, `Edit the intro of ${n}`, !0)
+              onChange: (e) => r({ content: e || null }, `Edit the intro of ${n}`, !0)
             }
           )
         }
@@ -215,20 +215,20 @@ function je({ group: l, readOnly: u }) {
           label: "Intro style",
           effect: "Note is a quiet box; Warning is amber.",
           children: /* @__PURE__ */ t(
-            y,
+            g,
             {
               value: l.content_tone === "warn" ? "warn" : "info",
               options: [
                 { value: "info", label: "Note" },
                 { value: "warn", label: "Warning" }
               ],
-              onChange: (e) => s({ content_tone: e }, `Change the intro style of ${n}`)
+              onChange: (e) => r({ content_tone: e }, `Change the intro style of ${n}`)
             }
           )
         }
       )
     ] }),
-    v && /* @__PURE__ */ r(I, { children: [
+    w && /* @__PURE__ */ s(I, { children: [
       /* @__PURE__ */ t(
         d,
         {
@@ -236,7 +236,7 @@ function je({ group: l, readOnly: u }) {
           label: "Show",
           effect: "On new records, existing ones or both.",
           children: /* @__PURE__ */ t(
-            y,
+            g,
             {
               value: l.visibility_mode ?? "always",
               options: [
@@ -244,19 +244,19 @@ function je({ group: l, readOnly: u }) {
                 { value: "new_only", label: "New records" },
                 { value: "existing_only", label: "Existing" }
               ],
-              onChange: (e) => s({ visibility_mode: e }, `Change when ${n} shows`)
+              onChange: (e) => r({ visibility_mode: e }, `Change when ${n} shows`)
             }
           )
         }
       ),
       /* @__PURE__ */ t(
-        g,
+        k,
         {
           k: "group.hide_when_empty",
           label: "Hide when all its fields are empty",
           effect: "The section disappears while none of its fields has a value.",
           checked: l.hide_when_empty,
-          onChange: (e) => s({ hide_when_empty: e }, `Change when ${n} hides`)
+          onChange: (e) => r({ hide_when_empty: e }, `Change when ${n} hides`)
         }
       ),
       /* @__PURE__ */ t(
@@ -266,7 +266,7 @@ function je({ group: l, readOnly: u }) {
           label: "Width when reading",
           effect: "On the read view, summary and detail panels. Automatic: half for a short list, full for grids.",
           children: /* @__PURE__ */ t(
-            y,
+            g,
             {
               value: l.read_width ?? "",
               options: [
@@ -275,7 +275,7 @@ function je({ group: l, readOnly: u }) {
                 { value: "half", label: "½" },
                 { value: "third", label: "⅓" }
               ],
-              onChange: (e) => s({ read_width: e || null }, `Change the read width of ${n}`)
+              onChange: (e) => r({ read_width: e || null }, `Change the read width of ${n}`)
             }
           )
         }
@@ -290,7 +290,7 @@ function je({ group: l, readOnly: u }) {
             S,
             {
               ariaLabel: "When nothing is filled",
-              value: w.emptyText ?? "",
+              value: x.emptyText ?? "",
               placeholder: "No details yet",
               onChange: (e) => o.apply([pe(l, e)], {
                 label: `Change the empty text of ${n}`,
@@ -301,12 +301,12 @@ function je({ group: l, readOnly: u }) {
         }
       ),
       i === "section" && !l.parent_key && /* @__PURE__ */ t(
-        g,
+        k,
         {
           k: "group.sticky",
           label: "Stick to the top",
           effect: "Stays at the top of the form while people scroll the rest, for totals or status. One section per form; not on phones.",
-          checked: w.sticky,
+          checked: x.sticky,
           onChange: (e) => {
             const a = fe(o.bundle, l.key, e);
             a.ok && o.apply(a.ops, { label: a.label });
@@ -320,8 +320,8 @@ function je({ group: l, readOnly: u }) {
         k: "group.row_groups",
         label: "Rows of fields",
         effect: "Short fields that share one row under one label, like Street / City / Zip. To add one, select the fields on the form, right-click and pick Put side by side.",
-        children: w.rows.length === 0 ? /* @__PURE__ */ t("p", { className: "text-[12px] leading-snug text-slate-500 dark:text-muted-foreground", children: "No rows yet." }) : /* @__PURE__ */ t("div", { className: "space-y-2", children: w.rows.map((e) => /* @__PURE__ */ r("div", { className: "space-y-1", "data-row-group-setting": e.key, children: [
-          /* @__PURE__ */ r("div", { className: "flex items-center gap-1.5", children: [
+        children: x.rows.length === 0 ? /* @__PURE__ */ t("p", { className: "text-[12px] leading-snug text-slate-500 dark:text-muted-foreground", children: "No rows yet." }) : /* @__PURE__ */ t("div", { className: "space-y-2", children: x.rows.map((e) => /* @__PURE__ */ s("div", { className: "space-y-1", "data-row-group-setting": e.key, children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ t(
               S,
               {
@@ -350,12 +350,12 @@ function je({ group: l, readOnly: u }) {
             const c = o.bundle.placements.find(
               (N) => N.field === a && N.group_key === l.key
             ) ?? null;
-            return Z(a, m, f, c).label;
+            return Z(a, u, f, c).label;
           }).join(" · ") })
         ] }, e.key)) })
       }
     ) }),
-    i === "tab" && /* @__PURE__ */ r($, { title: "As a step", children: [
+    i === "tab" && /* @__PURE__ */ s($, { title: "As a step", children: [
       /* @__PURE__ */ t(
         d,
         {
@@ -366,14 +366,14 @@ function je({ group: l, readOnly: u }) {
             be,
             {
               ariaLabel: "Skip as the first step when filled",
-              value: k(l.skip_if_filled),
+              value: v(l.skip_if_filled),
               options: D,
-              onChange: (e) => s({ skip_if_filled: _(e) }, `Change when ${n} is skipped`)
+              onChange: (e) => r({ skip_if_filled: _(e) }, `Change when ${n} is skipped`)
             }
           )
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ s(
         d,
         {
           k: "group.visible_when",
@@ -388,7 +388,7 @@ function je({ group: l, readOnly: u }) {
                 onChange: (e) => {
                   K(e);
                   const a = e.filter((c) => c.field);
-                  JSON.stringify(a) !== C && s({ visible_when: _(a) }, `Change when ${n} shows`, !0);
+                  JSON.stringify(a) !== C && r({ visible_when: _(a) }, `Change when ${n} shows`, !0);
                 }
               }
             ),
@@ -399,14 +399,14 @@ function je({ group: l, readOnly: u }) {
                 target: { kind: "step", group: l.key },
                 bundle: o.bundle,
                 apply: (e, a) => o.apply(e, a),
-                disabled: u
+                disabled: m
               }
             )
           ]
         }
       )
     ] }),
-    v && /* @__PURE__ */ r($, { title: "Who", children: [
+    w && /* @__PURE__ */ s($, { title: "Who", children: [
       /* @__PURE__ */ t(
         d,
         {
@@ -416,8 +416,8 @@ function je({ group: l, readOnly: u }) {
           children: /* @__PURE__ */ t(
             q,
             {
-              roleIds: k(l.hidden_for_roles),
-              onRoleIdsChange: (e) => s({ hidden_for_roles: _(e) }, `Change who sees ${n}`)
+              roleIds: v(l.hidden_for_roles),
+              onRoleIdsChange: (e) => r({ hidden_for_roles: _(e) }, `Change who sees ${n}`)
             }
           )
         }
@@ -431,139 +431,152 @@ function je({ group: l, readOnly: u }) {
           children: /* @__PURE__ */ t(
             q,
             {
-              roleIds: k(l.locked_for_roles),
-              onRoleIdsChange: (e) => s({ locked_for_roles: _(e) }, `Change who can edit ${n}`)
+              roleIds: v(l.locked_for_roles),
+              onRoleIdsChange: (e) => r({ locked_for_roles: _(e) }, `Change who can edit ${n}`)
             }
           )
         }
       )
     ] }),
-    v && /* @__PURE__ */ r($, { title: "When collapsed", children: [
-      /* @__PURE__ */ t(
+    w && /* @__PURE__ */ s($, { title: "When collapsed", children: [
+      /* @__PURE__ */ s(
         d,
         {
           k: "group.summary_fields",
           label: "Show these values in the heading",
-          effect: "A short summary while the section is closed.",
-          children: j.length === 0 ? /* @__PURE__ */ r("p", { className: "text-[12px] leading-snug text-slate-500 dark:text-muted-foreground", children: [
-            "Place fields in ",
-            n,
-            " first."
-          ] }) : /* @__PURE__ */ t("div", { className: "space-y-1.5", children: j.map((e) => {
-            const a = x.find((h) => h.field === e), c = ke(e, f) === "O2M", N = o.bundle.placements.find((h) => h.field === e) ?? null, O = Z(e, m, f, N).label, E = (h, b, le) => G(
-              x.map((A) => A.field === e ? { ...A, ...h } : A),
-              b,
-              le
-            );
-            return /* @__PURE__ */ r("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ r("label", { className: "flex items-center gap-2 text-[12px]", children: [
-                /* @__PURE__ */ t(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: !!a,
-                    onChange: (h) => G(
-                      h.target.checked ? [...x, c ? { field: e, agg: "count" } : { field: e }] : x.filter((b) => b.field !== e),
-                      `Change the summary of ${n}`
-                    ),
-                    className: "h-3.5 w-3.5 accent-nvr-cyan"
-                  }
-                ),
-                /* @__PURE__ */ t("span", { className: "flex-1 truncate", children: O }),
-                c && /* @__PURE__ */ t("span", { className: "text-[12px] leading-snug text-slate-500 dark:text-muted-foreground", children: "list" })
-              ] }),
-              a && /* @__PURE__ */ r("div", { className: "space-y-1 pl-5", children: [
-                /* @__PURE__ */ t("div", { "data-setting": "group.summary_fields.label", children: /* @__PURE__ */ t(
-                  S,
-                  {
-                    ariaLabel: `Label for ${O}`,
-                    value: a.label ?? "",
-                    placeholder: `Label (${O})`,
-                    onChange: (h) => E(
-                      { label: h || null },
-                      `Change the summary of ${n}`,
-                      !0
-                    )
-                  }
-                ) }),
-                c && /* @__PURE__ */ r("div", { className: "flex gap-1", children: [
-                  /* @__PURE__ */ t("div", { className: "flex-1", "data-setting": "group.summary_fields.agg", children: /* @__PURE__ */ t(
-                    F,
+          effect: "A short summary while the section is closed, in edit and summary view. Two or three values read best; the summary heading shows the first three.",
+          children: [
+            j.length === 0 ? /* @__PURE__ */ s("p", { className: "text-[12px] leading-snug text-slate-500 dark:text-muted-foreground", children: [
+              "Place fields in ",
+              n,
+              " first."
+            ] }) : /* @__PURE__ */ t("div", { className: "space-y-1.5", children: j.map((e) => {
+              const a = b.find((h) => h.field === e), c = ke(e, f) === "O2M", N = o.bundle.placements.find((h) => h.field === e) ?? null, O = Z(e, u, f, N).label, E = (h, y, le) => G(
+                b.map((A) => A.field === e ? { ...A, ...h } : A),
+                y,
+                le
+              );
+              return /* @__PURE__ */ s("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ s("label", { className: "flex items-center gap-2 text-[12px]", children: [
+                  /* @__PURE__ */ t(
+                    "input",
                     {
-                      ariaLabel: "Show",
-                      value: a.agg ?? "count",
-                      options: [
-                        { value: "count", label: "Count" },
-                        { value: "sum", label: "Sum" },
-                        { value: "avg", label: "Average" },
-                        { value: "min", label: "Smallest" },
-                        { value: "max", label: "Largest" }
-                      ],
-                      onChange: (h) => E(
-                        h === "count" ? { agg: h, agg_field: void 0, field_options: void 0 } : { agg: h },
+                      type: "checkbox",
+                      checked: !!a,
+                      onChange: (h) => G(
+                        h.target.checked ? [...b, c ? { field: e, agg: "count" } : { field: e }] : b.filter((y) => y.field !== e),
                         `Change the summary of ${n}`
-                      )
+                      ),
+                      className: "h-3.5 w-3.5 accent-nvr-cyan"
                     }
-                  ) }),
-                  (a.agg ?? "count") !== "count" && /* @__PURE__ */ t(
-                    "div",
+                  ),
+                  /* @__PURE__ */ t("span", { className: "flex-1 truncate", children: O }),
+                  c && /* @__PURE__ */ t("span", { className: "text-[12px] leading-snug text-slate-500 dark:text-muted-foreground", children: "list" })
+                ] }),
+                a && /* @__PURE__ */ s("div", { className: "space-y-1 pl-5", children: [
+                  /* @__PURE__ */ t("div", { "data-setting": "group.summary_fields.label", children: /* @__PURE__ */ t(
+                    S,
                     {
-                      className: "flex-1",
-                      "data-setting": "group.summary_fields.agg_field",
-                      children: /* @__PURE__ */ t(
-                        re,
-                        {
-                          relatedCollection: _e(e, f),
-                          value: a.agg_field ?? "",
-                          onChange: (h, b) => E(
-                            { agg_field: h, field_options: b },
-                            `Change the summary of ${n}`
-                          )
-                        }
+                      ariaLabel: `Label for ${O}`,
+                      value: a.label ?? "",
+                      placeholder: `Label (${O})`,
+                      onChange: (h) => E(
+                        { label: h || null },
+                        `Change the summary of ${n}`,
+                        !0
                       )
                     }
-                  )
+                  ) }),
+                  c && /* @__PURE__ */ s("div", { className: "flex gap-1", children: [
+                    /* @__PURE__ */ t("div", { className: "flex-1", "data-setting": "group.summary_fields.agg", children: /* @__PURE__ */ t(
+                      F,
+                      {
+                        ariaLabel: "Show",
+                        value: a.agg ?? "count",
+                        options: [
+                          { value: "count", label: "Count" },
+                          { value: "sum", label: "Sum" },
+                          { value: "avg", label: "Average" },
+                          { value: "min", label: "Smallest" },
+                          { value: "max", label: "Largest" }
+                        ],
+                        onChange: (h) => E(
+                          h === "count" ? { agg: h, agg_field: void 0, field_options: void 0 } : { agg: h },
+                          `Change the summary of ${n}`
+                        )
+                      }
+                    ) }),
+                    (a.agg ?? "count") !== "count" && /* @__PURE__ */ t(
+                      "div",
+                      {
+                        className: "flex-1",
+                        "data-setting": "group.summary_fields.agg_field",
+                        children: /* @__PURE__ */ t(
+                          re,
+                          {
+                            relatedCollection: ve(e, f),
+                            value: a.agg_field ?? "",
+                            onChange: (h, y) => E(
+                              { agg_field: h, field_options: y },
+                              `Change the summary of ${n}`
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ] })
                 ] })
-              ] })
-            ] }, e);
-          }) })
+              ] }, e);
+            }) }),
+            b.length > 3 && /* @__PURE__ */ s(
+              "p",
+              {
+                "data-summary-crowded": "",
+                className: "mt-1.5 text-[12px] leading-snug text-amber-700 dark:text-amber-300",
+                children: [
+                  b.length,
+                  " values crowd the heading; the summary view shows the first three."
+                ]
+              }
+            )
+          ]
         }
       ),
       /* @__PURE__ */ t(
-        g,
+        k,
         {
           k: "group.summary_hide_empty",
           label: "Leave out empty values",
           effect: "Fields without a value are left out of the summary line.",
           checked: l.summary_hide_empty,
-          onChange: (e) => s({ summary_hide_empty: e }, `Change the summary of ${n}`)
+          onChange: (e) => r({ summary_hide_empty: e }, `Change the summary of ${n}`)
         }
       )
     ] }),
-    v && /* @__PURE__ */ t(
+    w && /* @__PURE__ */ t(
       de,
       {
         group: { id: l.id ?? 0, swap_config: l.swap_config },
-        allFields: m.map((e) => ({ field: e.field, type: e.type ?? void 0 })),
-        onGroupSettings: (e, a) => s(a, `Change the field swap of ${n}`)
+        allFields: u.map((e) => ({ field: e.field, type: e.type ?? void 0 })),
+        onGroupSettings: (e, a) => r(a, `Change the field swap of ${n}`)
       }
     ),
-    !u && /* @__PURE__ */ t(he, { bundle: o.bundle, collection: o.collection, group: l }),
-    /* @__PURE__ */ t(ve, { group: l }),
+    !m && /* @__PURE__ */ t(he, { bundle: o.bundle, collection: o.collection, group: l }),
+    /* @__PURE__ */ t(_e, { group: l }),
     /* @__PURE__ */ t(
       "div",
       {
         "data-setting": "group.delete",
         className: "border-t border-slate-200 pt-3 dark:border-border",
-        children: te ? /* @__PURE__ */ r("div", { className: "space-y-2 rounded-md border border-red-200 bg-red-50 p-2.5 text-[12px] text-red-900 dark:border-red-800/60 dark:bg-red-950/30 dark:text-red-100", children: [
-          /* @__PURE__ */ r("p", { children: [
+        children: te ? /* @__PURE__ */ s("div", { className: "space-y-2 rounded-md border border-red-200 bg-red-50 p-2.5 text-[12px] text-red-900 dark:border-red-800/60 dark:bg-red-950/30 dark:text-red-100", children: [
+          /* @__PURE__ */ s("p", { children: [
             "Delete ",
             n,
             "? Its fields move to the top of the form",
             L.length ? " and its tabs move out" : "",
             ". Undo brings it back."
           ] }),
-          /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ t(
               "button",
               {
@@ -585,7 +598,7 @@ function je({ group: l, readOnly: u }) {
               }
             )
           ] })
-        ] }) : /* @__PURE__ */ r(
+        ] }) : /* @__PURE__ */ s(
           "button",
           {
             type: "button",