@ai-matrx/records-ui 0.93.30 → 0.93.37

package/dist/index.js

@@ -597,7 +597,7 @@ import {
 
 // src/editors.tsx
 import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef5, useState as useState9 } from "react";
-import { allowsOtherValues, choiceValuesOf, coerceTypedAnswer, decideTypedChoice, isTheChosen, optionKey } from "@ai-matrx/records";
+import { allowsOtherValues, choiceValuesOf, coerceTypedAnswer, decideTypedChoice, isTheChosen, optionKey as optionKey2 } from "@ai-matrx/records";
 import { useOptionalRecordsClient as useOptionalRecordsClient5 } from "@ai-matrx/records/react";
 import {
   BasicInput as BasicInput5,
@@ -1325,6 +1325,7 @@ import { Badge, Button as Button5 } from "@ai-matrx/design-system";
 // src/labels.tsx
 import { createContext as createContext2, useCallback, useContext as useContext2, useEffect as useEffect3, useMemo as useMemo4, useRef, useState as useState4 } from "react";
 import { useRecordsClient } from "@ai-matrx/records/react";
+import { optionKey } from "@ai-matrx/records";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var LabelContext = createContext2({
   // With no provider the resolver is ABSENT, not silently empty: a caller gets
@@ -1345,6 +1346,9 @@ function idsOf(value) {
   return [];
 }
 var UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function choiceKeyName(fieldId, key) {
+  return `${fieldId}\0key\0${key}`;
+}
 function isId(value) {
   return typeof value === "string" && UUID.test(value);
 }
@@ -1411,7 +1415,10 @@ function RecordLabelProvider({ children }) {
             setNames((current) => {
               const next = { ...current };
               for (const option of result.data ?? []) {
-                next[option.id] = recordName(option.data, null, "Unnamed choice");
+                const words2 = recordName(option.data, null, "Unnamed choice");
+                next[option.id] = words2;
+                const key = optionKey(option);
+                if (key) next[choiceKeyName(field2.id, key)] = words2;
               }
               return next;
             });
@@ -1475,14 +1482,26 @@ function RecordLabelProvider({ children }) {
     },
     []
   );
+  const rereadFor = useRef(/* @__PURE__ */ new Set());
   const lookup = useCallback(
     (field2, id) => {
+      if (field2.type === "list" && !isId(id)) {
+        const named = names[choiceKeyName(field2.id, id)];
+        if (named !== void 0) return named;
+        const once = choiceKeyName(field2.id, id);
+        if (settled[field2.id] && !rereadFor.current.has(once)) {
+          rereadFor.current.add(once);
+          asked2.current.delete(field2.id);
+          want(field2);
+        }
+        return null;
+      }
       const known = names[id];
       if (known !== void 0) return known;
       if (settled[field2.id]) chase(field2, id);
       return null;
     },
-    [names, settled, chase]
+    [names, settled, chase, want]
   );
   const waiting = useCallback((field2) => waitingLines[field2.id] ?? null, [waitingLines]);
   const value = useMemo4(() => ({ lookup, want, waiting }), [lookup, want, waiting]);
@@ -2564,7 +2583,7 @@ function TypedTextControl({ field: field2, value, onChange, disabled, id, onComm
       " ",
       needsChoices ? String(
         (Array.isArray(withoutAddition(judged.value).value) ? withoutAddition(judged.value).value : [withoutAddition(judged.value).value]).map((k) => {
-          const option = choices?.find((o) => optionKey(o) === k);
+          const option = choices?.find((o) => optionKey2(o) === k);
           return option ? recordName(option.data, null, String(k)) : String(k);
         }).join(", ")
       ) : (() => {
@@ -2836,18 +2855,18 @@ function OptionControl({ field: field2, value, onChange, disabled, id, autoOpen,
   const titleOf = (option) => recordName(option.data, null, "Unnamed choice");
   if (field2.multi) {
     const chosen = options.filter((option) => choiceValuesOf(value).some((v) => isTheChosen(option, v)));
-    const picked = new Set(chosen.map((option) => optionKey(option)));
+    const picked = new Set(chosen.map((option) => optionKey2(option)));
     const toggles = /* @__PURE__ */ jsx12("div", { id: autoOpen ? void 0 : id, className: "flex flex-wrap gap-1", children: options.map((option) => /* @__PURE__ */ jsx12(
       Button6,
       {
         type: "button",
         size: "sm",
-        variant: picked.has(optionKey(option)) ? "default" : "outline",
+        variant: picked.has(optionKey2(option)) ? "default" : "outline",
         disabled,
         onClick: () => {
           const next = new Set(picked);
-          if (next.has(optionKey(option))) next.delete(optionKey(option));
-          else next.add(optionKey(option));
+          if (next.has(optionKey2(option))) next.delete(optionKey2(option));
+          else next.add(optionKey2(option));
           onChange(next.size === 0 ? null : [...next]);
         },
         children: titleOf(option)
@@ -2873,7 +2892,7 @@ function OptionControl({ field: field2, value, onChange, disabled, id, autoOpen,
   return /* @__PURE__ */ jsxs10(
     Select2,
     {
-      value: current ? optionKey(current) : "",
+      value: current ? optionKey2(current) : "",
       disabled: disabled ?? false,
       onValueChange: (next) => onChange(next === "" ? null : next),
       ...autoOpen ? {
@@ -2885,7 +2904,7 @@ function OptionControl({ field: field2, value, onChange, disabled, id, autoOpen,
       } : {},
       children: [
         /* @__PURE__ */ jsx12(SelectTrigger2, { id, size: "sm", children: /* @__PURE__ */ jsx12(SelectValue2, { placeholder: "Choose" }) }),
-        /* @__PURE__ */ jsx12(SelectContent2, { children: options.map((option) => /* @__PURE__ */ jsx12(SelectItem2, { value: optionKey(option), children: titleOf(option) }, option.id)) })
+        /* @__PURE__ */ jsx12(SelectContent2, { children: options.map((option) => /* @__PURE__ */ jsx12(SelectItem2, { value: optionKey2(option), children: titleOf(option) }, option.id)) })
       ]
     }
   );
@@ -2933,7 +2952,7 @@ function OpenChoicePicker({
     if (field2.multi) {
       const existing = current.map((v) => {
         const option = options.find((o) => isTheChosen(o, v));
-        return option ? optionKey(option) : String(v);
+        return option ? optionKey2(option) : String(v);
       });
       const has = existing.some((v) => v.toLowerCase() === word.toLowerCase());
       const list = has ? existing.filter((v) => v.toLowerCase() !== word.toLowerCase()) : [...existing, word];
@@ -3006,7 +3025,7 @@ function OpenChoicePicker({
           })),
           onPick: (optionId) => {
             const option = options.find((o) => o.id === optionId);
-            if (option) choose(optionKey(option));
+            if (option) choose(optionKey2(option));
           },
           empty: q === "" ? /* @__PURE__ */ jsx12("p", { className: "p-2 text-xs text-muted-foreground", children: "No choices yet \u2014 type one to add it." }) : null,
           add,
@@ -3933,6 +3952,10 @@ function scalarText(field2, value, labels, stillWaitingFor) {
   if (isId(value) && (field2.type === "list" || field2.type === "relation")) {
     return labels?.(field2, String(value)) ?? stillWaitingFor ?? "Loading\u2026";
   }
+  if (field2.type === "list" && typeof value === "string" && labels) {
+    const words2 = labels(field2, value);
+    if (words2) return words2;
+  }
   const shownAs = shownAsOf(field2);
   if (shownAs) {
     const said = formatFieldValue3(value, shownAs);
@@ -4533,6 +4556,13 @@ function GridCell({
   onAskWhoChanged
 }) {
   const ui = useRecordsUi();
+  const saidAt = useRef8(0);
+  const sayWhyNot = () => {
+    if (Date.now() - saidAt.current < 4e3) return;
+    saidAt.current = Date.now();
+    const why = fieldIsEditable(field2) ? `${fieldName(field2)} \u2014 ${whyNot ?? "you cannot change this record"}` : `${fieldName(field2)} is worked out by the system, so it cannot be typed in`;
+    ui.notify?.error(why);
+  };
   const open = Boolean(
     editing && editing.editing?.rowId === row.id && editing.editing.key === field2.key
   );
@@ -4651,6 +4681,7 @@ function GridCell({
                   event.preventDefault();
                   event.stopPropagation();
                   if (editable) editing?.begin({ rowId: row.id, key: field2.key });
+                  else sayWhyNot();
                 },
                 onKeyDown: (event) => {
                   if (editable && (event.key === "Enter" || event.key === "F2")) {
@@ -4666,7 +4697,9 @@ function GridCell({
                   if (editable && isTypedCharacter(event) && typingOpens(field2) !== "none") {
                     event.preventDefault();
                     editing?.begin({ rowId: row.id, key: field2.key }, event.key);
+                    return;
                   }
+                  if (!editable && (event.key === "Enter" || event.key === "F2" || isTypedCharacter(event))) sayWhyNot();
                 },
                 tabIndex: editable || onAskWhoChanged ? 0 : void 0,
                 children: /* @__PURE__ */ jsx18(
@@ -5425,16 +5458,26 @@ import { tableShapeChanged, useRecordsClient as useRecordsClient6 } from "@ai-ma
 import { Button as Button12, Select as Select3, SelectContent as SelectContent3, SelectItem as SelectItem3, SelectTrigger as SelectTrigger3, SelectValue as SelectValue3 } from "@ai-matrx/design-system";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var RETYPE_TARGETS = [
-  { behaviour: "text", label: "Text", holds: "words" },
-  { behaviour: "range", label: "Number", holds: "a number" },
-  { behaviour: "boolean", label: "Yes / no", holds: "a yes or a no" }
+  { id: "text", behaviour: "text", kind: null, label: "Text", holds: "words" },
+  { id: "number", behaviour: "range", kind: "number", label: "Number", holds: "a number" },
+  // A DATE is a `range` of kind date: `migrate_retype` alone cannot say "date" (it keeps the old
+  // kind, so every date would be kept aside), so this one goes through `custom.field_update`'s own
+  // retype arm (`parity_type: datetime`), which converts on the SAME trigger and keeps what does not
+  // fit in `_retired` with the reason — measured on the live store 2026-09-28.
+  { id: "date", behaviour: "range", kind: "date", label: "Date", holds: "a date" },
+  { id: "checkbox", behaviour: "boolean", kind: null, label: "Yes / no", holds: "a yes or a no" }
 ];
 var PREVIEW_GROUPS = 1e3;
 function retypeableFrom(field2) {
   const behaviour = String(field2.type);
-  if (behaviour !== "text" && behaviour !== "range" && behaviour !== "boolean") return false;
+  return behaviour === "text" || behaviour === "range" || behaviour === "boolean";
+}
+function currentTarget(field2) {
   const kind = String(editorKindFor(field2));
-  return kind !== "datetime" && kind !== "date";
+  if (String(field2.type) === "boolean") return "checkbox";
+  if (kind === "datetime" || kind === "date") return "date";
+  if (String(field2.type) === "range") return "number";
+  return "text";
 }
 function FieldRetype({ field: field2, tableId, onRetyped }) {
   const client = useRecordsClient6();
@@ -5445,7 +5488,7 @@ function FieldRetype({ field: field2, tableId, onRetyped }) {
   const [busy, setBusy] = useState17(false);
   const [said, setSaid] = useState17(null);
   const name = fieldName(field2);
-  const targets = RETYPE_TARGETS.filter((t) => t.behaviour !== String(field2.type));
+  const targets = RETYPE_TARGETS.filter((t) => t.id !== currentTarget(field2));
   useEffect14(() => {
     if (!to) return;
     let cancelled = false;
@@ -5460,7 +5503,7 @@ function FieldRetype({ field: field2, tableId, onRetyped }) {
         return;
       }
       const groups = answer.data.map((row) => ({ value: row.groups[field2.key] ?? null, count: row.row_count }));
-      setPreview(previewRetype({ type: to.behaviour }, groups, answer.data.length >= PREVIEW_GROUPS));
+      setPreview(previewRetype({ type: to.behaviour, kind: to.kind }, groups, answer.data.length >= PREVIEW_GROUPS));
     });
     return () => {
       cancelled = true;
@@ -5470,22 +5513,35 @@ function FieldRetype({ field: field2, tableId, onRetyped }) {
     return /* @__PURE__ */ jsxs18("p", { className: "text-[11px] text-muted-foreground", "data-records-retype": "not-here", children: [
       name,
       " holds ",
-      String(editorKindFor(field2)) === "datetime" ? "dates" : "records picked from a list or another table",
-      ", so what it holds is not changed here \u2014 add a new column and move the values across."
+      String(field2.type) === "formula" ? "a value the table works out" : "records picked from a list or another table",
+      ", and the store keeps those as record ids \u2014 turned into words or numbers they would read as ids, so it is not changed here."
     ] });
   }
   const change = async () => {
     if (!to) return;
     setBusy(true);
     setRefusal(null);
-    const done = await client.migrateRetype({ field_id: field2.id, to: to.behaviour });
-    setBusy(false);
-    if (!done.ok) {
-      setRefusal(done.error);
-      return;
+    let holding;
+    let aside;
+    if (to.id === "date") {
+      const done = await client.fieldUpdate({ field_id: field2.id, patch: { parity_type: "datetime" } });
+      setBusy(false);
+      if (!done.ok) {
+        setRefusal(done.error);
+        return;
+      }
+      holding = preview?.converts ?? 0;
+      aside = preview?.keptAside ?? 0;
+    } else {
+      const done = await client.migrateRetype({ field_id: field2.id, to: to.behaviour });
+      setBusy(false);
+      if (!done.ok) {
+        setRefusal(done.error);
+        return;
+      }
+      holding = done.data.records_still_holding_a_value ?? 0;
+      aside = done.data.values_in_retired_for_this_field ?? 0;
     }
-    const holding = done.data.records_still_holding_a_value ?? 0;
-    const aside = done.data.values_in_retired_for_this_field ?? 0;
     setSaid(
       `${name} now holds ${to.holds}. ${holding} ${holding === 1 ? "record holds" : "records hold"} a value` + (aside > 0 ? `; ${aside} ${aside === 1 ? "value that did not fit was" : "values that did not fit were"} kept with ${aside === 1 ? "its record" : "their records"}, with the reason.` : ".")
     );
@@ -5496,9 +5552,9 @@ function FieldRetype({ field: field2, tableId, onRetyped }) {
   };
   return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1.5", "data-records-retype": "", children: [
     /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsxs18(Select3, { value: to?.behaviour ?? "", onValueChange: (next) => setTo(targets.find((t) => t.behaviour === next) ?? null), children: [
+      /* @__PURE__ */ jsxs18(Select3, { value: to?.id ?? "", onValueChange: (next) => setTo(targets.find((t) => t.id === next) ?? null), children: [
         /* @__PURE__ */ jsx22(SelectTrigger3, { size: "sm", "aria-label": "Change what this column holds", className: "w-auto min-w-[12rem]", children: /* @__PURE__ */ jsx22(SelectValue3, { placeholder: "Change what this column holds" }) }),
-        /* @__PURE__ */ jsx22(SelectContent3, { children: targets.map((t) => /* @__PURE__ */ jsx22(SelectItem3, { value: t.behaviour, children: t.label }, t.behaviour)) })
+        /* @__PURE__ */ jsx22(SelectContent3, { children: targets.map((t) => /* @__PURE__ */ jsx22(SelectItem3, { value: t.id, children: t.label }, t.id)) })
       ] }),
       to ? /* @__PURE__ */ jsx22(Button12, { size: "sm", disabled: busy || asking || preview === null, onClick: () => void change(), "data-records-retype-go": "", children: busy ? "Changing\u2026" : `Change to ${to.label}` }) : null,
       to ? /* @__PURE__ */ jsx22(Button12, { size: "sm", variant: "ghost", onClick: () => setTo(null), disabled: busy, children: "Cancel" }) : null
@@ -7317,7 +7373,7 @@ function entityReferenceKindsOf(field2) {
 
 // src/gridColors.tsx
 import { useCallback as useCallback8, useEffect as useEffect18, useMemo as useMemo12, useState as useState21 } from "react";
-import { optionKey as optionKey2, optionLabel as optionLabel2 } from "@ai-matrx/records";
+import { optionKey as optionKey3, optionLabel as optionLabel2 } from "@ai-matrx/records";
 import { useRecordsClient as useRecordsClient10 } from "@ai-matrx/records/react";
 import {
   Button as Button15,
@@ -7392,7 +7448,7 @@ function useChoiceOptions(fields, keys) {
 function lookOf(option) {
   const raw = option.data?.["color"];
   const color = typeof raw === "string" && STYLE_COLORS4.includes(raw) ? raw : void 0;
-  return { id: String(option.id), key: optionKey2(option), label: optionLabel2(option), ...color ? { color } : {} };
+  return { id: String(option.id), key: optionKey3(option), label: optionLabel2(option), ...color ? { color } : {} };
 }
 function paintByOption(style, fields, index, lookup) {
   if (index.size === 0) return { style, documentOf: (doc) => doc, choiceColorFor: lookup };
@@ -8074,7 +8130,7 @@ function SummarySheetControls({
 
 // src/pasteValues.ts
 import { predictValueRefusals } from "@ai-matrx/records/core";
-import { coerceTypedAnswer as coerceTypedAnswer2, optionKey as optionKey3 } from "@ai-matrx/records";
+import { coerceTypedAnswer as coerceTypedAnswer2, optionKey as optionKey4 } from "@ai-matrx/records";
 function wordForStoredChoice(options, value) {
   if (options === void 0 || typeof value !== "string" || value === "") return null;
   for (const label of options.labels) {
@@ -8087,7 +8143,7 @@ function choiceOptionsOf(options) {
   const labels = [];
   for (const option of options) {
     const id = option.id;
-    const key = optionKey3(option);
+    const key = optionKey4(option);
     const label = recordName(option.data, null, "");
     if (label) {
       labels.push(label);
@@ -9492,7 +9548,10 @@ function columnForField(field2, editing, mayWriteRow, whyNotRow, look, onAskWhoC
     // The type is in the header's tooltip rather than a second header row: one
     // row of headers, always — and it is the parity type's own WORD, not a
     // token (`Long text`, never `long_text`).
-    className: "align-top",
+    // Top-aligned where a value may wrap to several lines; on a phone a cell never wraps (one line,
+    // scrolled sideways) and the row is as tall as its 44 px tick box, so the value sits in the
+    // middle beside the box — top-aligned it sat ~10 px above it (merged-grid review 2, 390 px).
+    className: "sm:align-top max-sm:align-middle",
     ...{ title: fieldTypeLabel(field2) }
   };
 }
@@ -9522,6 +9581,12 @@ function PastePreview({
       "aria-label": "What this paste will write",
       "data-matrx-paste-preview": true,
       className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+      onKeyDown: (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (!busy) onCancel();
+      },
       children: /* @__PURE__ */ jsxs30("div", { className: "flex max-h-[80vh] w-full max-w-2xl flex-col gap-3 overflow-auto rounded-lg border bg-background p-4 shadow-lg", children: [
         /* @__PURE__ */ jsxs30("div", { className: "flex items-baseline justify-between gap-3", children: [
           /* @__PURE__ */ jsx34("h2", { className: "text-sm font-medium", children: outcome ? "What was written" : "Before this is written" }),
@@ -9597,11 +9662,13 @@ function PastePreview({
             ". Add the columns first and paste again."
           ] }) : null,
           /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-end gap-2 pt-1", children: [
-            /* @__PURE__ */ jsx34(Button22, { size: "sm", variant: "ghost", onClick: onCancel, disabled: busy, children: "Cancel" }),
+            /* @__PURE__ */ jsx34(Button22, { size: "sm", variant: "ghost", onClick: onCancel, disabled: busy, autoFocus: nothingToDo, children: "Cancel" }),
             /* @__PURE__ */ jsx34(
               Button22,
               {
                 size: "sm",
+                autoFocus: !nothingToDo,
+                "data-matrx-paste-confirm": "",
                 disabled: busy || nothingToDo,
                 onClick: () => {
                   setBusy(true);
@@ -9621,7 +9688,7 @@ function Outcome({ outcome, onClose }) {
   return /* @__PURE__ */ jsxs30(Fragment11, { children: [
     /* @__PURE__ */ jsx34("p", { className: "text-sm", "data-matrx-paste-outcome": whole ? "whole" : "partial", children: whole ? `All ${outcome.readBack} ${outcome.readBack === 1 ? "value is" : "values are"} in the table \u2014 read back out of it, not just accepted.` : `${outcome.readBack} of ${outcome.readBack + outcome.missing} values are in the table. The rest are not, and nothing was lost from what you copied \u2014 it is still on your clipboard.` }),
     outcome.refusals.length > 0 ? /* @__PURE__ */ jsx34("ul", { className: "flex flex-col gap-1", children: outcome.refusals.slice(0, 8).map((why, index) => /* @__PURE__ */ jsx34("li", { className: "text-xs text-muted-foreground", children: why }, index)) }) : null,
-    /* @__PURE__ */ jsx34("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsx34(Button22, { size: "sm", onClick: onClose, children: "Close" }) })
+    /* @__PURE__ */ jsx34("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsx34(Button22, { size: "sm", onClick: onClose, autoFocus: true, children: "Close" }) })
   ] });
 }
 function PlanTable({ plan }) {