@ai-matrx/content-ir-react 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -30,11 +30,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.ts
 var index_exports = {};
 __export(index_exports, {
+  ApplyDirectiveButton: () => ApplyDirectiveButton,
   ComponentResolver: () => ComponentResolver,
   ContentIrRenderProvider: () => ContentIrRenderProvider,
   DB_KIND_COMPONENT_KEY: () => DB_KIND_COMPONENT_KEY,
+  DIRECTIVE_BLOCK_TYPE: () => DIRECTIVE_BLOCK_TYPE,
   DbKindComponentErrorBoundary: () => DbKindComponentErrorBoundary,
   DelegatedOutput: () => DelegatedOutput,
+  DirectiveFallbackCard: () => DirectiveFallbackCard,
+  DirectiveHostProvider: () => DirectiveHostProvider,
+  DirectiveRender: () => DirectiveRender,
   GENERIC_STRUCTURED_COMPONENT_KEY: () => GENERIC_STRUCTURED_COMPONENT_KEY,
   GenericStructuredView: () => GenericStructuredView,
   IR_PROVISIONAL_KEY: () => IR_PROVISIONAL_KEY,
@@ -44,11 +49,13 @@ __export(index_exports, {
   ProvisionalKindBoundary: () => ProvisionalKindBoundary,
   ProvisionalKindFrame: () => ProvisionalKindFrame,
   RunResultView: () => RunResultView,
+  SideEffectDirectiveCard: () => SideEffectDirectiveCard,
   applyIrKindRoute: () => applyIrKindRoute,
   consoleErrorReporter: () => consoleErrorReporter,
   createDbKindComponentCache: () => createDbKindComponentCache,
   createKindRouteBinding: () => createKindRouteBinding,
   envelopeFromPartialKind: () => envelopeFromPartialKind,
+  getDirectiveRenderer: () => getDirectiveRenderer,
   isDbKindComponentBodyPending: () => isDbKindComponentBodyPending,
   isPartialReadyKind: () => isPartialReadyKind,
   isProvisionalBlock: () => isProvisionalBlock,
@@ -57,6 +64,8 @@ __export(index_exports, {
   kindServerDataFromStoredValue: () => kindServerDataFromStoredValue,
   markKindPartialUnsafe: () => markKindPartialUnsafe,
   readIrRouteMarker: () => readIrRouteMarker,
+  registerDirectiveRenderer: () => registerDirectiveRenderer,
+  resetDirectiveRenderers: () => resetDirectiveRenderers,
   resetPartialUnsafeKinds: () => resetPartialUnsafeKinds,
   resetSourcelessDbRowReports: () => resetSourcelessDbRowReports,
   resolveAnnouncedKindLoading: () => resolveAnnouncedKindLoading,
@@ -65,6 +74,7 @@ __export(index_exports, {
   useContentIrHost: () => useContentIrHost,
   useContentIrHostOrNull: () => useContentIrHostOrNull,
   useContentIrKindVersion: () => useContentIrKindVersion,
+  useDirectiveHost: () => useDirectiveHost,
   useKindRouteEnv: () => useKindRouteEnv
 });
 module.exports = __toCommonJS(index_exports);
@@ -85,17 +95,31 @@ function routeEnvOf(host) {
 }
 
 // host/ContentIrProvider.tsx
+var import_react2 = require("react");
+
+// directives/directive-host.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ContentIrHostContext = (0, import_react.createContext)(null);
+var DirectiveHostContext = (0, import_react.createContext)(null);
+function DirectiveHostProvider({ host, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DirectiveHostContext.Provider, { value: host, children });
+}
+var EMPTY_HOST = {};
+function useDirectiveHost() {
+  return (0, import_react.useContext)(DirectiveHostContext) ?? EMPTY_HOST;
+}
+
+// host/ContentIrProvider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ContentIrHostContext = (0, import_react2.createContext)(null);
 function ContentIrRenderProvider({
   host,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentIrHostContext.Provider, { value: host, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContentIrHostContext.Provider, { value: host, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DirectiveHostProvider, { host: host.directives ?? {}, children }) });
 }
 function useContentIrHostOrNull() {
-  return (0, import_react.useContext)(ContentIrHostContext);
+  return (0, import_react2.useContext)(ContentIrHostContext);
 }
 function useContentIrHost() {
   const host = useContentIrHostOrNull();
@@ -108,7 +132,7 @@ function useContentIrHost() {
 }
 function useKindRouteEnv() {
   const host = useContentIrHost();
-  return (0, import_react.useMemo)(() => routeEnvOf(host), [host]);
+  return (0, import_react2.useMemo)(() => routeEnvOf(host), [host]);
 }
 
 // resolver/component-resolver.ts
@@ -445,6 +469,7 @@ var import_content_ir = require("@ai-matrx/content-ir");
 var IR_ROUTE_KEY = "__ir_route";
 var GENERIC_STRUCTURED_COMPONENT_KEY = "generic_structured";
 var DB_KIND_COMPONENT_KEY = "db_kind_component";
+var DIRECTIVE_BLOCK_TYPE = "matrx";
 function isDbSourceResolution(resolution) {
   return resolution !== null && resolution.resolvedBy === "db" && resolution.source === "db" && resolution.isActive;
 }
@@ -522,6 +547,18 @@ function applyIrKindRoute(block, env, options) {
   const kind = envelope.root.kind;
   if (!kind) return block;
   if (envelope.root.kindState === "pending_schema") return block;
+  if ((0, import_content_ir.isReservedDirectiveSlug)(kind)) {
+    if (block.type === DIRECTIVE_BLOCK_TYPE) return block;
+    return {
+      ...block,
+      type: DIRECTIVE_BLOCK_TYPE,
+      serverData: void 0,
+      metadata: {
+        ...block.metadata ?? {},
+        [IR_ROUTE_KEY]: { by: "directive", key: DIRECTIVE_BLOCK_TYPE }
+      }
+    };
+  }
   const def = env.kinds.getDefinition(kind);
   const resolution = env.components.resolve(kind, env.platform, "output");
   const componentsSettled = env.components.hasSettled?.() ?? true;
@@ -661,7 +698,7 @@ function createKindRouteBinding(env, options) {
 }
 
 // react/use-kind-version.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var noopSubscribe = () => () => {
 };
 var zero = () => 0;
@@ -673,7 +710,7 @@ function useContentIrKindVersion(kind, sources) {
       "[content-ir-react] useContentIrKindVersion needs either a ContentIrRenderProvider above it or explicit `sources`."
     );
   }
-  const subscribe = (0, import_react2.useCallback)(
+  const subscribe = (0, import_react3.useCallback)(
     (onStoreChange) => {
       if (!kind || !resolved) return noopSubscribe();
       const unsubKinds = resolved.kinds.subscribeKind(kind, onStoreChange);
@@ -688,7 +725,7 @@ function useContentIrKindVersion(kind, sources) {
     },
     [resolved, kind]
   );
-  const getSnapshot = (0, import_react2.useCallback)(
+  const getSnapshot = (0, import_react3.useCallback)(
     () => kind && resolved ? (
       // Both counters are monotonic, so the sum is monotonic — a change in
       // either registry produces a new snapshot value for this kind.
@@ -696,23 +733,377 @@ function useContentIrKindVersion(kind, sources) {
     ) : 0,
     [resolved, kind]
   );
-  return (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, zero);
+  return (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, zero);
 }
 
 // react/KindInstanceRender.tsx
-var import_react3 = require("react");
+var import_react6 = require("react");
+var import_content_ir7 = require("@ai-matrx/content-ir");
+
+// directives/DirectiveRender.tsx
+var import_content_ir6 = require("@ai-matrx/content-ir");
+
+// directives/DirectiveFallbackCard.tsx
 var import_content_ir3 = require("@ai-matrx/content-ir");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// directives/ApplyDirectiveButton.tsx
+var import_react4 = require("react");
+
+// directives/icons.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Svg({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children
+    }
+  );
+}
+var FilePlusIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 15h6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6 12v6" })
+] });
+var PencilIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 20h9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z" })
+] });
+var TrashIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+] });
+var PlayIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "6 3 20 12 6 21 6 3" }) });
+var WebhookIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 17 3.13-5.78c.53-.97.1-2.01-.4-2.96A4 4 0 0 1 14 5.5c.63.42 1.13 1 1.44 1.66" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8" })
+] });
+var BoxesIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 16.5-4.74-2.85" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 16.5 5-3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 16.5v5.17" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m17 16.5-5-3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m17 16.5 4.74-2.85" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M17 16.5v5.17" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 8 7.26 5.15" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 8 4.74-2.85" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 13.5V8" })
+] });
+var ChevronDownIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }) });
+var ChevronRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+var MaximizeIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
+] });
+var LoaderIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Svg, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var CheckCircleIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 12 2 2 4-4" })
+] });
+var AlertIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 9v4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 17h.01" })
+] });
+var AGENT_NOUNS = /* @__PURE__ */ new Set(["create_agent", "create_agent_definition", "agent"]);
+function classIcon(directiveClass, noun) {
+  if (directiveClass === "action" && AGENT_NOUNS.has(noun)) return WebhookIcon;
+  switch (directiveClass) {
+    case "create":
+      return FilePlusIcon;
+    case "update":
+      return PencilIcon;
+    case "delete":
+      return TrashIcon;
+    default:
+      return PlayIcon;
+  }
+}
+
+// directives/ApplyDirectiveButton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ApplyDirectiveButton({
+  directive,
+  label = "Apply",
+  itemCount,
+  onApplied
+}) {
+  const host = useDirectiveHost();
+  const [state, setState] = (0, import_react4.useState)({ status: "idle" });
+  const [elapsed, setElapsed] = (0, import_react4.useState)(0);
+  const startedAt = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (state.status !== "applying") return;
+    startedAt.current = Date.now();
+    const id = setInterval(
+      () => setElapsed(Math.round((Date.now() - (startedAt.current ?? 0)) / 1e3)),
+      1e3
+    );
+    return () => clearInterval(id);
+  }, [state.status]);
+  if (!directive.parsed.executes) return null;
+  const confirm = host.confirm;
+  if (!confirm) return null;
+  const items = directive.items;
+  async function handleApply() {
+    if (!confirm) return;
+    setState({ status: "applying" });
+    try {
+      const result = await confirm({ __kind: directive.slug, items });
+      setState({ status: "applied", applied: result.applied, failed: result.failed });
+      onApplied?.();
+    } catch (error) {
+      setState({
+        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;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "span",
+      {
+        className: `inline-flex items-center gap-1 text-xs ${bad ? "text-destructive" : "text-primary"}`,
+        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` : ""
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => void handleApply(),
+        disabled: state.status === "applying" || 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" }),
+          state.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
+        ]
+      }
+    ),
+    state.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex max-w-sm items-start gap-1 text-xs text-destructive", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: state.message })
+    ] }) : null
+  ] });
+}
+
+// directives/DirectiveFallbackCard.tsx
+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_ir3.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 }),
+    display.family ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-muted-foreground", children: [
+      "\xB7 ",
+      display.family
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-muted-foreground", children: [
+      "\xB7 ",
+      count,
+      " ",
+      count === 1 ? "item" : "items"
+    ] }),
+    reason ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-muted-foreground", children: [
+      "\xB7 ",
+      reason
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ApplyDirectiveButton, { directive })
+  ] });
+}
+
+// directives/registry.ts
+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(),
+  byClass: /* @__PURE__ */ new Map()
+};
+function registerDirectiveRenderer(directiveClass, renderer, noun) {
+  if (noun) registry.bySlug.set((0, import_content_ir4.buildDirectiveSlug)(directiveClass, noun), renderer);
+  else registry.byClass.set(directiveClass, renderer);
+}
+function getDirectiveRenderer(directive) {
+  return registry.bySlug.get(directive.slug) ?? registry.byClass.get(directive.directiveClass) ?? null;
+}
+function resetDirectiveRenderers() {
+  registry.bySlug.clear();
+  registry.byClass.clear();
+}
+
+// directives/SideEffectDirectiveCard.tsx
+var import_react5 = require("react");
+var import_content_ir5 = require("@ai-matrx/content-ir");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ROWS_BEFORE_FOLD = 3;
+function ItemRow({
+  directive,
+  item,
+  index,
+  total
+}) {
+  const host = useDirectiveHost();
+  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_ir5.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  const openItem = host.openItem;
+  const body = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "min-w-0 shrink-0 truncate font-medium text-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "truncate text-[11px] text-muted-foreground", children: [
+      fact.value,
+      " ",
+      fact.label
+    ] }, fact.key)) }),
+    subtitle && facts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hidden truncate text-[11px] text-muted-foreground sm:inline", children: subtitle }) : null,
+    openItem ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MaximizeIcon, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
+    openItem ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => openItem({
+          // Stamped so the panel's kind pipeline types it from its own first key.
+          item: (0, import_content_ir5.asKindInstance)(item, kind) ?? item,
+          itemKind: kind,
+          title,
+          subtitle: `${display.title} \xB7 item ${index + 1} of ${total}`,
+          directive,
+          index,
+          total
+        }),
+        className: "flex min-w-0 flex-1 items-center gap-2 rounded px-1 py-0.5 text-left hover:bg-accent hover:text-accent-foreground",
+        title: "Open to read it",
+        children: body
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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 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_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;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "my-3 rounded-md border border-border bg-card px-2.5 py-1.5", "data-directive": directive.slug, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm font-medium text-foreground", children: display.title }),
+      display.family ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xs text-muted-foreground", children: display.family }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+        total,
+        " ",
+        total === 1 ? "item" : "items"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [
+        host.renderCopy?.({ label: display.title, value: directive.shell, size: "icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ApplyDirectiveButton, { directive, itemCount: total })
+      ] })
+    ] }),
+    total === 0 ? (
+      // Stated, never silent: an empty batch is a real (and suspicious) state.
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: "No items \u2014 nothing would be written." })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-0.5 divide-y divide-border/60", children: shown.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ItemRow, { directive, item, index: i, total }, i)) }),
+    hidden > 0 || expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "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__ */ (0, import_jsx_runtime6.jsx)(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronRightIcon, { className: "h-3 w-3" }),
+          expanded ? "Show less" : `Show ${hidden} more`
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// directives/DirectiveRender.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DirectiveRender({ content, className }) {
+  const host = useDirectiveHost();
+  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) {
+    const raw = typeof content === "string" ? content : JSON.stringify(content, null, 2);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "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}` : ""}`,
+        children: raw
+      }
+    );
+  }
+  const Renderer = getDirectiveRenderer(directive);
+  if (Renderer) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Renderer, { directive });
+  if (directive.parsed.executes) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SideEffectDirectiveCard, { directive });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DirectiveFallbackCard, { directive });
+}
+
+// react/KindInstanceRender.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 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 (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({
+function KindInstanceRender(props) {
+  if ((0, import_content_ir7.isReservedDirectiveSlug)(props.kind)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      DirectiveRender,
+      {
+        content: props.value,
+        ...props.className === void 0 ? {} : { className: props.className }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(KindInstanceRenderInner, { ...props });
+}
+function KindInstanceRenderInner({
   kind,
   value,
   showRoutingNote = true,
@@ -721,10 +1112,10 @@ function KindInstanceRender({
   className
 }) {
   const host = useContentIrHost();
-  const [routingStatus, setRoutingStatus] = (0, import_react3.useState)(
+  const [routingStatus, setRoutingStatus] = (0, import_react6.useState)(
     () => kindIsRoutable(kind, host) ? "routable" : "checking"
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     let cancelled = false;
     let warmed = false;
     const syncRoutingStatus = () => {
@@ -756,25 +1147,25 @@ function KindInstanceRender({
     content: JSON.stringify(value, null, 2),
     language: "json",
     metadata: {
-      [import_content_ir3.IR_ENVELOPE_KEY]: (0, import_content_ir3.envelopeFromCompleteValue)(value, kind)
+      [import_content_ir7.IR_ENVELOPE_KEY]: (0, import_content_ir7.envelopeFromCompleteValue)(value, kind)
     }
   } : null;
   const frameClass = variant === "bare" ? void 0 : "rounded-md border border-border bg-card p-3";
   if (routingStatus === "unroutable" && unroutableFallback !== void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: unroutableFallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { 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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: className ? `space-y-3 ${className}` : "space-y-3", children: [
-    showRoutingNote && routingStatus === "unroutable" ? host.renderNotice?.(notice) ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("div", { className: frameClass, children: onTheFloor ? host.renderValue({ value, kind }) : host.renderBlock(block) })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: className ? `space-y-3 ${className}` : "space-y-3", children: [
+    showRoutingNote && routingStatus === "unroutable" ? host.renderNotice?.(notice) ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("div", { className: frameClass, children: onTheFloor ? host.renderValue({ value, kind }) : host.renderBlock(block) })
   ] });
 }
 
 // react/ProvisionalKindBoundary.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ProvisionalKindBoundaryInner = class extends import_react4.default.Component {
+var import_react7 = __toESM(require("react"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ProvisionalKindBoundaryInner = class extends import_react7.default.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
     return { failed: true };
@@ -798,25 +1189,25 @@ var ProvisionalKindBoundaryInner = class extends import_react4.default.Component
 };
 function ProvisionalKindBoundary(props) {
   const host = useContentIrHost();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProvisionalKindBoundaryInner, { ...props, reportError: host.reportError });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ProvisionalKindBoundaryInner, { ...props, reportError: host.reportError });
 }
 function ProvisionalKindFrame({ children }) {
   const host = useContentIrHost();
   const label = "Still arriving";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", "aria-busy": "true", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative", "aria-busy": "true", children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] text-muted-foreground", children: label }) })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-muted-foreground", children: label }) })
   ] });
 }
 
 // react/GenericStructuredView.tsx
-var import_react5 = require("react");
-var import_content_ir4 = require("@ai-matrx/content-ir");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_content_ir8 = require("@ai-matrx/content-ir");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function readStructuredValue(content, metadata) {
-  const envelope = (0, import_content_ir4.readEnvelope)(metadata);
+  const envelope = (0, import_content_ir8.readEnvelope)(metadata);
   if (envelope) {
-    return { value: (0, import_content_ir4.reconstructRegionValue)(envelope), recovered: true };
+    return { value: (0, import_content_ir8.reconstructRegionValue)(envelope), recovered: true };
   }
   try {
     return { value: JSON.parse(content), recovered: true };
@@ -831,25 +1222,25 @@ function GenericStructuredView({
   className
 }) {
   const host = useContentIrHost();
-  const envelope = (0, import_content_ir4.readEnvelope)(metadata);
+  const envelope = (0, import_content_ir8.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_ir4.readObjectKind)(value) : null) ?? "";
+  const kind = envelope?.root.kind ?? (typeof value === "object" && value !== null && !Array.isArray(value) ? (0, import_content_ir8.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_runtime4.jsxs)("div", { className: className ? `my-2 min-w-0 ${className}` : "my-2 min-w-0", children: [
-    status === "streaming" ? streamingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mb-2 text-xs text-muted-foreground", children: "Still arriving\u2026" }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: className ? `my-2 min-w-0 ${className}` : "my-2 min-w-0", children: [
+    status === "streaming" ? streamingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("pre", { className: "max-h-96 overflow-auto font-mono text-xs leading-relaxed text-muted-foreground", children: content })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { className: "max-h-96 overflow-auto font-mono text-xs leading-relaxed text-muted-foreground", children: content })
     )
   ] });
 }
 
 // react/RuntimeWrapperViews.tsx
-var import_content_ir5 = require("@ai-matrx/content-ir");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_content_ir9 = require("@ai-matrx/content-ir");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -865,16 +1256,16 @@ function DelegatedOutput({
 }) {
   const host = useContentIrHost();
   if (output === null || output === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyLabel });
   }
   if (!isRecord2(output)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: host.renderValue({ value: output }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: host.renderValue({ value: output }) });
   }
-  const kind = (0, import_content_ir5.readObjectKind)(output) ?? declaredKind;
+  const kind = (0, import_content_ir9.readObjectKind)(output) ?? declaredKind;
   if (!kind) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: fallback?.(output) ?? host.renderValue({ value: output }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: fallback?.(output) ?? host.renderValue({ value: output }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     KindInstanceRender,
     {
       kind,
@@ -888,10 +1279,10 @@ function DelegatedOutput({
 function NodeOutcomeView({ serverData, fallback }) {
   const wrapper = readWrapperFrom(
     serverData,
-    import_content_ir5.readNodeOutcomeValue
+    import_content_ir9.readNodeOutcomeValue
   );
   if (!wrapper) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     DelegatedOutput,
     {
       output: wrapper.output,
@@ -903,17 +1294,17 @@ function NodeOutcomeView({ serverData, fallback }) {
 function RunResultView({ serverData, fallback }) {
   const wrapper = readWrapperFrom(
     serverData,
-    import_content_ir5.readRunResultValue
+    import_content_ir9.readRunResultValue
   );
   if (!wrapper) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "space-y-2", children: wrapper.outputs.length > 0 ? wrapper.outputs.map((outcome) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2", children: wrapper.outputs.length > 0 ? wrapper.outputs.map((outcome) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     NodeOutcomeView,
     {
       serverData: { wrapper: outcome },
       ...fallback === void 0 ? {} : { fallback }
     },
     `${outcome.node_id}:${outcome.attempt}`
-  )) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  )) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     DelegatedOutput,
     {
       output: wrapper.output,