@ai-matrx/content-ir-react 0.24.5 → 0.25.0

package/dist/index.cjs

@@ -58,6 +58,7 @@ __export(index_exports, {
   SideEffectDirectiveCard: () => SideEffectDirectiveCard,
   TARGETING_CLASSES: () => TARGETING_CLASSES,
   applyIrKindRoute: () => applyIrKindRoute,
+  changesNothing: () => changesNothing,
   consoleErrorReporter: () => consoleErrorReporter,
   createDbKindComponentCache: () => createDbKindComponentCache,
   createKindRouteBinding: () => createKindRouteBinding,
@@ -932,6 +933,9 @@ function itemChanges(item, current, options = {}) {
   }
   return out;
 }
+function changesNothing(changes) {
+  return changes.every((change) => change.same === true);
+}
 
 // directives/record-values.ts
 var import_react4 = require("react");
@@ -1440,7 +1444,7 @@ function ApplyDirectiveButton({
         onFocus: warm,
         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,
+        title: muted ? "Applying it changes nothing." : void 0,
         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" }),
@@ -1613,12 +1617,23 @@ function ItemRow({
   item,
   index,
   total,
-  phase
+  phase,
+  onNothing
 }) {
   const host = useDirectiveHost();
   const recordId = TARGETING_CLASSES.has(directive.directiveClass) ? itemRecordId(item) : null;
   if (recordId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TargetRow, { directive, item, recordId, index, phase });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      TargetRow,
+      {
+        directive,
+        item,
+        recordId,
+        index,
+        phase,
+        onNothing
+      }
+    );
   }
   const titleColumn = (0, import_content_ir8.nounTitleColumn)(directive.noun, host.nouns);
   const ownName = itemOwnName(item, titleColumn);
@@ -1637,7 +1652,8 @@ function ItemRow({
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
-        className: `min-w-0 shrink-0 truncate font-medium ${ownName ? "text-foreground" : "italic text-muted-foreground"}`,
+        className: `min-w-0 line-clamp-2 font-medium [overflow-wrap:anywhere] sm:shrink-0 sm:truncate ${ownName ? "text-foreground" : "italic text-muted-foreground"}`,
+        "data-item-name": "",
         "data-item-untitled": ownName ? void 0 : "",
         children: title
       }
@@ -1726,7 +1742,8 @@ function TargetRow({
   item,
   recordId,
   index,
-  phase
+  phase,
+  onNothing
 }) {
   const host = useDirectiveHost();
   const fallback = recordFallbackName((0, import_content_ir8.nounLabel)(directive.noun, host.nouns));
@@ -1741,7 +1758,11 @@ function TargetRow({
     titleColumn: (0, import_content_ir8.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 });
+  const nothing = readsLive && live.values !== null && changesNothing(changes);
+  (0, import_react6.useEffect)(() => {
+    onNothing?.(index, nothing);
+  }, [onNothing, index, nothing]);
+  const name = host.renderRecord ? host.renderRecord({ noun: directive.noun, id: recordId, fallback, context: "row" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "line-clamp-2 min-w-0 font-medium text-foreground [overflow-wrap:anywhere]", 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 }),
@@ -1765,7 +1786,9 @@ function SideEffectDirectiveCard({ directive }) {
   const [phase, setPhase] = (0, import_react6.useState)(
     () => readsApplyLedger(host, directive) ? { phase: "pending" } : { phase: "open" }
   );
-  const nothingToChange = directive.directiveClass === "update" && total > 0 && items.every((item) => itemChanges(item).length === 0);
+  const [nothingAt, setNothingAt] = (0, import_react6.useState)({});
+  const noteNothing = (index, nothing) => setNothingAt((prev) => prev[index] === nothing ? prev : { ...prev, [index]: nothing });
+  const nothingToChange = directive.directiveClass === "update" && total > 0 && items.every((item, index) => itemChanges(item).length === 0 || nothingAt[index] === true);
   const shown = expanded ? items : items.slice(0, ROWS_BEFORE_FOLD);
   const hidden = total - shown.length;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "my-3 rounded-md border border-border bg-card px-2.5 py-1.5", "data-directive": directive.slug, children: [
@@ -1794,7 +1817,18 @@ function SideEffectDirectiveCard({ directive }) {
     total === 0 ? (
       // Stated, never silent: an empty batch is a real (and suspicious) state.
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: "No items \u2014 nothing would be written." })
-    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-0.5 divide-y divide-border/60", children: shown.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ItemRow, { directive, item, index: i, total, phase }, i)) }),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-0.5 divide-y divide-border/60", children: shown.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ItemRow,
+      {
+        directive,
+        item,
+        index: i,
+        total,
+        phase,
+        onNothing: noteNothing
+      },
+      i
+    )) }),
     hidden > 0 || expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {