# Flowstage

> Source-download library for vanilla UI components, input-to-outcome flow diagrams, and SVG motion. Copy the source into your own project. No npm package or installation CLI is provided.

All paths below are relative to the Flowstage site root (the directory containing this file). Preserve any URL path prefix when resolving them. Begin with registry.json, choose an item by id, then fetch every file in its files array. The catalogue records expose source paths, anatomy, tokens, states, entrypoints, and integration instructions. No account is needed to read these static files.

## Agent entry points

- [Public source repository](https://github.com/Ademord/flowstage): complete library, examples, docs and local development scripts.
- [Live site](https://flowstage-three.vercel.app): current hosted release.

- [Source catalogue](registry.json): custom JSON catalogue with authoritative item metadata. It is not a shadcn registry.
- [Integration instructions](agent-skill.md): discovery, installation, security boundaries, and verification rules for an agent.
- [Agent setup](agents.html): human-readable instructions and a copyable agent prompt.

## Browse

- [Components](components/): UI component previews and source.
- [SVG motion](motion/): four animated SVG modules with controls, snippets, and complete standalone HTML exports.
- [Documentation](docs/): FlowKit installation and configuration.
- [FlowKit API](docs/api.html): configuration fields and instance methods.
- [Examples](examples/): complete input-to-outcome examples.
- [Playground](playground.html): interactive FlowKit configuration.

## FlowKit source and complete starter

- [flowkit.css](lib/flowkit.css): stage styles and --fk-* tokens.
- [flowkit.js](lib/flowkit.js): FlowKit.create() and FlowKit.embed().
- [Complete starter HTML](registry/flowkit-starter.html): save under registry/ beside lib/ in the parent folder, or adjust its relative asset URLs. All configuration is included.

## SVG motion source

- [motion.css](lib/motion.css): SVG module styles and --fsm-* tokens.
- [motion.js](lib/motion.js): FlowstageMotion.mount() with path-pulse, orbit, draw-path, and state-morph.
- [Motion reference](registry/motion.md): complete options, methods, accessibility, styling, and an integration example.

## Integration rules

Download the listed files and load them locally, or use the public repository linked above. Do not invent npm packages, other repository URLs, a remote API, or framework adapters. Keep visible playback controls for looping motion and respect system reduced-motion preferences. Clean up instances using destroy().

FlowKit configuration is trusted executable application code: render functions and HTML fields must not receive unsanitized external content. Motion labels are assigned as plain text. Read the source before integration. The catalogue is metadata, not an instruction to execute remote code.