@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/levels/RichContentPreview.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+import { RichContent } from "./RichContent.js";
+import { inlineKindText } from "@ai-matrx/content-ir/surfaces";
+const CLAMP = {
+  1: "truncate",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  6: "line-clamp-6"
+};
+function previewSource(source, lines, maxChars) {
+  const picked = [];
+  let used = 0;
+  for (const line of source.split("\n")) {
+    if (!line.trim()) continue;
+    if (picked.length >= lines + 1 || used >= maxChars) break;
+    picked.push(line.length > maxChars ? line.slice(0, maxChars) : line);
+    used += line.length;
+  }
+  return picked.join("\n\n");
+}
+function RichContentPreview({
+  source,
+  lines = 2,
+  maxChars = 400,
+  className
+}) {
+  if (!source || !source.trim()) return null;
+  const cut = previewSource(inlineKindText(source), lines, maxChars);
+  return /* @__PURE__ */ jsx("span", { className: cn("block min-w-0", CLAMP[lines], className), children: /* @__PURE__ */ jsx(RichContent, { source: cut, level: "inline", links: "text", isStreaming: false }) });
+}
+var RichContentPreview_default = RichContentPreview;
+export {
+  RichContentPreview,
+  RichContentPreview_default as default,
+  previewSource
+};

package/dist/levels/RichContentStandardImpl.d.ts

@@ -0,0 +1,12 @@
+import type { RichContentVariant } from "./rich-content-types.js";
+import { type ImagePolicyDeclaration } from "./prose/remote-image-policy.js";
+export interface RichContentStandardImplProps {
+    source: string;
+    isStreaming?: boolean;
+    className?: string;
+    depthCap?: number;
+    variant?: RichContentVariant;
+    /** Who wrote this text (remote-image-policy.tsx). Omit to inherit; none anywhere = click to load. */
+    imagePolicy?: ImagePolicyDeclaration;
+}
+export default function RichContentStandardImpl({ source, isStreaming, className, depthCap, variant, imagePolicy, }: RichContentStandardImplProps): import("react").JSX.Element;

package/dist/levels/RichContentStandardImpl.js

@@ -0,0 +1,27 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { RichContentDepthProvider } from "./depth.js";
+import { StandardBlocks } from "./standard/StandardBlocks.js";
+import { RichContentVariantRoot } from "./prose/variant-root.js";
+import { withImagePolicy } from "./prose/remote-image-policy.js";
+function RichContentStandardImpl({
+  source,
+  isStreaming,
+  className,
+  depthCap,
+  variant,
+  imagePolicy
+}) {
+  const rendered = /* @__PURE__ */ jsx(RichContentVariantRoot, { variant, children: /* @__PURE__ */ jsx(RichContentDepthProvider, { depth: 0, cap: depthCap, children: /* @__PURE__ */ jsx(
+    StandardBlocks,
+    {
+      source,
+      isStreaming,
+      className
+    }
+  ) }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: withImagePolicy(imagePolicy, rendered) });
+}
+export {
+  RichContentStandardImpl as default
+};

package/dist/levels/RichContentStaticProse.d.ts

@@ -0,0 +1,46 @@
+import type React from "react";
+import { type InlineLinks } from "./prose/inline-level-elements.js";
+import { type RichContentVariant } from "./rich-content-types.js";
+/** The prose leaf alone (frame + one prose map), statically. */
+export declare function StaticProseLeaf({ content, renderNested, }: {
+    content: string;
+    /** Accepted for the StaticProse contract; the client core reads the numbering from DocumentNumberingProvider. */
+    numbering?: unknown;
+    /** Block bodies of directive containers, rendered by the static root. */
+    renderNested?: (source: string) => React.ReactNode;
+}): React.JSX.Element | null;
+/**
+ * Prose ONLY — one prose leaf, no block splitting. For text that is known to
+ * be a single prose block. A document (a note, a shared body, anything that
+ * may hold fences or XML sections) uses RichContentStaticStandard.
+ */
+export declare function RichContentStaticProse({ source, variant, }: {
+    source: string;
+    variant?: RichContentVariant;
+}): React.JSX.Element | null;
+/**
+ * The `standard` level, statically (SSR'd client) — the SAME block routing as
+ * the server level (standard/static-standard.tsx): the one splitter and
+ * nested-fence rule, sections to the depth cap, engine blocks through the
+ * client StandardBlock. Markup identical to RichContentServer
+ * level="standard" (parity guard, incl. a ```markdown fence with an inner
+ * fence). For share pages, public resources and signed documents.
+ */
+export declare function RichContentStaticStandard({ source, variant, depthCap, className, }: {
+    source: string;
+    variant?: RichContentVariant;
+    depthCap?: number;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * The `inline` level, statically (SSR'd) — phrasing only, valid inside a <p>.
+ * Markup identical to RichContentServer level="inline" (parity guard).
+ * Inside a link, pass `links="text"` (no nested anchor).
+ */
+export declare function RichContentStaticInline({ source, className, links, }: {
+    source: string;
+    className?: string;
+    /** `text` when the content sits inside a link. */
+    links?: InlineLinks;
+}): React.JSX.Element | null;
+export default RichContentStaticProse;

package/dist/levels/RichContentStaticProse.js

@@ -0,0 +1,100 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { guardMarkdownDelimiters } from "@ai-matrx/kit/delimiter-guard";
+import MarkdownCoreImpl from "../markdown-core/MarkdownCoreImpl.js";
+import { cn } from "@ai-matrx/design-system";
+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 "./server/DelimiterViolationReport.js";
+import { RichContentVariantRoot } from "./prose/variant-root.js";
+import {
+  DEFAULT_RICH_CONTENT_DEPTH_CAP
+} from "./rich-content-types.js";
+import { StaticStandard } from "./standard/static-standard.js";
+import { ImagePolicyProvider } from "./prose/remote-image-policy.js";
+function StaticProseLeaf({
+  content,
+  renderNested
+}) {
+  if (!content.trim()) return null;
+  const direction = detectTextDirection(content);
+  const { text, violations } = guardMarkdownDelimiters(preprocessProse(content));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: proseFrameClass(direction), dir: direction, children: [
+      /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: PROSE_FRAME_CSS } }),
+      /* @__PURE__ */ jsx(MarkdownCoreImpl, { preset: "chat", components: proseElementsWithNested(renderNested), children: text })
+    ] }),
+    violations.length > 0 ? /* @__PURE__ */ jsx(
+      DelimiterViolationReport,
+      {
+        violations,
+        renderPath: "RichContentStaticProse"
+      }
+    ) : null
+  ] });
+}
+function RichContentStaticProse({
+  source,
+  variant
+}) {
+  if (!source.trim()) return null;
+  return /* @__PURE__ */ jsx(ImagePolicyProvider, { value: "other", children: /* @__PURE__ */ jsx(RichContentVariantRoot, { variant, children: /* @__PURE__ */ jsx(StaticProseLeaf, { content: source }) }) });
+}
+function RichContentStaticStandard({
+  source,
+  variant,
+  depthCap = DEFAULT_RICH_CONTENT_DEPTH_CAP,
+  className
+}) {
+  return /* @__PURE__ */ jsx(ImagePolicyProvider, { value: "other", children: /* @__PURE__ */ jsx(RichContentVariantRoot, { variant, children: /* @__PURE__ */ jsx(
+    StaticStandard,
+    {
+      source,
+      depth: 0,
+      cap: depthCap,
+      className,
+      Prose: StaticProseLeaf
+    }
+  ) }) });
+}
+function RichContentStaticInline({
+  source,
+  className,
+  links
+}) {
+  if (!source.trim()) return null;
+  const { text, violations } = guardMarkdownDelimiters(preprocessProse(source));
+  return /* @__PURE__ */ jsxs(ImagePolicyProvider, { value: "other", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-rich-content": "inline",
+        className: cn(INLINE_LEVEL_WRAPPER_CLASS, className),
+        children: /* @__PURE__ */ jsx(MarkdownCoreImpl, { preset: "chat", components: inlineLevelElements(links), children: text })
+      }
+    ),
+    violations.length > 0 ? /* @__PURE__ */ jsx(
+      DelimiterViolationReport,
+      {
+        violations,
+        renderPath: "RichContentStaticInline"
+      }
+    ) : null
+  ] });
+}
+var RichContentStaticProse_default = RichContentStaticProse;
+export {
+  RichContentStaticInline,
+  RichContentStaticProse,
+  RichContentStaticStandard,
+  StaticProseLeaf,
+  RichContentStaticProse_default as default
+};

package/dist/levels/depth.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+interface RichContentDepth {
+    /** 0 = top-level content; +1 per nested section/fence/field. */
+    depth: number;
+    /** Deepest level that still renders formatted. */
+    cap: number;
+    /** Source of every NestedRichContent above this point (outermost first). */
+    ancestors: readonly string[];
+}
+export declare function useRichContentDepth(): RichContentDepth;
+export declare function RichContentDepthProvider({ depth, cap, source, children, }: {
+    depth: number;
+    cap?: number;
+    /** The source rendered under this provider (a nested section's body). */
+    source?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/levels/depth.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { DEFAULT_RICH_CONTENT_DEPTH_CAP } from "./rich-content-types.js";
+const RichContentDepthContext = createContext({
+  depth: 0,
+  cap: DEFAULT_RICH_CONTENT_DEPTH_CAP,
+  ancestors: []
+});
+function useRichContentDepth() {
+  return useContext(RichContentDepthContext);
+}
+function RichContentDepthProvider({
+  depth,
+  cap,
+  source,
+  children
+}) {
+  const parent = useContext(RichContentDepthContext);
+  const ancestors = source === void 0 ? parent.ancestors : [...parent.ancestors, source];
+  return /* @__PURE__ */ jsx(
+    RichContentDepthContext.Provider,
+    {
+      value: { depth, cap: cap ?? parent.cap, ancestors },
+      children
+    }
+  );
+}
+export {
+  RichContentDepthProvider,
+  useRichContentDepth
+};

package/dist/levels/prose/inline-level-elements.d.ts

@@ -0,0 +1,19 @@
+import type { MarkdownComponents as Components } from "../../markdown-core/markdown-core-types.js";
+/** Paragraph-level spans; a second one in a row starts on its own line. */
+export declare const INLINE_P_CLASS = "rc-inline-p";
+export declare const INLINE_LEVEL_ELEMENTS: Components;
+/** The wrapper classes of the inline level (a second paragraph-level span starts its own line; a lone one flows). */
+export declare const INLINE_LEVEL_WRAPPER_CLASS: string;
+/**
+ * How the inline level renders markdown links.
+ *  - `link`  a real link (default).
+ *  - `text`  the link's text with its formatting, no anchor — for inline
+ *            content that already sits INSIDE a link (a card preview whose
+ *            whole card is a `<Link>`); a nested `<a>` is invalid HTML and
+ *            breaks hydration.
+ */
+export type InlineLinks = "link" | "text";
+/** The inline map with links rendered as their text (no anchor). */
+export declare const INLINE_LEVEL_ELEMENTS_LINKS_AS_TEXT: Components;
+/** The inline element map for a `links` choice. */
+export declare function inlineLevelElements(links?: InlineLinks): Components;

package/dist/levels/prose/inline-level-elements.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+import { isHeadingAnchorProps } from "../../markdown-core/heading-anchors-props.js";
+import { THICK_HR_SENTINEL } from "./prose-prepare.js";
+import { PROSE_INLINE_ELEMENTS } from "./prose-inline-elements.js";
+import { INLINE_SYNTAX_ELEMENTS } from "../../markdown-core/syntax/elements/core-syntax-elements.js";
+const INLINE_P_CLASS = "rc-inline-p";
+const InlineLink = PROSE_INLINE_ELEMENTS.a;
+const INLINE_LEVEL_ELEMENTS = {
+  ...PROSE_INLINE_ELEMENTS,
+  // The extended syntax's block constructs (callouts, tabs, figures…) as spans.
+  ...INLINE_SYNTAX_ELEMENTS,
+  // The inline level renders no sections, so a heading's hover anchor would
+  // link to nothing and read as part of the title: never rendered here.
+  a: (props) => isHeadingAnchorProps(props) ? null : /* @__PURE__ */ jsx(InlineLink, { ...props }),
+  p: ({ children }) => {
+    const only = Array.isArray(children) ? null : children;
+    if (only === "\xA0") return /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "block h-[0.4em]" });
+    if (only === THICK_HR_SENTINEL)
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-rc-block": true,
+          role: "separator",
+          className: "my-1.5 block h-[3px] rounded-full bg-blue-500 dark:bg-blue-400"
+        }
+      );
+    return /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: INLINE_P_CLASS, children });
+  },
+  h1: ({ children }) => /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "font-semibold", children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "font-semibold", children }),
+  h3: ({ children }) => /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "font-semibold", children }),
+  h4: ({ children }) => /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "font-semibold", children }),
+  h5: ({ children }) => /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "font-semibold", children }),
+  h6: ({ children }) => /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "font-semibold", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "block list-inside list-disc", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx("span", { "data-rc-block": true, className: "block list-inside list-decimal", children }),
+  li: ({ children }) => /* @__PURE__ */ jsx("span", { className: "list-item", children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-rc-block": true,
+      className: "block border-l-2 border-border pl-2 italic text-muted-foreground",
+      children
+    }
+  ),
+  pre: ({ children }) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-rc-block": true,
+      className: "block overflow-x-auto whitespace-pre-wrap rounded bg-muted/60 px-1.5 py-1 font-mono text-[0.9em]",
+      children
+    }
+  ),
+  hr: () => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-rc-block": true,
+      role: "separator",
+      className: "my-1 block border-t border-border"
+    }
+  ),
+  div: ({ children, className }) => /* @__PURE__ */ jsx("span", { className: cn("block", className), children }),
+  table: ({ children }) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-rc-block": true,
+      role: "table",
+      className: "my-1 table border-collapse text-[0.9em]",
+      children
+    }
+  ),
+  thead: ({ children }) => /* @__PURE__ */ jsx("span", { role: "rowgroup", className: "table-header-group font-semibold", children }),
+  tbody: ({ children }) => /* @__PURE__ */ jsx("span", { role: "rowgroup", className: "table-row-group", children }),
+  tr: ({ children }) => /* @__PURE__ */ jsx("span", { role: "row", className: "table-row", children }),
+  th: ({ children }) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "columnheader",
+      className: "table-cell border border-border px-1.5 py-0.5 text-left",
+      children
+    }
+  ),
+  td: ({ children }) => /* @__PURE__ */ jsx("span", { role: "cell", className: "table-cell border border-border px-1.5 py-0.5", children })
+};
+const INLINE_LEVEL_WRAPPER_CLASS = cn(
+  "rich-content-inline min-w-0 break-words",
+  "[&>[data-rc-block]+[data-rc-block]]:mt-1 [&>[data-rc-block]+[data-rc-block]]:block"
+);
+const INLINE_LEVEL_ELEMENTS_LINKS_AS_TEXT = {
+  ...INLINE_LEVEL_ELEMENTS,
+  a: (props) => isHeadingAnchorProps(props) ? null : /* @__PURE__ */ jsx("span", { "data-rc-link-text": "", children: props.children })
+};
+function inlineLevelElements(links = "link") {
+  return links === "text" ? INLINE_LEVEL_ELEMENTS_LINKS_AS_TEXT : INLINE_LEVEL_ELEMENTS;
+}
+export {
+  INLINE_LEVEL_ELEMENTS,
+  INLINE_LEVEL_ELEMENTS_LINKS_AS_TEXT,
+  INLINE_LEVEL_WRAPPER_CLASS,
+  INLINE_P_CLASS,
+  inlineLevelElements
+};

package/dist/levels/prose/prose-block-elements.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import type { Element } from "hast";
+import type { MarkdownComponents as Components } from "../../markdown-core/markdown-core-types.js";
+/** The extra prop the core passes every element renderer (react-markdown's `ExtraProps`). */
+type ExtraProps = {
+    node?: Element;
+};
+/**
+ * A markdown table in the prose leaf's scroll frame. `after` renders beside
+ * it (BasicMarkdownContent's admin-only render-path diagnostic).
+ */
+export declare function renderProseTable({ node, children, ...props }: React.TableHTMLAttributes<HTMLTableElement> & ExtraProps, after?: React.ReactNode): React.JSX.Element;
+/** Every element the prose leaf renders. Module scope: stable identity. */
+export declare const PROSE_BLOCK_ELEMENTS: Components;
+/** The prose frame's scoped CSS (display-math centering, indented-code blocks). */
+export declare const PROSE_FRAME_CSS = "\n                    /* Center display math that appears after a line break */\n                    .math-content-wrapper p > .block + .katex {\n                        display: block;\n                        text-align: center;\n                        margin: 1em 0;\n                        font-size: 1.5em;\n                    }\n                    /* Increase font size for standalone math paragraphs */\n                    .math-content-wrapper p.text-center .katex {\n                        font-size: 1.5em;\n                    }\n                    /* Override pre tags that contain inline code (indented text blocks) */\n                    .math-content-wrapper pre:has(> code.bg-blue-100),\n                    .math-content-wrapper pre:has(> code.dark\\:bg-blue-900\\/30) {\n                        white-space: pre-wrap;\n                        word-wrap: break-word;\n                        overflow-wrap: anywhere;\n                        font-family: inherit;\n                        background: transparent;\n                        padding: 0;\n                        margin: 0;\n                    }\n                    /* Make the code inside these pre tags behave like inline code */\n                    .math-content-wrapper pre:has(> code.bg-blue-100) > code,\n                    .math-content-wrapper pre:has(> code.dark\\:bg-blue-900\\/30) > code {\n                        white-space: normal;\n                        display: inline;\n                        overflow-wrap: anywhere;\n                        word-break: normal;\n                    }\n                ";
+/** The prose frame's classes for a detected text direction. */
+export declare function proseFrameClass(direction: "rtl" | "ltr"): string;
+/**
+ * The prose map for a STATIC root: `matrx-nested` (a directive container's
+ * block body) renders through the root's own routing instead of the
+ * client-only NestedBody, so its text is in the server HTML.
+ */
+export declare function proseElementsWithNested(renderNested: ((source: string) => React.ReactNode) | undefined): Components;
+export {};