@ai-matrx/records-ui 0.101.31 → 0.101.34

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.101.34
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.101.33..npm/records-ui/v0.101.34 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
+## 0.101.33
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.101.31..npm/records-ui/v0.101.33 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
+## 0.101.32
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.101.31..npm/records-ui/v0.101.32 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
 ## 0.101.31
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/index.cjs

@@ -2368,10 +2368,10 @@ function shown(value) {
   if (typeof value === "number" || typeof value === "boolean") return String(value);
   return null;
 }
-function tellApart(rows, nameOf) {
+function tellApart(rows, nameOf2) {
   const byName = /* @__PURE__ */ new Map();
   for (const row of rows) {
-    const name = nameOf(row.id).trim().toLowerCase();
+    const name = nameOf2(row.id).trim().toLowerCase();
     byName.set(name, [...byName.get(name) ?? [], row]);
   }
   const out = /* @__PURE__ */ new Map();
@@ -2979,6 +2979,7 @@ function RecordLabelProvider({ children }) {
   const client = (0, import_react14.useRecordsClient)();
   const [names, setNames] = (0, import_react13.useState)({});
   const [archivedRefs, setArchivedRefs] = (0, import_react13.useState)({});
+  const [iconsOf, setIconsOf] = (0, import_react13.useState)({});
   const [settled, setSettled] = (0, import_react13.useState)({});
   const [waitingLines, setWaitingLines] = (0, import_react13.useState)({});
   const asked3 = (0, import_react13.useRef)(/* @__PURE__ */ new Set());
@@ -3061,6 +3062,7 @@ function RecordLabelProvider({ children }) {
     void (async () => {
       const learned = {};
       const archivedNow = {};
+      const iconsNow = {};
       await Promise.all(
         batch.map(async ({ field: field2, ids }) => {
           const wanted = [...ids];
@@ -3073,10 +3075,12 @@ function RecordLabelProvider({ children }) {
             learned[id] = !result.ok ? UNREAD_RECORD_LABEL : typeof words2 === "string" && words2 !== "" ? words2 : WITHHELD_RECORD_LABEL;
           }
           if (result.ok) for (const id of result.archived ?? []) archivedNow[`${field2.id}:${id}`] = true;
+          if (result.ok) for (const [id, pair] of Object.entries(result.icons ?? {})) iconsNow[id] = pair;
         })
       );
       setNames((current) => ({ ...current, ...learned }));
       if (Object.keys(archivedNow).length > 0) setArchivedRefs((current) => ({ ...current, ...archivedNow }));
+      if (Object.keys(iconsNow).length > 0) setIconsOf((current) => ({ ...current, ...iconsNow }));
       for (const { field: field2 } of batch) stopWaitClock(field2.id);
     })();
   }, [client, stopWaitClock]);
@@ -3124,9 +3128,10 @@ function RecordLabelProvider({ children }) {
     () => {
       const answer = ((field2, id) => lookupWords(field2, id));
       answer.archived = (field2, id) => archivedRefs[`${field2.id}:${id}`] === true;
+      answer.icons = (_field, id) => iconsOf[id];
       return answer;
     },
-    [lookupWords, archivedRefs]
+    [lookupWords, archivedRefs, iconsOf]
   );
   const waiting = (0, import_react13.useCallback)((field2) => waitingLines[field2.id] ?? null, [waitingLines]);
   const value = (0, import_react13.useMemo)(() => ({ lookup, want, waiting }), [lookup, want, waiting]);
@@ -5694,6 +5699,7 @@ var EMBEDDED_TABLE_CLASS = [
   "[&_thead_th:last-child]:border-r-0"
 ].join(" ");
 var EMBEDDED_PLAIN_FOOTER_CLASS = "[&_tfoot]:bg-transparent [&_tfoot]:border-t-0";
+var EMBEDDED_PAGE_SIZE = 50;
 
 // src/enumLabels.ts
 function exhaustiveValuesOf() {
@@ -5986,6 +5992,20 @@ function kindLabel(kind) {
 
 // src/ReferenceChips.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
+function glyphOf(icon) {
+  const text = (icon ?? "").trim();
+  return text !== "" && text.length <= 8 && /[^\u0000-\u007f]/.test(text) ? text : null;
+}
+function nameOf(icon) {
+  const text = (icon ?? "").trim();
+  return /^[A-Za-z][A-Za-z0-9_-]{1,40}$/.test(text) ? text : null;
+}
+function iconOf(pair) {
+  const own3 = glyphOf(pair?.icon) ?? nameOf(pair?.icon);
+  const table = glyphOf(pair?.tableIcon) ?? nameOf(pair?.tableIcon);
+  const chosen = own3 ?? table;
+  return chosen ? { icon: chosen } : {};
+}
 function referencesOf(field2, value, kind, labels) {
   if (kind === "entity_reference") {
     return (0, import_records13.entityRefsOf)(value).map((r) => ({ token: r.token, id: r.id, label: r.label }));
@@ -5997,6 +6017,7 @@ function referencesOf(field2, value, kind, labels) {
     id,
     label: labels?.(field2, id) ?? null,
     tableId,
+    ...iconOf(labels?.icons?.(field2, id)),
     ...labels?.archived?.(field2, id) ? { archived: true } : {}
   }));
 }
@@ -6028,7 +6049,7 @@ function ReferenceChip({ reference, waiting }) {
         "data-records-reference-archived": reference.archived ? "" : void 0,
         title: reference.archived ? ARCHIVED_REFERENCE_TIP : words2,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": "true", "data-records-reference-icon": "", className: "inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground", children: reference.icon ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm leading-none", children: reference.icon }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PageGlyph, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)("span", { className: "text-sm leading-none", children: reference.icon }) : reference.icon && host.renderIcon?.(reference.icon) || /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PageGlyph, {}) }),
           drawn ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate", children: words2 }),
           reference.archived ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "shrink-0 text-muted-foreground", children: ARCHIVED_REFERENCE_WORD }) : null
         ]
@@ -16496,7 +16517,7 @@ function opensOnKey(event) {
   }
   return true;
 }
-function withOpenRecord(columns, onOpen, nameOf, place = "end", hrefOf) {
+function withOpenRecord(columns, onOpen, nameOf2, place = "end", hrefOf) {
   if (!onOpen) return columns;
   return columns.map((column, index) => {
     const original = column.cell;
@@ -16506,8 +16527,8 @@ function withOpenRecord(columns, onOpen, nameOf, place = "end", hrefOf) {
       {
         type: "button",
         "data-records-open-record": row.id,
-        "aria-label": openRecordLabel(nameOf(row)),
-        title: `${openRecordLabel(nameOf(row))} (Space)`,
+        "aria-label": openRecordLabel(nameOf2(row)),
+        title: `${openRecordLabel(nameOf2(row))} (Space)`,
         className: "shrink-0 rounded px-1 text-xs leading-5 text-muted-foreground opacity-40 hover:bg-muted hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/matrx-row:opacity-100",
         onClick: (event) => {
           event.stopPropagation();
@@ -21361,7 +21382,9 @@ function GridBody({
   onAskWhoChanged,
   embedded = false,
   newRowLabel,
-  sortOverride
+  sortOverride,
+  searchOverride,
+  onSearchChange
 }) {
   const toolbarSlot = useTableToolbarSlot();
   const tableCard = (0, import_data_table10.useMatrxTableCard)();
@@ -21438,6 +21461,14 @@ function GridBody({
       page: 1
     }));
   }, [overrideKey]);
+  const overrideSearchSeen = (0, import_react113.useRef)(void 0);
+  (0, import_react113.useEffect)(() => {
+    if (searchOverride === void 0) return;
+    const wanted = searchOverride ?? "";
+    if (overrideSearchSeen.current === wanted) return;
+    overrideSearchSeen.current = wanted;
+    setQuery((held) => held.search === wanted ? held : { ...held, search: wanted, page: 1 });
+  }, [searchOverride]);
   const reportQuery = address?.report;
   (0, import_react113.useEffect)(() => {
     if (!reportQuery) return;
@@ -21521,7 +21552,32 @@ function GridBody({
     filter: readFilter ?? null,
     version: records.data
   });
-  const pageRows = (0, import_react113.useMemo)(() => manual && !storePaged ? hand.rows ?? [] : storeRows, [manual, storePaged, hand.rows, storeRows]);
+  const embeddedMore = embedded && storePaged;
+  const [appendedRows, setAppendedRows] = (0, import_react113.useState)([]);
+  const [appending, setAppending] = (0, import_react113.useState)(false);
+  const askKey2 = JSON.stringify([tableId, searchTerm, pageSort, readFilter ?? null, viewId]);
+  (0, import_react113.useEffect)(() => setAppendedRows([]), [askKey2]);
+  const pageRows = (0, import_react113.useMemo)(() => {
+    if (manual && !storePaged) return hand.rows ?? [];
+    if (!embeddedMore || appendedRows.length === 0) return storeRows;
+    const seen = new Set(storeRows.map((row) => row.id));
+    return [...storeRows, ...appendedRows.filter((row) => !seen.has(row.id))];
+  }, [manual, storePaged, hand.rows, storeRows, embeddedMore, appendedRows]);
+  const showMoreRows = (0, import_react113.useCallback)(async () => {
+    if (appending || !embeddedMore) return;
+    setAppending(true);
+    const asked3 = await client.listPage({
+      table_id: tableId,
+      ...readFilter ? { filter: readFilter } : {},
+      search: searchTerm.trim() === "" ? null : searchTerm.trim(),
+      sort: pageSort,
+      view_id: manual && pageSort.length === 0 ? viewId : null,
+      limit: EMBEDDED_PAGE_SIZE,
+      offset: pageRows.length
+    });
+    setAppending(false);
+    if (asked3.ok) setAppendedRows((held) => [...held, ...asked3.data.rows]);
+  }, [appending, embeddedMore, client, tableId, readFilter, searchTerm, pageSort, manual, viewId, pageRows.length]);
   const added = useAddedRows({
     tableId,
     enabled: merged,
@@ -22701,6 +22757,21 @@ function GridBody({
   const tableToolbar = (0, import_react113.useMemo)(
     () => ({
       search: !embedded,
+      // EMBEDDED: Notion's magnifier — the design system's own search group, a button that
+      // opens into a field. It is the same `query.search` the store's read asks.
+      ...embedded ? {
+        customSearch: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          import_design_system58.TapTargetSearchGroup,
+          {
+            placeholder: "Search",
+            value: searchOverride ?? query.search,
+            onValueChange: (term) => {
+              setQuery((held) => ({ ...held, search: term, page: 1 }));
+              onSearchChange?.(term);
+            }
+          }
+        )
+      } : {},
       // The host (Spaces) has its own Properties menu: an embedded table draws no Columns button.
       ...embedded ? { columns: false } : {},
       searchPlaceholder: "Search records",
@@ -22901,7 +22972,9 @@ function GridBody({
       sheetExtras,
       tableId,
       noun,
-      embedded
+      embedded,
+      searchOverride,
+      onSearchChange
     ]
   );
   const labelOfField = (0, import_react113.useCallback)(
@@ -23107,7 +23180,7 @@ function GridBody({
                   pageSize,
                   query: tableQuery,
                   ...valueFacets ? { facets: valueFacets, filterUi: VALUE_FILTER_UI } : {},
-                  ...classicInCard ? { hidePagination: true } : {},
+                  ...classicInCard || embeddedMore ? { hidePagination: true } : {},
                   ...embedded ? { appearance: "embedded" } : {},
                   tableClassName: (0, import_design_system58.cn)(
                     !look.wrap && "[&_tbody_td]:max-w-[28rem] [&_tbody_td]:overflow-hidden [&_tbody_td]:text-ellipsis [&_tbody_td]:whitespace-nowrap! [&_tbody_td_*]:whitespace-nowrap!",
@@ -23212,7 +23285,15 @@ function GridBody({
                 onShowMore: () => setCardExtraRows((extra) => extra + pageSize)
               }
             ) : null
-          ) : storePaged || embedded ? null : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          ) : embeddedMore ? typeof records.data?.total === "number" && records.data.total > pageRows.length ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            import_data_table10.MatrxTableCardShowMore,
+            {
+              shown: pageRows.length,
+              total: records.data.total,
+              busy: appending,
+              onShowMore: () => void showMoreRows()
+            }
+          ) : null : storePaged || embedded ? null : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             Pager,
             {
               page,
@@ -23371,6 +23452,8 @@ function useEntitySource(token, options = {}) {
   const client = (0, import_react116.useRecordsClient)();
   const limit = options.limit ?? 50;
   const [tick, setTick] = (0, import_react115.useState)(0);
+  const held = (0, import_react115.useRef)(0);
+  const [loadingMore, setLoadingMore] = (0, import_react115.useState)(false);
   const [state, setState] = (0, import_react115.useState)({
     label: null,
     columns: [],
@@ -23383,7 +23466,7 @@ function useEntitySource(token, options = {}) {
   (0, import_react115.useEffect)(() => {
     let cancelled = false;
     const source = { kind: "entity", token };
-    void Promise.all([client.drillDescribe({ source }), client.drillRows({ source, limit })]).then(
+    void Promise.all([client.drillDescribe({ source }), client.drillRows({ source, limit: Math.max(limit, held.current) })]).then(
       ([def, page]) => {
         if (cancelled) return;
         if (!def.ok) return setState((s) => ({ ...s, loading: false, error: refusalSentence(def.error) || "This table could not be read." }));
@@ -23391,6 +23474,7 @@ function useEntitySource(token, options = {}) {
         const api = def.data.api;
         const shown4 = new Set(page.data.columns instanceof Array ? page.data.columns.filter((c) => typeof c === "string") : []);
         const columns = (api?.columns ?? []).filter((c) => c.api_name !== "id" && (shown4.size === 0 || shown4.has(c.api_name) || shown4.has(c.lookup?.via ?? "")));
+        held.current = (page.data.rows ?? []).length;
         setState({
           label: api?.label ?? def.data.label ?? token,
           columns,
@@ -23434,7 +23518,22 @@ function useEntitySource(token, options = {}) {
     },
     [client, token]
   );
-  return { ...state, write, create, reload };
+  const loadMore = (0, import_react115.useCallback)(async () => {
+    if (loadingMore) return;
+    setLoadingMore(true);
+    const source = { kind: "entity", token };
+    const next = await client.drillRows({ source, limit, offset: held.current });
+    setLoadingMore(false);
+    if (!next.ok) return;
+    const more = next.data.rows ?? [];
+    held.current += more.length;
+    setState((s) => {
+      const seen = new Set(s.rows.map((r) => r.id));
+      return { ...s, rows: [...s.rows, ...more.filter((r) => !seen.has(r.id))] };
+    });
+  }, [client, token, limit, loadingMore]);
+  const hasMore = !state.loading && state.total > state.rows.length;
+  return { ...state, write, create, reload, loadMore, hasMore, loadingMore };
 }
 function entityValueText(column, v) {
   if (v === null || v === void 0 || v === "") return "";
@@ -23464,7 +23563,7 @@ function entityTableColumns(columns) {
     ...c.type === "choice" && c.choices ? { filter: "select", filterOptions: c.choices.map((w) => ({ value: w, label: w })) } : {}
   }));
 }
-function EntityGrid({ entity, pageSize, drill }) {
+function EntityGrid({ entity, pageSize, drill, embedded }) {
   const columns = (0, import_react115.useMemo)(() => entityTableColumns(entity.columns), [entity.columns]);
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     import_data_table11.MatrxDataTable,
@@ -23474,7 +23573,8 @@ function EntityGrid({ entity, pageSize, drill }) {
       getRowId: (row) => String(row.id),
       isLoading: entity.loading,
       ...pageSize ? { pageSize } : {},
-      ...drill ? { drill } : {}
+      ...drill ? { drill } : {},
+      ...embedded ? { appearance: "embedded", hidePagination: true } : {}
     }
   );
 }
@@ -31527,10 +31627,12 @@ function ViewSwitcher({
   footer,
   embedded,
   sortOverride,
+  searchOverride,
+  onSearchChange,
   newRowLabel,
   className
 }) {
-  const pageSize = pageSizeAsked ?? (embedded ? 50 : 200);
+  const pageSize = pageSizeAsked ?? (embedded ? EMBEDDED_PAGE_SIZE : 200);
   const toolbarSlot = useTableToolbarSlot();
   const [layout, setLayout] = (0, import_react178.useState)(view.layout);
   const hostLayouts = useRecordsUi().layouts ?? [];
@@ -31592,6 +31694,8 @@ function ViewSwitcher({
         ...footer ? { footer } : {},
         ...embedded ? { embedded } : {},
         ...sortOverride !== void 0 ? { sortOverride } : {},
+        ...searchOverride !== void 0 ? { searchOverride } : {},
+        ...onSearchChange ? { onSearchChange } : {},
         ...newRowLabel ? { newRowLabel } : {},
         ...filter ? { filter } : {},
         ...onClearFilter ? { onClearFilter } : {},
@@ -45899,22 +46003,22 @@ function RailFrame({
   return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("aside", { "data-rail-column": "", className: "w-[26rem] shrink-0 overflow-y-auto rounded-md border p-3", children });
 }
 function filterInWords(filter, fields) {
-  const nameOf = (key) => {
+  const nameOf2 = (key) => {
     const field2 = fields.find((f) => f.key === key);
     return field2 ? fieldName(field2) : (0, import_text_case17.humanizeIdentifier)(key);
   };
   const parts = Object.keys(filter).map((key) => {
     const value = filter[key];
-    if (value === null || value === void 0) return `${nameOf(key)} is not filled in`;
+    if (value === null || value === void 0) return `${nameOf2(key)} is not filled in`;
     if (typeof value === "object") {
       const from = (value.from ?? "").toString().trim();
       const to = (value.to ?? "").toString().trim();
-      if (from !== "" && to !== "") return `${nameOf(key)} from ${from} up to ${to}`;
-      if (from !== "") return `${nameOf(key)} from ${from} onwards`;
-      if (to !== "") return `${nameOf(key)} up to ${to}`;
-      return `${nameOf(key)} in a period nobody named`;
+      if (from !== "" && to !== "") return `${nameOf2(key)} from ${from} up to ${to}`;
+      if (from !== "") return `${nameOf2(key)} from ${from} onwards`;
+      if (to !== "") return `${nameOf2(key)} up to ${to}`;
+      return `${nameOf2(key)} in a period nobody named`;
     }
-    return `${nameOf(key)} is ${String(value)}`;
+    return `${nameOf2(key)} is ${String(value)}`;
   });
   if (parts.length === 0) return "";
   if (parts.length === 1) return parts[0];
@@ -46114,6 +46218,8 @@ function TablePage({
   tableId,
   presentation: pagePresentation2 = "page",
   newRowLabel,
+  searchOverride,
+  onSearchChange,
   pageSize: pageSizeAsked,
   seedViews,
   onLeave,
@@ -46207,7 +46313,7 @@ function TablePage({
   const face = tableOpening(view, hostLayouts.map((h) => h.id));
   const designated = face.kind === "designated";
   const embedded = pagePresentation2 === "embedded";
-  const pageSize = pageSizeAsked ?? (embedded ? 50 : 100);
+  const pageSize = pageSizeAsked ?? (embedded ? EMBEDDED_PAGE_SIZE : 100);
   const chooserInline = !embedded && !designated && !phone && toolbarFold2 < 2;
   const chooserCompact = !embedded && !designated && !phone && toolbarFold2 >= 2;
   const controlsInSheet = phone && !designated;
@@ -46998,6 +47104,8 @@ function TablePage({
                 chooser: false,
                 ...embedded ? { embedded } : {},
                 ...newRowLabel ? { newRowLabel } : {},
+                ...searchOverride !== void 0 ? { searchOverride } : {},
+                ...onSearchChange ? { onSearchChange } : {},
                 footer,
                 openExport: () => setRail("export"),
                 view: {
@@ -47160,6 +47268,7 @@ function usePublicReadOnly(client, organizationId, tableId, table, rights) {
 }
 
 // src/entityViews.tsx
+var import_data_table22 = require("@ai-matrx/design-system/data-table");
 var import_react267 = require("react");
 var import_design_system138 = require("@ai-matrx/design-system");
 var import_react268 = require("@ai-matrx/records/react");
@@ -47303,7 +47412,7 @@ function EntityChartBlock({ source, kind, by, measure, title, where, organizatio
 function EntityTablePage({
   source,
   presentation = "page",
-  pageSize = 100,
+  pageSize = presentation === "embedded" ? EMBEDDED_PAGE_SIZE : 100,
   layout: opened = "grid",
   onLayoutChange,
   groupBy,
@@ -47387,7 +47496,18 @@ function EntityTablePage({
       ] })
     ] }) : null,
     addRefused ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_design_system138.ErrorBox, { className: "rounded border border-destructive/40 px-1.5 py-1 text-xs text-destructive", message: addRefused, operation: "Add a row", origin: "records-ui/entityViews" }) : null,
-    entity.error ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "px-1 py-3 text-xs text-muted-foreground", children: `This table could not be read: ${entity.error}` }) : layout === "board" && boardable ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(EntityBoard, { entity, groupBy, onOpenRecord }) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(EntityGrid, { entity, pageSize, ...drill ? { drill } : {} })
+    entity.error ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "px-1 py-3 text-xs text-muted-foreground", children: `This table could not be read: ${entity.error}` }) : layout === "board" && boardable ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(EntityBoard, { entity, groupBy, onOpenRecord }) : /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(import_jsx_runtime153.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(EntityGrid, { entity, pageSize, embedded: presentation === "embedded", ...drill ? { drill } : {} }),
+      presentation === "embedded" && entity.hasMore ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+        import_data_table22.MatrxTableCardShowMore,
+        {
+          shown: entity.rows.length,
+          total: entity.total,
+          busy: entity.loadingMore,
+          onShowMore: () => void entity.loadMore()
+        }
+      ) : null
+    ] })
   ] });
 }