@ai-matrx/records-ui 0.102.0 → 0.102.4

package/dist/pickers.js

@@ -3,7 +3,7 @@
 // src/TablePickers.tsx
 import { useEffect as useEffect12, useMemo as useMemo7, useState as useState16 } from "react";
 import { RecordsProvider as RecordsProvider2, useFields, useRecords, useTable } from "@ai-matrx/records/react";
-import { Button as Button9, CreatablePicker } from "@ai-matrx/design-system";
+import { Button as Button8, CreatablePicker } from "@ai-matrx/design-system";
 
 // src/askOnce.ts
 var asked = /* @__PURE__ */ new WeakMap();
@@ -40,19 +40,19 @@ function fieldOptionsOnce(client, fieldId) {
 }
 
 // src/editors.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef9, useState as useState14 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useRef as useRef11, useState as useState14 } from "react";
 import { allowsOtherValues, choiceValuesOf, coerceTypedAnswer, newerKindOf as newerKindOf4, decideTypedChoice, isTheChosen, optionKey as optionKey2, rankTypedMatches as rankTypedMatches3, readTypedTime as readTypedTime2, typedDateText as typedDateText2, typedTimeText as typedTimeText2 } from "@ai-matrx/records";
 import { useOptionalRecordsClient as useOptionalRecordsClient7 } from "@ai-matrx/records/react";
 import {
-  BasicInput as BasicInput6,
+  BasicInput as BasicInput5,
   BasicTextarea as BasicTextarea2,
   Badge as Badge3,
-  Button as Button8,
+  Button as Button7,
   Checkbox,
   Label,
-  Popover as Popover4,
-  PopoverContent as PopoverContent4,
-  PopoverTrigger as PopoverTrigger4,
+  Popover as Popover3,
+  PopoverContent as PopoverContent3,
+  PopoverTrigger as PopoverTrigger3,
   Select as Select2,
   SelectContent as SelectContent2,
   SelectItem as SelectItem2,
@@ -550,38 +550,130 @@ var WITHHELD_RECORD_LABEL = "A record you have not been given access to";
 var UNREAD_RECORD_LABEL = "Couldn't load this name";
 
 // src/RelationPicker.tsx
-import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState3 } from "react";
 import { rankTypedMatches } from "@ai-matrx/records";
 import { useOptionalRecordsClient } from "@ai-matrx/records/react";
 import { BasicInput as BasicInput3, Button as Button2, cn as cn4 } from "@ai-matrx/design-system";
 
 // src/PickOrAdd.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { BasicInput as BasicInput2, Button, Popover, PopoverContent, PopoverTrigger, ScrollArea, cn as cn2 } from "@ai-matrx/design-system";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { BasicInput as BasicInput2, Button, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, cn as cn2 } from "@ai-matrx/design-system";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Glyph({ d, className }) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, className, children: /* @__PURE__ */ jsx2("path", { d }) });
+}
+var TICK = "m5 12 4 4L19 6";
+var CROSS = "M18 6 6 18M6 6l12 12";
+var PLUS = "M12 5v14M5 12h14";
 function useListKeys(args) {
-  const { count, resetOn, onPick, onNothing, onClose } = args;
+  const { count, resetOn, onPick, onNothing, onClose, onFinish, onBackspaceEmpty, searchEmpty } = args;
   const [highlight, setHighlight] = useState2(0);
-  useEffect2(() => setHighlight(0), [resetOn]);
+  const [moved, setMoved] = useState2(false);
+  useEffect2(() => {
+    setHighlight(0);
+    setMoved(false);
+  }, [resetOn]);
   const at = count === 0 ? -1 : Math.min(highlight, count - 1);
   const onKeyDown = (event) => {
+    if (event.key === "Tab") return;
     event.stopPropagation();
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      setMoved(true);
       if (count > 0) setHighlight((h) => (Math.min(h, count - 1) + 1) % count);
     } else if (event.key === "ArrowUp") {
       event.preventDefault();
+      setMoved(true);
       if (count > 0) setHighlight((h) => (Math.min(h, count - 1) - 1 + count) % count);
     } else if (event.key === "Enter") {
       event.preventDefault();
-      if (at >= 0) onPick(at);
+      if (onFinish && searchEmpty && !moved) onFinish();
+      else if (at >= 0) onPick(at);
       else onNothing?.();
     } else if (event.key === "Escape") {
       event.preventDefault();
       onClose();
+    } else if (event.key === "Backspace" && searchEmpty && onBackspaceEmpty) {
+      event.preventDefault();
+      onBackspaceEmpty();
     }
   };
-  return { highlight: at, onKeyDown };
+  return { highlight: at, setHighlight, onKeyDown };
+}
+function PickRow({
+  label,
+  detail,
+  title,
+  chip,
+  picked,
+  highlighted,
+  disabled,
+  attrs,
+  icon,
+  onPick,
+  onPoint
+}) {
+  const ref = useRef2(null);
+  useEffect2(() => {
+    if (highlighted) ref.current?.scrollIntoView?.({ block: "nearest" });
+  }, [highlighted]);
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "option",
+      "aria-selected": picked,
+      disabled: disabled ?? false,
+      onClick: onPick,
+      onMouseMove: onPoint,
+      title: title ?? label,
+      ...attrs ?? {},
+      "data-pick-highlighted": highlighted ? "" : void 0,
+      className: cn2(
+        "flex w-full min-w-0 items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none disabled:opacity-50",
+        highlighted ? "bg-accent text-accent-foreground" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("span", { className: "flex size-3.5 shrink-0 items-center justify-center", children: [
+          picked ? /* @__PURE__ */ jsx2("span", { "data-pick-tick": "", className: "contents", children: /* @__PURE__ */ jsx2(Glyph, { d: TICK, className: "size-3.5" }) }) : null,
+          icon === "plus" ? /* @__PURE__ */ jsx2(Glyph, { d: PLUS, className: "size-3.5 text-muted-foreground" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+          chip ? /* @__PURE__ */ jsx2("span", { className: cn2("inline-flex max-w-full truncate rounded-md border px-1.5 py-0.5 text-xs font-medium", chip), "data-records-choice-chip": "", children: label }) : /* @__PURE__ */ jsx2("span", { className: "block truncate", children: label }),
+          detail ? /* @__PURE__ */ jsx2("span", { className: "block truncate text-xs text-muted-foreground", "data-tell-apart": "", children: detail }) : null
+        ] })
+      ]
+    }
+  );
+}
+function PickChips({ chips }) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1 px-1 pb-1", "data-pick-chips": "", children: chips.map((c) => /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      "data-pick-chip": "",
+      title: c.label,
+      className: cn2(
+        "inline-flex max-w-full items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs font-medium",
+        c.chip ?? "bg-secondary text-secondary-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: c.label }),
+        c.onRemove ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${c.label}`,
+            onClick: c.onRemove,
+            className: "shrink-0 rounded-sm opacity-60 hover:opacity-100",
+            children: /* @__PURE__ */ jsx2(Glyph, { d: CROSS, className: "size-3" })
+          }
+        ) : null
+      ]
+    },
+    c.id
+  )) });
 }
 function PickOrAdd({
   triggerLabel,
@@ -598,30 +690,51 @@ function PickOrAdd({
   add,
   foot,
   footNote,
-  onEnterWithNoMatch
+  onEnterWithNoMatch,
+  anchored,
+  children,
+  chips,
+  multi
 }) {
-  const hasFoot = Boolean(add) || Boolean(foot) || Boolean(footNote);
+  const addRow = add && !foot ? add : null;
+  const count = items.length + (addRow ? 1 : 0);
+  const removable = (chips ?? []).filter((c) => c.onRemove);
   const keys = useListKeys({
-    count: items.length,
+    count,
     resetOn: search,
     onPick: (index) => {
       const item = items[index];
-      if (item) onPick(item.id);
+      if (item) {
+        if (!item.disabled) onPick(item.id);
+      } else if (addRow && !addRow.disabled) addRow.onAdd();
     },
     onNothing: onEnterWithNoMatch ?? (add && !add.disabled ? add.onAdd : void 0),
-    onClose: () => onOpenChange(false)
+    onClose: () => onOpenChange(false),
+    ...multi ? { onFinish: () => onOpenChange(false) } : {},
+    ...removable.length > 0 ? { onBackspaceEmpty: () => removable[removable.length - 1]?.onRemove?.() } : {},
+    searchEmpty: search === ""
   });
+  const hasFoot = Boolean(foot) || Boolean(footNote);
   return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx2(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { id: triggerId, type: "button", size: "sm", variant: "outline", "aria-label": triggerLabel, children: triggerText }) }),
+    anchored ? /* @__PURE__ */ jsx2(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx2("div", { className: "flex min-h-6 w-full min-w-0 flex-wrap items-center gap-1", "aria-label": triggerLabel, children }) }) : /* @__PURE__ */ jsx2(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { id: triggerId, type: "button", size: "sm", variant: "outline", "aria-label": triggerLabel, children: triggerText }) }),
     /* @__PURE__ */ jsxs2(
       PopoverContent,
       {
         sizing: "content",
-        className: "p-1",
+        padding: "xs",
         align: "start",
+        side: "bottom",
+        sideOffset: anchored ? 2 : 4,
+        animated: false,
         "data-matrx-cell-editor": "",
-        onKeyDown: (event) => event.stopPropagation(),
+        onKeyDown: (event) => {
+          if (event.key !== "Tab") event.stopPropagation();
+        },
+        onCloseAutoFocus: (event) => {
+          if (anchored) event.preventDefault();
+        },
         children: [
+          chips ? /* @__PURE__ */ jsx2(PickChips, { chips }) : null,
           /* @__PURE__ */ jsx2(
             BasicInput2,
             {
@@ -632,53 +745,46 @@ function PickOrAdd({
               "aria-label": `Search \u2014 ${triggerLabel}`,
               autoFocus: true,
               autoComplete: "off",
-              className: "mb-1 h-7 text-xs"
+              className: "mb-1 h-8 text-sm"
             }
           ),
           notice,
-          /* @__PURE__ */ jsxs2(ScrollArea, { className: "max-h-56", children: [
-            /* @__PURE__ */ jsx2("ul", { role: "listbox", "aria-label": triggerLabel, children: items.map((item, index) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
-              "button",
-              {
-                type: "button",
-                onClick: () => onPick(item.id),
-                title: item.title ?? item.label,
-                ...item.attrs ?? {},
-                "data-pick-highlighted": index === keys.highlight ? "" : void 0,
-                className: cn2(
-                  "w-full truncate rounded px-2 py-1 text-left text-xs hover:bg-muted",
-                  item.picked ? "bg-accent text-accent-foreground" : "",
-                  index === keys.highlight ? "ring-1 ring-ring" : ""
-                ),
-                children: [
-                  item.chip ? /* @__PURE__ */ jsx2(
-                    "span",
-                    {
-                      className: cn2("inline-flex max-w-full truncate rounded-md border px-1.5 py-0.5 text-[11px] font-medium", item.chip),
-                      "data-records-choice-chip": "",
-                      children: item.label
-                    }
-                  ) : item.label,
-                  item.detail ? /* @__PURE__ */ jsx2("span", { className: "block truncate text-[11px] text-muted-foreground", "data-tell-apart": "", children: item.detail }) : null
-                ]
-              }
-            ) }, item.id)) }),
+          /* @__PURE__ */ jsxs2(ScrollArea, { className: "max-h-64", children: [
+            /* @__PURE__ */ jsxs2("div", { role: "listbox", "aria-label": triggerLabel, "aria-multiselectable": multi ? true : void 0, children: [
+              items.map((item, index) => /* @__PURE__ */ jsx2(
+                PickRow,
+                {
+                  label: item.label,
+                  detail: item.detail,
+                  title: item.title,
+                  chip: item.chip,
+                  picked: item.picked,
+                  disabled: item.disabled,
+                  attrs: item.attrs,
+                  highlighted: index === keys.highlight,
+                  onPick: () => onPick(item.id),
+                  onPoint: () => keys.setHighlight(index)
+                },
+                item.id
+              )),
+              addRow ? /* @__PURE__ */ jsx2(
+                PickRow,
+                {
+                  label: addRow.label,
+                  picked: false,
+                  icon: "plus",
+                  disabled: addRow.disabled,
+                  attrs: { "data-pick-add": "" },
+                  highlighted: items.length === keys.highlight,
+                  onPick: addRow.onAdd,
+                  onPoint: () => keys.setHighlight(items.length)
+                }
+              ) : null
+            ] }),
             items.length === 0 && empty ? empty : null
           ] }),
           hasFoot ? /* @__PURE__ */ jsxs2("div", { className: "mt-1 border-t pt-1", children: [
-            foot ?? (add ? /* @__PURE__ */ jsx2(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "ghost",
-                title: add.label,
-                className: "w-full justify-start text-xs",
-                disabled: add.disabled ?? false,
-                onClick: add.onAdd,
-                children: /* @__PURE__ */ jsx2("span", { className: "block w-full truncate text-left", children: add.label })
-              }
-            ) : null),
+            foot,
             footNote
           ] }) : null
         ]
@@ -994,13 +1100,19 @@ function tellApart(rows, nameOf2) {
 // src/RelationPicker.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var NO_STORE_ON_THIS_SCREEN_REASON = "This question points at a record in somebody's own data, and a page answered without an account is never allowed to search that. Leave it blank \u2014 whoever receives your answer will fill it in.";
-function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate = true, onPicked }) {
+function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate = true, onPicked, autoOpen, onClose }) {
   const client = useOptionalRecordsClient();
   const [rows, setRows] = useState3(null);
   const [words, setWords] = useState3({});
   const [refusal2, setRefusal] = useState3(null);
   const [search, setSearch] = useState3("");
-  const [open, setOpen] = useState3(false);
+  const [open, setOpenState] = useState3(autoOpen === true);
+  const onCloseRef = useRef3(onClose);
+  onCloseRef.current = onClose;
+  const setOpen = useCallback((next) => {
+    setOpenState(next);
+    if (!next) onCloseRef.current?.();
+  }, []);
   const [target, setTarget] = useState3(null);
   const [targetRefusal, setTargetRefusal] = useState3(null);
   const [creating, setCreating] = useState3(false);
@@ -1136,22 +1248,28 @@ function RelationPicker({ field, value, onChange, disabled, id, className, allow
   };
   const apart = tellApart(rows ?? [], titleOf);
   const visible = rankTypedMatches(rows ?? [], search, (row) => [titleOf(row.id), apart.get(row.id) ?? ""]);
+  const anchored = autoOpen === true;
+  const cellChips = picked.map((recordId) => /* @__PURE__ */ jsx4(
+    RecordChip,
+    {
+      title: titleOf(recordId),
+      ...disabled || anchored ? {} : { onRemove: () => toggle(recordId) }
+    },
+    recordId
+  ));
   return (
     // Never wider than where it is drawn (a grid cell beside a sticky column: B3-07) — chips truncate, the button wraps.
     /* @__PURE__ */ jsxs4("div", { className: cn4("flex min-w-0 max-w-full flex-wrap items-center gap-1", className), children: [
-      picked.map((recordId) => /* @__PURE__ */ jsx4(
-        RecordChip,
-        {
-          title: titleOf(recordId),
-          ...disabled ? {} : { onRemove: () => toggle(recordId) }
-        },
-        recordId
-      )),
+      anchored && !disabled ? null : cellChips,
       disabled ? null : (
         // THE ONE "PICK OR ADD" BUILDER (PickOrAdd.tsx) — the choice editor draws the same one.
+        // In a grid cell it hangs from the cell's own chips; what is picked heads the list with its ×.
         /* @__PURE__ */ jsx4(
           PickOrAdd,
           {
+            anchored,
+            multi: field.multi,
+            chips: picked.map((recordId) => ({ id: recordId, label: titleOf(recordId), onRemove: () => toggle(recordId) })),
             triggerId: id,
             triggerLabel: `Pick for ${fieldName(field)}`,
             triggerText: picked.length === 0 ? "Pick" : "Change",
@@ -1238,7 +1356,8 @@ function RelationPicker({ field, value, onChange, disabled, id, className, allow
                   }
                 }
               )
-            ) : null
+            ) : null,
+            children: anchored ? cellChips : null
           }
         )
       )
@@ -1247,7 +1366,7 @@ function RelationPicker({ field, value, onChange, disabled, id, className, allow
 }
 
 // src/gridAttachments.tsx
-import { useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
 import { useOptionalRecordsClient as useOptionalRecordsClient3 } from "@ai-matrx/records/react";
 import { Badge, Button as Button5 } from "@ai-matrx/design-system";
 
@@ -1326,13 +1445,13 @@ function useRecordsUi() {
 }
 
 // src/labels.tsx
-import { createContext as createContext2, useCallback, useContext as useContext2, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef5, useState as useState5 } from "react";
 import { useRecordsClient } from "@ai-matrx/records/react";
 import { newerKindExportWords, optionKey } from "@ai-matrx/records";
 import { isUuidShape as isUuidShape2 } from "@ai-matrx/kit/uuid";
 
 // src/signature.tsx
-import { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { Button as Button3, ErrorBox as ErrorBox2, cn as cn5 } from "@ai-matrx/design-system";
 import { useOptionalRecordsClient as useOptionalRecordsClient2 } from "@ai-matrx/records/react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1460,8 +1579,8 @@ function SignaturePad({
   const kept = drawnSignatureOf(value);
   const named = !kept && typeof value === "string" && value !== "" ? value : null;
   const [showPad, setShowPad] = useState4(() => !kept && !named);
-  const canvasRef = useRef2(null);
-  const drawing = useRef2(false);
+  const canvasRef = useRef4(null);
+  const drawing = useRef4(false);
   const [dirty, setDirty] = useState4(false);
   const [tooBig, setTooBig] = useState4(false);
   useEffect4(() => {
@@ -1637,10 +1756,10 @@ function RecordLabelProvider({ children }) {
   const [iconsOf, setIconsOf] = useState5({});
   const [settled, setSettled] = useState5({});
   const [waitingLines, setWaitingLines] = useState5({});
-  const asked3 = useRef3(/* @__PURE__ */ new Set());
-  const chased = useRef3(/* @__PURE__ */ new Set());
-  const timers = useRef3(/* @__PURE__ */ new Map());
-  const startWaitClock = useCallback((field, target) => {
+  const asked3 = useRef5(/* @__PURE__ */ new Set());
+  const chased = useRef5(/* @__PURE__ */ new Set());
+  const timers = useRef5(/* @__PURE__ */ new Map());
+  const startWaitClock = useCallback2((field, target) => {
     if (timers.current.has(field.id)) return;
     timers.current.set(
       field.id,
@@ -1652,7 +1771,7 @@ function RecordLabelProvider({ children }) {
       }, SAY_WHAT_YOU_ARE_WAITING_FOR_AFTER_MS)
     );
   }, []);
-  const stopWaitClock = useCallback((fieldId) => {
+  const stopWaitClock = useCallback2((fieldId) => {
     const timer = timers.current.get(fieldId);
     if (timer) {
       clearTimeout(timer);
@@ -1672,7 +1791,7 @@ function RecordLabelProvider({ children }) {
     },
     []
   );
-  const want = useCallback(
+  const want = useCallback2(
     (field) => {
       if (!pointsAtRecords(field)) return;
       if (asked3.current.has(field.id)) return;
@@ -1707,9 +1826,9 @@ function RecordLabelProvider({ children }) {
     },
     [client, startWaitClock, stopWaitClock]
   );
-  const queued = useRef3(/* @__PURE__ */ new Map());
-  const flushing = useRef3(null);
-  const flush = useCallback(() => {
+  const queued = useRef5(/* @__PURE__ */ new Map());
+  const flushing = useRef5(null);
+  const flush = useCallback2(() => {
     flushing.current = null;
     const batch = [...queued.current.values()];
     queued.current.clear();
@@ -1739,7 +1858,7 @@ function RecordLabelProvider({ children }) {
       for (const { field } of batch) stopWaitClock(field.id);
     })();
   }, [client, stopWaitClock]);
-  const chase = useCallback(
+  const chase = useCallback2(
     (field, id) => {
       const key = `${field.id}:${id}`;
       if (chased.current.has(key)) return;
@@ -1758,8 +1877,8 @@ function RecordLabelProvider({ children }) {
     },
     []
   );
-  const rereadFor = useRef3(/* @__PURE__ */ new Set());
-  const lookupWords = useCallback(
+  const rereadFor = useRef5(/* @__PURE__ */ new Set());
+  const lookupWords = useCallback2(
     (field, id) => {
       if (field.type === "list" && !isId(id)) {
         const named = names[choiceKeyName(field.id, id)];
@@ -1788,7 +1907,7 @@ function RecordLabelProvider({ children }) {
     },
     [lookupWords, archivedRefs, iconsOf]
   );
-  const waiting = useCallback((field) => waitingLines[field.id] ?? null, [waitingLines]);
+  const waiting = useCallback2((field) => waitingLines[field.id] ?? null, [waitingLines]);
   const value = useMemo3(() => ({ lookup, want, waiting }), [lookup, want, waiting]);
   return /* @__PURE__ */ jsx7(LabelContext.Provider, { value, children });
 }
@@ -1801,7 +1920,7 @@ function useRecordLabels(fields) {
 }
 
 // src/FilePicker.tsx
-import { useCallback as useCallback2, useId, useRef as useRef4, useState as useState6 } from "react";
+import { useCallback as useCallback3, useId, useRef as useRef6, useState as useState6 } from "react";
 import { Button as Button4, cn as cn6 } from "@ai-matrx/design-system";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function FilePicker({
@@ -1816,16 +1935,16 @@ function FilePicker({
   className
 }) {
   const inputId = useId();
-  const input = useRef4(null);
+  const input = useRef6(null);
   const [over, setOver] = useState6(false);
-  const take = useCallback2(
+  const take = useCallback3(
     (file) => {
       if (!file || disabled) return;
       onFile(file);
     },
     [disabled, onFile]
   );
-  const onDrop = useCallback2(
+  const onDrop = useCallback3(
     (e) => {
       e.preventDefault();
       setOver(false);
@@ -1998,7 +2117,7 @@ function AttachmentControl({
   const host = useRecordsUi();
   const [busy, setBusy] = useState7(false);
   const [why, setWhy] = useState7(null);
-  const latest = useRef5(value);
+  const latest = useRef7(value);
   latest.current = value;
   const multiple = Boolean(field.multi);
   const pick = async () => {
@@ -2019,7 +2138,7 @@ function AttachmentControl({
     setBusy(false);
     onClose?.();
   };
-  const opened = useRef5(false);
+  const opened = useRef7(false);
   useEffect6(() => {
     if (!autoOpen || opened.current || !host.pickFiles) return;
     opened.current = true;
@@ -2316,19 +2435,11 @@ function Chips({
 }
 
 // src/PersonPicker.tsx
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef6, useState as useState10 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef8, useState as useState10 } from "react";
 import { rankTypedMatches as rankTypedMatches2 } from "@ai-matrx/records";
 import { useOptionalRecordsClient as useOptionalRecordsClient5 } from "@ai-matrx/records/react";
-import {
-  BasicInput as BasicInput4,
-  Button as Button7,
-  Popover as Popover2,
-  PopoverContent as PopoverContent2,
-  PopoverTrigger as PopoverTrigger2,
-  ScrollArea as ScrollArea2,
-  cn as cn9
-} from "@ai-matrx/design-system";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { cn as cn9 } from "@ai-matrx/design-system";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function personFromRow(row) {
   const data = row.document ?? {};
   const userId = data["user_id"];
@@ -2366,9 +2477,9 @@ function PersonPicker({ field, value, onChange, disabled, id, className, autoOpe
   const [error, setError] = useState10(null);
   const [search, setSearch] = useState10(initialSearch ?? "");
   const [open, setOpenState] = useState10(autoOpen === true);
-  const onCloseRef = useRef6(onClose);
+  const onCloseRef = useRef8(onClose);
   onCloseRef.current = onClose;
-  const setOpen = useCallback3((next) => {
+  const setOpen = useCallback4((next) => {
     setOpenState(next);
     if (!next) onCloseRef.current?.();
   }, []);
@@ -2379,7 +2490,7 @@ function PersonPicker({ field, value, onChange, disabled, id, className, autoOpe
     () => Array.isArray(value) ? value.map(String) : value === null || value === void 0 ? [] : [String(value)],
     [value]
   );
-  const load = useCallback3(async () => {
+  const load = useCallback4(async () => {
     if (!membersPort || !client) return;
     const [roster, records] = await Promise.all([
       membersPort(),
@@ -2408,16 +2519,6 @@ function PersonPicker({ field, value, onChange, disabled, id, className, autoOpe
     };
   }, [client, personTable, picked.length, people.length]);
   const listed = rankTypedMatches2(members ?? [], search, memberName);
-  const keys = useListKeys({
-    count: listed.length,
-    resetOn: search,
-    onPick: (index) => {
-      const member = listed[index];
-      if (member && !busy) void pickRef.current?.(member);
-    },
-    onClose: () => setOpen(false)
-  });
-  const pickRef = useRef6(null);
   if (!membersPort || !client) {
     return /* @__PURE__ */ jsx12("p", { className: cn9("text-xs text-muted-foreground", className), children: NO_MEMBERS_REASON });
   }
@@ -2456,7 +2557,6 @@ function PersonPicker({ field, value, onChange, disabled, id, className, autoOpe
     else next.add(resolved.data);
     onChange(next.size === 0 ? null : [...next]);
   };
-  pickRef.current = pick;
   const drop = (recordId) => {
     const next = picked.filter((id2) => id2 !== recordId);
     onChange(next.length === 0 ? null : field.multi ? next : next[0] ?? null);
@@ -2465,79 +2565,56 @@ function PersonPicker({ field, value, onChange, disabled, id, className, autoOpe
   const pickedUserIds = new Set(
     picked.map((recordId) => people.find((p) => p.id === recordId)?.userId).filter(Boolean)
   );
+  const anchored = autoOpen === true;
+  const cellChips = picked.map((recordId) => /* @__PURE__ */ jsx12(
+    RecordChip,
+    {
+      title: nameOfRecord(recordId),
+      ...disabled || anchored ? {} : { onRemove: () => drop(recordId) }
+    },
+    recordId
+  ));
   return /* @__PURE__ */ jsxs10("div", { className: cn9("flex flex-wrap items-center gap-1", className), children: [
-    picked.map((recordId) => /* @__PURE__ */ jsx12(
-      RecordChip,
-      {
-        title: nameOfRecord(recordId),
-        ...disabled ? {} : { onRemove: () => drop(recordId) }
-      },
-      recordId
-    )),
-    disabled ? null : /* @__PURE__ */ jsxs10(Popover2, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx12(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx12(
-        Button7,
-        {
-          id,
-          type: "button",
-          size: "sm",
-          variant: "outline",
-          "aria-label": `Pick a person for ${fieldName(field)}`,
-          children: picked.length === 0 ? "Pick a person" : "Change"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs10(
-        PopoverContent2,
+    anchored && !disabled ? null : cellChips,
+    disabled ? null : (
+      // THE ONE "PICK OR ADD" BUILDER (lane CELL-EDITORS, 2026-10-06): the person list used to carry
+      // its own copy of the list's layout and keys; it now draws the same rows, ticks, highlight and
+      // head chips as every other picker, and in a grid cell hangs from the cell.
+      /* @__PURE__ */ jsx12(
+        PickOrAdd,
         {
-          sizing: "content",
-          className: "p-1",
-          align: "start",
-          "data-matrx-cell-editor": "",
-          onKeyDown: (event) => event.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsx12(
-              BasicInput4,
-              {
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                onKeyDown: keys.onKeyDown,
-                autoFocus: true,
-                autoComplete: "off",
-                "aria-label": `Search people for ${fieldName(field)}`,
-                placeholder: "Search people",
-                className: "mb-1 h-7 text-xs"
-              }
-            ),
+          anchored,
+          multi: field.multi,
+          triggerId: id,
+          triggerLabel: `Pick a person for ${fieldName(field)}`,
+          triggerText: picked.length === 0 ? "Pick a person" : "Change",
+          open,
+          onOpenChange: setOpen,
+          search,
+          onSearch: setSearch,
+          chips: picked.map((recordId) => ({ id: recordId, label: nameOfRecord(recordId), onRemove: () => drop(recordId) })),
+          items: visible.map((member) => ({
+            id: member.userId,
+            label: memberName(member),
+            // A name and an email with nothing between them read as one run-on string (verdict,
+            // 19 September). They are two facts, so they are drawn as two.
+            detail: member.email && member.email !== memberName(member) ? member.email : null,
+            picked: pickedUserIds.has(member.userId),
+            disabled: busy
+          })),
+          onPick: (userId) => {
+            const member = visible.find((m) => m.userId === userId);
+            if (member && !busy) void pick(member);
+          },
+          notice: /* @__PURE__ */ jsxs10(Fragment4, { children: [
             error ? /* @__PURE__ */ jsx12(RefusalLine, { error, className: "p-2" }) : null,
-            members === null ? /* @__PURE__ */ jsx12("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading the members\u2026" }) : null,
-            /* @__PURE__ */ jsxs10(ScrollArea2, { className: "max-h-56", children: [
-              /* @__PURE__ */ jsx12("ul", { role: "listbox", "aria-label": `People for ${fieldName(field)}`, children: visible.map((member, index) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs10(
-                "button",
-                {
-                  type: "button",
-                  disabled: busy,
-                  "data-pick-highlighted": index === keys.highlight ? "" : void 0,
-                  onClick: () => void pick(member),
-                  className: cn9(
-                    "w-full truncate rounded px-2 py-1 text-left text-xs hover:bg-muted",
-                    pickedUserIds.has(member.userId) ? "bg-accent text-accent-foreground" : "",
-                    index === keys.highlight ? "ring-1 ring-ring" : ""
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx12("span", { children: memberName(member) }),
-                    member.email && member.email !== memberName(member) ? /* @__PURE__ */ jsxs10("span", { className: "ml-1.5 opacity-60", children: [
-                      "\xB7 ",
-                      member.email
-                    ] }) : null
-                  ]
-                }
-              ) }, member.userId)) }),
-              members !== null && visible.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "p-2 text-xs text-muted-foreground", children: members.length === 0 ? "This organization has no other members yet, so there is nobody to assign." : "Nobody in this organization matches." }) : null
-            ] })
-          ]
+            members === null ? /* @__PURE__ */ jsx12("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading the members\u2026" }) : null
+          ] }),
+          empty: members !== null ? /* @__PURE__ */ jsx12("p", { className: "p-2 text-xs text-muted-foreground", children: members.length === 0 ? "This organization has no other members yet, so there is nobody to assign." : "Nobody in this organization matches." }) : null,
+          children: anchored ? cellChips : null
         }
       )
-    ] })
+    )
   ] });
 }
 
@@ -2608,12 +2685,12 @@ function currencyCodeFor(unit) {
 }
 
 // src/formatControls.tsx
-import { useEffect as useEffect8, useRef as useRef8, useState as useState11 } from "react";
-import { BasicInput as BasicInput5, BasicTextarea } from "@ai-matrx/design-system";
+import { useEffect as useEffect8, useRef as useRef10, useState as useState11 } from "react";
+import { BasicInput as BasicInput4, BasicTextarea } from "@ai-matrx/design-system";
 import { getFieldFormat as getFieldFormat3, parseFieldInput } from "@ai-matrx/design-system/field-formats";
 
 // src/formattedValue.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef9 } from "react";
 import { FormattedCell } from "@ai-matrx/design-system/data-table";
 import { formatFieldValue as formatFieldValue2, formatPhone, getFieldFormat as getFieldFormat2 } from "@ai-matrx/design-system/field-formats";
 import { cn as cn10 } from "@ai-matrx/design-system";
@@ -2635,7 +2712,7 @@ function RatingStars({
   label,
   selectFirst
 }) {
-  const armed = useRef7(true);
+  const armed = useRef9(true);
   const score = numberOf(value) ?? 0;
   const shown2 = Math.round(score);
   const said = `${shown2} out of ${max}`;
@@ -2785,13 +2862,13 @@ function keptValue(format, raw) {
 }
 function NumberInFormat({ format, value, onChange, disabled, id }) {
   const [text, setText] = useState11(() => typedText(format, value));
-  const lastSent = useRef8(void 0);
+  const lastSent = useRef10(void 0);
   useEffect8(() => {
     if (value === lastSent.current) return;
     setText(typedText(format, value));
   }, [value, format]);
   return /* @__PURE__ */ jsx14(
-    BasicInput5,
+    BasicInput4,
     {
       id,
       inputMode: "decimal",
@@ -2825,7 +2902,7 @@ function formatControl(args) {
     case "url":
     case "tel":
       return /* @__PURE__ */ jsx14(
-        BasicInput5,
+        BasicInput4,
         {
           id,
           type: def.editor,
@@ -2838,7 +2915,7 @@ function formatControl(args) {
     case "color":
       return /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx14(
-          BasicInput5,
+          BasicInput4,
           {
             id: `${id}-swatch`,
             type: "color",
@@ -2849,7 +2926,7 @@ function formatControl(args) {
             onChange: (e) => commit(e.target.value)
           }
         ),
-        /* @__PURE__ */ jsx14(BasicInput5, { id, value: text, placeholder: "#3b82f6", disabled, onChange: (e) => commit(e.target.value) })
+        /* @__PURE__ */ jsx14(BasicInput4, { id, value: text, placeholder: "#3b82f6", disabled, onChange: (e) => commit(e.target.value) })
       ] });
     case "textarea":
       return /* @__PURE__ */ jsx14(BasicTextarea, { id, rows: 4, value: text, disabled, onChange: (e) => commit(e.target.value) });
@@ -2860,7 +2937,7 @@ function formatControl(args) {
 
 // src/typedDateHelper.tsx
 import { useState as useState12 } from "react";
-import { Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, cn as cn11 } from "@ai-matrx/design-system";
+import { Popover as Popover2, PopoverContent as PopoverContent2, PopoverTrigger as PopoverTrigger2, cn as cn11 } from "@ai-matrx/design-system";
 import { readTypedDate, readTypedTime, typedDateText, typedTimeText } from "@ai-matrx/records";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var WEEK = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -2928,8 +3005,8 @@ function TypedDateHelper({ kind, text, onText, label }) {
     const at = new Date(shown2.y, shown2.m + by, 1);
     setMonth({ y: at.getFullYear(), m: at.getMonth() });
   };
-  return /* @__PURE__ */ jsxs13(Popover3, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx15(PopoverTrigger3, { asChild: true, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs13(Popover2, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx15(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -2942,7 +3019,7 @@ function TypedDateHelper({ kind, text, onText, label }) {
       }
     ) }),
     /* @__PURE__ */ jsx15(
-      PopoverContent3,
+      PopoverContent2,
       {
         sizing: "content",
         align: "start",
@@ -3040,7 +3117,7 @@ function useChoiceNudge(enabled = true) {
 }
 
 // src/editors.tsx
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var CHOICE_EDITOR_ADDS_WHAT_IS_TYPED = true;
 function isChoiceAddition(value) {
   return typeof value === "object" && value !== null && value.addingChoices === true;
@@ -3073,9 +3150,9 @@ function ChoiceAskButtons({
   return /* @__PURE__ */ jsxs14("span", { "data-records-choice-ask": "", role: "group", "aria-label": choiceAskSentence(field, words), className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsx16("span", { className: "text-[11px] leading-snug", children: choiceAskSentence(field, words) }),
     /* @__PURE__ */ jsxs14("span", { className: "flex flex-wrap items-center gap-1", children: [
-      /* @__PURE__ */ jsx16(Button8, { type: "button", size: "sm", className: "h-6 px-2 text-xs", disabled: busy ?? false, onClick: onAdd, children: "Add" }),
-      keepOffered ? /* @__PURE__ */ jsx16(Button8, { type: "button", size: "sm", variant: "outline", className: "h-6 px-2 text-xs", disabled: busy ?? false, onClick: onKeep, children: "Keep as typed" }) : null,
-      /* @__PURE__ */ jsx16(Button8, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs", disabled: busy ?? false, onClick: onCancel, children: "Cancel" })
+      /* @__PURE__ */ jsx16(Button7, { type: "button", size: "sm", className: "h-6 px-2 text-xs", disabled: busy ?? false, onClick: onAdd, children: "Add" }),
+      keepOffered ? /* @__PURE__ */ jsx16(Button7, { type: "button", size: "sm", variant: "outline", className: "h-6 px-2 text-xs", disabled: busy ?? false, onClick: onKeep, children: "Keep as typed" }) : null,
+      /* @__PURE__ */ jsx16(Button7, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs", disabled: busy ?? false, onClick: onCancel, children: "Cancel" })
     ] })
   ] });
 }
@@ -3186,7 +3263,7 @@ function TypedTextControl({ field, value, onChange, disabled, id, onCommit, onCa
     ...value.openedAs !== void 0 ? { openedAs: value.openedAs } : {}
   });
   const box = /* @__PURE__ */ jsx16(
-    BasicInput6,
+    BasicInput5,
     {
       id,
       value: value.text,
@@ -3224,7 +3301,7 @@ function TypedTextControl({ field, value, onChange, disabled, id, onCommit, onCa
       }
     ) : "refusal" in judged ? /* @__PURE__ */ jsxs14("span", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ jsx16("span", { "data-records-typed-refusal": "", role: "status", className: "text-[11px] leading-snug text-amber-700 dark:text-amber-400", children: judged.refusal }),
-      judged.cancelOnly && onCancel ? /* @__PURE__ */ jsx16("span", { "data-records-choice-ask": "", children: /* @__PURE__ */ jsx16(Button8, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs", onClick: () => onCancel(), children: "Cancel" }) }) : null
+      judged.cancelOnly && onCancel ? /* @__PURE__ */ jsx16("span", { "data-records-choice-ask": "", children: /* @__PURE__ */ jsx16(Button7, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs", onClick: () => onCancel(), children: "Cancel" }) }) : null
     ] }) : judged.value === null || judged.value === void 0 ? null : /* @__PURE__ */ jsxs14("span", { "data-records-typed-reads-as": "", className: "text-[10px] text-muted-foreground", children: [
       isChoiceAddition(judged.value) ? `Adds ${quoted(judged.value.add)} to the choices for ${fieldName(field)}. ` : null,
       "Reads as",
@@ -3288,7 +3365,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
     case "currency":
     case "percent":
       return /* @__PURE__ */ jsx16(
-        BasicInput6,
+        BasicInput5,
         {
           id: inputId,
           type: "number",
@@ -3305,7 +3382,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
     case "phone":
     case "url":
       return /* @__PURE__ */ jsx16(
-        BasicInput6,
+        BasicInput5,
         {
           id: inputId,
           type: kind === "email" ? "email" : kind === "phone" ? "tel" : "url",
@@ -3330,7 +3407,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
       }
       return /* @__PURE__ */ jsx16(RelationPicker, { field, value, onChange, disabled, id: inputId });
     case "relation":
-      return /* @__PURE__ */ jsx16(RelationPicker, { field, value, onChange, disabled, id: inputId, onPicked: onCommit });
+      return /* @__PURE__ */ jsx16(RelationPicker, { field, value, onChange, disabled, id: inputId, onPicked: onCommit, autoOpen, onClose });
     default:
       if (typeof value === "boolean" || field.config?.["kind"] === "boolean") {
         return /* @__PURE__ */ jsx16(
@@ -3344,7 +3421,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
         );
       }
       return /* @__PURE__ */ jsx16(
-        BasicInput6,
+        BasicInput5,
         {
           id: inputId,
           ...ownDetails && isPersonsName(field) ? { autoComplete: "name" } : {},
@@ -3358,7 +3435,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
 function TypedWordsControl({ field, value, onChange, disabled, id }) {
   const [text, setText] = useState14(() => openingText(field, value));
   const [refusal2, setRefusal] = useState14(null);
-  const sent = useRef9(value);
+  const sent = useRef11(value);
   useEffect10(() => {
     if (value === sent.current) return;
     sent.current = value;
@@ -3380,7 +3457,7 @@ function TypedWordsControl({ field, value, onChange, disabled, id }) {
   return /* @__PURE__ */ jsxs14("span", { className: "flex flex-col gap-0.5", children: [
     /* @__PURE__ */ jsxs14("span", { className: "flex min-w-0 items-center gap-0.5", children: [
       /* @__PURE__ */ jsx16(
-        BasicInput6,
+        BasicInput5,
         {
           id,
           value: text,
@@ -3414,10 +3491,10 @@ function CheckboxControl({ field, value, onChange, disabled, id }) {
         onCheckedChange: (next) => onChange(next === true)
       }
     ),
-    unanswered ? /* @__PURE__ */ jsx16("span", { className: "text-xs italic text-muted-foreground", children: "not answered yet" }) : /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    unanswered ? /* @__PURE__ */ jsx16("span", { className: "text-xs italic text-muted-foreground", children: "not answered yet" }) : /* @__PURE__ */ jsxs14(Fragment5, { children: [
       /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground", children: value === true ? "Yes" : "No" }),
       field.required ? null : /* @__PURE__ */ jsx16(
-        Button8,
+        Button7,
         {
           size: "sm",
           variant: "ghost",
@@ -3516,7 +3593,7 @@ function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose
   if (!client) {
     return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ jsx16(
-        BasicInput6,
+        BasicInput5,
         {
           id,
           value: value === null || value === void 0 ? "" : String(value),
@@ -3578,7 +3655,7 @@ function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose
     const chosen = options.filter((option) => choiceValuesOf(value).some((v) => isTheChosen(option, v)));
     const picked = new Set(chosen.map((option) => optionKey2(option)));
     const toggles = /* @__PURE__ */ jsx16("div", { id: autoOpen ? void 0 : id, className: "flex flex-wrap gap-1", children: options.map((option) => /* @__PURE__ */ jsx16(
-      Button8,
+      Button7,
       {
         type: "button",
         size: "sm",
@@ -3596,15 +3673,15 @@ function OptionControl({ field, value, onChange, disabled, id, autoOpen, onClose
     )) });
     if (!autoOpen) return toggles;
     return /* @__PURE__ */ jsxs14(
-      Popover4,
+      Popover3,
       {
         defaultOpen: true,
         onOpenChange: (open) => {
           if (!open) onClose?.();
         },
         children: [
-          /* @__PURE__ */ jsx16(PopoverTrigger4, { asChild: true, children: /* @__PURE__ */ jsx16(Button8, { id, type: "button", size: "sm", variant: "outline", className: "h-6 max-w-full truncate", children: chosen.length === 0 ? "Choose" : chosen.map(titleOf).join(", ") }) }),
-          /* @__PURE__ */ jsx16(PopoverContent4, { sizing: "content", className: "max-w-[20rem] p-2", align: "start", children: toggles })
+          /* @__PURE__ */ jsx16(PopoverTrigger3, { asChild: true, children: /* @__PURE__ */ jsx16(Button7, { id, type: "button", size: "sm", variant: "outline", className: "h-6 max-w-full truncate", children: chosen.length === 0 ? "Choose" : chosen.map(titleOf).join(", ") }) }),
+          /* @__PURE__ */ jsx16(PopoverContent3, { sizing: "content", className: "max-w-[20rem] p-2", align: "start", children: toggles })
         ]
       }
     );
@@ -3647,9 +3724,9 @@ function OpenChoicePicker({
   const client = useOptionalRecordsClient7();
   const nudge = useChoiceNudge();
   const [open, setOpenState] = useState14(autoOpen === true);
-  const onCloseRef = useRef9(onClose);
+  const onCloseRef = useRef11(onClose);
   onCloseRef.current = onClose;
-  const setOpen = useCallback4((next) => {
+  const setOpen = useCallback5((next) => {
     setOpenState(next);
     if (!next) onCloseRef.current?.();
   }, []);
@@ -3707,7 +3784,9 @@ function OpenChoicePicker({
     });
   };
   const offList = q !== "" && decided.decision !== "chosen" && decided.decision !== "empty";
-  const foot = offList && decided.decision === "ask" ? /* @__PURE__ */ jsx16(
+  const [askingFor, setAskingFor] = useState14(null);
+  const asks = offList && decided.decision === "ask" && (visible.length === 0 || askingFor === q);
+  const foot = asks ? /* @__PURE__ */ jsx16(
     ChoiceAskButtons,
     {
       field,
@@ -3723,17 +3802,36 @@ function OpenChoicePicker({
       }
     }
   ) : null;
-  const add = offList && decided.decision === "add" ? { label: `Add \u201C${q}\u201D to the choices`, onAdd: addTyped, disabled: adding } : offList && decided.decision === "keep_as_typed" ? { label: `Keep \u201C${q}\u201D as typed`, onAdd: () => choose(q) } : null;
+  const add = offList && decided.decision === "ask" && !asks ? { label: `Add \u201C${q}\u201D\u2026`, onAdd: () => setAskingFor(q) } : offList && decided.decision === "add" ? { label: `Add \u201C${q}\u201D to the choices`, onAdd: addTyped, disabled: adding } : offList && decided.decision === "keep_as_typed" ? { label: `Keep \u201C${q}\u201D as typed`, onAdd: () => choose(q) } : null;
+  const pickedOptions = current.map((v) => options.find((o) => isTheChosen(o, v)));
+  const cellChips = pickedWords.map((word, i) => {
+    const chip = chipOf(pickedOptions[i], word);
+    return /* @__PURE__ */ jsx16(Badge3, { variant: "outline", className: cn12("text-[11px]", chip.className), "data-records-choice-chip": "", children: word }, word);
+  });
+  const headChips = pickedWords.map((word, i) => {
+    const option = pickedOptions[i];
+    return {
+      id: `${word}-${i}`,
+      label: word,
+      chip: chipOf(option, word).className,
+      onRemove: () => {
+        if (field.multi) choose(option ? optionKey2(option) : String(current[i]));
+        else onChange(null);
+      }
+    };
+  });
+  const anchored = autoOpen === true;
   return /* @__PURE__ */ jsxs14("div", { id, className: "flex flex-wrap items-center gap-1", children: [
-    pickedWords.map((word, i) => {
-      const chip = chipOf(options.find((o) => isTheChosen(o, current[i])), word);
-      return /* @__PURE__ */ jsx16(Badge3, { variant: "outline", className: cn12("text-[11px]", chip.className), "data-records-choice-chip": "", children: word }, word);
-    }),
-    disabled ? null : (
+    anchored || disabled ? null : cellChips,
+    disabled ? cellChips : (
       // THE ONE "PICK OR ADD" BUILDER (PickOrAdd.tsx) — the relation picker draws the same one.
+      // In a grid cell it hangs from the cell's own chips; no button is drawn in the cell.
       /* @__PURE__ */ jsx16(
         PickOrAdd,
         {
+          anchored,
+          chips: headChips,
+          multi: field.multi,
           triggerLabel: `Pick for ${fieldName(field)}`,
           triggerText: pickedWords.length === 0 ? "Choose" : "Change",
           open,
@@ -3742,6 +3840,7 @@ function OpenChoicePicker({
           onSearch: (next) => {
             setSearch(next);
             setAddRefused(null);
+            setAskingFor(null);
           },
           items: visible.map((option) => ({
             id: option.id,
@@ -3756,14 +3855,15 @@ function OpenChoicePicker({
           empty: q === "" ? /* @__PURE__ */ jsx16("p", { className: "p-2 text-xs text-muted-foreground", children: "No choices yet \u2014 type one to add it." }) : null,
           add,
           foot,
-          ...offList && decided.decision === "ask" && !adding ? { onEnterWithNoMatch: addTyped } : {},
+          ...asks && !adding ? { onEnterWithNoMatch: addTyped } : {},
           footNote: addRefused ? /* @__PURE__ */ jsx16(RefusalLine, { error: addRefused }) : offList && decided.decision === "not_a_choice" ? (
             // never_add on a column that takes only its choices: said, never a silent nothing.
-            /* @__PURE__ */ jsxs14(Fragment4, { children: [
+            /* @__PURE__ */ jsxs14(Fragment5, { children: [
               /* @__PURE__ */ jsx16("p", { "data-records-typed-refusal": "", className: "p-2 text-xs text-muted-foreground", children: notAChoiceSentence(field, [q]) }),
-              autoOpen ? /* @__PURE__ */ jsx16("span", { "data-records-choice-ask": "", className: "px-2 pb-1", children: /* @__PURE__ */ jsx16(Button8, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs", onClick: () => setOpen(false), children: "Cancel" }) }) : null
+              autoOpen ? /* @__PURE__ */ jsx16("span", { "data-records-choice-ask": "", className: "px-2 pb-1", children: /* @__PURE__ */ jsx16(Button7, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs", onClick: () => setOpen(false), children: "Cancel" }) }) : null
             ] })
-          ) : null
+          ) : null,
+          children: anchored ? cellChips : null
         }
       )
     )
@@ -3869,7 +3969,7 @@ function ChoiceAnswer({
   const shown2 = q === "" ? choices : choices.filter((c) => c.label.toLowerCase().includes(q));
   return /* @__PURE__ */ jsxs14("div", { id, className: "flex w-full flex-col gap-2", onKeyDown, children: [
     /* @__PURE__ */ jsx16(
-      BasicInput6,
+      BasicInput5,
       {
         value: search,
         onChange: (e) => setSearch(e.target.value),
@@ -3887,7 +3987,7 @@ function ChoiceAnswer({
 }
 
 // src/RecordsMount.tsx
-import { useRef as useRef10 } from "react";
+import { useRef as useRef12 } from "react";
 import { RecordsProvider } from "@ai-matrx/records/react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function personActor(userId) {
@@ -3895,7 +3995,7 @@ function personActor(userId) {
 }
 
 // src/tablePicking.tsx
-import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo6, useState as useState15 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo6, useState as useState15 } from "react";
 import { withTablePlacement } from "@ai-matrx/records";
 import { useRecordsClient as useRecordsClient2, useTables } from "@ai-matrx/records/react";
 import { Checkbox as Checkbox2, cn as cn13 } from "@ai-matrx/design-system";
@@ -3942,7 +4042,7 @@ function madeOn(stamp) {
 }
 
 // src/TablePickers.tsx
-import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var SHARED_FOR_MS = 5e3;
 var sharedReads = /* @__PURE__ */ new WeakMap();
 function readTablesAnywhere(dataSource) {
@@ -4043,8 +4143,8 @@ function TableScope({ dataSource, userId, tableId, children, fallback = null, un
   const own3 = useTablesAnywhere(dataSource);
   const list = tables ?? own3;
   const organizationId = list.rows.find((t) => t.table_id === tableId)?.organization_id ?? null;
-  if (tableId && !organizationId && !list.loading) return /* @__PURE__ */ jsx19(Fragment5, { children: unavailable ?? fallback });
-  if (!tableId || !organizationId) return /* @__PURE__ */ jsx19(Fragment5, { children: fallback });
+  if (tableId && !organizationId && !list.loading) return /* @__PURE__ */ jsx19(Fragment6, { children: unavailable ?? fallback });
+  if (!tableId || !organizationId) return /* @__PURE__ */ jsx19(Fragment6, { children: fallback });
   return /* @__PURE__ */ jsx19(RecordsProvider2, { config: { dataSource, actor: personActor(userId), organizationId }, children });
 }
 function ColumnValuesEditor({ tableId, value, onChange, disabled, addLabel }) {
@@ -4102,7 +4202,7 @@ function ColumnValuesEditor({ tableId, value, onChange, disabled, addLabel }) {
         onRemove: () => setAdding(false)
       }
     ),
-    !disabled && !adding && keys.length < all.length && /* @__PURE__ */ jsx19(Button9, { type: "button", variant: "outline", size: "sm", className: "self-start", onClick: () => setAdding(true), children: addLabel })
+    !disabled && !adding && keys.length < all.length && /* @__PURE__ */ jsx19(Button8, { type: "button", variant: "outline", size: "sm", className: "self-start", onClick: () => setAdding(true), children: addLabel })
   ] });
 }
 function ColumnValueRow({
@@ -4134,7 +4234,7 @@ function ColumnValueRow({
           ariaLabel: "Column"
         }
       ) }),
-      !disabled && /* @__PURE__ */ jsx19(Button9, { type: "button", variant: "ghost", size: "sm", "aria-label": "Remove", onClick: onRemove, children: "\u2715" })
+      !disabled && /* @__PURE__ */ jsx19(Button8, { type: "button", variant: "ghost", size: "sm", "aria-label": "Remove", onClick: onRemove, children: "\u2715" })
     ] }),
     field ? /* @__PURE__ */ jsx19(FieldControl, { field, value, onChange: onValue, disabled }) : orphan ? /* @__PURE__ */ jsx19("p", { className: "text-[11px] text-muted-foreground", children: value === null || value === void 0 ? "\u2014" : String(value) }) : null
   ] });
@@ -4171,7 +4271,7 @@ function RecordPicker({ tableId, value, onChange, disabled }) {
 import { useEffect as useEffect13, useMemo as useMemo8 } from "react";
 import { isEntityReferenceConfig } from "@ai-matrx/records";
 import { useFields as useFields2, useTable as useTable2 } from "@ai-matrx/records/react";
-import { BasicInput as BasicInput7, Button as Button10, CreatablePicker as CreatablePicker2, cn as cn14 } from "@ai-matrx/design-system";
+import { BasicInput as BasicInput6, Button as Button9, CreatablePicker as CreatablePicker2, cn as cn14 } from "@ai-matrx/design-system";
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var DATA_BINDING_SHAPES = [
   { value: "collection", label: "The whole table" },
@@ -4307,7 +4407,7 @@ function BindingDetails({
   const setTemplate = (next) => onChange({ ...binding, transform: { join: "\n", ...binding.transform, name: "list", template: next } });
   return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx20("div", { className: "flex flex-wrap gap-1", role: "radiogroup", "aria-label": "What to read", children: DATA_BINDING_SHAPES.map((s) => /* @__PURE__ */ jsx20(
-      Button10,
+      Button9,
       {
         type: "button",
         size: "sm",
@@ -4357,7 +4457,7 @@ function BindingDetails({
         }
       ),
       !disabled && /* @__PURE__ */ jsx20("div", { className: "flex flex-wrap gap-1", children: fieldList.flatMap(bindingPlaceholdersFor).map((p) => /* @__PURE__ */ jsx20(
-        Button10,
+        Button9,
         {
           type: "button",
           size: "sm",
@@ -4372,7 +4472,7 @@ function BindingDetails({
     shape === "collection" && /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
       "Up to",
       /* @__PURE__ */ jsx20(
-        BasicInput7,
+        BasicInput6,
         {
           type: "number",
           min: 1,
@@ -4391,7 +4491,7 @@ function BindingDetails({
     /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-1", role: "radiogroup", "aria-label": "If nothing is found", children: [
       /* @__PURE__ */ jsx20("span", { className: "text-xs text-muted-foreground", children: "If nothing is found" }),
       DATA_BINDING_MISSING.map((m) => /* @__PURE__ */ jsx20(
-        Button10,
+        Button9,
         {
           type: "button",
           size: "sm",
@@ -4664,7 +4764,7 @@ function formulaSourceArchived(field, document2) {
 
 // src/values.tsx
 import { newerKindWords, sourceArchivedOf as sourceArchivedOf2 } from "@ai-matrx/records";
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 function statusMark(field, item, document2) {
   const mark = statusMarkOf(field, item, document2);
   return mark ? /* @__PURE__ */ jsx23("span", { "aria-label": mark.words, title: mark.words, className: "mr-1", "data-records-status-group": mark.group, children: mark.mark }) : null;
@@ -4860,13 +4960,13 @@ function scalarText(field, value, labels, stillWaitingFor) {
 }
 
 // src/PickedSummaries.tsx
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function TableNameText({ dataSource, tableId }) {
   const tables = useTablesAnywhere(dataSource);
-  if (!tableId) return /* @__PURE__ */ jsx24(Fragment7, { children: "\u2014" });
-  if (tables.loading) return /* @__PURE__ */ jsx24(Fragment7, { children: "\u2026" });
-  if (tables.error) return /* @__PURE__ */ jsx24(Fragment7, { children: "Couldn't load the table's name" });
-  return /* @__PURE__ */ jsx24(Fragment7, { children: tables.rows.find((t) => t.table_id === tableId)?.table_name ?? "\u2014" });
+  if (!tableId) return /* @__PURE__ */ jsx24(Fragment8, { children: "\u2014" });
+  if (tables.loading) return /* @__PURE__ */ jsx24(Fragment8, { children: "\u2026" });
+  if (tables.error) return /* @__PURE__ */ jsx24(Fragment8, { children: "Couldn't load the table's name" });
+  return /* @__PURE__ */ jsx24(Fragment8, { children: tables.rows.find((t) => t.table_id === tableId)?.table_name ?? "\u2014" });
 }
 function ColumnValuesText({
   dataSource,
@@ -4874,15 +4974,15 @@ function ColumnValuesText({
   tableId,
   value
 }) {
-  if (!tableId) return /* @__PURE__ */ jsx24(Fragment7, { children: "\u2014" });
+  if (!tableId) return /* @__PURE__ */ jsx24(Fragment8, { children: "\u2014" });
   return /* @__PURE__ */ jsx24(
     TableScope,
     {
       dataSource,
       userId,
       tableId,
-      fallback: /* @__PURE__ */ jsx24(Fragment7, { children: "\u2026" }),
-      unavailable: /* @__PURE__ */ jsx24(Fragment7, { children: "Couldn't load this table's columns" }),
+      fallback: /* @__PURE__ */ jsx24(Fragment8, { children: "\u2026" }),
+      unavailable: /* @__PURE__ */ jsx24(Fragment8, { children: "Couldn't load this table's columns" }),
       children: /* @__PURE__ */ jsx24(RecordLabelProvider, { children: /* @__PURE__ */ jsx24(ColumnValuesWords, { tableId, value }) })
     }
   );
@@ -4890,8 +4990,8 @@ function ColumnValuesText({
 function ColumnValuesWords({ tableId, value }) {
   const fields = useFields3(tableId);
   const labels = useRecordLabels(fields.data ?? void 0);
-  if (fields.loading) return /* @__PURE__ */ jsx24(Fragment7, { children: "\u2026" });
-  if (fields.error) return /* @__PURE__ */ jsx24(Fragment7, { children: "Couldn't load this table's columns" });
+  if (fields.loading) return /* @__PURE__ */ jsx24(Fragment8, { children: "\u2026" });
+  if (fields.error) return /* @__PURE__ */ jsx24(Fragment8, { children: "Couldn't load this table's columns" });
   const parts = [];
   for (const [key, stored] of Object.entries(value)) {
     if (key.startsWith("_")) continue;
@@ -4905,7 +5005,7 @@ function ColumnValuesWords({ tableId, value }) {
       ] }, key)
     );
   }
-  return parts.length ? /* @__PURE__ */ jsx24(Fragment7, { children: parts }) : /* @__PURE__ */ jsx24(Fragment7, { children: "\u2014" });
+  return parts.length ? /* @__PURE__ */ jsx24(Fragment8, { children: parts }) : /* @__PURE__ */ jsx24(Fragment8, { children: "\u2014" });
 }
 function RecordNameText({
   dataSource,
@@ -4913,15 +5013,15 @@ function RecordNameText({
   tableId,
   recordId
 }) {
-  if (!tableId || !recordId) return /* @__PURE__ */ jsx24(Fragment7, { children: "\u2014" });
+  if (!tableId || !recordId) return /* @__PURE__ */ jsx24(Fragment8, { children: "\u2014" });
   return /* @__PURE__ */ jsx24(
     TableScope,
     {
       dataSource,
       userId,
       tableId,
-      fallback: /* @__PURE__ */ jsx24(Fragment7, { children: "\u2026" }),
-      unavailable: /* @__PURE__ */ jsx24(Fragment7, { children: "Couldn't load this record" }),
+      fallback: /* @__PURE__ */ jsx24(Fragment8, { children: "\u2026" }),
+      unavailable: /* @__PURE__ */ jsx24(Fragment8, { children: "Couldn't load this record" }),
       children: /* @__PURE__ */ jsx24(RecordNameWords, { tableId, recordId })
     }
   );
@@ -4929,16 +5029,16 @@ function RecordNameText({
 function RecordNameWords({ tableId, recordId }) {
   const table = useTable3(tableId);
   const record = useRecord(recordId);
-  if (record.loading || table.loading) return /* @__PURE__ */ jsx24(Fragment7, { children: "\u2026" });
-  if (record.error) return /* @__PURE__ */ jsx24(Fragment7, { children: "Couldn't load this record" });
-  if (!record.data) return /* @__PURE__ */ jsx24(Fragment7, { children: "A record you cannot open" });
-  return /* @__PURE__ */ jsx24(Fragment7, { children: recordName(record.data.document, table.data?.title_field ?? null) });
+  if (record.loading || table.loading) return /* @__PURE__ */ jsx24(Fragment8, { children: "\u2026" });
+  if (record.error) return /* @__PURE__ */ jsx24(Fragment8, { children: "Couldn't load this record" });
+  if (!record.data) return /* @__PURE__ */ jsx24(Fragment8, { children: "A record you cannot open" });
+  return /* @__PURE__ */ jsx24(Fragment8, { children: recordName(record.data.document, table.data?.title_field ?? null) });
 }
 
 // src/HeldChangeDecision.tsx
 import { useEffect as useEffect15, useState as useState18 } from "react";
 import { RecordsProvider as RecordsProvider3, useRecordsClient as useRecordsClient3 } from "@ai-matrx/records/react";
-import { Button as Button11 } from "@ai-matrx/design-system";
+import { Button as Button10 } from "@ai-matrx/design-system";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 function HeldChangeDecision({ dataSource, userId, organizationId, approvalId, onDecided }) {
   return /* @__PURE__ */ jsx25(RecordsProvider3, { config: { dataSource, actor: personActor(userId), organizationId }, children: /* @__PURE__ */ jsx25(Decision, { approvalId, onDecided }) });
@@ -4973,8 +5073,8 @@ function Decision({ approvalId, onDecided }) {
   if (may === null) return /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: "Checking who can decide\u2026" });
   return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1.5", children: [
     may ? /* @__PURE__ */ jsxs22("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx25(Button11, { type: "button", size: "sm", disabled: busy !== null, onClick: () => void decide(true), children: busy === "approve" ? "Approving\u2026" : "Approve" }),
-      /* @__PURE__ */ jsx25(Button11, { type: "button", size: "sm", variant: "outline", disabled: busy !== null, onClick: () => void decide(false), children: busy === "refuse" ? "Refusing\u2026" : "Refuse" })
+      /* @__PURE__ */ jsx25(Button10, { type: "button", size: "sm", disabled: busy !== null, onClick: () => void decide(true), children: busy === "approve" ? "Approving\u2026" : "Approve" }),
+      /* @__PURE__ */ jsx25(Button10, { type: "button", size: "sm", variant: "outline", disabled: busy !== null, onClick: () => void decide(false), children: busy === "refuse" ? "Refusing\u2026" : "Refuse" })
     ] }) : !error && /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: "An owner or admin of this organization decides this." }),
     error ? /* @__PURE__ */ jsx25(RefusalLine, { error }) : null
   ] });