@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/chat-markdown/InlineCodeSnippet.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { toast } from "../../host/toast.js";
+import { Suspense, lazy, useState } from "react";
+import { useKindSourceView } from "./kind-source-view.js";
+import {
+  isJsonFenceLanguage,
+  isKindJsonText,
+  valueCarriesKind,
+  withoutLeadingJsonComments
+} from "@ai-matrx/content-ir/surfaces";
+import { cn } from "@ai-matrx/design-system";
+import { Copy, Check } from "lucide-react";
+import { useThemeMode } from "../../host/app-bindings.js";
+import { ShikiCodeView } from "../../code-block/highlight/ShikiCodeView.js";
+import { MatrxVariableInline } from "./matrx-variables/MatrxVariableInline.js";
+import { Button } from "@ai-matrx/design-system/controls";
+const KindGate = lazy(() => import("./InlineCodeSnippetKindGate.js"));
+function settledKindValue(code, language) {
+  if (!isJsonFenceLanguage(language)) return void 0;
+  const body = withoutLeadingJsonComments(code).trim();
+  if (!isKindJsonText(body)) return void 0;
+  try {
+    const value = JSON.parse(body);
+    return valueCarriesKind(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+const VARIABLE_RE = /\{\{([a-zA-Z_][a-zA-Z0-9_.]*)\}\}/g;
+function splitWithVariables(text) {
+  VARIABLE_RE.lastIndex = 0;
+  const nodes = [];
+  let lastIdx = 0;
+  let match;
+  let i = 0;
+  while ((match = VARIABLE_RE.exec(text)) !== null) {
+    if (match.index > lastIdx) {
+      nodes.push(text.slice(lastIdx, match.index));
+    }
+    nodes.push(/* @__PURE__ */ jsx(MatrxVariableInline, { "data-name": match[1] }, i++));
+    lastIdx = match.index + match[0].length;
+  }
+  if (lastIdx < text.length) {
+    nodes.push(text.slice(lastIdx));
+  }
+  return nodes.length > 0 ? nodes : [text];
+}
+const LANGUAGE_COLORS = {
+  json: "text-emerald-600 dark:text-emerald-400",
+  yaml: "text-rose-600 dark:text-rose-400",
+  yml: "text-rose-600 dark:text-rose-400",
+  xml: "text-teal-600 dark:text-teal-400",
+  html: "text-orange-600 dark:text-orange-400",
+  css: "text-pink-600 dark:text-pink-400",
+  python: "text-yellow-600 dark:text-yellow-400",
+  javascript: "text-amber-600 dark:text-amber-400",
+  typescript: "text-blue-600 dark:text-blue-400",
+  bash: "text-green-600 dark:text-green-400",
+  shell: "text-green-600 dark:text-green-400",
+  sql: "text-purple-600 dark:text-purple-400",
+  rust: "text-orange-600 dark:text-orange-400",
+  go: "text-cyan-600 dark:text-cyan-400",
+  toml: "text-violet-600 dark:text-violet-400",
+  csv: "text-lime-600 dark:text-lime-400"
+};
+const InlineCodeSnippet = ({
+  code,
+  language,
+  className,
+  renderVariables = false,
+  isStreamActive = false,
+  showSource = false
+}) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const [copied, setCopied] = useState(false);
+  const sourceView = useKindSourceView();
+  const kindValue = showSource || sourceView || isStreamActive ? void 0 : settledKindValue(code, language);
+  const themeMode = useThemeMode();
+  const mode = themeMode === "dark" ? "dark" : "light";
+  VARIABLE_RE.lastIndex = 0;
+  const hasVariables = VARIABLE_RE.test(code);
+  const highlight = !!language && !(renderVariables && hasVariables);
+  if (code.length === 0) return null;
+  if (kindValue !== void 0) {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { role: "status", "aria-label": "Loading", className: "my-2 h-12 animate-pulse rounded-md bg-muted/40" }), children: /* @__PURE__ */ jsx(KindGate, { value: kindValue }) });
+  }
+  const langColor = language ? LANGUAGE_COLORS[language] : void 0;
+  const handleCopy = async () => {
+    try {
+      await copyText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-code-snippet": "",
+      "data-kind-source": showSource || sourceView || !isJsonFenceLanguage(language) ? "explicit" : void 0,
+      className: cn(
+        // not-prose: a surrounding `prose` block gave the <pre> its own
+        // ~1.7em top and bottom margins inside this frame (a tall empty band
+        // around one line of code on phones).
+        "not-prose my-2 rounded-md border border-border bg-muted/50 overflow-x-auto",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-code-snippet-header": "", className: "flex items-center justify-between px-3 py-1 border-b border-border/50", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs font-mono font-medium text-muted-foreground",
+                langColor
+              ),
+              "data-content-chrome": "",
+              children: language || "code"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), onClick: handleCopy, "aria-label": "Copy code", className: "pointer-coarse:-my-3 pointer-coarse:-mr-2" })
+        ] }),
+        highlight ? /* @__PURE__ */ jsx(
+          ShikiCodeView,
+          {
+            code,
+            language,
+            mode,
+            surface: "transparent",
+            padding: { y: 0.5, x: 0.75 },
+            fontSize: 14
+          }
+        ) : /* @__PURE__ */ jsx("pre", { className: "px-3 py-2 text-sm font-mono leading-relaxed text-foreground whitespace-pre-wrap break-words", children: /* @__PURE__ */ jsx("code", { children: renderVariables && hasVariables ? splitWithVariables(code) : code }) })
+      ]
+    }
+  );
+};
+var InlineCodeSnippet_default = InlineCodeSnippet;
+export {
+  InlineCodeSnippet,
+  InlineCodeSnippet_default as default
+};

package/dist/display/chat-markdown/InlineCodeSnippetKindGate.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The compact snippet's kind refusal (X1): a settled json / jsonc / json5 /
+ * unlabelled snippet whose text is kind JSON is drawn as its kind, exactly as
+ * `CodeBlock` does (`KindDataGate` — and the caller is reported). Behind a
+ * lazy edge from `InlineCodeSnippet`, which the block engine imports
+ * statically and which must not pull the kind route into that graph.
+ */
+import React from "react";
+export default function InlineCodeSnippetKindGate({ value }: {
+    value: unknown;
+}): React.JSX.Element;

package/dist/display/chat-markdown/InlineCodeSnippetKindGate.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { KindDataGate } from "../../host/app-bindings.js";
+function InlineCodeSnippetKindGate({ value }) {
+  return /* @__PURE__ */ jsx(KindDataGate, { component: "InlineCodeSnippet", data: value, children: null });
+}
+export {
+  InlineCodeSnippetKindGate as default
+};

package/dist/display/chat-markdown/KindTextGate.d.ts

@@ -0,0 +1,31 @@
+/**
+ * KindTextGate — the bottom-layer refusal for the plain markdown leaves
+ * (`BasicMarkdownContent`, `ConfigurableMarkdownContent`, `MarkdownRenderer`,
+ * `MarkdownWithPlugins`). Each of them draws a ```json fence as a code card and
+ * a bare object as prose, so text carrying a `__kind` key (Arman, 2026-09-30:
+ * a kind is never drawn as raw JSON) is handed to the canonical pipeline,
+ * `MarkdownStream`, instead — and the caller is filed in the Error Inspector.
+ *
+ * Recursion: `MarkdownStream` itself draws prose through `BasicMarkdownContent`.
+ * Every rerouted text is recorded in context; a leaf below handed that same
+ * text (or a slice of it) renders it itself, so the pipeline never loops back.
+ */
+import React from "react";
+import type { ImagePolicyDeclaration } from "../../levels/prose/remote-image-policy.js";
+export { KindSourceView, useKindSourceView } from "./kind-source-view.js";
+export interface KindTextGateProps {
+    /** The leaf's own name, for the report. */
+    component: string;
+    content: string;
+    isStreamActive?: boolean;
+    imagePolicy?: ImagePolicyDeclaration;
+    /** A deliberate source view (docs, authoring) keeps the leaf's own rendering. */
+    showSource?: boolean;
+    /** Whether the pipeline shows its copy control (the leaf's own setting). */
+    showCopyButton?: boolean;
+    children: React.ReactNode;
+}
+/** Whether a leaf should hand this text to the pipeline instead of drawing it. */
+export declare function textNeedsKindPipeline(content: string, rerouted: readonly string[]): boolean;
+export declare function KindTextGate({ component, content, isStreamActive, imagePolicy, showSource, showCopyButton, children, }: KindTextGateProps): React.JSX.Element;
+export default KindTextGate;

package/dist/display/chat-markdown/KindTextGate.js

@@ -0,0 +1,60 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { MarkdownStream } from "../../host/app-bindings.js";
+import {
+  firstKindSlug,
+  isKindJsonText,
+  markdownCarriesKind
+} from "@ai-matrx/content-ir/surfaces";
+import { KindSourceView, useKindSourceView } from "./kind-source-view.js";
+import { spelledKindsAsOneLine } from "@ai-matrx/content-ir/surfaces";
+import { useReportKindAtRawRenderer } from "../../utils/report-kind-at-raw-renderer.js";
+const ReroutedTextsContext = createContext([]);
+import { KindSourceView as KindSourceView2, useKindSourceView as useKindSourceView2 } from "./kind-source-view.js";
+function textNeedsKindPipeline(content, rerouted) {
+  if (!content || !markdownCarriesKind(spelledKindsAsOneLine(content))) return false;
+  const own = content.trim();
+  return !rerouted.some((text) => text.includes(own));
+}
+function KindTextGate({
+  component,
+  content,
+  isStreamActive,
+  imagePolicy,
+  showSource = false,
+  showCopyButton = false,
+  children
+}) {
+  const rerouted = useContext(ReroutedTextsContext);
+  const sourceView = useKindSourceView();
+  const reroute = !showSource && !sourceView && textNeedsKindPipeline(content, rerouted);
+  useReportKindAtRawRenderer(
+    component,
+    reroute ? firstKindSlug(content) : null,
+    reroute
+  );
+  if (!reroute) return showSource ? /* @__PURE__ */ jsx(KindSourceView, { children }) : /* @__PURE__ */ jsx(Fragment, { children });
+  const trimmed = content.trim();
+  const pipelineText = isKindJsonText(trimmed) ? `\`\`\`json
+${trimmed}
+\`\`\`` : content;
+  const nextRerouted = [...rerouted, trimmed, pipelineText.trim()];
+  return /* @__PURE__ */ jsx(ReroutedTextsContext.Provider, { value: nextRerouted, children: /* @__PURE__ */ jsx(
+    MarkdownStream,
+    {
+      content: pipelineText,
+      isStreamActive,
+      imagePolicy: imagePolicy ?? "inherit",
+      hideCopyButton: !showCopyButton
+    }
+  ) });
+}
+var KindTextGate_default = KindTextGate;
+export {
+  KindSourceView2 as KindSourceView,
+  KindTextGate,
+  KindTextGate_default as default,
+  textNeedsKindPipeline,
+  useKindSourceView2 as useKindSourceView
+};

package/dist/display/chat-markdown/QuestionnaireLoadingVisualization.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface QuestionnaireLoadingVisualizationProps {
+    className?: string;
+}
+declare const QuestionnaireLoadingVisualization: React.FC<QuestionnaireLoadingVisualizationProps>;
+export default QuestionnaireLoadingVisualization;

package/dist/display/chat-markdown/QuestionnaireLoadingVisualization.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "@ai-matrx/design-system";
+const QuestionnaireLoadingVisualization = ({
+  className
+}) => {
+  const messages = [
+    "I'm reviewing your request...",
+    "Analyzing what I already know...",
+    "Looking for missing information...",
+    "Coming up with some good questions...",
+    "Identifying additional information gaps...",
+    "Creating answer options to make this easier for you...",
+    "Finalizing a simple & complete questionnaire..."
+  ];
+  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
+  useEffect(() => {
+    if (currentMessageIndex >= messages.length - 1) {
+      return void 0;
+    }
+    const interval = setInterval(() => {
+      setCurrentMessageIndex((prev) => {
+        const nextIndex = prev + 1;
+        return nextIndex >= messages.length - 1 ? messages.length - 1 : nextIndex;
+      });
+    }, 2e3);
+    return () => clearInterval(interval);
+  }, [currentMessageIndex, messages.length]);
+  return /* @__PURE__ */ jsxs("div", { className: cn(
+    "w-full space-y-6 p-6 rounded-lg",
+    "bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30",
+    "border border-blue-200 dark:border-blue-800/50",
+    className
+  ), children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-700 dark:to-blue-600 rounded animate-pulse" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-700 rounded w-3/4 animate-pulse" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 bg-textured border border-gray-300 dark:border-gray-600 rounded-md animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 bg-textured border border-gray-300 dark:border-gray-600 rounded-md animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/5 animate-pulse" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 pl-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 bg-gray-300 dark:bg-gray-600 rounded animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-24 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 bg-gray-300 dark:bg-gray-600 rounded animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-32 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 bg-gray-300 dark:bg-gray-600 rounded animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-20 animate-pulse" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/4 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-20 bg-textured border border-gray-300 dark:border-gray-600 rounded-md animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/5 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 bg-textured border border-gray-300 dark:border-gray-600 rounded-md animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 bg-textured border border-gray-300 dark:border-gray-600 rounded-md animate-pulse relative", children: /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-gray-400 dark:bg-gray-500 rounded animate-pulse" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-3 pt-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex space-x-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "300ms" } })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-blue-600 dark:text-blue-400 font-medium transition-all duration-300", children: messages[currentMessageIndex] })
+    ] })
+  ] });
+};
+var QuestionnaireLoadingVisualization_default = QuestionnaireLoadingVisualization;
+export {
+  QuestionnaireLoadingVisualization_default as default
+};

package/dist/display/chat-markdown/block-registry/BlockComponentRegistry.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import ThinkingVisualization from "../../blocks/thinking-reasoning/ThinkingVisualization.js";
+import ReasoningVisualization from "../../blocks/thinking-reasoning/ReasoningVisualization.js";
+import ConsolidatedReasoningVisualization from "../../blocks/thinking-reasoning/ConsolidatedReasoningVisualization.js";
+import ImageBlock from "../../blocks/images/ImageBlock.js";
+import SvgBlock from "../../blocks/svg/SvgBlock.js";
+import ChartBlock from "../../blocks/chart/ChartBlock.js";
+import MarkdownTable from "../../tables/MarkdownTable.js";
+import { StreamingTableRenderer as StreamingTableRenderer } from "../../blocks/table/StreamingTableRenderer.js";
+import YamlBlock from "../../blocks/yaml/YamlBlock.js";
+import XmlBlock from "../../blocks/xml/XmlBlock.js";
+import CsvBlock from "../../blocks/csv/CsvBlock.js";
+import { JsonBlock as JsonBlock } from "../../blocks/json/JsonBlock.js";
+import TomlBlock from "../../blocks/toml/TomlBlock.js";
+import TreeBlock from "../../blocks/tree/TreeBlock.js";
+import MarkdownPreviewBlock from "../../blocks/markdown-preview/MarkdownPreviewBlock.js";
+declare const CodeBlock: React.LazyExoticComponent<React.FC<import("../../../code-block/CodeBlock.js").CodeBlockProps>>;
+declare const InteractiveDiagramBlock: React.LazyExoticComponent<React.FC<import("../../blocks/diagram/InteractiveDiagramBlock.js").InteractiveDiagramBlockProps>>;
+declare const MermaidBlock: React.LazyExoticComponent<React.FC<import("../../blocks/mermaid/MermaidBlock.js").MermaidBlockProps>>;
+declare const StreamingDiffBlock: React.LazyExoticComponent<React.FC<import("../diff-blocks/StreamingDiffBlock.js").StreamingDiffBlockProps>>;
+declare const SearchReplaceBlock: React.LazyExoticComponent<React.FC<import("../../blocks/search-replace/SearchReplaceBlock.js").SearchReplaceBlockProps>>;
+/**
+ * Export wrapped components for use in MarkdownStream
+ */
+declare const BUILTIN_BLOCK_COMPONENTS: {
+    BasicMarkdownContent: React.FC<import("../BasicMarkdownContent.js").BasicMarkdownContentProps>;
+    CodeBlock: (props: React.ComponentProps<typeof CodeBlock>) => React.JSX.Element;
+    ThinkingVisualization: (props: React.ComponentProps<typeof ThinkingVisualization>) => React.JSX.Element;
+    ReasoningVisualization: (props: React.ComponentProps<typeof ReasoningVisualization>) => React.JSX.Element;
+    ConsolidatedReasoningVisualization: (props: React.ComponentProps<typeof ConsolidatedReasoningVisualization>) => React.JSX.Element;
+    ImageBlock: (props: React.ComponentProps<typeof ImageBlock>) => React.JSX.Element;
+    InteractiveDiagramBlock: (props: React.ComponentProps<typeof InteractiveDiagramBlock>) => React.JSX.Element;
+    MermaidBlock: (props: React.ComponentProps<typeof MermaidBlock>) => React.JSX.Element;
+    SvgBlock: (props: React.ComponentProps<typeof SvgBlock>) => React.JSX.Element;
+    ChartBlock: (props: React.ComponentProps<typeof ChartBlock>) => React.JSX.Element;
+    MarkdownTable: (props: React.ComponentProps<typeof MarkdownTable>) => React.JSX.Element;
+    StreamingTableRenderer: (props: React.ComponentProps<typeof StreamingTableRenderer>) => React.JSX.Element;
+    StreamingDiffBlock: (props: React.ComponentProps<typeof StreamingDiffBlock>) => React.JSX.Element;
+    SearchReplaceBlock: (props: React.ComponentProps<typeof SearchReplaceBlock>) => React.JSX.Element;
+    YamlBlock: (props: React.ComponentProps<typeof YamlBlock>) => React.JSX.Element;
+    XmlBlock: (props: React.ComponentProps<typeof XmlBlock>) => React.JSX.Element;
+    CsvBlock: (props: React.ComponentProps<typeof CsvBlock>) => React.JSX.Element;
+    JsonBlock: (props: React.ComponentProps<typeof JsonBlock>) => React.JSX.Element;
+    TomlBlock: (props: React.ComponentProps<typeof TomlBlock>) => React.JSX.Element;
+    TreeBlock: (props: React.ComponentProps<typeof TreeBlock>) => React.JSX.Element;
+    MarkdownPreviewBlock: (props: React.ComponentProps<typeof MarkdownPreviewBlock>) => React.JSX.Element;
+};
+/**
+ * Export wrapped loading visualization components
+ */
+declare const BUILTIN_LOADING_COMPONENTS: {
+    DiagramLoading: () => React.JSX.Element;
+};
+/**
+ * THE BLOCK COMPONENT REGISTRY. The engine ships the generic components above; a host registers
+ * its own (domain kinds, app previews) with `registerBlockComponents` — matrx-frontend does so
+ * from `components/mardown-display/chat-markdown/block-registry/BlockComponentRegistry.tsx`.
+ * Lookups read the registered map first, so a host can also replace a built-in. Kept on
+ * `globalThis` so a dual-loader graph sees one registry.
+ */
+export type RegisteredBlockComponent = React.ComponentType<any>;
+export declare function registerBlockComponents(components: Record<string, RegisteredBlockComponent>): void;
+export declare function registerLoadingComponents(components: Record<string, RegisteredBlockComponent>): void;
+type BlockComponentMap = typeof BUILTIN_BLOCK_COMPONENTS & {
+    readonly [name: string]: RegisteredBlockComponent | undefined;
+};
+type LoadingComponentMap = typeof BUILTIN_LOADING_COMPONENTS & {
+    readonly [name: string]: RegisteredBlockComponent | undefined;
+};
+export declare const BlockComponents: BlockComponentMap;
+export declare const LoadingComponents: LoadingComponentMap;
+export {};

package/dist/display/chat-markdown/block-registry/BlockComponentRegistry.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import ThinkingVisualization from "../../blocks/thinking-reasoning/ThinkingVisualization.js";
+import ReasoningVisualization from "../../blocks/thinking-reasoning/ReasoningVisualization.js";
+import ConsolidatedReasoningVisualization from "../../blocks/thinking-reasoning/ConsolidatedReasoningVisualization.js";
+import ImageBlock from "../../blocks/images/ImageBlock.js";
+import SvgBlock from "../../blocks/svg/SvgBlock.js";
+import ChartBlock from "../../blocks/chart/ChartBlock.js";
+import MarkdownTable from "../../tables/MarkdownTable.js";
+import { StreamingTableRenderer } from "../../blocks/table/StreamingTableRenderer.js";
+import YamlBlock from "../../blocks/yaml/YamlBlock.js";
+import XmlBlock from "../../blocks/xml/XmlBlock.js";
+import CsvBlock from "../../blocks/csv/CsvBlock.js";
+import { JsonBlock } from "../../blocks/json/JsonBlock.js";
+import TomlBlock from "../../blocks/toml/TomlBlock.js";
+import TreeBlock from "../../blocks/tree/TreeBlock.js";
+import MarkdownPreviewBlock from "../../blocks/markdown-preview/MarkdownPreviewBlock.js";
+import DiagramLoadingVisualization from "../../blocks/diagram/DiagramLoadingVisualization.js";
+import MatrxMiniLoader from "../../../utils/lifted/MatrxMiniLoader.js";
+import BasicMarkdownContent from "../BasicMarkdownContent.js";
+const CodeBlock = lazy(
+  () => import("../../../code-block/CodeBlock.js")
+);
+const InteractiveDiagramBlock = lazy(
+  () => import("../../blocks/diagram/InteractiveDiagramBlock.js")
+);
+const MermaidBlock = lazy(() => import("../../blocks/mermaid/MermaidBlock.js"));
+const StreamingDiffBlock = lazy(
+  () => import("../diff-blocks/StreamingDiffBlock.js").then((m) => ({
+    default: m.StreamingDiffBlock
+  }))
+);
+const SearchReplaceBlock = lazy(
+  () => import("../../blocks/search-replace/SearchReplaceBlock.js").then((m) => ({
+    default: m.SearchReplaceBlock
+  }))
+);
+const LazyBlockWrapper = ({
+  children,
+  fallback
+}) => /* @__PURE__ */ jsx(Suspense, { fallback: fallback || /* @__PURE__ */ jsx(MatrxMiniLoader, {}), children });
+const BUILTIN_BLOCK_COMPONENTS = {
+  // Lightweight components
+  BasicMarkdownContent,
+  // CodeBlock is lazy-loaded to avoid circular dependency with Redux
+  CodeBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(CodeBlock, { ...props }) }),
+  // Wrapped lazy components
+  ThinkingVisualization: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(ThinkingVisualization, { ...props }) }),
+  ReasoningVisualization: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(ReasoningVisualization, { ...props }) }),
+  ConsolidatedReasoningVisualization: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(ConsolidatedReasoningVisualization, { ...props }) }),
+  ImageBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(ImageBlock, { ...props }) }),
+  InteractiveDiagramBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(InteractiveDiagramBlock, { ...props }) }),
+  MermaidBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(MermaidBlock, { ...props }) }),
+  SvgBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(SvgBlock, { ...props }) }),
+  ChartBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(ChartBlock, { ...props }) }),
+  MarkdownTable: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(MarkdownTable, { ...props }) }),
+  StreamingTableRenderer: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(StreamingTableRenderer, { ...props }) }),
+  StreamingDiffBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(StreamingDiffBlock, { ...props }) }),
+  SearchReplaceBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(SearchReplaceBlock, { ...props }) }),
+  YamlBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(YamlBlock, { ...props }) }),
+  XmlBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(XmlBlock, { ...props }) }),
+  CsvBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(CsvBlock, { ...props }) }),
+  JsonBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(JsonBlock, { ...props }) }),
+  TomlBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(TomlBlock, { ...props }) }),
+  TreeBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(TreeBlock, { ...props }) }),
+  MarkdownPreviewBlock: (props) => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(MarkdownPreviewBlock, { ...props }) })
+};
+const BUILTIN_LOADING_COMPONENTS = {
+  DiagramLoading: () => /* @__PURE__ */ jsx(LazyBlockWrapper, { children: /* @__PURE__ */ jsx(DiagramLoadingVisualization, {}) })
+};
+const REGISTRY_KEY = /* @__PURE__ */ Symbol.for("ai-matrx.rich-content.block-components");
+function registry() {
+  const g = globalThis;
+  return g[REGISTRY_KEY] ??= { blocks: {}, loading: {} };
+}
+function registerBlockComponents(components) {
+  Object.assign(registry().blocks, components);
+}
+function registerLoadingComponents(components) {
+  Object.assign(registry().loading, components);
+}
+const BlockComponents = new Proxy(BUILTIN_BLOCK_COMPONENTS, {
+  get: (target, key) => typeof key === "string" && registry().blocks[key] || target[key]
+});
+const LoadingComponents = new Proxy(BUILTIN_LOADING_COMPONENTS, {
+  get: (target, key) => typeof key === "string" && registry().loading[key] || target[key]
+});
+export {
+  BlockComponents,
+  LoadingComponents,
+  registerBlockComponents,
+  registerLoadingComponents
+};