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

package/dist/directives.d.cts

@@ -1,5 +1,5 @@
-import { D as DirectiveFailure, a as DirectiveFailureWords, b as DirectiveRecordRef } from './directive-host-Bw2_PrgL.cjs';
-export { c as DirectiveApplyResult, d as DirectiveApplyState, e as DirectiveAskRequest, f as DirectiveCopyProps, g as DirectiveHost, h as DirectiveHostProvider, i as DirectiveHostProviderProps, j as DirectiveOpenItemOptions, k as DirectiveRecordProps, l as DirectiveScope, m as DirectiveScopeProvider, n as DirectiveShell, u as useDirectiveHost, o as useDirectiveScope } from './directive-host-Bw2_PrgL.cjs';
+import { D as DirectiveHost, a as DirectiveFailure, b as DirectiveFailureWords, c as DirectiveRecordRef } from './directive-host-B1hcjJxS.cjs';
+export { d as DirectiveApplyResult, e as DirectiveApplyState, f as DirectiveAskRequest, g as DirectiveCopyProps, h as DirectiveHostProvider, i as DirectiveHostProviderProps, j as DirectiveOpenItemOptions, k as DirectiveRecordProps, l as DirectiveScope, m as DirectiveScopeProvider, n as DirectiveShell, o as DirectiveValueRef, u as useDirectiveHost, p as useDirectiveScope } from './directive-host-B1hcjJxS.cjs';
 import * as react from 'react';
 import { ComponentType } from 'react';
 import { DecodedDirective, DirectiveClass } from '@ai-matrx/content-ir';
@@ -94,12 +94,33 @@ declare function ApplyDirectiveButton({ directive, label, itemCount, onApplied,
  */
 /** Classes whose items point at an EXISTING record by `id`. */
 declare const TARGETING_CLASSES: ReadonlySet<string>;
-/** How long a changed value may read before it is shortened (full value on hover). */
-declare const CHANGE_VALUE_MAX = 60;
+/**
+ * How long a changed value may read before it is shortened. A value someone
+ * must judge — a title, a status, a date — is always whole (G8A review: a 60
+ * cap plus CSS truncation cut "Review4 tasks…" on a phone); only a body of
+ * prose longer than this is shortened, whole on hover and in View/Copy.
+ */
+declare const CHANGE_VALUE_MAX = 280;
 /** The id of the existing record an update/delete item targets, or null. */
 declare function itemRecordId(item: Record<string, unknown>): string | null;
-/** "due_date" → "Due date". Underscores read as developer output. */
+/** "due_date" → "Due Date" — THE humanizer; underscores read as developer output. */
 declare function fieldLabel(key: string): string;
+/**
+ * THE ONE FIELD-LABEL RULE for a directive — card rows, card facts and the
+ * host's confirm: the noun's title column reads "Title" whatever it is stored
+ * as (a workbook's `workbook_name`, a note's `label`), every other field reads
+ * through THE humanizer. A new workbook card said "workbook name" while its
+ * confirm said "Title" (G8A review, 2026-10-02).
+ */
+declare function directiveFieldLabel(key: string, titleColumn: string | null | undefined): string;
+/**
+ * The app's word for ONE stored value of ONE field — "incomplete" on a task
+ * reads "Inbox", "high" reads "High". The host answers it for its pick-list
+ * fields; null → the value as stored.
+ */
+type DirectiveValueWord = (field: string, value: string) => string | null;
+/** How an empty value reads — before or after, on the card and in the confirm. */
+declare const EMPTY_VALUE_WORD = "None";
 /** A short, honest name for a record we could not look up: "Task 1a2b3c4d". */
 declare function recordFallbackName(nounLabel: string, id: string): string;
 /** One value as a row reads it: shortened, the whole of it, and whether it is empty. */
@@ -122,7 +143,7 @@ interface ItemChange extends ChangeValue {
     same?: boolean;
 }
 /** One value, described for a change row (`value` shortened, `full` whole). */
-declare function describeChangeValue(value: unknown): ChangeValue;
+declare function describeChangeValue(value: unknown, word?: (value: string) => string | null): ChangeValue;
 /**
  * Every field an UPDATE item sets, in the order the item carries them — ALL of
  * them, never a sample: a person approving an overwrite sees the whole of it.
@@ -139,17 +160,27 @@ interface ItemChangesOptions {
      * (reviewer, 2026-10-02). The same rule the directive builder's form uses.
      */
     titleColumn?: string | null;
+    /** The app's word for a stored value (`DirectiveHost.valueLabel`, bound to the noun). */
+    valueWord?: DirectiveValueWord | null;
 }
 declare function itemChanges(item: Record<string, unknown>, current?: Record<string, unknown> | null, options?: ItemChangesOptions): ItemChange[];
 
 interface SideEffectDirectiveCardProps {
     directive: DecodedDirective;
 }
+/** The host's value words for one record type, or null when it has none. */
+declare function directiveValueWord(host: Pick<DirectiveHost, "valueLabel">, noun: string): DirectiveValueWord | null;
 /**
  * THE CHANGE LIST — every field an update sets, as "Label  old → new" when the
  * record's current value is known, "Label → new" when it is not. ONE component
  * for the card row and the host's confirm dialog, so the two can never read
  * differently (reviewer, 2026-10-02: the confirm showed only the new value).
+ *
+ * 🚨 A VALUE SOMEONE MUST JUDGE IS NEVER CUT (G8A review, 2026-10-02): on a
+ * phone the card is ~230px and the row read "Title Review… → Review4 tas…".
+ * Values wrap; below a 20rem container the label, the old value and the new
+ * value stack, one per line. Measured on the list's own width (a container
+ * query), so a narrow window panel on a desktop gets the same stacking.
  */
 declare function DirectiveChangeList({ changes, className, }: {
     changes: ItemChange[];
@@ -232,4 +263,4 @@ declare function noteRecordChanged(id: string): void;
 declare function useRecordRevision(id: string): number;
 declare function useRecordValues(read: RecordReader | undefined, ref: DirectiveRecordRef | null): RecordValues;
 
-export { ApplyDirectiveButton, type ApplyDirectiveButtonProps, CHANGE_VALUE_MAX, type ChangeValue, type DirectiveApplyPhase, DirectiveChangeList, DirectiveFailure, DirectiveFailureWords, DirectiveFallbackCard, type DirectiveFallbackCardProps, DirectiveProvisionalCard, type DirectiveProvisionalCardProps, DirectiveRecordRef, DirectiveRender, type DirectiveRenderProps, type DirectiveRenderer, type DirectiveRendererProps, type ItemChange, type ItemChangesOptions, type RecordReader, type RecordValues, type RecordValuesStatus, SideEffectDirectiveCard, type SideEffectDirectiveCardProps, TARGETING_CLASSES, defaultFailureWords, describeChangeValue, failureWords, fieldLabel, getDirectiveRenderer, itemChanges, itemRecordId, noteRecordChanged, provisionalDirectiveSlug, readsApplyLedger, recordFallbackName, recordRevision, registerDirectiveRenderer, resetDirectiveRenderers, useRecordRevision, useRecordValues };
+export { ApplyDirectiveButton, type ApplyDirectiveButtonProps, CHANGE_VALUE_MAX, type ChangeValue, type DirectiveApplyPhase, DirectiveChangeList, DirectiveFailure, DirectiveFailureWords, DirectiveFallbackCard, type DirectiveFallbackCardProps, DirectiveHost, DirectiveProvisionalCard, type DirectiveProvisionalCardProps, DirectiveRecordRef, DirectiveRender, type DirectiveRenderProps, type DirectiveRenderer, type DirectiveRendererProps, type DirectiveValueWord, EMPTY_VALUE_WORD, type ItemChange, type ItemChangesOptions, type RecordReader, type RecordValues, type RecordValuesStatus, SideEffectDirectiveCard, type SideEffectDirectiveCardProps, TARGETING_CLASSES, defaultFailureWords, describeChangeValue, directiveFieldLabel, directiveValueWord, failureWords, fieldLabel, getDirectiveRenderer, itemChanges, itemRecordId, noteRecordChanged, provisionalDirectiveSlug, readsApplyLedger, recordFallbackName, recordRevision, registerDirectiveRenderer, resetDirectiveRenderers, useRecordRevision, useRecordValues };

package/dist/directives.d.ts

@@ -1,5 +1,5 @@
-import { D as DirectiveFailure, a as DirectiveFailureWords, b as DirectiveRecordRef } from './directive-host-Bw2_PrgL.js';
-export { c as DirectiveApplyResult, d as DirectiveApplyState, e as DirectiveAskRequest, f as DirectiveCopyProps, g as DirectiveHost, h as DirectiveHostProvider, i as DirectiveHostProviderProps, j as DirectiveOpenItemOptions, k as DirectiveRecordProps, l as DirectiveScope, m as DirectiveScopeProvider, n as DirectiveShell, u as useDirectiveHost, o as useDirectiveScope } from './directive-host-Bw2_PrgL.js';
+import { D as DirectiveHost, a as DirectiveFailure, b as DirectiveFailureWords, c as DirectiveRecordRef } from './directive-host-B1hcjJxS.js';
+export { d as DirectiveApplyResult, e as DirectiveApplyState, f as DirectiveAskRequest, g as DirectiveCopyProps, h as DirectiveHostProvider, i as DirectiveHostProviderProps, j as DirectiveOpenItemOptions, k as DirectiveRecordProps, l as DirectiveScope, m as DirectiveScopeProvider, n as DirectiveShell, o as DirectiveValueRef, u as useDirectiveHost, p as useDirectiveScope } from './directive-host-B1hcjJxS.js';
 import * as react from 'react';
 import { ComponentType } from 'react';
 import { DecodedDirective, DirectiveClass } from '@ai-matrx/content-ir';
@@ -94,12 +94,33 @@ declare function ApplyDirectiveButton({ directive, label, itemCount, onApplied,
  */
 /** Classes whose items point at an EXISTING record by `id`. */
 declare const TARGETING_CLASSES: ReadonlySet<string>;
-/** How long a changed value may read before it is shortened (full value on hover). */
-declare const CHANGE_VALUE_MAX = 60;
+/**
+ * How long a changed value may read before it is shortened. A value someone
+ * must judge — a title, a status, a date — is always whole (G8A review: a 60
+ * cap plus CSS truncation cut "Review4 tasks…" on a phone); only a body of
+ * prose longer than this is shortened, whole on hover and in View/Copy.
+ */
+declare const CHANGE_VALUE_MAX = 280;
 /** The id of the existing record an update/delete item targets, or null. */
 declare function itemRecordId(item: Record<string, unknown>): string | null;
-/** "due_date" → "Due date". Underscores read as developer output. */
+/** "due_date" → "Due Date" — THE humanizer; underscores read as developer output. */
 declare function fieldLabel(key: string): string;
+/**
+ * THE ONE FIELD-LABEL RULE for a directive — card rows, card facts and the
+ * host's confirm: the noun's title column reads "Title" whatever it is stored
+ * as (a workbook's `workbook_name`, a note's `label`), every other field reads
+ * through THE humanizer. A new workbook card said "workbook name" while its
+ * confirm said "Title" (G8A review, 2026-10-02).
+ */
+declare function directiveFieldLabel(key: string, titleColumn: string | null | undefined): string;
+/**
+ * The app's word for ONE stored value of ONE field — "incomplete" on a task
+ * reads "Inbox", "high" reads "High". The host answers it for its pick-list
+ * fields; null → the value as stored.
+ */
+type DirectiveValueWord = (field: string, value: string) => string | null;
+/** How an empty value reads — before or after, on the card and in the confirm. */
+declare const EMPTY_VALUE_WORD = "None";
 /** A short, honest name for a record we could not look up: "Task 1a2b3c4d". */
 declare function recordFallbackName(nounLabel: string, id: string): string;
 /** One value as a row reads it: shortened, the whole of it, and whether it is empty. */
@@ -122,7 +143,7 @@ interface ItemChange extends ChangeValue {
     same?: boolean;
 }
 /** One value, described for a change row (`value` shortened, `full` whole). */
-declare function describeChangeValue(value: unknown): ChangeValue;
+declare function describeChangeValue(value: unknown, word?: (value: string) => string | null): ChangeValue;
 /**
  * Every field an UPDATE item sets, in the order the item carries them — ALL of
  * them, never a sample: a person approving an overwrite sees the whole of it.
@@ -139,17 +160,27 @@ interface ItemChangesOptions {
      * (reviewer, 2026-10-02). The same rule the directive builder's form uses.
      */
     titleColumn?: string | null;
+    /** The app's word for a stored value (`DirectiveHost.valueLabel`, bound to the noun). */
+    valueWord?: DirectiveValueWord | null;
 }
 declare function itemChanges(item: Record<string, unknown>, current?: Record<string, unknown> | null, options?: ItemChangesOptions): ItemChange[];
 
 interface SideEffectDirectiveCardProps {
     directive: DecodedDirective;
 }
+/** The host's value words for one record type, or null when it has none. */
+declare function directiveValueWord(host: Pick<DirectiveHost, "valueLabel">, noun: string): DirectiveValueWord | null;
 /**
  * THE CHANGE LIST — every field an update sets, as "Label  old → new" when the
  * record's current value is known, "Label → new" when it is not. ONE component
  * for the card row and the host's confirm dialog, so the two can never read
  * differently (reviewer, 2026-10-02: the confirm showed only the new value).
+ *
+ * 🚨 A VALUE SOMEONE MUST JUDGE IS NEVER CUT (G8A review, 2026-10-02): on a
+ * phone the card is ~230px and the row read "Title Review… → Review4 tas…".
+ * Values wrap; below a 20rem container the label, the old value and the new
+ * value stack, one per line. Measured on the list's own width (a container
+ * query), so a narrow window panel on a desktop gets the same stacking.
  */
 declare function DirectiveChangeList({ changes, className, }: {
     changes: ItemChange[];
@@ -232,4 +263,4 @@ declare function noteRecordChanged(id: string): void;
 declare function useRecordRevision(id: string): number;
 declare function useRecordValues(read: RecordReader | undefined, ref: DirectiveRecordRef | null): RecordValues;
 
-export { ApplyDirectiveButton, type ApplyDirectiveButtonProps, CHANGE_VALUE_MAX, type ChangeValue, type DirectiveApplyPhase, DirectiveChangeList, DirectiveFailure, DirectiveFailureWords, DirectiveFallbackCard, type DirectiveFallbackCardProps, DirectiveProvisionalCard, type DirectiveProvisionalCardProps, DirectiveRecordRef, DirectiveRender, type DirectiveRenderProps, type DirectiveRenderer, type DirectiveRendererProps, type ItemChange, type ItemChangesOptions, type RecordReader, type RecordValues, type RecordValuesStatus, SideEffectDirectiveCard, type SideEffectDirectiveCardProps, TARGETING_CLASSES, defaultFailureWords, describeChangeValue, failureWords, fieldLabel, getDirectiveRenderer, itemChanges, itemRecordId, noteRecordChanged, provisionalDirectiveSlug, readsApplyLedger, recordFallbackName, recordRevision, registerDirectiveRenderer, resetDirectiveRenderers, useRecordRevision, useRecordValues };
+export { ApplyDirectiveButton, type ApplyDirectiveButtonProps, CHANGE_VALUE_MAX, type ChangeValue, type DirectiveApplyPhase, DirectiveChangeList, DirectiveFailure, DirectiveFailureWords, DirectiveFallbackCard, type DirectiveFallbackCardProps, DirectiveHost, DirectiveProvisionalCard, type DirectiveProvisionalCardProps, DirectiveRecordRef, DirectiveRender, type DirectiveRenderProps, type DirectiveRenderer, type DirectiveRendererProps, type DirectiveValueWord, EMPTY_VALUE_WORD, type ItemChange, type ItemChangesOptions, type RecordReader, type RecordValues, type RecordValuesStatus, SideEffectDirectiveCard, type SideEffectDirectiveCardProps, TARGETING_CLASSES, defaultFailureWords, describeChangeValue, directiveFieldLabel, directiveValueWord, failureWords, fieldLabel, getDirectiveRenderer, itemChanges, itemRecordId, noteRecordChanged, provisionalDirectiveSlug, readsApplyLedger, recordFallbackName, recordRevision, registerDirectiveRenderer, resetDirectiveRenderers, useRecordRevision, useRecordValues };

package/dist/directives.js

@@ -49,9 +49,10 @@ import { nounLabel } from "@ai-matrx/content-ir";
 
 // directives/item-changes.ts
 import { isUuidShape } from "@ai-matrx/kit/uuid";
+import { humanizeIdentifier } from "@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();
@@ -59,21 +60,27 @@ function itemRecordId(item) {
   return null;
 }
 function fieldLabel(key) {
-  const spaced = key.replace(/_/g, " ").trim();
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+  return 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 = 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 };
@@ -83,11 +90,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) {
@@ -112,10 +119,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);
@@ -125,8 +134,17 @@ function itemChanges(item, current, options = {}) {
 
 // directives/record-values.ts
 import { useEffect, useState, useSyncExternalStore } from "react";
-var revisions = /* @__PURE__ */ new Map();
-var listeners = /* @__PURE__ */ new Set();
+var STORE_SLOT = /* @__PURE__ */ Symbol.for("@ai-matrx/content-ir-react/record-revisions");
+function revisionStore() {
+  const slots = globalThis;
+  let store = slots[STORE_SLOT];
+  if (!store) {
+    store = { revisions: /* @__PURE__ */ new Map(), listeners: /* @__PURE__ */ new Set() };
+    slots[STORE_SLOT] = store;
+  }
+  return store;
+}
+var { revisions, listeners } = revisionStore();
 function recordRevision(id) {
   return revisions.get(id) ?? 0;
 }
@@ -692,6 +710,14 @@ import {
   nounTitleColumn
 } from "@ai-matrx/content-ir";
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "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,
@@ -708,16 +734,21 @@ function ItemRow({
   const titleColumn = nounTitleColumn(directive.noun, host.nouns);
   const title = itemTitle(item, titleColumn, index, total);
   const subtitle = itemSubtitle(item);
-  const facts = itemFacts(item);
+  const valueWord = directiveValueWord(host, directive.noun);
+  const facts = 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 = directiveDisplay(directive.directiveClass, directive.noun, host.nouns);
   const openItem = host.openItem;
   const body = /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx4("span", { className: "min-w-0 shrink-0 truncate font-medium text-foreground", children: title }),
-    /* @__PURE__ */ jsx4("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ jsxs3("span", { className: "truncate text-[11px] text-muted-foreground", children: [
-      fact.value,
+    /* @__PURE__ */ jsx4("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ jsxs3("span", { className: "truncate text-[11px] text-muted-foreground", "data-item-fact": fact.key, children: [
+      fact.label,
       " ",
-      fact.label
+      /* @__PURE__ */ jsx4("span", { className: "text-foreground/80", children: fact.value })
     ] }, fact.key)) }),
     subtitle && facts.length === 0 ? /* @__PURE__ */ jsx4("span", { className: "hidden truncate text-[11px] text-muted-foreground sm:inline", children: subtitle }) : null,
     openItem ? /* @__PURE__ */ jsx4(MaximizeIcon, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" }) : null
@@ -752,35 +783,36 @@ function DirectiveChangeList({
   if (changes.length === 0) {
     return /* @__PURE__ */ jsx4("p", { className: `text-[11px] text-muted-foreground${className ? ` ${className}` : ""}`, children: "Sets no fields \u2014 nothing would change." });
   }
-  return /* @__PURE__ */ jsx4("ul", { className: `space-y-0.5${className ? ` ${className}` : ""}`, "data-directive-changes": "", children: changes.map((change) => {
+  return /* @__PURE__ */ jsx4("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__ */ jsxs3(
       "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__ */ jsx4("span", { className: "shrink-0 text-muted-foreground", children: change.label }),
-          was !== null ? /* @__PURE__ */ jsx4(
+          before ? /* @__PURE__ */ jsx4(
             "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__ */ jsx4("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
-          /* @__PURE__ */ jsx4(
-            "span",
-            {
-              className: `min-w-0 truncate ${change.clears ? "italic text-muted-foreground" : "text-foreground"}`,
-              "data-change-after": "",
-              children: change.value
-            }
-          ),
-          change.same ? /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
+          /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+            /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
+            /* @__PURE__ */ jsx4(
+              "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__ */ jsx4("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
+          ] })
         ]
       },
       change.key
@@ -803,7 +835,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: nounTitleColumn(directive.noun, host.nouns) }) : [];
+  const changes = isUpdate ? itemChanges(item, compareTo, {
+    titleColumn: 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__ */ jsx4("span", { className: "truncate font-medium text-foreground", children: fallback });
   return /* @__PURE__ */ jsxs3("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-2", children: [
@@ -985,10 +1020,13 @@ export {
   DirectiveProvisionalCard,
   DirectiveRender,
   DirectiveScopeProvider,
+  EMPTY_VALUE_WORD,
   SideEffectDirectiveCard,
   TARGETING_CLASSES,
   defaultFailureWords,
   describeChangeValue,
+  directiveFieldLabel,
+  directiveValueWord,
   failureWords,
   fieldLabel,
   getDirectiveRenderer,