@ai-matrx/records-ui 0.77.0 → 0.79.0

package/dist/index.js

@@ -4240,10 +4240,30 @@ import {
   importCsv,
   importXlsx
 } from "@ai-matrx/records/core";
-import { Badge as Badge5, Button as Button11, Separator as Separator2, cn as cn12 } from "@ai-matrx/design-system";
+import {
+  Badge as Badge5,
+  Button as Button11,
+  Select as Select3,
+  SelectContent as SelectContent3,
+  SelectItem as SelectItem3,
+  SelectTrigger as SelectTrigger3,
+  SelectValue as SelectValue3,
+  Separator as Separator2,
+  cn as cn12
+} from "@ai-matrx/design-system";
 import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var BATCH = 250;
 var SAMPLES = 40;
+var MAPPING_COLUMNS = "minmax(9rem, 11rem) minmax(14rem, 17rem) minmax(13rem, 1fr) minmax(8rem, 10rem)";
+var ABSENT = "__absent__";
+function obviousTitleColumn(columns) {
+  const says = /^(title|name|record|customer|client|company|job|item|subject|label|description)\b|(\bname|\btitle|\bnumber|\bid)$/i;
+  const named = columns.find((c) => says.test(c.header.trim()));
+  if (named) return named.header;
+  const text = columns.find((c) => c.type === "text");
+  if (text) return text.header;
+  return columns[0]?.header ?? null;
+}
 async function sha256(bytes) {
   const subtle = globalThis.crypto?.subtle;
   if (!subtle) return null;
@@ -4278,6 +4298,7 @@ function ImportWizard({ tableId, onDone, className }) {
   const [alreadyRan, setAlreadyRan] = useState13(null);
   const [columnsAdded, setColumnsAdded] = useState13(null);
   const [show, setShow] = useState13("all");
+  const [ledger, setLedger] = useState13(null);
   const declared = fields.data ?? [];
   const take = useCallback8(
     async (file) => {
@@ -4288,6 +4309,7 @@ function ImportWizard({ tableId, onDone, className }) {
       setProposals([]);
       setAlreadyRan(null);
       setProgress(0);
+      setLedger(null);
       try {
         const xlsx = file.name.toLowerCase().endsWith(".xlsx");
         const bytes = await file.arrayBuffer();
@@ -4314,6 +4336,11 @@ function ImportWizard({ tableId, onDone, className }) {
         for (const column of answered.data.columns) {
           if (column.matched) next[column.header] = column.field_key;
         }
+        const titleKey2 = table.data?.title_field ?? null;
+        if (titleKey2 && !Object.values(next).includes(titleKey2)) {
+          const guess = obviousTitleColumn(answered.data.columns);
+          if (guess) next[guess] = titleKey2;
+        }
         setMapping(next);
         setPhase("ready");
       } catch (thrown) {
@@ -4321,7 +4348,7 @@ function ImportWizard({ tableId, onDone, className }) {
         setPhase("waiting");
       }
     },
-    [client, declared, tableId]
+    [client, declared, tableId, table.data?.title_field]
   );
   const run = useCallback8(async () => {
     if (!plan) return;
@@ -4329,6 +4356,7 @@ function ImportWizard({ tableId, onDone, className }) {
     setOutcomes([]);
     setColumnsAdded(null);
     setProgress(0);
+    setLedger(null);
     if (unmapped === "create" && rights.admin) {
       setPhase("declaring");
       const made = await client.importDeclareColumns({ table_id: tableId, rows, mapping });
@@ -4364,6 +4392,7 @@ function ImportWizard({ tableId, onDone, className }) {
     }
     const importId = opened.data.import_id;
     const collected = [];
+    const told = { seen: 0, written: 0, duplicate: 0, refused: 0 };
     let take2 = opened.data.rows_per_call ?? BATCH;
     let at = 0;
     while (at < rows.length) {
@@ -4372,11 +4401,17 @@ function ImportWizard({ tableId, onDone, className }) {
       if (!answered.ok) {
         setProblem(answered.error.message);
         setOutcomes([...collected]);
+        setLedger({ ...told, final: false });
         setPhase("ready");
         return;
       }
       collected.push(...answered.data.outcomes);
       setOutcomes([...collected]);
+      told.seen += answered.data.rows_seen;
+      told.written += answered.data.rows_written;
+      told.duplicate += answered.data.rows_duplicate;
+      told.refused += answered.data.rows_refused;
+      setLedger({ ...told, final: false });
       at += batch.length;
       setProgress(Math.min(at, rows.length));
       if (answered.data.rows_per_call) take2 = answered.data.rows_per_call;
@@ -4389,6 +4424,13 @@ function ImportWizard({ tableId, onDone, className }) {
     }
     setSummary(finished.data.message);
     setProposals(finished.data.proposals);
+    setLedger({
+      seen: finished.data.rows_seen,
+      written: finished.data.rows_written,
+      duplicate: finished.data.rows_duplicate,
+      refused: finished.data.rows_refused,
+      final: true
+    });
     setPhase("done");
     onDone?.(finished.data.rows_written);
   }, [client, dedupeKey, fileBytes, fileHash, fileName, format, mapping, onDuplicate, onDone, plan, rows, tableId, unmapped]);
@@ -4408,6 +4450,10 @@ function ImportWizard({ tableId, onDone, className }) {
     [outcomes, show]
   );
   const mappedCount = Object.keys(mapping).length;
+  const titleKey = table.data?.title_field ?? null;
+  const titleMappedTo = titleKey ? Object.entries(mapping).find(([, key]) => key === titleKey)?.[0] ?? null : null;
+  const titleMissing = Boolean(titleKey) && titleMappedTo === null;
+  const titleFieldLabel = (titleKey ? plan?.fields.find((f) => f.key === titleKey)?.label : null) || (titleKey ? declared.find((f) => f.key === titleKey)?.label : null) || "the name column";
   const busy = phase === "reading" || phase === "planning" || phase === "declaring" || phase === "writing";
   return /* @__PURE__ */ jsxs12("div", { className: cn12("flex min-w-0 flex-col gap-2 text-xs", className), children: [
     /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
@@ -4440,55 +4486,107 @@ function ImportWizard({ tableId, onDone, className }) {
     phase === "reading" ? /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: "Reading the file\u2026" }) : null,
     phase === "planning" ? /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: "Working out what each column is\u2026" }) : null,
     plan && parsed ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
-      /* @__PURE__ */ jsx16("div", { className: "w-full overflow-x-auto rounded border", children: /* @__PURE__ */ jsxs12("table", { className: "w-full min-w-[50rem] table-fixed", children: [
-        /* @__PURE__ */ jsxs12("colgroup", { children: [
-          /* @__PURE__ */ jsx16("col", { className: "w-[10rem]" }),
-          /* @__PURE__ */ jsx16("col", { className: "w-[17rem]" }),
-          /* @__PURE__ */ jsx16("col", { className: "w-[14rem]" }),
-          /* @__PURE__ */ jsx16("col", { className: "w-[9rem]" })
-        ] }),
-        /* @__PURE__ */ jsx16("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx16("th", { className: "px-2 py-1 text-left font-medium", children: "Column in the file" }),
-          /* @__PURE__ */ jsx16("th", { className: "px-2 py-1 text-left font-medium", children: "Goes to" }),
-          /* @__PURE__ */ jsx16("th", { className: "px-2 py-1 text-left font-medium", children: "Kind" }),
-          /* @__PURE__ */ jsx16("th", { className: "px-2 py-1 text-left font-medium", children: "First values" })
-        ] }) }),
-        /* @__PURE__ */ jsx16("tbody", { children: plan.columns.map((column) => {
+      titleKey ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2 rounded border bg-muted/40 px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx16("span", { className: "font-medium", children: "What each record is called" }),
+        /* @__PURE__ */ jsxs12(
+          Select3,
+          {
+            value: titleMappedTo ?? "",
+            disabled: busy,
+            onValueChange: (chosen) => {
+              setMapping((m) => {
+                const next = { ...m };
+                for (const [header, key] of Object.entries(next)) {
+                  if (key === titleKey) delete next[header];
+                }
+                if (chosen) next[chosen] = titleKey;
+                return next;
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsx16(
+                SelectTrigger3,
+                {
+                  size: "sm",
+                  "aria-label": "Which column each record is named by",
+                  className: "min-w-[14rem]",
+                  children: /* @__PURE__ */ jsx16(SelectValue3, { placeholder: "\u2014 choose the column \u2014" })
+                }
+              ),
+              /* @__PURE__ */ jsx16(SelectContent3, { children: plan.columns.map((c) => /* @__PURE__ */ jsx16(SelectItem3, { value: c.header, children: c.header }, c.header)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx16("span", { className: "text-muted-foreground", children: titleMappedTo ? `goes into ${titleFieldLabel}, so every record this file makes has a name you can read in the grid and on a chip.` : `Nothing goes into ${titleFieldLabel} yet, so every record this file makes would land with no name at all. Pick the column that says what each row IS.` })
+      ] }) : null,
+      /* @__PURE__ */ jsx16("div", { className: "w-full overflow-x-auto rounded border", children: /* @__PURE__ */ jsxs12("div", { className: "min-w-[52rem]", children: [
+        /* @__PURE__ */ jsxs12(
+          "div",
+          {
+            className: "grid items-center gap-x-3 border-b bg-muted px-2 py-1 font-medium",
+            style: { gridTemplateColumns: MAPPING_COLUMNS },
+            children: [
+              /* @__PURE__ */ jsx16("span", { children: "Column in the file" }),
+              /* @__PURE__ */ jsx16("span", { children: "Goes to" }),
+              /* @__PURE__ */ jsx16("span", { children: "Kind" }),
+              /* @__PURE__ */ jsx16("span", { children: "First values" })
+            ]
+          }
+        ),
+        plan.columns.map((column) => {
           const to = mapping[column.header] ?? "";
-          return /* @__PURE__ */ jsxs12("tr", { className: "border-t align-top", children: [
-            /* @__PURE__ */ jsx16("td", { className: "truncate px-2 py-1 font-medium", title: column.header, children: column.header }),
-            /* @__PURE__ */ jsx16("td", { className: "px-2 py-1", children: /* @__PURE__ */ jsxs12(
-              "select",
-              {
-                "aria-label": `Where ${column.header} goes`,
-                className: "w-full min-w-0 rounded border bg-background px-1 py-0.5",
-                value: to,
-                disabled: busy,
-                onChange: (e) => {
-                  const chosen = e.target.value;
-                  setMapping((m) => {
-                    const next = { ...m };
-                    if (chosen === "") delete next[column.header];
-                    else next[column.header] = chosen;
-                    return next;
-                  });
-                },
-                children: [
-                  /* @__PURE__ */ jsx16("option", { value: "", children: unmapped === "ignore" ? "\u2014 leave it out \u2014" : "\u2014 offer it as a new column \u2014" }),
-                  plan.fields.map((f) => /* @__PURE__ */ jsx16("option", { value: f.key, children: f.label || f.key }, f.field_id))
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxs12("td", { className: "px-2 py-1", children: [
-              /* @__PURE__ */ jsx16(Badge5, { variant: column.matched ? "secondary" : "outline", className: "text-[11px] font-normal", children: typeWord(column.type) }),
-              column.unit ? /* @__PURE__ */ jsx16("span", { className: "ml-1 opacity-60", children: column.unit }) : null,
-              /* @__PURE__ */ jsx16("p", { className: "mt-0.5 text-muted-foreground", children: column.why }),
-              column.ambiguous ? /* @__PURE__ */ jsx16("p", { className: "text-destructive", children: "Check a date you know before you run this." }) : null,
-              column.collides_with ? /* @__PURE__ */ jsx16("p", { className: "text-destructive", children: "Two columns in this file would make the same column." }) : null
-            ] }),
-            /* @__PURE__ */ jsx16("td", { className: "truncate px-2 py-1 text-muted-foreground", children: (column.samples ?? []).slice(0, 3).map(String).join(" \xB7 ") })
-          ] }, column.header);
-        }) })
+          const absent = unmapped === "ignore" ? "\u2014 leave it out \u2014" : "\u2014 offer it as a new column \u2014";
+          return /* @__PURE__ */ jsxs12(
+            "div",
+            {
+              className: "grid items-start gap-x-3 border-t px-2 py-1",
+              style: { gridTemplateColumns: MAPPING_COLUMNS },
+              children: [
+                /* @__PURE__ */ jsx16("span", { className: "truncate pt-1.5 font-medium", title: column.header, children: column.header }),
+                /* @__PURE__ */ jsxs12(
+                  Select3,
+                  {
+                    value: to || ABSENT,
+                    disabled: busy,
+                    onValueChange: (chosen) => {
+                      setMapping((m) => {
+                        const next = { ...m };
+                        if (chosen === ABSENT) delete next[column.header];
+                        else next[column.header] = chosen;
+                        return next;
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx16(
+                        SelectTrigger3,
+                        {
+                          size: "sm",
+                          "aria-label": `Where ${column.header} goes`,
+                          "data-goes-to": column.header,
+                          className: "w-full min-w-[14rem]",
+                          children: /* @__PURE__ */ jsx16(SelectValue3, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs12(SelectContent3, { children: [
+                        /* @__PURE__ */ jsx16(SelectItem3, { value: ABSENT, children: absent }),
+                        plan.fields.map((f) => /* @__PURE__ */ jsx16(SelectItem3, { value: f.key, children: f.label || f.key }, f.field_id))
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs12("div", { className: "pt-1", children: [
+                  /* @__PURE__ */ jsx16(Badge5, { variant: column.matched ? "secondary" : "outline", className: "text-[11px] font-normal", children: typeWord(column.type) }),
+                  column.unit ? /* @__PURE__ */ jsx16("span", { className: "ml-1 opacity-60", children: column.unit }) : null,
+                  /* @__PURE__ */ jsx16("p", { className: "mt-0.5 text-muted-foreground", children: column.why }),
+                  column.ambiguous ? /* @__PURE__ */ jsx16("p", { className: "text-destructive", children: "Check a date you know before you run this." }) : null,
+                  column.collides_with ? /* @__PURE__ */ jsx16("p", { className: "text-destructive", children: "Two columns in this file would make the same column." }) : null
+                ] }),
+                /* @__PURE__ */ jsx16("span", { className: "truncate pt-1.5 text-muted-foreground", children: (column.samples ?? []).slice(0, 3).map(String).join(" \xB7 ") })
+              ]
+            },
+            column.header
+          );
+        })
       ] }) }),
       /* @__PURE__ */ jsx16(Separator2, {}),
       /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -4546,13 +4644,18 @@ function ImportWizard({ tableId, onDone, className }) {
         ] })
       ] }),
       /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx16(Button11, { size: "sm", disabled: busy || !rights.write || rows.length === 0, onClick: () => void run(), children: phase === "declaring" ? "Adding the columns\u2026" : phase === "writing" ? `Writing\u2026 ${progress} of ${rows.length}` : `Import ${rows.length} row${rows.length === 1 ? "" : "s"}` }),
-        /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground", children: [
-          mappedCount,
-          " of ",
-          plan.columns.length,
-          " columns go into this table",
-          fileHash ? "" : " \xB7 this browser cannot recognise the file again, so importing it twice would write it twice"
+        /* @__PURE__ */ jsx16(
+          Button11,
+          {
+            size: "sm",
+            disabled: busy || !rights.write || rows.length === 0 || titleMissing,
+            onClick: () => void run(),
+            children: phase === "declaring" ? "Adding the columns\u2026" : phase === "writing" ? `Writing\u2026 ${progress} of ${rows.length}` : `Import ${rows.length} row${rows.length === 1 ? "" : "s"}`
+          }
+        ),
+        /* @__PURE__ */ jsxs12("span", { className: cn12("text-muted-foreground", titleMissing && "text-destructive"), children: [
+          titleMissing ? `Nothing goes into ${titleFieldLabel} yet, so these records would have no name. Choose the column above, then this will run.` : `${mappedCount} of ${plan.columns.length} columns go into this table`,
+          fileHash || titleMissing ? "" : " \xB7 this browser cannot recognise the file again, so importing it twice would write it twice"
         ] })
       ] })
     ] }) : null,
@@ -4570,27 +4673,31 @@ function ImportWizard({ tableId, onDone, className }) {
       ] }) : null
     ] }) : null,
     alreadyRan ? /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: alreadyRan }) : null,
-    outcomes.length > 0 || summary ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+    outcomes.length > 0 || summary || ledger ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
       /* @__PURE__ */ jsx16(Separator2, {}),
       /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxs12("span", { children: [
-          counts.landed,
-          " landed \xB7 ",
-          counts.duplicate,
-          " already here \xB7 ",
-          counts.refused,
-          " refused"
-        ] }),
-        counts.refused + counts.duplicate > 0 ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+        /* @__PURE__ */ jsx16("span", { children: ledger ? `${ledger.written} landed \xB7 ${ledger.duplicate} already here \xB7 ${ledger.refused} refused, of ${ledger.seen} row${ledger.seen === 1 ? "" : "s"} offered` : `${counts.landed} landed \xB7 ${counts.duplicate} already here \xB7 ${counts.refused} refused` }),
+        ledger && !ledger.final && phase !== "writing" ? /* @__PURE__ */ jsx16("span", { className: "text-destructive", children: "The run stopped here, so the rest of the file was never offered \u2014 these are the rows that were dealt with before it stopped, not the whole file." }) : null,
+        (ledger ? ledger.refused + ledger.duplicate : counts.refused + counts.duplicate) > 0 ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
           /* @__PURE__ */ jsx16("button", { type: "button", className: cn12("underline underline-offset-2", show === "all" && "font-medium"), onClick: () => setShow("all"), children: "everything that did not land" }),
           /* @__PURE__ */ jsx16("button", { type: "button", className: cn12("underline underline-offset-2", show === "refused" && "font-medium"), onClick: () => setShow("refused"), children: "refused" }),
           /* @__PURE__ */ jsx16("button", { type: "button", className: cn12("underline underline-offset-2", show === "duplicate" && "font-medium"), onClick: () => setShow("duplicate"), children: "already here" })
         ] }) : null
       ] }),
       summary ? /* @__PURE__ */ jsx16("p", { className: "text-muted-foreground", children: summary }) : null,
+      ledger && show === "all" && ledger.refused + ledger.duplicate > interesting.length ? /* @__PURE__ */ jsxs12("p", { className: "text-muted-foreground", children: [
+        interesting.length,
+        " of the ",
+        ledger.refused + ledger.duplicate,
+        " row",
+        ledger.refused + ledger.duplicate === 1 ? " that" : "s that",
+        " did not land",
+        interesting.length === 1 ? " is" : " are",
+        " listed below by their line in your file \u2014 the store keeps the rest with this run and does not hand every one of them back at once."
+      ] }) : null,
       interesting.length > 0 ? /* @__PURE__ */ jsx16("div", { className: "max-h-64 overflow-auto rounded border", children: /* @__PURE__ */ jsxs12("table", { className: "w-full", children: [
         /* @__PURE__ */ jsx16("thead", { className: "sticky top-0 bg-muted", children: /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx16("th", { className: "px-2 py-1 text-left font-medium", children: "Row" }),
+          /* @__PURE__ */ jsx16("th", { className: "px-2 py-1 text-left font-medium", children: "Line in your file" }),
           /* @__PURE__ */ jsx16("th", { className: "px-2 py-1 text-left font-medium", children: "What happened" }),
           /* @__PURE__ */ jsx16("th", { className: "px-2 py-1 text-left font-medium", children: "The row in your file" })
         ] }) }),
@@ -4803,13 +4910,13 @@ import {
   Button as Button13,
   Checkbox as Checkbox4,
   Label as Label4,
-  Select as Select3,
-  SelectContent as SelectContent3,
+  Select as Select4,
+  SelectContent as SelectContent4,
   SelectGroup,
-  SelectItem as SelectItem3,
+  SelectItem as SelectItem4,
   SelectLabel,
-  SelectTrigger as SelectTrigger3,
-  SelectValue as SelectValue3,
+  SelectTrigger as SelectTrigger4,
+  SelectValue as SelectValue4,
   Separator as Separator4,
   cn as cn14
 } from "@ai-matrx/design-system";
@@ -4822,6 +4929,9 @@ var ROLLUP_OPERATIONS = ROLLUP_AGG_VALUES.map((value) => ({
   value,
   label: ROLLUP_AGG_LABEL[value]
 }));
+var FORMULA_SEPARATOR_LABEL = "Joined by";
+var EDITING_A_WORKED_OUT_COLUMN = "This column works out its answer from other columns. Which columns it uses, and what joins them, cannot be changed on this screen yet \u2014 remove it and add it again to change them.";
+var FORMULA_DEFAULT_SEPARATOR = " \u2014 ";
 var FORMULA_OPERATIONS = FORMULA_OP_VALUES.map((value) => ({
   value,
   label: FORMULA_OP_LABEL[value],
@@ -4858,8 +4968,9 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
   const [of, setOf] = useState15(String(field?.config?.["of"] ?? ""));
   const [relationTarget, setRelationTarget] = useState15(String(field?.relation_target ?? ""));
   const [display, setDisplay] = useState15(field?.display ?? null);
-  const [formulaOp, setFormulaOp] = useState15("concat");
-  const [formulaFields, setFormulaFields] = useState15([]);
+  const [formulaOp, setFormulaOp] = useState15(() => formulaOpOf(field));
+  const [formulaFields, setFormulaFields] = useState15(() => formulaFieldIdsOf(field));
+  const [formulaSeparator, setFormulaSeparator] = useState15(() => formulaSeparatorOf(field));
   const [askingToRemove, setAskingToRemove] = useState15(false);
   const [notLanded, setNotLanded] = useState15(false);
   const others = useMemo12(
@@ -4933,7 +5044,7 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
       ...type === "datetime" ? { kind: withTime ? "datetime" : "date" } : {},
       ...type === "lookup" ? { via, pick } : {},
       ...type === "rollup" ? { via, agg, ...agg === "count" ? {} : { of } } : {},
-      ...type === "formula" ? { expr: formulaExpression(formulaOp, formulaFields) } : {}
+      ...type === "formula" ? { expr: formulaExpression(formulaOp, formulaFields, formulaSeparator) } : {}
     };
     const written = await mutation.declare({ table_id: tableId, spec });
     if (written === null) return;
@@ -4974,16 +5085,16 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
       /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx18(Label4, { className: "text-xs", children: "What it holds" }),
         /* @__PURE__ */ jsxs14(
-          Select3,
+          Select4,
           {
             value: type,
             disabled: editing,
             onValueChange: (next) => setType(next),
             children: [
-              /* @__PURE__ */ jsx18(SelectTrigger3, { size: "sm", "aria-label": "What this field holds", children: /* @__PURE__ */ jsx18(SelectValue3, {}) }),
-              /* @__PURE__ */ jsx18(SelectContent3, { children: FIELD_TYPE_GROUPS.map((group) => /* @__PURE__ */ jsxs14(SelectGroup, { children: [
+              /* @__PURE__ */ jsx18(SelectTrigger4, { size: "sm", "aria-label": "What this field holds", children: /* @__PURE__ */ jsx18(SelectValue4, {}) }),
+              /* @__PURE__ */ jsx18(SelectContent4, { children: FIELD_TYPE_GROUPS.map((group) => /* @__PURE__ */ jsxs14(SelectGroup, { children: [
                 /* @__PURE__ */ jsx18(SelectLabel, { children: group }),
-                FIELD_TYPE_CHOICES.filter((c) => c.group === group).map((c) => /* @__PURE__ */ jsx18(SelectItem3, { value: c.id, children: c.label }, c.id))
+                FIELD_TYPE_CHOICES.filter((c) => c.group === group).map((c) => /* @__PURE__ */ jsx18(SelectItem4, { value: c.id, children: c.label }, c.id))
               ] }, group)) })
             ]
           }
@@ -4991,6 +5102,7 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
         /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: editing ? "What a column holds cannot be changed here \u2014 every value already saved would have to be converted. Add a new column and move the values across." : choice?.explanation ?? "" })
       ] })
     ] }),
+    editing && type === "formula" ? /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: EDITING_A_WORKED_OUT_COLUMN }) : null,
     !editing || type === "select" || type === "multi_select" || type === "relation" ? /* @__PURE__ */ jsx18(
       TypeQuestions,
       {
@@ -5019,6 +5131,8 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
         setFormulaOp,
         formulaFields,
         setFormulaFields,
+        formulaSeparator,
+        setFormulaSeparator,
         relations,
         others,
         existingOptionsTable: Boolean(field?.options_table_id ?? field?.config?.["options_table_id"])
@@ -5063,16 +5177,16 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
     /* @__PURE__ */ jsxs14("div", { className: "grid gap-3 sm:grid-cols-2", children: [
       /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx18(Label4, { className: "text-xs", children: "Who can see what is in it" }),
-        /* @__PURE__ */ jsxs14(Select3, { value: sensitivity, onValueChange: setSensitivity, children: [
-          /* @__PURE__ */ jsx18(SelectTrigger3, { size: "sm", "aria-label": "Who can see what is in it", children: /* @__PURE__ */ jsx18(SelectValue3, {}) }),
-          /* @__PURE__ */ jsx18(SelectContent3, { children: SENSITIVITIES.map((row) => /* @__PURE__ */ jsx18(SelectItem3, { value: row.value, children: row.label }, row.value)) })
+        /* @__PURE__ */ jsxs14(Select4, { value: sensitivity, onValueChange: setSensitivity, children: [
+          /* @__PURE__ */ jsx18(SelectTrigger4, { size: "sm", "aria-label": "Who can see what is in it", children: /* @__PURE__ */ jsx18(SelectValue4, {}) }),
+          /* @__PURE__ */ jsx18(SelectContent4, { children: SENSITIVITIES.map((row) => /* @__PURE__ */ jsx18(SelectItem4, { value: row.value, children: row.label }, row.value)) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx18(Label4, { className: "text-xs", children: "Can an assistant read it" }),
-        /* @__PURE__ */ jsxs14(Select3, { value: contextPolicy, onValueChange: setContextPolicy, children: [
-          /* @__PURE__ */ jsx18(SelectTrigger3, { size: "sm", "aria-label": "Can an assistant read it", children: /* @__PURE__ */ jsx18(SelectValue3, {}) }),
-          /* @__PURE__ */ jsx18(SelectContent3, { children: AGENT_VISIBILITY.map((row) => /* @__PURE__ */ jsx18(SelectItem3, { value: row.value, children: row.label }, row.value)) })
+        /* @__PURE__ */ jsxs14(Select4, { value: contextPolicy, onValueChange: setContextPolicy, children: [
+          /* @__PURE__ */ jsx18(SelectTrigger4, { size: "sm", "aria-label": "Can an assistant read it", children: /* @__PURE__ */ jsx18(SelectValue4, {}) }),
+          /* @__PURE__ */ jsx18(SelectContent4, { children: AGENT_VISIBILITY.map((row) => /* @__PURE__ */ jsx18(SelectItem4, { value: row.value, children: row.label }, row.value)) })
         ] })
       ] })
     ] }),
@@ -5095,13 +5209,13 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
       rules.length === 0 ? /* @__PURE__ */ jsx18("p", { className: "text-muted-foreground", children: "No checks. Anything this kind of column can hold will be accepted." }) : null,
       rules.map((rule, index) => /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsxs14(
-          Select3,
+          Select4,
           {
             value: rule.kind,
             onValueChange: (kind) => setRules(rules.map((r, i) => i === index ? { ...r, kind } : r)),
             children: [
-              /* @__PURE__ */ jsx18(SelectTrigger3, { size: "sm", className: "w-52", "aria-label": `Check ${index + 1}`, children: /* @__PURE__ */ jsx18(SelectValue3, {}) }),
-              /* @__PURE__ */ jsx18(SelectContent3, { children: RULE_KINDS.map((row) => /* @__PURE__ */ jsx18(SelectItem3, { value: row.kind, children: row.label }, row.kind)) })
+              /* @__PURE__ */ jsx18(SelectTrigger4, { size: "sm", className: "w-52", "aria-label": `Check ${index + 1}`, children: /* @__PURE__ */ jsx18(SelectValue4, {}) }),
+              /* @__PURE__ */ jsx18(SelectContent4, { children: RULE_KINDS.map((row) => /* @__PURE__ */ jsx18(SelectItem4, { value: row.kind, children: row.label }, row.kind)) })
             ]
           }
         ),
@@ -5203,10 +5317,30 @@ function startingType(field) {
   if (fieldTypeChoice(kind)) return kind;
   return "text";
 }
-function formulaExpression(op, fieldIds) {
+function formulaExpression(op, fieldIds, separator) {
   const args = fieldIds.filter((id) => id !== "").map((id) => ({ field: id }));
-  if (args.length === 0) return { op, args: [{ const: "" }] };
-  return { op, args };
+  const joined = op === "concat" && separator !== "" ? { separator } : {};
+  if (args.length === 0) return { op, ...joined, args: [{ const: "" }] };
+  return { op, ...joined, args };
+}
+function formulaExprOf(field) {
+  const expr = field?.config?.["expr"];
+  return expr !== null && typeof expr === "object" ? expr : null;
+}
+function formulaOpOf(field) {
+  const op = formulaExprOf(field)?.["op"];
+  return typeof op === "string" && op !== "" ? op : "concat";
+}
+function formulaFieldIdsOf(field) {
+  const args = formulaExprOf(field)?.["args"];
+  if (!Array.isArray(args)) return [];
+  return args.map((a) => a !== null && typeof a === "object" ? a["field"] : void 0).filter((id) => typeof id === "string" && id !== "");
+}
+function formulaSeparatorOf(field) {
+  const expr = formulaExprOf(field);
+  if (expr === null) return FORMULA_DEFAULT_SEPARATOR;
+  const sep = expr["separator"];
+  return typeof sep === "string" ? sep : "";
 }
 function TypeQuestions(props) {
   const { type } = props;
@@ -5277,9 +5411,9 @@ function TypeQuestions(props) {
     return /* @__PURE__ */ jsxs14("div", { className: "grid gap-3 sm:grid-cols-2", children: [
       /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx18(Label4, { className: "text-xs", children: type === "rollup" ? "Across the records in" : "Read it from" }),
-        /* @__PURE__ */ jsxs14(Select3, { value: props.via, onValueChange: props.setVia, children: [
-          /* @__PURE__ */ jsx18(SelectTrigger3, { size: "sm", "aria-label": type === "rollup" ? "Across the records in" : "Read it from", children: /* @__PURE__ */ jsx18(SelectValue3, { placeholder: "Choose a column" }) }),
-          /* @__PURE__ */ jsx18(SelectContent3, { children: usable.map((f) => /* @__PURE__ */ jsxs14(SelectItem3, { value: f.key, children: [
+        /* @__PURE__ */ jsxs14(Select4, { value: props.via, onValueChange: props.setVia, children: [
+          /* @__PURE__ */ jsx18(SelectTrigger4, { size: "sm", "aria-label": type === "rollup" ? "Across the records in" : "Read it from", children: /* @__PURE__ */ jsx18(SelectValue4, { placeholder: "Choose a column" }) }),
+          /* @__PURE__ */ jsx18(SelectContent4, { children: usable.map((f) => /* @__PURE__ */ jsxs14(SelectItem4, { value: f.key, children: [
             fieldName(f),
             type === "rollup" && !f.multi ? " \u2014 holds one" : ""
           ] }, f.id)) })
@@ -5296,9 +5430,9 @@ function TypeQuestions(props) {
         }
       ) : /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx18(Label4, { className: "text-xs", children: "What to work out" }),
-        /* @__PURE__ */ jsxs14(Select3, { value: props.agg, onValueChange: (v) => props.setAgg(v), children: [
-          /* @__PURE__ */ jsx18(SelectTrigger3, { size: "sm", "aria-label": "What to work out", children: /* @__PURE__ */ jsx18(SelectValue3, {}) }),
-          /* @__PURE__ */ jsx18(SelectContent3, { children: ROLLUP_OPERATIONS.map((row) => /* @__PURE__ */ jsx18(SelectItem3, { value: row.value, children: row.label }, row.value)) })
+        /* @__PURE__ */ jsxs14(Select4, { value: props.agg, onValueChange: (v) => props.setAgg(v), children: [
+          /* @__PURE__ */ jsx18(SelectTrigger4, { size: "sm", "aria-label": "What to work out", children: /* @__PURE__ */ jsx18(SelectValue4, {}) }),
+          /* @__PURE__ */ jsx18(SelectContent4, { children: ROLLUP_OPERATIONS.map((row) => /* @__PURE__ */ jsx18(SelectItem4, { value: row.value, children: row.label }, row.value)) })
         ] }),
         props.agg !== "count" ? /* @__PURE__ */ jsx18(
           ValueOnTheOtherSide,
@@ -5321,9 +5455,9 @@ function TypeQuestions(props) {
     return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx18(Label4, { className: "text-xs", children: "What to do" }),
-        /* @__PURE__ */ jsxs14(Select3, { value: props.formulaOp, onValueChange: props.setFormulaOp, children: [
-          /* @__PURE__ */ jsx18(SelectTrigger3, { size: "sm", className: "max-w-[18rem]", "aria-label": "What to do", children: /* @__PURE__ */ jsx18(SelectValue3, {}) }),
-          /* @__PURE__ */ jsx18(SelectContent3, { children: FORMULA_OPERATIONS.map((row) => /* @__PURE__ */ jsx18(SelectItem3, { value: row.value, children: row.label }, row.value)) })
+        /* @__PURE__ */ jsxs14(Select4, { value: props.formulaOp, onValueChange: props.setFormulaOp, children: [
+          /* @__PURE__ */ jsx18(SelectTrigger4, { size: "sm", className: "max-w-[18rem]", "aria-label": "What to do", children: /* @__PURE__ */ jsx18(SelectValue4, {}) }),
+          /* @__PURE__ */ jsx18(SelectContent4, { children: FORMULA_OPERATIONS.map((row) => /* @__PURE__ */ jsx18(SelectItem4, { value: row.value, children: row.label }, row.value)) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
@@ -5345,7 +5479,21 @@ function TypeQuestions(props) {
           );
         }) }),
         /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: "In the order you pick them. Columns are remembered by which column they are, so renaming one never breaks this." })
-      ] })
+      ] }),
+      props.formulaOp === "concat" ? /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx18(Label4, { className: "text-xs", children: FORMULA_SEPARATOR_LABEL }),
+        /* @__PURE__ */ jsx18(
+          BasicInput5,
+          {
+            value: props.formulaSeparator,
+            "aria-label": FORMULA_SEPARATOR_LABEL,
+            placeholder: "\u2014",
+            className: "max-w-[10rem]",
+            onChange: (e) => props.setFormulaSeparator(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: "What goes between the columns. Leave it empty to run them straight together." })
+      ] }) : null
     ] });
   }
   return null;
@@ -5368,9 +5516,9 @@ function ValueOnTheOtherSide({
   const body = !relation ? /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: "Choose the column above first." }) : stillAsking ? /* @__PURE__ */ jsx18("p", { className: "text-[11px] text-muted-foreground", children: "Reading that table's columns\u2026" }) : offered.length === 0 ? /* @__PURE__ */ jsxs14("p", { className: "text-[11px] text-muted-foreground", children: [
     fieldName(relation),
     " points at a table that has no columns to read yet. Add one there first."
-  ] }) : /* @__PURE__ */ jsxs14(Select3, { value, onValueChange: onChange, children: [
-    /* @__PURE__ */ jsx18(SelectTrigger3, { size: "sm", "aria-label": label, children: /* @__PURE__ */ jsx18(SelectValue3, { placeholder: "Choose a column" }) }),
-    /* @__PURE__ */ jsx18(SelectContent3, { children: offered.map((column) => /* @__PURE__ */ jsx18(SelectItem3, { value: column.key, children: column.name }, column.key)) })
+  ] }) : /* @__PURE__ */ jsxs14(Select4, { value, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx18(SelectTrigger4, { size: "sm", "aria-label": label, children: /* @__PURE__ */ jsx18(SelectValue4, { placeholder: "Choose a column" }) }),
+    /* @__PURE__ */ jsx18(SelectContent4, { children: offered.map((column) => /* @__PURE__ */ jsx18(SelectItem4, { value: column.key, children: column.name }, column.key)) })
   ] });
   if (compact) return /* @__PURE__ */ jsx18("div", { className: "mt-1 flex flex-col gap-1", children: body });
   return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
@@ -5977,8 +6125,8 @@ import { useState as useState18 } from "react";
 import {
   useFieldMutation as useFieldMutation2,
   useFields as useFields8,
-  useRecordMutation,
-  useTable as useTable6
+  useTable as useTable6,
+  useTableArchive
 } from "@ai-matrx/records/react";
 import { Badge as Badge6, Button as Button16, Separator as Separator6, cn as cn16 } from "@ai-matrx/design-system";
 import { Fragment as Fragment10, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -5993,8 +6141,8 @@ function TableSettings({
   const table = useTable6(tableId);
   const fields = useFields8(tableId);
   const rights = useTableRights(table.data);
-  const mutation = useRecordMutation();
   const shape = useFieldMutation2();
+  const archive = useTableArchive(tableId);
   const [editing, setEditing] = useState18(null);
   const [askingToDelete, setAskingToDelete] = useState18(false);
   const [askingToRemove, setAskingToRemove] = useState18(null);
@@ -6019,10 +6167,16 @@ function TableSettings({
       table.reload();
     }
   };
-  const deleteTable = async () => {
-    const gone = await mutation.remove({ record_id: tableId });
-    setAskingToDelete(false);
-    if (gone !== null) onDeleted?.();
+  const startArchive = async () => {
+    const finished = await archive.start();
+    if (finished?.done && finished.table_archived) {
+      setAskingToDelete(false);
+      onDeleted?.();
+    }
+  };
+  const askToArchive = async () => {
+    setAskingToDelete(true);
+    await archive.preview();
   };
   if (enriching) {
     return /* @__PURE__ */ jsxs17("div", { className, children: [
@@ -6058,7 +6212,6 @@ function TableSettings({
       /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: rows.length }),
       /* @__PURE__ */ jsx21(Button16, { size: "sm", variant: "outline", className: "ml-auto", onClick: () => setEditing("new"), children: "Add a field" })
     ] }),
-    mutation.error ? /* @__PURE__ */ jsx21(RefusalNotice, { error: mutation.error }) : null,
     shape.error ? /* @__PURE__ */ jsx21(RefusalNotice, { error: shape.error }) : null,
     askingToRemove ? /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-2 rounded border border-destructive/40 px-2 py-1.5", children: [
       /* @__PURE__ */ jsxs17("span", { className: "text-destructive", children: [
@@ -6149,21 +6302,32 @@ function TableSettings({
       /* @__PURE__ */ jsx21("span", { className: "font-medium", children: "This table" }),
       askingToDelete ? /* @__PURE__ */ jsxs17(Fragment10, { children: [
         /* @__PURE__ */ jsxs17("p", { className: "text-muted-foreground", children: [
-          "Deleting ",
+          "Archiving ",
           table.data ? tableName(table.data) : "this table",
           " takes it out of everyone's list, with its ",
           rows.length,
           " field",
           rows.length === 1 ? "" : "s",
-          " and every record in it.",
-          table.data?.retention_days ? ` The store keeps them for ${table.data.retention_days} days, so it can still be restored.` : " The store keeps them, so it can still be restored."
+          " and",
+          " ",
+          archive.progress ? `its ${archive.progress.remaining.toLocaleString()} record${archive.progress.remaining === 1 ? "" : "s"}` : "every record in it",
+          ".",
+          table.data?.retention_days ? ` The store keeps them for ${table.data.retention_days} days, so it can still be brought back.` : " The store keeps them, so it can still be brought back."
         ] }),
-        /* @__PURE__ */ jsxs17("div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ jsx21(Button16, { size: "sm", variant: "destructive", disabled: mutation.saving, onClick: () => void deleteTable(), children: mutation.saving ? "Deleting\u2026" : "Delete this table" }),
+        archive.progress && (archive.running || archive.passes > 0) ? /* @__PURE__ */ jsxs17("p", { className: archive.error ? "text-destructive" : "text-muted-foreground", children: [
+          archive.progress.total - archive.progress.remaining === archive.progress.total ? `All ${archive.progress.total.toLocaleString()} record${archive.progress.total === 1 ? "" : "s"} are put away.` : `${(archive.progress.total - archive.progress.remaining).toLocaleString()} of ${archive.progress.total.toLocaleString()} record${archive.progress.total === 1 ? "" : "s"} put away so far.`,
+          archive.slowedDown ? " The store is busy, so it is taking smaller passes \u2014 it will still finish." : ""
+        ] }) : null,
+        archive.interrupted && archive.progress ? /* @__PURE__ */ jsx21("p", { className: "text-muted-foreground", children: archive.error ? `That pass did not finish, so the rest is still here. ${archive.progress.archived_total.toLocaleString()} record${archive.progress.archived_total === 1 ? " is" : "s are"} already archived and ${archive.progress.remaining.toLocaleString()} ${archive.progress.remaining === 1 ? "is" : "are"} left. Nothing was lost \u2014 carry on and it picks up where it stopped.` : `Stopped. ${archive.progress.archived_total.toLocaleString()} record${archive.progress.archived_total === 1 ? " is" : "s are"} archived and ${archive.progress.remaining.toLocaleString()} ${archive.progress.remaining === 1 ? "is" : "are"} left. Carry on whenever you like \u2014 it picks up where it stopped.` }) : null,
+        /* @__PURE__ */ jsx21("div", { className: "flex gap-1", children: archive.running ? /* @__PURE__ */ jsxs17(Fragment10, { children: [
+          /* @__PURE__ */ jsx21(Button16, { size: "sm", variant: "destructive", disabled: true, children: "Archiving\u2026" }),
+          /* @__PURE__ */ jsx21(Button16, { size: "sm", variant: "ghost", onClick: () => archive.stop(), children: "Stop" })
+        ] }) : /* @__PURE__ */ jsxs17(Fragment10, { children: [
+          /* @__PURE__ */ jsx21(Button16, { size: "sm", variant: "destructive", onClick: () => void startArchive(), children: archive.interrupted ? "Carry on archiving" : "Archive this table" }),
           /* @__PURE__ */ jsx21(Button16, { size: "sm", variant: "ghost", onClick: () => setAskingToDelete(false), children: "Keep it" })
-        ] })
-      ] }) : /* @__PURE__ */ jsx21("div", { children: /* @__PURE__ */ jsx21(Button16, { size: "sm", variant: "outline", onClick: () => setAskingToDelete(true), children: "Delete this table" }) }),
-      mutation.error ? /* @__PURE__ */ jsx21(RefusalNotice, { error: mutation.error }) : null
+        ] }) })
+      ] }) : /* @__PURE__ */ jsx21("div", { children: /* @__PURE__ */ jsx21(Button16, { size: "sm", variant: "outline", onClick: () => void askToArchive(), children: "Archive this table" }) }),
+      archive.error ? /* @__PURE__ */ jsx21(RefusalNotice, { error: archive.error }) : null
     ] })
   ] });
 }
@@ -6305,7 +6469,7 @@ import { useEffect as useEffect11, useMemo as useMemo16, useState as useState21
 import {
   useFields as useFields9,
   useRecord,
-  useRecordMutation as useRecordMutation2
+  useRecordMutation
 } from "@ai-matrx/records/react";
 import { predictWriteRefusals } from "@ai-matrx/records/core";
 import { Button as Button17, Separator as Separator7, cn as cn18 } from "@ai-matrx/design-system";
@@ -6494,7 +6658,7 @@ function RecordForm({
   const host = useRecordsUi();
   const fields = useFields9(tableId, recordType);
   const existing = useRecord(recordId ?? null);
-  const mutation = useRecordMutation2();
+  const mutation = useRecordMutation();
   const [draft, setDraft] = useState21({});
   const [touched, setTouched] = useState21(false);
   const loaded = useRecordVersion(recordId ?? null);
@@ -7471,6 +7635,7 @@ function ViewSwitcher({
     )
   ] });
 }
+var UNUSUAL_FIELD_NOTE = "an unusual column to use here";
 function offerableFields(all, want) {
   return all.filter((field) => {
     const kind = editorKindFor(field);
@@ -7606,10 +7771,7 @@ function FieldPicker({
         children: [
           /* @__PURE__ */ jsx27("option", { value: "", children: "Choose a field" }),
           offerable.map((field) => /* @__PURE__ */ jsx27("option", { value: field.key, children: fieldName(field) }, field.key)),
-          unusual ? /* @__PURE__ */ jsxs23("option", { value: unusual.key, children: [
-            fieldName(unusual),
-            " \u2014 an unusual column to use here"
-          ] }, unusual.key) : null
+          unusual ? /* @__PURE__ */ jsx27("option", { value: unusual.key, children: `${fieldName(unusual)} \u2014 ${UNUSUAL_FIELD_NOTE}` }, unusual.key) : null
         ]
       }
     ),
@@ -13350,7 +13512,17 @@ function Drawing({
 // src/DashboardCanvas.tsx
 import { useCallback as useCallback30, useEffect as useEffect34, useMemo as useMemo28, useState as useState47 } from "react";
 import { useFields as useFields21, useRecordsClient as useRecordsClient33, useTable as useTable18 } from "@ai-matrx/records/react";
-import { BasicInput as BasicInput16, Button as Button42, Skeleton as Skeleton26, cn as cn44 } from "@ai-matrx/design-system";
+import {
+  BasicInput as BasicInput16,
+  Button as Button42,
+  Select as Select5,
+  SelectContent as SelectContent5,
+  SelectItem as SelectItem5,
+  SelectTrigger as SelectTrigger5,
+  SelectValue as SelectValue5,
+  Skeleton as Skeleton26,
+  cn as cn44
+} from "@ai-matrx/design-system";
 import { Fragment as Fragment21, jsx as jsx50, jsxs as jsxs46 } from "react/jsx-runtime";
 function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
   const client = useRecordsClient33();
@@ -13424,8 +13596,8 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
     [client, tableId, load, filter]
   );
   async function create() {
-    const groupable = (fields.data ?? []).filter((f) => f.type === "text" || f.type === "list");
-    const byField = groupable[0];
+    const all = fields.data ?? [];
+    const byField = offerableFields(all, "choice")[0] ?? all.find((f) => f.type === "text" || f.type === "list");
     const by = byField?.key;
     await declare2(
       {
@@ -13596,6 +13768,32 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
               children: CHART_KINDS.map((kind) => /* @__PURE__ */ jsx50("option", { value: kind, children: CHART_KIND_LABEL[kind] }, kind))
             }
           ),
+          (board.blocks[index].groupBy ?? []).length > 0 ? /* @__PURE__ */ jsx50(
+            GroupingPicker,
+            {
+              block: board.blocks[index],
+              fields: fields.data ?? [],
+              onPick: (key) => void declare2(
+                board,
+                board.blocks.map((b, i) => {
+                  if (i !== index) return b;
+                  const picked = (fields.data ?? []).find((f) => f.key === key);
+                  const wasNamedAfterItsColumn = (fields.data ?? []).some(
+                    (f) => b.title === `By ${fieldName(f)}`
+                  );
+                  return {
+                    ...b,
+                    groupBy: [key],
+                    // A block titled after the column it grouped by
+                    // must not keep saying "By Job Number" once it
+                    // groups by Status. A title somebody wrote
+                    // themselves is left alone.
+                    ...wasNamedAfterItsColumn && picked ? { title: `By ${fieldName(picked)}` } : {}
+                  };
+                })
+              )
+            }
+          ) : null,
           /* @__PURE__ */ jsx50(
             Button42,
             {
@@ -13614,6 +13812,45 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
     ] })
   ] });
 }
+function groupingChoices(all) {
+  const once = [];
+  for (const field of all) if (!once.some((f) => f.key === field.key)) once.push(field);
+  const sensible = offerableFields(once, "choice");
+  const isSensible = (field) => sensible.some((s) => s.key === field.key);
+  return [
+    ...sensible.map((field) => ({ field, unusual: false })),
+    ...once.filter((field) => !isSensible(field)).map((field) => ({ field, unusual: true }))
+  ];
+}
+function GroupingPicker({
+  block,
+  fields,
+  onPick
+}) {
+  const choices = groupingChoices(fields);
+  const current = block.groupBy?.[0] ?? "";
+  if (choices.length === 0) {
+    return /* @__PURE__ */ jsx50("span", { className: "text-muted-foreground", children: "This table has no columns yet, so there is nothing to group this block by." });
+  }
+  const known = choices.some((c) => c.field.key === current);
+  return /* @__PURE__ */ jsxs46(Fragment21, { children: [
+    /* @__PURE__ */ jsx50("label", { className: "text-muted-foreground", htmlFor: `block-group-${block.title}`, children: "Group by" }),
+    /* @__PURE__ */ jsxs46(Select5, { value: known ? current : "", onValueChange: onPick, children: [
+      /* @__PURE__ */ jsx50(
+        SelectTrigger5,
+        {
+          size: "sm",
+          id: `block-group-${block.title}`,
+          "aria-label": `Which column ${block.title} is grouped by`,
+          className: "h-7 min-w-[10rem] text-xs",
+          children: /* @__PURE__ */ jsx50(SelectValue5, { placeholder: "Choose a column" })
+        }
+      ),
+      /* @__PURE__ */ jsx50(SelectContent5, { children: choices.map(({ field, unusual }) => /* @__PURE__ */ jsx50(SelectItem5, { value: field.key, children: unusual ? `${fieldName(field)} \u2014 ${UNUSUAL_FIELD_NOTE}` : fieldName(field) }, field.key)) })
+    ] }),
+    known ? null : /* @__PURE__ */ jsx50("span", { className: "text-muted-foreground", children: "The column this block was grouped by is no longer on this table \u2014 choose another." })
+  ] });
+}
 
 // src/FormsPanel.tsx
 import { useCallback as useCallback31, useEffect as useEffect35, useState as useState48 } from "react";