Host
Canvas preview host and inspection boundary.
The Canvas host is the sandbox inspector and operation bridge.
It owns:
- artifact discovery
- artifact rendering
- guard issue display
- block overlay
- block implementation lookup
- prompt disclosure
- floating block prompt handling
- theme preset application
- sidebar navigation
- stylesheet loading
The host understands artifacts through stable metadata:
[data-agent-html-artifact="true"]
[data-agent-html-title]
[data-agent-html-block="true"]
[data-agent-html-block-id]
[data-agent-html-block-title]Instrumented artifact controls may also dispatch agent-html:state-change
events. The host can observe these events without exposing privileged host APIs
to artifact source.
Block prompt requests use artifactEntry + blockId to look up an optional
implementationPath. The lookup route returns implementation metadata only; it
does not return selected TSX source or block implementation source.
Block hover highlighting, block prompt action placement, and the floating
prompt composer are host inspection chrome. They are rendered in the host
overlay, not in artifact source, and consume Canvas foundation tokens through
package-owned host tokens and styles under packages/cli/src/host/styles.
The host owns preview boundary spacing around the artifact. Artifact owns the
readable root width and block rhythm inside that preview. Host surface padding,
toolbar inset, status spacing, sidebar local spacing, and floating prompt
placement are --canvas-* token-backed host classes, not one-off utilities in
host components.
Host visual controls consume Canvas UI primitives and theme resources through local playground aliases:
import { Button } from "#agent-html-playground/components/ui/button"
import { canvasThemePresets } from "#agent-html-playground/theme/presets"The host must not import the app shell, old runtime UI, old render APIs, or a
host-local primitive layer. It must not use @/app/*,
@agent-html-playground/*, or #agent-html-playground/* outside
components/ui/* and theme/*.