@ai-matrx/records-ui 0.101.23 → 0.101.26

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.101.26
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.101.25..npm/records-ui/v0.101.26 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
+## 0.101.24
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.101.23..npm/records-ui/v0.101.24 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
 ## 0.101.23
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/index.cjs

@@ -3907,7 +3907,7 @@ var colorFromTheValue = (_fieldKey, value) => {
   for (let i = 0; i < text.length; i += 1) {
     hash = hash * 31 + text.charCodeAt(i) >>> 0;
   }
-  return import_data_table2.STYLE_COLORS[hash % import_data_table2.STYLE_COLORS.length];
+  return import_data_table2.COLOR_ROTATION[hash % import_data_table2.COLOR_ROTATION.length];
 };
 function styleFromDecorations(decorations, fields) {
   if (!decorations) return { version: 1 };
@@ -6590,6 +6590,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__ */ (0, import_jsx_runtime25.jsx)(
@@ -7534,6 +7542,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
@@ -7554,7 +7563,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
@@ -15670,33 +15679,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__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "inline-flex min-w-0 items-center gap-1", "data-records-type-mark": kind, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("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__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "inline-flex min-w-0 items-center gap-1.5", "data-records-type-mark": kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "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__ */ (0, import_jsx_runtime52.jsx)(El, { ...attrs }, i);
+        })
+      }
+    ),
     header
   ] });
 }
@@ -22667,7 +22698,7 @@ function GridBody({
         ) : null,
         viewId && viewOrder?.onPlaced && hasSeveralRows ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_design_system58.Button, { size: "sm", variant: "ghost", onClick: () => setReordering(true), "data-records-reorder-open": "", children: "Reorder" }) : null,
         !readOnly && rights.structure && onAddField ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(AddFieldButton, { onClick: onAddField }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        embedded ? null : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           GridLayoutMenu,
           {
             look,
@@ -22804,7 +22835,8 @@ function GridBody({
       phoneSheetTools,
       sheetExtras,
       tableId,
-      noun
+      noun,
+      embedded
     ]
   );
   const labelOfField = (0, import_react112.useCallback)(
@@ -23011,6 +23043,7 @@ function GridBody({
                   query: tableQuery,
                   ...valueFacets ? { facets: valueFacets, filterUi: VALUE_FILTER_UI } : {},
                   ...classicInCard ? { 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!",
                     look.fit === "scroll" && "sm:[&>table]:w-max! sm:[&>table]:max-w-none! sm:[&>table]:min-w-full!"
@@ -23335,6 +23368,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) {
@@ -23350,9 +23390,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 })) } : {}
@@ -31404,7 +31442,7 @@ function ViewSwitcher({
   onMoved,
   onNewRecordForm,
   onAskWhoChanged,
-  pageSize = 200,
+  pageSize: pageSizeAsked,
   titleField = null,
   filter,
   onClearFilter,
@@ -31420,6 +31458,7 @@ function ViewSwitcher({
   newRowLabel,
   className
 }) {
+  const pageSize = pageSizeAsked ?? (embedded ? 50 : 200);
   const toolbarSlot = useTableToolbarSlot();
   const [layout, setLayout] = (0, import_react177.useState)(view.layout);
   const hostLayouts = useRecordsUi().layouts ?? [];
@@ -31440,7 +31479,7 @@ function ViewSwitcher({
     onViewChange?.(patch);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: (0, import_design_system90.cn)("flex min-h-0 flex-col gap-2", footer === "sticky" && "flex-1", className), children: [
-    chooser ? /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex items-center gap-2", children: [
+    chooser && !embedded ? /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "truncate text-sm font-medium", children: view.name }),
       /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "ml-auto flex items-center gap-0.5", role: "group", "aria-label": "Layout", children: [
         VIEW_LAYOUTS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
@@ -45991,7 +46030,7 @@ function TablePage({
   tableId,
   presentation: pagePresentation2 = "page",
   newRowLabel,
-  pageSize = 100,
+  pageSize: pageSizeAsked,
   seedViews,
   onLeave,
   leaveLabel = "Back to your tables",
@@ -46020,6 +46059,7 @@ function TablePage({
   const viewLabels = useRecordLabels(allFields.data ?? void 0);
   const askedInWords = filter ? filterInWords(filter, pageFields.data ?? []) : null;
   const organizationId = (0, import_react265.useRecordsClient)().config.organizationId;
+  const publicReadOnly = usePublicReadOnly(client, organizationId, tableId, table.data, rights);
   const [view, setView] = (0, import_react264.useState)(null);
   const [looks, setLooks] = (0, import_react264.useState)(void 0);
   (0, import_react264.useEffect)(() => {
@@ -46083,6 +46123,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;
@@ -46488,6 +46529,7 @@ function TablePage({
   }, [recordsUi]);
   const openedFromMenu = openedEntry ? { ...openedEntry, label: actions.find((a) => a.id === openedEntry.id)?.label ?? openedEntry.key } : null;
   const pageActions = /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(import_jsx_runtime152.Fragment, { children: [
+    publicReadOnly ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_design_system137.Badge, { variant: "neutral", className: "shrink-0", "data-public-read-only": "", children: PUBLIC_READ_ONLY }, "public-read-only") : null,
     !phone && rights.read && table.data ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
       TableAsk,
       {
@@ -47006,6 +47048,32 @@ function TablePage({
     ] })
   ] }) });
 }
+var PUBLIC_READ_ONLY = "Public \xB7 read only";
+function usePublicReadOnly(client, organizationId, tableId, table, rights) {
+  const readOnly = rights.known && rights.read && !rights.write;
+  const marked = table?.published_to_web;
+  const [isPublic, setIsPublic] = (0, import_react264.useState)(false);
+  (0, import_react264.useEffect)(() => {
+    if (!readOnly || !table) {
+      setIsPublic(false);
+      return;
+    }
+    if (marked !== void 0) {
+      setIsPublic(Boolean(marked));
+      return;
+    }
+    let live = true;
+    void client.tableFacts(organizationId ? { organization_id: organizationId } : {}).then((answered) => {
+      if (!live) return;
+      const fact = answered.ok ? (answered.data ?? []).find((f) => f.table_id === tableId) : void 0;
+      setIsPublic(Boolean(fact && (fact.published_to_web ?? fact.visibility === "public")));
+    });
+    return () => {
+      live = false;
+    };
+  }, [client, organizationId, tableId, readOnly, marked, table]);
+  return readOnly && isPublic;
+}
 
 // src/entityViews.tsx
 var import_react266 = require("react");
@@ -47085,7 +47153,7 @@ function EntityBoard({ entity, groupBy, cardFields, onOpenRecord, className }) {
               "data-records-entity-card": row.id,
               children: [
                 onOpenRecord ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("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__ */ (0, import_jsx_runtime153.jsx)("span", { className: "truncate font-medium", children: shown3(title ? row[title.api_name] : row.id) || "Untitled" }),
-                extra.map((c) => shown3(row[c.api_name]) ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("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__ */ (0, import_jsx_runtime153.jsx)("span", { className: "truncate text-muted-foreground", children: entityValueText(c, row[c.api_name]) }, c.api_name) : null)
               ]
             },
             row.id