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

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.20.0 — 2026-10-02
+
+The G8A review of the action cards (nightly clone). Guard:
+`__tests__/directive-card-g8a.test.tsx` (4 red on 0.19.2).
+
+- **One value, one word.** New host seam `DirectiveHost.valueLabel({ noun, field, value })`
+  — the app's word for a pick-list value, the same word its forms and screens show. The
+  change list words old AND new through it ("Status Inbox → Completed", never
+  "incomplete → completed"); card facts too. New: `DirectiveValueRef`,
+  `DirectiveValueWord`, `ItemChangesOptions.valueWord`, `directiveValueWord(host, noun)`.
+- **An empty value reads "None"** — before and after, card and confirm (was "empty" /
+  "cleared"). `EMPTY_VALUE_WORD`.
+- **A value someone must judge is never cut.** The change list wraps every value (no CSS
+  truncation) and, below a 20rem container, stacks label / old / new one per line
+  (container query — a narrow panel stacks too). `CHANGE_VALUE_MAX` 60 → 280: only prose
+  longer than that is shortened.
+- **One field-label rule.** `directiveFieldLabel(key, titleColumn)` — the title column reads
+  "Title", every other field through THE humanizer — for change rows AND card facts. A
+  create card no longer repeats its title column as a fact ("workbook name"). Facts read
+  "Label value".
+
+### Consumer action
+
+- Pass `valueLabel` on your `DirectiveHost` and the same `valueWord` to any `itemChanges` you
+  call yourself (a host confirm), so card and confirm say the same words.
+
+## 0.19.2
+### Directive field labels use THE humanizer
+
+- `fieldLabel` (directive item changes) goes through `humanizeIdentifier`: `due_date` → "Due Date".
+- Consumer action: none.
+
 ## 0.19.1 — 2026-10-02
 
 - **One record-revision store per page.** Every entry of this package (`.`,

package/dist/{directive-host-Bw2_PrgL.d.cts → directive-host-B1hcjJxS.d.cts}

@@ -174,6 +174,15 @@ interface DirectiveHost {
     openItem?: (options: DirectiveOpenItemOptions) => void;
     /** Host copy controls. */
     renderCopy?: (props: DirectiveCopyProps) => ReactNode;
+    /**
+     * The app's word for one stored value of one pick-list field — the SAME word
+     * the record's own screens and the write forms show ("incomplete" on a task
+     * reads "Inbox"). One value, one display word everywhere (G8A review,
+     * 2026-10-02: the card said "Status incomplete → completed"). Return null for
+     * a field that is not a pick-list: its value is shown as written. Absent →
+     * every value is shown as stored.
+     */
+    valueLabel?: (ref: DirectiveValueRef) => string | null;
     /** The mirrored noun catalog (label / family / title column). */
     nouns?: DirectiveNounCatalog;
     /** slug → the kind ONE item is (THE DIRECTIVE⇄KIND SEAM), or null. */
@@ -189,6 +198,12 @@ interface DirectiveHost {
      */
     explainFailure?: (failure: DirectiveFailure) => DirectiveFailureWords | null;
 }
+/** One stored value of one field of one record type. */
+interface DirectiveValueRef {
+    noun: string;
+    field: string;
+    value: string;
+}
 /** One failed apply, as the card knows it. */
 interface DirectiveFailure {
     /** The server's / host's own text — technical; shown only behind Details. */
@@ -233,4 +248,4 @@ declare function DirectiveHostProvider({ host, children }: DirectiveHostProvider
  */
 declare function useDirectiveHost(): DirectiveHost;
 
-export { type DirectiveFailure as D, type DirectiveFailureWords as a, type DirectiveRecordRef as b, type DirectiveApplyResult as c, type DirectiveApplyState as d, type DirectiveAskRequest as e, type DirectiveCopyProps as f, type DirectiveHost as g, DirectiveHostProvider as h, type DirectiveHostProviderProps as i, type DirectiveOpenItemOptions as j, type DirectiveRecordProps as k, type DirectiveScope as l, DirectiveScopeProvider as m, type DirectiveShell as n, useDirectiveScope as o, useDirectiveHost as u };
+export { type DirectiveHost as D, type DirectiveFailure as a, type DirectiveFailureWords as b, type DirectiveRecordRef as c, type DirectiveApplyResult as d, type DirectiveApplyState as e, type DirectiveAskRequest as f, type DirectiveCopyProps as g, DirectiveHostProvider as h, type DirectiveHostProviderProps as i, type DirectiveOpenItemOptions as j, type DirectiveRecordProps as k, type DirectiveScope as l, DirectiveScopeProvider as m, type DirectiveShell as n, type DirectiveValueRef as o, useDirectiveScope as p, useDirectiveHost as u };

package/dist/{directive-host-Bw2_PrgL.d.ts → directive-host-B1hcjJxS.d.ts}

@@ -174,6 +174,15 @@ interface DirectiveHost {
     openItem?: (options: DirectiveOpenItemOptions) => void;
     /** Host copy controls. */
     renderCopy?: (props: DirectiveCopyProps) => ReactNode;
+    /**
+     * The app's word for one stored value of one pick-list field — the SAME word
+     * the record's own screens and the write forms show ("incomplete" on a task
+     * reads "Inbox"). One value, one display word everywhere (G8A review,
+     * 2026-10-02: the card said "Status incomplete → completed"). Return null for
+     * a field that is not a pick-list: its value is shown as written. Absent →
+     * every value is shown as stored.
+     */
+    valueLabel?: (ref: DirectiveValueRef) => string | null;
     /** The mirrored noun catalog (label / family / title column). */
     nouns?: DirectiveNounCatalog;
     /** slug → the kind ONE item is (THE DIRECTIVE⇄KIND SEAM), or null. */
@@ -189,6 +198,12 @@ interface DirectiveHost {
      */
     explainFailure?: (failure: DirectiveFailure) => DirectiveFailureWords | null;
 }
+/** One stored value of one field of one record type. */
+interface DirectiveValueRef {
+    noun: string;
+    field: string;
+    value: string;
+}
 /** One failed apply, as the card knows it. */
 interface DirectiveFailure {
     /** The server's / host's own text — technical; shown only behind Details. */
@@ -233,4 +248,4 @@ declare function DirectiveHostProvider({ host, children }: DirectiveHostProvider
  */
 declare function useDirectiveHost(): DirectiveHost;
 
-export { type DirectiveFailure as D, type DirectiveFailureWords as a, type DirectiveRecordRef as b, type DirectiveApplyResult as c, type DirectiveApplyState as d, type DirectiveAskRequest as e, type DirectiveCopyProps as f, type DirectiveHost as g, DirectiveHostProvider as h, type DirectiveHostProviderProps as i, type DirectiveOpenItemOptions as j, type DirectiveRecordProps as k, type DirectiveScope as l, DirectiveScopeProvider as m, type DirectiveShell as n, useDirectiveScope as o, useDirectiveHost as u };
+export { type DirectiveHost as D, type DirectiveFailure as a, type DirectiveFailureWords as b, type DirectiveRecordRef as c, type DirectiveApplyResult as d, type DirectiveApplyState as e, type DirectiveAskRequest as f, type DirectiveCopyProps as g, DirectiveHostProvider as h, type DirectiveHostProviderProps as i, type DirectiveOpenItemOptions as j, type DirectiveRecordProps as k, type DirectiveScope as l, DirectiveScopeProvider as m, type DirectiveShell as n, type DirectiveValueRef as o, useDirectiveScope as p, useDirectiveHost as u };

package/dist/directives.cjs

@@ -29,10 +29,13 @@ __export(directives_exports, {
   DirectiveProvisionalCard: () => DirectiveProvisionalCard,
   DirectiveRender: () => DirectiveRender,
   DirectiveScopeProvider: () => DirectiveScopeProvider,
+  EMPTY_VALUE_WORD: () => EMPTY_VALUE_WORD,
   SideEffectDirectiveCard: () => SideEffectDirectiveCard,
   TARGETING_CLASSES: () => TARGETING_CLASSES,
   defaultFailureWords: () => defaultFailureWords,
   describeChangeValue: () => describeChangeValue,
+  directiveFieldLabel: () => directiveFieldLabel,
+  directiveValueWord: () => directiveValueWord,
   failureWords: () => failureWords,
   fieldLabel: () => fieldLabel,
   getDirectiveRenderer: () => getDirectiveRenderer,
@@ -99,9 +102,10 @@ var import_content_ir2 = 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();
@@ -109,21 +113,27 @@ 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 describeChangeValue(value) {
-  return describeValue(value);
+function describeChangeValue(value, word) {
+  return describeValue(value, word);
 }
-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 };
@@ -133,11 +143,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) {
@@ -162,10 +172,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);
@@ -743,6 +755,14 @@ function FailureNotice({
 var import_react4 = require("react");
 var import_content_ir3 = require("@ai-matrx/content-ir");
 var import_jsx_runtime4 = 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,
@@ -759,16 +779,21 @@ function ItemRow({
   const titleColumn = (0, import_content_ir3.nounTitleColumn)(directive.noun, host.nouns);
   const title = (0, import_content_ir3.itemTitle)(item, titleColumn, index, total);
   const subtitle = (0, import_content_ir3.itemSubtitle)(item);
-  const facts = (0, import_content_ir3.itemFacts)(item);
+  const valueWord = directiveValueWord(host, directive.noun);
+  const facts = (0, import_content_ir3.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_ir3.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   const openItem = host.openItem;
   const body = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 shrink-0 truncate font-medium text-foreground", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("span", { className: "truncate text-[11px] text-muted-foreground", children: [
-      fact.value,
+    /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("span", { className: "truncate text-[11px] text-muted-foreground", "data-item-fact": fact.key, children: [
+      fact.label,
       " ",
-      fact.label
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-foreground/80", children: fact.value })
     ] }, fact.key)) }),
     subtitle && facts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "hidden truncate text-[11px] text-muted-foreground sm:inline", children: subtitle }) : null,
     openItem ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MaximizeIcon, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" }) : null
@@ -803,35 +828,36 @@ function DirectiveChangeList({
   if (changes.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: `text-[11px] text-muted-foreground${className ? ` ${className}` : ""}`, children: "Sets no fields \u2014 nothing would change." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: `space-y-0.5${className ? ` ${className}` : ""}`, "data-directive-changes": "", children: changes.map((change) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)("span", { className: "shrink-0 text-muted-foreground", children: change.label }),
-          was !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          before ? /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
+          ] })
         ]
       },
       change.key
@@ -854,7 +880,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_ir3.nounTitleColumn)(directive.noun, host.nouns) }) : [];
+  const changes = isUpdate ? itemChanges(item, compareTo, {
+    titleColumn: (0, import_content_ir3.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_runtime4.jsx)("span", { className: "truncate font-medium text-foreground", children: fallback });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [