# AI_GUIDE — App 26 · Pulse Events

**Goal:** rebuild this app exactly, or build a new app in the same style.

## Files
| File | Role |
|---|---|
| `App 26 - Pulse Events.html` | Fonts + all CSS (`:root` tokens, then one block per screen) |
| `src/screens.jsx` | Every screen component, plus `App()` which places the phones on the stage |
| `../shared/kit.jsx` / `kit.css` | `Stage`, `Phone`, `StatusBar`, `I` (icons), `Img`, `useToast`, `usePersist`, `BRAND` |
| `tokens.json` | All CSS variables + the screen list |
| `../../refs/r26-events.png` | Original reference. Compare against it |

Load order: React → ReactDOM → Babel → `kit.jsx` → `screens.jsx`.

## Rebuild exactly
1. Copy the HTML `<head>` (font link + `<style>`) and the two kit files.
2. Recreate each screen listed in DESIGN_SYSTEM §4, using only the classes in §3.
3. Position phones as in `App()` (absolute left/top on the 1024×768 stage).
4. Check side by side with the reference: colours come from `:root`, and the text scale from the CSS.

## Clone the style
- Keep the frame tokens, the radius scale and the component shapes.
- Change only the accent tokens and the content arrays in `screens.jsx`.
- Put the brand name through `BRAND`, only in a slot that already holds text and in the same style.

## Porting
- **SwiftUI:** pills are `Capsule()`, cards `RoundedRectangle(cornerRadius:)`. Use the colours from `tokens.json`, and `.ultraThinMaterial` wherever the CSS uses `backdrop-filter`.
- **React Native:** use the same values in `StyleSheet`. Glass needs `expo-blur`, and SVG charts need `react-native-svg`.
- **Web:** use the files as they are.

## Checklist
- [ ] Colours match `:root`.
- [ ] Single-line labels stay single-line (`white-space:nowrap`).
- [ ] Every selectable element has a visible selected state.
- [ ] "Cyborg Design" appears only in the documented slot.
- [ ] Photos are licensed; there are no third-party logos.