@particle-academy/react-fancy 5.67.0 → 5.68.0

package/CHANGELOG.md

@@ -11,6 +11,45 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.68.0] - 2026-10-27
+
+### Added
+
+- **`Editor` forwards `copyButtons`, `clipboardWriter` and `onCopy` to the
+  `ContentRenderer` its view mode renders through.** 5.67.0 turned copy buttons
+  on in view mode but gave a host no way to route those copies (a sandboxed
+  Electron window), observe them, or turn them off from `Editor`. Same types and
+  same defaults as on `ContentRenderer`; with the props absent nothing changes.
+  They have no effect in edit mode. Editor's docs now also document `mode`.
+- **`ContentRenderer streaming="progressive"`: an open block shows as it
+  fills.** `streaming={true}` still hides an open block until it closes. In the
+  new mode:
+  - an open tag of a registered extension whose opening tag is complete renders
+    its component with the body so far (a `markdown` extension gets it as
+    `content` and rendered, sanitised, as `children`);
+  - an open code fence renders as a code block of what has arrived, with **no
+    copy button until it closes** (hidden rather than disabled: half a block is
+    never what a copy means). Finished blocks before it keep theirs;
+  - a partial opening tag (`<result title="Do`), a partial closing tag, a fence
+    marker still arriving and a fence opener line with no newline yet are still
+    held back, so none of it flashes raw. Inside an open fence `<` is code;
+  - it closes the open fence and open tags itself and renders normally, so the
+    body is the one the final render shows once the real closes arrive.
+  - The root carries `data-streaming-mode="progressive"` as well as
+    `data-streaming="true"`.
+
+  It is a value of `streaming` rather than a new prop because it is a way of
+  streaming: a separate flag would add a combination that means nothing.
+  `streaming` is now typed `boolean | "progressive"`. Code that passes a
+  boolean is unaffected; code that READS the prop's type and assumes `boolean`
+  needs to allow the string.
+
+### Changed
+
+- **Docs: `markdown` tags are lifted only at line start and only when closed,
+  and that is now stated as deliberate.** The behaviour is unchanged.
+  Progressive streaming does not relax either rule.
+
 ## [5.67.0] - 2026-10-27
 
 ### Added

package/dist/ContentRenderer.types-RO_l7_6N.d.cts

@@ -0,0 +1,137 @@
+import { ComponentType, ReactNode } from 'react';
+
+/** Props passed to every render-extension component. */
+interface RenderExtensionProps {
+    /**
+     * The inner content of the custom tag (raw string). For an extension with
+     * `markdown: true` in markdown content this is the raw MARKDOWN body, before
+     * conversion. Either way it is untrusted: render `children` rather than
+     * injecting it.
+     */
+    content: string;
+    /**
+     * Parsed attributes from the opening tag. Event handlers (`on*`), `srcdoc`,
+     * and URL attributes with an unsafe scheme are removed (unless the renderer
+     * is `unsafe`).
+     */
+    attributes: Record<string, string>;
+    /**
+     * Only for extensions with `markdown: true`: the body, rendered by the same
+     * pipeline as the rest of the content (sanitised, nested extensions, copy
+     * buttons).
+     */
+    children?: ReactNode;
+}
+/** Registers a custom tag with a React component for rendering. */
+interface RenderExtension {
+    /** Tag name to match, e.g. "questions", "thinking". Case-insensitive. */
+    tag: string;
+    /** React component that renders the matched tag. */
+    component: ComponentType<RenderExtensionProps>;
+    /**
+     * Whether this is a block-level element.
+     * Block extensions are wrapped in a `<div>`, inline in a `<span>`.
+     * @default true
+     */
+    block?: boolean;
+    /**
+     * The tag's body is MARKDOWN. In markdown content, a tag that starts a line
+     * is lifted out of the source before conversion, so the component gets the
+     * raw markdown as `content` and the rendered, sanitised body as `children`.
+     * In HTML content the body is HTML and `children` renders it.
+     * @default false
+     */
+    markdown?: boolean;
+}
+/** A parsed segment — either raw HTML or a matched extension tag. */
+type ContentSegment = {
+    type: "html";
+    content: string;
+} | {
+    type: "extension";
+    tag: string;
+    content: string;
+    attributes: Record<string, string>;
+};
+/** Register a single render extension globally (available to all ContentRenderer and Editor instances). */
+declare function registerExtension(extension: RenderExtension): void;
+/** Register multiple render extensions globally. */
+declare function registerExtensions(extensions: RenderExtension[]): void;
+
+/** What a copy button copies. */
+type ContentCopyKind = "code" | "table";
+/** What is handed to a clipboard writer. */
+interface ContentClipboardPayload {
+    kind: ContentCopyKind;
+    /**
+     * Plain text. For code: exactly the code between the fences, with no
+     * language label and no added trailing newline. For a table: TSV (tab
+     * between cells, newline between rows, no trailing newline).
+     */
+    text: string;
+    /** The block's sanitised HTML (`<pre>…</pre>` or `<table>…</table>`), for rich paste. */
+    html: string;
+}
+/**
+ * Writes one copy to the clipboard. Throwing, rejecting, or returning `false`
+ * means the copy failed; the failure is announced, never swallowed.
+ */
+type ContentClipboardWriter = (payload: ContentClipboardPayload) => void | boolean | Promise<void | boolean>;
+/** Reported through `onCopy` after every copy attempt. */
+interface ContentCopyEvent extends ContentClipboardPayload {
+    /** Position of the button among this renderer's copy buttons, in document order. */
+    index: number;
+    /** Whether the clipboard write succeeded. */
+    ok: boolean;
+}
+interface ContentRendererProps {
+    value: string;
+    format?: "html" | "markdown" | "auto";
+    lineSpacing?: number;
+    className?: string;
+    /** Per-instance render extensions. Merged with any globally-registered extensions. */
+    extensions?: RenderExtension[];
+    /**
+     * Skip HTML sanitization. By default, rendered output is sanitized to remove
+     * `<script>`, `<iframe>`, event handlers, and `javascript:` URIs. Pass
+     * `unsafe` only when the input is fully trusted (e.g. server-rendered
+     * markdown from your own CMS).
+     * @default false
+     */
+    unsafe?: boolean;
+    /**
+     * Copy buttons on code blocks and tables. `false` turns them all off; an
+     * object turns kinds off individually (`{ table: false }`).
+     * @default true
+     */
+    copyButtons?: boolean | {
+        code?: boolean;
+        table?: boolean;
+    };
+    /** Called after every copy attempt, successful or not. */
+    onCopy?: (event: ContentCopyEvent) => void;
+    /**
+     * Host-supplied clipboard writer, for environments where
+     * `navigator.clipboard` is unreliable (e.g. a sandboxed Electron window:
+     * pass one that calls Electron's `clipboard`). The default writes
+     * text/html + text/plain via `ClipboardItem`, falling back to `writeText`.
+     */
+    clipboardWriter?: ContentClipboardWriter;
+    /**
+     * The value is still arriving. Set it back to `false` when the stream ends
+     * and everything renders.
+     *
+     * - `true` holds back an unfinished trailing custom tag (of a registered
+     *   extension) or code fence until it closes, so a partial `<result` or half
+     *   a code block never flashes as raw text.
+     * - `"progressive"` shows an open block as it fills: an open registered tag
+     *   whose opening tag is complete renders its component with the body so
+     *   far, and an open code fence renders as a code block of what has arrived
+     *   (with no copy button until it closes). A partial opening tag
+     *   (`<result title="Do`) is still held back.
+     * @default false
+     */
+    streaming?: boolean | "progressive";
+}
+
+export { type ContentClipboardPayload as C, type RenderExtension as R, type ContentClipboardWriter as a, type ContentCopyEvent as b, type ContentCopyKind as c, type ContentRendererProps as d, type RenderExtensionProps as e, registerExtensions as f, type ContentSegment as g, registerExtension as r };

package/dist/ContentRenderer.types-RO_l7_6N.d.ts

@@ -0,0 +1,137 @@
+import { ComponentType, ReactNode } from 'react';
+
+/** Props passed to every render-extension component. */
+interface RenderExtensionProps {
+    /**
+     * The inner content of the custom tag (raw string). For an extension with
+     * `markdown: true` in markdown content this is the raw MARKDOWN body, before
+     * conversion. Either way it is untrusted: render `children` rather than
+     * injecting it.
+     */
+    content: string;
+    /**
+     * Parsed attributes from the opening tag. Event handlers (`on*`), `srcdoc`,
+     * and URL attributes with an unsafe scheme are removed (unless the renderer
+     * is `unsafe`).
+     */
+    attributes: Record<string, string>;
+    /**
+     * Only for extensions with `markdown: true`: the body, rendered by the same
+     * pipeline as the rest of the content (sanitised, nested extensions, copy
+     * buttons).
+     */
+    children?: ReactNode;
+}
+/** Registers a custom tag with a React component for rendering. */
+interface RenderExtension {
+    /** Tag name to match, e.g. "questions", "thinking". Case-insensitive. */
+    tag: string;
+    /** React component that renders the matched tag. */
+    component: ComponentType<RenderExtensionProps>;
+    /**
+     * Whether this is a block-level element.
+     * Block extensions are wrapped in a `<div>`, inline in a `<span>`.
+     * @default true
+     */
+    block?: boolean;
+    /**
+     * The tag's body is MARKDOWN. In markdown content, a tag that starts a line
+     * is lifted out of the source before conversion, so the component gets the
+     * raw markdown as `content` and the rendered, sanitised body as `children`.
+     * In HTML content the body is HTML and `children` renders it.
+     * @default false
+     */
+    markdown?: boolean;
+}
+/** A parsed segment — either raw HTML or a matched extension tag. */
+type ContentSegment = {
+    type: "html";
+    content: string;
+} | {
+    type: "extension";
+    tag: string;
+    content: string;
+    attributes: Record<string, string>;
+};
+/** Register a single render extension globally (available to all ContentRenderer and Editor instances). */
+declare function registerExtension(extension: RenderExtension): void;
+/** Register multiple render extensions globally. */
+declare function registerExtensions(extensions: RenderExtension[]): void;
+
+/** What a copy button copies. */
+type ContentCopyKind = "code" | "table";
+/** What is handed to a clipboard writer. */
+interface ContentClipboardPayload {
+    kind: ContentCopyKind;
+    /**
+     * Plain text. For code: exactly the code between the fences, with no
+     * language label and no added trailing newline. For a table: TSV (tab
+     * between cells, newline between rows, no trailing newline).
+     */
+    text: string;
+    /** The block's sanitised HTML (`<pre>…</pre>` or `<table>…</table>`), for rich paste. */
+    html: string;
+}
+/**
+ * Writes one copy to the clipboard. Throwing, rejecting, or returning `false`
+ * means the copy failed; the failure is announced, never swallowed.
+ */
+type ContentClipboardWriter = (payload: ContentClipboardPayload) => void | boolean | Promise<void | boolean>;
+/** Reported through `onCopy` after every copy attempt. */
+interface ContentCopyEvent extends ContentClipboardPayload {
+    /** Position of the button among this renderer's copy buttons, in document order. */
+    index: number;
+    /** Whether the clipboard write succeeded. */
+    ok: boolean;
+}
+interface ContentRendererProps {
+    value: string;
+    format?: "html" | "markdown" | "auto";
+    lineSpacing?: number;
+    className?: string;
+    /** Per-instance render extensions. Merged with any globally-registered extensions. */
+    extensions?: RenderExtension[];
+    /**
+     * Skip HTML sanitization. By default, rendered output is sanitized to remove
+     * `<script>`, `<iframe>`, event handlers, and `javascript:` URIs. Pass
+     * `unsafe` only when the input is fully trusted (e.g. server-rendered
+     * markdown from your own CMS).
+     * @default false
+     */
+    unsafe?: boolean;
+    /**
+     * Copy buttons on code blocks and tables. `false` turns them all off; an
+     * object turns kinds off individually (`{ table: false }`).
+     * @default true
+     */
+    copyButtons?: boolean | {
+        code?: boolean;
+        table?: boolean;
+    };
+    /** Called after every copy attempt, successful or not. */
+    onCopy?: (event: ContentCopyEvent) => void;
+    /**
+     * Host-supplied clipboard writer, for environments where
+     * `navigator.clipboard` is unreliable (e.g. a sandboxed Electron window:
+     * pass one that calls Electron's `clipboard`). The default writes
+     * text/html + text/plain via `ClipboardItem`, falling back to `writeText`.
+     */
+    clipboardWriter?: ContentClipboardWriter;
+    /**
+     * The value is still arriving. Set it back to `false` when the stream ends
+     * and everything renders.
+     *
+     * - `true` holds back an unfinished trailing custom tag (of a registered
+     *   extension) or code fence until it closes, so a partial `<result` or half
+     *   a code block never flashes as raw text.
+     * - `"progressive"` shows an open block as it fills: an open registered tag
+     *   whose opening tag is complete renders its component with the body so
+     *   far, and an open code fence renders as a code block of what has arrived
+     *   (with no copy button until it closes). A partial opening tag
+     *   (`<result title="Do`) is still held back.
+     * @default false
+     */
+    streaming?: boolean | "progressive";
+}
+
+export { type ContentClipboardPayload as C, type RenderExtension as R, type ContentClipboardWriter as a, type ContentCopyEvent as b, type ContentCopyKind as c, type ContentRendererProps as d, type RenderExtensionProps as e, registerExtensions as f, type ContentSegment as g, registerExtension as r };

package/dist/{chunk-FXOT4P4P.js → chunk-2LQR4EAN.js}

@@ -876,7 +876,7 @@ function maskInlineCode(line) {
 function scan(src, names, trackFences) {
   const tokens = [];
   let openFenceStart = -1;
-  if (names.length === 0 && !trackFences) return { tokens, openFenceStart };
+  if (names.length === 0 && !trackFences) return { tokens, openFenceStart, openFence: null };
   const tagRe = names.length ? new RegExp(`<(\\/?)(${names.map(escapeRegExp).join("|")})(?=[\\s>/])([^>]*)>`, "gi") : null;
   let fence = null;
   let pos = 0;
@@ -927,7 +927,39 @@ function scan(src, names, trackFences) {
     if (nl < 0) break;
     pos = lineEnd + 1;
   }
-  return { tokens, openFenceStart };
+  return { tokens, openFenceStart, openFence: fence };
+}
+function partialTagAt(lastLine, names, markdown) {
+  if (!names.length) return -1;
+  const masked = markdown ? maskInlineCode(lastLine) : lastLine;
+  const lt = masked.lastIndexOf("<");
+  if (lt < 0) return -1;
+  const m = /^<(\/?)([A-Za-z][\w-]*)?([^>]*)$/.exec(masked.slice(lt));
+  if (!m) return -1;
+  const name = (m[2] ?? "").toLowerCase();
+  const rest = m[3];
+  let partial = false;
+  if (!name) partial = rest === "";
+  else if (names.includes(name)) partial = rest === "" || /^\s/.test(rest);
+  else partial = rest === "" && names.some((n) => n.startsWith(name));
+  return partial ? lt : -1;
+}
+function openTagsBefore(tokens, cut) {
+  const stack = [];
+  for (const t of tokens) {
+    if (t.start >= cut) break;
+    if (t.kind === "open") {
+      stack.push(t);
+      continue;
+    }
+    for (let k = stack.length - 1; k >= 0; k--) {
+      if (stack[k].name === t.name) {
+        stack.length = k;
+        break;
+      }
+    }
+  }
+  return stack;
 }
 function splitMarkdownBlocks(src, tags) {
   const names = tags.map((t) => t.toLowerCase());
@@ -971,43 +1003,45 @@ function streamingCut(src, tags, markdown) {
   const { tokens, openFenceStart } = scan(src, names, markdown);
   let cut = src.length;
   if (openFenceStart >= 0) cut = Math.min(cut, openFenceStart);
-  const stack = [];
-  for (const t of tokens) {
-    if (t.start >= cut) break;
-    if (t.kind === "open") {
-      stack.push(t);
-      continue;
-    }
-    for (let k = stack.length - 1; k >= 0; k--) {
-      if (stack[k].name === t.name) {
-        stack.length = k;
-        break;
-      }
-    }
-  }
+  const stack = openTagsBefore(tokens, cut);
   if (stack.length) cut = Math.min(cut, stack[0].start);
   const lastLineStart = src.lastIndexOf("\n", cut - 1) + 1;
   const lastLine = src.slice(lastLineStart, cut);
   if (markdown && /^ {0,3}(`{1,2}|~{1,2})$/.test(lastLine)) {
     return Math.min(cut, lastLineStart);
   }
-  if (names.length) {
-    const masked = markdown ? maskInlineCode(lastLine) : lastLine;
-    const lt = masked.lastIndexOf("<");
-    if (lt >= 0) {
-      const m = /^<(\/?)([A-Za-z][\w-]*)?([^>]*)$/.exec(masked.slice(lt));
-      if (m) {
-        const name = (m[2] ?? "").toLowerCase();
-        const rest = m[3];
-        let partial = false;
-        if (!name) partial = rest === "";
-        else if (names.includes(name)) partial = rest === "" || /^\s/.test(rest);
-        else partial = rest === "" && names.some((n) => n.startsWith(name));
-        if (partial) cut = Math.min(cut, lastLineStart + lt);
-      }
+  const lt = partialTagAt(lastLine, names, markdown);
+  if (lt >= 0) cut = Math.min(cut, lastLineStart + lt);
+  return cut;
+}
+function streamingProgressive(src, tags, markdown) {
+  const names = tags.map((t) => t.toLowerCase());
+  const { tokens, openFenceStart, openFence } = scan(src, names, markdown);
+  let cut = src.length;
+  let fence = openFenceStart >= 0 ? openFence : null;
+  const lastLineStart = src.lastIndexOf("\n", cut - 1) + 1;
+  const lastLine = src.slice(lastLineStart);
+  if (fence) {
+    if (openFenceStart === lastLineStart) {
+      cut = openFenceStart;
+      fence = null;
+    } else {
+      const m = /^ {0,3}(`+|~+)$/.exec(lastLine);
+      if (m && m[1][0] === fence.char && m[1].length < fence.len) cut = lastLineStart;
     }
+  } else if (markdown && /^ {0,3}(`{1,2}|~{1,2})$/.test(lastLine)) {
+    cut = lastLineStart;
+  } else {
+    const lt = partialTagAt(lastLine, names, markdown);
+    if (lt >= 0) cut = lastLineStart + lt;
   }
-  return cut;
+  let out = src.slice(0, cut);
+  if (fence) {
+    out += (out.endsWith("\n") ? "" : "\n") + fence.char.repeat(fence.len) + "\n";
+  }
+  const stack = openTagsBefore(tokens, fence ? openFenceStart : cut);
+  for (let k = stack.length - 1; k >= 0; k--) out += `</${stack[k].name}>`;
+  return { source: out, openFence: fence !== null };
 }
 var FEEDBACK_MS = 2e3;
 var WRITE_TIMEOUT_MS = 5e3;
@@ -1065,12 +1099,17 @@ function cellText(cell) {
   for (const br of Array.from(clone.querySelectorAll("br"))) br.replaceWith(" ");
   return (clone.textContent ?? "").replace(/[\t\r\n]+/g, " ").replace(/ {2,}/g, " ").trim();
 }
-function HtmlChunk({ html, fromMarkdown }) {
+function HtmlChunk({
+  html,
+  fromMarkdown,
+  tail = false
+}) {
   const ref = useRef(null);
   const ctx = useContext(CopyContext);
   const [targets, setTargets] = useState([]);
   const code = ctx?.code ?? false;
   const table = ctx?.table ?? false;
+  const holdLastCode = tail && (ctx?.holdTailCode ?? false);
   const inner = useMemo(() => ({ __html: html }), [html]);
   useLayoutEffect(() => {
     const root = ref.current;
@@ -1080,7 +1119,9 @@ function HtmlChunk({ html, fromMarkdown }) {
     }
     const found = [];
     const selector = [code && "pre", table && "table"].filter(Boolean).join(",");
+    const inProgress = holdLastCode ? Array.from(root.querySelectorAll("pre")).pop() : void 0;
     for (const el of Array.from(root.querySelectorAll(selector))) {
+      if (el === inProgress) continue;
       const kind = el.tagName === "PRE" ? "code" : "table";
       const wrapper = document.createElement("div");
       wrapper.setAttribute("data-react-fancy-content-copy-block", kind);
@@ -1100,7 +1141,7 @@ function HtmlChunk({ html, fromMarkdown }) {
         if (wrapper?.parentNode) wrapper.replaceWith(t.el);
       }
     };
-  }, [html, code, table]);
+  }, [html, code, table, holdLastCode]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { ref, dangerouslySetInnerHTML: inner }),
     targets.map(
@@ -1170,7 +1211,11 @@ function useCopyPipeline({
   );
 }
 var MAX_DEPTH = 8;
-function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
+function lastIndexWith(items, renders) {
+  for (let i = items.length - 1; i >= 0; i--) if (renders(items[i])) return i;
+  return -1;
+}
+function ContentBody({ source, format, extensions, unsafe, depth = 0, tail = false }) {
   const active = depth >= MAX_DEPTH ? [] : extensions;
   const blocks = useMemo(() => {
     if (format !== "markdown") return null;
@@ -1179,8 +1224,19 @@ function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
   }, [source, format, active]);
   if (!blocks) {
     const html = unsafe ? source : sanitizeHtml(source);
-    return /* @__PURE__ */ jsx(RenderedContent, { html, extensions: active, unsafe, fromMarkdown: false, depth });
+    return /* @__PURE__ */ jsx(
+      RenderedContent,
+      {
+        html,
+        extensions: active,
+        unsafe,
+        fromMarkdown: false,
+        depth,
+        tail
+      }
+    );
   }
+  const last = tail ? lastIndexWith(blocks, (b) => b.type === "tag" || b.source.trim() !== "") : -1;
   return /* @__PURE__ */ jsx(Fragment, { children: blocks.map((block, i) => {
     if (block.type === "markdown") {
       const raw = markdownToRawHtml(block.source);
@@ -1192,7 +1248,8 @@ function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
           extensions: active,
           unsafe,
           fromMarkdown: true,
-          depth
+          depth,
+          tail: i === last
         },
         i
       );
@@ -1208,21 +1265,38 @@ function ContentBody({ source, format, extensions, unsafe, depth = 0 }) {
         format: "markdown",
         extensions: active,
         unsafe,
-        depth: depth + 1
+        depth: depth + 1,
+        tail: i === last
       }
     ) }) }, i);
   }) });
 }
-function RenderedContent({ html, extensions, unsafe, fromMarkdown, depth }) {
+function RenderedContent({
+  html,
+  extensions,
+  unsafe,
+  fromMarkdown,
+  depth,
+  tail = false
+}) {
   const segments = useMemo(() => parseSegments(html, extensions), [html, extensions]);
   const renderHtml = (content) => unsafe ? content : sanitizeHtml(content);
   if (segments.length === 0) return null;
   if (segments.length === 1 && segments[0].type === "html") {
-    return /* @__PURE__ */ jsx(HtmlChunk, { html: renderHtml(segments[0].content), fromMarkdown });
+    return /* @__PURE__ */ jsx(HtmlChunk, { html: renderHtml(segments[0].content), fromMarkdown, tail });
   }
+  const last = tail ? lastIndexWith(segments, (s) => s.type === "extension" || s.content.trim() !== "") : -1;
   return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => {
     if (segment.type === "html") {
-      return segment.content ? /* @__PURE__ */ jsx(HtmlChunk, { html: renderHtml(segment.content), fromMarkdown }, i) : null;
+      return segment.content ? /* @__PURE__ */ jsx(
+        HtmlChunk,
+        {
+          html: renderHtml(segment.content),
+          fromMarkdown,
+          tail: i === last
+        },
+        i
+      ) : null;
     }
     const ext = extensions.find((e) => e.tag.toLowerCase() === segment.tag);
     if (!ext) return null;
@@ -1235,7 +1309,8 @@ function RenderedContent({ html, extensions, unsafe, fromMarkdown, depth }) {
         format: "html",
         extensions,
         unsafe,
-        depth: depth + 1
+        depth: depth + 1,
+        tail: i === last
       }
     ) : void 0;
     return /* @__PURE__ */ jsx(Wrapper, { "data-render-extension": segment.tag, children: /* @__PURE__ */ jsx(Component, { content: segment.content, attributes: segment.attributes, children }) }, i);
@@ -1261,15 +1336,14 @@ function ContentRenderer({
   );
   const safe = value ?? "";
   const resolvedFormat = format === "auto" ? detectFormat(safe) : format;
-  const source = useMemo(() => {
-    if (!streaming) return safe;
-    const cut = streamingCut(
-      safe,
-      extensions.map((e) => e.tag),
-      resolvedFormat === "markdown"
-    );
-    return safe.slice(0, cut);
-  }, [safe, streaming, extensions, resolvedFormat]);
+  const progressive = streaming === "progressive";
+  const { source, openFence } = useMemo(() => {
+    if (!streaming) return { source: safe, openFence: false };
+    const tags = extensions.map((e) => e.tag);
+    const markdown = resolvedFormat === "markdown";
+    if (progressive) return streamingProgressive(safe, tags, markdown);
+    return { source: safe.slice(0, streamingCut(safe, tags, markdown)), openFence: false };
+  }, [safe, streaming, progressive, extensions, resolvedFormat]);
   const codeOn = copyButtons === true || typeof copyButtons === "object" && copyButtons.code !== false;
   const tableOn = copyButtons === true || typeof copyButtons === "object" && copyButtons.table !== false;
   const copyOn = codeOn || tableOn;
@@ -1281,8 +1355,8 @@ function ContentRenderer({
   }, []);
   const copy = useCopyPipeline({ writer: clipboardWriter, onCopy, rootRef, announce });
   const copyContext = useMemo(
-    () => ({ code: codeOn, table: tableOn, copy }),
-    [codeOn, tableOn, copy]
+    () => ({ code: codeOn, table: tableOn, copy, holdTailCode: openFence }),
+    [codeOn, tableOn, copy, openFence]
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1290,6 +1364,7 @@ function ContentRenderer({
       ref: rootRef,
       "data-react-fancy-content-renderer": "",
       "data-streaming": streaming ? "true" : void 0,
+      "data-streaming-mode": progressive ? "progressive" : void 0,
       style: { lineHeight: lineSpacing },
       className: cn("text-sm", proseClasses, className),
       children: [
@@ -1299,7 +1374,8 @@ function ContentRenderer({
             source,
             format: resolvedFormat,
             extensions,
-            unsafe
+            unsafe,
+            tail: true
           }
         ) }),
         copyOn && /* @__PURE__ */ jsx(
@@ -1320,5 +1396,5 @@ function ContentRenderer({
 ContentRenderer.displayName = "ContentRenderer";
 
 export { ContentRenderer, detectFormat, extensionEditorClasses, htmlToMarkdown, markdownToEditorHtml, mergeExtensions, proseClasses, registerExtension, registerExtensions, renderMarkdown };
-//# sourceMappingURL=chunk-FXOT4P4P.js.map
-//# sourceMappingURL=chunk-FXOT4P4P.js.map
+//# sourceMappingURL=chunk-2LQR4EAN.js.map
+//# sourceMappingURL=chunk-2LQR4EAN.js.map