Components / Canvas

Canvas

The app canvas column: the bg-secondary work surface that fills the space beside the chat pane and hosts the stacking CanvasSheets.

import { Canvas, DOT_GRID_STYLE } from '@layers/ui/canvas'

Rendered stock

House rules

• Canvas renders the app main landmark (a real <main>); exactly one per page. DOT_GRID_STYLE is exported for surfaces that cannot nest a second main, like the marketing product demo and the render below.
• The dot grid is opt-in via style={DOT_GRID_STYLE}; it draws 8px-spaced dots from the --dot-grid token, so it adapts to light and dark themes.
• CanvasSheets render as direct children and stack as siblings; the canvas itself stays chrome-free.
• Semantic tokens only: the surface is bg-secondary, never a raw neutral.

See also

• Layouts: canvas and sheets