@ai-matrx/records-ui 0.102.0 → 0.102.4

package/dist/pickers.cjs

@@ -561,29 +561,121 @@ var import_design_system4 = require("@ai-matrx/design-system");
 var import_react2 = require("react");
 var import_design_system2 = require("@ai-matrx/design-system");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function Glyph({ d, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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] = (0, import_react2.useState)(0);
-  (0, import_react2.useEffect)(() => setHighlight(0), [resetOn]);
+  const [moved, setMoved] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    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 = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (highlighted) ref.current?.scrollIntoView?.({ block: "nearest" });
+  }, [highlighted]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "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: (0, import_design_system2.cn)(
+        "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__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex size-3.5 shrink-0 items-center justify-center", children: [
+          picked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-pick-tick": "", className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Glyph, { d: TICK, className: "size-3.5" }) }) : null,
+          icon === "plus" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Glyph, { d: PLUS, className: "size-3.5 text-muted-foreground" }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "min-w-0 flex-1", children: [
+          chip ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_design_system2.cn)("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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "block truncate", children: label }),
+          detail ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-wrap gap-1 px-1 pb-1", "data-pick-chips": "", children: chips.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "span",
+    {
+      "data-pick-chip": "",
+      title: c.label,
+      className: (0, import_design_system2.cn)(
+        "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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "min-w-0 truncate", children: c.label }),
+        c.onRemove ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${c.label}`,
+            onClick: c.onRemove,
+            className: "shrink-0 rounded-sm opacity-60 hover:opacity-100",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Glyph, { d: CROSS, className: "size-3" })
+          }
+        ) : null
+      ]
+    },
+    c.id
+  )) });
 }
 function PickOrAdd({
   triggerLabel,
@@ -600,30 +692,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__ */ (0, import_jsx_runtime2.jsxs)(import_design_system2.Popover, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Button, { id: triggerId, type: "button", size: "sm", variant: "outline", "aria-label": triggerLabel, children: triggerText }) }),
+    anchored ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.PopoverAnchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex min-h-6 w-full min-w-0 flex-wrap items-center gap-1", "aria-label": triggerLabel, children }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_design_system2.Button, { id: triggerId, type: "button", size: "sm", variant: "outline", "aria-label": triggerLabel, children: triggerText }) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_design_system2.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__ */ (0, import_jsx_runtime2.jsx)(PickChips, { chips }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_design_system2.BasicInput,
             {
@@ -634,53 +747,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__ */ (0, import_jsx_runtime2.jsxs)(import_design_system2.ScrollArea, { className: "max-h-56", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { role: "listbox", "aria-label": triggerLabel, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              "button",
-              {
-                type: "button",
-                onClick: () => onPick(item.id),
-                title: item.title ?? item.label,
-                ...item.attrs ?? {},
-                "data-pick-highlighted": index === keys.highlight ? "" : void 0,
-                className: (0, import_design_system2.cn)(
-                  "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__ */ (0, import_jsx_runtime2.jsx)(
-                    "span",
-                    {
-                      className: (0, import_design_system2.cn)("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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "block truncate text-[11px] text-muted-foreground", "data-tell-apart": "", children: item.detail }) : null
-                ]
-              }
-            ) }, item.id)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_design_system2.ScrollArea, { className: "max-h-64", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { role: "listbox", "aria-label": triggerLabel, "aria-multiselectable": multi ? true : void 0, children: [
+              items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                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__ */ (0, import_jsx_runtime2.jsx)(
+                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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-1 border-t pt-1", children: [
-            foot ?? (add ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_design_system2.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "block w-full truncate text-left", children: add.label })
-              }
-            ) : null),
+            foot,
             footNote
           ] }) : null
         ]
@@ -1000,13 +1106,19 @@ var import_jsx_runtime4 = (
   require("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 = (0, import_react4.useOptionalRecordsClient)();
   const [rows, setRows] = (0, import_react3.useState)(null);
   const [words, setWords] = (0, import_react3.useState)({});
   const [refusal2, setRefusal] = (0, import_react3.useState)(null);
   const [search, setSearch] = (0, import_react3.useState)("");
-  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [open, setOpenState] = (0, import_react3.useState)(autoOpen === true);
+  const onCloseRef = (0, import_react3.useRef)(onClose);
+  onCloseRef.current = onClose;
+  const setOpen = (0, import_react3.useCallback)((next) => {
+    setOpenState(next);
+    if (!next) onCloseRef.current?.();
+  }, []);
   const [target, setTarget] = (0, import_react3.useState)(null);
   const [targetRefusal, setTargetRefusal] = (0, import_react3.useState)(null);
   const [creating, setCreating] = (0, import_react3.useState)(false);
@@ -1138,22 +1250,28 @@ function RelationPicker({ field, value, onChange, disabled, id, className, allow
   };
   const apart = tellApart(rows ?? [], titleOf);
   const visible = (0, import_records3.rankTypedMatches)(rows ?? [], search, (row) => [titleOf(row.id), apart.get(row.id) ?? ""]);
+  const anchored = autoOpen === true;
+  const cellChips = picked.map((recordId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_design_system4.cn)("flex min-w-0 max-w-full flex-wrap items-center gap-1", className), children: [
-      picked.map((recordId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        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__ */ (0, import_jsx_runtime4.jsx)(
           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",
@@ -1240,7 +1358,8 @@ function RelationPicker({ field, value, onChange, disabled, id, className, allow
                   }
                 }
               )
-            ) : null
+            ) : null,
+            children: anchored ? cellChips : null
           }
         )
       )
@@ -2402,16 +2521,6 @@ function PersonPicker({ field, value, onChange, disabled, id, className, autoOpe
     };
   }, [client, personTable, picked.length, people.length]);
   const listed = (0, import_records7.rankTypedMatches)(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 = (0, import_react17.useRef)(null);
   if (!membersPort || !client) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: (0, import_design_system10.cn)("text-xs text-muted-foreground", className), children: NO_MEMBERS_REASON });
   }
@@ -2450,7 +2559,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);
@@ -2459,79 +2567,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__ */ (0, import_jsx_runtime12.jsx)(
+    RecordChip,
+    {
+      title: nameOfRecord(recordId),
+      ...disabled || anchored ? {} : { onRemove: () => drop(recordId) }
+    },
+    recordId
+  ));
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_design_system10.cn)("flex flex-wrap items-center gap-1", className), children: [
-    picked.map((recordId) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      RecordChip,
-      {
-        title: nameOfRecord(recordId),
-        ...disabled ? {} : { onRemove: () => drop(recordId) }
-      },
-      recordId
-    )),
-    disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_design_system10.Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_design_system10.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        import_design_system10.Button,
-        {
-          id,
-          type: "button",
-          size: "sm",
-          variant: "outline",
-          "aria-label": `Pick a person for ${fieldName(field)}`,
-          children: picked.length === 0 ? "Pick a person" : "Change"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        import_design_system10.PopoverContent,
+    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__ */ (0, import_jsx_runtime12.jsx)(
+        PickOrAdd,
         {
-          sizing: "content",
-          className: "p-1",
-          align: "start",
-          "data-matrx-cell-editor": "",
-          onKeyDown: (event) => event.stopPropagation(),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_design_system10.BasicInput,
-              {
-                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__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
             error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RefusalLine, { error, className: "p-2" }) : null,
-            members === null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading the members\u2026" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_design_system10.ScrollArea, { className: "max-h-56", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { role: "listbox", "aria-label": `People for ${fieldName(field)}`, children: visible.map((member, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  disabled: busy,
-                  "data-pick-highlighted": index === keys.highlight ? "" : void 0,
-                  onClick: () => void pick(member),
-                  className: (0, import_design_system10.cn)(
-                    "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__ */ (0, import_jsx_runtime12.jsx)("span", { children: memberName(member) }),
-                    member.email && member.email !== memberName(member) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "ml-1.5 opacity-60", children: [
-                      "\xB7 ",
-                      member.email
-                    ] }) : null
-                  ]
-                }
-              ) }, member.userId)) }),
-              members !== null && visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading the members\u2026" }) : null
+          ] }),
+          empty: members !== null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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
         }
       )
-    ] })
+    )
   ] });
 }
 
@@ -3320,7 +3405,7 @@ function FieldControl({ field, value, onChange, disabled, id, autoOpen, onClose,
       }
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RelationPicker, { field, value, onChange, disabled, id: inputId });
     case "relation":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RelationPicker, { field, value, onChange, disabled, id: inputId, onPicked: onCommit });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RelationPicker, { field, value, onChange, disabled, id: inputId, onPicked: onCommit, autoOpen, onClose });
     default:
       if (typeof value === "boolean" || field.config?.["kind"] === "boolean") {
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -3697,7 +3782,9 @@ function OpenChoicePicker({
     });
   };
   const offList = q !== "" && decided.decision !== "chosen" && decided.decision !== "empty";
-  const foot = offList && decided.decision === "ask" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const [askingFor, setAskingFor] = (0, import_react24.useState)(null);
+  const asks = offList && decided.decision === "ask" && (visible.length === 0 || askingFor === q);
+  const foot = asks ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     ChoiceAskButtons,
     {
       field,
@@ -3713,17 +3800,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) => (0, import_records10.isTheChosen)(o, v)));
+  const cellChips = pickedWords.map((word, i) => {
+    const chip = chipOf(pickedOptions[i], word);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system14.Badge, { variant: "outline", className: (0, import_design_system14.cn)("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 ? (0, import_records10.optionKey)(option) : String(current[i]));
+        else onChange(null);
+      }
+    };
+  });
+  const anchored = autoOpen === true;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { id, className: "flex flex-wrap items-center gap-1", children: [
-    pickedWords.map((word, i) => {
-      const chip = chipOf(options.find((o) => (0, import_records10.isTheChosen)(o, current[i])), word);
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system14.Badge, { variant: "outline", className: (0, import_design_system14.cn)("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__ */ (0, import_jsx_runtime16.jsx)(
         PickOrAdd,
         {
+          anchored,
+          chips: headChips,
+          multi: field.multi,
           triggerLabel: `Pick for ${fieldName(field)}`,
           triggerText: pickedWords.length === 0 ? "Choose" : "Change",
           open,
@@ -3732,6 +3838,7 @@ function OpenChoicePicker({
           onSearch: (next) => {
             setSearch(next);
             setAddRefused(null);
+            setAskingFor(null);
           },
           items: visible.map((option) => ({
             id: option.id,
@@ -3746,14 +3853,15 @@ function OpenChoicePicker({
           empty: q === "" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { "data-records-typed-refusal": "", className: "p-2 text-xs text-muted-foreground", children: notAChoiceSentence(field, [q]) }),
               autoOpen ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { "data-records-choice-ask": "", className: "px-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system14.Button, { 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
         }
       )
     )