CanvasSceneView

Draws one scene of a headless host: one toolbar, the scene's blocks in source order, one footer.

@internote/canvas-sdk/hostComponent
On this page
import { CanvasSceneView } from '@internote/canvas-sdk/host';

The canvas holds the scene's detail in the order the author wrote it — an environment's surface where they put one, a run of blank content (drawn by renderBlankElement) where they put that — with a hairline between every adjacent pair. A two-environment split is arranged by the scene's direction/ratio; a direction: auto split (the schema default) stacks here and goes side by side while presenting, where the canvas has the whole screen.

There is one toolbar per scene and one footer: the bar carries the system tier plus EVERY environment's declarative items, and the footer carries every environment's two bands under one chevron. Embedders draw the bar through renderToolbar with their own design system (the reading view draws the app's buttons); the built-in fallback is deliberately minimal.

Presentation is a drive mode: while presenting, the arrow keys and space move through the steps and Escape leaves. The embedder stages it (a fullscreen overlay, or this element's own fullscreen via manageFullscreen); the view only drives the steps. Mounting resets the scene's clock.

#Props

Also takes className. Any other prop is passed to the rendered element.

files
Uploaded text files (attached dataset CSVs), handed through likewise.
Record<string, string> | null
footer
What is drawn under the canvas: scene, the scene's whole footer; key, its key and scales alone, with no frame or controls, for a figure; none, nothing.
scenekeynone
Default'scene'
hostRequired
The headless host the scene was mounted by; supplies datasets, focus and presenting.
HeadlessCanvasHost
manageFullscreen
Whether this view fullscreens its own element when presenting. Embedders that stage presentation themselves (overlay) pass false and keep the keyboard drive.
boolean
Defaulttrue
onPresentingChange
Called when presentation starts or ends — the toolbar's toggle, Escape, or leaving fullscreen — with the new state.
(presenting: boolean) => void
onStepChange
Called after the scene's step changes, with the new step.
(step: number) => void
overlay
Drawn over the canvas — the environments' area, without the toolbar or the footer — and sized to it, on every step. The layer itself passes the pointer through; only its children take it.
ReactNode
presenting
Controlled presentation state; omit for internal state.
boolean
renderBlankElement
Library-provided renderer for blank-canvas content.
BlankElementRenderer
renderToolbar
Embedder-drawn host toolbar (the app's own buttons).
(toolbar: HostToolbarState) => ReactNode
resolveAssetUrl
Asset resolution handed through to blank renderers.
(fileName: string) => string | null
sceneRequired
The scene to draw, from host.scenes.
HeadlessScene
step
Drives the step timeline from outside, as a reading view's scroll-spy does. Presentation's keyboard advance still works; the two meet at the same step controller.
number | null

Declared in packages/canvas-sdk/src/host/CanvasDocumentHost.tsx:184.

Last updated