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

package/dist/react.d.ts

@@ -1,8 +1,9 @@
-import { c as KindDefinitionSource, C as ContentIrHost } from './host-types-CpItjcYh.js';
+import { c as KindDefinitionSource, C as ContentIrHost } from './host-types-IUEDmso7.js';
 import { d as ComponentResolutionSource } from './component-resolution.types-C1MzCf2s.js';
-import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
 import '@ai-matrx/content-ir';
+import './directive-host-DAb7Keg8.js';
 
 /**
  * The two registries this hook watches. Passed explicitly by a host whose
@@ -81,7 +82,7 @@ interface KindInstanceRenderProps {
     variant?: "card" | "bare";
     className?: string;
 }
-declare function KindInstanceRender({ kind, value, showRoutingNote, unroutableFallback, variant, className, }: KindInstanceRenderProps): React.JSX.Element;
+declare function KindInstanceRender(props: KindInstanceRenderProps): react.JSX.Element;
 
 /**
  * The safety net + the "still arriving" affordance for a provisional kind
@@ -115,7 +116,7 @@ interface ProvisionalKindBoundaryOwnProps {
     fallback: ReactNode;
     children: ReactNode;
 }
-declare function ProvisionalKindBoundary(props: ProvisionalKindBoundaryOwnProps): React__default.JSX.Element;
+declare function ProvisionalKindBoundary(props: ProvisionalKindBoundaryOwnProps): react__default.JSX.Element;
 /**
  * The "still arriving" frame. `aria-busy` carries the same fact to assistive
  * tech that the chip carries visually. The chip's own rendering is a host seam
@@ -124,7 +125,7 @@ declare function ProvisionalKindBoundary(props: ProvisionalKindBoundaryOwnProps)
  */
 declare function ProvisionalKindFrame({ children }: {
     children: ReactNode;
-}): React__default.JSX.Element;
+}): react__default.JSX.Element;
 
 interface GenericStructuredViewProps {
     /** The raw region source — the zero-loss floor when no envelope survived. */
@@ -138,7 +139,7 @@ interface GenericStructuredViewProps {
     streamingIndicator?: ReactNode;
     className?: string;
 }
-declare function GenericStructuredView({ content, metadata, streamingIndicator, className, }: GenericStructuredViewProps): React.JSX.Element;
+declare function GenericStructuredView({ content, metadata, streamingIndicator, className, }: GenericStructuredViewProps): react.JSX.Element;
 
 interface DelegatedOutputProps {
     output: unknown;
@@ -166,14 +167,14 @@ interface DelegatedOutputProps {
  * holding, so it is what routes. With no kind at all there is nothing to route
  * to, and the host's fallback (or the floor) shows what the step produced.
  */
-declare function DelegatedOutput({ output, declaredKind, fallback, emptyLabel, }: DelegatedOutputProps): React.JSX.Element;
+declare function DelegatedOutput({ output, declaredKind, fallback, emptyLabel, }: DelegatedOutputProps): react.JSX.Element;
 interface NodeOutcomeViewProps {
     serverData?: unknown;
     /** Passed through to {@link DelegatedOutput}. */
     fallback?: (output: unknown) => ReactNode;
 }
 /** THE renderer for the `node_outcome` runtime wrapper kind. */
-declare function NodeOutcomeView({ serverData, fallback }: NodeOutcomeViewProps): React.JSX.Element | null;
+declare function NodeOutcomeView({ serverData, fallback }: NodeOutcomeViewProps): react.JSX.Element | null;
 interface RunResultViewProps {
     serverData?: unknown;
     fallback?: (output: unknown) => ReactNode;
@@ -190,6 +191,6 @@ interface RunResultViewProps {
  * outcomes — otherwise it is the same content the outcomes already carry, and
  * showing both is the duplication the wrapper exists to prevent.
  */
-declare function RunResultView({ serverData, fallback }: RunResultViewProps): React.JSX.Element | null;
+declare function RunResultView({ serverData, fallback }: RunResultViewProps): react.JSX.Element | null;
 
 export { DelegatedOutput, type DelegatedOutputProps, GenericStructuredView, type GenericStructuredViewProps, KindInstanceRender, type KindInstanceRenderProps, type KindVersionSources, NodeOutcomeView, type NodeOutcomeViewProps, ProvisionalKindBoundary, ProvisionalKindFrame, RunResultView, type RunResultViewProps, isRecordValue, kindIsRoutable, useContentIrKindVersion };

package/dist/react.js

@@ -4,11 +4,22 @@
 import { useCallback, useSyncExternalStore } from "react";
 
 // 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);
+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 useContentIrHostOrNull() {
-  return useContext(ContentIrHostContext);
+  return useContext2(ContentIrHostContext);
 }
 function useContentIrHost() {
   const host = useContentIrHostOrNull();
@@ -59,12 +70,357 @@ function useContentIrKindVersion(kind, sources) {
 }
 
 // react/KindInstanceRender.tsx
-import { useEffect, useState } from "react";
-import { envelopeFromCompleteValue as envelopeFromCompleteValue2, IR_ENVELOPE_KEY } from "@ai-matrx/content-ir";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import {
+  envelopeFromCompleteValue as envelopeFromCompleteValue2,
+  IR_ENVELOPE_KEY,
+  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 getDirectiveRenderer(directive) {
+  return registry.bySlug.get(directive.slug) ?? registry.byClass.get(directive.directiveClass) ?? null;
+}
+
+// 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 });
+}
 
 // route/kind-route.ts
 import {
   envelopeFromCompleteValue,
+  isReservedDirectiveSlug,
   readEnvelope,
   readObjectKind
 } from "@ai-matrx/content-ir";
@@ -86,17 +442,30 @@ function readIrRouteMarker(metadata) {
 }
 
 // react/KindInstanceRender.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+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,
@@ -105,10 +474,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 = () => {
@@ -145,13 +514,13 @@ function KindInstanceRender({
   } : 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) })
   ] });
 }
 
@@ -160,11 +529,13 @@ import React from "react";
 
 // route/partial-kind-route.ts
 import {
+  envelopeFromCompleteValue as envelopeFromCompleteValue3,
   IR_ENVELOPE_KEY as IR_ENVELOPE_KEY2,
   IR_PARTIAL_KEY,
   IR_VERSION,
   isProvisionalKind,
   readEnvelope as readEnvelope2,
+  readObjectKind as readObjectKind2,
   readPartialKindEvent
 } from "@ai-matrx/content-ir";
 var PARTIAL_UNSAFE_SLOT = /* @__PURE__ */ Symbol.for(
@@ -176,7 +547,7 @@ function markKindPartialUnsafe(kind) {
 }
 
 // react/ProvisionalKindBoundary.tsx
-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() {
@@ -201,14 +572,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 }) })
   ] });
 }
 
@@ -216,10 +587,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) {
@@ -241,22 +612,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);
 }
@@ -272,16 +643,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,
@@ -298,7 +669,7 @@ function NodeOutcomeView({ serverData, fallback }) {
     readNodeOutcomeValue
   );
   if (!wrapper) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx11(
     DelegatedOutput,
     {
       output: wrapper.output,
@@ -313,14 +684,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,