@ai-matrx/content-ir-react 0.19.1 → 0.20.0

package/dist/react.cjs

@@ -139,9 +139,10 @@ var import_content_ir = require("@ai-matrx/content-ir");
 
 // directives/item-changes.ts
 var import_uuid = require("@ai-matrx/kit/uuid");
+var import_text_case = require("@ai-matrx/kit/text-case");
 var TARGETING_CLASSES = /* @__PURE__ */ new Set(["update", "delete"]);
 var NOT_A_CHANGE = /* @__PURE__ */ new Set(["__kind", "id"]);
-var CHANGE_VALUE_MAX = 60;
+var CHANGE_VALUE_MAX = 280;
 function itemRecordId(item) {
   const id = item.id;
   if (typeof id === "string" && id.trim()) return id.trim();
@@ -149,18 +150,24 @@ function itemRecordId(item) {
   return null;
 }
 function fieldLabel(key) {
-  const spaced = key.replace(/_/g, " ").trim();
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+  return (0, import_text_case.humanizeIdentifier)(key) || key;
 }
+function directiveFieldLabel(key, titleColumn) {
+  return titleColumn && key === titleColumn ? "Title" : fieldLabel(key);
+}
+var EMPTY_VALUE_WORD = "None";
 function recordFallbackName(nounLabel3, id) {
   const short = (0, import_uuid.isUuidShape)(id) ? id.slice(0, 8) : id.length > 12 ? `${id.slice(0, 12)}\u2026` : id;
   return `${nounLabel3} ${short}`;
 }
-function describeValue(value) {
-  if (value === null || value === void 0) return { value: "cleared", full: "cleared", clears: true };
+var EMPTY = { value: EMPTY_VALUE_WORD, full: EMPTY_VALUE_WORD, clears: true };
+function describeValue(value, word) {
+  if (value === null || value === void 0) return EMPTY;
   if (typeof value === "string") {
     const trimmed = value.trim();
-    if (!trimmed) return { value: "cleared", full: "cleared", clears: true };
+    if (!trimmed) return EMPTY;
+    const named = word?.(trimmed) ?? null;
+    if (named) return { value: named, full: named, clears: false };
     const oneLine = trimmed.replace(/\s+/g, " ");
     const shown = oneLine.length > CHANGE_VALUE_MAX ? `${oneLine.slice(0, CHANGE_VALUE_MAX - 1)}\u2026` : oneLine;
     return { value: shown, full: trimmed, clears: false };
@@ -170,11 +177,11 @@ function describeValue(value) {
   }
   if (Array.isArray(value)) {
     const n2 = value.length;
-    const text2 = n2 === 0 ? "cleared" : `${n2} ${n2 === 1 ? "entry" : "entries"}`;
+    const text2 = n2 === 0 ? EMPTY_VALUE_WORD : `${n2} ${n2 === 1 ? "entry" : "entries"}`;
     return { value: text2, full: safeJson(value), clears: n2 === 0 };
   }
   const n = Object.keys(value).length;
-  const text = n === 0 ? "cleared" : `${n} ${n === 1 ? "field" : "fields"}`;
+  const text = n === 0 ? EMPTY_VALUE_WORD : `${n} ${n === 1 ? "field" : "fields"}`;
   return { value: text, full: safeJson(value), clears: n === 0 };
 }
 function safeJson(value) {
@@ -199,10 +206,12 @@ function itemChanges(item, current, options = {}) {
   const titleColumn = options.titleColumn ?? null;
   for (const [key, raw] of Object.entries(item)) {
     if (NOT_A_CHANGE.has(key)) continue;
-    const label = key === titleColumn ? "Title" : fieldLabel(key);
-    const change = { key, label, ...describeValue(raw) };
+    const label = directiveFieldLabel(key, titleColumn);
+    const valueWord = options.valueWord;
+    const word = key === titleColumn || !valueWord ? void 0 : (v) => valueWord(key, v);
+    const change = { key, label, ...describeValue(raw, word) };
     if (current && Object.prototype.hasOwnProperty.call(current, key)) {
-      change.before = describeValue(current[key]);
+      change.before = describeValue(current[key], word);
       change.same = sameValue(current[key], raw);
     }
     out.push(change);
@@ -858,6 +867,14 @@ function getDirectiveRenderer(directive) {
 var import_react6 = require("react");
 var import_content_ir5 = require("@ai-matrx/content-ir");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function directiveValueWord(host, noun) {
+  const valueLabel = host.valueLabel;
+  return valueLabel ? (field, value) => valueLabel({ noun, field, value }) : null;
+}
+function omitKey(item, key) {
+  const { [key]: _omitted, ...rest } = item;
+  return rest;
+}
 var ROWS_BEFORE_FOLD = 3;
 function ItemRow({
   directive,
@@ -874,16 +891,21 @@ function ItemRow({
   const titleColumn = (0, import_content_ir5.nounTitleColumn)(directive.noun, host.nouns);
   const title = (0, import_content_ir5.itemTitle)(item, titleColumn, index, total);
   const subtitle = (0, import_content_ir5.itemSubtitle)(item);
-  const facts = (0, import_content_ir5.itemFacts)(item);
+  const valueWord = directiveValueWord(host, directive.noun);
+  const facts = (0, import_content_ir5.itemFacts)(titleColumn ? omitKey(item, titleColumn) : item).map((fact) => ({
+    ...fact,
+    label: directiveFieldLabel(fact.key, titleColumn),
+    value: valueWord?.(fact.key, fact.value) ?? fact.value
+  }));
   const kind = host.itemKind?.(directive.slug) ?? null;
   const display = (0, import_content_ir5.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   const openItem = host.openItem;
   const body = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 shrink-0 truncate font-medium text-foreground", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate text-[11px] text-muted-foreground", children: [
-      fact.value,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate text-[11px] text-muted-foreground", "data-item-fact": fact.key, children: [
+      fact.label,
       " ",
-      fact.label
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-foreground/80", children: fact.value })
     ] }, fact.key)) }),
     subtitle && facts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hidden truncate text-[11px] text-muted-foreground sm:inline", children: subtitle }) : null,
     openItem ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MaximizeIcon, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" }) : null
@@ -918,35 +940,36 @@ function DirectiveChangeList({
   if (changes.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: `text-[11px] text-muted-foreground${className ? ` ${className}` : ""}`, children: "Sets no fields \u2014 nothing would change." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: `space-y-0.5${className ? ` ${className}` : ""}`, "data-directive-changes": "", children: changes.map((change) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: `@container space-y-1${className ? ` ${className}` : ""}`, "data-directive-changes": "", children: changes.map((change) => {
     const before = change.before && !change.same ? change.before : null;
-    const was = before ? before.clears ? "empty" : before.value : null;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "li",
       {
-        className: "flex min-w-0 items-baseline gap-1.5 text-[11px]",
-        title: before ? `${change.label}: ${before.clears ? "empty" : before.full} \u2192 ${change.full}` : `${change.label} \u2192 ${change.full}`,
+        className: "flex min-w-0 flex-col text-[11px] @xs:flex-row @xs:flex-wrap @xs:items-baseline @xs:gap-x-1.5",
+        title: before ? `${change.label}: ${before.full} \u2192 ${change.full}` : `${change.label} \u2192 ${change.full}`,
         "data-change-key": change.key,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-muted-foreground", children: change.label }),
-          was !== null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          before ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "span",
             {
-              className: "min-w-0 max-w-[40%] shrink truncate text-muted-foreground line-through",
+              className: "min-w-0 text-muted-foreground line-through [overflow-wrap:anywhere]",
               "data-change-before": "",
-              children: was
+              children: before.value
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "span",
-            {
-              className: `min-w-0 truncate ${change.clears ? "italic text-muted-foreground" : "text-foreground"}`,
-              "data-change-after": "",
-              children: change.value
-            }
-          ),
-          change.same ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: `min-w-0 [overflow-wrap:anywhere] ${change.clears ? "italic text-muted-foreground" : "text-foreground"}`,
+                "data-change-after": "",
+                children: change.value
+              }
+            ),
+            change.same ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
+          ] })
         ]
       },
       change.key
@@ -969,7 +992,10 @@ function TargetRow({
     readsLive ? { noun: directive.noun, id: recordId } : null
   );
   const compareTo = phase.phase === "applied" ? phase.before?.[index] ?? null : readsLive ? live.values : null;
-  const changes = isUpdate ? itemChanges(item, compareTo, { titleColumn: (0, import_content_ir5.nounTitleColumn)(directive.noun, host.nouns) }) : [];
+  const changes = isUpdate ? itemChanges(item, compareTo, {
+    titleColumn: (0, import_content_ir5.nounTitleColumn)(directive.noun, host.nouns),
+    valueWord: directiveValueWord(host, directive.noun)
+  }) : [];
   const name = host.renderRecord ? host.renderRecord({ noun: directive.noun, id: recordId, fallback, context: "row" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate font-medium text-foreground", children: fallback });
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [