@ai-matrx/content-ir-react 0.11.10 → 0.12.0

package/dist/index.js

@@ -708,13 +708,70 @@ import {
 } from "@ai-matrx/content-ir";
 
 // directives/DirectiveRender.tsx
-import { tryDecodeDirectiveContent } from "@ai-matrx/content-ir";
+import { looksLikeDirectiveHead, tryDecodeDirectiveContent } from "@ai-matrx/content-ir";
 
 // directives/DirectiveFallbackCard.tsx
 import { directiveDisplay } from "@ai-matrx/content-ir";
 
 // directives/ApplyDirectiveButton.tsx
 import { useEffect, useRef, useState } from "react";
+import { nounLabel } from "@ai-matrx/content-ir";
+
+// directives/item-changes.ts
+var TARGETING_CLASSES = /* @__PURE__ */ new Set(["update", "delete"]);
+var NOT_A_CHANGE = /* @__PURE__ */ new Set(["__kind", "id"]);
+var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+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 = UUID_RE.test(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
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
@@ -832,10 +889,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: 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({
@@ -846,15 +931,26 @@ function ApplyDirectiveButton({
   }
   if (state.status === "applied") {
     const bad = state.failed > 0;
+    const trashed = directive.directiveClass === "delete";
+    const label2 = nounLabel(directive.noun, host.nouns);
+    const records = host.renderRecord ? state.records : [];
     return /* @__PURE__ */ jsxs2(
       "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__ */ jsx4(AlertIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx4(CheckCircleIcon, { className: "h-3.5 w-3.5" }),
-          "Applied ",
-          state.applied,
-          bad ? ` \xB7 ${state.failed} failed` : ""
+          bad ? /* @__PURE__ */ jsx4(AlertIcon, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ jsx4(CheckCircleIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            state.message ?? `Applied ${state.applied}`,
+            bad && !state.message ? ` \xB7 ${state.failed} failed` : ""
+          ] }),
+          records.map((record) => /* @__PURE__ */ jsx4("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}`))
         ]
       }
     );
@@ -865,7 +961,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__ */ jsx4(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx4(PlayIcon, { className: "h-3.5 w-3.5" }),
@@ -907,6 +1003,46 @@ function DirectiveFallbackCard({ directive, reason }) {
   ] });
 }
 
+// directives/DirectiveProvisionalCard.tsx
+import { directiveDisplay as directiveDisplay2, parseDirectiveSlug } from "@ai-matrx/content-ir";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var COMPLETE_SLUG_RE = /^\{\s*"__kind"\s*:\s*"([^"]+)"/;
+function provisionalDirectiveSlug(content) {
+  const match = content.trimStart().match(COMPLETE_SLUG_RE);
+  return match?.[1] ?? null;
+}
+function DirectiveProvisionalCard({ content, streaming, className }) {
+  const host = useDirectiveHost();
+  const slug = provisionalDirectiveSlug(content);
+  const known = slug ? parseDirectiveSlug(slug) : null;
+  const display = known ? directiveDisplay2(known.directiveClass, known.noun, host.nouns) : null;
+  const Icon = known ? classIcon(known.directiveClass, known.noun) : BoxesIcon;
+  const title = display?.title ?? "Structured action";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `my-3 rounded-md border border-border bg-card px-2.5 py-1.5${className ? ` ${className}` : ""}`,
+      "data-directive": slug ?? void 0,
+      "data-directive-state": streaming ? "streaming" : "incomplete",
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ jsx6(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-foreground", children: title }),
+          display?.family ? /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: display.family }) : null,
+          streaming ? /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", role: "status", children: [
+            /* @__PURE__ */ jsx6("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-primary", "aria-hidden": true }),
+            "Writing\u2026"
+          ] }) : /* @__PURE__ */ jsx6("span", { className: "text-xs text-destructive", role: "status", children: "Cut off before it finished \u2014 nothing can be applied." })
+        ] }),
+        streaming ? null : /* @__PURE__ */ jsxs4("details", { className: "mt-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer select-none hover:text-foreground", children: "Show what arrived" }),
+          /* @__PURE__ */ jsx6("pre", { className: "mt-1 max-h-64 overflow-auto whitespace-pre-wrap break-all rounded bg-muted px-2 py-1 text-[11px]", children: content })
+        ] })
+      ]
+    }
+  );
+}
+
 // directives/registry.ts
 import {
   buildDirectiveSlug
@@ -932,13 +1068,14 @@ function resetDirectiveRenderers() {
 import { useState as useState2 } from "react";
 import {
   asKindInstance,
-  directiveDisplay as directiveDisplay2,
+  directiveDisplay as directiveDisplay3,
   itemFacts,
   itemSubtitle,
   itemTitle,
+  nounLabel as nounLabel2,
   nounTitleColumn
 } from "@ai-matrx/content-ir";
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var ROWS_BEFORE_FOLD = 3;
 function ItemRow({
   directive,
@@ -947,25 +1084,29 @@ function ItemRow({
   total
 }) {
   const host = useDirectiveHost();
+  const recordId = TARGETING_CLASSES.has(directive.directiveClass) ? itemRecordId(item) : null;
+  if (recordId) {
+    return /* @__PURE__ */ jsx7(TargetRow, { directive, item, recordId });
+  }
   const titleColumn = nounTitleColumn(directive.noun, host.nouns);
   const title = itemTitle(item, titleColumn, index, total);
   const subtitle = itemSubtitle(item);
   const facts = itemFacts(item);
   const kind = host.itemKind?.(directive.slug) ?? null;
-  const display = directiveDisplay2(directive.directiveClass, directive.noun, host.nouns);
+  const display = directiveDisplay3(directive.directiveClass, directive.noun, host.nouns);
   const openItem = host.openItem;
-  const body = /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx6("span", { className: "min-w-0 shrink-0 truncate font-medium text-foreground", children: title }),
-    /* @__PURE__ */ jsx6("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ jsxs4("span", { className: "truncate text-[11px] text-muted-foreground", children: [
+  const body = /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx7("span", { className: "min-w-0 shrink-0 truncate font-medium text-foreground", children: title }),
+    /* @__PURE__ */ jsx7("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ jsxs5("span", { className: "truncate text-[11px] text-muted-foreground", children: [
       fact.value,
       " ",
       fact.label
     ] }, fact.key)) }),
-    subtitle && facts.length === 0 ? /* @__PURE__ */ jsx6("span", { className: "hidden truncate text-[11px] text-muted-foreground sm:inline", children: subtitle }) : null,
-    openItem ? /* @__PURE__ */ jsx6(MaximizeIcon, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" }) : null
+    subtitle && facts.length === 0 ? /* @__PURE__ */ jsx7("span", { className: "hidden truncate text-[11px] text-muted-foreground sm:inline", children: subtitle }) : null,
+    openItem ? /* @__PURE__ */ jsx7(MaximizeIcon, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" }) : null
   ] });
-  return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
-    openItem ? /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
+    openItem ? /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -983,46 +1124,81 @@ function ItemRow({
         title: "Open to read it",
         children: body
       }
-    ) : /* @__PURE__ */ jsx6("span", { className: "flex min-w-0 flex-1 items-center gap-2 px-1 py-0.5", children: body }),
+    ) : /* @__PURE__ */ jsx7("span", { className: "flex min-w-0 flex-1 items-center gap-2 px-1 py-0.5", children: body }),
     host.renderCopy?.({ label: title, value: item, kind, size: "xs" })
   ] });
 }
+function TargetRow({
+  directive,
+  item,
+  recordId
+}) {
+  const host = useDirectiveHost();
+  const fallback = recordFallbackName(nounLabel2(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__ */ 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: [
+      /* @__PURE__ */ jsx7("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__ */ jsx7("p", { className: "px-1 text-[11px] text-muted-foreground", children: "Sets no fields \u2014 nothing would change." }) : /* @__PURE__ */ jsx7("ul", { className: "mt-0.5 space-y-0.5 px-1", children: changes.map((change) => /* @__PURE__ */ jsxs5(
+      "li",
+      {
+        className: "flex min-w-0 items-baseline gap-1.5 text-[11px]",
+        title: `${change.label} \u2192 ${change.full}`,
+        children: [
+          /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-muted-foreground", children: change.label }),
+          /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
+          /* @__PURE__ */ jsx7(
+            "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] = useState2(false);
   const items = directive.items;
   const total = items.length;
-  const display = directiveDisplay2(directive.directiveClass, directive.noun, host.nouns);
+  const display = directiveDisplay3(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;
-  return /* @__PURE__ */ jsxs4("div", { className: "my-3 rounded-md border border-border bg-card px-2.5 py-1.5", "data-directive": directive.slug, children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
-      /* @__PURE__ */ jsx6(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-foreground", children: display.title }),
-      display.family ? /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: display.family }) : null,
-      /* @__PURE__ */ jsxs4("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+  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: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ jsx7(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-foreground", children: display.title }),
+      display.family ? /* @__PURE__ */ jsx7("span", { className: "text-xs text-muted-foreground", children: display.family }) : null,
+      /* @__PURE__ */ jsxs5("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
         total,
         " ",
         total === 1 ? "item" : "items"
       ] }),
-      /* @__PURE__ */ jsxs4("div", { className: "ml-auto flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "ml-auto flex items-center gap-1", children: [
         host.renderCopy?.({ label: display.title, value: directive.shell, size: "icon" }),
-        /* @__PURE__ */ jsx6(ApplyDirectiveButton, { directive, itemCount: total })
+        /* @__PURE__ */ jsx7(ApplyDirectiveButton, { directive, itemCount: total })
       ] })
     ] }),
     total === 0 ? (
       // Stated, never silent: an empty batch is a real (and suspicious) state.
-      /* @__PURE__ */ jsx6("p", { className: "mt-1 text-xs text-muted-foreground", children: "No items \u2014 nothing would be written." })
-    ) : /* @__PURE__ */ jsx6("div", { className: "mt-0.5 divide-y divide-border/60", children: shown.map((item, i) => /* @__PURE__ */ jsx6(ItemRow, { directive, item, index: i, total }, i)) }),
-    hidden > 0 || expanded ? /* @__PURE__ */ jsxs4(
+      /* @__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)) }),
+    hidden > 0 || expanded ? /* @__PURE__ */ jsxs5(
       "button",
       {
         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",
         children: [
-          expanded ? /* @__PURE__ */ jsx6(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx6(ChevronRightIcon, { className: "h-3 w-3" }),
+          expanded ? /* @__PURE__ */ jsx7(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx7(ChevronRightIcon, { className: "h-3 w-3" }),
           expanded ? "Show less" : `Show ${hidden} more`
         ]
       }
@@ -1031,8 +1207,16 @@ function SideEffectDirectiveCard({ directive }) {
 }
 
 // directives/DirectiveRender.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function DirectiveRender({ content, className }) {
+import { jsx as jsx8 } from "react/jsx-runtime";
+function isWholeJson(content) {
+  try {
+    JSON.parse(content);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function DirectiveRender({ content, className, streaming }) {
   const host = useDirectiveHost();
   const directive = tryDecodeDirectiveContent(content, (message) => {
     const line = `[kind-directives] ${message}`;
@@ -1040,8 +1224,11 @@ function DirectiveRender({ content, className }) {
     else console.error(line);
   });
   if (!directive) {
+    if (typeof content === "string" && looksLikeDirectiveHead(content) && !isWholeJson(content)) {
+      return /* @__PURE__ */ jsx8(DirectiveProvisionalCard, { content, streaming: streaming !== false, className });
+    }
     const raw = typeof content === "string" ? content : JSON.stringify(content, null, 2);
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "pre",
       {
         className: `my-3 overflow-x-auto rounded-md border border-border bg-muted px-3 py-2 text-xs text-muted-foreground${className ? ` ${className}` : ""}`,
@@ -1050,13 +1237,13 @@ function DirectiveRender({ content, className }) {
     );
   }
   const Renderer = getDirectiveRenderer(directive);
-  if (Renderer) return /* @__PURE__ */ jsx7(Renderer, { directive });
-  if (directive.parsed.executes) return /* @__PURE__ */ jsx7(SideEffectDirectiveCard, { directive });
-  return /* @__PURE__ */ jsx7(DirectiveFallbackCard, { directive });
+  if (Renderer) return /* @__PURE__ */ jsx8(Renderer, { directive });
+  if (directive.parsed.executes) return /* @__PURE__ */ jsx8(SideEffectDirectiveCard, { directive });
+  return /* @__PURE__ */ jsx8(DirectiveFallbackCard, { directive });
 }
 
 // react/KindInstanceRender.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function isRecordValue(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -1069,7 +1256,7 @@ function kindIsRoutable(kind, host) {
 }
 function KindInstanceRender(props) {
   if (isReservedDirectiveSlug2(props.kind)) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       DirectiveRender,
       {
         content: props.value,
@@ -1077,7 +1264,7 @@ function KindInstanceRender(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx8(KindInstanceRenderInner, { ...props });
+  return /* @__PURE__ */ jsx9(KindInstanceRenderInner, { ...props });
 }
 function KindInstanceRenderInner({
   kind,
@@ -1128,19 +1315,19 @@ function KindInstanceRenderInner({
   } : null;
   const frameClass = variant === "bare" ? void 0 : "rounded-md border border-border bg-card p-3";
   if (routingStatus === "unroutable" && unroutableFallback !== void 0) {
-    return /* @__PURE__ */ jsx8(Fragment2, { children: unroutableFallback });
+    return /* @__PURE__ */ jsx9(Fragment2, { children: unroutableFallback });
   }
   const onTheFloor = block === null || routingStatus === "unroutable";
   const notice = "This shape has no custom component yet, so it renders through the universal viewer \u2014 exactly what production shows today.";
-  return /* @__PURE__ */ jsxs5("div", { className: className ? `space-y-3 ${className}` : "space-y-3", children: [
-    showRoutingNote && routingStatus === "unroutable" ? host.renderNotice?.(notice) ?? /* @__PURE__ */ jsx8("div", { className: "rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-800 dark:text-amber-200", children: notice }) : null,
-    /* @__PURE__ */ jsx8("div", { className: frameClass, children: onTheFloor ? host.renderValue({ value, kind }) : host.renderBlock(block) })
+  return /* @__PURE__ */ jsxs6("div", { className: className ? `space-y-3 ${className}` : "space-y-3", children: [
+    showRoutingNote && routingStatus === "unroutable" ? host.renderNotice?.(notice) ?? /* @__PURE__ */ jsx9("div", { className: "rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-800 dark:text-amber-200", children: notice }) : null,
+    /* @__PURE__ */ jsx9("div", { className: frameClass, children: onTheFloor ? host.renderValue({ value, kind }) : host.renderBlock(block) })
   ] });
 }
 
 // react/ProvisionalKindBoundary.tsx
 import React from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var ProvisionalKindBoundaryInner = class extends React.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
@@ -1165,14 +1352,14 @@ var ProvisionalKindBoundaryInner = class extends React.Component {
 };
 function ProvisionalKindBoundary(props) {
   const host = useContentIrHost();
-  return /* @__PURE__ */ jsx9(ProvisionalKindBoundaryInner, { ...props, reportError: host.reportError });
+  return /* @__PURE__ */ jsx10(ProvisionalKindBoundaryInner, { ...props, reportError: host.reportError });
 }
 function ProvisionalKindFrame({ children }) {
   const host = useContentIrHost();
   const label = "Still arriving";
-  return /* @__PURE__ */ jsxs6("div", { className: "relative", "aria-busy": "true", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "relative", "aria-busy": "true", children: [
     children,
-    /* @__PURE__ */ jsx9("span", { className: "pointer-events-none absolute -top-2 right-4 z-10 select-none rounded-full bg-background px-1.5 leading-4", children: host.renderShimmer?.(label) ?? /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-muted-foreground", children: label }) })
+    /* @__PURE__ */ jsx10("span", { className: "pointer-events-none absolute -top-2 right-4 z-10 select-none rounded-full bg-background px-1.5 leading-4", children: host.renderShimmer?.(label) ?? /* @__PURE__ */ jsx10("span", { className: "text-[10px] text-muted-foreground", children: label }) })
   ] });
 }
 
@@ -1183,7 +1370,7 @@ import {
   readObjectKind as readObjectKind3,
   reconstructRegionValue
 } from "@ai-matrx/content-ir";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function readStructuredValue(content, metadata) {
   const envelope = readEnvelope3(metadata);
   if (envelope) {
@@ -1208,19 +1395,19 @@ function GenericStructuredView({
   const kind = envelope?.root.kind ?? (typeof value === "object" && value !== null && !Array.isArray(value) ? readObjectKind3(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__ */ jsxs7("div", { className: className ? `my-2 min-w-0 ${className}` : "my-2 min-w-0", children: [
-    status === "streaming" ? streamingIndicator ?? /* @__PURE__ */ jsx10("div", { className: "mb-2 text-xs text-muted-foreground", children: "Still arriving\u2026" }) : null,
+  return /* @__PURE__ */ jsxs8("div", { className: className ? `my-2 min-w-0 ${className}` : "my-2 min-w-0", children: [
+    status === "streaming" ? streamingIndicator ?? /* @__PURE__ */ jsx11("div", { className: "mb-2 text-xs text-muted-foreground", children: "Still arriving\u2026" }) : null,
     recovered ? host.renderValue({ value, ...kind ? { kind } : {}, note }) : (
       // Zero-data-loss backstop: the region never parsed, so show the source
       // verbatim rather than swallowing it.
-      /* @__PURE__ */ jsx10("pre", { className: "max-h-96 overflow-auto font-mono text-xs leading-relaxed text-muted-foreground", children: content })
+      /* @__PURE__ */ jsx11("pre", { className: "max-h-96 overflow-auto font-mono text-xs leading-relaxed text-muted-foreground", children: content })
     )
   ] });
 }
 
 // react/RuntimeWrapperViews.tsx
 import { readNodeOutcomeValue, readObjectKind as readObjectKind4, readRunResultValue } from "@ai-matrx/content-ir";
-import { Fragment as Fragment3, jsx as jsx11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12 } from "react/jsx-runtime";
 function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -1236,16 +1423,16 @@ function DelegatedOutput({
 }) {
   const host = useContentIrHost();
   if (output === null || output === void 0) {
-    return /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground", children: emptyLabel });
+    return /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground", children: emptyLabel });
   }
   if (!isRecord2(output)) {
-    return /* @__PURE__ */ jsx11(Fragment3, { children: host.renderValue({ value: output }) });
+    return /* @__PURE__ */ jsx12(Fragment3, { children: host.renderValue({ value: output }) });
   }
   const kind = readObjectKind4(output) ?? declaredKind;
   if (!kind) {
-    return /* @__PURE__ */ jsx11(Fragment3, { children: fallback?.(output) ?? host.renderValue({ value: output }) });
+    return /* @__PURE__ */ jsx12(Fragment3, { children: fallback?.(output) ?? host.renderValue({ value: output }) });
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     KindInstanceRender,
     {
       kind,
@@ -1262,7 +1449,7 @@ function NodeOutcomeView({ serverData, fallback }) {
     readNodeOutcomeValue
   );
   if (!wrapper) return null;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     DelegatedOutput,
     {
       output: wrapper.output,
@@ -1277,14 +1464,14 @@ function RunResultView({ serverData, fallback }) {
     readRunResultValue
   );
   if (!wrapper) return null;
-  return /* @__PURE__ */ jsx11("div", { className: "space-y-2", children: wrapper.outputs.length > 0 ? wrapper.outputs.map((outcome) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("div", { className: "space-y-2", children: wrapper.outputs.length > 0 ? wrapper.outputs.map((outcome) => /* @__PURE__ */ jsx12(
     NodeOutcomeView,
     {
       serverData: { wrapper: outcome },
       ...fallback === void 0 ? {} : { fallback }
     },
     `${outcome.node_id}:${outcome.attempt}`
-  )) : /* @__PURE__ */ jsx11(
+  )) : /* @__PURE__ */ jsx12(
     DelegatedOutput,
     {
       output: wrapper.output,
@@ -1482,6 +1669,7 @@ var DbKindComponentErrorBoundary = class extends React2.Component {
 };
 export {
   ApplyDirectiveButton,
+  CHANGE_VALUE_MAX,
   ComponentResolver,
   ContentIrRenderProvider,
   DB_KIND_COMPONENT_KEY,
@@ -1490,6 +1678,7 @@ export {
   DelegatedOutput,
   DirectiveFallbackCard,
   DirectiveHostProvider,
+  DirectiveProvisionalCard,
   DirectiveRender,
   GENERIC_STRUCTURED_COMPONENT_KEY,
   GenericStructuredView,
@@ -1501,20 +1690,26 @@ export {
   ProvisionalKindFrame,
   RunResultView,
   SideEffectDirectiveCard,
+  TARGETING_CLASSES,
   applyIrKindRoute,
   consoleErrorReporter,
   createDbKindComponentCache,
   createKindRouteBinding,
   envelopeFromPartialKind,
+  fieldLabel,
   getDirectiveRenderer,
   isDbKindComponentBodyPending,
   isPartialReadyKind,
   isProvisionalBlock,
   isRecordValue,
+  itemChanges,
+  itemRecordId,
   kindIsRoutable,
   kindServerDataFromStoredValue,
   markKindPartialUnsafe,
+  provisionalDirectiveSlug,
   readIrRouteMarker,
+  recordFallbackName,
   registerDirectiveRenderer,
   resetDirectiveRenderers,
   resetPartialUnsafeKinds,