@ai-matrx/rich-content 0.2.3 → 0.2.6

package/dist/levels/prose/prose-prepare.js

@@ -0,0 +1,246 @@
+import { ALLOWED_RAW_HTML_TAGS } from "../../display/chat-markdown/rehypeSafeRawHtml.js";
+import { splitFrontmatter } from "../../markdown-core/syntax/frontmatter.js";
+import { fenceLineKinds, lineIndent, opensStrippedHtmlBlock } from "@ai-matrx/content-ir/source";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { gfmFromMarkdown } from "mdast-util-gfm";
+import { gfm } from "micromark-extension-gfm";
+import { findTableEnd, tableStartsAt } from "../../display/markdown-classification/processors/utils/gfm-table-lines.js";
+const THICK_HR_SENTINEL = "\uE000THICK_HR\uE000";
+function isolateThickHorizontalRules(source) {
+  const lines = source.split("\n");
+  const kinds = fenceLineKinds(source);
+  const out = lines.map(
+    (line, i) => kinds[i] === "prose" && /^[ \t]*={3,}[ \t]*$/.test(line) ? THICK_HR_SENTINEL : line
+  );
+  return out.join("\n").replace(
+    new RegExp(`([^\\n])\\n+(${THICK_HR_SENTINEL})`, "g"),
+    "$1\n\n$2"
+  ).replace(
+    new RegExp(`(${THICK_HR_SENTINEL})\\n+([^\\n])`, "g"),
+    "$1\n\n$2"
+  );
+}
+const RTL_CHAR = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\u200F\u202E]/;
+function isRtlCode(c) {
+  return c >= 1424 && c <= 1791 || c >= 1872 && c <= 1919 || c >= 2208 && c <= 2303 || c >= 64336 && c <= 65023 || c >= 65136 && c <= 65279 || c === 8207 || c === 8238;
+}
+const detectTextDirection = (text) => {
+  if (!RTL_CHAR.test(text)) return "ltr";
+  let rtlCount = 0;
+  let ltrCount = 0;
+  for (let i = 0; i < text.length; i++) {
+    const c = text.charCodeAt(i);
+    if (isRtlCode(c)) rtlCount++;
+    else if (c >= 65 && c <= 90 || c >= 97 && c <= 122) ltrCount++;
+  }
+  const totalAlphabetic = rtlCount + ltrCount;
+  if (totalAlphabetic === 0) return "ltr";
+  return rtlCount / totalAlphabetic > 0.1 ? "rtl" : "ltr";
+};
+const getDirectionClasses = (direction) => {
+  return direction === "rtl" ? "text-right rtl" : "text-left ltr";
+};
+const getDirectionFontSize = (direction) => {
+  return direction === "rtl" ? "text-base" : "text-sm";
+};
+const FENCE_TOKEN = /\uE001F(\d+)\uE001/g;
+function protectFencedCode(source) {
+  if (!source.includes("```") && !source.includes("~~~")) return null;
+  const lines = source.split("\n");
+  const kinds = fenceLineKinds(source);
+  const out = [];
+  const fences = [];
+  for (let i = 0; i < lines.length; ) {
+    if (kinds[i] !== "open") {
+      out.push(lines[i]);
+      i += 1;
+      continue;
+    }
+    const region = [lines[i]];
+    i += 1;
+    while (i < lines.length && (kinds[i] === "body" || kinds[i] === "close")) {
+      const closes = kinds[i] === "close";
+      region.push(lines[i]);
+      i += 1;
+      if (closes) break;
+    }
+    const indent = /^[ \t]*/.exec(region[0])?.[0] ?? "";
+    region[0] = region[0].slice(indent.length);
+    out.push(`${indent}\uE001F${fences.length}\uE001`);
+    fences.push(region.join("\n"));
+  }
+  if (fences.length === 0) return null;
+  return {
+    text: out.join("\n"),
+    restore: (s) => s.replace(FENCE_TOKEN, (_m, n) => fences[Number(n)] ?? "")
+  };
+}
+const LIST_ITEM_LINE = /^[ \t]*(?:[*+-]|\d+[.)])[ \t]/;
+const INDENT_RUN = /^( +)(?! |[*+-][ \t]|\d+[.)][ \t])/;
+function preserveIndentation(source) {
+  let inList = false;
+  let changed = false;
+  const raw = source.split("\n");
+  const tableLine = /* @__PURE__ */ new Set();
+  if (source.includes("|")) {
+    for (let i = 0; i + 1 < raw.length; i += 1) {
+      if (!tableStartsAt(raw, i)) continue;
+      const end = findTableEnd(raw, i);
+      for (let k = i; k < end; k += 1) tableLine.add(k);
+      i = end - 1;
+    }
+  }
+  const lines = raw.map((line, index) => {
+    if (tableLine.has(index)) return line;
+    if (LIST_ITEM_LINE.test(line)) {
+      inList = true;
+      return line;
+    }
+    if (!line.trim()) return line;
+    if (!/^[ \t]/.test(line)) {
+      inList = false;
+      return line;
+    }
+    if (inList) return line;
+    const m = INDENT_RUN.exec(line);
+    if (!m) return line;
+    changed = true;
+    return "\xA0\xA0".repeat(m[1].length) + line.slice(m[1].length);
+  });
+  return changed ? lines.join("\n") : source;
+}
+function prepareInlineProse(rawContent) {
+  let processed = rawContent;
+  processed = processed.replace(
+    /(`+)([\s\S]*?)\1|<(thinking|think|reasoning)>([^\n<>]*?)<\/\3>/g,
+    (match, backticks, _code, _tag, aside) => backticks !== void 0 ? match : aside?.trim() ? `<i>${aside.trim()}</i>` : ""
+  );
+  processed = processed.replace(
+    /(`+)([\s\S]*?)\1|<(\/?[\w][\w-]*)([^>]*?)>/g,
+    (match, backticks, _codeContent, tagName, tagAttrs) => {
+      if (backticks !== void 0) return match;
+      const bareTag = String(tagName).replace(/^\//, "").toLowerCase();
+      if (ALLOWED_RAW_HTML_TAGS.has(bareTag)) return match;
+      return `&lt;${tagName}${tagAttrs}&gt;`;
+    }
+  );
+  return processed;
+}
+function linkBracketedUrls(processed) {
+  return processed.replace(
+    /\[(https?:\/\/[^\]\s]+)\](?!\()/g,
+    "[$1]($1)"
+  );
+}
+function preprocessCellProse(rawContent) {
+  return linkBracketedUrls(prepareInlineProse(rawContent));
+}
+function endStrippedHtmlBlocks(text) {
+  if (!text.includes("<")) return text;
+  const lines = text.split("\n");
+  const out = [];
+  lines.forEach((line, i) => {
+    out.push(line);
+    const next = lines[i + 1];
+    if (next !== void 0 && next.trim() && lineIndent(line) < 4 && opensStrippedHtmlBlock(line.trim())) out.push("");
+  });
+  return out.length === lines.length ? text : out.join("\n");
+}
+function gfmStructure(markdown) {
+  const tree = fromMarkdown(markdown, { extensions: [gfm()], mdastExtensions: [gfmFromMarkdown()] });
+  const out = [];
+  const walk = (node) => {
+    if (node.type === "list") out.push(`${node.ordered ? "ol" : "ul"}${node.children?.length ?? 0}`);
+    else if (node.type === "table") out.push(`table${node.children?.length ?? 0}`);
+    else if (node.type === "blockquote") out.push("quote");
+    else if (node.type === "heading") out.push(`h${node.depth ?? 0}`);
+    else if (node.type === "footnoteDefinition") out.push(`note${node.children?.length ?? 0}`);
+    (node.children ?? []).forEach(walk);
+  };
+  walk(tree);
+  return out.join(" ");
+}
+function keepGfmStructure(before, after) {
+  if (after === before) return after;
+  return gfmStructure(after) === gfmStructure(before) ? after : before;
+}
+const LIST_MARKER_LINE = /^\s*(?:[-+*]|\d{1,9}[.)])(?:[ \t]|$)/;
+const SETEXT_UNDERLINE = /^ {0,3}(?:=+|-+)[ \t]*$/;
+const ENDS_IN_EMPHASIS = /(?:\*\*[^*]+\*\*|\*[^*]+\*)$/;
+const ONLY_ITALIC = /^\*[^*]+\*$/;
+function inListOrQuote(lines, i) {
+  for (let k = i; k >= 0; k -= 1) {
+    const line = lines[k] ?? "";
+    if (!line.trim()) return false;
+    if (LIST_MARKER_LINE.test(line) || /^\s*>/.test(line) || /^[ \t]/.test(line)) return true;
+  }
+  return false;
+}
+function mayBreakAfter(lines, i) {
+  const next = lines[i + 1] ?? "";
+  if (!next.trim() || !(lines[i] ?? "").trim()) return false;
+  if (/^\s/.test(next) || LIST_MARKER_LINE.test(next) || SETEXT_UNDERLINE.test(next)) return false;
+  return !inListOrQuote(lines, i);
+}
+function spaceEmphasisLines(text) {
+  if (!text.includes("*")) return text;
+  const lines = text.split("\n");
+  const breakAfter = /* @__PURE__ */ new Set();
+  lines.forEach((line, i) => {
+    if (i + 1 >= lines.length) return;
+    if (ENDS_IN_EMPHASIS.test(line) && !/^[*-]/.test(lines[i + 1] ?? "") && mayBreakAfter(lines, i)) breakAfter.add(i);
+    if (i > 0 && ONLY_ITALIC.test(line) && !LIST_MARKER_LINE.test(line) && mayBreakAfter(lines, i - 1) && mayBreakAfter(lines, i)) {
+      breakAfter.add(i - 1);
+      breakAfter.add(i);
+    }
+  });
+  if (breakAfter.size === 0) return text;
+  return lines.map((line, i) => breakAfter.has(i) ? `${line}
+` : line).join("\n");
+}
+function separateSetextUnderlines(text) {
+  if (!text.includes("\n---")) return text;
+  const lines = text.split("\n");
+  const out = [];
+  lines.forEach((line, i) => {
+    if (i > 0 && line.startsWith("---") && lines[i - 1] !== "" && !tableStartsAt(lines, i - 1)) out.push("");
+    out.push(line);
+  });
+  return out.join("\n");
+}
+function preprocessProse(rawContent) {
+  if (rawContent.charCodeAt(0) === 65279) return preprocessProse(rawContent.slice(1));
+  const frontmatter = splitFrontmatter(rawContent);
+  if (frontmatter) return frontmatter.raw + preprocessProse(frontmatter.body);
+  const guarded = protectFencedCode(rawContent);
+  if (guarded) return guarded.restore(preprocessProse(guarded.text));
+  let processed = rawContent;
+  processed = endStrippedHtmlBlocks(processed);
+  processed = prepareInlineProse(processed);
+  processed = keepGfmStructure(processed, preserveIndentation(processed));
+  processed = linkBracketedUrls(processed);
+  processed = processed.replace(/^(\s*)\*([ \t]+)/gm, "$1-$2");
+  processed = processed.replace(
+    /(^[ \t]*-[ \t]+[^\n]+)\n\n(\*\*\d)/gm,
+    "$1\n\n&nbsp;\n\n$2"
+  );
+  processed = separateSetextUnderlines(processed);
+  processed = isolateThickHorizontalRules(processed);
+  processed = keepGfmStructure(processed, spaceEmphasisLines(processed));
+  processed = processed.replace(/\n{2,}/g, (match) => {
+    const blankLines = Math.min(match.length - 2, 2);
+    return "\n\n" + "&nbsp;\n\n".repeat(blankLines);
+  });
+  return processed;
+}
+export {
+  THICK_HR_SENTINEL,
+  detectTextDirection,
+  getDirectionClasses,
+  getDirectionFontSize,
+  isolateThickHorizontalRules,
+  preprocessCellProse,
+  preprocessProse,
+  preserveIndentation,
+  protectFencedCode
+};

package/dist/levels/prose/remote-image-policy.d.ts

@@ -0,0 +1,34 @@
+import React, { type ReactNode } from "react";
+/** Who wrote the text being rendered: the viewer, someone else, or an AI model. */
+export type ImagePolicy = "self" | "other" | "ai";
+/**
+ * What a render site declares: who wrote it, or "inherit" for a render nested
+ * INSIDE a surface that already declared (a kind block or tool renderer inside a
+ * chat answer) — it takes the enclosing declaration.
+ */
+export type ImagePolicyDeclaration = ImagePolicy | "inherit";
+/** Wrap `node` in the declaration's provider; "inherit" and undefined add none. */
+export declare function withImagePolicy(declaration: ImagePolicyDeclaration | undefined, node: ReactNode): ReactNode;
+/** "self" when the viewer wrote it, otherwise "other" — for records that can be either. */
+export declare function authoredBy(authorId: string | null | undefined, viewerId: string | null | undefined): ImagePolicy;
+export declare const REMOTE_IMAGE_KNOB_FEATURE = "rich_content.remote_images";
+/** What each authorship does when the knob has not answered (and on anonymous pages). */
+export declare const REMOTE_IMAGE_DEFAULTS: Record<ImagePolicy, boolean>;
+export declare function ImagePolicyProvider({ value, children }: {
+    value: ImagePolicy;
+    children: ReactNode;
+}): React.JSX.Element;
+/** The declared authorship, or null when no host declared one. */
+export declare function useImagePolicy(): ImagePolicy | null;
+/** The remote host a URL would contact, or null when drawing it reaches no third party. */
+export declare function remoteImageHost(src: string): string | null;
+/**
+ * Renders `children` (the real image) when it may load; otherwise the
+ * click-to-load placeholder. `block` lays the placeholder out as a line.
+ */
+export declare function RemoteImageGate({ src, alt, block, children, }: {
+    src: string;
+    alt?: string;
+    block?: boolean;
+    children: ReactNode;
+}): React.JSX.Element;

package/dist/levels/prose/remote-image-policy.js

@@ -0,0 +1,153 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { ImageOff } from "lucide-react";
+import { recognizeOurFileUrl } from "@ai-matrx/media/files/engine/media/our-file-sources";
+import { imageKnobPrincipals as sessionKnobPrincipals, setImageKnobMapEntry as setUserKnobMapEntry, useImageKnob as useEffectiveKnob } from "../../host/app-bindings.js";
+import { ErrorNotice } from "../../host/ErrorNotice.js";
+function withImagePolicy(declaration, node) {
+  return declaration && declaration !== "inherit" ? /* @__PURE__ */ jsx(ImagePolicyProvider, { value: declaration, children: node }) : node;
+}
+function authoredBy(authorId, viewerId) {
+  return authorId && viewerId && authorId === viewerId ? "self" : "other";
+}
+const REMOTE_IMAGE_KNOB_FEATURE = "rich_content.remote_images";
+const REMOTE_IMAGE_DEFAULTS = { self: true, other: false, ai: false };
+const ImagePolicyContext = createContext(null);
+function ImagePolicyProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(ImagePolicyContext.Provider, { value, children });
+}
+function useImagePolicy() {
+  return useContext(ImagePolicyContext);
+}
+let warnedUndeclared = false;
+function warnUndeclared(host) {
+  if (warnedUndeclared || false) return;
+  warnedUndeclared = true;
+  console.warn(
+    `[rich-content] A remote image (${host}) rendered where no surface declared who wrote the text, so it waits for a click. Pass imagePolicy="self" | "other" | "ai" on the RichContent / RichDocument / MarkdownStream that renders it (components/rich-content/prose/remote-image-policy.tsx).`
+  );
+}
+function remoteImageHost(src) {
+  const s = src.trim();
+  if (!s) return null;
+  if (/^(data:image\/|blob:)/i.test(s)) return null;
+  if (s.startsWith("/") && !s.startsWith("//")) return null;
+  if (recognizeOurFileUrl(s)) return null;
+  let url;
+  try {
+    const base = typeof window !== "undefined" ? window.location.href : "https://localhost/";
+    url = new URL(s, base);
+  } catch {
+    return null;
+  }
+  if (typeof window !== "undefined" && url.origin === window.location.origin) return null;
+  return url.host || null;
+}
+function asHostMap(v) {
+  return v && typeof v === "object" && !Array.isArray(v) ? v : {};
+}
+function RemoteImageGate({
+  src,
+  alt,
+  block = false,
+  children
+}) {
+  const declared = useImagePolicy();
+  const authorship = declared ?? "other";
+  const { organizationId, userId } = sessionKnobPrincipals();
+  const autoload = useEffectiveKnob(organizationId, userId, { feature: REMOTE_IMAGE_KNOB_FEATURE, key: `autoload_${authorship}` });
+  const trusted = asHostMap(useEffectiveKnob(organizationId, userId, { feature: REMOTE_IMAGE_KNOB_FEATURE, key: "trusted_hosts" }));
+  const [shown, setShown] = useState(false);
+  const [trusting, setTrusting] = useState("idle");
+  const host = remoteImageHost(src);
+  if (!host) return /* @__PURE__ */ jsx(Fragment, { children });
+  if (!declared) warnUndeclared(host);
+  const loadsByItself = typeof autoload === "boolean" ? autoload : REMOTE_IMAGE_DEFAULTS[authorship];
+  if (shown || loadsByItself || trusted[host] === true) return /* @__PURE__ */ jsx(Fragment, { children });
+  const why = authorship === "ai" ? "written by AI" : "written by someone else";
+  const canTrust = !!organizationId && !!userId;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-content-chrome": "",
+      "data-rc-remote-image": host,
+      role: "group",
+      "aria-label": alt ? `Image \u201C${alt}\u201D from ${host}, not loaded` : `Image from ${host}, not loaded`,
+      className: (block ? "my-2 flex w-full " : "mx-0.5 inline-flex max-w-full ") + // wraps in a narrow column: the host name gives way, the controls never get cut
+      "flex-wrap items-center gap-x-1.5 gap-y-0.5 rounded-md border border-dashed border-border bg-muted/40 px-2 py-1 align-middle text-xs text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 max-w-full items-center gap-1.5", title: `Images from other websites in text ${why} wait for you to show them.`, children: [
+          /* @__PURE__ */ jsx(ImageOff, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
+            alt ? `\u201C${alt}\u201D \u2014 ` : "",
+            "image from ",
+            host
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShown(true),
+            className: "shrink-0 rounded px-1 font-medium text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
+            children: "Show image"
+          }
+        ),
+        canTrust ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: trusting === "saving",
+            onClick: async () => {
+              setTrusting("saving");
+              try {
+                const r = await setUserKnobMapEntry({
+                  feature: REMOTE_IMAGE_KNOB_FEATURE,
+                  key: "trusted_hosts",
+                  entryKey: host,
+                  entryValue: true,
+                  userId,
+                  organizationId,
+                  note: "Always show images from this website (image placeholder)"
+                });
+                if (r.ok) {
+                  setShown(true);
+                  setTrusting("idle");
+                } else setTrusting(r.reason);
+              } catch (e) {
+                console.error("[rich-content] saving a trusted image host failed", e);
+                setTrusting("That choice could not be saved. Show image still works for this one.");
+              }
+            },
+            title: `Always show images from ${host}`,
+            className: "shrink-0 rounded px-1 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
+            children: trusting === "saving" ? "Saving\u2026" : "Always show"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: src,
+            target: "_blank",
+            rel: "noopener noreferrer nofollow",
+            referrerPolicy: "no-referrer",
+            className: "shrink-0 rounded px-1 hover:underline",
+            children: "Open"
+          }
+        ),
+        trusting !== "idle" && trusting !== "saving" ? /* @__PURE__ */ jsx(ErrorNotice, { size: "inline", className: "basis-full", message: trusting }) : null
+      ]
+    }
+  );
+}
+export {
+  ImagePolicyProvider,
+  REMOTE_IMAGE_DEFAULTS,
+  REMOTE_IMAGE_KNOB_FEATURE,
+  RemoteImageGate,
+  authoredBy,
+  remoteImageHost,
+  useImagePolicy,
+  withImagePolicy
+};

package/dist/levels/prose/variant-root.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { RichContentVariant } from "../rich-content-types.js";
+/** The reading variant's scoped, unlayered stylesheet. */
+export declare const READING_VARIANT_CSS = "\n[data-rc-variant=\"reading\"]{font-size:1.125rem;max-width:70ch;margin-inline:auto;color:hsl(var(--foreground));}\n[data-rc-variant=\"reading\"] .math-content-wrapper{margin-block:0;}\n[data-rc-variant=\"reading\"] p,[data-rc-variant=\"reading\"] li{font-size:1.125rem;line-height:1.75;}\n[data-rc-variant=\"reading\"] p{margin-bottom:1.15em;}\n[data-rc-variant=\"reading\"] li{margin-bottom:0.35em;}\n[data-rc-variant=\"reading\"] ul,[data-rc-variant=\"reading\"] ol{margin-bottom:1.15em;}\n[data-rc-variant=\"reading\"] blockquote{font-size:1.125rem;line-height:1.7;margin-block:1.5em;}\n[data-rc-variant=\"reading\"] blockquote p{margin-bottom:0.5em;}\n[data-rc-variant=\"reading\"] h1,[data-rc-variant=\"reading\"] h2,[data-rc-variant=\"reading\"] h3,[data-rc-variant=\"reading\"] h4{color:hsl(var(--foreground));font-weight:700;letter-spacing:-0.01em;}\n[data-rc-variant=\"reading\"] h1{font-size:2rem;line-height:1.2;margin:2.2em 0 0.6em;}\n[data-rc-variant=\"reading\"] h2{font-size:1.5rem;line-height:1.3;margin:2em 0 0.6em;}\n[data-rc-variant=\"reading\"] h3{font-size:1.25rem;line-height:1.4;margin:1.6em 0 0.5em;}\n[data-rc-variant=\"reading\"] h4{font-size:1.125rem;line-height:1.5;margin:1.4em 0 0.4em;}\n[data-rc-variant=\"reading\"] > :first-child h1:first-child,[data-rc-variant=\"reading\"] > :first-child h2:first-child{margin-top:0;}\n[data-rc-variant=\"reading\"] table{font-size:1rem;}\n[data-rc-variant=\"reading\"] hr{margin-block:2.5em;}\n";
+/** Wraps a level's output in its variant. `default` adds nothing. */
+export declare function RichContentVariantRoot({ variant, children, }: {
+    variant?: RichContentVariant;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/levels/prose/variant-root.js

@@ -0,0 +1,34 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const R = '[data-rc-variant="reading"]';
+const READING_VARIANT_CSS = `
+${R}{font-size:1.125rem;max-width:70ch;margin-inline:auto;color:hsl(var(--foreground));}
+${R} .math-content-wrapper{margin-block:0;}
+${R} p,${R} li{font-size:1.125rem;line-height:1.75;}
+${R} p{margin-bottom:1.15em;}
+${R} li{margin-bottom:0.35em;}
+${R} ul,${R} ol{margin-bottom:1.15em;}
+${R} blockquote{font-size:1.125rem;line-height:1.7;margin-block:1.5em;}
+${R} blockquote p{margin-bottom:0.5em;}
+${R} h1,${R} h2,${R} h3,${R} h4{color:hsl(var(--foreground));font-weight:700;letter-spacing:-0.01em;}
+${R} h1{font-size:2rem;line-height:1.2;margin:2.2em 0 0.6em;}
+${R} h2{font-size:1.5rem;line-height:1.3;margin:2em 0 0.6em;}
+${R} h3{font-size:1.25rem;line-height:1.4;margin:1.6em 0 0.5em;}
+${R} h4{font-size:1.125rem;line-height:1.5;margin:1.4em 0 0.4em;}
+${R} > :first-child h1:first-child,${R} > :first-child h2:first-child{margin-top:0;}
+${R} table{font-size:1rem;}
+${R} hr{margin-block:2.5em;}
+`;
+function RichContentVariantRoot({
+  variant = "default",
+  children
+}) {
+  if (variant !== "reading") return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("div", { "data-rc-variant": "reading", children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: READING_VARIANT_CSS } }),
+    children
+  ] });
+}
+export {
+  READING_VARIANT_CSS,
+  RichContentVariantRoot
+};

package/dist/levels/rich-content-types.d.ts

@@ -0,0 +1,93 @@
+/**
+ * `<RichContent level>` — the ONE entry for rendering any text that is more
+ * than plain text. Types live here (the shell) so a consumer's graph never
+ * pulls an implementation to name a prop.
+ *
+ * Levels — the same core, the same plugin rules, the same prose preparation;
+ * a level only decides how much of the block pipeline is mounted:
+ *
+ *  - `inline`   markdown + math, NO blocks. Renders phrasing elements only
+ *               (spans), so it is valid inside a `<p>`, a `<button>`, a table
+ *               cell, a title. Card faces, quiz prompts, previews, terms.
+ *  - `standard` + code, tables, mermaid, XML sections, ```markdown fences and
+ *               other nested blocks — depth-bounded. No kinds, no actions.
+ *  - `full`     the whole chat pipeline (MarkdownStream → block registry →
+ *               kinds, interactive blocks, actions).
+ *
+ * Plan: common-docs/projects/rich-content-unification/PLAN.md decisions 1, 2, 9.
+ */
+import type { MarkdownStreamProps } from "../host/app-bindings.js";
+export type RichContentLevel = "inline" | "standard" | "full";
+/**
+ * How many nested content levels render formatted before falling back to
+ * plain text with an "open" affordance. Depth 0 is the content itself; an
+ * `<info>` inside it is depth 1; a ```markdown fence inside that is depth 2 …
+ *
+ * Default for the `depthCap` knob (prop / provider). Chosen 2026-09-23: three
+ * levels covers every nesting seen in real assistant output (a section → a
+ * document → its own section) while bounding adversarial or runaway nesting.
+ */
+export declare const DEFAULT_RICH_CONTENT_DEPTH_CAP = 3;
+/**
+ * Typography variant — never a second renderer (prose/variant-root.tsx).
+ *  - `default`  chat density.
+ *  - `reading`  long-form reading: larger body, ~70ch measure, comfortable
+ *               line-height, heading scale. For learn articles, share pages,
+ *               public resources.
+ */
+export type RichContentVariant = "default" | "reading";
+export interface RichContentProps {
+    /** The source text — markdown, math, XML sections, fences. */
+    source: string;
+    level: RichContentLevel;
+    /**
+     * True while the source is still streaming in. Inline: heal half-arrived
+     * syntax (omit to inherit a live stream; `false` for whole text).
+     */
+    isStreaming?: boolean;
+    className?: string;
+    /** Nested-rendering depth cap (standard / full). */
+    depthCap?: number;
+    /** Typography variant (standard / full); default `default`. */
+    variant?: RichContentVariant;
+    /**
+     * Inline only: `text` renders markdown links as their formatted text, for
+     * content that already sits inside a link (card previews). Default `link`.
+     */
+    links?: "link" | "text";
+    /**
+     * Standard / full: heading hover anchors ("#" links to a section). Pass
+     * `false` in preview contexts (clamped cards, collapsed panels) where the
+     * section is not on screen. Default `true`; the inline level never has them.
+     */
+    headingAnchors?: boolean;
+    /**
+     * WHO WROTE this text — "self" (the viewer), "other" (someone else) or "ai"
+     * (a model). Decides whether remote images load by themselves, per the
+     * `rich_content.remote_images.autoload_*` knobs (remote-image-policy.tsx).
+     * REQUIRED in practice at the full level (guard:
+     * __tests__/image-policy-declared.test.ts); omitted = inherit, and with no
+     * declaration anywhere remote images wait for a click.
+     */
+    imagePolicy?: "self" | "other" | "ai" | "inherit";
+    /**
+     * Inline only: the source is ONE GFM table cell. It is read the way GFM reads
+     * a cell — inline constructs only (`> 90%`, `- n/a`, `# 3` are text, never a
+     * quote/list/heading) and `\|` shows as `|` (the one cell-pipe rule). Pass the
+     * cell's source text as stored. verify-RC-B4 R6-1.
+     */
+    gfmCell?: boolean;
+    /**
+     * Full level only — the engine's host hooks, forwarded as given to the chat
+     * pipeline (MarkdownStream). `onContentChange` receives an in-block edit
+     * (JSON reformat, code edit, table edit) so the host can persist it;
+     * `applyLocalEdits={false}` keeps the shown text tied to `source`.
+     */
+    onContentChange?: MarkdownStreamProps["onContentChange"];
+    applyLocalEdits?: boolean;
+    analysisData?: unknown;
+    messageId?: string;
+    conversationId?: string;
+    allowFullScreenEditor?: boolean;
+    hideCopyButton?: boolean;
+}

package/dist/levels/rich-content-types.js

@@ -0,0 +1,4 @@
+const DEFAULT_RICH_CONTENT_DEPTH_CAP = 3;
+export {
+  DEFAULT_RICH_CONTENT_DEPTH_CAP
+};

package/dist/levels/server/DelimiterViolationReport.d.ts

@@ -0,0 +1,7 @@
+import { type guardMarkdownDelimiters } from "@ai-matrx/kit/delimiter-guard";
+type Violations = ReturnType<typeof guardMarkdownDelimiters>["violations"];
+export declare function DelimiterViolationReport({ violations, renderPath, }: {
+    violations: Violations;
+    renderPath: string;
+}): null;
+export default DelimiterViolationReport;

package/dist/levels/server/DelimiterViolationReport.js

@@ -0,0 +1,24 @@
+"use client";
+import { useEffect } from "react";
+import {
+  reportDelimiterViolations
+} from "@ai-matrx/kit/delimiter-guard";
+import { captureError } from "../../host/diagnostics.js";
+function DelimiterViolationReport({
+  violations,
+  renderPath
+}) {
+  useEffect(() => {
+    if (violations.length === 0) return;
+    reportDelimiterViolations(violations, {
+      renderPath,
+      capture: (input) => captureError({ ...input })
+    });
+  }, [violations, renderPath]);
+  return null;
+}
+var DelimiterViolationReport_default = DelimiterViolationReport;
+export {
+  DelimiterViolationReport,
+  DelimiterViolationReport_default as default
+};

package/dist/levels/server/RichContentServer.d.ts

@@ -0,0 +1,27 @@
+import "server-only";
+import type { ReactNode } from "react";
+import type { DocumentNumbering } from "../../markdown-core/syntax/document-numbering.js";
+import { type RichContentVariant } from "../rich-content-types.js";
+import { type InlineLinks } from "../prose/inline-level-elements.js";
+export type RichContentServerLevel = "inline" | "standard";
+export interface RichContentServerProps {
+    source: string;
+    level: RichContentServerLevel;
+    className?: string;
+    /** Nested-rendering depth cap (standard). */
+    depthCap?: number;
+    /** Typography variant (standard); `reading` for long-form public pages. */
+    variant?: RichContentVariant;
+    /** Inline only: `text` when the content sits inside a link (card previews). */
+    links?: InlineLinks;
+}
+/** The server twin of BasicMarkdownContent's static markup (same frame, same map). */
+export declare function ProseServer({ content, numbering, renderNested, }: {
+    content: string;
+    /** The whole document's numbering (from the static root); none for a lone leaf. */
+    numbering?: DocumentNumbering | null;
+    /** Block bodies of directive containers, rendered by the static root. */
+    renderNested?: (source: string) => ReactNode;
+}): import("react").JSX.Element;
+export declare function RichContentServer({ source, level, className, depthCap, variant, links, }: RichContentServerProps): import("react").JSX.Element;
+export default RichContentServer;