@ai-matrx/records-ui 0.68.0 → 0.70.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.70.0
+
+**The bar that said four now opens four.** (lane DRILL.)
+
+* **`TablePage` takes a `filter`** — the store's one `RecordFilter` — and hands it to the grid
+  AND the board, so switching layout after a drill-through does not quietly widen back to the
+  whole table. It is a question for this visit, like `activeView` and `activeGroupField`, and
+  is never written onto the saved view. `Grid` and `ViewSwitcher` (and `useViewRecords`) take
+  it too; the narrowing happens in the STORE, never in the browser, because this screen holds
+  one page and a browser-side filter would drop every match on page two.
+* **`cameFromLine` says the narrow thing, and means it.** TAILS-6 shipped *"This is every
+  record grouped into the same columns the chart used — not only the ones that number
+  counted"*, which was TRUE and useless: no door took a filter. It now reads *"These are only
+  the records that number counted: Status is Cancelled. Everything else in this table is being
+  held back"*, and it still refuses to claim narrowing when no question came with the click.
+* **`filterInWords`** turns the question into the words of the person whose business it is —
+  the Field's own name through the same `fieldName` the column headers use, never a column
+  key. `null` becomes "Status is not filled in"; a window becomes "from … up to …", because
+  the store's windows are half-open and "to 2026-02-01" would read as including February 1st.
+* **`DigestScheduler.filters` is a `RecordFilter`**, and `DashboardCanvas`'s
+  `as Record<string, unknown>` is gone — that cast was the seam where the dashboard's filter,
+  the saved view it schedules over and the drill-through it opens could have drifted apart.
+* **Guard `a-number-opens-only-its-own-rows.test.tsx`** asserts the DOOR the page opened and
+  the argument it carried, and refuses by name the moment anything opens the unfiltered
+  `read_records` while holding a filter. Shown RED on the pre-fix bytes (four clauses,
+  including the old sentence) and green on these.
+
+## 0.69.0
+
+**She can make the one that is missing, from where she is looking for it.** (lane TAILS-7.)
+
+* **The relation picker offers to create.** Rincon Plumbing's office opens a job for a customer
+  who has never been written down, and the picker's last word was *"Nothing in that table
+  matches."* — a dead end with nowhere to go: leave the job, find the Customers table, add a
+  row, come back, re-open the picker, search again. It now ends the list the way Airtable and
+  Notion do: type a name that matches nothing and the control reads **Create "Delfina
+  Arreola"**, one press; type nothing and it reads **New customer** and asks for a name. The
+  new record is written through `record_write` into the TARGET TABLE'S OWN `title_field` —
+  never a guessed key — and it comes back named by the store (`relation_words_many`), so a
+  column configured to show two of the target's columns shows both on the new chip too.
+* **It is ONE control, so every relation surface inherited it at once**: the grid cell
+  (`gridEditing` → `FieldControl`), the generated record form, the record rail's edit mode and
+  the public form runner all draw `RelationPicker`. Nothing was forked per surface.
+* **Except the one place creating would be wrong.** `Condition` — the filter builder — passes
+  `allowCreate={false}`: choosing a value to LOOK by is not a reason to put a customer in the
+  book. The guard asserts that absence, so a later "make it consistent" cannot spread it there
+  silently.
+* **Absent or honest, never dead.** A target Table with no `title_field` cannot name a new
+  record, so the create says exactly that and names who fixes it, instead of writing a nameless
+  row. A refused write shows the store's own refusal in a person's words.
+* Guard: `src/a-relation-can-make-the-one-that-is-missing.test.tsx`, in the blocking gate.
+  Shown RED against the pre-change picker — 4 of 5 clauses failing, the fifth being the filter
+  builder's absence, which must pass in both states — then GREEN. Package gate 251/251.
+
 ## 0.68.0
 
 **Two things a screen was still doing behind a person's back.** (lane TAILS-6, found while

package/dist/index.cjs

@@ -919,22 +919,28 @@ var import_react5 = require("react");
 var import_react6 = require("@ai-matrx/records/react");
 var import_design_system2 = require("@ai-matrx/design-system");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function RelationPicker({ field, value, onChange, disabled, id, className }) {
+function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate = true }) {
   const client = (0, import_react6.useRecordsClient)();
   const [rows, setRows] = (0, import_react5.useState)(null);
   const [words, setWords] = (0, import_react5.useState)({});
   const [refusal, setRefusal] = (0, import_react5.useState)(null);
   const [search, setSearch] = (0, import_react5.useState)("");
   const [open, setOpen] = (0, import_react5.useState)(false);
+  const [target, setTarget] = (0, import_react5.useState)(null);
+  const [targetRefusal, setTargetRefusal] = (0, import_react5.useState)(null);
+  const [creating, setCreating] = (0, import_react5.useState)(false);
+  const [newTitle, setNewTitle] = (0, import_react5.useState)("");
+  const [busy, setBusy] = (0, import_react5.useState)(false);
+  const [createRefusal, setCreateRefusal] = (0, import_react5.useState)(null);
   const picked = (0, import_react5.useMemo)(
     () => Array.isArray(value) ? value.map(String) : value === null || value === void 0 ? [] : [String(value)],
     [value]
   );
   (0, import_react5.useEffect)(() => {
-    const target = field.relation_target;
-    if (!target) return;
+    const target2 = field.relation_target;
+    if (!target2) return;
     let cancelled = false;
-    void client.list({ table_id: target, limit: 200 }).then((result) => {
+    void client.list({ table_id: target2, limit: 200 }).then((result) => {
       if (cancelled) return;
       if (result.ok) setRows(result.data.rows);
       else setRefusal(refusalLineForAPerson(result.error));
@@ -963,6 +969,28 @@ function RelationPicker({ field, value, onChange, disabled, id, className }) {
       cancelled = true;
     };
   }, [client, field.id, rows, picked, words]);
+  (0, import_react5.useEffect)(() => {
+    if (!open || !allowCreate || target || targetRefusal) return;
+    const id2 = field.relation_target;
+    if (!id2) return;
+    let cancelled = false;
+    void client.tableList().then((result) => {
+      if (cancelled) return;
+      if (!result.ok) {
+        setTargetRefusal(refusalLineForAPerson(result.error));
+        return;
+      }
+      const found = result.data.find((t) => t.id === id2) ?? null;
+      if (found) setTarget(found);
+      else
+        setTargetRefusal(
+          "That Table is not one you can open, so a new record cannot be added to it from here."
+        );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, open, allowCreate, target, targetRefusal, field.relation_target]);
   if (!field.relation_target) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
       fieldName(field),
@@ -982,6 +1010,39 @@ function RelationPicker({ field, value, onChange, disabled, id, className }) {
     else if (!full) next.add(recordId);
     onChange(next.size === 0 ? null : [...next]);
   };
+  const targetWord = (target?.label_singular ?? "").trim() || (target?.name ?? "").trim() || "record";
+  const create = async (rawTitle) => {
+    const title = rawTitle.trim();
+    const tableId = field.relation_target;
+    if (!tableId || title === "" || busy) return;
+    if (!target) {
+      setCreateRefusal("Still reading that Table. Try again in a moment.");
+      return;
+    }
+    const titleField = target.title_field;
+    if (!titleField) {
+      setCreateRefusal(
+        `${target.name} has no column that names a record yet, so a new one would have nothing to show here. A table admin picks its title column in that table's settings.`
+      );
+      return;
+    }
+    setBusy(true);
+    setCreateRefusal(null);
+    const written = await client.recordWrite({ table_id: tableId, data: { [titleField]: title } });
+    if (!written.ok) {
+      setBusy(false);
+      setCreateRefusal(refusalLineForAPerson(written.error));
+      return;
+    }
+    const createdId = String(written.data);
+    const refreshed = await client.list({ table_id: tableId, limit: 200 });
+    if (refreshed.ok) setRows(refreshed.data.rows);
+    setBusy(false);
+    setCreating(false);
+    setNewTitle("");
+    setSearch("");
+    toggle(createdId);
+  };
   const visible = (rows ?? []).filter(
     (row) => search.trim() === "" ? true : titleOf(row.id).toLowerCase().includes(search.trim().toLowerCase())
   );
@@ -1028,7 +1089,57 @@ function RelationPicker({ field, value, onChange, disabled, id, className }) {
             }
           ) }, row.id)) }),
           rows && visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Nothing in that table matches." }) : null
-        ] })
+        ] }),
+        allowCreate && !full ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-1 border-t pt-1", children: [
+          targetRefusal ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "p-2 text-xs text-destructive", children: targetRefusal }) : !target ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading that table\u2026" }) : creating ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1 p-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_design_system2.BasicInput,
+              {
+                autoFocus: true,
+                value: newTitle,
+                onChange: (e) => setNewTitle(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    void create(newTitle);
+                  }
+                },
+                placeholder: `New ${targetWord}`,
+                className: "h-7 flex-1 text-xs",
+                "aria-label": `Name the new ${targetWord}`
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_design_system2.Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "default",
+                disabled: busy || newTitle.trim() === "",
+                onClick: () => void create(newTitle),
+                children: busy ? "Creating\u2026" : "Create"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_design_system2.Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              className: "w-full justify-start text-xs",
+              disabled: busy,
+              onClick: () => {
+                if (search.trim() !== "") void create(search);
+                else {
+                  setNewTitle("");
+                  setCreating(true);
+                }
+              },
+              children: search.trim() !== "" ? `Create \u201C${search.trim()}\u201D` : `New ${targetWord}`
+            }
+          ),
+          createRefusal ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "p-2 text-xs text-destructive", children: createRefusal }) : null
+        ] }) : null
       ] })
     ] })
   ] });
@@ -3446,6 +3557,7 @@ var NO_COLUMNS_WHY = "A column is what a record holds \u2014 a name, a date, an
 function Grid({
   tableId,
   pageSize = 50,
+  filter,
   onOpenRecord,
   onAddField,
   onNewRecordForm,
@@ -3461,7 +3573,7 @@ function Grid({
   const table = (0, import_react21.useTable)(tableId);
   const fields = (0, import_react21.useFields)(tableId);
   const [page, setPage] = (0, import_react20.useState)(0);
-  const records = (0, import_react21.useRecords)(tableId, { pageSize, page });
+  const records = (0, import_react21.useRecords)(tableId, { pageSize, page, ...filter ? { filter } : {} });
   const rights = useTableRights(table.data);
   const rows = (0, import_react20.useMemo)(() => records.data?.rows ?? [], [records.data]);
   const rowIds = (0, import_react20.useMemo)(() => rows.map((row) => row.id), [rows]);
@@ -5413,7 +5525,8 @@ function ConditionRow({ lead, expr, fields, onChange, emptyLabel = "always", cla
             value: value === "" ? null : value,
             onChange: (next) => write({ value: next === null || next === void 0 ? "" : String(next) }),
             id: "condition-value-record",
-            className: "min-w-[8rem]"
+            className: "min-w-[8rem]",
+            allowCreate: false
           }
         )
       ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -7209,9 +7322,12 @@ function unplacedName(record, field, labels) {
 // src/ViewSwitcher.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var NO_FIELDS = [];
-function useViewRecords(view, pageSize = 200) {
+function useViewRecords(view, pageSize = 200, filter) {
   const client = (0, import_react49.useRecordsClient)();
-  const table = (0, import_react49.useRecords)(view.ruleId ? null : view.subject, { pageSize });
+  const table = (0, import_react49.useRecords)(view.ruleId ? null : view.subject, {
+    pageSize,
+    ...filter ? { filter } : {}
+  });
   const [ruled, setRuled] = (0, import_react48.useState)({
     rows: [],
     loading: Boolean(view.ruleId),
@@ -7266,6 +7382,7 @@ function ViewSwitcher({
   onNewRecordForm,
   onAskWhoChanged,
   pageSize = 200,
+  filter,
   className
 }) {
   const [layout, setLayout] = (0, import_react48.useState)(view.layout);
@@ -7303,6 +7420,7 @@ function ViewSwitcher({
       {
         tableId: view.subject,
         pageSize,
+        ...filter ? { filter } : {},
         ...local.presentation ?? view.presentation ? { presentation: local.presentation ?? view.presentation } : {},
         ...onViewChange ? { onPresentationChange: (next) => change({ presentation: next }) } : {},
         ...onOpenRecord ? { onOpenRecord } : {},
@@ -7314,6 +7432,7 @@ function ViewSwitcher({
       {
         view: { ...view, ...local, layout },
         pageSize,
+        ...filter ? { filter } : {},
         onChange: change,
         remembered: Boolean(onViewChange),
         ...onOpenRecord ? { onOpenRecord } : {},
@@ -7361,13 +7480,14 @@ function boardColumnChoice(fields, chosenKey, stage) {
 function Board({
   view,
   pageSize,
+  filter,
   onChange,
   remembered,
   onOpenRecord,
   onMoved
 }) {
   const fields = (0, import_react49.useFields)(view.subject);
-  const records = useViewRecords(view, pageSize);
+  const records = useViewRecords(view, pageSize, filter);
   const stage = useStageField(view.subject);
   if (fields.error) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RefusalNotice, { error: fields.error });
   if (records.error) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RefusalNotice, { error: records.error });
@@ -12888,14 +13008,20 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
         rights.admin ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_design_system44.Button, { size: "sm", variant: "ghost", onClick: () => void remove(board), children: "Delete" }) : null
       ] }) : null
     ] }),
-    board && scheduling ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      DigestScheduler,
-      {
-        tableId,
-        subjectName: board.name,
-        ...filter ? { filters: filter } : {},
-        onClose: () => setScheduling(false)
-      }
+    board && scheduling ? (
+      // ONE SHAPE, SO NO CAST. The dashboard's own filter, the saved view it
+      // schedules over and the drill-through it opens are all the same
+      // `RecordFilter`; the `as Record<string, unknown>` that used to be here
+      // was the seam where they could have drifted.
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        DigestScheduler,
+        {
+          tableId,
+          subjectName: board.name,
+          ...filter ? { filters: filter } : {},
+          onClose: () => setScheduling(false)
+        }
+      )
     ) : null,
     board ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-1", children: [
@@ -14895,9 +15021,35 @@ var import_react111 = require("react");
 var import_react112 = require("@ai-matrx/records/react");
 var import_design_system54 = require("@ai-matrx/design-system");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-function cameFromLine(label, groupField) {
-  const grouped = groupField ? `grouped into the same columns the chart used` : `for this table`;
-  return `You came here from \u201C${label}\u201D. This is every record ${grouped} \u2014 not only the ones that number counted \u2014 so the column you clicked is here with the rest beside it.`;
+function filterInWords(filter, fields) {
+  const nameOf = (key) => {
+    const field = fields.find((f) => f.key === key);
+    return field ? fieldName(field) : humanize(key);
+  };
+  const parts = Object.keys(filter).map((key) => {
+    const value = filter[key];
+    if (value === null || value === void 0) return `${nameOf(key)} is not filled in`;
+    if (typeof value === "object") {
+      const from = (value.from ?? "").toString().trim();
+      const to = (value.to ?? "").toString().trim();
+      if (from !== "" && to !== "") return `${nameOf(key)} from ${from} up to ${to}`;
+      if (from !== "") return `${nameOf(key)} from ${from} onwards`;
+      if (to !== "") return `${nameOf(key)} up to ${to}`;
+      return `${nameOf(key)} in a period nobody named`;
+    }
+    return `${nameOf(key)} is ${String(value)}`;
+  });
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0];
+  return `${parts.slice(0, -1).join(", ")} and ${parts[parts.length - 1]}`;
+}
+function cameFromLine(label, groupField, question) {
+  const asked = (question ?? "").trim();
+  if (asked === "") {
+    const grouped = groupField ? " grouped into the same columns the chart used" : "";
+    return `You came here from \u201C${label}\u201D. This is every record in this table${grouped} \u2014 that number was counted over all of them.`;
+  }
+  return `You came here from \u201C${label}\u201D. These are only the records that number counted: ${asked}. Everything else in this table is being held back \u2014 clear the filter to see all of it.`;
 }
 var TABLE_NOT_REACHABLE = "This table is not in the organization you are working in, so there is nothing here to show. Switch to the organization that owns it and open it again \u2014 or it may have been deleted.";
 var DEFAULT_VIEW_NAME = "All records";
@@ -14944,11 +15096,14 @@ function TablePage({
   onViewChanged,
   activeGroupField,
   cameFrom,
+  filter,
   className
 }) {
   const client = (0, import_react112.useRecordsClient)();
   const table = (0, import_react112.useTable)(tableId);
   const rights = useTableRights(table.data);
+  const pageFields = (0, import_react112.useFields)(filter ? tableId : null);
+  const askedInWords = filter ? filterInWords(filter, pageFields.data ?? []) : null;
   const organizationId = (0, import_react112.useRecordsClient)().config.organizationId;
   const [view, setView] = (0, import_react111.useState)(null);
   const opening = openingRail(activeRecordId);
@@ -15142,7 +15297,7 @@ function TablePage({
           {
             "data-testid": "came-from-a-number",
             className: "rounded-md border px-3 py-2 text-xs leading-relaxed text-muted-foreground",
-            children: cameFromLine(cameFrom, activeGroupField ?? null)
+            children: cameFromLine(cameFrom, activeGroupField ?? null, askedInWords)
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -15156,6 +15311,7 @@ function TablePage({
               ...activeGroupField ? { groupField: activeGroupField } : {}
             },
             pageSize,
+            ...filter ? { filter } : {},
             onLayoutChange: (layout) => {
               setLayoutFromLink(layout);
               onViewChanged?.(layout);