@bendyline/squisq-react 2.6.0 → 2.7.1

package/dist/{MarkdownRenderer-CerBKw-c.d.ts → MarkdownRenderer-CC9dOc6b.d.ts}

@@ -1,5 +1,6 @@
 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 {
@@ -39,6 +40,14 @@ interface MarkdownRendererProps {
      * 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.
@@ -48,6 +57,6 @@ interface MarkdownRendererProps {
  * <MarkdownRenderer nodes={block.contents} />
  * ```
  */
-declare function MarkdownRenderer({ nodes, className, htmlPolicy, linkSchemes, theme, showCodeCopyButton, onCopyCode, }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
+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-TMCLQNLM.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,7 +57,7 @@ function InlineAudioPlayer({
 }
 
 // src/MarkdownRenderer.tsx
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Component, Fragment, useEffect, useRef, useState } from "react";
 import {
   sanitizeHtmlNodes,
   sanitizeUrl
@@ -116,6 +123,33 @@ function CodeBlock({
     )
   ] });
 }
+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}`;
@@ -227,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,
           {
@@ -241,6 +286,7 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
         );
       }
       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":
@@ -454,19 +500,24 @@ function MarkdownRenderer({
   linkSchemes,
   theme,
   showCodeCopyButton = false,
-  onCopyCode
+  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,
     showCodeCopyButton,
-    onCopyCode
+    onCopyCode,
+    fenceRenderers: fenceRenderers ?? ambientFenceRenderers ?? void 0
   }) });
 }
 
 export {
+  FenceRendererContext,
+  useFenceRenderers,
   InlineVideoPlayer,
   InlineAudioPlayer,
   MarkdownRenderer

package/dist/{chunk-U6P7HBUY.js → chunk-IQGW6SA6.js}

@@ -16,7 +16,7 @@ import {
 import {
   InlineVideoPlayer,
   MarkdownRenderer
-} from "./chunk-TMCLQNLM.js";
+} from "./chunk-ESI3P77P.js";
 import {
   useMediaUrl
 } from "./chunk-LR3AIGDD.js";
@@ -439,19 +439,22 @@ function CardGridSection({ section }) {
   ] });
 }
 function ItemListSection({ section }) {
-  const { theme, showCodeCopyButton, onCopyCode } = 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(
+    /* @__PURE__ */ jsx3("ol", { className: "squisq-page-items", children: items.map((item, i) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3("div", { className: "squisq-page-item-body", children: item.markdown ? /* @__PURE__ */ jsx3(
       MarkdownRenderer,
       {
         nodes: item.markdown,
         theme,
         showCodeCopyButton,
-        onCopyCode
+        onCopyCode,
+        fenceRenderers,
+        htmlPolicy,
+        linkSchemes
       }
-    ) : item.body }, i)) })
+    ) : item.body }) }, i)) })
   ] });
 }
 function TimelineRailSection({ section }) {
@@ -479,14 +482,16 @@ function TableSection({ section }) {
   ] });
 }
 function ProseSection({ section, block }) {
-  const { theme, showCodeCopyButton, onCopyCode } = usePageView();
+  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
+      onCopyCode,
+      htmlPolicy,
+      linkSchemes
     }
   ) : null;
   const bodyNodes = section.slots.body?.markdown ?? block?.contents;
@@ -498,7 +503,10 @@ function ProseSection({ section, block }) {
         nodes: bodyNodes,
         theme,
         showCodeCopyButton,
-        onCopyCode
+        onCopyCode,
+        fenceRenderers,
+        htmlPolicy,
+        linkSchemes
       }
     )
   ] });
@@ -562,7 +570,15 @@ function sectionBody(entry, featureFlip) {
   }
 }
 function PageSectionView({ entry, featureFlip, isLeadProse }) {
-  const { pageStyle, theme, showCodeCopyButton, onCopyCode } = usePageView();
+  const {
+    pageStyle,
+    theme,
+    showCodeCopyButton,
+    onCopyCode,
+    fenceRenderers,
+    htmlPolicy,
+    linkSchemes
+  } = usePageView();
   const { section } = entry;
   const richContent = section.slots.richContent?.markdown;
   const classes = [
@@ -597,7 +613,10 @@ function PageSectionView({ entry, featureFlip, isLeadProse }) {
             nodes: richContent,
             theme,
             showCodeCopyButton,
-            onCopyCode
+            onCopyCode,
+            fenceRenderers,
+            htmlPolicy,
+            linkSchemes
           }
         ) })
       ] })
@@ -622,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,
@@ -638,7 +658,10 @@ function LinearDocView({
   showCover = true,
   transformPage,
   showCodeCopyButton = false,
-  onCopyCode
+  onCopyCode,
+  fenceRenderers,
+  htmlPolicy,
+  linkSchemes
 }) {
   const scrollRef = useRef(null);
   const activeViewport = viewport ?? VIEWPORT_PRESETS2.landscape;
@@ -657,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, {
@@ -664,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,
@@ -687,7 +712,10 @@ function LinearDocView({
       animationsEnabled,
       imageDisplayMode,
       showCodeCopyButton,
-      onCopyCode
+      onCopyCode,
+      fenceRenderers,
+      htmlPolicy,
+      linkSchemes
     }),
     [
       activeTheme,
@@ -698,7 +726,10 @@ function LinearDocView({
       animationsEnabled,
       imageDisplayMode,
       showCodeCopyButton,
-      onCopyCode
+      onCopyCode,
+      fenceRenderers,
+      htmlPolicy,
+      linkSchemes
     ]
   );
   const { featureOrdinals, leadProseIndex } = useMemo2(() => {

package/dist/{chunk-GWD62KLD.js → chunk-KXYE4AGL.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-U6P7HBUY.js";
+} from "./chunk-IQGW6SA6.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -1861,7 +1861,8 @@ function DocPlayerContent({
   enableSwipe = true,
   globalKeyboardShortcuts = false,
   showCodeCopyButton = false,
-  onCopyCode
+  onCopyCode,
+  fenceRenderers
 }) {
   const isSlideshowMode = displayMode === "slideshow";
   const isLinearMode = displayMode === "linear";
@@ -2669,7 +2670,8 @@ function DocPlayerContent({
             surface,
             animationsEnabled,
             showCodeCopyButton,
-            onCopyCode
+            onCopyCode,
+            fenceRenderers
           }
         )
       }
@@ -2684,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-YKBVTYU4.js → chunk-QF74BODY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-TT6ENR6T.js";
 import {
   MarkdownRenderer
-} from "./chunk-TMCLQNLM.js";
+} from "./chunk-ESI3P77P.js";
 
 // src/jsonView/useJsonViewTokens.ts
 import { useMemo } from "react";
@@ -325,6 +325,72 @@ function JsonView(props) {
   ) });
 }
 
+// src/jsonView/JsonFormFence.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
+    )) })
+  ] });
+}
+
+// src/jsonView/jsonFormFenceRenderer.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function createJsonFormFenceRenderer(options = {}) {
+  return function jsonFormFenceRenderer(ctx) {
+    return /* @__PURE__ */ jsx5(JsonFormFence, { ctx, options });
+  };
+}
+
 export {
-  JsonView
+  JsonView,
+  createJsonFormFenceRenderer
 };

package/dist/index.d.ts

@@ -1,16 +1,17 @@
 import { SquisqRenderAPI, VideoPresentation as VideoPresentation$1, PipSize, PipShape, PipPosition } from './player/index.js';
 export { BlockMarker, BlockRenderer, CaptionMode, CaptionOverlay, CaptionStyle, ControlsLayout, DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, DocPlayerProps, DocPlayerWithSidebar, DocProgressBar, InlineAudioPlayer, InlineAudioPlayerProps, InlineVideoPlayer, InlineVideoPlayerProps, MediaClipLayer, MediaClipLayerProps, PlaybackActions, PlaybackState, RenderAudioSegmentInfo, RenderBlockInfo, RenderCaptionInfo, RenderChapterInfo, SlideNavActions, SocialCaptionOverlay, formatTime } from './player/index.js';
 import { Theme, VideoPresentation, VideoPipSize, VideoPipShape, VideoPipPosition, Doc, ScheduledClip, MediaProvider } from '@bendyline/squisq/schemas';
-import { C as CodeBlockCopyHandler } from './MarkdownRenderer-CerBKw-c.js';
-export { a as CodeBlockCopyContext, M as MarkdownRenderer, b as MarkdownRendererProps } from './MarkdownRenderer-CerBKw-c.js';
-export { MermaidDiagram, MermaidDiagramProps } from './markdown/index.js';
+import { C as CodeBlockCopyHandler } from './MarkdownRenderer-CC9dOc6b.js';
+export { a as CodeBlockCopyContext, M as MarkdownRenderer, b as MarkdownRendererProps } from './MarkdownRenderer-CC9dOc6b.js';
+export { FenceRendererContext, MermaidDiagram, MermaidDiagramProps, useFenceRenderers } from './markdown/index.js';
 export { CanvasSection, CanvasSectionProps, ImageDisplayMode, LinearDocView, LinearDocViewProps, PageSectionView, PageSectionViewProps, PageViewContext, PageViewContextValue, usePageView } from './page/index.js';
 export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TableLayer, TextLayer, TreeLayer, VideoLayer } from './layers/index.js';
 import { CoverSlideTemplate, CoverSlidePlayback } from '@bendyline/squisq/doc';
 export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
 export { MediaContext, MediaScheduleController, ModalDialogOptions, ResourcePolicyContext, UseDocPlaybackOptions, useAudioSync, useAutoSurface, useDocPlayback, useMediaProvider, useMediaSchedule, useMediaUrl, useModalDialog, useResourcePolicy, useViewportOrientation } from './hooks/index.js';
+export { FenceRenderContext, FenceRenderer, FenceRendererMap } from '@bendyline/squisq/fence';
 export { A as AudioActions, a as AudioController, b as AudioState } from './AudioController-DwMsPe38.js';
-export { JsonView, JsonViewProps } from './json-view/index.js';
+export { JsonFormFenceAction, JsonFormFenceRendererOptions, JsonView, JsonViewProps, createJsonFormFenceRenderer } from './json-view/index.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@bendyline/squisq/markdown';

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-GWD62KLD.js";
+} from "./chunk-KXYE4AGL.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -20,7 +20,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-U6P7HBUY.js";
+} from "./chunk-IQGW6SA6.js";
 import {
   ImageLayer,
   MapLayer,
@@ -44,16 +44,19 @@ import {
   useViewportOrientation
 } from "./chunk-MVJQL2W2.js";
 import {
-  JsonView
-} from "./chunk-YKBVTYU4.js";
+  JsonView,
+  createJsonFormFenceRenderer
+} from "./chunk-QF74BODY.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
 import {
+  FenceRendererContext,
   InlineAudioPlayer,
   InlineVideoPlayer,
-  MarkdownRenderer
-} from "./chunk-TMCLQNLM.js";
+  MarkdownRenderer,
+  useFenceRenderers
+} from "./chunk-ESI3P77P.js";
 import {
   MermaidDiagram
 } from "./chunk-WLUZTUNZ.js";
@@ -75,6 +78,7 @@ export {
   DocPlayer,
   DocPlayerWithSidebar,
   DocProgressBar,
+  FenceRendererContext,
   ImageLayer,
   InlineAudioPlayer,
   InlineVideoPlayer,
@@ -96,6 +100,7 @@ export {
   TextLayer,
   TreeLayer,
   VideoLayer,
+  createJsonFormFenceRenderer,
   formatTime,
   getAnimationStyle,
   getTransitionClass,
@@ -103,6 +108,7 @@ export {
   useAudioSync,
   useAutoSurface,
   useDocPlayback,
+  useFenceRenderers,
   useMediaClipDurations,
   useMediaProvider,
   useMediaSchedule,

package/dist/json-view/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
 import { Theme, SurfaceScheme } from '@bendyline/squisq/schemas';
+import { FenceRenderContext, FenceRenderer } from '@bendyline/squisq/fence';
 
 interface JsonViewProps {
     /** Schema describing the value's shape (with optional `squisq` UI hints). */
@@ -18,4 +19,62 @@ interface JsonViewProps {
 }
 declare function JsonView(props: JsonViewProps): react_jsx_runtime.JSX.Element;
 
-export { JsonView, type JsonViewProps };
+/**
+ * Built-in fence renderer: a fence's JSON / YAML-subset body rendered
+ * through the read-only JSON-form machinery (`<JsonView>`), with
+ * host-defined action buttons as chrome below the form.
+ *
+ * This is the form-driven flavor of the pluggable fence mechanism —
+ * register the result in a `FenceRendererMap` next to fully custom
+ * component renderers:
+ *
+ * ```tsx
+ * const fenceRenderers = {
+ *   'my-record': createJsonFormFenceRenderer({
+ *     actions: [{ id: 'approve', label: 'Approve' }],
+ *     onAction: (actionId, data) => host.handle(actionId, data),
+ *   }),
+ * };
+ * ```
+ *
+ * Parsing: strict JSON first, then the documented YAML subset
+ * (`parseYamlSubset` — flat maps, inline arrays, one nesting level).
+ * Unparseable bodies render as a plain code block with a quiet
+ * diagnostic line, so a malformed fence stays visible and debuggable.
+ * The rendering itself lives in `JsonFormFence.tsx`; this module is the
+ * factory and its option surface.
+ */
+
+/** One host action button rendered below the form. */
+interface JsonFormFenceAction {
+    id: string;
+    label: string;
+    /** `primary` gets the filled treatment; default is quiet. */
+    variant?: 'primary' | 'default';
+}
+interface JsonFormFenceRendererOptions {
+    /**
+     * Schema for the fence body. Omitted → inferred from the parsed value
+     * (`inferSchema`), which renders sensible read-only fields for any
+     * well-formed object.
+     */
+    schema?: SquisqAnnotatedSchema;
+    /** Action buttons rendered below the form. */
+    actions?: readonly JsonFormFenceAction[];
+    /**
+     * Invoked from the button's click handler (user-gesture context is
+     * preserved, mirroring the `onCopyCode` contract).
+     */
+    onAction?: (actionId: string, data: Record<string, unknown>, ctx: FenceRenderContext) => void | Promise<void>;
+    /** Padding density passed to `<JsonView>` (default `'compact'`). */
+    density?: 'comfortable' | 'compact';
+    /** Extra CSS class on the wrapper. */
+    className?: string;
+}
+/**
+ * Build a `FenceRenderer` that renders the fence body through the
+ * read-only JSON form. See the module doc for usage.
+ */
+declare function createJsonFormFenceRenderer(options?: JsonFormFenceRendererOptions): FenceRenderer;
+
+export { type JsonFormFenceAction, type JsonFormFenceRendererOptions, JsonView, type JsonViewProps, createJsonFormFenceRenderer };

package/dist/json-view/index.js

@@ -1,10 +1,12 @@
 import {
-  JsonView
-} from "../chunk-YKBVTYU4.js";
+  JsonView,
+  createJsonFormFenceRenderer
+} from "../chunk-QF74BODY.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-TMCLQNLM.js";
+import "../chunk-ESI3P77P.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {
-  JsonView
+  JsonView,
+  createJsonFormFenceRenderer
 };

package/dist/markdown/index.d.ts

@@ -1,6 +1,9 @@
-export { a as CodeBlockCopyContext, C as CodeBlockCopyHandler, M as MarkdownRenderer, b as MarkdownRendererProps } from '../MarkdownRenderer-CerBKw-c.js';
+export { a as CodeBlockCopyContext, C as CodeBlockCopyHandler, M as MarkdownRenderer, b as MarkdownRendererProps } from '../MarkdownRenderer-CC9dOc6b.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Theme } from '@bendyline/squisq/schemas';
+import * as react from 'react';
+import { FenceRendererMap } from '@bendyline/squisq/fence';
+export { FenceRenderContext, FenceRenderer, FenceRendererMap } from '@bendyline/squisq/fence';
 import '@bendyline/squisq/markdown';
 
 interface MermaidDiagramProps {
@@ -13,4 +16,8 @@ interface MermaidDiagramProps {
 /** Read-only Mermaid rendering for page bodies and slide layers. */
 declare function MermaidDiagram({ source, className, ariaLabel, theme, }: MermaidDiagramProps): react_jsx_runtime.JSX.Element;
 
-export { MermaidDiagram, type MermaidDiagramProps };
+declare const FenceRendererContext: react.Context<FenceRendererMap | null>;
+/** The ambient registry, or null when no provider wraps this subtree. */
+declare function useFenceRenderers(): FenceRendererMap | null;
+
+export { FenceRendererContext, MermaidDiagram, type MermaidDiagramProps, useFenceRenderers };

package/dist/markdown/index.js

@@ -1,11 +1,15 @@
 import {
-  MarkdownRenderer
-} from "../chunk-TMCLQNLM.js";
+  FenceRendererContext,
+  MarkdownRenderer,
+  useFenceRenderers
+} from "../chunk-ESI3P77P.js";
 import {
   MermaidDiagram
 } from "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {
+  FenceRendererContext,
   MarkdownRenderer,
-  MermaidDiagram
+  MermaidDiagram,
+  useFenceRenderers
 };