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

package/dist/index.js

@@ -14,17 +14,31 @@ function routeEnvOf(host) {
 }
 
 // host/ContentIrProvider.tsx
-import { createContext, useContext, useMemo } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
+
+// directives/directive-host.tsx
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-var ContentIrHostContext = createContext(null);
+var DirectiveHostContext = createContext(null);
+function DirectiveHostProvider({ host, children }) {
+  return /* @__PURE__ */ jsx(DirectiveHostContext.Provider, { value: host, children });
+}
+var EMPTY_HOST = {};
+function useDirectiveHost() {
+  return useContext(DirectiveHostContext) ?? EMPTY_HOST;
+}
+
+// host/ContentIrProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ContentIrHostContext = createContext2(null);
 function ContentIrRenderProvider({
   host,
   children
 }) {
-  return /* @__PURE__ */ jsx(ContentIrHostContext.Provider, { value: host, children });
+  return /* @__PURE__ */ jsx2(ContentIrHostContext.Provider, { value: host, children: /* @__PURE__ */ jsx2(DirectiveHostProvider, { host: host.directives ?? {}, children }) });
 }
 function useContentIrHostOrNull() {
-  return useContext(ContentIrHostContext);
+  return useContext2(ContentIrHostContext);
 }
 function useContentIrHost() {
   const host = useContentIrHostOrNull();
@@ -372,12 +386,14 @@ var ComponentResolver = class {
 // route/kind-route.ts
 import {
   envelopeFromCompleteValue,
+  isReservedDirectiveSlug,
   readEnvelope,
   readObjectKind
 } from "@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;
 }
@@ -455,6 +471,18 @@ function applyIrKindRoute(block, env, options) {
   const kind = envelope.root.kind;
   if (!kind) return block;
   if (envelope.root.kindState === "pending_schema") return block;
+  if (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;
@@ -510,11 +538,13 @@ function kindServerDataFromStoredValue(value, env) {
 
 // route/partial-kind-route.ts
 import {
+  envelopeFromCompleteValue as envelopeFromCompleteValue2,
   IR_ENVELOPE_KEY,
   IR_PARTIAL_KEY,
   IR_VERSION,
   isProvisionalKind,
   readEnvelope as readEnvelope2,
+  readObjectKind as readObjectKind2,
   readPartialKindEvent
 } from "@ai-matrx/content-ir";
 var IR_PROVISIONAL_KEY = "__ir_provisional";
@@ -556,6 +586,36 @@ function resolveAnnouncedKindLoading(block, options) {
   if (verified && verified.root.status === "complete") return null;
   return { kind, envelope: envelopeFromPartialKind(event) };
 }
+function parseCompletedJsonObject(content) {
+  let source = content.trim();
+  const fenced = source.match(/^```(?:json)?\s*\n?([\s\S]*?)\n?```$/i);
+  if (fenced?.[1]) source = fenced[1].trim();
+  try {
+    const value = JSON.parse(source);
+    return typeof value === "object" && value !== null && !Array.isArray(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+function resolveSupersededKindRender(block, env, options) {
+  const event = readPartialKindEvent(block.metadata);
+  if (event?.state !== "superseded") return null;
+  if (readEnvelope2(block.metadata)?.root.status === "complete") return null;
+  const value = parseCompletedJsonObject(block.content);
+  if (!value || readObjectKind2(value) !== event.kind) return null;
+  const { [IR_PARTIAL_KEY]: _partial, ...rest } = block.metadata ?? {};
+  void _partial;
+  const envelope = envelopeFromCompleteValue2(value, event.kind);
+  const terminalBlock = {
+    ...block,
+    // A code/json block's serverData is an annotation, not kind data.
+    serverData: void 0,
+    metadata: { ...rest, [IR_ENVELOPE_KEY]: envelope }
+  };
+  const routed = applyIrKindRoute(terminalBlock, env, options);
+  if (routed === terminalBlock) return null;
+  return { block: routed, kind: event.kind, seq: event.seq, envelope };
+}
 function resolveProvisionalKindRender(block, env, options) {
   if (options?.streamActive === false) return null;
   const event = readPartialKindEvent(block.metadata);
@@ -596,7 +656,12 @@ function createKindRouteBinding(env, options) {
     resolveProvisionalKindRender: (block, streamOptions) => resolveProvisionalKindRender(block, env, {
       ...streamOptions,
       ...ownedTypes ? { ownedTypes } : null
-    })
+    }),
+    resolveSupersededKindRender: (block) => resolveSupersededKindRender(
+      block,
+      env,
+      ownedTypes ? { ownedTypes } : void 0
+    )
   };
 }
 
@@ -640,19 +705,386 @@ function useContentIrKindVersion(kind, sources) {
 }
 
 // react/KindInstanceRender.tsx
-import { useEffect, useState } from "react";
-import { envelopeFromCompleteValue as envelopeFromCompleteValue2, IR_ENVELOPE_KEY as IR_ENVELOPE_KEY2 } from "@ai-matrx/content-ir";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import {
+  envelopeFromCompleteValue as envelopeFromCompleteValue3,
+  IR_ENVELOPE_KEY as IR_ENVELOPE_KEY2,
+  isReservedDirectiveSlug as isReservedDirectiveSlug2
+} from "@ai-matrx/content-ir";
+
+// directives/DirectiveRender.tsx
+import { 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";
+
+// directives/icons.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Svg({ children, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "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__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx3("path", { d: "M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" }),
+  /* @__PURE__ */ jsx3("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+  /* @__PURE__ */ jsx3("path", { d: "M3 15h6" }),
+  /* @__PURE__ */ jsx3("path", { d: "M6 12v6" })
+] });
+var PencilIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx3("path", { d: "M12 20h9" }),
+  /* @__PURE__ */ jsx3("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__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx3("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx3("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsx3("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+  /* @__PURE__ */ jsx3("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ jsx3("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+] });
+var PlayIcon = (p) => /* @__PURE__ */ jsx3(Svg, { ...p, children: /* @__PURE__ */ jsx3("polygon", { points: "6 3 20 12 6 21 6 3" }) });
+var WebhookIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "m7 16.5-4.74-2.85" }),
+  /* @__PURE__ */ jsx3("path", { d: "m7 16.5 5-3" }),
+  /* @__PURE__ */ jsx3("path", { d: "M7 16.5v5.17" }),
+  /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "m17 16.5-5-3" }),
+  /* @__PURE__ */ jsx3("path", { d: "m17 16.5 4.74-2.85" }),
+  /* @__PURE__ */ jsx3("path", { d: "M17 16.5v5.17" }),
+  /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M12 8 7.26 5.15" }),
+  /* @__PURE__ */ jsx3("path", { d: "m12 8 4.74-2.85" }),
+  /* @__PURE__ */ jsx3("path", { d: "M12 13.5V8" })
+] });
+var ChevronDownIcon = (p) => /* @__PURE__ */ jsx3(Svg, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }) });
+var ChevronRightIcon = (p) => /* @__PURE__ */ jsx3(Svg, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" }) });
+var MaximizeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx3("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx3("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ jsx3("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
+  /* @__PURE__ */ jsx3("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
+] });
+var LoaderIcon = (p) => /* @__PURE__ */ jsx3(Svg, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var CheckCircleIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx3("path", { d: "m9 12 2 2 4-4" })
+] });
+var AlertIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M12 9v4" }),
+  /* @__PURE__ */ jsx3("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
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ApplyDirectiveButton({
+  directive,
+  label = "Apply",
+  itemCount,
+  onApplied
+}) {
+  const host = useDirectiveHost();
+  const [state, setState] = useState({ status: "idle" });
+  const [elapsed, setElapsed] = useState(0);
+  const startedAt = useRef(null);
+  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__ */ jsxs2(
+      "span",
+      {
+        className: `inline-flex items-center gap-1 text-xs ${bad ? "text-destructive" : "text-primary"}`,
+        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` : ""
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs2(
+      "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__ */ jsx4(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx4(PlayIcon, { className: "h-3.5 w-3.5" }),
+          state.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
+        ]
+      }
+    ),
+    state.status === "error" ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex max-w-sm items-start gap-1 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx4(AlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+      /* @__PURE__ */ jsx4("span", { children: state.message })
+    ] }) : null
+  ] });
+}
+
+// directives/DirectiveFallbackCard.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function DirectiveFallbackCard({ directive, reason }) {
+  const host = useDirectiveHost();
+  const count = directive.items.length;
+  const display = directiveDisplay(directive.directiveClass, directive.noun, host.nouns);
+  return /* @__PURE__ */ jsxs3("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__ */ jsx5(BoxesIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx5("span", { className: "text-foreground", children: display.title }),
+    display.family ? /* @__PURE__ */ jsxs3("span", { className: "text-muted-foreground", children: [
+      "\xB7 ",
+      display.family
+    ] }) : null,
+    /* @__PURE__ */ jsxs3("span", { className: "text-muted-foreground", children: [
+      "\xB7 ",
+      count,
+      " ",
+      count === 1 ? "item" : "items"
+    ] }),
+    reason ? /* @__PURE__ */ jsxs3("span", { className: "text-muted-foreground", children: [
+      "\xB7 ",
+      reason
+    ] }) : null,
+    /* @__PURE__ */ jsx5(ApplyDirectiveButton, { directive })
+  ] });
+}
+
+// directives/registry.ts
+import {
+  buildDirectiveSlug
+} from "@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(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
+import { useState as useState2 } from "react";
+import {
+  asKindInstance,
+  directiveDisplay as directiveDisplay2,
+  itemFacts,
+  itemSubtitle,
+  itemTitle,
+  nounTitleColumn
+} from "@ai-matrx/content-ir";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ROWS_BEFORE_FOLD = 3;
+function ItemRow({
+  directive,
+  item,
+  index,
+  total
+}) {
+  const host = useDirectiveHost();
+  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 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: [
+      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
+  ] });
+  return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
+    openItem ? /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: () => openItem({
+          // Stamped so the panel's kind pipeline types it from its own first key.
+          item: 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__ */ jsx6("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] = useState2(false);
+  const items = directive.items;
+  const total = items.length;
+  const display = directiveDisplay2(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: [
+        total,
+        " ",
+        total === 1 ? "item" : "items"
+      ] }),
+      /* @__PURE__ */ jsxs4("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 })
+      ] })
+    ] }),
+    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(
+      "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 ? "Show less" : `Show ${hidden} more`
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// directives/DirectiveRender.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function DirectiveRender({ content, className }) {
+  const host = useDirectiveHost();
+  const directive = 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__ */ jsx7(
+      "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__ */ jsx7(Renderer, { directive });
+  if (directive.parsed.executes) return /* @__PURE__ */ jsx7(SideEffectDirectiveCard, { directive });
+  return /* @__PURE__ */ jsx7(DirectiveFallbackCard, { directive });
+}
+
+// react/KindInstanceRender.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function isRecordValue(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function kindIsRoutable(kind, host) {
+  if (isReservedDirectiveSlug2(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 (isReservedDirectiveSlug2(props.kind)) {
+    return /* @__PURE__ */ jsx8(
+      DirectiveRender,
+      {
+        content: props.value,
+        ...props.className === void 0 ? {} : { className: props.className }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(KindInstanceRenderInner, { ...props });
+}
+function KindInstanceRenderInner({
   kind,
   value,
   showRoutingNote = true,
@@ -661,10 +1093,10 @@ function KindInstanceRender({
   className
 }) {
   const host = useContentIrHost();
-  const [routingStatus, setRoutingStatus] = useState(
+  const [routingStatus, setRoutingStatus] = useState3(
     () => kindIsRoutable(kind, host) ? "routable" : "checking"
   );
-  useEffect(() => {
+  useEffect2(() => {
     let cancelled = false;
     let warmed = false;
     const syncRoutingStatus = () => {
@@ -696,24 +1128,24 @@ function KindInstanceRender({
     content: JSON.stringify(value, null, 2),
     language: "json",
     metadata: {
-      [IR_ENVELOPE_KEY2]: envelopeFromCompleteValue2(value, kind)
+      [IR_ENVELOPE_KEY2]: envelopeFromCompleteValue3(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__ */ jsx2(Fragment, { children: unroutableFallback });
+    return /* @__PURE__ */ jsx8(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__ */ jsxs("div", { className: className ? `space-y-3 ${className}` : "space-y-3", children: [
-    showRoutingNote && routingStatus === "unroutable" ? host.renderNotice?.(notice) ?? /* @__PURE__ */ jsx2("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__ */ jsx2("div", { className: frameClass, children: onTheFloor ? host.renderValue({ value, kind }) : host.renderBlock(block) })
+  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) })
   ] });
 }
 
 // react/ProvisionalKindBoundary.tsx
 import React from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var ProvisionalKindBoundaryInner = class extends React.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
@@ -738,14 +1170,14 @@ var ProvisionalKindBoundaryInner = class extends React.Component {
 };
 function ProvisionalKindBoundary(props) {
   const host = useContentIrHost();
-  return /* @__PURE__ */ jsx3(ProvisionalKindBoundaryInner, { ...props, reportError: host.reportError });
+  return /* @__PURE__ */ jsx9(ProvisionalKindBoundaryInner, { ...props, reportError: host.reportError });
 }
 function ProvisionalKindFrame({ children }) {
   const host = useContentIrHost();
   const label = "Still arriving";
-  return /* @__PURE__ */ jsxs2("div", { className: "relative", "aria-busy": "true", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "relative", "aria-busy": "true", children: [
     children,
-    /* @__PURE__ */ jsx3("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__ */ jsx3("span", { className: "text-[10px] text-muted-foreground", children: label }) })
+    /* @__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 }) })
   ] });
 }
 
@@ -753,10 +1185,10 @@ function ProvisionalKindFrame({ children }) {
 import "react";
 import {
   readEnvelope as readEnvelope3,
-  readObjectKind as readObjectKind2,
+  readObjectKind as readObjectKind3,
   reconstructRegionValue
 } from "@ai-matrx/content-ir";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function readStructuredValue(content, metadata) {
   const envelope = readEnvelope3(metadata);
   if (envelope) {
@@ -778,22 +1210,22 @@ function GenericStructuredView({
   const envelope = readEnvelope3(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) ? readObjectKind2(value) : null) ?? "";
+  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__ */ jsxs3("div", { className: className ? `my-2 min-w-0 ${className}` : "my-2 min-w-0", children: [
-    status === "streaming" ? streamingIndicator ?? /* @__PURE__ */ jsx4("div", { className: "mb-2 text-xs text-muted-foreground", children: "Still arriving\u2026" }) : null,
+  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,
     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__ */ jsx4("pre", { className: "max-h-96 overflow-auto font-mono text-xs leading-relaxed text-muted-foreground", children: content })
+      /* @__PURE__ */ jsx10("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 readObjectKind3, readRunResultValue } from "@ai-matrx/content-ir";
-import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+import { readNodeOutcomeValue, readObjectKind as readObjectKind4, readRunResultValue } from "@ai-matrx/content-ir";
+import { Fragment as Fragment3, jsx as jsx11 } from "react/jsx-runtime";
 function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -809,16 +1241,16 @@ function DelegatedOutput({
 }) {
   const host = useContentIrHost();
   if (output === null || output === void 0) {
-    return /* @__PURE__ */ jsx5("p", { className: "text-xs text-muted-foreground", children: emptyLabel });
+    return /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground", children: emptyLabel });
   }
   if (!isRecord2(output)) {
-    return /* @__PURE__ */ jsx5(Fragment2, { children: host.renderValue({ value: output }) });
+    return /* @__PURE__ */ jsx11(Fragment3, { children: host.renderValue({ value: output }) });
   }
-  const kind = readObjectKind3(output) ?? declaredKind;
+  const kind = readObjectKind4(output) ?? declaredKind;
   if (!kind) {
-    return /* @__PURE__ */ jsx5(Fragment2, { children: fallback?.(output) ?? host.renderValue({ value: output }) });
+    return /* @__PURE__ */ jsx11(Fragment3, { children: fallback?.(output) ?? host.renderValue({ value: output }) });
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx11(
     KindInstanceRender,
     {
       kind,
@@ -835,7 +1267,7 @@ function NodeOutcomeView({ serverData, fallback }) {
     readNodeOutcomeValue
   );
   if (!wrapper) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx11(
     DelegatedOutput,
     {
       output: wrapper.output,
@@ -850,14 +1282,14 @@ function RunResultView({ serverData, fallback }) {
     readRunResultValue
   );
   if (!wrapper) return null;
-  return /* @__PURE__ */ jsx5("div", { className: "space-y-2", children: wrapper.outputs.length > 0 ? wrapper.outputs.map((outcome) => /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx11("div", { className: "space-y-2", children: wrapper.outputs.length > 0 ? wrapper.outputs.map((outcome) => /* @__PURE__ */ jsx11(
     NodeOutcomeView,
     {
       serverData: { wrapper: outcome },
       ...fallback === void 0 ? {} : { fallback }
     },
     `${outcome.node_id}:${outcome.attempt}`
-  )) : /* @__PURE__ */ jsx5(
+  )) : /* @__PURE__ */ jsx11(
     DelegatedOutput,
     {
       output: wrapper.output,
@@ -1054,11 +1486,16 @@ var DbKindComponentErrorBoundary = class extends React2.Component {
   }
 };
 export {
+  ApplyDirectiveButton,
   ComponentResolver,
   ContentIrRenderProvider,
   DB_KIND_COMPONENT_KEY,
+  DIRECTIVE_BLOCK_TYPE,
   DbKindComponentErrorBoundary,
   DelegatedOutput,
+  DirectiveFallbackCard,
+  DirectiveHostProvider,
+  DirectiveRender,
   GENERIC_STRUCTURED_COMPONENT_KEY,
   GenericStructuredView,
   IR_PROVISIONAL_KEY,
@@ -1068,11 +1505,13 @@ export {
   ProvisionalKindBoundary,
   ProvisionalKindFrame,
   RunResultView,
+  SideEffectDirectiveCard,
   applyIrKindRoute,
   consoleErrorReporter,
   createDbKindComponentCache,
   createKindRouteBinding,
   envelopeFromPartialKind,
+  getDirectiveRenderer,
   isDbKindComponentBodyPending,
   isPartialReadyKind,
   isProvisionalBlock,
@@ -1081,14 +1520,18 @@ export {
   kindServerDataFromStoredValue,
   markKindPartialUnsafe,
   readIrRouteMarker,
+  registerDirectiveRenderer,
+  resetDirectiveRenderers,
   resetPartialUnsafeKinds,
   resetSourcelessDbRowReports,
   resolveAnnouncedKindLoading,
   resolveProvisionalKindRender,
+  resolveSupersededKindRender,
   routeEnvOf,
   useContentIrHost,
   useContentIrHostOrNull,
   useContentIrKindVersion,
+  useDirectiveHost,
   useKindRouteEnv
 };
 //# sourceMappingURL=index.js.map