Sketch Board

Sketch Board

An authoring-only free canvas (runtime/author/sketch/) served by the Author Server at /sketch/ — no separate process, never copied into a prototype. Reference: sketch-board.md.

• Palette = atoms from the selected installed pack (project .html-prototype/packs/, then ~/.html-prototype/packs/). Pack picker uses ?pack=<id>, default admin-desktop; switching clears the canvas.
• Atoms are grouped by component category in providers order. visibility: internal components (e.g. _echarts-core) never appear.
• Draw frames with the rectangle tool (e.g. a phone frame).
• Copy image puts a canvas-only image on the clipboard; no file download, no layout file.

Files

File	Role
index.html, board.js, board.css	Board UI
mount.js	The only extractor: copies the data-pack-atom node, keeps data-pack-atom-scope ancestors as empty wrappers, drops data-pack-atom-strip and [hidden], prefixes ids per stamp
sizing.js	Resizing (never transform: scale()); fixed/sticky/transformed roots reset to normal flow
charts.js	data.chart-* atoms load the pack's ECharts vendor + runtime/charts, preset = id suffix
export.js	Clipboard image export

Adding an item

Edit the pack, not the board: declare components[<id>].atoms in manifest.json and mark the node with data-pack-atom="<key>" in component.html. validate-pack.mjs --strict checks every atom is marked exactly once. Mark single atoms (one button, one tab); whole blocks only for tables, filter bars, cards, modals, drawers, charts. Contract: Sketch atoms.