# PulsePoint v2 — AI Implementation Context
> This file is the complete, self-contained context an AI coding assistant needs to
> implement PulsePoint v2 in ANY backend. PulsePoint is a backend-agnostic reactive
> engine for the browser: the server renders plain HTML, and a single minified
> runtime (`pp-reactive-v2.min.js`) adds fine-grained reactivity on top of it.
> There is no build step, no virtual DOM, and no JSX.
## What PulsePoint is
- One JavaScript ES module. The import exposes the global `pp` object used
inside component scripts. Start it ONE of two ways:
- `pp.mount()`: idempotent; bootstraps components, cloaks `` until
hydrated, and enables SPA navigation. Use it when you own the whole document.
- `ComponentInit.bootstrap()` (imported from the module): mounts components
only. Not idempotent, so call it exactly once. Use it for static pages and
widgets. Never pair it with a `` cloak.
- Components are regions of server-rendered HTML marked with a
`pp-component="unique_id"` attribute. Each component may own one plain
`
```
Serve the file from any static path. The runtime has zero dependencies. Place
the module script in `` or at the end of ``. Module scripts are
deferred, so the component templates exist when `PP.bootstrap()` runs.
Put each hand-authored reactive region inside a ``
boundary (below). Its content stays inert until `PP.bootstrap()` materializes
it, preventing raw bindings from flashing and component scripts from running
before PulsePoint starts. While a template materializes, bound `src`, `srcset`,
`sizes`, `imagesrcset`, `imagesizes` and `poster` are parked as `pp-inert-*`
attributes until the first render; never author `pp-inert-*`.
Version: this file documents PulsePoint **v2** (`pp-reactive-v2.min.js`), the
stable, maintained runtime. The file is updated in place at
https://pulse-point-cdn.pages.dev/pp-reactive-v2.min.js (no numbered point
releases); self-host a copy to pin a build.
## Component model
A component is an element with `pp-component`:
```html
Count: {count}
```
Rules:
- The `pp-component` id must be unique per page. The server generates it (any
scheme works: `counter_1`, `page_products`, a hash…).
- One root element per component is the DEFAULT shape; the `
```
### Composition roots (a component whose root is another component)
The React pattern of a wrapper component returning `…` as its
root. Rendered shape, three parts:
1. A **host element** carrying the composition component's `pp-component` id
and `style="display: contents"` (it adds nothing to layout). Attributes on
the host become the composition component's `pp.props`.
2. The child component's boundary as the host's **only element child**.
Attributes on it become the child's `pp.props`.
3. The composition component's own `
{armed ? "Are you sure?" : label}
```
**Ref forwarding**: a host carrying `pp-ref="{someRef}"` plus
`pp-ref-forward="true"` resolves the ref through the `display: contents`
chain to the first concrete component root (PulsePoint's `forwardRef`
equivalent). Each hop must present exactly one child component root.
### Fragments (multi-root components)
A component whose top level is a run of siblings is framed with a comment
pair instead of a wrapper element:
```html
Total: {count}
```
- At mount the runtime converts each pair into a live
`` element carrying the id; identity,
scope, events and re-renders anchor to it. Fragments nest (a close marker
pairs with the nearest unclosed open).
- Comments are legal everywhere, so this shape survives ``, `