@ai-matrx/content-ir-react 0.17.1 → 0.18.1

package/dist/react.d.cts

@@ -1,9 +1,9 @@
-import { c as KindDefinitionSource, C as ContentIrHost } from './host-types-CKu4ap5K.cjs';
+import { c as KindDefinitionSource, C as ContentIrHost } from './host-types-YP_l_Q_t.cjs';
 import { d as ComponentResolutionSource } from './component-resolution.types-DwKSF64x.cjs';
 import * as react from 'react';
 import react__default, { ReactNode } from 'react';
 import '@ai-matrx/content-ir';
-import './directive-host-BOML4BQ7.cjs';
+import './directive-host-Bw2_PrgL.cjs';
 
 /**
  * The two registries this hook watches. Passed explicitly by a host whose

package/dist/react.d.ts

@@ -1,9 +1,9 @@
-import { c as KindDefinitionSource, C as ContentIrHost } from './host-types-CQ2oIzUy.js';
+import { c as KindDefinitionSource, C as ContentIrHost } from './host-types-eSjFmXyF.js';
 import { d as ComponentResolutionSource } from './component-resolution.types-DwKSF64x.js';
 import * as react from 'react';
 import react__default, { ReactNode } from 'react';
 import '@ai-matrx/content-ir';
-import './directive-host-BOML4BQ7.js';
+import './directive-host-Bw2_PrgL.js';
 
 /**
  * The two registries this hook watches. Passed explicitly by a host whose

package/dist/react.js

@@ -94,7 +94,7 @@ import { looksLikeDirectiveHead, tryDecodeDirectiveContent } from "@ai-matrx/con
 import { directiveDisplay } from "@ai-matrx/content-ir";
 
 // directives/ApplyDirectiveButton.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { nounLabel } from "@ai-matrx/content-ir";
 
 // directives/item-changes.ts
@@ -289,19 +289,52 @@ function classIcon(directiveClass, noun) {
 
 // directives/ApplyDirectiveButton.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var applyOutcomes = /* @__PURE__ */ new WeakMap();
+var EMPTY_AUTHORITY = {};
+var outcomeListeners = /* @__PURE__ */ new Set();
+function outcomesOf(host) {
+  let held = applyOutcomes.get(host);
+  if (!held) {
+    held = /* @__PURE__ */ new Map();
+    applyOutcomes.set(host, held);
+  }
+  return held;
+}
+function publishOutcome(host, identity, outcome) {
+  outcomesOf(host).set(identity, outcome);
+  for (const listener of outcomeListeners) listener();
+}
+function subscribeOutcomes(listener) {
+  outcomeListeners.add(listener);
+  return () => {
+    outcomeListeners.delete(listener);
+  };
+}
+function useApplyOutcome(host, identity) {
+  return useSyncExternalStore2(
+    subscribeOutcomes,
+    () => applyOutcomes.get(host)?.get(identity) ?? null,
+    () => null
+  );
+}
 var FINISH_POLL_MS = 2e3;
 var FINISH_POLLS_MAX = 30;
+function readsApplyLedger(host, directive) {
+  return !!host.applyState && !!host.confirm && directive.parsed.executes && directive.items.length > 0;
+}
 function ApplyDirectiveButton({
   directive,
   label = "Apply",
   itemCount,
-  onApplied
+  onApplied,
+  onPhase,
+  nothingToChange = false
 }) {
   const host = useDirectiveHost();
   const scope = useDirectiveScope();
   const conversationId = scope.conversationId || void 0;
   const items = directive.items;
-  const readsLedger = !!host.applyState && !!host.confirm && directive.parsed.executes && items.length > 0;
+  const readsLedger = readsApplyLedger(host, directive);
   const initial = readsLedger ? { status: "checking" } : { status: "idle" };
   const [state, setState] = useState(initial);
   const [elapsed, setElapsed] = useState(0);
@@ -315,6 +348,8 @@ function ApplyDirectiveButton({
     setAskingAgain(false);
     setElapsed(0);
   }
+  const shared = useApplyOutcome(host.confirm ?? EMPTY_AUTHORITY, identity);
+  const view = state.status === "asking" || !shared ? state : shared;
   const currentIdentity = useRef(identity);
   useEffect(() => {
     currentIdentity.current = identity;
@@ -342,7 +377,8 @@ function ApplyDirectiveButton({
               failed: 0,
               message: answer.message?.trim() ? answer.message.trim() : null,
               records: answer.records ?? [],
-              copies: Math.max(1, answer.copies ?? 1)
+              copies: Math.max(1, answer.copies ?? 1),
+              before: answer.before ?? null
             } : prev
           );
         } else if (answer.state === "in_flight" && polls < FINISH_POLLS_MAX) {
@@ -367,24 +403,34 @@ function ApplyDirectiveButton({
       if (timer) clearTimeout(timer);
     };
   }, [shellKey, read, report]);
+  const appliedClean = view.status === "applied" && view.failed === 0 ? view : null;
+  const appliedBefore = appliedClean ? appliedClean.before : null;
+  const phaseKey = view.status === "checking" || view.status === "finishing" ? "pending" : appliedClean ? `applied:${JSON.stringify(appliedBefore)}` : "open";
+  useEffect(() => {
+    if (!onPhase) return;
+    if (phaseKey === "pending") onPhase({ phase: "pending" });
+    else if (phaseKey === "open") onPhase({ phase: "open" });
+    else onPhase({ phase: "applied", before: appliedBefore });
+  }, [phaseKey, onPhase, appliedBefore]);
+  const applyingSince = view.status === "applying" ? view.startedAt : null;
   useEffect(() => {
-    if (state.status !== "applying") return;
-    startedAt.current = Date.now();
+    if (applyingSince === null) return;
+    startedAt.current = applyingSince;
     const id = setInterval(
       () => setElapsed(Math.round((Date.now() - (startedAt.current ?? 0)) / 1e3)),
       1e3
     );
     return () => clearInterval(id);
-  }, [state.status]);
+  }, [applyingSince]);
   if (!directive.parsed.executes) return null;
   const confirm = host.confirm;
   if (!confirm) return null;
   async function handleApply(again = false) {
     if (!confirm) return;
-    const before = state;
+    const prior = view;
     const askedFor = identity;
     const stillHere = () => currentIdentity.current === askedFor;
-    const priorCopies = state.status === "applied" ? state.copies : 0;
+    const priorCopies = view.status === "applied" ? view.copies : 0;
     if (host.ask) {
       if (again) setAskingAgain(true);
       else setState({ status: "asking" });
@@ -408,41 +454,43 @@ function ApplyDirectiveButton({
       if (!stillHere()) return;
       setAskingAgain(false);
       if (!ok) {
-        setState(again ? before : { status: "idle" });
+        setState(again ? prior : { status: "idle" });
         return;
       }
     }
     setElapsed(0);
-    setState({ status: "applying" });
+    setState((prev) => prev.status === "asking" ? { status: "idle" } : prev);
+    publishOutcome(confirm, askedFor, { status: "applying", startedAt: Date.now() });
     try {
       const shell = { __kind: directive.slug, items };
       if (conversationId) shell.conversationId = conversationId;
       if (again) shell.force = true;
       const result = await confirm(shell);
-      if (!stillHere()) return;
-      setState({
+      publishOutcome(confirm, askedFor, {
         status: "applied",
         applied: result.applied,
         failed: result.failed,
         message: result.message?.trim() ? result.message.trim() : null,
         records: result.records ?? [],
         // "Run again" made one more; a first apply (or a replay of one) is one.
-        copies: again ? Math.max(1, priorCopies) + 1 : Math.max(1, priorCopies)
+        copies: again ? Math.max(1, priorCopies) + 1 : Math.max(1, priorCopies),
+        // "Run again" wrote the same values over themselves; what the FIRST
+        // apply replaced is still the change this block made.
+        before: again && prior.status === "applied" && prior.before ? prior.before : result.before ?? null
       });
-      onApplied?.();
+      if (stillHere()) onApplied?.();
     } catch (error) {
-      if (!stillHere()) return;
-      setState({
+      publishOutcome(confirm, askedFor, {
         status: "error",
         message: error instanceof Error && error.message ? error.message : "That couldn't be applied just now. Please try again."
       });
     }
   }
-  if (state.status === "applied") {
-    const bad = state.failed > 0;
+  if (view.status === "applied") {
+    const bad = view.failed > 0;
     const trashed = directive.directiveClass === "delete";
     const label2 = nounText;
-    const records = host.renderRecord ? state.records : [];
+    const records = host.renderRecord ? view.records : [];
     return /* @__PURE__ */ jsxs2(
       "span",
       {
@@ -456,26 +504,26 @@ function ApplyDirectiveButton({
               {
                 words: failureWords(
                   {
-                    raw: state.message ?? `${state.failed} failed`,
+                    raw: view.message ?? `${view.failed} failed`,
                     directiveClass: directive.directiveClass,
                     noun: directive.noun,
                     nounLabel: nounText,
-                    failed: state.failed,
-                    total: state.applied + state.failed
+                    failed: view.failed,
+                    total: view.applied + view.failed
                   },
                   host.explainFailure
                 ),
-                raw: state.message
+                raw: view.message
               }
-            ) : /* @__PURE__ */ jsx4("span", { className: "min-w-0", children: state.message ?? `Applied ${state.applied}` })
+            ) : /* @__PURE__ */ jsx4("span", { className: "min-w-0", children: view.message ?? `Applied ${view.applied}` })
           ] }),
-          state.copies > 1 ? /* @__PURE__ */ jsx4(
+          view.copies > 1 ? /* @__PURE__ */ jsx4(
             "span",
             {
               className: "shrink-0 text-muted-foreground",
-              "data-apply-copies": state.copies,
+              "data-apply-copies": view.copies,
               title: records.length > 0 ? directive.directiveClass === "create" ? "Links to the latest copy." : "Links to the latest run." : void 0,
-              children: directive.directiveClass === "create" ? `${state.copies} copies` : `Ran ${state.copies} times`
+              children: directive.directiveClass === "create" ? `${view.copies} copies` : `Ran ${view.copies} times`
             }
           ) : null,
           records.map((record) => /* @__PURE__ */ jsx4("span", { className: "inline-flex min-w-0 items-center", children: host.renderRecord?.({
@@ -502,7 +550,7 @@ function ApplyDirectiveButton({
       }
     );
   }
-  if (state.status === "checking") {
+  if (view.status === "checking") {
     return /* @__PURE__ */ jsx4(
       "span",
       {
@@ -514,7 +562,7 @@ function ApplyDirectiveButton({
       }
     );
   }
-  if (state.status === "finishing") {
+  if (view.status === "finishing") {
     return /* @__PURE__ */ jsxs2(
       "span",
       {
@@ -529,22 +577,25 @@ function ApplyDirectiveButton({
     );
   }
   const destructive = directive.directiveClass === "delete";
+  const muted = nothingToChange && view.status === "idle";
   return /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-2", children: [
+    muted ? /* @__PURE__ */ jsx4("span", { className: "text-xs text-muted-foreground", "data-apply-nothing": "", children: "Nothing to change" }) : null,
     /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
         onClick: () => void handleApply(),
-        disabled: state.status === "applying" || state.status === "asking" || items.length === 0,
-        "data-apply-tone": destructive ? "destructive" : "default",
-        className: `inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium disabled:opacity-50 ${destructive ? "border-destructive/50 bg-background text-destructive hover:bg-destructive/10" : "border-border bg-background hover:bg-accent"}`,
+        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"}`,
         children: [
-          state.status === "applying" ? /* @__PURE__ */ jsx4(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx4(PlayIcon, { className: "h-3.5 w-3.5" }),
-          state.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
+          view.status === "applying" ? /* @__PURE__ */ jsx4(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx4(PlayIcon, { className: "h-3.5 w-3.5" }),
+          view.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
         ]
       }
     ),
-    state.status === "error" ? /* @__PURE__ */ jsxs2(
+    view.status === "error" ? /* @__PURE__ */ jsxs2(
       "span",
       {
         className: "inline-flex max-w-sm items-start gap-1 text-xs text-destructive",
@@ -556,14 +607,14 @@ function ApplyDirectiveButton({
             {
               words: failureWords(
                 {
-                  raw: state.message,
+                  raw: view.message,
                   directiveClass: directive.directiveClass,
                   noun: directive.noun,
                   nounLabel: nounText
                 },
                 host.explainFailure
               ),
-              raw: state.message
+              raw: view.message
             }
           )
         ]
@@ -735,12 +786,13 @@ function ItemRow({
   directive,
   item,
   index,
-  total
+  total,
+  phase
 }) {
   const host = useDirectiveHost();
   const recordId = TARGETING_CLASSES.has(directive.directiveClass) ? itemRecordId(item) : null;
   if (recordId) {
-    return /* @__PURE__ */ jsx7(TargetRow, { directive, item, recordId });
+    return /* @__PURE__ */ jsx7(TargetRow, { directive, item, recordId, index, phase });
   }
   const titleColumn = nounTitleColumn(directive.noun, host.nouns);
   const title = itemTitle(item, titleColumn, index, total);
@@ -827,16 +879,20 @@ function DirectiveChangeList({
 function TargetRow({
   directive,
   item,
-  recordId
+  recordId,
+  index,
+  phase
 }) {
   const host = useDirectiveHost();
   const fallback = recordFallbackName(nounLabel2(directive.noun, host.nouns), recordId);
   const isUpdate = directive.directiveClass === "update";
-  const current = useRecordValues(
-    isUpdate ? host.readRecord : void 0,
-    isUpdate ? { noun: directive.noun, id: recordId } : null
+  const readsLive = isUpdate && phase.phase === "open";
+  const live = useRecordValues(
+    readsLive ? host.readRecord : void 0,
+    readsLive ? { noun: directive.noun, id: recordId } : null
   );
-  const changes = isUpdate ? itemChanges(item, current.values, { titleColumn: nounTitleColumn(directive.noun, host.nouns) }) : [];
+  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 name = host.renderRecord ? host.renderRecord({ noun: directive.noun, id: recordId, fallback, context: "row" }) : /* @__PURE__ */ jsx7("span", { className: "truncate font-medium text-foreground", children: fallback });
   return /* @__PURE__ */ jsxs5("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
     /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-2", children: [
@@ -853,6 +909,10 @@ function SideEffectDirectiveCard({ directive }) {
   const total = items.length;
   const display = directiveDisplay3(directive.directiveClass, directive.noun, host.nouns);
   const Icon = classIcon(directive.directiveClass, directive.noun);
+  const [phase, setPhase] = useState3(
+    () => readsApplyLedger(host, directive) ? { phase: "pending" } : { phase: "open" }
+  );
+  const nothingToChange = directive.directiveClass === "update" && total > 0 && items.every((item) => itemChanges(item).length === 0);
   const shown = expanded ? items : items.slice(0, ROWS_BEFORE_FOLD);
   const hidden = total - shown.length;
   return /* @__PURE__ */ jsxs5("div", { className: "my-3 rounded-md border border-border bg-card px-2.5 py-1.5", "data-directive": directive.slug, children: [
@@ -867,13 +927,21 @@ function SideEffectDirectiveCard({ directive }) {
       ] }),
       /* @__PURE__ */ jsxs5("div", { className: "ml-auto flex items-center gap-1", children: [
         host.renderCopy?.({ label: display.title, value: directive.shell, size: "icon" }),
-        /* @__PURE__ */ jsx7(ApplyDirectiveButton, { directive, itemCount: total })
+        /* @__PURE__ */ jsx7(
+          ApplyDirectiveButton,
+          {
+            directive,
+            itemCount: total,
+            onPhase: setPhase,
+            nothingToChange
+          }
+        )
       ] })
     ] }),
     total === 0 ? (
       // Stated, never silent: an empty batch is a real (and suspicious) state.
       /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-muted-foreground", children: "No items \u2014 nothing would be written." })
-    ) : /* @__PURE__ */ jsx7("div", { className: "mt-0.5 divide-y divide-border/60", children: shown.map((item, i) => /* @__PURE__ */ jsx7(ItemRow, { directive, item, index: i, total }, i)) }),
+    ) : /* @__PURE__ */ jsx7("div", { className: "mt-0.5 divide-y divide-border/60", children: shown.map((item, i) => /* @__PURE__ */ jsx7(ItemRow, { directive, item, index: i, total, phase }, i)) }),
     hidden > 0 || expanded ? /* @__PURE__ */ jsxs5(
       "button",
       {