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

package/dist/react.cjs

@@ -134,7 +134,7 @@ var import_content_ir6 = require("@ai-matrx/content-ir");
 var import_content_ir2 = require("@ai-matrx/content-ir");
 
 // directives/ApplyDirectiveButton.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_content_ir = require("@ai-matrx/content-ir");
 
 // directives/item-changes.ts
@@ -210,6 +210,64 @@ function itemChanges(item, current, options = {}) {
   return out;
 }
 
+// directives/record-values.ts
+var import_react4 = require("react");
+var revisions = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+function recordRevision(id) {
+  return revisions.get(id) ?? 0;
+}
+function noteRecordChanged(id) {
+  if (!id) return;
+  revisions.set(id, recordRevision(id) + 1);
+  for (const listener of listeners) listener();
+}
+function subscribeRevisions(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function useRecordRevision(id) {
+  return (0, import_react4.useSyncExternalStore)(
+    subscribeRevisions,
+    () => recordRevision(id),
+    () => 0
+  );
+}
+function useRecordValues(read, ref) {
+  const revision = useRecordRevision(ref?.id ?? "");
+  const key = ref && read ? `${ref.noun}:${ref.id}#${revision}` : "";
+  const [result, setResult] = (0, import_react4.useState)({
+    key: "",
+    values: null,
+    status: "idle"
+  });
+  (0, import_react4.useEffect)(() => {
+    if (!key || !read) return;
+    const split = key.indexOf(":");
+    const target = {
+      noun: key.slice(0, split),
+      id: key.slice(split + 1, key.lastIndexOf("#"))
+    };
+    let live = true;
+    setResult({ key, values: null, status: "loading" });
+    read(target).then((values) => {
+      if (!live) return;
+      setResult({ key, values, status: values ? "ready" : "unavailable" });
+    }).catch(() => {
+      if (!live) return;
+      setResult({ key, values: null, status: "unavailable" });
+    });
+    return () => {
+      live = false;
+    };
+  }, [key, read]);
+  if (!key) return { values: null, status: "idle" };
+  if (result.key !== key) return { values: null, status: "loading" };
+  return { values: result.values, status: result.status };
+}
+
 // directives/failure-words.ts
 var PAST = {
   create: "created",
@@ -329,6 +387,41 @@ function classIcon(directiveClass, noun) {
 
 // directives/ApplyDirectiveButton.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function announceChangedRecords(directive, items) {
+  if (!TARGETING_CLASSES.has(directive.directiveClass)) return;
+  for (const item of items) {
+    const id = itemRecordId(item);
+    if (id) noteRecordChanged(id);
+  }
+}
+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 (0, import_react5.useSyncExternalStore)(
+    subscribeOutcomes,
+    () => applyOutcomes.get(host)?.get(identity) ?? null,
+    () => null
+  );
+}
 var FINISH_POLL_MS = 2e3;
 var FINISH_POLLS_MAX = 30;
 function readsApplyLedger(host, directive) {
@@ -348,27 +441,29 @@ function ApplyDirectiveButton({
   const items = directive.items;
   const readsLedger = readsApplyLedger(host, directive);
   const initial = readsLedger ? { status: "checking" } : { status: "idle" };
-  const [state, setState] = (0, import_react4.useState)(initial);
-  const [elapsed, setElapsed] = (0, import_react4.useState)(0);
-  const [askingAgain, setAskingAgain] = (0, import_react4.useState)(false);
-  const startedAt = (0, import_react4.useRef)(null);
+  const [state, setState] = (0, import_react5.useState)(initial);
+  const [elapsed, setElapsed] = (0, import_react5.useState)(0);
+  const [askingAgain, setAskingAgain] = (0, import_react5.useState)(false);
+  const startedAt = (0, import_react5.useRef)(null);
   const identity = JSON.stringify([directive.slug, items, conversationId ?? null]);
-  const [stateFor, setStateFor] = (0, import_react4.useState)(identity);
+  const [stateFor, setStateFor] = (0, import_react5.useState)(identity);
   if (stateFor !== identity) {
     setStateFor(identity);
     setState(initial);
     setAskingAgain(false);
     setElapsed(0);
   }
-  const currentIdentity = (0, import_react4.useRef)(identity);
-  (0, import_react4.useEffect)(() => {
+  const shared = useApplyOutcome(host.confirm ?? EMPTY_AUTHORITY, identity);
+  const view = state.status === "asking" || !shared ? state : shared;
+  const currentIdentity = (0, import_react5.useRef)(identity);
+  (0, import_react5.useEffect)(() => {
     currentIdentity.current = identity;
   }, [identity]);
   const nounText = (0, import_content_ir.nounLabel)(directive.noun, host.nouns);
   const shellKey = readsLedger ? JSON.stringify([directive.slug, items, conversationId ?? null]) : "";
   const read = host.applyState;
   const report = host.reportError;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!shellKey || !read) return;
     const [slug, shellItems, inConversation] = JSON.parse(shellKey);
     const shell = { __kind: slug, items: shellItems };
@@ -413,33 +508,34 @@ function ApplyDirectiveButton({
       if (timer) clearTimeout(timer);
     };
   }, [shellKey, read, report]);
-  const appliedClean = state.status === "applied" && state.failed === 0 ? state : null;
+  const appliedClean = view.status === "applied" && view.failed === 0 ? view : null;
   const appliedBefore = appliedClean ? appliedClean.before : null;
-  const phaseKey = state.status === "checking" || state.status === "finishing" ? "pending" : appliedClean ? `applied:${JSON.stringify(appliedBefore)}` : "open";
-  (0, import_react4.useEffect)(() => {
+  const phaseKey = view.status === "checking" || view.status === "finishing" ? "pending" : appliedClean ? `applied:${JSON.stringify(appliedBefore)}` : "open";
+  (0, import_react5.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]);
-  (0, import_react4.useEffect)(() => {
-    if (state.status !== "applying") return;
-    startedAt.current = Date.now();
+  const applyingSince = view.status === "applying" ? view.startedAt : null;
+  (0, import_react5.useEffect)(() => {
+    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 prior = 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" });
@@ -468,14 +564,20 @@ function ApplyDirectiveButton({
       }
     }
     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({
+      let result;
+      try {
+        result = await confirm(shell);
+      } finally {
+        announceChangedRecords(directive, items);
+      }
+      for (const record of result.records ?? []) noteRecordChanged(record.id);
+      publishOutcome(confirm, askedFor, {
         status: "applied",
         applied: result.applied,
         failed: result.failed,
@@ -487,20 +589,19 @@ function ApplyDirectiveButton({
         // 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__ */ (0, import_jsx_runtime4.jsxs)(
       "span",
       {
@@ -514,26 +615,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__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0", children: state.message ?? `Applied ${state.applied}` })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0", children: view.message ?? `Applied ${view.applied}` })
           ] }),
-          state.copies > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          view.copies > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "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__ */ (0, import_jsx_runtime4.jsx)("span", { className: "inline-flex min-w-0 items-center", children: host.renderRecord?.({
@@ -560,7 +661,7 @@ function ApplyDirectiveButton({
       }
     );
   }
-  if (state.status === "checking") {
+  if (view.status === "checking") {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "span",
       {
@@ -572,7 +673,7 @@ function ApplyDirectiveButton({
       }
     );
   }
-  if (state.status === "finishing") {
+  if (view.status === "finishing") {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "span",
       {
@@ -587,7 +688,7 @@ function ApplyDirectiveButton({
     );
   }
   const destructive = directive.directiveClass === "delete";
-  const muted = nothingToChange && state.status === "idle";
+  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,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -595,17 +696,17 @@ function ApplyDirectiveButton({
       {
         type: "button",
         onClick: () => void handleApply(),
-        disabled: state.status === "applying" || state.status === "asking" || items.length === 0,
+        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__ */ (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" }),
-          state.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
+          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
         ]
       }
     ),
-    state.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    view.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "span",
       {
         className: "inline-flex max-w-sm items-start gap-1 text-xs text-destructive",
@@ -617,14 +718,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
             }
           )
         ]
@@ -636,7 +737,7 @@ function FailureNotice({
   words,
   raw
 }) {
-  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [open, setOpen] = (0, import_react5.useState)(false);
   const detail = raw?.trim() ?? "";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 flex-col gap-0.5", "data-apply-failure": true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "min-w-0", children: [
@@ -747,39 +848,6 @@ function getDirectiveRenderer(directive) {
 // directives/SideEffectDirectiveCard.tsx
 var import_react6 = require("react");
 var import_content_ir5 = require("@ai-matrx/content-ir");
-
-// directives/record-values.ts
-var import_react5 = require("react");
-function useRecordValues(read, ref) {
-  const key = ref && read ? `${ref.noun}:${ref.id}` : "";
-  const [result, setResult] = (0, import_react5.useState)({
-    key: "",
-    values: null,
-    status: "idle"
-  });
-  (0, import_react5.useEffect)(() => {
-    if (!key || !read) return;
-    const split = key.indexOf(":");
-    const target = { noun: key.slice(0, split), id: key.slice(split + 1) };
-    let live = true;
-    setResult({ key, values: null, status: "loading" });
-    read(target).then((values) => {
-      if (!live) return;
-      setResult({ key, values, status: values ? "ready" : "unavailable" });
-    }).catch(() => {
-      if (!live) return;
-      setResult({ key, values: null, status: "unavailable" });
-    });
-    return () => {
-      live = false;
-    };
-  }, [key, read]);
-  if (!key) return { values: null, status: "idle" };
-  if (result.key !== key) return { values: null, status: "loading" };
-  return { values: result.values, status: result.status };
-}
-
-// directives/SideEffectDirectiveCard.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ROWS_BEFORE_FOLD = 3;
 function ItemRow({