truecanvas 0.1.0 → 0.3.0

package/README.md

@@ -4,197 +4,98 @@
 
 **A Figma-like canvas for your real React components. The code is the document.**
 
-[truecanvas.dev](https://truecanvas.dev)
+[![npm](https://img.shields.io/npm/v/truecanvas)](https://www.npmjs.com/package/truecanvas)
+[![CI](https://github.com/Nathandona/truecanvas/actions/workflows/ci.yml/badge.svg)](https://github.com/Nathandona/truecanvas/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue)](https://github.com/Nathandona/truecanvas/blob/main/LICENSE)
+
+Truecanvas renders your actual `.tsx` components on an infinite canvas and writes every change back to plain TSX in your repo. It has no built-in AI: it is agent-first through **MCP**, so Claude Code, Cursor, Codex or any MCP client can read your design system, edit frames and take screenshots while you watch and steer.
 
-Truecanvas renders your actual `.tsx` components on an infinite canvas, lets you compose them visually, and writes every change back to plain TSX in your repo. There is no built-in AI: it is **agent-first through MCP**, so Claude Code, Cursor, Codex or any MCP client can read your design system, edit frames and take screenshots, while you watch and steer in the editor.
+[truecanvas.dev](https://truecanvas.dev)
 
 ![Truecanvas editor](https://raw.githubusercontent.com/Nathandona/truecanvas/main/docs/screenshot.png)
 
-- **Real components, not drawings.** Layers are instances of your components. The props panel is generated from their TypeScript types (`status: "working" | "idle"` becomes a dropdown).
-- **Code is the document.** A canvas is `canvas/<name>.canvas.tsx`. Edits are minimal text patches that keep your formatting, so diffs are reviewable and your editor and the canvas stay in sync both ways.
-- **Agent-first.** 39 MCP tools: read the tree, list components and design tokens, insert JSX, set props, wrap in auto layout, create variant grids, add shader backgrounds, screenshot frames, and see what the user has selected.
-- **Shaders.** Install [`@paper-design/shaders-react`](https://github.com/paper-design/shaders) and its ~30 animated shaders show up in the Components panel, with color pickers, sliders from their documented ranges and one-click presets. Add one behind any frame with "Shader background". Pause all motion with `⇧P` to save battery.
-- **Design on your real pages.** "Add a page from your app" (Pages +) adds any App Router page as a **linked frame**: its layers are the page's own JSX, and editing them edits `page.tsx` (and the layout, for things like the navbar) directly. Right-click → **Explore a copy** to try ideas without touching the page, then **Apply to page** to write the result back as a minimal diff.
-- **Build with plain elements and components.** The Insert menu (＋ in the toolbar, `T` for text) and the Basics in Assets add text, headings, links, buttons, lists, stacks, rows, grids, sections, images and inputs as Tailwind-styled JSX. **New component** creates a component file; select layers and press `Ctrl/⌘+Alt+K` to turn them into a component (imports come along). Right-click any component → **Edit main component** opens it on the `components` page: its layers are the component's own JSX, edits go to its file, and every instance follows. `className={cn("…", className)}` stays merged: only the static classes change.
-- **Pages, layers, assets.** Pages are canvas files you can add, rename, duplicate and delete (with undo). Layers have search, editor-only hide and lock, and custom names stored as `data-name` so your agent sees them too. Assets shows live thumbnails of your components, rendered by your app, plus every shader preset.
-- **Motion.** Play a frame (▶ on its label) to scroll inside it at screen height, so scroll reveals run like on the site, and replay entrance animations anytime. Paused frames and agent screenshots show every animation finished, never half faded. The Motion section adds a scroll reveal (fade up, blur in, scale in…) or a text animation (word by word, letter by letter, typewriter…) to any layer: Truecanvas adds `Reveal` and `TextAnimate` to your components once (plain React, no dependencies) and wraps the layer in them.
-- **Mobile presets.** iPhone, Pixel, Galaxy, iPad and desktop frame sizes, with device chrome (status bar, Dynamic Island, home indicator) and touch emulation in agent screenshots.
-- **Everything is undoable.** Edits from you, your agent and your code editor land in one activity feed with undo/redo.
-- **Light, dark, system.** Per-frame theme (Inherit / Light / Dark) and a canvas-wide theme, applied live without reloading frames.
-- **Lightweight.** No second dev server. Frames render through your existing `next dev`, the editor is a static bundle, and headless Chromium only starts when an agent asks for a screenshot.
-
-> Status: early (v0.1). Next.js App Router + Tailwind first. Linux-first, tested on Fedora 43.
+## Features
+
+- **Real components.** Layers are instances of your components, with a props panel generated from their TypeScript types.
+- **Code is the document.** A canvas is a `.canvas.tsx` file. Edits are minimal patches that keep your formatting, so diffs stay reviewable.
+- **Agent-first.** 44 MCP tools to read the tree, insert JSX, set props and classes, create frames and variants, and take screenshots.
+- **Design on real pages.** Link any Next.js page as a frame: editing its layers edits `page.tsx` and its layouts.
+- **Components and libraries.** Turn a selection into a component, edit main components, install icon sets (Lucide, Tabler, Phosphor, Heroicons, Radix) and add shadcn/ui components.
+- **Git built in.** Per-frame change summaries, branches, commits, pull requests with before/after images, visual compare and comments that travel with branches.
+- **Motion, devices, themes.** Scroll reveals and text animations, iPhone/Pixel/iPad presets with device chrome, and per-frame light and dark themes.
+- **Lightweight.** Frames render through your existing dev server. Headless Chromium only starts when an agent asks for a screenshot.
 
 ## Quick start
 
-**In a Next.js app** (App Router, Next 15.3+):
+In a **Next.js** (App Router, 15.3+) or **Vite + React** (5+) app:
 
 ```bash
 npx truecanvas
 ```
 
-That's it. The first time, it asks once, then adds the dev dependency, wraps `next.config`, adds a `canvas` script, links your homepage as the first canvas and offers to connect your agents. Then it starts your app (if it isn't running) and opens the editor. After that, anyone on the project starts it with `npm run canvas`.
+The first run sets the project up: the dev dependency, the plugin in `next.config` or `vite.config`, a `canvas` script and a first canvas. It then starts your app and opens the editor. After that, use `npm run canvas`.
 
-**A new app:**
+Start a new app instead:
 
 ```bash
-npm create truecanvas@latest my-app
-cd my-app && npm run canvas
+npm create truecanvas@latest my-app            # asks Next.js or Vite
+npm create truecanvas@latest my-app -- --vite
 ```
 
-A Next.js app (TypeScript, Tailwind, App Router) with Truecanvas set up and committed. `pnpm create truecanvas`, `yarn create truecanvas` and `bun create truecanvas` work too.
-
-**Something off?** `npx truecanvas doctor` checks Node, Next, React, Tailwind, the config, agents, screenshots and git, with a one-line fix for each problem.
+Run `npx truecanvas doctor` if anything looks off: it checks every requirement and prints a fix for each problem.
 
-**Prefer an app to a terminal?** `npx truecanvas open` opens the Truecanvas window: your projects, one tab each, "Clone from GitHub" and "New project". `npx truecanvas desktop` adds it to your app launcher (Linux).
-
-### Connect your agent
+## Connect your agent
 
 ```bash
 npx truecanvas connect
 ```
 
-This writes the Truecanvas MCP server into the project's **`.mcp.json`** (and `.cursor/mcp.json` / `.vscode/mcp.json` when the project uses those editors). **Commit it**: everyone who clones the repo gets Truecanvas in Claude Code, Cursor or VS Code with no setup.
+This adds Truecanvas to the project's `.mcp.json`. Commit it and every teammate's agent is connected.
 
 | Client | Config |
 | --- | --- |
-| Claude Code | `.mcp.json` from `truecanvas connect`, or for all your projects: `claude mcp add --scope user --transport http truecanvas http://localhost:4800/mcp` |
-| Cursor | `.cursor/mcp.json` → `{ "mcpServers": { "truecanvas": { "url": "http://localhost:4800/mcp" } } }` |
-| VS Code | `.vscode/mcp.json` → `{ "servers": { "truecanvas": { "type": "http", "url": "http://localhost:4800/mcp" } } }` |
-| Codex | `~/.codex/config.toml` → `[mcp_servers.truecanvas]` `url = "http://localhost:4800/mcp"` |
-| stdio-only clients | `{ "command": "npx", "args": ["truecanvas", "mcp"] }` (bridges to a running server, or starts one) |
-
-Then select something on the canvas and ask: *"Make my selection denser"*, *"Create a dark copy of the Chat frame and check it with a screenshot"*, *"Show every status of SessionRow"*.
-
-## The Truecanvas window
-
-```bash
-npx truecanvas desktop   # adds Truecanvas to your app launcher (GNOME, KDE…)
-npx truecanvas hub       # or start it from a terminal
-```
-
-One window for all your projects, with tabs like a browser. The **Dashboard** lists your recent projects (with their favicons) and the Next.js apps it finds on your computer. You can open a folder, set up Truecanvas in an existing app, or create a new project. Each tab is a project's editor. Opening a tab starts that project's app on free ports, and closing it stops the app and frees the memory (the tab bar shows how much is in use).
-
-The hub serves MCP at the same `http://localhost:4800/mcp`, and your agent works on the project in the active tab. It can also call `list_projects` and `open_project` to switch itself.
-
-## Collaborate
-
-Everything Truecanvas makes is a file in your repo: canvases, comments, linked pages, the motion components they use, and `.mcp.json`. So git is the collaboration layer, and a team works on design the way it works on code.
-
-### The workflow
-
-1. **Set up once, commit it.** `npx truecanvas` in the repo, then commit `package.json`, `canvas/`, `next.config` and `.mcp.json`. Teammates run their usual install and `npm run canvas`; their agents are already connected.
-2. **Design on real pages.** Linked frames are your production pages: editing them edits `page.tsx`. For bigger ideas, right-click → **Explore a copy**, iterate freely (you or your agent), then **Apply to page**. Delete explorations once applied.
-3. **One branch per change.** On `main`, Truecanvas offers to start a branch and brings your edits along.
-4. **Commit from the Git panel.** It lists what changed per frame in plain words and drafts the message.
-5. **Open a pull request** from the panel: the description shows each changed frame, before and after.
-6. **Review in Truecanvas too.** In the Truecanvas window, a project's menu → **Pull requests…** checks out any PR and shows it on the canvas, live, not just as pictures. Leave comments on frames; they're saved in the branch, and agents can read and resolve them.
-7. **Merge.** There's no handoff: the design is already the code.
-
-Designers who don't use a terminal can do all of it from the Truecanvas window: **Clone from GitHub** (clones, installs, sets up), open the project, branch, commit, open and review PRs.
-
-### What's in the Git panel
-
+| Claude Code | `.mcp.json`, or `claude mcp add --scope user --transport http truecanvas http://localhost:4800/mcp` |
+| Cursor | `.cursor/mcp.json`: `{ "mcpServers": { "truecanvas": { "url": "http://localhost:4800/mcp" } } }` |
+| VS Code | `.vscode/mcp.json`: `{ "servers": { "truecanvas": { "type": "http", "url": "http://localhost:4800/mcp" } } }` |
+| Codex | `~/.codex/config.toml`: `[mcp_servers.truecanvas]` with `url = "http://localhost:4800/mcp"` |
+| stdio clients | `{ "command": "npx", "args": ["truecanvas", "mcp"] }` |
 
-- **Git panel** (the branch pill at the top left): what changed, frame by frame, in plain words ("Restyled h1 (+text-orange-600)", "Added a fade-up reveal to p"), with a commit message drafted from it. Changed frames get a dot on the canvas. Design commits include canvases, comments, linked pages and the motion components they use.
-- **Review changes**: a full-screen before/after of each changed frame against the last commit (rendered by your app), plus the code diff.
-- **Branch first**: on `main` with changes, Truecanvas offers to start a branch (named from the page and frames) and carries your edits over.
-- **Pull requests** (GitHub, through the `gh` CLI): push and open a PR in one step. Its description lists the changes per frame, optionally with before/after images stored on a `truecanvas-previews` branch of the same repo. The branch pill then shows the PR's state: open, checks running or failing, approved, merged. No GitHub remote yet? "Publish" creates the repo (private by default).
-- **Compare**: render this page as it was on another branch or commit, side by side or as an overlay with an opacity slider. Changed and new frames are flagged. This works because Truecanvas renders any version of the code.
-- **Comments** (`C`): pin a comment on a frame or layer. Threads are saved in `canvas/<page>.comments.json`, so they travel with branches and show up in pull requests. Agents read them with `list_comments` (including the current source of the commented layer), fix things, and `resolve_comment` with a note.
-
-### Good to know
-
-- **Async, like code.** Collaboration happens through branches and pull requests. Live multiplayer on one canvas isn't supported; the live cursors you see are agents working on your machine.
-- **Merges.** Canvas files are TSX with one block per frame and minimal edits, so two people changing different frames merge cleanly. When both change the same frame, resolve it like any code conflict and Truecanvas re-renders the result.
-- **One agent config for everyone.** `.mcp.json` points at `http://localhost:4800/mcp`, which works whether each person runs `npm run canvas` or the Truecanvas window.
-
-## Linked frames
-
-A new project's first canvas links your homepage. Any page can be linked from Pages + or with the `import_page` tool:
-
-```tsx
-<Frame name="Home" x={0} y={0} width={1440} page="src/app/(marketing)/page.tsx">
-  <MarketingLayout>
-    <HomePage />
-  </MarketingLayout>
-</Frame>
-```
-
-- The frame renders the real page through its layouts. Its layers are the JSX of `page.tsx` and of the layouts around it, and every edit goes to the file that layer lives in, keeping that file's formatting. The frame label shows **Live · page.tsx**.
-- Undo, the Git panel (linked pages count as design files) and Compare (the page is rendered as it was at that commit) all work on the page files.
-- Only plain composition is editable: a page whose component fetches data or has logic before its `return` is shown as one layer, **View only**. Explore a copy to design on it.
-- **Explore a copy** creates `<Frame from="src/app/…/page.tsx">` with the page's JSX inline, in the canvas file. **Apply to page** replaces the page's returned JSX with the exploration's, adds the imports it needs and removes the ones it no longer uses.
-- Page and layout layers get ids like `src/app/page.tsx#12:8`, stamped only in `next dev`. Production builds are untouched.
+Then select something and ask: *"Make my selection denser"* or *"Show every status of SessionRow in a variants frame"*.
 
 ## A canvas file
 
 ```tsx
 "use client";
 import { Canvas, Frame } from "truecanvas";
-import { SessionRow } from "@/components/app/session-row";
+import { SessionRow } from "@/components/session-row";
 
 export default function ChatCanvas() {
   return (
     <Canvas>
       <Frame name="Sessions" x={0} y={0} width={320}>
-        <div className="flex flex-col gap-1 p-3">
-          <SessionRow title="Review release readiness" status="working" elapsed="2m" active />
-          <SessionRow title="Draft the Q4 changelog" status="review" source="slack" elapsed="3h" />
-        </div>
+        <SessionRow title="Review release readiness" status="working" />
       </Frame>
       <Frame name="Sessions dark" x={360} y={0} width={320} theme="dark">
-        {/* … */}
+        <SessionRow title="Draft the changelog" status="review" />
       </Frame>
     </Canvas>
   );
 }
 ```
 
-- `<Frame>`: `name`, `x`, `y`, `width`, optional `height` (omit to hug content), optional `theme` (`"light" | "dark"`, omit to inherit), optional `device` (`"iphone-16"`, `"pixel-9"`, `"ipad-mini"`…), optional `page` (linked frame) or `from` (exploration of a page).
-- Each frame renders in its own iframe at its own width, so media queries, portals and `position: fixed` behave like the real app.
-- Keep props literal (`status="working"`) to make them editable. Expressions such as `{items.map(…)}` still render, but they are read-only in the inspector.
-
-## MCP tools
-
-| Read | Write | Look & show |
-| --- | --- | --- |
-| `list_canvases` | `set_props` · `set_text` · `set_class_name` | `screenshot_frame` |
-| `get_canvas` (compact outline with ids) | `insert_jsx` · `replace_node` | `focus` (select + zoom in the user's editor) |
-| `get_node` (exact TSX source) | `duplicate_nodes` · `delete_nodes` · `move_node` | `undo` · `redo` |
-| `list_components` · `get_component` | `wrap_nodes` (auto layout) | |
-| `get_design_tokens` (Tailwind `@theme`) | `create_frame` · `update_frame` (both take `device`) | |
-| | `create_canvas` · `rename_canvas` · `delete_canvas` | |
-| `get_selection` (what the user selected) | `create_variants_frame` · `add_background` · `apply_preset` | |
-| `list_comments` | `reply_comment` · `resolve_comment` | |
-| | `import_page` (linked by default) · `explore_copy` · `apply_to_page` | |
-| | `add_animation` · `remove_animation` | `play_frame` (play, replay, stop) |
-| | `create_component` · `open_component` | |
-
-Node ids are `line:col` of the JSX tag (`file#line:col` for layers of a linked page) and change after edits. Every write returns the fresh ids of the affected frame. Catalog components are imported automatically.
+`<Frame>` takes `name`, `x`, `y`, `width`, and optionally `height`, `theme`, `device`, `page` (a linked page) or `component` (a main component). Each frame renders in its own iframe at its own width, so media queries, portals and `position: fixed` behave as in your app. Literal props are editable in the inspector; expressions still render but are read-only.
 
 ## How it works
 
-```
-  your browser                          truecanvas dev (Node, 127.0.0.1:4800)
- ┌───────────────────────────┐  REST/SSE ┌──────────────────────────────────┐
- │ editor UI (static bundle) │◀─────────▶│ Workspace: parse → patch → write │◀── MCP ── your agent
- │  ┌──────┐ ┌──────┐        │           │ (Babel + magic-string, undo log) │
- │  │iframe│ │iframe│ frames │           │ Catalog: TS checker → prop types │
- │  └──┬───┘ └──┬───┘        │           └───────────────┬──────────────────┘
- └─────┼────────┼────────────┘                           │ writes canvas/*.canvas.tsx
-       │        └── postMessage: hit-test, rects, theme  ▼
-       └──────────── /truecanvas/[canvas]?frame=… ── your `next dev` (HMR)
-```
+1. A dev-only plugin (Turbopack/webpack loader for Next.js, Vite plugin for Vite) stamps each JSX element with its source position. Production builds are untouched.
+2. Each frame loads `/truecanvas/<canvas>` from your dev server, where a small runtime maps what's under the pointer back to that position.
+3. Your gestures and your agent's MCP calls become the same commands. The server patches the source and your dev server hot-reloads the frame.
 
-1. A Turbopack/webpack loader stamps each JSX element in `*.canvas.tsx` with `data-tc="line:col"` (dev only, same line, no layout impact).
-2. In the iframe, a tiny runtime answers "what's under this point?" by walking React's fiber tree to the nearest stamped element. No wrapper elements, and it works with portals and components that don't forward props.
-3. The editor turns your gestures into commands. The server patches the source text and writes it, and Next's HMR re-renders the frame.
-4. Agents use the same commands over MCP, so whatever you can do, they can do.
+Collaboration goes through git: canvases, comments and linked pages are files, so design changes are branched, reviewed and merged like code. The **Truecanvas window** (`npx truecanvas open`) manages several projects in tabs, clones from GitHub and reviews pull requests on the canvas.
 
 ## Configuration
 
-Optional `truecanvas.config.json` at the project root:
+Everything is optional. Add a `truecanvas.config.json` at the project root:
 
 ```json
 {
@@ -203,63 +104,35 @@ Optional `truecanvas.config.json` at the project root:
   "canvasDir": "canvas",
   "components": ["components/**/*.tsx"],
   "darkMode": { "strategy": "class", "value": "dark" },
-  "libraries": ["@paper-design/shaders-react"],
+  "css": ["/src/index.css"],
   "editor": "code"
 }
 ```
 
-`libraries` adds npm packages to the Components panel (Paper shaders are detected automatically when installed). `darkMode` tells frames how your app switches themes: a class on `<html>` (`strategy: "class"`), or an attribute (`{ "strategy": "attribute", "attribute": "data-theme", "value": "dark", "lightValue": "light" }`).
-
-## Shortcuts
-
-| | |
-| --- | --- |
-| Select / Frame / Hand / Interact | `V` `F` `H` `P` |
-| Duplicate · Delete | `⌘D` · `⌫` |
-| Wrap in auto layout | `⇧A` |
-| Reorder in parent | `↑` `↓` or drag on the canvas |
-| Parent / child | `⇧↵` / `↵` (or `Esc`) |
-| Edit text | double-click or `↵` |
-| Rename layer or page | double-click its name |
-| Copy as JSX | `⌘C` |
-| Pause / play animations | `⇧P` |
-| Comment | `C` |
-| Zoom to fit · selection · 100% | `⇧1` · `⇧2` · `⇧0` |
-| Undo · Redo | `⌘Z` · `⇧⌘Z` |
-
-On Linux, `⌘` is `Ctrl`. Pan with space-drag, middle mouse or two-finger scroll. Zoom with Ctrl+scroll or pinch.
+`darkMode` describes how your app switches themes (a class, or `{ "strategy": "attribute", "attribute": "data-theme", "value": "dark" }`). `css` (Vite only) lists the stylesheets frames load; by default, the ones your entry module imports.
 
 ## Requirements
 
-- Node 20+, Next.js 15.3+ (App Router), React 19. Tailwind is optional but the style controls write Tailwind classes.
-- Linux and macOS. Windows is untested.
-- For screenshots and PR images: Chrome/Chromium, or a Playwright browser in `~/.cache/ms-playwright`. Set `TRUECANVAS_CHROME` to point at one.
-- For pull requests: the GitHub CLI (`gh auth login`).
+- Node 22+ (24 LTS recommended) and React 19
+- Next.js 15.3+ (App Router) or Vite 5+. Tailwind is optional; the style controls write Tailwind classes.
+- macOS, Linux or Windows
+- Screenshots: Chrome, Edge or Chromium, or `npx playwright install chromium-headless-shell`
+- Pull requests: the GitHub CLI (`gh auth login`)
 
-`npx truecanvas doctor` checks all of this.
+Linked page frames need Next.js file-based routes. Everything else works the same in Vite apps.
 
-## Develop
+## Development
 
 ```bash
 pnpm install
-pnpm build                      # library + editor bundle
-pnpm --filter truecanvas test   # engine tests
-pnpm dev                        # builds, then starts the playground app + editor
-pnpm --filter truecanvas dev:editor   # editor with Vite HMR on :4801 (proxies the API)
-pnpm pack:local                 # an installable build, plus the command to add it to a project
+pnpm build                            # library and editor
+pnpm --filter truecanvas test         # tests
+pnpm dev                              # playground app and editor
+pnpm --filter truecanvas dev:editor   # editor with HMR on :4801
 ```
 
-Running the CLI from this checkout (`node packages/truecanvas/dist/cli.js`) installs a tarball of your local build into projects instead of the npm release.
-
-**Releasing:** `pnpm release 0.2.0` bumps `truecanvas` and `create-truecanvas`, commits and tags; `git push --follow-tags` runs the release workflow, which tests and publishes both to npm with provenance (needs an `NPM_TOKEN` secret in the GitHub repo).
-
-## Roadmap
-
-- Multi-frame drag and reparenting by dragging on the canvas
-- Vite + React Router support, then CSS Modules
-- Inline prop editing for `ReactNode` slots
-- Desktop shell (AppImage / Flatpak) once the web version settles
+Releases: `pnpm release <version>` bumps both packages and tags; `git push --follow-tags` publishes to npm from GitHub Actions with provenance.
 
 ## License
 
-MIT
+[MIT](https://github.com/Nathandona/truecanvas/blob/main/LICENSE)

package/dist/catalog-worker.js

@@ -1,6 +1,6 @@
 import {
   analyzeComponents
-} from "./chunk-753N4QRO.js";
+} from "./chunk-WU7NBTJH.js";
 
 // src/core/catalog-worker.ts
 import { parentPort, workerData } from "worker_threads";

package/dist/chunk-C4SATRZT.js

@@ -0,0 +1,196 @@
+// src/core/icons.ts
+import fs from "fs";
+import path from "path";
+import { createRequire } from "module";
+import { fileURLToPath, pathToFileURL } from "url";
+var aliasOf = (name, all, suffix) => name.endsWith(suffix) && all.has(name.slice(0, -suffix.length));
+var ICON_LIBRARIES = [
+  {
+    id: "lucide",
+    label: "Lucide",
+    package: "lucide-react",
+    from: "lucide-react",
+    homepage: "https://lucide.dev/icons",
+    pick: (n, all) => !n.startsWith("Lucide") && !aliasOf(n, all, "Icon") && n !== "Icon"
+  },
+  {
+    id: "tabler",
+    label: "Tabler Icons",
+    package: "@tabler/icons-react",
+    from: "@tabler/icons-react",
+    homepage: "https://tabler.io/icons",
+    pick: (n) => /^Icon[A-Z0-9]/.test(n)
+  },
+  {
+    id: "phosphor",
+    label: "Phosphor",
+    package: "@phosphor-icons/react",
+    from: "@phosphor-icons/react",
+    homepage: "https://phosphoricons.com",
+    pick: (n, all) => !["IconBase", "IconContext", "SSRBase"].includes(n) && !aliasOf(n, all, "Icon")
+  },
+  {
+    id: "heroicons",
+    label: "Heroicons outline",
+    package: "@heroicons/react",
+    from: "@heroicons/react/24/outline",
+    homepage: "https://heroicons.com",
+    pick: (n) => n.endsWith("Icon")
+  },
+  {
+    id: "heroicons-solid",
+    label: "Heroicons solid",
+    package: "@heroicons/react",
+    from: "@heroicons/react/24/solid",
+    homepage: "https://heroicons.com",
+    pick: (n) => n.endsWith("Icon")
+  },
+  {
+    id: "radix",
+    label: "Radix Icons",
+    package: "@radix-ui/react-icons",
+    from: "@radix-ui/react-icons",
+    homepage: "https://www.radix-ui.com/icons",
+    pick: (n) => n.endsWith("Icon")
+  }
+];
+function iconLibrary(id) {
+  return ICON_LIBRARIES.find((l) => l.id === id || l.package === id || l.from === id);
+}
+function installedVersion(root, pkg) {
+  try {
+    const req = createRequire(path.join(root, "package.json"));
+    let dir = path.dirname(req.resolve(pkg));
+    for (let i = 0; i < 6; i++, dir = path.dirname(dir)) {
+      const file = path.join(dir, "package.json");
+      if (fs.existsSync(file)) {
+        const json = JSON.parse(fs.readFileSync(file, "utf8"));
+        if (json.name === pkg) return json.version ?? null;
+      }
+    }
+  } catch {
+  }
+  return null;
+}
+async function renderIconSet(root, id) {
+  const lib = iconLibrary(id);
+  if (!lib) throw new Error(`Unknown icon library "${id}".`);
+  const req = createRequire(path.join(root, "package.json"));
+  const load = async (spec) => import(pathToFileURL(req.resolve(spec)).href);
+  const React = await load("react");
+  const server = await load("react-dom/server");
+  const mod = await load(lib.from);
+  const createElement = React.createElement ?? React.default?.createElement;
+  const renderToStaticMarkup = server.renderToStaticMarkup ?? server.default?.renderToStaticMarkup;
+  const exports = { ...mod.default && typeof mod.default === "object" ? mod.default : {}, ...mod };
+  const all = new Set(Object.keys(exports).filter((n) => /^[A-Z]/.test(n)));
+  const out = [];
+  for (const name of [...all].sort()) {
+    if (!lib.pick(name, all)) continue;
+    const C = exports[name];
+    if (!(typeof C === "function" || typeof C === "object" && C !== null && "$$typeof" in C)) continue;
+    try {
+      const svg = renderToStaticMarkup(createElement(C, {}));
+      if (svg.startsWith("<svg")) out.push({ name, svg: svg.replace(/\s(?:class|data-[\w-]+)="[^"]*"/g, "") });
+    } catch {
+    }
+  }
+  return out;
+}
+function cacheFile(root, id, version) {
+  return path.join(root, "node_modules", ".cache", "truecanvas", "icons", `${id}@${version}.json`);
+}
+var memo = null;
+var inflight = /* @__PURE__ */ new Map();
+async function loadIcons(root, id) {
+  const lib = iconLibrary(id);
+  if (!lib) throw new Error(`Unknown icon library "${id}". Known: ${ICON_LIBRARIES.map((l) => l.id).join(", ")}.`);
+  const version = installedVersion(root, lib.package);
+  if (!version) throw new Error(`${lib.package} isn't installed in this project. Install it first (install_library).`);
+  const file = cacheFile(root, lib.id, version);
+  if (memo?.key === file) return memo.icons;
+  const running = inflight.get(file);
+  if (running) return running;
+  const job = (async () => {
+    let icons = null;
+    try {
+      icons = JSON.parse(fs.readFileSync(file, "utf8"));
+    } catch {
+      icons = await renderInWorker(root, lib.id);
+      fs.mkdirSync(path.dirname(file), { recursive: true });
+      fs.writeFileSync(file, JSON.stringify(icons));
+    }
+    memo = { key: file, icons };
+    return icons;
+  })().finally(() => inflight.delete(file));
+  inflight.set(file, job);
+  return job;
+}
+async function renderInWorker(root, id) {
+  const here = path.dirname(fileURLToPath(import.meta.url));
+  const worker = [path.join(here, "icons-worker.js"), path.join(here, "..", "icons-worker.js")].find((p) => fs.existsSync(p));
+  if (!worker) return renderIconSet(root, id);
+  const { Worker } = await import("worker_threads");
+  return new Promise((resolve, reject) => {
+    const w = new Worker(worker, { workerData: { root, id } });
+    w.once("message", (m) => m.ok ? resolve(m.icons) : reject(new Error(m.error)));
+    w.once("error", reject);
+    w.once("exit", (code) => code !== 0 && reject(new Error(`icons worker exited with ${code}`)));
+  });
+}
+function subsequence(q, name) {
+  let i = 0;
+  let start = -1;
+  for (let j = 0; j < name.length && i < q.length; j++) {
+    if (name[j] !== q[i]) continue;
+    if (i === 0) start = j;
+    i++;
+    if (i === q.length) return { start, span: j - start + 1 };
+  }
+  return null;
+}
+function distance(a, b, max = 2) {
+  if (Math.abs(a.length - b.length) > max) return Infinity;
+  let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
+  for (let i = 1; i <= a.length; i++) {
+    const row = [i];
+    for (let j = 1; j <= b.length; j++) row[j] = Math.min(prev[j] + 1, row[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+    if (Math.min(...row) > max) return Infinity;
+    prev = row;
+  }
+  return prev[b.length];
+}
+function searchIcons(icons, query, limit = 200) {
+  const q = query.trim().toLowerCase().replace(/[\s_-]+/g, "");
+  if (!q) return { total: icons.length, icons: icons.slice(0, limit) };
+  const direct = [];
+  const fuzzy = [];
+  for (const icon of icons) {
+    const name = icon.name.toLowerCase().replace(/^icon(?=[a-z0-9])/, "").replace(/icon$/, "");
+    if (name === q) direct.push({ icon, score: 0 });
+    else if (name.startsWith(q)) direct.push({ icon, score: 1 });
+    else if (q.length > 3 && distance(q, name) <= 2) direct.push({ icon, score: 1 + distance(q, name) / 4 });
+    else if (name.includes(q)) direct.push({ icon, score: 2 });
+    else if (q.length > 2) {
+      const m = subsequence(q, name);
+      if (m && m.span <= q.length * 2) fuzzy.push({ icon, score: (m.start === 0 ? 0 : 1e3) + m.span * 10 + name.length / 100 });
+    }
+  }
+  const byScore = (a, b) => a.score - b.score || a.icon.name.length - b.icon.name.length;
+  direct.sort(byScore);
+  fuzzy.sort(byScore);
+  const ranked = direct.length >= 5 ? direct : [...direct, ...fuzzy];
+  return { total: ranked.length, icons: ranked.slice(0, limit).map((s) => s.icon) };
+}
+function iconLibraries(root) {
+  return ICON_LIBRARIES.map((l) => ({ id: l.id, label: l.label, package: l.package, from: l.from, homepage: l.homepage, version: installedVersion(root, l.package) }));
+}
+
+export {
+  ICON_LIBRARIES,
+  iconLibrary,
+  renderIconSet,
+  loadIcons,
+  searchIcons,
+  iconLibraries
+};

package/dist/chunk-PBKX3SBC.js

@@ -0,0 +1,97 @@
+// src/core/config.ts
+import fs from "fs";
+import path from "path";
+function loadConfig(root, overrides = {}) {
+  let file = {};
+  const configPath = path.join(root, "truecanvas.config.json");
+  if (fs.existsSync(configPath)) file = JSON.parse(fs.readFileSync(configPath, "utf8"));
+  let deps = {};
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf8"));
+    deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  } catch {
+    deps = {};
+  }
+  const framework = file.framework ?? detectFramework(deps);
+  const vite = framework === "vite";
+  const appDir = file.appDir ?? (vite ? fs.existsSync(path.join(root, "src")) ? "src" : "." : fs.existsSync(path.join(root, "src/app")) ? "src/app" : "app");
+  const srcPrefix = appDir === "src" || appDir.startsWith("src/") ? "src/" : "";
+  const knownLibraries = ["@paper-design/shaders-react"].filter((l) => l in deps);
+  return {
+    root,
+    framework,
+    appUrl: vite ? "http://localhost:5173" : "http://localhost:3000",
+    port: 4800,
+    canvasDir: `${srcPrefix}canvas`,
+    appDir,
+    routeDir: vite ? ".truecanvas" : `${appDir}/truecanvas`,
+    components: [`${srcPrefix}components/**/*.tsx`],
+    darkMode: { strategy: "class", value: "dark" },
+    ...file,
+    libraries: [.../* @__PURE__ */ new Set([...knownLibraries, ...file.libraries ?? []])],
+    ...stripUndefined(overrides)
+  };
+}
+function stripUndefined(o) {
+  return Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
+}
+function detectFramework(deps) {
+  return !("next" in deps) && "vite" in deps ? "vite" : "next";
+}
+
+// src/core/ast.ts
+import { parse } from "@babel/parser";
+function parseModule(source) {
+  return parse(source, {
+    sourceType: "module",
+    plugins: ["typescript", "jsx"],
+    errorRecovery: false
+  });
+}
+function idOf(node) {
+  const loc = node.loc.start;
+  return `${loc.line}:${loc.column}`;
+}
+function jsxName(name) {
+  if (name.type === "JSXIdentifier") return name.name;
+  if (name.type === "JSXNamespacedName") return `${name.namespace.name}:${name.name.name}`;
+  return `${jsxName(name.object)}.${name.property.name}`;
+}
+function walk(node, visit, parent = null) {
+  if (!node || typeof node !== "object") return;
+  if (Array.isArray(node)) {
+    for (const child of node) walk(child, visit, parent);
+    return;
+  }
+  const n = node;
+  if (typeof n.type !== "string") return;
+  if (visit(n, parent) === false) return;
+  for (const key of Object.keys(n)) {
+    if (key === "loc" || key === "leadingComments" || key === "trailingComments" || key === "innerComments" || key === "extra") continue;
+    const value = n[key];
+    if (value && typeof value === "object") walk(value, visit, n);
+  }
+}
+function isComponentName(name) {
+  return /^[A-Z]/.test(name) || name.includes(".");
+}
+function rewriteImportSource(statement, from, to) {
+  if (from === to) return statement;
+  for (const q of ['"', "'"]) {
+    const needle = `${q}${from}${q}`;
+    const i = statement.indexOf(needle);
+    if (i >= 0) return `${statement.slice(0, i)}${q}${to}${q}${statement.slice(i + needle.length)}`;
+  }
+  return statement;
+}
+
+export {
+  loadConfig,
+  detectFramework,
+  parseModule,
+  idOf,
+  jsxName,
+  walk,
+  isComponentName,
+  rewriteImportSource
+};