@ai-matrx/records-ui 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.7.0
+
+What the first headless walk of 0.6.0 through a real browser found, in the same
+hour — every one of them on a table a person had just made.
+
+- **A new table takes an empty record.** `DEFAULT_FIELDS` made `title`
+  REQUIRED, so "New record" — which writes an empty record and opens its first
+  cell — was refused (`REC-51: Title is required`) on every table the app makes.
+  A title is what makes a record a chip (REC-2), not a promise it can never be
+  written without; an organization that wants it demanded says so in the field
+  editor and the store then enforces it for everyone.
+- **`TableSettings` can delete the table.** SCR-3 claims rename, reorder,
+  retype and delete; the panel only ever deleted a FIELD, so a table made in the
+  product could not be got rid of from anywhere in it. It is the same soft
+  delete every record gets, through the same door, and the consequence is named
+  before the second press. `onDeleted` lets the host leave the page, and
+  `TablePage` passes its `onLeave`.
+- **Nobody conflicts with themselves any more.** Three separate paths wrote a
+  record twice against one version and were — correctly — refused `PT409` by the
+  store, so the screen showed a person a conflict with nobody but themselves:
+  Tab fired the cell's key handler AND its blur handler; two cells of one record
+  were written in parallel; and `useRecordVersion` never moved after a save, so
+  switching a saved view's layout twice, or saving a form twice, conflicted with
+  the save before it. One commit per opening, one write at a time per record,
+  and every successful write hands its new version back.
+- **The demo harness renders like the product.** It imported the design
+  system's structural sheet and nothing else, so every page was unstyled HTML in
+  a real browser while `pnpm test` was green. It now runs Tailwind over this
+  package's own source, and the address bar takes `?demo=` and `?table=` so a
+  walk can make a throwaway table, work in it and delete it again.
+
+### Consumer action
+
+**`useRecordVersion` now answers `{ version, note }` rather than a number.** A
+screen that writes the same record more than once must hand each successful
+write's new version back through `note(...)`, or the next write will be refused
+as a conflict with the person who just made the last one. Nothing else changed:
+`version` is the same value the hook used to return, and `null` still means "no
+version was read", which is the store's ordinary last-writer-wins write.
+
+A host that shows `TableSettings` on a page about one table should pass
+`onDeleted`, or the person is left on a page about a table that is gone.
+
 ## 0.6.0
 
 Editing where the value is shown, and four other things an independent walk of

package/dist/index.cjs

@@ -937,6 +937,7 @@ function useGridEditing({ tableId, fields, rows, reload, canWrite }) {
   const [rowError, setRowError] = (0, import_react8.useState)(null);
   const [busy, setBusy] = (0, import_react8.useState)(false);
   const versions = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
+  const queues = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
   const editable = (0, import_react8.useMemo)(() => fields.filter(fieldIsEditable), [fields]);
   const order = (0, import_react8.useMemo)(() => editable.map((f) => f.key), [editable]);
   const rowIds = (0, import_react8.useMemo)(() => rows.map((r) => r.id), [rows]);
@@ -970,7 +971,7 @@ function useGridEditing({ tableId, fields, rows, reload, canWrite }) {
     [canWrite, client]
   );
   const cancel = (0, import_react8.useCallback)(() => setEditing(null), []);
-  const writeCell = (0, import_react8.useCallback)(
+  const writeCellNow = (0, import_react8.useCallback)(
     async (rowId, key, value2) => {
       const id = cellKey(rowId, key);
       setOptimistic((held) => ({ ...held, [id]: value2 }));
@@ -1014,6 +1015,22 @@ function useGridEditing({ tableId, fields, rows, reload, canWrite }) {
     },
     [client, reload]
   );
+  const writeCell = (0, import_react8.useCallback)(
+    (rowId, key, value2) => {
+      const behind = queues.current.get(rowId) ?? Promise.resolve();
+      const next = behind.then(() => writeCellNow(rowId, key, value2));
+      queues.current.set(
+        rowId,
+        next.then(
+          () => void 0,
+          () => void 0
+        )
+      );
+      return next;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [client, reload]
+  );
   const commit = (0, import_react8.useCallback)(
     (value2, move = null) => {
       const open = editing;
@@ -1222,10 +1239,16 @@ function OpenCell({
   const [draft, setDraft] = (0, import_react8.useState)(value2);
   const multiline = editorKindFor(field) === "long_text";
   const blurCommits = closesOnBlur(field);
+  const done = (0, import_react8.useRef)(false);
+  const once = (run) => {
+    if (done.current) return;
+    done.current = true;
+    run();
+  };
   const blur = blurCommits ? {
     onBlur: (event) => {
       if (event.currentTarget.contains(event.relatedTarget)) return;
-      onCommit(draft, null);
+      once(() => onCommit(draft, null));
     }
   } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1242,27 +1265,27 @@ function OpenCell({
         if (event.key === "Escape") {
           event.preventDefault();
           event.stopPropagation();
-          onCancel();
+          once(onCancel);
           return;
         }
         if (event.key === "Tab") {
           event.preventDefault();
           event.stopPropagation();
-          onCommit(draft, event.shiftKey ? "previous" : "next");
+          once(() => onCommit(draft, event.shiftKey ? "previous" : "next"));
           return;
         }
         if (event.key === "Enter" && (!multiline || event.metaKey || event.ctrlKey)) {
           event.preventDefault();
           event.stopPropagation();
-          onCommit(draft, null);
+          once(() => onCommit(draft, null));
         }
       },
       ...blur,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldControl, { field, value: draft, onChange: setDraft, id: `cell-${field.id}` }),
         blurCommits ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] text-muted-foreground", children: multiline ? "\u2318\u23CE saves \xB7 Esc cancels \xB7 Tab next" : "\u23CE saves \xB7 Esc cancels \xB7 Tab next" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Button, { size: "sm", onClick: () => onCommit(draft, null), children: "Save" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Button, { size: "sm", variant: "ghost", onClick: onCancel, children: "Cancel" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Button, { size: "sm", onClick: () => once(() => onCommit(draft, null)), children: "Save" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Button, { size: "sm", variant: "ghost", onClick: () => once(onCancel), children: "Cancel" })
         ] })
       ]
     }
@@ -1872,7 +1895,7 @@ function useRecordVersion(recordId) {
       cancelled = true;
     };
   }, [client, recordId]);
-  return version;
+  return { version, note: setVersion };
 }
 
 // src/RecordForm.tsx
@@ -1891,7 +1914,8 @@ function RecordForm({
   const mutation = (0, import_react20.useRecordMutation)();
   const [draft, setDraft] = (0, import_react19.useState)({});
   const [touched, setTouched] = (0, import_react19.useState)(false);
-  const loadedVersion = useRecordVersion(recordId ?? null);
+  const loaded = useRecordVersion(recordId ?? null);
+  const loadedVersion = loaded.version;
   (0, import_react19.useEffect)(() => {
     const document3 = existing.data?.document;
     if (document3) setDraft({ ...document3 });
@@ -1920,6 +1944,7 @@ function RecordForm({
         ...version === null ? {} : { expectedVersion: version }
       });
       if (moved !== null) {
+        loaded.note(moved);
         host.notify?.success("Saved");
         existing.reload();
         onSaved?.(recordId);
@@ -2277,6 +2302,7 @@ function TableSettings({
   proposals,
   onAcceptProposal,
   onRejectProposal,
+  onDeleted,
   className
 }) {
   const table = (0, import_react26.useTable)(tableId);
@@ -2284,6 +2310,7 @@ function TableSettings({
   const rights = useTableRights(table.data);
   const mutation = (0, import_react26.useRecordMutation)();
   const [editing, setEditing] = (0, import_react25.useState)(null);
+  const [askingToDelete, setAskingToDelete] = (0, import_react25.useState)(false);
   if (table.error) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RefusalNotice, { error: table.error, className });
   if (fields.error) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RefusalNotice, { error: fields.error, className });
   if (!rights.admin) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: (0, import_design_system13.cn)("text-xs text-muted-foreground", className), children: rights.reason });
@@ -2300,6 +2327,11 @@ function TableSettings({
     await mutation.remove({ record_id: field.id });
     fields.reload();
   };
+  const deleteTable = async () => {
+    const gone = await mutation.remove({ record_id: tableId });
+    setAskingToDelete(false);
+    if (gone !== null) onDeleted?.();
+  };
   if (editing) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       FieldEditor,
@@ -2375,7 +2407,28 @@ function TableSettings({
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system13.Badge, { variant: "secondary", className: "text-[10px] font-normal", children: proposal.proposed_by }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system13.Button, { size: "sm", variant: "outline", onClick: () => onAcceptProposal?.(proposal), children: "Accept" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system13.Button, { size: "sm", variant: "ghost", onClick: () => onRejectProposal?.(proposal), children: "Reject" })
-    ] }, proposal.id)) })
+    ] }, proposal.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system13.Separator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-medium", children: "This table" }),
+      askingToDelete ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-muted-foreground", children: [
+          "Deleting ",
+          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."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system13.Button, { size: "sm", variant: "destructive", disabled: mutation.saving, onClick: () => void deleteTable(), children: mutation.saving ? "Deleting\u2026" : "Delete this table" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system13.Button, { size: "sm", variant: "ghost", onClick: () => setAskingToDelete(false), children: "Keep it" })
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system13.Button, { size: "sm", variant: "outline", onClick: () => setAskingToDelete(true), children: "Delete this table" }) }),
+      mutation.error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RefusalNotice, { error: mutation.error }) : null
+    ] })
   ] });
 }
 
@@ -3877,7 +3930,7 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, className }) {
   const [draft, setDraft] = (0, import_react46.useState)(null);
   const [saving, setSaving] = (0, import_react46.useState)(false);
   const [saved, setSaved] = (0, import_react46.useState)(null);
-  const loadedVersion = useRecordVersion(activeId);
+  const loaded = useRecordVersion(activeId);
   const formTableId = home.tableId;
   const load = (0, import_react46.useCallback)(async () => {
     if (!formTableId) return;
@@ -3941,13 +3994,14 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, className }) {
       record_id: draft.id,
       patch: document2,
       // The form record's own version: two people editing one form are TOLD.
-      ...loadedVersion === null ? {} : { expectedVersion: loadedVersion }
+      ...loaded.version === null ? {} : { expectedVersion: loaded.version }
     });
     setSaving(false);
     if (!written.ok) {
       setError(written.error);
       return;
     }
+    loaded.note(written.data);
     setSaved("Saved.");
     await load();
   }
@@ -5050,7 +5104,7 @@ function DashboardCanvas({ tableId, seed, activeDashboardId, className }) {
   const [boards, setBoards] = (0, import_react59.useState)(null);
   const [error, setError] = (0, import_react59.useState)(null);
   const [activeId, setActiveId] = (0, import_react59.useState)(activeDashboardId ?? null);
-  const loadedVersion = useRecordVersion(activeId);
+  const loaded = useRecordVersion(activeId);
   const boardTableId = home.tableId;
   const load = (0, import_react59.useCallback)(async () => {
     if (!boardTableId) return;
@@ -5096,12 +5150,13 @@ function DashboardCanvas({ tableId, seed, activeDashboardId, className }) {
       record_id: board2.id,
       patch: dashboardDocument({ ...board2, blocks }),
       // The dashboard record's own version: two tabs editing one board are TOLD.
-      ...loadedVersion === null ? {} : { expectedVersion: loadedVersion }
+      ...loaded.version === null ? {} : { expectedVersion: loaded.version }
     });
     if (!updated.ok) {
       setError(updated.error);
       return;
     }
+    loaded.note(updated.data);
     await load();
   }
   async function create() {
@@ -6556,7 +6611,7 @@ function tokenFor(name) {
   return name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").slice(0, 48) || "table";
 }
 var DEFAULT_FIELDS = [
-  { key: "title", label: "Title", type: "text", sort: 10, required: true }
+  { key: "title", label: "Title", type: "text", sort: 10, required: false }
 ];
 async function declareTable(client, spec) {
   const fields = spec.fields && spec.fields.length > 0 ? spec.fields : DEFAULT_FIELDS;
@@ -6782,11 +6837,12 @@ function TablePage({
       setView({ ...current, ...patch });
       const document2 = viewPatchDocument(patch);
       if (Object.keys(document2).length === 0) return;
-      await client.recordUpdate({
+      const written = await client.recordUpdate({
         record_id: current.id,
         patch: document2,
-        ...viewVersion === null ? {} : { expectedVersion: viewVersion }
+        ...viewVersion.version === null ? {} : { expectedVersion: viewVersion.version }
       });
+      if (written.ok) viewVersion.note(written.data);
     },
     [client, view, viewVersion]
   );
@@ -6839,7 +6895,13 @@ function TablePage({
       ] })
     ] }),
     rail === "none" ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("aside", { className: "w-[26rem] shrink-0 overflow-y-auto rounded-md border p-3", children: [
-      rail === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TableSettings, { tableId }) : null,
+      rail === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        TableSettings,
+        {
+          tableId,
+          ...onLeave ? { onDeleted: onLeave } : {}
+        }
+      ) : null,
       rail === "inbox" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         ActionInbox,
         {