Annotations and Scenarios

Annotations and Scenarios

Snapshot file

prototype/notes.snapshot.js contains exactly one assignment:

window.__PROTOTYPE_NOTES__ = { ...JSON... };

Minimum contract enforced by runtime/server/snapshot.mjs (validateSnapshot):

• schemaVersion: 2
• header.title string
• scenarios: non-empty object keyed by id, or non-empty array of { id, state? }; state must be an object if present
• cards[]: each has string id and target with a non-empty anchor or a selector string; optional when object (scalar / array / nested object values, depth ≤ 8)

The server rewrites the file atomically with a canonical header comment. The screenshot CLI parses it as JSON only and refuses executable code.

Runtime

• state.js exposes the single PrototypeViewers state source; the active scenario syncs to ?scene=<id>.
• model.js evaluates card when against state (pure matching) and scenario metadata.
• viewer.js renders the right-rail cards and SVG connectors.
• display-mode.js: ?product-only=1 adds pa-product-only and hides annotations, Mark, collapse control and interaction badges. collapsed=1 collapses the rail.

Business adapters in prototype.js restore DOM state for each scenario. Details: product-annotations.md, generation contract §3–§5.

Editing cards is done in the Author Tools Notes editor.