@ai-matrx/records-ui 0.101.23 → 0.101.25

package/dist/index.d.cts

@@ -3921,7 +3921,7 @@ declare function useViewRecords(view: SavedViewSpec, pageSize?: number, filter?:
      */
     membership: string;
 };
-declare function ViewSwitcher({ view, onLayoutChange, onViewChange, onOpenRecord, openRecordId, onCloseRecord, onMoved, onNewRecordForm, onAskWhoChanged, pageSize, titleField, filter, onClearFilter, hostLayout, onHostLayoutChange, chooser, openExport, viewId, onOrderPlaced, footer, embedded, sortOverride, newRowLabel, className, }: ViewSwitcherProps): react.JSX.Element;
+declare function ViewSwitcher({ view, onLayoutChange, onViewChange, onOpenRecord, openRecordId, onCloseRecord, onMoved, onNewRecordForm, onAskWhoChanged, pageSize: pageSizeAsked, titleField, filter, onClearFilter, hostLayout, onHostLayoutChange, chooser, openExport, viewId, onOrderPlaced, footer, embedded, sortOverride, newRowLabel, className, }: ViewSwitcherProps): react.JSX.Element;
 
 type CalendarMode = "month" | "week" | "day" | "list";
 interface CalendarViewProps {

package/dist/index.d.ts

@@ -3921,7 +3921,7 @@ declare function useViewRecords(view: SavedViewSpec, pageSize?: number, filter?:
      */
     membership: string;
 };
-declare function ViewSwitcher({ view, onLayoutChange, onViewChange, onOpenRecord, openRecordId, onCloseRecord, onMoved, onNewRecordForm, onAskWhoChanged, pageSize, titleField, filter, onClearFilter, hostLayout, onHostLayoutChange, chooser, openExport, viewId, onOrderPlaced, footer, embedded, sortOverride, newRowLabel, className, }: ViewSwitcherProps): react.JSX.Element;
+declare function ViewSwitcher({ view, onLayoutChange, onViewChange, onOpenRecord, openRecordId, onCloseRecord, onMoved, onNewRecordForm, onAskWhoChanged, pageSize: pageSizeAsked, titleField, filter, onClearFilter, hostLayout, onHostLayoutChange, chooser, openExport, viewId, onOrderPlaced, footer, embedded, sortOverride, newRowLabel, className, }: ViewSwitcherProps): react.JSX.Element;
 
 type CalendarMode = "month" | "week" | "day" | "list";
 interface CalendarViewProps {

package/dist/index.js

@@ -3137,7 +3137,7 @@ function Chips({
 
 // src/presentation.ts
 import {
-  STYLE_COLORS as STYLE_COLORS2,
+  COLOR_ROTATION,
   parseTableStyle,
   tableStyleIsEmpty
 } from "@ai-matrx/design-system/data-table";
@@ -3387,7 +3387,7 @@ var colorFromTheValue = (_fieldKey, value) => {
   for (let i = 0; i < text.length; i += 1) {
     hash = hash * 31 + text.charCodeAt(i) >>> 0;
   }
-  return STYLE_COLORS2[hash % STYLE_COLORS2.length];
+  return COLOR_ROTATION[hash % COLOR_ROTATION.length];
 };
 function styleFromDecorations(decorations, fields) {
   if (!decorations) return { version: 1 };
@@ -6070,6 +6070,14 @@ function workedOutErrorFor(document2, key) {
   if (said && typeof said === "object" && typeof said.says === "string") return String(said.says).trim() || null;
   return null;
 }
+function cellMarkSentence(field2, document2, value) {
+  if (value === null || value === void 0) {
+    const failed = workedOutErrorFor(document2, field2.key);
+    if (failed) return failed;
+  }
+  const kept = keptAsideFor(document2, field2.key);
+  return kept ? keptAsideReason(field2, kept) : null;
+}
 var WORKED_OUT_ERROR_WORD = "#ERROR";
 function WorkedOutError({ field: field2, sentence: sentence2 }) {
   return /* @__PURE__ */ jsx25(
@@ -7014,6 +7022,7 @@ function GridCell({
     }
     if (wasActive.current && opensAsAList(field2, hostTakesFiles(ui))) openThisCell(event);
   };
+  const cellMark = cellMarkSentence(field2, row.document, value);
   return (
     // BOTH MARKERS, ON PURPOSE. `data-matrx-cell-control` is the data table's
     // opt-out from whole-row click, so opening a cell never also opens the
@@ -7034,7 +7043,7 @@ function GridCell({
               {
                 role: editable ? "button" : void 0,
                 "aria-label": editable ? `Edit ${fieldName(field2)}` : void 0,
-                title: editable ? `${fieldName(field2)} \u2014 double-click or press Enter to edit` : fieldIsEditable(field2) ? (
+                title: cellMark ? cellMark : editable ? `${fieldName(field2)} \u2014 double-click or press Enter to edit` : fieldIsEditable(field2) ? (
                   // NOT A DEAD CONTROL AND NOT A SILENT ONE: the cell is plain
                   // text, and hovering it says exactly why, in the level's own
                   // words. The editor was never offered, so nothing is refused
@@ -15328,33 +15337,55 @@ function columnForField(field2, editing, mayWriteRow, whyNotRow, look, onAskWhoC
     ...{ title: fieldTypeLabel(field2) }
   };
 }
-var TYPE_GLYPH = {
-  text: "Aa",
-  longtext: "\xB6",
-  number: "#",
-  currency: "$",
-  percent: "%",
-  date: "\u25A6",
-  datetime: "\u25A6",
-  checkbox: "\u2713",
-  select: "\u25BE",
-  multiselect: "\u25BE",
-  choice: "\u25BE",
-  relation: "\u2197",
-  entity_reference: "\u2197",
-  attachment: "\u2398",
-  email: "@",
-  url: "\u2197",
-  phone: "\u2706",
-  formula: "\u0192",
-  lookup: "\u0192",
-  rollup: "\u0192"
+var LINK2 = [["path", { d: "M7 7h10v10" }], ["path", { d: "M7 17 17 7" }]];
+var FORMULA = [["path", { d: "M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2" }]];
+var TYPE_ICON = {
+  text: [["path", { d: "M12 4v16" }], ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }], ["path", { d: "M9 20h6" }]],
+  long_text: [["path", { d: "M21 5H3" }], ["path", { d: "M15 12H3" }], ["path", { d: "M17 19H3" }]],
+  number: [["line", { x1: 4, x2: 20, y1: 9, y2: 9 }], ["line", { x1: 4, x2: 20, y1: 15, y2: 15 }], ["line", { x1: 10, x2: 8, y1: 3, y2: 21 }], ["line", { x1: 16, x2: 14, y1: 3, y2: 21 }]],
+  currency: [["line", { x1: 12, x2: 12, y1: 2, y2: 22 }], ["path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" }]],
+  percent: [["line", { x1: 19, x2: 5, y1: 5, y2: 19 }], ["circle", { cx: 6.5, cy: 6.5, r: 2.5 }], ["circle", { cx: 17.5, cy: 17.5, r: 2.5 }]],
+  datetime: [["path", { d: "M8 2v3" }], ["path", { d: "M16 2v3" }], ["rect", { x: 3, y: 3, width: 18, height: 18, rx: 2 }], ["path", { d: "M3 9h18" }]],
+  checkbox: [["rect", { width: 18, height: 18, x: 3, y: 3, rx: 2 }], ["path", { d: "m16 9-5.5 5.5L8 12" }]],
+  select: [["circle", { cx: 12, cy: 12, r: 10 }], ["path", { d: "m16 10-4 4-4-4" }]],
+  multi_select: [["path", { d: "M3 5h.01" }], ["path", { d: "M3 12h.01" }], ["path", { d: "M3 19h.01" }], ["path", { d: "M8 5h13" }], ["path", { d: "M8 12h13" }], ["path", { d: "M8 19h13" }]],
+  member: [["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { cx: 12, cy: 7, r: 4 }]],
+  relation: LINK2,
+  entity_reference: LINK2,
+  attachment: [["path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }]],
+  email: [["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }], ["rect", { x: 2, y: 4, width: 20, height: 16, rx: 2 }]],
+  url: [["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }], ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" }]],
+  phone: [["path", { d: "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" }]],
+  formula: FORMULA,
+  lookup: FORMULA,
+  rollup: FORMULA,
+  json: [["path", { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" }], ["path", { d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" }]]
 };
 function withTypeMark(field2, header) {
-  const kind = String(editorKindFor(field2));
-  const glyph = TYPE_GLYPH[kind] ?? "\xB7";
-  return /* @__PURE__ */ jsxs47("span", { className: "inline-flex min-w-0 items-center gap-1", "data-records-type-mark": kind, children: [
-    /* @__PURE__ */ jsx52("span", { "aria-hidden": "true", className: "shrink-0 text-[10px] font-normal text-muted-foreground", children: glyph }),
+  const kind = editorKindFor(field2);
+  const parts = TYPE_ICON[kind] ?? TYPE_ICON.text;
+  return /* @__PURE__ */ jsxs47("span", { className: "inline-flex min-w-0 items-center gap-1.5", "data-records-type-mark": kind, children: [
+    /* @__PURE__ */ jsx52(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: 14,
+        height: 14,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        className: "shrink-0 text-muted-foreground",
+        "data-records-type-icon": kind,
+        children: parts.map(([tag, attrs], i) => {
+          const El = tag;
+          return /* @__PURE__ */ jsx52(El, { ...attrs }, i);
+        })
+      }
+    ),
     header
   ] });
 }
@@ -22385,7 +22416,7 @@ function GridBody({
         ) : null,
         viewId && viewOrder?.onPlaced && hasSeveralRows ? /* @__PURE__ */ jsx68(Button42, { size: "sm", variant: "ghost", onClick: () => setReordering(true), "data-records-reorder-open": "", children: "Reorder" }) : null,
         !readOnly && rights.structure && onAddField ? /* @__PURE__ */ jsx68(AddFieldButton, { onClick: onAddField }) : null,
-        /* @__PURE__ */ jsx68(
+        embedded ? null : /* @__PURE__ */ jsx68(
           GridLayoutMenu,
           {
             look,
@@ -22522,7 +22553,8 @@ function GridBody({
       phoneSheetTools,
       sheetExtras,
       tableId,
-      noun
+      noun,
+      embedded
     ]
   );
   const labelOfField = useCallback25(
@@ -22729,6 +22761,7 @@ function GridBody({
                   query: tableQuery,
                   ...valueFacets ? { facets: valueFacets, filterUi: VALUE_FILTER_UI } : {},
                   ...classicInCard ? { hidePagination: true } : {},
+                  ...embedded ? { appearance: "embedded" } : {},
                   tableClassName: cn34(
                     !look.wrap && "[&_tbody_td]:max-w-[28rem] [&_tbody_td]:overflow-hidden [&_tbody_td]:text-ellipsis [&_tbody_td]:whitespace-nowrap! [&_tbody_td_*]:whitespace-nowrap!",
                     look.fit === "scroll" && "sm:[&>table]:w-max! sm:[&>table]:max-w-none! sm:[&>table]:min-w-full!"
@@ -23053,6 +23086,13 @@ function useEntitySource(token, options = {}) {
   );
   return { ...state, write, create, reload };
 }
+function entityValueText(column, v) {
+  if (v === null || v === void 0 || v === "") return "";
+  if (typeof v === "number") return v.toLocaleString();
+  if (column.type !== "date" && column.type !== "datetime" && column.type !== "timestamp") return String(v);
+  const kind = column.type === "date" ? "date" : "datetime";
+  return dateText({ type: "range", config: { kind }, format: null }, v) ?? String(v);
+}
 var NAME_KEYS = ["name", "display_name", "title", "subject"];
 function entityNameColumn(columns) {
   for (const key of NAME_KEYS) {
@@ -23068,9 +23108,7 @@ function entityTableColumns(columns) {
     label: c.name,
     accessorFn: (row) => row[c.api_name] ?? null,
     cell: (row) => {
-      const v = row[c.api_name];
-      if (v === null || v === void 0 || v === "") return "";
-      return typeof v === "number" ? v.toLocaleString() : String(v);
+      return entityValueText(c, row[c.api_name]);
     },
     sortable: !c.lookup,
     ...c.type === "choice" && c.choices ? { filter: "select", filterOptions: c.choices.map((w) => ({ value: w, label: w })) } : {}
@@ -31213,7 +31251,7 @@ function ViewSwitcher({
   onMoved,
   onNewRecordForm,
   onAskWhoChanged,
-  pageSize = 200,
+  pageSize: pageSizeAsked,
   titleField = null,
   filter,
   onClearFilter,
@@ -31229,6 +31267,7 @@ function ViewSwitcher({
   newRowLabel,
   className
 }) {
+  const pageSize = pageSizeAsked ?? (embedded ? 50 : 200);
   const toolbarSlot = useTableToolbarSlot();
   const [layout, setLayout] = useState89(view.layout);
   const hostLayouts = useRecordsUi().layouts ?? [];
@@ -31249,7 +31288,7 @@ function ViewSwitcher({
     onViewChange?.(patch);
   };
   return /* @__PURE__ */ jsxs94("div", { className: cn53("flex min-h-0 flex-col gap-2", footer === "sticky" && "flex-1", className), children: [
-    chooser ? /* @__PURE__ */ jsxs94("div", { className: "flex items-center gap-2", children: [
+    chooser && !embedded ? /* @__PURE__ */ jsxs94("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx105("span", { className: "truncate text-sm font-medium", children: view.name }),
       /* @__PURE__ */ jsxs94("div", { className: "ml-auto flex items-center gap-0.5", role: "group", "aria-label": "Layout", children: [
         VIEW_LAYOUTS.map((option) => /* @__PURE__ */ jsx105(
@@ -45923,7 +45962,7 @@ function TablePage({
   tableId,
   presentation: pagePresentation2 = "page",
   newRowLabel,
-  pageSize = 100,
+  pageSize: pageSizeAsked,
   seedViews,
   onLeave,
   leaveLabel = "Back to your tables",
@@ -46015,6 +46054,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 chooserInline = !embedded && !designated && !phone && toolbarFold2 < 2;
   const chooserCompact = !embedded && !designated && !phone && toolbarFold2 >= 2;
   const controlsInSheet = phone && !designated;
@@ -47017,7 +47057,7 @@ function EntityBoard({ entity, groupBy, cardFields, onOpenRecord, className }) {
               "data-records-entity-card": row.id,
               children: [
                 onOpenRecord ? /* @__PURE__ */ jsx153("button", { type: "button", className: "truncate text-left font-medium hover:underline", onClick: () => onOpenRecord(row.id), children: shown3(title ? row[title.api_name] : row.id) || "Untitled" }) : /* @__PURE__ */ jsx153("span", { className: "truncate font-medium", children: shown3(title ? row[title.api_name] : row.id) || "Untitled" }),
-                extra.map((c) => shown3(row[c.api_name]) ? /* @__PURE__ */ jsx153("span", { className: "truncate text-muted-foreground", children: shown3(row[c.api_name]) }, c.api_name) : null)
+                extra.map((c) => entityValueText(c, row[c.api_name]) ? /* @__PURE__ */ jsx153("span", { className: "truncate text-muted-foreground", children: entityValueText(c, row[c.api_name]) }, c.api_name) : null)
               ]
             },
             row.id