@ai-matrx/records-ui 0.67.0 → 0.69.0

package/dist/index.d.cts

@@ -1406,8 +1406,18 @@ interface RelationPickerProps {
     disabled?: boolean | undefined;
     id?: string | undefined;
     className?: string | undefined;
+    /**
+     * WHETHER A PERSON MAY MAKE THE THING SHE IS LOOKING FOR (RELATION-CREATE, 2026-09-22).
+     *
+     * On by default, because that is what this control is for on every surface a
+     * person fills a record in: the grid cell, the generated form, a public form
+     * runner. The one surface that passes `false` is the filter builder — picking
+     * a value to FILTER by is not a reason to put a new customer in the book, and
+     * a Create button there would write a row nobody asked for.
+     */
+    allowCreate?: boolean | undefined;
 }
-declare function RelationPicker({ field, value, onChange, disabled, id, className }: RelationPickerProps): react.JSX.Element;
+declare function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate }: RelationPickerProps): react.JSX.Element;
 
 interface FieldEditorControlProps {
     field: Field;

package/dist/index.d.ts

@@ -1406,8 +1406,18 @@ interface RelationPickerProps {
     disabled?: boolean | undefined;
     id?: string | undefined;
     className?: string | undefined;
+    /**
+     * WHETHER A PERSON MAY MAKE THE THING SHE IS LOOKING FOR (RELATION-CREATE, 2026-09-22).
+     *
+     * On by default, because that is what this control is for on every surface a
+     * person fills a record in: the grid cell, the generated form, a public form
+     * runner. The one surface that passes `false` is the filter builder — picking
+     * a value to FILTER by is not a reason to put a new customer in the book, and
+     * a Create button there would write a row nobody asked for.
+     */
+    allowCreate?: boolean | undefined;
 }
-declare function RelationPicker({ field, value, onChange, disabled, id, className }: RelationPickerProps): react.JSX.Element;
+declare function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate }: RelationPickerProps): react.JSX.Element;
 
 interface FieldEditorControlProps {
     field: Field;

package/dist/index.js

@@ -667,22 +667,28 @@ import {
   cn as cn2
 } from "@ai-matrx/design-system";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function RelationPicker({ field, value, onChange, disabled, id, className }) {
+function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate = true }) {
   const client = useRecordsClient();
   const [rows, setRows] = useState2(null);
   const [words, setWords] = useState2({});
   const [refusal, setRefusal] = useState2(null);
   const [search, setSearch] = useState2("");
   const [open, setOpen] = useState2(false);
+  const [target, setTarget] = useState2(null);
+  const [targetRefusal, setTargetRefusal] = useState2(null);
+  const [creating, setCreating] = useState2(false);
+  const [newTitle, setNewTitle] = useState2("");
+  const [busy, setBusy] = useState2(false);
+  const [createRefusal, setCreateRefusal] = useState2(null);
   const picked = useMemo3(
     () => Array.isArray(value) ? value.map(String) : value === null || value === void 0 ? [] : [String(value)],
     [value]
   );
   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));
@@ -711,6 +717,28 @@ function RelationPicker({ field, value, onChange, disabled, id, className }) {
       cancelled = true;
     };
   }, [client, field.id, rows, picked, words]);
+  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__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
       fieldName(field),
@@ -730,6 +758,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())
   );
@@ -776,7 +837,57 @@ function RelationPicker({ field, value, onChange, disabled, id, className }) {
             }
           ) }, row.id)) }),
           rows && visible.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "p-2 text-xs text-muted-foreground", children: "Nothing in that table matches." }) : null
-        ] })
+        ] }),
+        allowCreate && !full ? /* @__PURE__ */ jsxs2("div", { className: "mt-1 border-t pt-1", children: [
+          targetRefusal ? /* @__PURE__ */ jsx3("p", { className: "p-2 text-xs text-destructive", children: targetRefusal }) : !target ? /* @__PURE__ */ jsx3("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading that table\u2026" }) : creating ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 p-1", children: [
+            /* @__PURE__ */ jsx3(
+              BasicInput2,
+              {
+                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__ */ jsx3(
+              Button2,
+              {
+                type: "button",
+                size: "sm",
+                variant: "default",
+                disabled: busy || newTitle.trim() === "",
+                onClick: () => void create(newTitle),
+                children: busy ? "Creating\u2026" : "Create"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx3(
+            Button2,
+            {
+              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__ */ jsx3("p", { className: "p-2 text-xs text-destructive", children: createRefusal }) : null
+        ] }) : null
       ] })
     ] })
   ] });
@@ -1240,7 +1351,16 @@ function RefusalNotice({
         /* @__PURE__ */ jsxs5(AlertDescription, { className: "space-y-1 text-xs", children: [
           plain.sentence.replace(/\.$/, "") === plain.title ? null : /* @__PURE__ */ jsx6("p", { children: plain.sentence }),
           /* @__PURE__ */ jsx6("p", { className: "opacity-80", children: plain.remedy }),
-          plain.forEngineers ? /* @__PURE__ */ jsx6("p", { className: "sr-only", ...error.sqlstate ? { "data-sqlstate": error.sqlstate } : {}, children: plain.forEngineers }) : null,
+          plain.forEngineers ? /* @__PURE__ */ jsx6(
+            "p",
+            {
+              className: "sr-only",
+              "aria-hidden": "true",
+              "data-for-engineers": "",
+              ...error.sqlstate ? { "data-sqlstate": error.sqlstate } : {},
+              children: plain.forEngineers
+            }
+          ) : null,
           actions
         ] })
       ]
@@ -5201,7 +5321,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__ */ jsx18(
@@ -7239,7 +7360,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__ */ jsx26("p", { className: "text-xs text-muted-foreground", children: LAYOUT_NO_FIELD[layout] });
   }
   return /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1.5 text-xs", children: [
@@ -7254,7 +7377,11 @@ function FieldPicker({
         onChange: (event) => onPick(event.target.value === "" ? null : event.target.value),
         children: [
           /* @__PURE__ */ jsx26("option", { value: "", children: "Choose a field" }),
-          offerable.map((field) => /* @__PURE__ */ jsx26("option", { value: field.key, children: fieldName(field) }, field.key))
+          offerable.map((field) => /* @__PURE__ */ jsx26("option", { value: field.key, children: fieldName(field) }, field.key)),
+          unusual ? /* @__PURE__ */ jsxs22("option", { value: unusual.key, children: [
+            fieldName(unusual),
+            " \u2014 an unusual column to use here"
+          ] }, unusual.key) : null
         ]
       }
     ),