truecanvas 0.1.0 → 0.2.0

package/README.md

@@ -12,11 +12,12 @@ Truecanvas renders your actual `.tsx` components on an infinite canvas, lets you
 
 - **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.
+- **Agent-first.** 44 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.
+- **Icons and shadcn/ui.** Assets → Libraries (or ＋ → Icon…) installs an icon set (Lucide, Tabler, Phosphor, Heroicons, Radix) with your package manager, then search and insert icons with their import. The shadcn/ui tab runs the official shadcn CLI to copy components into your project (setting shadcn up first if needed); they show up in Assets with their typed variants like any component. Your agent can do the same through MCP.
 - **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.
@@ -170,6 +171,7 @@ export default function ChatCanvas() {
 | | `import_page` (linked by default) · `explore_copy` · `apply_to_page` | |
 | | `add_animation` · `remove_animation` | `play_frame` (play, replay, stop) |
 | | `create_component` · `open_component` | |
+| `list_libraries` · `search_icons` | `install_library` · `insert_icon` · `add_shadcn_components` | |
 
 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.
 

package/dist/catalog-worker.js

@@ -1,6 +1,6 @@
 import {
   analyzeComponents
-} from "./chunk-753N4QRO.js";
+} from "./chunk-T2TCBSTG.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-753N4QRO.js → chunk-T2TCBSTG.js}

@@ -284,9 +284,20 @@ function importSpecifier(root, canvasFile, componentFile) {
   if (!rel.startsWith(".")) rel = `./${rel}`;
   return rel;
 }
+function resolveAliasPath(root, spec) {
+  const alias = readAlias(root);
+  if (alias && spec.startsWith(alias.prefix)) return path.join(alias.dir, spec.slice(alias.prefix.length));
+  return path.resolve(root, spec);
+}
 var aliasCache = null;
 function readAlias(root) {
-  if (aliasCache?.root === root) return aliasCache.value;
+  const configFile = path.join(root, "tsconfig.json");
+  let key = `${root}\0none`;
+  try {
+    key = `${root}\0${fs.statSync(configFile).mtimeMs}`;
+  } catch {
+  }
+  if (aliasCache?.key === key) return aliasCache.value;
   let value = null;
   try {
     const ts = require2("typescript");
@@ -296,9 +307,9 @@ function readAlias(root) {
       const parsed = ts.parseJsonConfigFileContent(read.config, ts.sys, path.dirname(configPath));
       const paths = parsed.options.paths ?? {};
       const base = parsed.options.pathsBasePath ?? parsed.options.baseUrl ?? path.dirname(configPath);
-      for (const [key, targets] of Object.entries(paths)) {
-        if (key.endsWith("/*") && targets[0]?.endsWith("/*")) {
-          value = { prefix: key.slice(0, -1), dir: path.resolve(base, targets[0].slice(0, -2)) };
+      for (const [k, targets] of Object.entries(paths)) {
+        if (k.endsWith("/*") && targets[0]?.endsWith("/*")) {
+          value = { prefix: k.slice(0, -1), dir: path.resolve(base, targets[0].slice(0, -2)) };
           break;
         }
       }
@@ -306,12 +317,13 @@ function readAlias(root) {
   } catch {
     value = null;
   }
-  aliasCache = { root, value };
+  aliasCache = { key, value };
   return value;
 }
 
 export {
   Catalog,
   analyzeComponents,
-  importSpecifier
+  importSpecifier,
+  resolveAliasPath
 };