@ai-matrx/records-ui 0.77.0 → 0.79.0

package/dist/index.cjs

@@ -4476,6 +4476,16 @@ var import_design_system13 = require("@ai-matrx/design-system");
 var import_jsx_runtime16 = require("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;
@@ -4510,6 +4520,7 @@ function ImportWizard({ tableId, onDone, className }) {
   const [alreadyRan, setAlreadyRan] = (0, import_react26.useState)(null);
   const [columnsAdded, setColumnsAdded] = (0, import_react26.useState)(null);
   const [show, setShow] = (0, import_react26.useState)("all");
+  const [ledger, setLedger] = (0, import_react26.useState)(null);
   const declared = fields.data ?? [];
   const take = (0, import_react26.useCallback)(
     async (file) => {
@@ -4520,6 +4531,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();
@@ -4546,6 +4558,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) {
@@ -4553,7 +4570,7 @@ function ImportWizard({ tableId, onDone, className }) {
         setPhase("waiting");
       }
     },
-    [client, declared, tableId]
+    [client, declared, tableId, table.data?.title_field]
   );
   const run = (0, import_react26.useCallback)(async () => {
     if (!plan) return;
@@ -4561,6 +4578,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 });
@@ -4596,6 +4614,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) {
@@ -4604,11 +4623,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;
@@ -4621,6 +4646,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]);
@@ -4640,6 +4672,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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: (0, import_design_system13.cn)("flex min-w-0 flex-col gap-2 text-xs", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -4672,55 +4708,107 @@ function ImportWizard({ tableId, onDone, className }) {
     phase === "reading" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground", children: "Reading the file\u2026" }) : null,
     phase === "planning" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground", children: "Working out what each column is\u2026" }) : null,
     plan && parsed ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full overflow-x-auto rounded border", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "w-full min-w-[50rem] table-fixed", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("colgroup", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("col", { className: "w-[10rem]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("col", { className: "w-[17rem]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("col", { className: "w-[14rem]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("col", { className: "w-[9rem]" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Column in the file" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Goes to" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Kind" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "First values" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { children: plan.columns.map((column) => {
+      titleKey ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-2 rounded border bg-muted/40 px-2 py-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-medium", children: "What each record is called" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          import_design_system13.Select,
+          {
+            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__ */ (0, import_jsx_runtime16.jsx)(
+                import_design_system13.SelectTrigger,
+                {
+                  size: "sm",
+                  "aria-label": "Which column each record is named by",
+                  className: "min-w-[14rem]",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectValue, { placeholder: "\u2014 choose the column \u2014" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectContent, { children: plan.columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectItem, { value: c.header, children: c.header }, c.header)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full overflow-x-auto rounded border", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-[52rem]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          "div",
+          {
+            className: "grid items-center gap-x-3 border-b bg-muted px-2 py-1 font-medium",
+            style: { gridTemplateColumns: MAPPING_COLUMNS },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Column in the file" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Goes to" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Kind" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "First values" })
+            ]
+          }
+        ),
+        plan.columns.map((column) => {
           const to = mapping[column.header] ?? "";
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: "border-t align-top", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { className: "truncate px-2 py-1 font-medium", title: column.header, children: column.header }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("td", { className: "px-2 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-              "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__ */ (0, import_jsx_runtime16.jsx)("option", { value: "", children: unmapped === "ignore" ? "\u2014 leave it out \u2014" : "\u2014 offer it as a new column \u2014" }),
-                  plan.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: f.key, children: f.label || f.key }, f.field_id))
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("td", { className: "px-2 py-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Badge, { variant: column.matched ? "secondary" : "outline", className: "text-[11px] font-normal", children: typeWord(column.type) }),
-              column.unit ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-1 opacity-60", children: column.unit }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-0.5 text-muted-foreground", children: column.why }),
-              column.ambiguous ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive", children: "Check a date you know before you run this." }) : null,
-              column.collides_with ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive", children: "Two columns in this file would make the same column." }) : null
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)(
+            "div",
+            {
+              className: "grid items-start gap-x-3 border-t px-2 py-1",
+              style: { gridTemplateColumns: MAPPING_COLUMNS },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate pt-1.5 font-medium", title: column.header, children: column.header }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                  import_design_system13.Select,
+                  {
+                    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__ */ (0, import_jsx_runtime16.jsx)(
+                        import_design_system13.SelectTrigger,
+                        {
+                          size: "sm",
+                          "aria-label": `Where ${column.header} goes`,
+                          "data-goes-to": column.header,
+                          className: "w-full min-w-[14rem]",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectValue, {})
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system13.SelectContent, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectItem, { value: ABSENT, children: absent }),
+                        plan.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.SelectItem, { value: f.key, children: f.label || f.key }, f.field_id))
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pt-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Badge, { variant: column.matched ? "secondary" : "outline", className: "text-[11px] font-normal", children: typeWord(column.type) }),
+                  column.unit ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ml-1 opacity-60", children: column.unit }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-0.5 text-muted-foreground", children: column.why }),
+                  column.ambiguous ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive", children: "Check a date you know before you run this." }) : null,
+                  column.collides_with ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive", children: "Two columns in this file would make the same column." }) : null
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate pt-1.5 text-muted-foreground", children: (column.samples ?? []).slice(0, 3).map(String).join(" \xB7 ") })
+              ]
+            },
+            column.header
+          );
+        })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -4778,13 +4866,18 @@ function ImportWizard({ tableId, onDone, className }) {
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Button, { 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__ */ (0, import_jsx_runtime16.jsxs)("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__ */ (0, import_jsx_runtime16.jsx)(
+          import_design_system13.Button,
+          {
+            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__ */ (0, import_jsx_runtime16.jsxs)("span", { className: (0, import_design_system13.cn)("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,
@@ -4802,27 +4895,31 @@ function ImportWizard({ tableId, onDone, className }) {
       ] }) : null
     ] }) : null,
     alreadyRan ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground", children: alreadyRan }) : null,
-    outcomes.length > 0 || summary ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    outcomes.length > 0 || summary || ledger ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
-          counts.landed,
-          " landed \xB7 ",
-          counts.duplicate,
-          " already here \xB7 ",
-          counts.refused,
-          " refused"
-        ] }),
-        counts.refused + counts.duplicate > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: (0, import_design_system13.cn)("underline underline-offset-2", show === "all" && "font-medium"), onClick: () => setShow("all"), children: "everything that did not land" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: (0, import_design_system13.cn)("underline underline-offset-2", show === "refused" && "font-medium"), onClick: () => setShow("refused"), children: "refused" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: (0, import_design_system13.cn)("underline underline-offset-2", show === "duplicate" && "font-medium"), onClick: () => setShow("duplicate"), children: "already here" })
         ] }) : null
       ] }),
       summary ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-muted-foreground", children: summary }) : null,
+      ledger && show === "all" && ledger.refused + ledger.duplicate > interesting.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("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__ */ (0, import_jsx_runtime16.jsx)("div", { className: "max-h-64 overflow-auto rounded border", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "w-full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "sticky top-0 bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Row" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "Line in your file" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "What happened" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { className: "px-2 py-1 text-left font-medium", children: "The row in your file" })
         ] }) }),
@@ -5035,6 +5132,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],
@@ -5071,8 +5171,9 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
   const [of, setOf] = (0, import_react30.useState)(String(field?.config?.["of"] ?? ""));
   const [relationTarget, setRelationTarget] = (0, import_react30.useState)(String(field?.relation_target ?? ""));
   const [display, setDisplay] = (0, import_react30.useState)(field?.display ?? null);
-  const [formulaOp, setFormulaOp] = (0, import_react30.useState)("concat");
-  const [formulaFields, setFormulaFields] = (0, import_react30.useState)([]);
+  const [formulaOp, setFormulaOp] = (0, import_react30.useState)(() => formulaOpOf(field));
+  const [formulaFields, setFormulaFields] = (0, import_react30.useState)(() => formulaFieldIdsOf(field));
+  const [formulaSeparator, setFormulaSeparator] = (0, import_react30.useState)(() => formulaSeparatorOf(field));
   const [askingToRemove, setAskingToRemove] = (0, import_react30.useState)(false);
   const [notLanded, setNotLanded] = (0, import_react30.useState)(false);
   const others = (0, import_react30.useMemo)(
@@ -5146,7 +5247,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;
@@ -5204,6 +5305,7 @@ function FieldEditor({ tableId, field, onSaved, onCancel, onRemoved, className }
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[11px] text-muted-foreground", children: EDITING_A_WORKED_OUT_COLUMN }) : null,
     !editing || type === "select" || type === "multi_select" || type === "relation" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       TypeQuestions,
       {
@@ -5232,6 +5334,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"])
@@ -5416,10 +5520,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;
@@ -5558,7 +5682,21 @@ function TypeQuestions(props) {
           );
         }) }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system15.Label, { className: "text-xs", children: FORMULA_SEPARATOR_LABEL }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_design_system15.BasicInput,
+          {
+            value: props.formulaSeparator,
+            "aria-label": FORMULA_SEPARATOR_LABEL,
+            placeholder: "\u2014",
+            className: "max-w-[10rem]",
+            onChange: (e) => props.setFormulaSeparator(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "What goes between the columns. Leave it empty to run them straight together." })
+      ] }) : null
     ] });
   }
   return null;
@@ -6201,8 +6339,8 @@ function TableSettings({
   const table = (0, import_react36.useTable)(tableId);
   const fields = (0, import_react36.useFields)(tableId);
   const rights = useTableRights(table.data);
-  const mutation = (0, import_react36.useRecordMutation)();
   const shape = (0, import_react36.useFieldMutation)();
+  const archive = (0, import_react36.useTableArchive)(tableId);
   const [editing, setEditing] = (0, import_react35.useState)(null);
   const [askingToDelete, setAskingToDelete] = (0, import_react35.useState)(false);
   const [askingToRemove, setAskingToRemove] = (0, import_react35.useState)(null);
@@ -6227,10 +6365,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__ */ (0, import_jsx_runtime21.jsxs)("div", { className, children: [
@@ -6266,7 +6410,6 @@ function TableSettings({
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: rows.length }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "outline", className: "ml-auto", onClick: () => setEditing("new"), children: "Add a field" })
     ] }),
-    mutation.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefusalNotice, { error: mutation.error }) : null,
     shape.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefusalNotice, { error: shape.error }) : null,
     askingToRemove ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap items-center gap-2 rounded border border-destructive/40 px-2 py-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-destructive", children: [
@@ -6357,21 +6500,32 @@ function TableSettings({
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "font-medium", children: "This table" }),
       askingToDelete ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { 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__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex gap-1", children: archive.running ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "destructive", disabled: true, children: "Archiving\u2026" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "ghost", onClick: () => archive.stop(), children: "Stop" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "destructive", onClick: () => void startArchive(), children: archive.interrupted ? "Carry on archiving" : "Archive this table" }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "ghost", onClick: () => setAskingToDelete(false), children: "Keep it" })
-        ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "outline", onClick: () => setAskingToDelete(true), children: "Delete this table" }) }),
-      mutation.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefusalNotice, { error: mutation.error }) : null
+        ] }) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system18.Button, { size: "sm", variant: "outline", onClick: () => void askToArchive(), children: "Archive this table" }) }),
+      archive.error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RefusalNotice, { error: archive.error }) : null
     ] })
   ] });
 }
@@ -7671,6 +7825,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);
@@ -7806,10 +7961,7 @@ function FieldPicker({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "", children: "Choose a field" }),
           offerable.map((field) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: field.key, children: fieldName(field) }, field.key)),
-          unusual ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("option", { value: unusual.key, children: [
-            fieldName(unusual),
-            " \u2014 an unusual column to use here"
-          ] }, unusual.key) : null
+          unusual ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: unusual.key, children: `${fieldName(unusual)} \u2014 ${UNUSUAL_FIELD_NOTE}` }, unusual.key) : null
         ]
       }
     ),
@@ -13568,8 +13720,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(
       {
@@ -13740,6 +13892,32 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
               children: CHART_KINDS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("option", { value: kind, children: CHART_KIND_LABEL[kind] }, kind))
             }
           ),
+          (board.blocks[index].groupBy ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            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__ */ (0, import_jsx_runtime50.jsx)(
             import_design_system47.Button,
             {
@@ -13758,6 +13936,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__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { className: "text-muted-foreground", htmlFor: `block-group-${block.title}`, children: "Group by" }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system47.Select, { value: known ? current : "", onValueChange: onPick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_design_system47.SelectTrigger,
+        {
+          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__ */ (0, import_jsx_runtime50.jsx)(import_design_system47.SelectValue, { placeholder: "Choose a column" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system47.SelectContent, { children: choices.map(({ field, unusual }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system47.SelectItem, { value: field.key, children: unusual ? `${fieldName(field)} \u2014 ${UNUSUAL_FIELD_NOTE}` : fieldName(field) }, field.key)) })
+    ] }),
+    known ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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
 var import_react98 = require("react");