@ai-matrx/content-ir-react 0.11.11 → 0.12.1

package/dist/react.cjs

@@ -115,16 +115,73 @@ function useContentIrKindVersion(kind, sources) {
 
 // react/KindInstanceRender.tsx
 var import_react6 = require("react");
-var import_content_ir7 = require("@ai-matrx/content-ir");
+var import_content_ir8 = require("@ai-matrx/content-ir");
 
 // directives/DirectiveRender.tsx
-var import_content_ir5 = require("@ai-matrx/content-ir");
+var import_content_ir6 = require("@ai-matrx/content-ir");
 
 // directives/DirectiveFallbackCard.tsx
-var import_content_ir = require("@ai-matrx/content-ir");
+var import_content_ir2 = require("@ai-matrx/content-ir");
 
 // directives/ApplyDirectiveButton.tsx
 var import_react4 = require("react");
+var import_content_ir = require("@ai-matrx/content-ir");
+
+// directives/item-changes.ts
+var import_uuid = require("@ai-matrx/kit/uuid");
+var TARGETING_CLASSES = /* @__PURE__ */ new Set(["update", "delete"]);
+var NOT_A_CHANGE = /* @__PURE__ */ new Set(["__kind", "id"]);
+var CHANGE_VALUE_MAX = 60;
+function itemRecordId(item) {
+  const id = item.id;
+  if (typeof id === "string" && id.trim()) return id.trim();
+  if (typeof id === "number") return String(id);
+  return null;
+}
+function fieldLabel(key) {
+  const spaced = key.replace(/_/g, " ").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+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 };
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return { value: "cleared", full: "cleared", clears: true };
+    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 };
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return { value: String(value), full: String(value), clears: false };
+  }
+  if (Array.isArray(value)) {
+    const n2 = value.length;
+    const text2 = n2 === 0 ? "cleared" : `${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"}`;
+  return { value: text, full: safeJson(value), clears: n === 0 };
+}
+function safeJson(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function itemChanges(item) {
+  const out = [];
+  for (const [key, raw] of Object.entries(item)) {
+    if (NOT_A_CHANGE.has(key)) continue;
+    out.push({ key, label: fieldLabel(key), ...describeValue(raw) });
+  }
+  return out;
+}
 
 // directives/icons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -242,10 +299,38 @@ function ApplyDirectiveButton({
   const items = directive.items;
   async function handleApply() {
     if (!confirm) return;
+    if (host.ask) {
+      setState({ status: "asking" });
+      let ok = false;
+      try {
+        ok = await host.ask({
+          directive,
+          items,
+          nounLabel: (0, import_content_ir.nounLabel)(directive.noun, host.nouns)
+        });
+      } catch (error) {
+        setState({
+          status: "error",
+          message: error instanceof Error && error.message ? error.message : "We could not ask you to confirm this, so nothing was done."
+        });
+        return;
+      }
+      if (!ok) {
+        setState({ status: "idle" });
+        return;
+      }
+    }
+    setElapsed(0);
     setState({ status: "applying" });
     try {
       const result = await confirm({ __kind: directive.slug, items });
-      setState({ status: "applied", applied: result.applied, failed: result.failed });
+      setState({
+        status: "applied",
+        applied: result.applied,
+        failed: result.failed,
+        message: result.message?.trim() ? result.message.trim() : null,
+        records: result.records ?? []
+      });
       onApplied?.();
     } catch (error) {
       setState({
@@ -256,15 +341,26 @@ function ApplyDirectiveButton({
   }
   if (state.status === "applied") {
     const bad = state.failed > 0;
+    const trashed = directive.directiveClass === "delete";
+    const label2 = (0, import_content_ir.nounLabel)(directive.noun, host.nouns);
+    const records = host.renderRecord ? state.records : [];
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "span",
       {
-        className: `inline-flex items-center gap-1 text-xs ${bad ? "text-destructive" : "text-primary"}`,
+        className: `inline-flex min-w-0 flex-wrap items-center gap-1 text-xs ${bad ? "text-destructive" : "text-primary"}`,
+        "data-apply-state": "applied",
         children: [
-          bad ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlertIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckCircleIcon, { className: "h-3.5 w-3.5" }),
-          "Applied ",
-          state.applied,
-          bad ? ` \xB7 ${state.failed} failed` : ""
+          bad ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlertIcon, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckCircleIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+            state.message ?? `Applied ${state.applied}`,
+            bad && !state.message ? ` \xB7 ${state.failed} failed` : ""
+          ] }),
+          records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "inline-flex min-w-0 items-center", children: host.renderRecord?.({
+            ...record,
+            fallback: recordFallbackName(label2, record.id),
+            context: "applied",
+            trashed
+          }) }, `${record.noun}:${record.id}`))
         ]
       }
     );
@@ -275,7 +371,7 @@ function ApplyDirectiveButton({
       {
         type: "button",
         onClick: () => void handleApply(),
-        disabled: state.status === "applying" || items.length === 0,
+        disabled: state.status === "applying" || state.status === "asking" || items.length === 0,
         className: "inline-flex items-center gap-1 rounded-md border border-border bg-background px-2 py-1 text-xs font-medium hover:bg-accent disabled:opacity-50",
         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" }),
@@ -295,7 +391,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function DirectiveFallbackCard({ directive, reason }) {
   const host = useDirectiveHost();
   const count = directive.items.length;
-  const display = (0, import_content_ir.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  const display = (0, import_content_ir2.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "my-3 inline-flex flex-wrap items-center gap-2 rounded-md border border-border bg-muted px-2.5 py-1 text-sm", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BoxesIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-foreground", children: display.title }),
@@ -318,7 +414,7 @@ function DirectiveFallbackCard({ directive, reason }) {
 }
 
 // directives/DirectiveProvisionalCard.tsx
-var import_content_ir2 = require("@ai-matrx/content-ir");
+var import_content_ir3 = require("@ai-matrx/content-ir");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var COMPLETE_SLUG_RE = /^\{\s*"__kind"\s*:\s*"([^"]+)"/;
 function provisionalDirectiveSlug(content) {
@@ -328,8 +424,8 @@ function provisionalDirectiveSlug(content) {
 function DirectiveProvisionalCard({ content, streaming, className }) {
   const host = useDirectiveHost();
   const slug = provisionalDirectiveSlug(content);
-  const known = slug ? (0, import_content_ir2.parseDirectiveSlug)(slug) : null;
-  const display = known ? (0, import_content_ir2.directiveDisplay)(known.directiveClass, known.noun, host.nouns) : null;
+  const known = slug ? (0, import_content_ir3.parseDirectiveSlug)(slug) : null;
+  const display = known ? (0, import_content_ir3.directiveDisplay)(known.directiveClass, known.noun, host.nouns) : null;
   const Icon = known ? classIcon(known.directiveClass, known.noun) : BoxesIcon;
   const title = display?.title ?? "Structured action";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -358,7 +454,7 @@ function DirectiveProvisionalCard({ content, streaming, className }) {
 }
 
 // directives/registry.ts
-var import_content_ir3 = require("@ai-matrx/content-ir");
+var import_content_ir4 = require("@ai-matrx/content-ir");
 var REGISTRY_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.content-ir-react.directive-renderers");
 var registry = globalThis[REGISTRY_SLOT] ??= {
   bySlug: /* @__PURE__ */ new Map(),
@@ -370,7 +466,7 @@ function getDirectiveRenderer(directive) {
 
 // directives/SideEffectDirectiveCard.tsx
 var import_react5 = require("react");
-var import_content_ir4 = require("@ai-matrx/content-ir");
+var import_content_ir5 = require("@ai-matrx/content-ir");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ROWS_BEFORE_FOLD = 3;
 function ItemRow({
@@ -380,12 +476,16 @@ function ItemRow({
   total
 }) {
   const host = useDirectiveHost();
-  const titleColumn = (0, import_content_ir4.nounTitleColumn)(directive.noun, host.nouns);
-  const title = (0, import_content_ir4.itemTitle)(item, titleColumn, index, total);
-  const subtitle = (0, import_content_ir4.itemSubtitle)(item);
-  const facts = (0, import_content_ir4.itemFacts)(item);
+  const recordId = TARGETING_CLASSES.has(directive.directiveClass) ? itemRecordId(item) : null;
+  if (recordId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TargetRow, { directive, item, recordId });
+  }
+  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 kind = host.itemKind?.(directive.slug) ?? null;
-  const display = (0, import_content_ir4.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  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 }),
@@ -404,7 +504,7 @@ function ItemRow({
         type: "button",
         onClick: () => openItem({
           // Stamped so the panel's kind pipeline types it from its own first key.
-          item: (0, import_content_ir4.asKindInstance)(item, kind) ?? item,
+          item: (0, import_content_ir5.asKindInstance)(item, kind) ?? item,
           itemKind: kind,
           title,
           subtitle: `${display.title} \xB7 item ${index + 1} of ${total}`,
@@ -420,12 +520,47 @@ function ItemRow({
     host.renderCopy?.({ label: title, value: item, kind, size: "xs" })
   ] });
 }
+function TargetRow({
+  directive,
+  item,
+  recordId
+}) {
+  const host = useDirectiveHost();
+  const fallback = recordFallbackName((0, import_content_ir5.nounLabel)(directive.noun, host.nouns), recordId);
+  const changes = directive.directiveClass === "update" ? itemChanges(item) : [];
+  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" })
+    ] }),
+    directive.directiveClass === "update" ? changes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "px-1 text-[11px] text-muted-foreground", children: "Sets no fields \u2014 nothing would change." }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "mt-0.5 space-y-0.5 px-1", children: changes.map((change) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "li",
+      {
+        className: "flex min-w-0 items-baseline gap-1.5 text-[11px]",
+        title: `${change.label} \u2192 ${change.full}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-muted-foreground", children: change.label }),
+          /* @__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"}`,
+              children: change.value
+            }
+          )
+        ]
+      },
+      change.key
+    )) }) : null
+  ] });
+}
 function SideEffectDirectiveCard({ directive }) {
   const host = useDirectiveHost();
   const [expanded, setExpanded] = (0, import_react5.useState)(false);
   const items = directive.items;
   const total = items.length;
-  const display = (0, import_content_ir4.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  const display = (0, import_content_ir5.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   const Icon = classIcon(directive.directiveClass, directive.noun);
   const shown = expanded ? items : items.slice(0, ROWS_BEFORE_FOLD);
   const hidden = total - shown.length;
@@ -475,13 +610,13 @@ function isWholeJson(content) {
 }
 function DirectiveRender({ content, className, streaming }) {
   const host = useDirectiveHost();
-  const directive = (0, import_content_ir5.tryDecodeDirectiveContent)(content, (message) => {
+  const directive = (0, import_content_ir6.tryDecodeDirectiveContent)(content, (message) => {
     const line = `[kind-directives] ${message}`;
     if (host.reportError) host.reportError(line);
     else console.error(line);
   });
   if (!directive) {
-    if (typeof content === "string" && (0, import_content_ir5.looksLikeDirectiveHead)(content) && !isWholeJson(content)) {
+    if (typeof content === "string" && (0, import_content_ir6.looksLikeDirectiveHead)(content) && !isWholeJson(content)) {
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DirectiveProvisionalCard, { content, streaming: streaming !== false, className });
     }
     const raw = typeof content === "string" ? content : JSON.stringify(content, null, 2);
@@ -500,7 +635,7 @@ function DirectiveRender({ content, className, streaming }) {
 }
 
 // route/kind-route.ts
-var import_content_ir6 = require("@ai-matrx/content-ir");
+var import_content_ir7 = require("@ai-matrx/content-ir");
 var IR_ROUTE_KEY = "__ir_route";
 var GENERIC_STRUCTURED_COMPONENT_KEY = "generic_structured";
 var SOURCELESS_DB_ROW_SLOT = /* @__PURE__ */ Symbol.for(
@@ -524,14 +659,14 @@ function isRecordValue(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function kindIsRoutable(kind, host) {
-  if ((0, import_content_ir7.isReservedDirectiveSlug)(kind)) return true;
+  if ((0, import_content_ir8.isReservedDirectiveSlug)(kind)) return true;
   if (host.kinds.getDefinition(kind)?.legacyBlockType) return true;
   const resolution = host.components.resolve(kind, host.platform, "output");
   if (!resolution?.isActive) return false;
   return resolution.componentKey !== GENERIC_STRUCTURED_COMPONENT_KEY;
 }
 function KindInstanceRender(props) {
-  if ((0, import_content_ir7.isReservedDirectiveSlug)(props.kind)) {
+  if ((0, import_content_ir8.isReservedDirectiveSlug)(props.kind)) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       DirectiveRender,
       {
@@ -586,7 +721,7 @@ function KindInstanceRenderInner({
     content: JSON.stringify(value, null, 2),
     language: "json",
     metadata: {
-      [import_content_ir7.IR_ENVELOPE_KEY]: (0, import_content_ir7.envelopeFromCompleteValue)(value, kind)
+      [import_content_ir8.IR_ENVELOPE_KEY]: (0, import_content_ir8.envelopeFromCompleteValue)(value, kind)
     }
   } : null;
   const frameClass = variant === "bare" ? void 0 : "rounded-md border border-border bg-card p-3";
@@ -605,7 +740,7 @@ function KindInstanceRenderInner({
 var import_react7 = __toESM(require("react"), 1);
 
 // route/partial-kind-route.ts
-var import_content_ir8 = require("@ai-matrx/content-ir");
+var import_content_ir9 = require("@ai-matrx/content-ir");
 var PARTIAL_UNSAFE_SLOT = /* @__PURE__ */ Symbol.for(
   "ai-matrx.content-ir-react.partial-unsafe-kinds"
 );
@@ -653,12 +788,12 @@ function ProvisionalKindFrame({ children }) {
 
 // react/GenericStructuredView.tsx
 var import_react8 = require("react");
-var import_content_ir9 = require("@ai-matrx/content-ir");
+var import_content_ir10 = require("@ai-matrx/content-ir");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function readStructuredValue(content, metadata) {
-  const envelope = (0, import_content_ir9.readEnvelope)(metadata);
+  const envelope = (0, import_content_ir10.readEnvelope)(metadata);
   if (envelope) {
-    return { value: (0, import_content_ir9.reconstructRegionValue)(envelope), recovered: true };
+    return { value: (0, import_content_ir10.reconstructRegionValue)(envelope), recovered: true };
   }
   try {
     return { value: JSON.parse(content), recovered: true };
@@ -673,10 +808,10 @@ function GenericStructuredView({
   className
 }) {
   const host = useContentIrHost();
-  const envelope = (0, import_content_ir9.readEnvelope)(metadata);
+  const envelope = (0, import_content_ir10.readEnvelope)(metadata);
   const status = envelope?.root.status ?? "complete";
   const { value, recovered } = readStructuredValue(content, metadata);
-  const kind = envelope?.root.kind ?? (typeof value === "object" && value !== null && !Array.isArray(value) ? (0, import_content_ir9.readObjectKind)(value) : null) ?? "";
+  const kind = envelope?.root.kind ?? (typeof value === "object" && value !== null && !Array.isArray(value) ? (0, import_content_ir10.readObjectKind)(value) : null) ?? "";
   const marker = readIrRouteMarker(metadata);
   const note = marker?.reason === "inactive" ? "a custom view is registered but held inactive" : marker?.reason === "broken-instance" ? "this instance did not match the shape's schema" : marker?.reason === "unregistered" ? "this shape isn't registered on this platform" : "no custom view yet";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: className ? `my-2 min-w-0 ${className}` : "my-2 min-w-0", children: [
@@ -690,7 +825,7 @@ function GenericStructuredView({
 }
 
 // react/RuntimeWrapperViews.tsx
-var import_content_ir10 = require("@ai-matrx/content-ir");
+var import_content_ir11 = require("@ai-matrx/content-ir");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -712,7 +847,7 @@ function DelegatedOutput({
   if (!isRecord2(output)) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: host.renderValue({ value: output }) });
   }
-  const kind = (0, import_content_ir10.readObjectKind)(output) ?? declaredKind;
+  const kind = (0, import_content_ir11.readObjectKind)(output) ?? declaredKind;
   if (!kind) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: fallback?.(output) ?? host.renderValue({ value: output }) });
   }
@@ -730,7 +865,7 @@ function DelegatedOutput({
 function NodeOutcomeView({ serverData, fallback }) {
   const wrapper = readWrapperFrom(
     serverData,
-    import_content_ir10.readNodeOutcomeValue
+    import_content_ir11.readNodeOutcomeValue
   );
   if (!wrapper) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -745,7 +880,7 @@ function NodeOutcomeView({ serverData, fallback }) {
 function RunResultView({ serverData, fallback }) {
   const wrapper = readWrapperFrom(
     serverData,
-    import_content_ir10.readRunResultValue
+    import_content_ir11.readRunResultValue
   );
   if (!wrapper) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-2", children: wrapper.outputs.length > 0 ? wrapper.outputs.map((outcome) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(