# Repository Guidelines

## Project Structure & Module Organization
- Root: static demos and data.
  - `index.php`: FlowGrid (Vue 2) POC; parses inline DSL and renders lanes/steps.
  - `ex4.html`: Cytoscape-based AWS VPC diagrams that fetch `graph.json`.
  - `graph.json`: Example cloud inventory used by `ex3.html`/`ex4.html`.
- Add new demos as `exN.html` near existing files; keep shared data in JSON.

## Build, Test, and Development Commands
- View live site at https://phowell.org/flow/index.php (or other filename)
  - Working php server
- Basic JS/HTML sanity (manual): open in Chrome/Firefox and watch the console for errors; ensure `graph.json` loads without CORS issues.

## Coding Style & Naming Conventions
- Indentation: 2 spaces for HTML/CSS/JS.
- JavaScript: camelCase variables/functions; semicolons; small, pure helpers.
- CSS: use CSS custom properties (`--kebab-case`) and utility-like classes.
- HTML: double-quoted attributes; lightweight, semantic elements.
- File naming: demos `ex<N>.html`; data `*.json`; avoid frameworks/build steps.

## Testing Guidelines
- No formal test runner configured. Validate by:
  - Loading each page via `php -S` and exercising UI (toggles, search, layout buttons).
  - For `graph.json` changes, verify nodes/edges render and controls respond.
  - Optional lint: `php -l index.php` (syntax check) and run an HTML/JS linter locally if available.

## Commit & Pull Request Guidelines
- Commits: imperative, scoped summaries (e.g., `feat: add RDS labels`, `fix: guard null css vars`).
- PRs: include a concise description, screenshots/GIFs of the UI, and reference issues.
- Keep diffs minimal; explain data/schema changes to `graph.json` and their UI impact.

## Security & Configuration Tips
- Serve over `http://` locally (not `file://`) so `fetch('graph.json')` works.
- Do not commit credentials or sensitive infrastructure details in `graph.json`.
- External CDNs are used (Vue, Cytoscape, ELK); vendor locally only if required.