@ai-matrx/records-ui 0.102.9 → 0.102.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.102.11
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.102.9..npm/records-ui/v0.102.11 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
 ## 0.102.9
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/index.cjs

@@ -6200,9 +6200,11 @@ function PageGlyph() {
 }
 function ReferenceChip({ reference, waiting }) {
   const host = useRecordsUi();
+  const look = useEmbeddedLook();
+  const pending = reference.label == null && reference.token === "record" && !waiting && !host.renderReference;
+  const pendingMark = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_design_system19.Skeleton, { "aria-label": "Loading", "data-records-reference-pending": "", className: "inline-block h-3 w-16 shrink-0 rounded-sm align-middle" });
   const words2 = reference.label ?? (reference.token === "record" ? waiting ?? "Loading\u2026" : WITHHELD_ENTITY_LABEL);
   const drawn = host.renderReference ? host.renderReference({ ...reference, label: reference.label ?? words2 }) : null;
-  const look = useEmbeddedLook();
   if (look?.plainRelation) {
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "span",
@@ -6217,7 +6219,7 @@ function ReferenceChip({ reference, waiting }) {
         title: reference.archived ? ARCHIVED_REFERENCE_TIP : words2,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": "true", "data-records-reference-icon": "", className: "inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground", children: glyphOf(reference.icon) ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm leading-none", children: reference.icon }) : reference.icon && host.renderIcon?.(reference.icon) || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PageGlyph, {}) }),
-          drawn ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: words2 }),
+          drawn ?? (pending ? pendingMark : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: words2 })),
           reference.archived ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "shrink-0 text-muted-foreground", children: ARCHIVED_REFERENCE_WORD }) : null
         ]
       }
@@ -6235,7 +6237,7 @@ function ReferenceChip({ reference, waiting }) {
       "data-records-reference-archived": reference.archived ? "" : void 0,
       title: reference.archived ? ARCHIVED_REFERENCE_TIP : words2,
       children: [
-        drawn ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: words2 }),
+        drawn ?? (pending ? pendingMark : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: words2 })),
         reference.archived ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "shrink-0 text-muted-foreground", children: ARCHIVED_REFERENCE_WORD }) : null
       ]
     }
@@ -7135,6 +7137,8 @@ function cardWords(record, field2, labels) {
 
 // src/gridEditing.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
+var FLOATING_EDITOR_TRAY_CLASS = "pointer-events-none absolute left-0 z-[26] w-max max-w-[24rem] rounded-md border bg-popover px-1.5 py-0.5 shadow-md";
+var FLOATING_EDITOR_NOTE_CLASS = "[&_[data-records-typed-reads-as]]:pointer-events-none [&_[data-records-typed-reads-as]]:absolute [&_[data-records-typed-reads-as]]:bottom-full [&_[data-records-typed-reads-as]]:left-0 [&_[data-records-typed-reads-as]]:z-[26] [&_[data-records-typed-reads-as]]:mb-1 [&_[data-records-typed-reads-as]]:w-max [&_[data-records-typed-reads-as]]:max-w-[24rem] [&_[data-records-typed-reads-as]]:rounded-md [&_[data-records-typed-reads-as]]:border [&_[data-records-typed-reads-as]]:bg-popover [&_[data-records-typed-reads-as]]:px-1.5 [&_[data-records-typed-reads-as]]:py-0.5 [&_[data-records-typed-reads-as]]:shadow-md";
 var NO_ROWS = [];
 function asksWhoChanged(event) {
   return event.altKey && event.shiftKey && !event.metaKey && !event.ctrlKey && (event.code === "KeyH" || event.key.toLowerCase() === "h");
@@ -8094,7 +8098,10 @@ function OpenCell({
       "data-matrx-cell-fill": "",
       "data-matrx-cell-editor": "",
       tabIndex: -1,
-      className: "relative z-[25] flex w-full min-w-0 max-w-full flex-col gap-1 outline-none",
+      className: (0, import_design_system23.cn)(
+        "relative z-[25] flex w-full min-w-0 max-w-full flex-col gap-1 outline-none",
+        FLOATING_EDITOR_NOTE_CLASS
+      ),
       onDoubleClick: (event) => event.stopPropagation(),
       onKeyDown: (event) => {
         if (event.target?.closest?.("[data-refusal-notice], [data-records-choice-ask]")) return;
@@ -8149,7 +8156,7 @@ function OpenCell({
             addsChoices: true
           }
         ),
-        picker || asksAboutAChoice(draft) ? null : blurCommits ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-[10px] text-muted-foreground", children: multiline ? "\u23CE saves \xB7 \u21E7\u23CE new line \xB7 Esc cancels \xB7 Tab next" : "\u23CE saves \xB7 Esc cancels \xB7 Tab next" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "flex items-center gap-1", children: [
+        picker || asksAboutAChoice(draft) ? null : blurCommits ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: (0, import_design_system23.cn)("text-[10px] text-muted-foreground", FLOATING_EDITOR_TRAY_CLASS, "top-full mt-1"), "data-records-editor-hint": "", children: multiline ? "\u23CE saves \xB7 \u21E7\u23CE new line \xB7 Esc cancels \xB7 Tab next" : "\u23CE saves \xB7 Esc cancels \xB7 Tab next" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system23.Button, { size: "sm", onClick: () => once(() => onCommit(null, "pick")), children: "Save" }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system23.Button, { size: "sm", variant: "ghost", onClick: () => once(() => onCancel("pick")), children: "Cancel" })
         ] }),
@@ -10825,7 +10832,7 @@ var ROLLUP_OPERATIONS = ROLLUP_AGG_VALUES.map((value) => ({
   label: ROLLUP_AGG_LABEL[value]
 }));
 var FORMULA_SEPARATOR_LABEL = "Joined by";
-var EDITING_A_WORKED_OUT_COLUMN = "This column works out its answer from the columns picked when it was made. To change what it works out, write it as a formula below \u2014 the store checks it as you type, and a rename alone leaves it exactly as it is.";
+var EDITING_A_WORKED_OUT_COLUMN = "Written as a formula. Edit it below.";
 var FORMULA_DEFAULT_SEPARATOR = " \u2014 ";
 var FORMULA_OPERATIONS = FORMULA_OP_VALUES.map((value) => ({
   value,
@@ -11210,8 +11217,7 @@ function FieldEditor(props) {
             placeholder: "Day rate",
             onChange: (e) => setLabel(e.target.value)
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: onEntity ? "What people will read beside the value." : "What people will read at the top of the column." })
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.Label, { className: "text-xs", children: "What it holds" }),
@@ -11222,7 +11228,7 @@ function FieldEditor(props) {
             disabled: editing,
             onValueChange: (next) => setType(next),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectTrigger, { size: "sm", "aria-label": "What this field holds", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectValue, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectTrigger, { size: "sm", "aria-label": "What this field holds", ...choice?.explanation ? { title: choice.explanation } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectValue, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectContent, { children: FIELD_TYPE_GROUPS.filter((group) => offered.some((c) => c.group === group)).map((group) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system34.SelectGroup, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectLabel, { children: group }),
                 FIELD_TYPE_CATALOGUE.filter((c) => c.group === group && (c.id === type || offered.includes(c))).map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectItem, { value: c.id, children: c.label }, c.id))
@@ -11230,7 +11236,7 @@ function FieldEditor(props) {
             ]
           }
         ),
-        editing && field2 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FieldRetype, { field: liveField ?? field2, tableId }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: choice?.explanation ?? "" })
+        editing && field2 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FieldRetype, { field: liveField ?? field2, tableId }) : null
       ] })
     ] }),
     type === "formula" && others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-2", children: [
@@ -11268,7 +11274,7 @@ function FieldEditor(props) {
           columns: others
         }
       ) : null
-    ] }) : editing && type === "formula" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "This column works out its answer from other columns, and this table has no other column left for it to read." }) : null,
+    ] }) : editing && type === "formula" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No other column to read." }) : null,
     editing && field2 && !onEntity && (type === "lookup" || type === "rollup") ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SourceArchivedNotice, { fieldId: field2.id, tableId }) : null,
     !editing && !(type === "formula" && formulaWritten) || type === "select" || type === "multi_select" || type === "status" || type === "rating" || type === "barcode" || type === "relation" || type === "entity_reference" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       TypeQuestions,
@@ -11438,11 +11444,7 @@ function FieldEditor(props) {
         ),
         UNIQUE_LABEL
       ] }) : null,
-      rules.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-muted-foreground", children: [
-        "No checks. Anything this kind of ",
-        onEntity ? "field" : "column",
-        " can hold will be accepted."
-      ] }) : null,
+      rules.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-muted-foreground", children: "No checks." }) : null,
       rules.map((rule, index) => rule.kind === "unique" ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
           import_design_system34.Select,
@@ -11691,8 +11693,7 @@ function TypeQuestions(props) {
           placeholder: "$",
           onChange: (e) => props.setUnit(e.target.value)
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Shown with every amount, everywhere the value appears \u2014 including where an assistant reads it." })
+      )
     ] });
   }
   if (type === "datetime") {
@@ -11711,7 +11712,7 @@ function TypeQuestions(props) {
   if (type === "lookup" || type === "rollup" || type === "count") {
     const usable = props.relations;
     if (usable.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: type !== "lookup" ? "No link, Person or File column yet. Add one that holds more than one first." : "No link, Person or File column yet. Add one first." });
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No link, Person or File column yet." });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "grid gap-3 sm:grid-cols-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-1", children: [
@@ -11757,7 +11758,7 @@ function TypeQuestions(props) {
   }
   if (type === "formula") {
     if (props.others.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "A worked-out column needs other columns to work from, and this table has none yet." });
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No other columns yet." });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-1", children: [
@@ -11784,8 +11785,7 @@ function TypeQuestions(props) {
             },
             f.id
           );
-        }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "In the order you pick them. Columns are remembered by which column they are, so renaming one never breaks this." })
+        }) })
       ] }),
       props.formulaOp === "concat" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.Label, { className: "text-xs", children: FORMULA_SEPARATOR_LABEL }),
@@ -11798,8 +11798,7 @@ function TypeQuestions(props) {
             className: "max-w-[10rem]",
             onChange: (e) => props.setFormulaSeparator(e.target.value)
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "What goes between the columns. Leave it empty to run them straight together." })
+        )
       ] }) : null
     ] });
   }
@@ -11885,18 +11884,14 @@ function ValueOnTheOtherSide({
   const carried = sample.data?.rows[0]?.document ?? null;
   const offered = declared2.length > 0 ? declared2.map((f) => ({ key: f.key, name: fieldName(f) })) : Object.keys(carried ?? {}).map((key) => ({ key, name: (0, import_text_case5.humanizeIdentifier)(key) }));
   const stillAsking = columns.loading || declared2.length === 0 && sample.loading;
-  const body = !relation ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Choose the column above first." }) : stillAsking ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Reading that table's columns\u2026" }) : offered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
-    fieldName(relation),
-    " points at a table that has no columns to read yet. Add one there first."
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system34.Select, { value, onValueChange: onChange, children: [
+  const body = !relation ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Choose the column above first." }) : stillAsking ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Reading that table's columns\u2026" }) : offered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No columns to read yet." }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system34.Select, { value, onValueChange: onChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectTrigger, { size: "sm", "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectValue, { placeholder: "Choose a column" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectContent, { children: offered.map((column) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.SelectItem, { value: column.key, children: column.name }, column.key)) })
   ] });
   if (compact) return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mt-1 flex flex-col gap-1", children: body });
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.Label, { className: "text-xs", children: label }),
-    body,
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-[11px] text-muted-foreground", children: help })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system34.Label, { className: "text-xs", title: help, children: label }),
+    body
   ] });
 }
 function withNumber(rule, key, typed2) {
@@ -46644,7 +46639,33 @@ function LinkedLists({ tableId, recordId }) {
   const links = (fields.data ?? []).filter((field2) => editorKindFor(field2) === "relation");
   const labels = useRecordLabels(links);
   const document2 = record.data?.document;
+  const may = useRecordRights(recordId);
   if (links.length === 0 || !document2) return null;
+  if (may.write) {
+    return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex flex-col gap-3", "data-record-linked-lists": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(import_design_system134.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+        RecordFieldsInPlace,
+        {
+          tableId,
+          recordId,
+          fields: links,
+          document: document2,
+          hidden: record.data?.hidden,
+          canWrite: true,
+          reload: () => record.reload(),
+          className: "flex min-w-0 flex-col gap-1",
+          renderLabel: (field2) => {
+            const count = referencesOf(field2, document2[field2.key], "relation", labels).length;
+            return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("span", { className: "flex items-center gap-2 pt-2 text-foreground", "data-record-linked-list": field2.key, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { className: "truncate text-xs font-medium", children: fieldName(field2) }),
+              count > 0 ? /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { className: "text-[11px] text-muted-foreground", children: count }) : null
+            ] });
+          }
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex flex-col gap-3", "data-record-linked-lists": "", children: [
     /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(import_design_system134.Separator, {}),
     links.map((field2) => {