Reference

Canvas keeps artifact code, local resources, and host code separated.

Artifact Imports

Artifact and example code may consume:

• @agent-html/react
• ../components/ui/*
• ../components/* rich components
• ../hooks/*
• ../lib/*
• ../types/*
• artifact-local ./data/*
• ../assets/*
• artifact-owned URL-addressed files through artifactPublicUrlFactory
• shared URL-addressed files through sharedPublicUrl
• semantic token classes
• Canvas public composition classes such as canvas-stack-md, canvas-content-panel, canvas-grid-gap, and canvas-text-body
• layout behavior utilities such as flex, grid, min-w-0, overflow-hidden, flex-wrap, shrink-0, and truncate

Use static className strings for static artifact styling. When class names depend on state, selected rows, disabled controls, data values, or an incoming className prop, import cn from ../lib/cn or ../../lib/cn instead of importing clsx directly.

Artifact and example code must not consume:

• retired app shell source
• packages/cli/src/host/*
• old runtime UI
• old render APIs
• #agent-html-playground/*
• @agent-html-playground/*
• ../public/*
• raw palette classes such as bg-blue-500
• arbitrary value classes, decorative gradients, oversized typography, oversized radius, heavy shadows, custom fonts, or manual tracking
• raw common primitives when a local UI primitive exists
• className or style on Artifact or Block

Host Imports

Host code may consume:

• host-local composition modules
• CLI prompt and API helpers
• #agent-html-playground/components/ui/*
• #agent-html-playground/theme/*

Host code must not consume:

• @/app/*
• retired app shell source
• old runtime UI
• old render APIs
• @agent-html-playground/*
• #agent-html-playground/* outside #agent-html-playground/components/ui/* and #agent-html-playground/theme/*
• a host-local visual primitive layer that bypasses Canvas UI primitives

Host code may define host-only adapters over Canvas UI primitives in packages/cli/src/host/ui/*. These adapters are consumption contracts for host chrome; they are not artifact resources and must not become a replacement primitive library.

Review Checks

Confirm that Artifact keeps the token-configured readable root container, Block stays protocol-only, agent-html/components/ui/* remains the visual primitive layer, agent-html/styles/index.css remains the CSS runtime entrypoint, agent-html/styles/materials/* remains the material value layer, agent-html/styles/materials/tailwind.css remains the Tailwind token mapping, agent-html/styles/base.css remains the base selection layer, font and radius values stay explicit tokens, public files stay URL-addressed, and block content layout stays explicit in artifact composition.