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

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);
@@ -658,7 +667,7 @@ function ApplyDirectiveButton({
               type: "button",
               disabled: askingAgain,
               onClick: () => void handleApply(!bad),
-              className: "inline-flex items-center gap-1 rounded px-1 py-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50",
+              className: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded px-1 py-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50",
               "data-apply-action": bad ? "retry" : "run-again",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwIcon, { className: "h-3 w-3" }),
@@ -698,8 +707,8 @@ function ApplyDirectiveButton({
   }
   const destructive = directive.directiveClass === "delete";
   const muted = nothingToChange && view.status === "idle";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-    muted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs text-muted-foreground", "data-apply-nothing": "", children: "Nothing to change" }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 flex-wrap items-center justify-end gap-x-2 gap-y-1", children: [
+    muted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 text-xs text-muted-foreground", "data-apply-nothing": "", children: "Nothing to change" }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "button",
       {
@@ -708,7 +717,7 @@ function ApplyDirectiveButton({
         disabled: view.status === "applying" || view.status === "asking" || items.length === 0,
         "data-apply-tone": muted ? "muted" : destructive ? "destructive" : "default",
         title: muted ? "It sets no fields, so applying it changes nothing." : void 0,
-        className: `inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium disabled:opacity-50 ${muted ? "border-border/60 bg-background text-muted-foreground hover:bg-accent" : destructive ? "border-destructive/50 bg-background text-destructive hover:bg-destructive/10" : "border-border bg-background hover:bg-accent"}`,
+        className: `inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-md border px-2 py-1 text-xs font-medium disabled:opacity-50 ${muted ? "border-border/60 bg-background text-muted-foreground hover:bg-accent" : destructive ? "border-destructive/50 bg-background text-destructive hover:bg-destructive/10" : "border-border bg-background hover:bg-accent"}`,
         children: [
           view.status === "applying" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlayIcon, { className: "h-3.5 w-3.5" }),
           view.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
@@ -759,7 +768,7 @@ function FailureNotice({
           type: "button",
           onClick: () => setOpen((v) => !v),
           "aria-expanded": open,
-          className: "ml-1 underline underline-offset-2 hover:no-underline",
+          className: "ml-1 whitespace-nowrap underline underline-offset-2 hover:no-underline",
           "data-apply-failure-details-toggle": true,
           children: open ? "Hide details" : "Details"
         }
@@ -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,12 +992,20 @@ 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: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex min-w-0 flex-1 items-center gap-1 px-1", children: name }),
-      host.renderCopy?.({ label: fallback, value: item, size: "xs" })
+      host.renderCopy?.({
+        label: `this ${(0, import_content_ir5.nounLabel)(directive.noun, host.nouns).toLowerCase()}`,
+        value: item,
+        size: "xs",
+        record: { noun: directive.noun, id: recordId }
+      })
     ] }),
     isUpdate ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DirectiveChangeList, { changes, className: "mt-0.5 px-1" }) : null
   ] });
@@ -1002,7 +1033,7 @@ function SideEffectDirectiveCard({ directive }) {
         " ",
         total === 1 ? "item" : "items"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-1", children: [
         host.renderCopy?.({ label: display.title, value: directive.shell, size: "icon" }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ApplyDirectiveButton,
@@ -1024,7 +1055,7 @@ function SideEffectDirectiveCard({ directive }) {
       {
         type: "button",
         onClick: () => setExpanded((v) => !v),
-        className: "mt-0.5 inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] text-muted-foreground hover:text-foreground",
+        className: "mt-0.5 inline-flex items-center gap-1 whitespace-nowrap rounded px-1 py-0.5 text-[11px] text-muted-foreground hover:text-foreground",
         children: [
           expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRightIcon, { className: "h-3 w-3" }),
           expanded ? "Show less" : `Show ${hidden} more`