# Fancy UI

> A suite of React + Laravel UI primitives engineered for **Human+ UX** — applications where humans and AI agents share the same UI surface and trade control fluidly. Every component is both an *authoring surface* (terse, JSON-friendly props humans and agents compose) and an *inhabited surface* (agents drive it over MCP tool bridges with stable handles — never DOM scraping). Public showcase version 0.2.

Fancy UI ships JS/TS packages on npm and PHP packages on Packagist. The showcase is a Laravel + Inertia + React app that consumes them like any external app would. Agents inhabit running apps through `@particle-academy/agent-integrations` — a per-session MCP server with one bridge per surface (whiteboard, flow, sheets, slides, charts, code, screens, scene).

## Packages

- [react-fancy](http://ui.particle.academy/packages/react-fancy): Tailwind v4 + React component library — about 50 primitives.
- [fancy-whiteboard](http://ui.particle.academy/packages/fancy-whiteboard): Transport-agnostic collaborative board — sticky notes, freeform pen, connectors, presence cursors.
- [fancy-artboard](http://ui.particle.academy/packages/fancy-artboard): Figma-style design canvas for Human+ UX — a pan/zoom board of image / HTML / live-JSX frames grouped into sections, with focus mode, drag-reorder, sticky notes, and PNG/HTML export.
- [fancy-flow](http://ui.particle.academy/packages/fancy-flow): Workflow editor + runner on top of React Flow — six node kits, topological executor, headless engine, and a FlowRunnerUx flow→UX bridge.
- [fancy-sheets](http://ui.particle.academy/packages/fancy-sheets): Full spreadsheet with formulas, multi-sheet workbooks, clipboard, CSV import/export.
- [fancy-slides](http://ui.particle.academy/packages/fancy-slides): Presentation editor + web viewer — Google-Slides-style deck authoring with JSON-friendly schema, full keyboard viewer, and an agent bridge.
- [fancy-code](http://ui.particle.academy/packages/fancy-code): Lightweight embedded code editor — custom engine, no Monaco / CodeMirror / Shiki.
- [fancy-term](http://ui.particle.academy/packages/fancy-term): Human+ Terminal — a controlled, themeable <Terminal> over xterm.js with hooks and an MCP-bridgeable surface agents read + drive.
- [fancy-diff](http://ui.particle.academy/packages/fancy-diff): Human+ side-by-side document diff with hunk acceptance — a client-side, zero-dep diff engine or a git unified-diff datasource.
- [fancy-pixel](http://ui.particle.academy/packages/fancy-pixel): Embeddable Showcase verification badge + liveness/collection beacon — Badge / Mark / Beacon styles, placed or floating, Shadow-DOM isolated. Drops in via a <script> tag or mountPixel().
- [fancy-echarts](http://ui.particle.academy/packages/fancy-echarts): Typed React wrapper around Apache ECharts — every chart type from a single <EChart> component, lazy module registration, four built-in themes.
- [fancy-screens](http://ui.particle.academy/packages/fancy-screens): Multi-screen application shell with cross-screen agent presence.
- [fancy-3d](http://ui.particle.academy/packages/fancy-3d): Engine-agnostic 3D core — Scene types, the <Canvas> surface, and a DOM/CSS-3D renderer. WebGL engines (Babylon, three.js, …) ship as sibling fancy-3d-* packages.
- [fancy-3d-babylon](http://ui.particle.academy/packages/fancy-3d-babylon): Babylon.js adapter for fancy-3d — WebGL renderer + the React components (Stage, Monitor, Card3D, Screen) that mount onto a Babylon Scene.
- [fancy-3d-three](http://ui.particle.academy/packages/fancy-3d-three): three.js adapter for fancy-3d — WebGL renderer + the React components (Stage, Monitor, Card3D) that mount onto a three.js Scene. Mirrors fancy-3d-babylon, three.js underneath.
- [agent-integrations](http://ui.particle.academy/packages/agent-integrations): MCP-driven agent presence — micro-MCP server, bridges, presence layer, share relay.
- [fancy-inertia](http://ui.particle.academy/packages/fancy-inertia): Inertia.js bridge — schema-driven pages, useFancyForm(), SSR boundaries.

## Companion PHP packages

- particle-academy/holy-sheet: PHP 8.2+ xlsx writer for agentic document creation. Headless — top-level Agent write/describe/lint API, optional Laravel adapter.
- particle-academy/dark-slide: PHP 8.2+ pptx writer/reader for agentic deck creation — markdown headings, highlighted code, tables, gradients, high-fidelity reader. Sister to holy-sheet.
- particle-academy/laravel-catalog: Stripe catalog (Products + Prices) via a facade API. Used by the sandbox for the demo storefront.
- particle-academy/laravel-fms: Feature Management System — gate/policy/config/registry-driven feature access. Pairs with laravel-catalog for entitlement-based UI.
- particle-academy/laravel-fun-lab: Analytics-driven gamification — XP, achievements, prizes, and leaderboards. Powers the sandbox's engagement economy.
- particle-academy/fancy-heuristics: End-user optimization, not search-engine optimization — human + agent interaction analytics for Laravel: event ingestion, focus heatmaps, and session/actor rollups, plus Fancy Pixel verification. Server side of fancy-pixel / fancy-heuristics-js.
- particle-academy/fancy-seo: Server-rendered SEO + crawlability for Laravel + Inertia — per-route meta / Open Graph / Twitter / JSON-LD on the first byte, dynamic sitemap.xml / robots.txt / llms.txt, and per-page Markdown. The PHP baseline that pairs with @particle-academy/fancy-inertia's <Seo>.
- @particle-academy/fancy-auto-common: Shared Human+ primitives — AgentActivity events, presence, undo stacks, and effect helpers. Low-level plumbing reused across the kit; usually installed transitively.
- mcp-relay-client: Super-lite, single-file MCP client (bash / Python / TS / Go) for connecting an agent to a session-based relay — drive any agent-integrations-hosted app (e.g. the Agent Playground) from your terminal. Download one file, point it at a session URL.
- @particle-academy/fancy-query: Server-state for Inertia + Echo — a thin TanStack Query wrapper with Inertia hydration and Echo-driven cache invalidation. Hooks only, no UI.
- @particle-academy/dark-slide: Node/TS port of dark-slide — pptx writer/reader for agentic decks, isomorphic (browser or Node). Headless Agent API; no UI.
- @particle-academy/holy-sheet: Node/TS port of holy-sheet — xlsx writer/reader + formula linter, isomorphic. Headless Agent API; no UI.
- @particle-academy/fancy-app-update: Framework-agnostic "a new version is available — refresh" detector for any React app — custom API, version compare, or zero-config ETag polling. No Inertia/PHP; self-contained prompt. fancy-inertia adds an Inertia-409 default on top.
- @particle-academy/fancy-term-host: Headless Node terminal backend for fancy-term — owns the PTYs (node-pty peer) and the T1/T2/T3 persistence engine (snapshot+replay, retained PTYs, detached pty-host) behind four injected ports. No UI.
- @particle-academy/fancy-heuristics-js: Browser collector for Fancy Heuristics — clicks, scroll, time-on-page, and mouse-movement focus heatmaps for humans and agents; sendBeacon batching. Headless.
- @particle-academy/docs-mcp: MCP docs server — serves the Fancy UI documentation to agents over MCP, so an assistant can answer questions and pull usage straight from the source.
- fancy-cli: Source-vendoring CLI — `npx fancy-cli add <component>` copies component source from the registry into your project (the shadcn-style own-the-source path).

## Key pages

- [Packages](http://ui.particle.academy/packages): the full suite index.
- [Docs](http://ui.particle.academy/docs): installation, the Human+ UX contract, MCP bridges.
- [Agent Playground](http://ui.particle.academy/agent-playground): connect your own agent over MCP and watch it drive the UI live.
- [Starter Kits](http://ui.particle.academy/starter-kits): production-ready apps built on the kit.

## Optional

- [Full index](http://ui.particle.academy/llms-full.txt): every package + component + the Human+ UX contract in one file.