@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/levels/server/RichContentServer.js

@@ -0,0 +1,97 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "server-only";
+import { guardMarkdownDelimiters } from "@ai-matrx/kit/delimiter-guard";
+import MarkdownCoreServer from "../../markdown-core/MarkdownCoreServer.js";
+import { cn } from "@ai-matrx/design-system";
+import { StaticStandard } from "../standard/static-standard.js";
+import {
+  DEFAULT_RICH_CONTENT_DEPTH_CAP
+} from "../rich-content-types.js";
+import { RichContentVariantRoot } from "../prose/variant-root.js";
+import { detectTextDirection, preprocessProse } from "../prose/prose-prepare.js";
+import {
+  INLINE_LEVEL_WRAPPER_CLASS,
+  inlineLevelElements
+} from "../prose/inline-level-elements.js";
+import {
+  proseElementsWithNested,
+  PROSE_FRAME_CSS,
+  proseFrameClass
+} from "../prose/prose-block-elements.js";
+import { DelimiterViolationReport } from "./DelimiterViolationReport.js";
+import { ImagePolicyProvider } from "../prose/remote-image-policy.js";
+function guarded(source, renderPath) {
+  const { text, violations } = guardMarkdownDelimiters(preprocessProse(source));
+  const report = violations.length > 0 ? /* @__PURE__ */ jsx(DelimiterViolationReport, { violations, renderPath }) : null;
+  return { text, report };
+}
+function ProseServer({
+  content,
+  numbering,
+  renderNested
+}) {
+  const direction = detectTextDirection(content);
+  const { text, report } = guarded(content, "RichContentServer.prose");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: proseFrameClass(direction), dir: direction, children: [
+      /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: PROSE_FRAME_CSS } }),
+      /* @__PURE__ */ jsx(
+        MarkdownCoreServer,
+        {
+          preset: "chat",
+          components: proseElementsWithNested(renderNested),
+          numbering,
+          children: text
+        }
+      )
+    ] }),
+    report
+  ] });
+}
+function InlineServer({
+  source,
+  className,
+  links
+}) {
+  if (!source.trim()) return null;
+  const { text, report } = guarded(source, "RichContentServer.inline");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-rich-content": "inline",
+        className: cn(INLINE_LEVEL_WRAPPER_CLASS, className),
+        children: /* @__PURE__ */ jsx(MarkdownCoreServer, { preset: "chat", components: inlineLevelElements(links), children: text })
+      }
+    ),
+    report
+  ] });
+}
+function RichContentServer({
+  source,
+  level,
+  className,
+  depthCap = DEFAULT_RICH_CONTENT_DEPTH_CAP,
+  variant,
+  links
+}) {
+  if (level === "inline") {
+    return /* @__PURE__ */ jsx(ImagePolicyProvider, { value: "other", children: /* @__PURE__ */ jsx(InlineServer, { source, className, links }) });
+  }
+  return /* @__PURE__ */ jsx(ImagePolicyProvider, { value: "other", children: /* @__PURE__ */ jsx(RichContentVariantRoot, { variant, children: /* @__PURE__ */ jsx(
+    StaticStandard,
+    {
+      source,
+      depth: 0,
+      cap: depthCap,
+      className,
+      Prose: ProseServer
+    }
+  ) }) });
+}
+var RichContentServer_default = RichContentServer;
+export {
+  ProseServer,
+  RichContentServer,
+  RichContentServer_default as default
+};

package/dist/levels/standard/NestedRichContent.d.ts

@@ -0,0 +1,7 @@
+export interface NestedRichContentProps {
+    source: string;
+    isStreaming?: boolean;
+    className?: string;
+}
+export declare function NestedRichContent({ source, isStreaming, className, }: NestedRichContentProps): import("react").JSX.Element;
+export default NestedRichContent;

package/dist/levels/standard/NestedRichContent.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Layers } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { RichContentDepthProvider, useRichContentDepth } from "../depth.js";
+import { StandardBlocks } from "./StandardBlocks.js";
+function NestedRichContent({
+  source,
+  isStreaming,
+  className
+}) {
+  const { depth, cap, ancestors } = useRichContentDepth();
+  const [opened, setOpened] = useState(false);
+  const next = depth + 1;
+  const key = source.trim();
+  if (key && ancestors.some((ancestor) => ancestor.trim() === key)) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-rich-content-self-nested": true,
+        className: cn("whitespace-pre-wrap break-words", className),
+        children: source
+      }
+    );
+  }
+  if (next > cap && !opened) {
+    return /* @__PURE__ */ jsxs("div", { "data-rich-content-capped": true, className, children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Nested ",
+          next,
+          " levels deep, shown as text."
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpened(true),
+            className: "rounded px-1.5 py-0.5 font-medium text-primary hover:bg-muted",
+            children: "Render it"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words text-sm text-foreground", children: source })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    RichContentDepthProvider,
+    {
+      depth: opened ? 0 : next,
+      cap,
+      source,
+      children: /* @__PURE__ */ jsx(
+        StandardBlocks,
+        {
+          source,
+          isStreaming,
+          className
+        }
+      )
+    }
+  );
+}
+var NestedRichContent_default = NestedRichContent;
+export {
+  NestedRichContent,
+  NestedRichContent_default as default
+};

package/dist/levels/standard/StandardBlocks.d.ts

@@ -0,0 +1,13 @@
+import type { SplitterBlock } from "../../display/markdown-classification/processors/utils/content-splitter-v2.js";
+export declare function StandardBlock({ block, isStreaming, }: {
+    block: SplitterBlock;
+    isStreaming?: boolean;
+}): import("react").JSX.Element | null;
+export interface StandardBlocksProps {
+    source: string;
+    isStreaming?: boolean;
+    className?: string;
+}
+/** Split once, render each block at the standard level. */
+export declare function StandardBlocks({ source, isStreaming, className, }: StandardBlocksProps): import("react").JSX.Element;
+export default StandardBlocks;

package/dist/levels/standard/StandardBlocks.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from "react";
+import { reuseUnchangedBlocks } from "../../display/chat-markdown/stable-blocks.js";
+import { splitContentIntoBlocksV2 } from "../../display/markdown-classification/processors/utils/content-splitter-v2.js";
+import BasicMarkdownContent from "../../display/chat-markdown/BasicMarkdownContent.js";
+import { InlineCodeSnippet } from "../../display/chat-markdown/InlineCodeSnippet.js";
+import XmlBlock from "../../display/blocks/xml/XmlBlock.js";
+import MarkdownPreviewBlock from "../../display/blocks/markdown-preview/MarkdownPreviewBlock.js";
+import { FENCE_META_KEY } from "@ai-matrx/content-ir/source";
+import CsvBlock from "../../display/blocks/csv/CsvBlock.js";
+import { fenceNestsInnerFences } from "@ai-matrx/content-ir/source";
+import { NestedRichContent } from "./NestedRichContent.js";
+import { DocumentFootnotes, DocumentNumberingProvider } from "../../markdown-core/syntax/elements/DocumentNumbering.js";
+import { healStreamingTail } from "./stream-holdback.js";
+import { stripThinking, stripThinkingStreaming } from "@ai-matrx/kit/text";
+import {
+  MarkdownStreamingProvider,
+  useMarkdownStreaming
+} from "../../markdown-core/streaming-context.js";
+import { RemoteImageGate } from "../prose/remote-image-policy.js";
+import { useKindSourceView } from "../../display/chat-markdown/KindTextGate.js";
+import { isQuotedSourceXmlBlock } from "@ai-matrx/content-ir/surfaces";
+import { standardKindRegionState } from "./standard-kind-region.js";
+const CodeBlock = lazy(
+  () => import("../../code-block/CodeBlock.js")
+);
+const MermaidBlock = lazy(
+  () => import("../../display/blocks/mermaid/MermaidBlock.js")
+);
+const StandardKindValue = lazy(() => import("./StandardKindRegion.js"));
+const StandardBrokenKind = lazy(
+  () => import("./StandardKindRegion.js").then((m) => ({ default: m.StandardBrokenKind }))
+);
+const CHAIN_OF_THOUGHT_TYPES = /* @__PURE__ */ new Set([
+  "thinking",
+  "reasoning",
+  "consolidated_reasoning"
+]);
+const THINKING_TAG = /<(thinking|reasoning)\b/i;
+function withoutThinking(source, live) {
+  if (!THINKING_TAG.test(source)) return source;
+  return live ? stripThinkingStreaming(source).visible : stripThinking(source);
+}
+const SECTION_TYPES = /* @__PURE__ */ new Set([
+  "info",
+  "task",
+  "plan",
+  "database",
+  "private",
+  "event",
+  "tool",
+  "thinking",
+  "reasoning",
+  "consolidated_reasoning"
+]);
+const XML_LANGUAGES = /* @__PURE__ */ new Set(["xml", "svg"]);
+function PlainCode({ code }) {
+  return /* @__PURE__ */ jsx("pre", { className: "my-3 overflow-x-auto whitespace-pre-wrap rounded-md border border-border bg-muted/40 p-3 font-mono text-sm", children: code });
+}
+function CodeFence({
+  code,
+  language,
+  isStreaming,
+  meta
+}) {
+  const probe = code.trim();
+  if (!probe) return null;
+  if (!meta && probe.split("\n").length <= 2 && probe.length < 120) {
+    return /* @__PURE__ */ jsx(
+      InlineCodeSnippet,
+      {
+        code,
+        language,
+        isStreamActive: isStreaming,
+        className: "my-3"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PlainCode, { code }), children: /* @__PURE__ */ jsx(
+    CodeBlock,
+    {
+      code,
+      language: language || "text",
+      meta,
+      fontSize: 14,
+      className: "my-3",
+      isStreamActive: isStreaming
+    }
+  ) });
+}
+const JSON_LANGUAGES = /* @__PURE__ */ new Set(["json", "jsonc", "json5"]);
+function KindLoader() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      "data-standard-kind-loading": "",
+      className: "my-3 h-20 animate-pulse rounded-md border border-border bg-muted/40"
+    }
+  );
+}
+function kindRegion(content, isStreaming) {
+  const decision = standardKindRegionState(content, isStreaming);
+  if (!decision) return null;
+  if (decision.state === "loader") return /* @__PURE__ */ jsx(KindLoader, {});
+  if (decision.state === "broken") {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(KindLoader, {}), children: /* @__PURE__ */ jsx(StandardBrokenKind, { slug: decision.slug, source: content }) });
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(KindLoader, {}), children: /* @__PURE__ */ jsx(StandardKindValue, { value: decision.value }) });
+}
+function looksLikeJson(text) {
+  const t = text.trim();
+  return t.startsWith("{") && t.endsWith("}") || t.startsWith("[") && t.endsWith("]");
+}
+function StandardBlock({
+  block,
+  isStreaming
+}) {
+  const { type, content } = block;
+  const sourceView = useKindSourceView();
+  const kindOf = (text) => sourceView ? null : kindRegion(text, isStreaming);
+  if (type === "text" || type === "table") {
+    if (!content.trim()) return null;
+    return /* @__PURE__ */ jsx(
+      BasicMarkdownContent,
+      {
+        imagePolicy: "inherit",
+        content,
+        isStreamActive: isStreaming,
+        showCopyButton: false
+      }
+    );
+  }
+  if (CHAIN_OF_THOUGHT_TYPES.has(type)) return null;
+  if (SECTION_TYPES.has(type)) {
+    if (!content.trim()) return null;
+    return /* @__PURE__ */ jsx("div", { "data-rich-content-section": type, className: "my-2", children: /* @__PURE__ */ jsx(NestedRichContent, { source: content, isStreaming }) });
+  }
+  if (type === "code") {
+    const language = block.language?.toLowerCase();
+    if (fenceNestsInnerFences(language)) {
+      return /* @__PURE__ */ jsx(MarkdownPreviewBlock, { content, isStreamActive: isStreaming });
+    }
+    if (language && XML_LANGUAGES.has(language)) {
+      return /* @__PURE__ */ jsx(
+        XmlBlock,
+        {
+          content,
+          language,
+          quotedSource: isQuotedSourceXmlBlock(block)
+        }
+      );
+    }
+    if (language === "csv" || language === "tsv") {
+      return /* @__PURE__ */ jsx(CsvBlock, { content, delimiter: language === "tsv" ? "	" : ",", className: "my-3" });
+    }
+    if (!language || JSON_LANGUAGES.has(language)) {
+      const kind2 = kindOf(content);
+      if (kind2) return kind2;
+    }
+    const fenceMeta = block.metadata?.[FENCE_META_KEY];
+    return /* @__PURE__ */ jsx(
+      CodeFence,
+      {
+        code: content,
+        language,
+        isStreaming,
+        meta: typeof fenceMeta === "string" && fenceMeta ? fenceMeta : void 0
+      }
+    );
+  }
+  if (type === "mermaid") {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PlainCode, { code: content }), children: /* @__PURE__ */ jsx(MermaidBlock, { content, isStreamActive: isStreaming }) });
+  }
+  if (type === "svg") {
+    return /* @__PURE__ */ jsx(XmlBlock, { content, language: "svg" });
+  }
+  if (type === "image" && block.src) {
+    return /* @__PURE__ */ jsx(RemoteImageGate, { src: block.src, alt: block.alt, block: true, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: block.src,
+        alt: block.alt || "",
+        referrerPolicy: "no-referrer",
+        className: "my-2 h-auto max-w-full rounded-md object-contain"
+      }
+    ) });
+  }
+  if (type === "accent-divider" || type === "heavy-divider") {
+    return /* @__PURE__ */ jsx("hr", { className: "my-4 border-border" });
+  }
+  if (!content.trim()) return null;
+  const kind = kindOf(content);
+  if (kind) return kind;
+  if (looksLikeJson(content)) {
+    return /* @__PURE__ */ jsx(CodeFence, { code: content, language: "json", isStreaming });
+  }
+  return /* @__PURE__ */ jsx(
+    CodeFence,
+    {
+      code: content,
+      language: block.language ?? type,
+      isStreaming
+    }
+  );
+}
+function StandardBlocks({
+  source,
+  isStreaming,
+  className
+}) {
+  const live = useMarkdownStreaming() || !!isStreaming;
+  const visible = withoutThinking(source, live);
+  const split = splitContentIntoBlocksV2(
+    live ? healStreamingTail(visible) : visible
+  );
+  const [stable, setStable] = useState(split);
+  const blocks = reuseUnchangedBlocks(stable, split);
+  if (blocks !== stable) setStable(blocks);
+  return /* @__PURE__ */ jsx(MarkdownStreamingProvider, { value: live, children: /* @__PURE__ */ jsx(DocumentNumberingProvider, { source: visible, children: /* @__PURE__ */ jsxs("div", { "data-rich-content": "standard", "data-matrx-doc-root": "", className: className ?? "min-w-0", children: [
+    blocks.map((block, index) => /* @__PURE__ */ jsx(
+      StandardBlock,
+      {
+        block,
+        isStreaming: live && index === blocks.length - 1
+      },
+      index
+    )),
+    /* @__PURE__ */ jsx(DocumentFootnotes, { render: (markdown) => /* @__PURE__ */ jsx(StandardBlock, { block: { type: "text", content: markdown } }) })
+  ] }) }) });
+}
+var StandardBlocks_default = StandardBlocks;
+export {
+  StandardBlock,
+  StandardBlocks,
+  StandardBlocks_default as default
+};

package/dist/levels/standard/StandardKindRegion.d.ts

@@ -0,0 +1,14 @@
+/** A complete kind region: one kind, or a list of them. */
+export declare function StandardKindValue({ value }: {
+    value: unknown;
+}): import("react").JSX.Element;
+/**
+ * A settled region that claims a kind but is not valid JSON — the kind's
+ * broken state: its name, a plain notice, and the source behind an explicit
+ * "View source" control (never shown by default).
+ */
+export declare function StandardBrokenKind({ slug, source, }: {
+    slug: string | null;
+    source: string;
+}): import("react").JSX.Element;
+export default StandardKindValue;

package/dist/levels/standard/StandardKindRegion.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { KindInstanceRender } from "../../host/app-bindings.js";
+import { StructuredValueView } from "../../host/app-bindings.js";
+import { humanizeKind } from "@ai-matrx/content-ir/surfaces";
+function kindOf(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const kind = value.__kind;
+  return typeof kind === "string" && kind.trim() ? kind : null;
+}
+function OneValue({ value }) {
+  const kind = kindOf(value);
+  if (!kind) return /* @__PURE__ */ jsx(StructuredValueView, { value });
+  return /* @__PURE__ */ jsx(
+    KindInstanceRender,
+    {
+      kind,
+      value,
+      showRoutingNote: false,
+      variant: "bare",
+      unroutableFallback: /* @__PURE__ */ jsx(StructuredValueView, { value, kind })
+    }
+  );
+}
+function StandardKindValue({ value }) {
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ jsx("div", { className: "my-3 space-y-3", "data-standard-kind-region": "", children: value.map((item, index) => /* @__PURE__ */ jsx(OneValue, { value: item }, index)) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "my-3", "data-standard-kind-region": "", children: /* @__PURE__ */ jsx(OneValue, { value }) });
+}
+function StandardBrokenKind({
+  slug,
+  source
+}) {
+  const [open, setOpen] = useState(false);
+  const name = slug ? humanizeKind(slug) : "This content";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "my-3 rounded-md border border-border bg-muted/30 px-3 py-2 text-sm",
+      "data-standard-kind-broken": "",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            name,
+            " could not be read"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-xs text-muted-foreground underline-offset-2 hover:underline",
+              onClick: () => setOpen((v) => !v),
+              children: open ? "Hide source" : "View source"
+            }
+          )
+        ] }),
+        open ? /* @__PURE__ */ jsx("pre", { className: "mt-2 max-h-64 overflow-auto whitespace-pre-wrap font-mono text-xs", children: source }) : null
+      ]
+    }
+  );
+}
+var StandardKindRegion_default = StandardKindValue;
+export {
+  StandardBrokenKind,
+  StandardKindValue,
+  StandardKindRegion_default as default
+};

package/dist/levels/standard/standard-kind-region.d.ts

@@ -0,0 +1,19 @@
+/**
+ * THE standard level's decision for a JSON region (the first-key rule,
+ * `jsonKindSignal`), pure so the frame judge asks the same question the
+ * renderer answers (`StandardBlock`, and every XML card's prose through it):
+ *  - `kind`   → the region renders as its kind (`value` parsed);
+ *  - `loader` → could still be a kind, mid-stream;
+ *  - `broken` → a settled region naming a kind that will not parse;
+ *  - null     → not a kind region (the caller draws it as JSON — correct).
+ */
+export type StandardKindRegionState = {
+    state: "kind";
+    value: unknown;
+} | {
+    state: "loader";
+} | {
+    state: "broken";
+    slug: string | null;
+} | null;
+export declare function standardKindRegionState(content: string, isStreaming?: boolean): StandardKindRegionState;

package/dist/levels/standard/standard-kind-region.js

@@ -0,0 +1,21 @@
+import {
+  firstKindSlug,
+  jsonKindSignal,
+  withoutLeadingJsonComments
+} from "@ai-matrx/content-ir/surfaces";
+function standardKindRegionState(content, isStreaming) {
+  const trimmed = withoutLeadingJsonComments(content).trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+  const signal = jsonKindSignal(trimmed);
+  if (signal === "not_kind") return null;
+  if (signal === "undecided") return isStreaming ? { state: "loader" } : null;
+  try {
+    return { state: "kind", value: JSON.parse(trimmed) };
+  } catch {
+    if (isStreaming) return { state: "loader" };
+    return { state: "broken", slug: firstKindSlug(trimmed) };
+  }
+}
+export {
+  standardKindRegionState
+};

package/dist/levels/standard/static-standard.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType, ReactNode } from "react";
+import { type DocumentNumbering } from "../../markdown-core/syntax/document-numbering.js";
+/** The injected prose leaf. `numbering` is the WHOLE document's (one pass at the root). */
+export type StaticProse = ComponentType<{
+    content: string;
+    numbering?: DocumentNumbering | null;
+    /**
+     * Renders a directive container's block body (`matrx-nested`, RC-B8) one
+     * level deeper through this same routing, so a fence inside a callout or
+     * tab is in the server HTML. Undefined past the depth cap (the client
+     * NestedBody then shows the app's capped view).
+     */
+    renderNested?: (source: string) => ReactNode;
+}>;
+export declare function StaticStandard({ source, depth, cap, className, Prose, numbering, }: {
+    source: string;
+    depth: number;
+    cap: number;
+    className?: string;
+    Prose: StaticProse;
+    /** Set by the root; nested documents keep the root's numbers. */
+    numbering?: DocumentNumbering;
+}): import("react").JSX.Element;