@ai-matrx/records-ui 0.101.27 → 0.101.29

package/dist/index.d.cts

@@ -3369,9 +3369,14 @@ declare function choiceNudgeOf(client: RecordsClient): Promise<ChoiceNudge>;
  */
 declare function useChoiceNudge(enabled?: boolean): ChoiceNudge | null;
 
+interface EmbeddedLook {
+    blankEmpty: boolean;
+    choiceDot: boolean;
+}
+
 /** The envelope for one key, when the document carries one. */
 declare function envelopeFor(document: RecordDocument | undefined, key: string): ValueEnvelope | undefined;
-declare function renderValue(field: Field, value: unknown, document?: RecordDocument, labels?: LabelLookup, stillWaitingFor?: string | null): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react.JSX.Element | null;
+declare function renderValue(field: Field, value: unknown, document?: RecordDocument, labels?: LabelLookup, stillWaitingFor?: string | null, look?: EmbeddedLook | null): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react.JSX.Element | null;
 /**
  * The text of one scalar, with the Field's UNIT and FORMAT applied — FLD-N-1
  * says both change the MEANING — and with an id resolved to the NAME of the
@@ -3441,7 +3446,7 @@ declare function RecordValue({ field, value, document, format, withheld, inCell,
      * unbound, the words as written.
      */
     inCell?: boolean | undefined;
-}): react.JSX.Element;
+}): react.JSX.Element | null;
 /**
  * WHAT ONE CARD SAYS — the kanban's, the calendar's, the gallery's and the pipeline's alike, so
  * no card can read a record differently from another. `field` is the card's title column

package/dist/index.d.ts

@@ -3369,9 +3369,14 @@ declare function choiceNudgeOf(client: RecordsClient): Promise<ChoiceNudge>;
  */
 declare function useChoiceNudge(enabled?: boolean): ChoiceNudge | null;
 
+interface EmbeddedLook {
+    blankEmpty: boolean;
+    choiceDot: boolean;
+}
+
 /** The envelope for one key, when the document carries one. */
 declare function envelopeFor(document: RecordDocument | undefined, key: string): ValueEnvelope | undefined;
-declare function renderValue(field: Field, value: unknown, document?: RecordDocument, labels?: LabelLookup, stillWaitingFor?: string | null): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react.JSX.Element | null;
+declare function renderValue(field: Field, value: unknown, document?: RecordDocument, labels?: LabelLookup, stillWaitingFor?: string | null, look?: EmbeddedLook | null): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react.JSX.Element | null;
 /**
  * The text of one scalar, with the Field's UNIT and FORMAT applied — FLD-N-1
  * says both change the MEANING — and with an id resolved to the NAME of the
@@ -3441,7 +3446,7 @@ declare function RecordValue({ field, value, document, format, withheld, inCell,
      * unbound, the words as written.
      */
     inCell?: boolean | undefined;
-}): react.JSX.Element;
+}): react.JSX.Element | null;
 /**
  * WHAT ONE CARD SAYS — the kanban's, the calendar's, the gallery's and the pipeline's alike, so
  * no card can read a record differently from another. `field` is the card's title column

package/dist/index.js

@@ -5119,7 +5119,7 @@ function useWhoChanged(fieldKey, recordId) {
 }
 
 // src/values.tsx
-import { formatColumnValue } from "@ai-matrx/design-system/data-table";
+import { SWATCH_CLASS, formatColumnValue } from "@ai-matrx/design-system/data-table";
 import { formatFieldValue as formatFieldValue3 } from "@ai-matrx/design-system/field-formats";
 
 // src/withheld.tsx
@@ -5155,6 +5155,25 @@ function WithheldValue({ field: field2, notice }) {
 // src/values.tsx
 import { Badge as Badge5, cn as cn17 } from "@ai-matrx/design-system";
 
+// src/embeddedLook.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var EMBEDDED_LOOK = { blankEmpty: true, choiceDot: true };
+var EmbeddedLookContext = createContext4(null);
+var EmbeddedLookProvider = EmbeddedLookContext.Provider;
+function useEmbeddedLook() {
+  return useContext4(EmbeddedLookContext);
+}
+var EMBEDDED_TABLE_CLASS = [
+  "[&_tbody_td]:h-10",
+  "[&_tbody_td]:align-middle!",
+  "[&_tbody_td]:border-r",
+  "[&_tbody_td]:border-border",
+  "[&_tbody_td:last-child]:border-r-0",
+  "[&_thead_th]:border-r",
+  "[&_thead_th]:border-border",
+  "[&_thead_th:last-child]:border-r-0"
+].join(" ");
+
 // src/enumLabels.ts
 function exhaustiveValuesOf() {
   return function(values) {
@@ -6145,7 +6164,7 @@ function SourceArchivedValue({ state }) {
   return /* @__PURE__ */ jsx26("span", { className: "text-xs italic text-muted-foreground", title: sourceArchivedSentence(state), "data-records-source-archived": state.field_id ?? "", children: SOURCE_ARCHIVED_WORDS });
 }
 var ABSENCE_WORDS = ABSENCE_WORD_LABEL;
-function renderValue(field2, value, document2, labels, stillWaitingFor) {
+function renderValue(field2, value, document2, labels, stillWaitingFor, look) {
   const archivedSource = sourceArchivedOf2(value);
   if (archivedSource) return /* @__PURE__ */ jsx26(SourceArchivedValue, { state: archivedSource });
   const envelope = envelopeFor(document2, field2.key);
@@ -6165,6 +6184,7 @@ function renderValue(field2, value, document2, labels, stillWaitingFor) {
     if (computed?.why) {
       return /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", title: computed.why, "data-records-empty-why": computed.kind, children: "\u2014" });
     }
+    if (look?.blankEmpty) return null;
     return /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", children: "\u2014" });
   }
   if (isSignatureField(field2)) return /* @__PURE__ */ jsx26(SignatureValue, { value, fieldKey: field2.key, document: document2 });
@@ -6180,8 +6200,8 @@ function renderValue(field2, value, document2, labels, stillWaitingFor) {
   if (kv) return /* @__PURE__ */ jsx26(KindValueCell, { kv, where: "cell", title: field2.label });
   const chosen = kind === "select" || kind === "multi_select";
   const chipOf = (item) => {
-    const look = choiceChipLookOf(field2, item, scalarText(field2, item, labels));
-    return { className: look.className, tinted: look.color !== null };
+    const chipLook = choiceChipLookOf(field2, item, scalarText(field2, item, labels));
+    return { className: chipLook.className, tinted: chipLook.color !== null, dot: SWATCH_CLASS[chipLook.color ?? "gray"] };
   };
   if (chosen) {
     const items = Array.isArray(value) ? value : [value];
@@ -6195,6 +6215,7 @@ function renderValue(field2, value, document2, labels, stillWaitingFor) {
           "data-records-choice-chip": "",
           ...chip.tinted ? { "data-records-choice-tint": "" } : {},
           children: [
+            look?.choiceDot ? /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", "data-records-choice-dot": "", className: cn17("mr-1.5 inline-block size-1.5 shrink-0 rounded-full", chip.dot) }) : null,
             statusMark(field2, item, Array.isArray(value) ? void 0 : document2),
             scalarText(field2, item, labels, Array.isArray(value) ? void 0 : stillWaitingFor)
           ]
@@ -6306,6 +6327,7 @@ function RecordValue({
   const ui = useRecordsUi();
   const labels = useRecordLabels(ONE_FIELD_ARRAY_CACHE(field2));
   const stillWaitingFor = useLabelWait(field2);
+  const embeddedLook = useEmbeddedLook();
   if (withheld && (value === null || value === void 0)) return /* @__PURE__ */ jsx26(WithheldValue, { field: field2, notice: withheld });
   if (value === null || value === void 0) {
     const failed = workedOutErrorFor(document2, field2.key);
@@ -6317,7 +6339,7 @@ function RecordValue({
   }
   const archivedSource = sourceArchivedOf2(value);
   if (archivedSource) return /* @__PURE__ */ jsx26(SourceArchivedValue, { state: archivedSource });
-  if (formulaHasNothingToWorkOn(field2, document2)) return /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", children: "\u2014" });
+  if (formulaHasNothingToWorkOn(field2, document2)) return embeddedLook?.blankEmpty ? null : /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", children: "\u2014" });
   if (value !== null && value !== void 0 && value !== "" && !envelopeFor(document2, field2.key)?.absent) {
     const newer = newerKindValue(field2, value, { inCell });
     if (newer !== void 0) return /* @__PURE__ */ jsx26(Fragment6, { children: newer });
@@ -6345,10 +6367,11 @@ function RecordValue({
     }
   }
   const shown4 = format ?? formatForField(field2);
-  const dated = shown4 && (shown4.id === "date" || shown4.id === "datetime") && isDateField(field2) ? dateFormatFor(field2, value) : void 0;
+  const shape = shown4 && (shown4.id === "date" || shown4.id === "datetime") && isDateField(field2) ? dateFormatFor(field2, value) : void 0;
+  const dated = shape ? { ...shape, ...shown4?.options ? { options: shown4.options } : {} } : void 0;
   const formatted = shown4 ? formatColumnValue({ format: dated ?? shown4 }, value) : null;
   if (formatted) return /* @__PURE__ */ jsx26(FormattedValue, { value, format: dated ?? shown4 });
-  return /* @__PURE__ */ jsx26(Fragment6, { children: renderValue(field2, value, document2, labels, stillWaitingFor) });
+  return /* @__PURE__ */ jsx26(Fragment6, { children: renderValue(field2, value, document2, labels, stillWaitingFor, embeddedLook) });
 }
 var ONE_FIELD_ARRAYS = /* @__PURE__ */ new WeakMap();
 function ONE_FIELD_ARRAY_CACHE(field2) {
@@ -8766,7 +8789,7 @@ import {
   SelectValue as SelectValue5,
   cn as cn21
 } from "@ai-matrx/design-system";
-import { STYLE_COLORS as STYLE_COLORS3, STYLE_COLOR_LABELS, SWATCH_CLASS } from "@ai-matrx/design-system/data-table";
+import { STYLE_COLORS as STYLE_COLORS3, STYLE_COLOR_LABELS, SWATCH_CLASS as SWATCH_CLASS2 } from "@ai-matrx/design-system/data-table";
 import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 var rowSeed = 0;
 var nextRow = () => `new-${rowSeed += 1}`;
@@ -8989,7 +9012,7 @@ function ChoiceSwatch({ words: words2, color, onColor }) {
         "data-records-choice-swatch": color ?? "none",
         className: cn21(
           "h-4 w-4 shrink-0 rounded-full",
-          color ? SWATCH_CLASS[color] : "border border-border bg-background"
+          color ? SWATCH_CLASS2[color] : "border border-border bg-background"
         )
       }
     ) }),
@@ -9016,7 +9039,7 @@ function ChoiceSwatch({ words: words2, color, onColor }) {
           title: STYLE_COLOR_LABELS[c],
           "data-records-choice-color": `${words2}:${c}`,
           onClick: () => pick(c),
-          className: cn21("h-5 w-5 rounded-full", SWATCH_CLASS[c], color === c && "ring-2 ring-ring ring-offset-1")
+          className: cn21("h-5 w-5 rounded-full", SWATCH_CLASS2[c], color === c && "ring-2 ring-ring ring-offset-1")
         },
         c
       ))
@@ -13382,6 +13405,14 @@ function asField(f) {
     relation_target: f.relation_target ?? null
   };
 }
+function CustomValue({ field: field2, value }) {
+  const choice = isChoiceField(field2);
+  const index = useChoiceOptions(choice ? [field2] : [], choice ? [field2.key] : []);
+  const options = index.get(field2.key);
+  if (!choice || !options) return renderValue(field2, value);
+  const worded = (v) => optionFor(options, v)?.label ?? v;
+  return renderValue(field2, Array.isArray(value) ? value.map(worded) : worded(value));
+}
 function CustomFieldsSection({
   entityToken,
   recordId,
@@ -13701,7 +13732,7 @@ function CustomFieldsSection({
             setCellValue(values[f.key]);
             setCellKey(f.key);
           },
-          children: isEmptyValue(values[f.key]) ? /* @__PURE__ */ jsx47("span", { className: "text-muted-foreground", children: "\u2014" }) : renderValue(asField(f), values[f.key])
+          children: isEmptyValue(values[f.key]) ? /* @__PURE__ */ jsx47("span", { className: "text-muted-foreground", children: "\u2014" }) : /* @__PURE__ */ jsx47(CustomValue, { field: asField(f), value: values[f.key] })
         }
       ) })
     ] }, f.id)) })
@@ -18409,12 +18440,12 @@ function shapeTextOfNode(node) {
 }
 
 // src/toolbarSlot.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
+import { createContext as createContext5, useContext as useContext5 } from "react";
 import { createPortal } from "react-dom";
 import { Fragment as Fragment18, jsx as jsx58 } from "react/jsx-runtime";
-var TableToolbarSlotContext = createContext4(void 0);
+var TableToolbarSlotContext = createContext5(void 0);
 function useTableToolbarSlot() {
-  return useContext4(TableToolbarSlotContext);
+  return useContext5(TableToolbarSlotContext);
 }
 function InTableToolbar({ children }) {
   const slot = useTableToolbarSlot();
@@ -18422,13 +18453,13 @@ function InTableToolbar({ children }) {
   if (slot === null) return null;
   return createPortal(children, slot);
 }
-var TableToolbarFoldContext = createContext4(0);
+var TableToolbarFoldContext = createContext5(0);
 function useTableToolbarFold() {
-  return useContext4(TableToolbarFoldContext);
+  return useContext5(TableToolbarFoldContext);
 }
-var TableToolbarSheetExtrasContext = createContext4(void 0);
+var TableToolbarSheetExtrasContext = createContext5(void 0);
 function useTableToolbarSheetExtras() {
-  return useContext4(TableToolbarSheetExtrasContext);
+  return useContext5(TableToolbarSheetExtrasContext);
 }
 
 // src/GridLayoutMenu.tsx
@@ -20926,7 +20957,7 @@ function HandOrderDialog({
 }
 
 // src/viewAddress.ts
-import { createContext as createContext5, useContext as useContext5 } from "react";
+import { createContext as createContext6, useContext as useContext6 } from "react";
 var VIEW_ADDRESS_KEYS = ["sort", "cf", "q", "hide", "page"];
 function isViewAddressEmpty(state) {
   if (!state) return true;
@@ -20980,8 +21011,8 @@ function viewAddressFromParams(get) {
 function sameViewAddress(a, b) {
   return JSON.stringify(viewAddressToParams(a)) === JSON.stringify(viewAddressToParams(b));
 }
-var ViewAddressContext = createContext5(null);
-var useViewAddress = () => useContext5(ViewAddressContext);
+var ViewAddressContext = createContext6(null);
+var useViewAddress = () => useContext6(ViewAddressContext);
 
 // src/Grid.tsx
 import { Fragment as Fragment23, jsx as jsx68, jsxs as jsxs61 } from "react/jsx-runtime";
@@ -22358,6 +22389,8 @@ function GridBody({
   const tableToolbar = useMemo35(
     () => ({
       search: !embedded,
+      // The host (Spaces) has its own Properties menu: an embedded table draws no Columns button.
+      ...embedded ? { columns: false } : {},
       searchPlaceholder: "Search records",
       /*
        * A PHONE (tranche 6o): search and the one Tools button sit side by side at the START of
@@ -22745,7 +22778,7 @@ function GridBody({
               "data-records-grid-wrap": look.wrap ? "on" : "off",
               "data-records-grid-fit": look.fit,
               onPasteCapture: takeEmptyTablePaste,
-              children: /* @__PURE__ */ jsx68(
+              children: /* @__PURE__ */ jsx68(EmbeddedLookProvider, { value: embedded ? EMBEDDED_LOOK : null, children: /* @__PURE__ */ jsx68(
                 MatrxDataTable,
                 {
                   ...fills ? { className: "min-h-0 flex-1" } : {},
@@ -22765,7 +22798,8 @@ function GridBody({
                   ...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!"
+                    look.fit === "scroll" && "sm:[&>table]:w-max! sm:[&>table]:max-w-none! sm:[&>table]:min-w-full!",
+                    embedded && EMBEDDED_TABLE_CLASS
                   ),
                   footerRows,
                   ...embedded ? { copy: false } : copyConfig ? { copy: copyConfig } : {},
@@ -22825,7 +22859,7 @@ function GridBody({
                   toolbar: tableToolbar
                 },
                 `records-grid-${tableId}:${openingKey}`
-              )
+              ) })
             }
           ),
           summaries.error ? /* @__PURE__ */ jsx68(RefusalNotice, { error: summaries.error }) : null,
@@ -27933,7 +27967,7 @@ import { Button as Button67, Select as Select16, SelectContent as SelectContent1
 import {
   CHOICE_CHIP_CLASS as CHOICE_CHIP_CLASS4,
   EMPTY_TABLE_STYLE as EMPTY_TABLE_STYLE2,
-  SWATCH_CLASS as SWATCH_CLASS2,
+  SWATCH_CLASS as SWATCH_CLASS3,
   resolveRowColor as resolveRowColor4,
   ROW_TINT_CLASS as ROW_TINT_CLASS3
 } from "@ai-matrx/design-system/data-table";
@@ -31977,7 +32011,7 @@ function Kanban({
                   void move(card, name, to);
                 },
                 children: [
-                  columnColor(name) ? /* @__PURE__ */ jsx105("span", { "aria-hidden": "true", "data-card-accent": columnColor(name), className: cn53("absolute inset-y-0.5 left-0 w-1 rounded", SWATCH_CLASS2[columnColor(name)]) }) : null,
+                  columnColor(name) ? /* @__PURE__ */ jsx105("span", { "aria-hidden": "true", "data-card-accent": columnColor(name), className: cn53("absolute inset-y-0.5 left-0 w-1 rounded", SWATCH_CLASS3[columnColor(name)]) }) : null,
                   /* @__PURE__ */ jsx105(
                     RecordActionMenu,
                     {
@@ -35912,7 +35946,7 @@ import { BasicInput as BasicInput24, Button as Button78, cn as cn66 } from "@ai-
 // src/AccentSwatches.tsx
 import { PORTAL_ACCENTS } from "@ai-matrx/records";
 import { cn as cn64 } from "@ai-matrx/design-system";
-import { STYLE_COLOR_LABELS as STYLE_COLOR_LABELS3, SWATCH_CLASS as SWATCH_CLASS3 } from "@ai-matrx/design-system/data-table";
+import { STYLE_COLOR_LABELS as STYLE_COLOR_LABELS3, SWATCH_CLASS as SWATCH_CLASS4 } from "@ai-matrx/design-system/data-table";
 import { jsx as jsx116, jsxs as jsxs105 } from "react/jsx-runtime";
 function AccentSwatches({ value, onChange, options = PORTAL_ACCENTS, noneLabel = "App colour" }) {
   return /* @__PURE__ */ jsxs105("div", { className: "flex flex-wrap gap-1.5", role: "radiogroup", "aria-label": "Colour", children: [
@@ -35939,7 +35973,7 @@ function AccentSwatches({ value, onChange, options = PORTAL_ACCENTS, noneLabel =
         "aria-label": STYLE_COLOR_LABELS3[c],
         title: STYLE_COLOR_LABELS3[c],
         onClick: () => onChange(c),
-        className: cn64("h-7 w-7 rounded-full border-2", SWATCH_CLASS3[c], value === c ? "border-foreground" : "border-transparent")
+        className: cn64("h-7 w-7 rounded-full border-2", SWATCH_CLASS4[c], value === c ? "border-foreground" : "border-transparent")
       },
       c
     ))
@@ -36931,7 +36965,7 @@ function Invite({ card, onInvited }) {
 
 // src/FormLookFrame.tsx
 import { cn as cn68 } from "@ai-matrx/design-system";
-import { SWATCH_CLASS as SWATCH_CLASS4 } from "@ai-matrx/design-system/data-table";
+import { SWATCH_CLASS as SWATCH_CLASS5 } from "@ai-matrx/design-system/data-table";
 import { jsx as jsx120, jsxs as jsxs109 } from "react/jsx-runtime";
 var ACCENT_PRIMARY = {
   slate: "215 19% 35%",
@@ -36950,15 +36984,15 @@ function safeHref(url) {
   return null;
 }
 function formLookView(style, fallbackName) {
-  const accent = style?.accent && style.accent in SWATCH_CLASS4 ? style.accent : null;
+  const accent = style?.accent && style.accent in SWATCH_CLASS5 ? style.accent : null;
   const https = (u) => typeof u === "string" && /^https:\/\//i.test(u) ? u : null;
   const links = Array.isArray(style?.footer_links) ? style.footer_links : [];
   return {
     name: (style?.display_name ?? "").trim() || fallbackName.trim() || "Form",
     logoUrl: https(style?.logo_url),
     coverUrl: https(style?.cover_url),
-    bandClass: accent ? SWATCH_CLASS4[accent] : null,
-    monogramClass: accent ? `${SWATCH_CLASS4[accent]} text-white` : "bg-primary text-primary-foreground",
+    bandClass: accent ? SWATCH_CLASS5[accent] : null,
+    monogramClass: accent ? `${SWATCH_CLASS5[accent]} text-white` : "bg-primary text-primary-foreground",
     primaryVars: accent && ACCENT_PRIMARY[accent] ? {
       "--primary": ACCENT_PRIMARY[accent],
       "--primary-foreground": "0 0% 100%",