@ai-matrx/records-ui 0.67.0 → 0.69.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog — @ai-matrx/records-ui
 
+## 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
+proving 0.66.0 on the live seat.)
+
+* **The engineer's line was being READ ALOUD.** `sr-only` does not hide a line — it hides it
+  from people with EYES and reads it to everybody else. So the one person who could not skim
+  past *"@ai-matrx/records never reached the store from checklistTemplates: TypeError: Failed
+  to fetch"* was the blind owner of the business, who had it announced in full underneath
+  "We could not reach your data". `RefusalNotice` now marks that line `aria-hidden`; it stays
+  in the DOM with the SQLSTATE on it, and on the notice's `title`, for whoever debugs it.
+  The guard asserts on what a screen reader would SAY, not on what the DOM contains.
+* **The Group by picker contradicted the board beside it.** `offerableFields` answers what is
+  a SENSIBLE column to group by — Choice columns — and the select listed only those. A view,
+  or a `?group=` link from a dashboard number, can name a column outside that set: the board
+  grouped by it happily and the select fell back to its blank "Choose a field". Watched on
+  Rincon Plumbing Co's Jobs board with six columns headed RPC-1000, RPC-1001 … over a picker
+  saying nothing was chosen. The chosen column is now always in the list, named, and marked
+  "an unusual column to use here".
+
+**Consumer action:** none.
+
 ## 0.67.0
 
 **The office can copy a waiting client's own link, from the panel where it invited them.**

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
       ] })
     ] })
   ] });
@@ -1492,7 +1603,16 @@ function RefusalNotice({
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_design_system5.AlertDescription, { className: "space-y-1 text-xs", children: [
           plain.sentence.replace(/\.$/, "") === plain.title ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: plain.sentence }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "opacity-80", children: plain.remedy }),
-          plain.forEngineers ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "sr-only", ...error.sqlstate ? { "data-sqlstate": error.sqlstate } : {}, children: plain.forEngineers }) : null,
+          plain.forEngineers ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "p",
+            {
+              className: "sr-only",
+              "aria-hidden": "true",
+              "data-for-engineers": "",
+              ...error.sqlstate ? { "data-sqlstate": error.sqlstate } : {},
+              children: plain.forEngineers
+            }
+          ) : null,
           actions
         ] })
       ]
@@ -5404,7 +5524,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)(
@@ -7429,7 +7550,9 @@ function FieldPicker({
 }) {
   const want = LAYOUT_FIELD_KIND[layout];
   const offerable = want ? offerableFields(all, want) : [];
-  if (offerable.length === 0) {
+  const chosenField = chosen ? all.find((field) => field.key === chosen) : void 0;
+  const unusual = chosenField && !offerable.some((field) => field.key === chosenField.key) ? chosenField : void 0;
+  if (offerable.length === 0 && !unusual) {
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-muted-foreground", children: LAYOUT_NO_FIELD[layout] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1.5 text-xs", children: [
@@ -7444,7 +7567,11 @@ function FieldPicker({
         onChange: (event) => onPick(event.target.value === "" ? null : event.target.value),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: "", children: "Choose a field" }),
-          offerable.map((field) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: field.key, children: fieldName(field) }, field.key))
+          offerable.map((field) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: field.key, children: fieldName(field) }, field.key)),
+          unusual ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("option", { value: unusual.key, children: [
+            fieldName(unusual),
+            " \u2014 an unusual column to use here"
+          ] }, unusual.key) : null
         ]
       }
     ),