@bendyline/squisq-react 2.5.0 → 2.7.0

package/dist/hooks/index.d.ts

@@ -18,10 +18,14 @@ import { ResourcePolicy } from '@bendyline/squisq/markdown';
  * This is the HTML5 Audio implementation of the AudioController interface.
  * Hosts that drive audio through an external player (e.g. a native shell)
  * can supply their own AudioController to DocPlayer instead of this hook.
+ *
+ * In `synthetic` mode there is no audio element to follow, so a caller that
+ * has no segments passes `syntheticDuration` — the document's own timeline
+ * length — and the same segment machinery drives a timer instead.
  */
 
 type AudioSyncMode = 'media' | 'synthetic';
-declare function useAudioSync(audioRef: RefObject<HTMLAudioElement>, audioTrack: AudioTrack | undefined, basePath?: string, enabled?: boolean, mode?: AudioSyncMode): AudioController;
+declare function useAudioSync(audioRef: RefObject<HTMLAudioElement>, track: AudioTrack | undefined, basePath?: string, enabled?: boolean, mode?: AudioSyncMode, syntheticDuration?: number): AudioController;
 
 interface ModalDialogOptions {
     /** The backdrop/portal root. Siblings of this branch are made inert. */

package/dist/hooks/index.js

@@ -6,7 +6,7 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "../chunk-BOZJ655L.js";
+} from "../chunk-MVJQL2W2.js";
 import {
   useAutoSurface
 } from "../chunk-TT6ENR6T.js";

package/dist/index.d.ts

@@ -1,14 +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';
-export { MarkdownRenderer, 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';
@@ -84,6 +87,10 @@ interface MountOptions {
     animationsEnabled?: boolean;
     /** Caption style: 'standard' or 'social'. Omit or set to undefined for no captions. */
     captionStyle?: 'standard' | 'social';
+    /** Show a Copy button on fenced code blocks in static mode (default: false). */
+    showCodeCopyButton?: boolean;
+    /** Optional host clipboard adapter; otherwise the browser Clipboard API is used. */
+    onCopyCode?: CodeBlockCopyHandler;
 }
 /** Instance handle returned by {@link mount}. */
 interface SquisqPlayerHandle {
@@ -147,4 +154,4 @@ declare function resolveDocPlayerAppearance(doc: Doc, overrides?: DocPlayerAppea
  */
 declare function useMediaClipDurations(schedule: ScheduledClip[], basePath: string, mediaProviderOverride?: MediaProvider | null): Map<string, number>;
 
-export { type DocPlayerAppearanceOverrides, type MountOptions, PipPosition, PipShape, PipSize, type ResolvedDocPlayerAppearance, type SquisqPlayerHandle, SquisqRenderAPI, VideoPresentation$1 as VideoPresentation, resolveDocPlayerAppearance, useMediaClipDurations };
+export { CodeBlockCopyHandler, type DocPlayerAppearanceOverrides, type MountOptions, PipPosition, PipShape, PipSize, type ResolvedDocPlayerAppearance, type SquisqPlayerHandle, SquisqRenderAPI, VideoPresentation$1 as VideoPresentation, resolveDocPlayerAppearance, useMediaClipDurations };

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-ZKNX3EJI.js";
+} from "./chunk-DYAFB3AH.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -20,7 +20,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-THDXCSPC.js";
+} from "./chunk-U3HRSQ45.js";
 import {
   ImageLayer,
   MapLayer,
@@ -42,18 +42,21 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-BOZJ655L.js";
+} from "./chunk-MVJQL2W2.js";
 import {
-  JsonView
-} from "./chunk-DJRYQQXB.js";
+  JsonView,
+  createJsonFormFenceRenderer
+} from "./chunk-NJRSGSFW.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
 import {
+  FenceRendererContext,
   InlineAudioPlayer,
   InlineVideoPlayer,
-  MarkdownRenderer
-} from "./chunk-VMPQEUJH.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,60 @@ 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.
+ */
+
+/** 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-DJRYQQXB.js";
+  JsonView,
+  createJsonFormFenceRenderer
+} from "../chunk-NJRSGSFW.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-VMPQEUJH.js";
+import "../chunk-ESI3P77P.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {
-  JsonView
+  JsonView,
+  createJsonFormFenceRenderer
 };

package/dist/markdown/index.d.ts

@@ -1,35 +1,10 @@
+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 { MarkdownBlockNode, HtmlPolicy } from '@bendyline/squisq/markdown';
-
-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;
-}
-/**
- * Renders MarkdownBlockNode[] AST as React HTML elements.
- *
- * @example
- * ```tsx
- * <MarkdownRenderer nodes={block.contents} />
- * ```
- */
-declare function MarkdownRenderer({ nodes, className, htmlPolicy, linkSchemes, theme, }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
+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 {
     source: string;
@@ -41,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 { MarkdownRenderer, 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-VMPQEUJH.js";
+  FenceRendererContext,
+  MarkdownRenderer,
+  useFenceRenderers
+} from "../chunk-ESI3P77P.js";
 import {
   MermaidDiagram
 } from "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {
+  FenceRendererContext,
   MarkdownRenderer,
-  MermaidDiagram
+  MermaidDiagram,
+  useFenceRenderers
 };

package/dist/page/index.d.ts

@@ -1,6 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Doc, ViewportConfig, Theme, SurfaceScheme, ThemePageStyle } from '@bendyline/squisq/schemas';
 import { PageTransformHints, PageSectionMaterialization, PageSection, MaterializeBlockLayersOptions } from '@bendyline/squisq/doc';
+import { HtmlPolicy } from '@bendyline/squisq/markdown';
+import { FenceRendererMap } from '@bendyline/squisq/fence';
+import { C as CodeBlockCopyHandler } from '../MarkdownRenderer-CC9dOc6b.js';
+export { a as CodeBlockCopyContext } from '../MarkdownRenderer-CC9dOc6b.js';
 import * as react from 'react';
 
 interface LinearDocViewProps {
@@ -63,6 +67,22 @@ interface LinearDocViewProps {
      * emphasis-curve adjustments defined by `TransformStyleConfig.page`.
      */
     transformPage?: PageTransformHints;
+    /** Show a Copy button on ordinary fenced code blocks (default: false). */
+    showCodeCopyButton?: boolean;
+    /** Optional host clipboard adapter; otherwise the browser Clipboard API is used. */
+    onCopyCode?: CodeBlockCopyHandler;
+    /**
+     * Host fence-renderer registry (`@bendyline/squisq/fence`). Claimed
+     * fence languages render through the host's widgets in every markdown
+     * section — including rich content preserved inside typed template
+     * sections (the claimed languages are threaded into the page
+     * materializer so those fences survive slot extraction).
+     */
+    fenceRenderers?: FenceRendererMap;
+    /** Raw-HTML policy for markdown sections (default: `sanitize`). */
+    htmlPolicy?: HtmlPolicy;
+    /** Extra link URL schemes allowed in markdown sections. */
+    linkSchemes?: readonly string[];
 }
 type ImageDisplayMode = 'inline' | 'thumbnail';
 /**
@@ -73,7 +93,7 @@ type ImageDisplayMode = 'inline' | 'thumbnail';
  * <LinearDocView doc={doc} basePath="/media/" />
  * ```
  */
-declare function LinearDocView({ doc, markdown, basePath, viewport, className, theme, surface, animationsEnabled, thinMargins, imageDisplayMode, globalKeyboardShortcuts, showCover, transformPage, }: LinearDocViewProps): react_jsx_runtime.JSX.Element;
+declare function LinearDocView({ doc, markdown, basePath, viewport, className, theme, surface, animationsEnabled, thinMargins, imageDisplayMode, globalKeyboardShortcuts, showCover, transformPage, showCodeCopyButton, onCopyCode, fenceRenderers, htmlPolicy, linkSchemes, }: LinearDocViewProps): react_jsx_runtime.JSX.Element;
 
 interface PageSectionViewProps {
     entry: PageSectionMaterialization;
@@ -98,8 +118,16 @@ interface PageViewContextValue {
     renderContext: MaterializeBlockLayersOptions;
     animationsEnabled: boolean;
     imageDisplayMode: ImageDisplayMode;
+    showCodeCopyButton: boolean;
+    onCopyCode?: CodeBlockCopyHandler;
+    /** Host fence-renderer registry — see `MarkdownRendererProps.fenceRenderers`. */
+    fenceRenderers?: FenceRendererMap;
+    /** Raw-HTML policy for section markdown; defaults to MarkdownRenderer's `sanitize`. */
+    htmlPolicy?: HtmlPolicy;
+    /** Extra link URL schemes for section markdown. */
+    linkSchemes?: readonly string[];
 }
 declare const PageViewContext: react.Context<PageViewContextValue>;
 declare function usePageView(): PageViewContextValue;
 
-export { CanvasSection, type CanvasSectionProps, type ImageDisplayMode, LinearDocView, type LinearDocViewProps, PageSectionView, type PageSectionViewProps, PageViewContext, type PageViewContextValue, usePageView };
+export { CanvasSection, type CanvasSectionProps, CodeBlockCopyHandler, type ImageDisplayMode, LinearDocView, type LinearDocViewProps, PageSectionView, type PageSectionViewProps, PageViewContext, type PageViewContextValue, usePageView };

package/dist/page/index.js

@@ -4,10 +4,10 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-THDXCSPC.js";
+} from "../chunk-U3HRSQ45.js";
 import "../chunk-UJEHDVQO.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-VMPQEUJH.js";
+import "../chunk-ESI3P77P.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/player/index.d.ts

@@ -1,8 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Block, VideoPresentation as VideoPresentation$1, VideoPipSize, VideoPipShape, VideoPipPosition, Doc, Theme, SurfaceScheme, Transition, CaptionTrack, ViewportConfig as ViewportConfig$1, ScheduledClip } from '@bendyline/squisq/schemas';
 import { ViewportConfig, CoverSlideTemplate, CoverSlidePlayback } from '@bendyline/squisq/doc';
+import { FenceRendererMap } from '@bendyline/squisq/fence';
 import { a as AudioController } from '../AudioController-DwMsPe38.js';
+import { C as CodeBlockCopyHandler } from '../MarkdownRenderer-CC9dOc6b.js';
+export { a as CodeBlockCopyContext } from '../MarkdownRenderer-CC9dOc6b.js';
 import { CSSProperties } from 'react';
+import '@bendyline/squisq/markdown';
 
 /**
  * Doc Player Control Types
@@ -243,6 +247,16 @@ interface DocPlayerProps {
     pipPosition?: PipPosition;
     enableSwipe?: boolean;
     globalKeyboardShortcuts?: boolean;
+    /** Show a Copy button on fenced code blocks in linear mode (default: false). */
+    showCodeCopyButton?: boolean;
+    /** Optional host clipboard adapter; otherwise the browser Clipboard API is used. */
+    onCopyCode?: CodeBlockCopyHandler;
+    /**
+     * Host fence-renderer registry (`@bendyline/squisq/fence`), applied in
+     * linear mode's markdown sections. Video/slideshow modes render blocks
+     * as SVG layers and do not consult it.
+     */
+    fenceRenderers?: FenceRendererMap;
 }
 
 /**
@@ -461,4 +475,4 @@ interface MediaClipLayerProps {
 }
 declare function MediaClipLayer({ schedule, currentTime, isPlaying, basePath, renderMode, muted, presentation, pipSize, pipShape, pipPosition, pipOrientation, pipFrameStyle, honorClipPresentation, }: MediaClipLayerProps): react_jsx_runtime.JSX.Element | null;
 
-export { type BlockMarker, BlockRenderer, type CaptionMode, CaptionOverlay, type CaptionStyle, type ControlsLayout, type DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, type DocPlayerProps, DocPlayerWithSidebar, DocProgressBar, InlineAudioPlayer, type InlineAudioPlayerProps, InlineVideoPlayer, type InlineVideoPlayerProps, MediaClipLayer, type MediaClipLayerProps, type PipPosition, type PipShape, type PipSize, type PlaybackActions, type PlaybackState, type RenderAudioSegmentInfo, type RenderBlockInfo, type RenderCaptionInfo, type RenderChapterInfo, type SlideNavActions, SocialCaptionOverlay, type SquisqRenderAPI, type VideoPresentation, formatTime };
+export { type BlockMarker, BlockRenderer, type CaptionMode, CaptionOverlay, type CaptionStyle, CodeBlockCopyHandler, type ControlsLayout, type DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, type DocPlayerProps, DocPlayerWithSidebar, DocProgressBar, InlineAudioPlayer, type InlineAudioPlayerProps, InlineVideoPlayer, type InlineVideoPlayerProps, MediaClipLayer, type MediaClipLayerProps, type PipPosition, type PipShape, type PipSize, type PlaybackActions, type PlaybackState, type RenderAudioSegmentInfo, type RenderBlockInfo, type RenderCaptionInfo, type RenderChapterInfo, type SlideNavActions, SocialCaptionOverlay, type SquisqRenderAPI, type VideoPresentation, formatTime };

package/dist/player/index.js

@@ -10,17 +10,17 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-ZKNX3EJI.js";
+} from "../chunk-DYAFB3AH.js";
 import {
   BlockRenderer
-} from "../chunk-THDXCSPC.js";
+} from "../chunk-U3HRSQ45.js";
 import "../chunk-UJEHDVQO.js";
-import "../chunk-BOZJ655L.js";
+import "../chunk-MVJQL2W2.js";
 import "../chunk-TT6ENR6T.js";
 import {
   InlineAudioPlayer,
   InlineVideoPlayer
-} from "../chunk-VMPQEUJH.js";
+} from "../chunk-ESI3P77P.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {