@bendyline/squisq-react 2.5.0 → 2.7.0

package/README.md

@@ -57,6 +57,25 @@ state rather than crashing.
 | `MediaClipLayer`       | Hidden `<audio>`/`<video>` elements for timed media clips           |
 | `JsonView`             | Read-only viewer for JSON values bound to a Squisq-annotated schema |
 
+### Fenced-code copy control
+
+`MarkdownRenderer` and the linear document surfaces keep code-copy UI off by
+default. Opt in with `showCodeCopyButton`. Web hosts can rely on
+`navigator.clipboard`; Electron or native embeddings can provide their own
+clipboard bridge:
+
+````tsx
+<LinearDocView
+  markdown={'```\n$ node packages/tooling/dist/cli.mjs components\n```'}
+  showCodeCopyButton
+  onCopyCode={(code, { language }) => hostClipboard.writeText(code)}
+/>
+````
+
+The same two props are available on `DocPlayer` (for linear mode), and on the
+standalone static `mount()` options. The callback receives the exact fence
+contents, without the backtick delimiters.
+
 ## Layers
 
 Blocks are composed of typed layers rendered as SVG:

package/dist/MarkdownRenderer-CC9dOc6b.d.ts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Theme } from '@bendyline/squisq/schemas';
+import { FenceRendererMap } from '@bendyline/squisq/fence';
+import { MarkdownBlockNode, HtmlPolicy } from '@bendyline/squisq/markdown';
+
+interface CodeBlockCopyContext {
+    /** Authored fence language, when one was supplied. */
+    language?: string;
+}
+/**
+ * Host-owned clipboard adapter for fenced code blocks.
+ *
+ * The callback runs directly from the button's click handler so Electron
+ * bridges and browser Clipboard APIs retain their user-gesture context.
+ */
+type CodeBlockCopyHandler = (code: string, context: CodeBlockCopyContext) => void | Promise<void>;
+interface MarkdownRendererProps {
+    /** Block-level AST nodes to render */
+    nodes: MarkdownBlockNode[];
+    /** Optional CSS class for the wrapper element */
+    className?: string;
+    /**
+     * Raw HTML policy. Defaults to `sanitize`, which removes unsafe tags,
+     * event handlers, and executable URL schemes before rendering.
+     */
+    htmlPolicy?: HtmlPolicy;
+    /**
+     * Extra URL schemes to allow on links (e.g. a host app's internal
+     * navigation scheme it intercepts on click). Executable schemes are
+     * never allowed regardless. See {@link SanitizeUrlOptions}.
+     */
+    linkSchemes?: readonly string[];
+    /** Resolved Squisq theme inherited by embedded Mermaid diagrams. */
+    theme?: Theme;
+    /** Show a subtle Copy button on ordinary fenced code blocks (default: false). */
+    showCodeCopyButton?: boolean;
+    /**
+     * Optional host clipboard adapter. When omitted, enabled copy buttons use
+     * `navigator.clipboard.writeText`. Supply this for Electron, native shells,
+     * or hosts with their own clipboard permission/error handling.
+     */
+    onCopyCode?: CodeBlockCopyHandler;
+    /**
+     * Host fence-renderer registry (`@bendyline/squisq/fence`): fenced code
+     * blocks whose language is claimed render through the host's widget
+     * instead of the default code block. Wins over the built-in mermaid
+     * handling and over an ambient `FenceRendererContext`; a renderer that
+     * throws falls back to the plain code block via an error boundary.
+     */
+    fenceRenderers?: FenceRendererMap;
+}
+/**
+ * Renders MarkdownBlockNode[] AST as React HTML elements.
+ *
+ * @example
+ * ```tsx
+ * <MarkdownRenderer nodes={block.contents} />
+ * ```
+ */
+declare function MarkdownRenderer({ nodes, className, htmlPolicy, linkSchemes, theme, showCodeCopyButton, onCopyCode, fenceRenderers, }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
+
+export { type CodeBlockCopyHandler as C, MarkdownRenderer as M, type CodeBlockCopyContext as a, type MarkdownRendererProps as b };

package/dist/{chunk-ZKNX3EJI.js → chunk-DYAFB3AH.js}

@@ -1,13 +1,13 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-THDXCSPC.js";
+} from "./chunk-U3HRSQ45.js";
 import {
   useAudioSync,
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-BOZJ655L.js";
+} from "./chunk-MVJQL2W2.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -1859,7 +1859,10 @@ function DocPlayerContent({
   pipShape,
   pipPosition,
   enableSwipe = true,
-  globalKeyboardShortcuts = false
+  globalKeyboardShortcuts = false,
+  showCodeCopyButton = false,
+  onCopyCode,
+  fenceRenderers
 }) {
   const isSlideshowMode = displayMode === "slideshow";
   const isLinearMode = displayMode === "linear";
@@ -1876,12 +1879,17 @@ function DocPlayerContent({
     const params = new URLSearchParams(window.location.search);
     return params.get("debug") === "true";
   }, []);
+  const syntheticDuration = useMemo3(
+    () => audioMode === "synthetic" ? getDocPlaybackDuration(doc) : 0,
+    [audioMode, doc]
+  );
   const internalAudio = useAudioSync(
     audioRef,
     doc.audio,
     basePath,
     !externalAudioController,
-    audioMode
+    audioMode,
+    syntheticDuration
   );
   const audio = externalAudioController || internalAudio;
   useEffect5(() => {
@@ -2660,7 +2668,10 @@ function DocPlayerContent({
             viewport: activeViewport,
             theme,
             surface,
-            animationsEnabled
+            animationsEnabled,
+            showCodeCopyButton,
+            onCopyCode,
+            fenceRenderers
           }
         )
       }
@@ -2675,6 +2686,7 @@ function DocPlayerContent({
       "data-playback-state": isPlaying ? "playing" : "paused",
       "data-swipe-phase": swipe.phase,
       tabIndex: renderMode ? -1 : 0,
+      role: "region",
       "aria-label": "Document player",
       onKeyDown: renderMode ? void 0 : handleKeyDown,
       className: `doc-player${swipeEnabled ? " doc-player--swipe" : ""}${swipe.phase === "dragging" ? " doc-player--grabbing" : ""}`,

package/dist/{chunk-VMPQEUJH.js → chunk-ESI3P77P.js}

@@ -5,6 +5,13 @@ import {
   useMediaUrl
 } from "./chunk-LR3AIGDD.js";
 
+// src/hooks/FenceRendererContext.tsx
+import { createContext, useContext } from "react";
+var FenceRendererContext = createContext(null);
+function useFenceRenderers() {
+  return useContext(FenceRendererContext);
+}
+
 // src/InlineVideoPlayer.tsx
 import { jsx } from "react/jsx-runtime";
 function InlineVideoPlayer({
@@ -50,13 +57,99 @@ function InlineAudioPlayer({
 }
 
 // src/MarkdownRenderer.tsx
-import { Fragment } from "react";
+import { Component, Fragment, useEffect, useRef, useState } from "react";
 import {
   sanitizeHtmlNodes,
   sanitizeUrl
 } from "@bendyline/squisq/markdown";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var DEFAULT_CTX = { htmlPolicy: "sanitize" };
+var CODE_COPY_LABELS = {
+  idle: "Copy",
+  copying: "Copying\u2026",
+  copied: "Copied",
+  failed: "Copy failed"
+};
+async function writeCodeToClipboard(code, language, onCopyCode) {
+  if (onCopyCode) {
+    await onCopyCode(code, language === void 0 ? {} : { language });
+    return;
+  }
+  if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+    throw new Error("Clipboard access is unavailable in this host");
+  }
+  await navigator.clipboard.writeText(code);
+}
+function CodeBlock({
+  value,
+  language,
+  ctx
+}) {
+  const [status, setStatus] = useState("idle");
+  const resetTimer = useRef();
+  useEffect(
+    () => () => {
+      if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
+    },
+    []
+  );
+  const pre = /* @__PURE__ */ jsx3("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx3("code", { className: language ? `language-${language}` : void 0, children: value }) });
+  if (!ctx.showCodeCopyButton) return pre;
+  const handleCopy = async () => {
+    if (status === "copying") return;
+    setStatus("copying");
+    try {
+      await writeCodeToClipboard(value, language ?? void 0, ctx.onCopyCode);
+      setStatus("copied");
+    } catch {
+      setStatus("failed");
+    }
+    if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
+    resetTimer.current = setTimeout(() => setStatus("idle"), 1600);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "squisq-md-code-frame", children: [
+    pre,
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "squisq-md-code-copy",
+        "data-copy-state": status,
+        disabled: status === "copying",
+        onClick: () => void handleCopy(),
+        "aria-label": "Copy code to clipboard",
+        children: CODE_COPY_LABELS[status]
+      }
+    )
+  ] });
+}
+var FenceWidgetBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+function HostFence({
+  node,
+  lang,
+  ctx
+}) {
+  const renderer = ctx.fenceRenderers?.[lang];
+  if (!renderer) return null;
+  return /* @__PURE__ */ jsx3("div", { className: `squisq-md-fence-widget squisq-md-fence-widget-${lang}`, "data-fence-lang": lang, children: renderer({
+    lang,
+    ...node.meta != null ? { meta: node.meta } : {},
+    value: node.value,
+    ...ctx.theme ? { theme: ctx.theme } : {},
+    mode: "read"
+  }) });
+}
 function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
   return nodes.map((node, i) => {
     const key = `${keyPrefix}i${i}`;
@@ -168,8 +261,19 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
         return /* @__PURE__ */ jsx3("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
       }
       return /* @__PURE__ */ jsx3("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
-    case "code":
-      if (node.lang?.trim().toLowerCase() === "mermaid") {
+    case "code": {
+      const fenceLang = node.lang?.trim().toLowerCase();
+      if (fenceLang && ctx.fenceRenderers?.[fenceLang]) {
+        return /* @__PURE__ */ jsx3(
+          FenceWidgetBoundary,
+          {
+            fallback: /* @__PURE__ */ jsx3(CodeBlock, { value: node.value, language: node.lang, ctx }),
+            children: /* @__PURE__ */ jsx3(HostFence, { node, lang: fenceLang, ctx })
+          },
+          key
+        );
+      }
+      if (fenceLang === "mermaid") {
         return /* @__PURE__ */ jsx3(
           MermaidDiagram,
           {
@@ -181,7 +285,8 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
           key
         );
       }
-      return /* @__PURE__ */ jsx3("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx3("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
+      return /* @__PURE__ */ jsx3(CodeBlock, { value: node.value, language: node.lang, ctx }, key);
+    }
     case "thematicBreak":
       return /* @__PURE__ */ jsx3("hr", { className: "squisq-md-hr" }, key);
     case "table":
@@ -393,13 +498,26 @@ function MarkdownRenderer({
   className,
   htmlPolicy = "sanitize",
   linkSchemes,
-  theme
+  theme,
+  showCodeCopyButton = false,
+  onCopyCode,
+  fenceRenderers
 }) {
+  const ambientFenceRenderers = useFenceRenderers();
   if (!nodes || nodes.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", { htmlPolicy, linkSchemes, theme }) });
+  return /* @__PURE__ */ jsx3("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", {
+    htmlPolicy,
+    linkSchemes,
+    theme,
+    showCodeCopyButton,
+    onCopyCode,
+    fenceRenderers: fenceRenderers ?? ambientFenceRenderers ?? void 0
+  }) });
 }
 
 export {
+  FenceRendererContext,
+  useFenceRenderers,
   InlineVideoPlayer,
   InlineAudioPlayer,
   MarkdownRenderer

package/dist/{chunk-BOZJ655L.js → chunk-MVJQL2W2.js}

@@ -16,7 +16,7 @@ function useMediaSchedule(schedule, currentTime) {
 }
 
 // src/hooks/useAudioSync.ts
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useMemo as useMemo2, useRef, useCallback } from "react";
 import { fetchResourceBytes, isResourceUrlAllowed } from "@bendyline/squisq/markdown";
 
 // src/hooks/AudioController.ts
@@ -61,7 +61,14 @@ function resolveAudioUrl(src, basePath) {
   if (!basePath) return src;
   return `${basePath.replace(/\/$/, "")}/${src.replace(/^\//, "")}`;
 }
-function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true, mode = "media") {
+function useAudioSync(audioRef, track, basePath = "", enabled = true, mode = "media", syntheticDuration = 0) {
+  const audioTrack = useMemo2(() => {
+    if (mode !== "synthetic" || track?.segments?.length || syntheticDuration <= 0) return track;
+    return {
+      ...track,
+      segments: [{ src: "", name: "synthetic", duration: syntheticDuration, startTime: 0 }]
+    };
+  }, [track, mode, syntheticDuration]);
   const resourcePolicy = useResourcePolicy();
   const [currentTime, setCurrentTime] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -468,7 +475,7 @@ function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true, mode
 }
 
 // src/hooks/useDocPlayback.ts
-import { useMemo as useMemo2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { useMemo as useMemo3, useCallback as useCallback2, useRef as useRef2 } from "react";
 import {
   DEFAULT_THEME,
   getBlockAtTime,
@@ -489,7 +496,7 @@ function useDocPlayback(script, currentTime, options = {}) {
     onSeek,
     useAudioSegmentTiming = true
   } = options;
-  const blocks = useMemo2(() => {
+  const blocks = useMemo3(() => {
     if (!script?.blocks) {
       return [];
     }
@@ -532,20 +539,20 @@ function useDocPlayback(script, currentTime, options = {}) {
     theme,
     useAudioSegmentTiming
   ]);
-  const currentBlock = useMemo2(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
-  const currentBlockIndex = useMemo2(
+  const currentBlock = useMemo3(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
+  const currentBlockIndex = useMemo3(
     () => currentBlock ? blocks.indexOf(currentBlock) : -1,
     [blocks, currentBlock]
   );
-  const blockTime = useMemo2(() => {
+  const blockTime = useMemo3(() => {
     if (!currentBlock) return 0;
     return Math.max(0, currentTime - currentBlock.startTime);
   }, [currentBlock, currentTime]);
-  const blockProgress = useMemo2(() => {
+  const blockProgress = useMemo3(() => {
     if (!currentBlock || currentBlock.duration === 0) return 0;
     return Math.min(1, blockTime / currentBlock.duration);
   }, [currentBlock, blockTime]);
-  const docProgress = useMemo2(() => {
+  const docProgress = useMemo3(() => {
     if (!script || script.duration === 0) return 0;
     return Math.min(1, currentTime / script.duration);
   }, [script, currentTime]);
@@ -612,7 +619,7 @@ function useDocPlayback(script, currentTime, options = {}) {
 }
 
 // src/hooks/useViewportOrientation.ts
-import { useState as useState2, useEffect as useEffect2, useMemo as useMemo3 } from "react";
+import { useState as useState2, useEffect as useEffect2, useMemo as useMemo4 } from "react";
 import {
   VIEWPORT_PRESETS as VIEWPORT_PRESETS2
 } from "@bendyline/squisq/doc";
@@ -661,11 +668,11 @@ function useViewportOrientation() {
       clearTimeout(timeoutId);
     };
   }, []);
-  const orientation = useMemo3(
+  const orientation = useMemo4(
     () => getOrientationFromWindow(windowSize.width, windowSize.height),
     [windowSize.width, windowSize.height]
   );
-  const viewport = useMemo3(() => getViewportForOrientation(orientation), [orientation]);
+  const viewport = useMemo4(() => getViewportForOrientation(orientation), [orientation]);
   return {
     viewport,
     orientation,

package/dist/{chunk-DJRYQQXB.js → chunk-NJRSGSFW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-TT6ENR6T.js";
 import {
   MarkdownRenderer
-} from "./chunk-VMPQEUJH.js";
+} from "./chunk-ESI3P77P.js";
 
 // src/jsonView/useJsonViewTokens.ts
 import { useMemo } from "react";
@@ -325,6 +325,72 @@ function JsonView(props) {
   ) });
 }
 
+// src/jsonView/jsonFormFenceRenderer.tsx
+import { inferSchema } from "@bendyline/squisq/jsonForm";
+import { parseYamlSubset } from "@bendyline/squisq/doc";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function parseFenceBody(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("{")) {
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return { error: "fence body must be a top-level object" };
+      }
+      return { data: parsed };
+    } catch (err) {
+      return { error: `invalid JSON: ${err instanceof Error ? err.message : String(err)}` };
+    }
+  }
+  try {
+    return { data: parseYamlSubset(value) };
+  } catch (err) {
+    return { error: `invalid YAML: ${err instanceof Error ? err.message : String(err)}` };
+  }
+}
+function JsonFormFence({
+  ctx,
+  options
+}) {
+  const parsed = ctx.data !== void 0 ? { data: ctx.data } : parseFenceBody(ctx.value);
+  const data = parsed.data;
+  if (!data || typeof data !== "object" || Array.isArray(data)) {
+    return /* @__PURE__ */ jsxs2("div", { className: "squisq-json-fence squisq-json-fence--invalid", children: [
+      /* @__PURE__ */ jsx4("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx4("code", { children: ctx.value }) }),
+      "error" in parsed && parsed.error && /* @__PURE__ */ jsx4("div", { className: "squisq-json-fence-error", children: parsed.error })
+    ] });
+  }
+  const schema = options.schema ?? inferSchema(data);
+  const actions = options.actions ?? [];
+  return /* @__PURE__ */ jsxs2("div", { className: `squisq-json-fence${options.className ? ` ${options.className}` : ""}`, children: [
+    /* @__PURE__ */ jsx4(
+      JsonView,
+      {
+        schema,
+        value: data,
+        theme: ctx.theme,
+        density: options.density ?? "compact"
+      }
+    ),
+    actions.length > 0 && options.onAction && /* @__PURE__ */ jsx4("div", { className: "squisq-json-fence-actions", role: "group", children: actions.map((action) => /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        className: `squisq-json-fence-action${action.variant === "primary" ? " squisq-json-fence-action--primary" : ""}`,
+        onClick: () => void options.onAction?.(action.id, data, ctx),
+        children: action.label
+      },
+      action.id
+    )) })
+  ] });
+}
+function createJsonFormFenceRenderer(options = {}) {
+  return function jsonFormFenceRenderer(ctx) {
+    return /* @__PURE__ */ jsx4(JsonFormFence, { ctx, options });
+  };
+}
+
 export {
-  JsonView
+  JsonView,
+  createJsonFormFenceRenderer
 };

package/dist/{chunk-THDXCSPC.js → chunk-U3HRSQ45.js}

@@ -16,7 +16,7 @@ import {
 import {
   InlineVideoPlayer,
   MarkdownRenderer
-} from "./chunk-VMPQEUJH.js";
+} from "./chunk-ESI3P77P.js";
 import {
   useMediaUrl
 } from "./chunk-LR3AIGDD.js";
@@ -165,7 +165,8 @@ var defaultValue = {
   viewport: VIEWPORT_PRESETS.landscape,
   renderContext: { theme: DEFAULT_THEME },
   animationsEnabled: true,
-  imageDisplayMode: "inline"
+  imageDisplayMode: "inline",
+  showCodeCopyButton: false
 };
 var PageViewContext = createContext(defaultValue);
 function usePageView() {
@@ -438,11 +439,22 @@ function CardGridSection({ section }) {
   ] });
 }
 function ItemListSection({ section }) {
-  const { theme } = usePageView();
+  const { theme, showCodeCopyButton, onCopyCode, fenceRenderers, htmlPolicy, linkSchemes } = usePageView();
   const items = section.slots.items ?? [];
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     section.slots.title && /* @__PURE__ */ jsx3("h2", { className: "squisq-page-section-title squisq-page-items-title", children: section.slots.title }),
-    /* @__PURE__ */ jsx3("ol", { className: "squisq-page-items", children: items.map((item, i) => /* @__PURE__ */ jsx3("li", { children: item.markdown ? /* @__PURE__ */ jsx3(MarkdownRenderer, { nodes: item.markdown, theme }) : item.body }, i)) })
+    /* @__PURE__ */ jsx3("ol", { className: "squisq-page-items", children: items.map((item, i) => /* @__PURE__ */ jsx3("li", { children: item.markdown ? /* @__PURE__ */ jsx3(
+      MarkdownRenderer,
+      {
+        nodes: item.markdown,
+        theme,
+        showCodeCopyButton,
+        onCopyCode,
+        fenceRenderers,
+        htmlPolicy,
+        linkSchemes
+      }
+    ) : item.body }, i)) })
   ] });
 }
 function TimelineRailSection({ section }) {
@@ -470,12 +482,33 @@ function TableSection({ section }) {
   ] });
 }
 function ProseSection({ section, block }) {
-  const { theme } = usePageView();
-  const heading = section.slots.title !== void 0 && block?.sourceHeading ? /* @__PURE__ */ jsx3(MarkdownRenderer, { nodes: [block.sourceHeading], theme }) : null;
+  const { theme, showCodeCopyButton, onCopyCode, fenceRenderers, htmlPolicy, linkSchemes } = usePageView();
+  const heading = section.slots.title !== void 0 && block?.sourceHeading ? /* @__PURE__ */ jsx3(
+    MarkdownRenderer,
+    {
+      nodes: [block.sourceHeading],
+      theme,
+      showCodeCopyButton,
+      onCopyCode,
+      htmlPolicy,
+      linkSchemes
+    }
+  ) : null;
   const bodyNodes = section.slots.body?.markdown ?? block?.contents;
   return /* @__PURE__ */ jsxs2("div", { className: "squisq-page-prose", children: [
     heading,
-    bodyNodes && bodyNodes.length > 0 && /* @__PURE__ */ jsx3(MarkdownRenderer, { nodes: bodyNodes, theme })
+    bodyNodes && bodyNodes.length > 0 && /* @__PURE__ */ jsx3(
+      MarkdownRenderer,
+      {
+        nodes: bodyNodes,
+        theme,
+        showCodeCopyButton,
+        onCopyCode,
+        fenceRenderers,
+        htmlPolicy,
+        linkSchemes
+      }
+    )
   ] });
 }
 function FooterSection({ section }) {
@@ -537,7 +570,15 @@ function sectionBody(entry, featureFlip) {
   }
 }
 function PageSectionView({ entry, featureFlip, isLeadProse }) {
-  const { pageStyle, theme } = usePageView();
+  const {
+    pageStyle,
+    theme,
+    showCodeCopyButton,
+    onCopyCode,
+    fenceRenderers,
+    htmlPolicy,
+    linkSchemes
+  } = usePageView();
   const { section } = entry;
   const richContent = section.slots.richContent?.markdown;
   const classes = [
@@ -566,7 +607,18 @@ function PageSectionView({ entry, featureFlip, isLeadProse }) {
       ...hintAttrs,
       children: /* @__PURE__ */ jsxs3("div", { className: "squisq-page-section-inner", children: [
         sectionBody(entry, featureFlip),
-        richContent && richContent.length > 0 && /* @__PURE__ */ jsx4("div", { className: "squisq-page-rich-content", children: /* @__PURE__ */ jsx4(MarkdownRenderer, { nodes: richContent, theme }) })
+        richContent && richContent.length > 0 && /* @__PURE__ */ jsx4("div", { className: "squisq-page-rich-content", children: /* @__PURE__ */ jsx4(
+          MarkdownRenderer,
+          {
+            nodes: richContent,
+            theme,
+            showCodeCopyButton,
+            onCopyCode,
+            fenceRenderers,
+            htmlPolicy,
+            linkSchemes
+          }
+        ) })
       ] })
     }
   );
@@ -589,6 +641,7 @@ import {
   DEFAULT_THEME as DEFAULT_THEME2
 } from "@bendyline/squisq/doc";
 import { parseMarkdown } from "@bendyline/squisq/markdown";
+import { fenceRendererLangs } from "@bendyline/squisq/fence";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function LinearDocView({
   doc,
@@ -603,7 +656,12 @@ function LinearDocView({
   imageDisplayMode = "inline",
   globalKeyboardShortcuts = false,
   showCover = true,
-  transformPage
+  transformPage,
+  showCodeCopyButton = false,
+  onCopyCode,
+  fenceRenderers,
+  htmlPolicy,
+  linkSchemes
 }) {
   const scrollRef = useRef(null);
   const activeViewport = viewport ?? VIEWPORT_PRESETS2.landscape;
@@ -622,6 +680,7 @@ function LinearDocView({
     () => resolvePageStyle2(activeTheme, transformPage),
     [activeTheme, transformPage]
   );
+  const widgetFenceLangs = useMemo2(() => fenceRendererLangs(fenceRenderers), [fenceRenderers]);
   const sections = useMemo2(() => {
     if (!resolvedDoc) return [];
     return materializePageSections(resolvedDoc, {
@@ -629,9 +688,10 @@ function LinearDocView({
       viewport: activeViewport,
       customTemplates: resolvedDoc.customTemplates,
       cover: showCover !== false ? resolvedDoc.startBlock : false,
-      transformPage
+      transformPage,
+      ...widgetFenceLangs.length > 0 ? { widgetFenceLangs } : {}
     });
-  }, [resolvedDoc, activeTheme, activeViewport, showCover, transformPage]);
+  }, [resolvedDoc, activeTheme, activeViewport, showCover, transformPage, widgetFenceLangs]);
   const renderContext = useMemo2(
     () => ({
       theme: activeTheme,
@@ -650,7 +710,12 @@ function LinearDocView({
       viewport: activeViewport,
       renderContext,
       animationsEnabled,
-      imageDisplayMode
+      imageDisplayMode,
+      showCodeCopyButton,
+      onCopyCode,
+      fenceRenderers,
+      htmlPolicy,
+      linkSchemes
     }),
     [
       activeTheme,
@@ -659,7 +724,12 @@ function LinearDocView({
       activeViewport,
       renderContext,
       animationsEnabled,
-      imageDisplayMode
+      imageDisplayMode,
+      showCodeCopyButton,
+      onCopyCode,
+      fenceRenderers,
+      htmlPolicy,
+      linkSchemes
     ]
   );
   const { featureOrdinals, leadProseIndex } = useMemo2(() => {