@bendyline/squisq-react 2.2.0 → 2.3.0

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

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
+import { Theme, SurfaceScheme } from '@bendyline/squisq/schemas';
+
+interface JsonViewProps {
+    /** Schema describing the value's shape (with optional `squisq` UI hints). */
+    schema: SquisqAnnotatedSchema;
+    /** The value to display. */
+    value: unknown;
+    /** Optional theme. Defaults to `DEFAULT_THEME`. */
+    theme?: Theme;
+    /** Light/dark surface override; `'auto'` follows `prefers-color-scheme`. */
+    surface?: SurfaceScheme | 'auto';
+    /** Padding/gap density. Default: 'comfortable'. */
+    density?: 'comfortable' | 'compact';
+    /** Optional CSS class for the outer container. */
+    className?: string;
+}
+declare function JsonView(props: JsonViewProps): react_jsx_runtime.JSX.Element;
+
+export { JsonView, type JsonViewProps };

package/dist/json-view/index.js

@@ -0,0 +1,10 @@
+import {
+  JsonView
+} from "../chunk-NANF7REM.js";
+import "../chunk-TT6ENR6T.js";
+import "../chunk-D7KN4CRG.js";
+import "../chunk-WLUZTUNZ.js";
+import "../chunk-LR3AIGDD.js";
+export {
+  JsonView
+};

package/dist/layers/index.d.ts

@@ -0,0 +1,124 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageLayer as ImageLayer$1, TextLayer as TextLayer$1, ShapeLayer as ShapeLayer$1, PathLayer as PathLayer$1, VideoLayer as VideoLayer$1, TableLayer as TableLayer$1, TreeLayer as TreeLayer$1, MapLayer as MapLayer$1, MermaidLayer as MermaidLayer$1, Theme } from '@bendyline/squisq/schemas';
+
+interface ImageLayerProps {
+    layer: ImageLayer$1;
+    /** Base path for resolving relative image URLs */
+    basePath: string;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start (for animation timing) */
+    blockTime: number;
+    /** Whether authored and responsive image motion should run. */
+    animationsEnabled?: boolean;
+}
+declare function ImageLayer({ layer, basePath, viewport, blockTime, animationsEnabled, }: ImageLayerProps): react_jsx_runtime.JSX.Element;
+
+interface TextLayerProps {
+    layer: TextLayer$1;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start */
+    blockTime: number;
+}
+/**
+ * Dispatch between the plain SVG-text renderer and the rich HTML renderer
+ * based on whether the layer carries `content.html`.
+ */
+declare function TextLayer(props: TextLayerProps): react_jsx_runtime.JSX.Element;
+
+interface ShapeLayerProps {
+    layer: ShapeLayer$1;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start */
+    blockTime: number;
+}
+declare function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps): react_jsx_runtime.JSX.Element;
+
+interface PathLayerProps {
+    layer: PathLayer$1;
+    /** Viewport dimensions — used to resolve `%` positions for named shapes. */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start. */
+    blockTime: number;
+}
+declare function PathLayer({ layer, viewport, blockTime }: PathLayerProps): react_jsx_runtime.JSX.Element;
+
+interface VideoLayerProps {
+    layer: VideoLayer$1;
+    /** Base path for resolving relative video URLs */
+    basePath: string;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start (for playback sync) */
+    blockTime: number;
+    /** Whether the doc is currently playing */
+    isPlaying?: boolean;
+}
+declare function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }: VideoLayerProps): react_jsx_runtime.JSX.Element;
+
+interface TableLayerProps {
+    layer: TableLayer$1;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start (for animation) */
+    blockTime: number;
+}
+declare function TableLayer({ layer, viewport, blockTime }: TableLayerProps): react_jsx_runtime.JSX.Element;
+
+interface TreeLayerProps {
+    layer: TreeLayer$1;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    blockTime: number;
+}
+declare function TreeLayer({ layer, viewport, blockTime }: TreeLayerProps): react_jsx_runtime.JSX.Element;
+
+interface MapLayerProps {
+    layer: MapLayer$1;
+    /** Base path for resolving relative image URLs */
+    basePath: string;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start (for animation timing) */
+    blockTime: number;
+}
+declare function MapLayer({ layer, basePath, viewport, blockTime }: MapLayerProps): react_jsx_runtime.JSX.Element;
+
+interface MermaidLayerProps {
+    layer: MermaidLayer$1;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    blockTime: number;
+    theme?: Theme;
+}
+/** Mermaid diagram hosted in HTML inside the slide SVG. */
+declare function MermaidLayer({ layer, viewport, blockTime, theme }: MermaidLayerProps): react_jsx_runtime.JSX.Element;
+
+export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TableLayer, TextLayer, TreeLayer, VideoLayer };

package/dist/layers/index.js

@@ -0,0 +1,24 @@
+import {
+  ImageLayer,
+  MapLayer,
+  MermaidLayer,
+  PathLayer,
+  ShapeLayer,
+  TableLayer,
+  TextLayer,
+  TreeLayer,
+  VideoLayer
+} from "../chunk-XYS7HMP4.js";
+import "../chunk-WLUZTUNZ.js";
+import "../chunk-LR3AIGDD.js";
+export {
+  ImageLayer,
+  MapLayer,
+  MermaidLayer,
+  PathLayer,
+  ShapeLayer,
+  TableLayer,
+  TextLayer,
+  TreeLayer,
+  VideoLayer
+};

package/dist/markdown/index.d.ts

@@ -0,0 +1,44 @@
+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;
+
+interface MermaidDiagramProps {
+    source: string;
+    className?: string;
+    ariaLabel?: string;
+    /** Resolved Squisq theme whose palette Mermaid should inherit. */
+    theme?: Theme;
+}
+/** 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 };

package/dist/markdown/index.js

@@ -0,0 +1,11 @@
+import {
+  MarkdownRenderer
+} from "../chunk-D7KN4CRG.js";
+import {
+  MermaidDiagram
+} from "../chunk-WLUZTUNZ.js";
+import "../chunk-LR3AIGDD.js";
+export {
+  MarkdownRenderer,
+  MermaidDiagram
+};

package/dist/page/index.d.ts

@@ -0,0 +1,105 @@
+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 * as react from 'react';
+
+interface LinearDocViewProps {
+    /**
+     * The Doc to render. Wins over `markdown` when both are provided.
+     * When neither `doc` nor `markdown` is given, an empty container renders.
+     */
+    doc?: Doc;
+    /**
+     * Markdown source to render. When `doc` is absent, the markdown is parsed
+     * and converted to a Doc via `markdownToDoc(parseMarkdown(markdown))`.
+     * Ignored when `doc` is provided.
+     */
+    markdown?: string;
+    /** Base path for resolving media URLs (images, etc.) */
+    basePath?: string;
+    /** Viewport config for embedded SVG canvas sections (default: landscape) */
+    viewport?: ViewportConfig;
+    /** Optional CSS class for the outer container */
+    className?: string;
+    /** Theme to use for rendering (default: DEFAULT_THEME from the theme library) */
+    theme?: Theme;
+    /** Whether embedded canvas sections render their layer animations (default: true). */
+    animationsEnabled?: boolean;
+    /**
+     * Optional surface scheme (light / dark paper) overlaid on top of the
+     * theme's colors. Orthogonal to `theme` — a theme picks editorial
+     * identity, a surface picks the paper. Pass `'auto'` to follow the
+     * user's OS `prefers-color-scheme`, a `SurfaceScheme` object to force a
+     * specific surface, or omit to use the theme's built-in colors.
+     */
+    surface?: SurfaceScheme | 'auto';
+    /**
+     * Use tight padding + a hugging layout. The default layout is a full
+     * page with themed section bands. Short conversational snippets like
+     * chat replies benefit from a much tighter layout. Set to `true` to
+     * render with minimal padding so the content hugs its container.
+     */
+    thinMargins?: boolean;
+    /**
+     * How images inside the doc should be sized. `'inline'` (default)
+     * flows them at natural size up to the column width; `'thumbnail'`
+     * constrains each image to a 100×100 box with aspect-preserving
+     * containment — use for chat history and other dense surfaces where
+     * full-size images would dominate the layout.
+     */
+    imageDisplayMode?: ImageDisplayMode;
+    /**
+     * Let unmodified Up/Down arrows scroll this view even when it does not
+     * currently hold focus. Intended for a primary document preview.
+     */
+    globalKeyboardShortcuts?: boolean;
+    /**
+     * Synthesize a hero section from `doc.startBlock` at the top of the
+     * page (default: true). The editor's Cover toggle maps here.
+     */
+    showCover?: boolean;
+    /**
+     * Page hints from the active transform (Summarize) style — spacing and
+     * emphasis-curve adjustments defined by `TransformStyleConfig.page`.
+     */
+    transformPage?: PageTransformHints;
+}
+type ImageDisplayMode = 'inline' | 'thumbnail';
+/**
+ * Renders a Doc as a scrolling, theme-art-directed page.
+ *
+ * @example
+ * ```tsx
+ * <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;
+
+interface PageSectionViewProps {
+    entry: PageSectionMaterialization;
+    /** Alternation flip for feature-split sections (theme `alternate` hint). */
+    featureFlip?: boolean;
+    /** True when this is the doc's lead prose section (drop-cap target). */
+    isLeadProse?: boolean;
+}
+declare function PageSectionView({ entry, featureFlip, isLeadProse }: PageSectionViewProps): react_jsx_runtime.JSX.Element;
+
+interface CanvasSectionProps {
+    section: PageSection;
+}
+declare function CanvasSection({ section }: CanvasSectionProps): react_jsx_runtime.JSX.Element | null;
+
+interface PageViewContextValue {
+    theme: Theme;
+    pageStyle: ThemePageStyle;
+    basePath: string;
+    viewport: ViewportConfig;
+    /** Options for `materializeBlockLayers` inside canvas embeds. */
+    renderContext: MaterializeBlockLayersOptions;
+    animationsEnabled: boolean;
+    imageDisplayMode: ImageDisplayMode;
+}
+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 };

package/dist/page/index.js

@@ -0,0 +1,19 @@
+import {
+  CanvasSection,
+  LinearDocView,
+  PageSectionView,
+  PageViewContext,
+  usePageView
+} from "../chunk-TQH6RTTV.js";
+import "../chunk-XYS7HMP4.js";
+import "../chunk-TT6ENR6T.js";
+import "../chunk-D7KN4CRG.js";
+import "../chunk-WLUZTUNZ.js";
+import "../chunk-LR3AIGDD.js";
+export {
+  CanvasSection,
+  LinearDocView,
+  PageSectionView,
+  PageViewContext,
+  usePageView
+};