truecanvas 0.1.0

package/dist/runtime/host.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ComponentType } from 'react';
+
+interface DarkModeConfig {
+    strategy: "class" | "attribute";
+    value: string;
+    attribute?: string;
+    lightValue?: string;
+}
+type Theme = "light" | "dark" | "system";
+interface HostProps {
+    canvas: string;
+    frame: string | null;
+    theme: Theme;
+    darkMode: DarkModeConfig;
+    canvases: Record<string, ComponentType>;
+    /** catalog components, for single-component previews (Assets thumbnails) */
+    components?: Record<string, ComponentType<Record<string, unknown>>>;
+}
+/** Renders one frame of one canvas inside the editor's iframe. */
+declare function TruecanvasHost({ canvas, frame, theme: initialTheme, darkMode, canvases, components }: HostProps): react.JSX.Element;
+
+export { type DarkModeConfig, type HostProps, TruecanvasHost };

package/dist/runtime/host.js

@@ -0,0 +1,412 @@
+"use client";
+import {
+  HostContext
+} from "../chunk-J6CJBZO6.js";
+
+// src/runtime/host.tsx
+import { Component, Suspense, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var HIDE_CHROME = `
+html, body { margin: 0 !important; }
+html:not([data-tc-play]), html:not([data-tc-play]) body { overflow: hidden !important; }
+html[data-tc-play] { overflow-y: auto !important; overflow-x: hidden !important; }
+[data-tc-hidden] { display: none !important; }
+nextjs-portal, [data-nextjs-toast], #__next-build-watcher { display: none !important; }
+`;
+function TruecanvasHost({ canvas, frame, theme: initialTheme, darkMode, canvases, components }) {
+  const [theme, setTheme] = useState(initialTheme);
+  const [replay, setReplay] = useState(0);
+  useEffect(() => applyTheme(theme, darkMode), [theme, darkMode]);
+  useEffect(() => startBridge({ frame, setTheme, replay: () => setReplay((n) => n + 1) }), [frame]);
+  useEffect(() => stillForScreenshots(), []);
+  if (canvas === "__preview") return /* @__PURE__ */ jsx(Preview, { components: components ?? {} });
+  const Canvas = canvases[canvas];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: HIDE_CHROME }),
+    !Canvas ? /* @__PURE__ */ jsx(Notice, { title: `Canvas \u201C${canvas}\u201D not found`, body: "It may still be compiling. Truecanvas regenerates the route when canvas files are added." }) : /* @__PURE__ */ jsx(HostContext.Provider, { value: { frame }, children: /* @__PURE__ */ jsx(Boundary, { onError: (m) => post({ type: "tc:error", message: m }), children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Canvas, {}, replay) }) }) })
+  ] });
+}
+function Preview({ components }) {
+  const [query, setQuery] = useState(null);
+  useEffect(() => {
+    const q = new URLSearchParams(window.location.search);
+    let props = {};
+    try {
+      props = JSON.parse(q.get("props") ?? "{}");
+    } catch {
+      props = {};
+    }
+    setQuery({ name: q.get("component") ?? "", props });
+  }, []);
+  if (!query) return null;
+  const Comp = components[query.name];
+  if (!Comp) return /* @__PURE__ */ jsx(Notice, { title: `Component \u201C${query.name}\u201D not found`, body: "The component registry may still be generating." });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: HIDE_CHROME }),
+    /* @__PURE__ */ jsx("div", { "data-tc-frame": "preview", style: { display: "inline-block", padding: 16, minWidth: 40 }, children: /* @__PURE__ */ jsx(Boundary, { onError: () => {
+    }, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Comp, { ...query.props }) }) }) })
+  ] });
+}
+function Notice({ title, body }) {
+  return /* @__PURE__ */ jsxs("div", { "data-tc-frame": "", style: { font: "13px/1.5 system-ui, sans-serif", padding: 24, color: "#b42318", background: "#fff5f5", minHeight: 120 }, children: [
+    /* @__PURE__ */ jsx("strong", { style: { display: "block", marginBottom: 4 }, children: title }),
+    /* @__PURE__ */ jsx("span", { style: { whiteSpace: "pre-wrap", color: "#7a271a" }, children: body })
+  ] });
+}
+var Boundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error.message);
+  }
+  componentDidMount() {
+    post({ type: "tc:error", message: null });
+  }
+  componentDidUpdate(_, prev) {
+    if (prev.error && !this.state.error) post({ type: "tc:error", message: null });
+  }
+  render() {
+    if (this.state.error) return /* @__PURE__ */ jsx(Notice, { title: "This frame threw while rendering", body: this.state.error.message });
+    return this.props.children;
+  }
+};
+function applyTheme(theme, dm) {
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  const set = () => {
+    const dark = theme === "dark" || theme === "system" && media.matches;
+    const el = document.documentElement;
+    if (dm.strategy === "class") el.classList.toggle(dm.value, dark);
+    else el.setAttribute(dm.attribute ?? "data-theme", dark ? dm.value : dm.lightValue ?? "light");
+    el.style.colorScheme = dark ? "dark" : "light";
+  };
+  set();
+  if (theme !== "system") return;
+  media.addEventListener("change", set);
+  return () => media.removeEventListener("change", set);
+}
+var editorOrigin = (() => {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = new URLSearchParams(window.location.search).get("editor");
+    if (!raw) return null;
+    const u = new URL(raw);
+    return ["localhost", "127.0.0.1", "[::1]"].includes(u.hostname) ? u.origin : null;
+  } catch {
+    return null;
+  }
+})();
+function post(msg) {
+  if (window.parent !== window && editorOrigin) window.parent.postMessage(msg, editorOrigin);
+}
+function frameRoot() {
+  return document.querySelector("[data-tc-frame]");
+}
+function tcId(f) {
+  const id = f.memoizedProps?.["data-tc"];
+  return typeof id === "string" ? id : null;
+}
+function currentRoot() {
+  for (const node of [document, document.documentElement, document.body, document.getElementById("__next")]) {
+    if (!node) continue;
+    for (const key in node) {
+      if (key.startsWith("__reactContainer$")) {
+        const f = node[key];
+        return f.stateNode?.current ?? f;
+      }
+    }
+  }
+  return null;
+}
+function indexTree() {
+  const byHost = /* @__PURE__ */ new Map();
+  const byId = /* @__PURE__ */ new Map();
+  const root = currentRoot();
+  const frameEl = frameRoot();
+  if (!root || !frameEl) return { byHost, byId };
+  const stack = [{ f: root, chain: [], inside: false }];
+  while (stack.length) {
+    const { f, chain, inside: parentInside } = stack.pop();
+    const inside = parentInside || f.stateNode === frameEl;
+    let next = chain;
+    if (inside) {
+      const id = tcId(f);
+      if (id && chain[chain.length - 1] !== id) {
+        next = [...chain, id];
+        const list = byId.get(id) ?? [];
+        list.push(f);
+        byId.set(id, list);
+      }
+      if ((f.tag === 5 || f.tag === 6) && next.length) byHost.set(f.stateNode, next);
+    }
+    for (let c = f.child; c; c = c.sibling) stack.push({ f: c, chain: next, inside });
+  }
+  return { byHost, byId };
+}
+function chainAt(el, idx) {
+  for (let n = el; n; n = n.parentNode) {
+    const chain = idx.byHost.get(n);
+    if (chain) return [...chain].reverse();
+  }
+  return [];
+}
+function hostNodes(f, out) {
+  if (f.tag === 5 || f.tag === 6) {
+    out.push(f.stateNode);
+    return;
+  }
+  for (let c = f.child; c; c = c.sibling) hostNodes(c, out);
+}
+function rectOfNode(node) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    const r2 = range.getBoundingClientRect();
+    return r2.width || r2.height ? r2 : null;
+  }
+  const el = node;
+  const r = el.getBoundingClientRect();
+  if (r.width || r.height) return r;
+  let acc = null;
+  for (const child of Array.from(el.childNodes)) acc = union(acc, rectOfNode(child));
+  return acc;
+}
+function union(a, b) {
+  if (!a) return b && { x: b.x, y: b.y, width: b.width, height: b.height };
+  if (!b) return a;
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return { x, y, width: Math.max(a.x + a.width, b.x + b.width) - x, height: Math.max(a.y + a.height, b.y + b.height) - y };
+}
+function rectOf(id, idx) {
+  let acc = null;
+  for (const f of idx.byId.get(id) ?? []) {
+    const nodes = [];
+    hostNodes(f, nodes);
+    for (const n of nodes) acc = union(acc, rectOfNode(n));
+  }
+  return acc && { x: Math.round(acc.x * 10) / 10, y: Math.round(acc.y * 10) / 10, width: Math.round(acc.width * 10) / 10, height: Math.round(acc.height * 10) / 10 };
+}
+var timeOffset = 0;
+var clockPatched = false;
+var settleTimers = [];
+function patchClock() {
+  if (clockPatched) return;
+  clockPatched = true;
+  const realNow = performance.now.bind(performance);
+  performance.now = () => realNow() + timeOffset;
+}
+function settle() {
+  patchClock();
+  timeOffset += 6e4;
+  for (let pass = 0; pass < 4; pass++) {
+    const queue = [...held.values()];
+    held = /* @__PURE__ */ new Map();
+    for (const cb of queue) {
+      try {
+        cb(performance.now());
+      } catch {
+      }
+    }
+  }
+  for (const a of document.getAnimations()) {
+    try {
+      const end = a.effect?.getComputedTiming().endTime;
+      if (typeof end === "number" && Number.isFinite(end)) a.finish();
+      else a.pause();
+    } catch {
+      a.pause();
+    }
+  }
+}
+function scheduleSettle(done, quick = false) {
+  for (const t of settleTimers) clearTimeout(t);
+  settleTimers = (quick ? [0, 250, 700] : [0, 300, 1e3, 2500]).map(
+    (ms, i, all) => setTimeout(() => {
+      settle();
+      if (i === all.length - 1) done?.();
+    }, ms)
+  );
+}
+function stillForScreenshots() {
+  if (new URLSearchParams(window.location.search).get("still") !== "1") return;
+  const w = window;
+  setTimeout(() => {
+    setMotionPaused(true, () => w.__tcStill = true, true);
+  }, 400);
+}
+if (typeof window !== "undefined" && "IntersectionObserver" in window && !window.__tcIO) {
+  window.__tcIO = true;
+  const Native = window.IntersectionObserver;
+  window.IntersectionObserver = class extends Native {
+    constructor(callback, options = {}) {
+      super(callback, options.root == null ? { ...options, root: document } : options);
+    }
+  };
+}
+var remountWatch = null;
+var realRaf = null;
+var realCancel = null;
+var held = /* @__PURE__ */ new Map();
+var heldSeq = -1;
+var PAUSE_STYLE_ID = "tc-pause-motion";
+function raf(cb) {
+  return (realRaf ?? requestAnimationFrame)(cb);
+}
+function setMotionPaused(paused, settled, quick = false) {
+  realRaf ??= window.requestAnimationFrame.bind(window);
+  realCancel ??= window.cancelAnimationFrame.bind(window);
+  if (paused) {
+    window.requestAnimationFrame = (cb) => {
+      const id = heldSeq--;
+      held.set(id, cb);
+      return id;
+    };
+    window.cancelAnimationFrame = (id) => id < 0 ? void held.delete(id) : realCancel(id);
+    for (const a of document.getAnimations()) a.pause();
+    if (!document.getElementById(PAUSE_STYLE_ID)) {
+      const style = document.createElement("style");
+      style.id = PAUSE_STYLE_ID;
+      style.textContent = "*,*::before,*::after{animation-play-state:paused!important}";
+      document.head.appendChild(style);
+    }
+    scheduleSettle(settled, quick);
+    remountWatch?.disconnect();
+    let pending = null;
+    remountWatch = new MutationObserver(() => {
+      if (pending) clearTimeout(pending);
+      pending = setTimeout(() => {
+        pending = null;
+        settle();
+        setTimeout(settle, 300);
+      }, 120);
+    });
+    remountWatch.observe(document.body, { childList: true, subtree: true });
+  } else {
+    remountWatch?.disconnect();
+    remountWatch = null;
+    for (const t of settleTimers) clearTimeout(t);
+    settleTimers = [];
+    window.requestAnimationFrame = realRaf;
+    window.cancelAnimationFrame = realCancel;
+    const queue = [...held.values()];
+    held = /* @__PURE__ */ new Map();
+    for (const cb of queue) realRaf(cb);
+    document.getElementById(PAUSE_STYLE_ID)?.remove();
+    for (const a of document.getAnimations()) if (a.playState === "paused") a.play();
+  }
+}
+var hiddenIds = /* @__PURE__ */ new Set();
+function applyHidden() {
+  const wanted = /* @__PURE__ */ new Set();
+  if (hiddenIds.size) {
+    const idx = indexTree();
+    for (const id of hiddenIds) {
+      for (const f of idx.byId.get(id) ?? []) {
+        const nodes = [];
+        hostNodes(f, nodes);
+        for (const n of nodes) if (n.nodeType === Node.ELEMENT_NODE) wanted.add(n);
+      }
+    }
+  }
+  for (const el of Array.from(document.querySelectorAll("[data-tc-hidden]"))) if (!wanted.has(el)) el.removeAttribute("data-tc-hidden");
+  for (const el of wanted) if (!el.hasAttribute("data-tc-hidden")) el.setAttribute("data-tc-hidden", "");
+}
+var playing = false;
+function startBridge({ frame, setTheme, replay }) {
+  if (window.parent === window || !editorOrigin) return;
+  const onMessage = (e) => {
+    if (e.source !== window.parent || e.origin !== editorOrigin) return;
+    const msg = e.data;
+    switch (msg?.type) {
+      case "tc:hit": {
+        const idx = indexTree();
+        const chain = chainAt(document.elementFromPoint(msg.x, msg.y), idx);
+        const rects = {};
+        for (const id of chain) rects[id] = rectOf(id, idx);
+        post({ type: "tc:hit:res", req: msg.req, chain, rects });
+        break;
+      }
+      case "tc:rects": {
+        const idx = indexTree();
+        const rects = {};
+        for (const id of msg.ids) rects[id] = rectOf(id, idx);
+        post({ type: "tc:rects:res", req: msg.req, rects });
+        break;
+      }
+      case "tc:theme":
+        setTheme(msg.theme);
+        break;
+      case "tc:motion":
+        setMotionPaused(!!msg.paused);
+        break;
+      case "tc:hidden":
+        hiddenIds = new Set(msg.ids);
+        applyHidden();
+        break;
+      case "tc:play":
+        playing = !!msg.on;
+        document.documentElement.toggleAttribute("data-tc-play", playing);
+        document.documentElement.scrollTop = 0;
+        if (playing) replay();
+        break;
+      case "tc:replay":
+        document.documentElement.scrollTop = 0;
+        replay();
+        break;
+    }
+  };
+  window.addEventListener("message", onMessage);
+  let rafId = 0;
+  const notify = () => {
+    if (rafId) return;
+    rafId = raf(() => {
+      rafId = 0;
+      const root2 = frameRoot();
+      post({ type: "tc:layout", frame, height: root2 ? Math.ceil(root2.getBoundingClientRect().height) : 0, ready: !!root2 });
+    });
+  };
+  const ro = new ResizeObserver(notify);
+  const mo = new MutationObserver((records) => {
+    const root2 = frameRoot();
+    if (root2) ro.observe(root2);
+    if (records.every((r) => r.type === "attributes" && r.attributeName === "data-tc-hidden")) return;
+    if (hiddenIds.size) applyHidden();
+    notify();
+  });
+  mo.observe(document.body, { subtree: true, childList: true, attributes: true, characterData: true });
+  const root = frameRoot();
+  if (root) ro.observe(root);
+  document.fonts?.ready.then(notify);
+  notify();
+  const onWheel = (e) => {
+    if (playing && !(e.ctrlKey || e.metaKey)) return;
+    e.preventDefault();
+    post({ type: "tc:wheel", dx: e.deltaX, dy: e.deltaY, mode: e.deltaMode, ctrl: e.ctrlKey || e.metaKey, x: e.clientX, y: e.clientY });
+  };
+  const onKey = (e) => {
+    const t = e.target;
+    if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
+    if (e.key === "Escape" || e.metaKey || e.ctrlKey || /^[vhfp]$/i.test(e.key)) {
+      post({ type: "tc:key", key: e.key, code: e.code, meta: e.metaKey, ctrl: e.ctrlKey, shift: e.shiftKey, alt: e.altKey });
+    }
+  };
+  const onError = (e) => post({ type: "tc:error", message: e.message });
+  window.addEventListener("wheel", onWheel, { passive: false });
+  window.addEventListener("keydown", onKey);
+  window.addEventListener("error", onError);
+  post({ type: "tc:ready", frame });
+  return () => {
+    window.removeEventListener("message", onMessage);
+    window.removeEventListener("wheel", onWheel);
+    window.removeEventListener("keydown", onKey);
+    window.removeEventListener("error", onError);
+    ro.disconnect();
+    mo.disconnect();
+    (realCancel ?? cancelAnimationFrame)(rafId);
+  };
+}
+export {
+  TruecanvasHost
+};

package/dist/runtime/index.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/** Set by the render route: which frame this document is rendering. */
+declare const HostContext: react.Context<{
+    frame: string | null;
+} | null>;
+interface CanvasProps {
+    children?: ReactNode;
+}
+/** Root of a canvas file. Its children are <Frame>s. */
+declare function Canvas({ children }: CanvasProps): react.JSX.Element;
+interface FrameProps {
+    /** Unique name, shown above the frame on the canvas. */
+    name: string;
+    /** Position on the canvas, in px. */
+    x?: number;
+    y?: number;
+    /** Frame width in px: the viewport width your components see. */
+    width: number;
+    /** Fixed height in px. Omit to hug the content. */
+    height?: number;
+    /** Force a theme for this frame. Omit to inherit the canvas theme. */
+    theme?: "light" | "dark";
+    /** Device preset (e.g. "iphone-16"): device chrome in the editor, mobile emulation in screenshots. */
+    device?: string;
+    /** Linked frame: the App Router page it shows (project-relative). Editing its layers edits that page. */
+    page?: string;
+    /** Exploration of this page file: "Apply to page" writes the frame back to it. */
+    from?: string;
+    /** Main component frame, "components/button.tsx#Button": its layers are that component's JSX. */
+    component?: string;
+    children?: ReactNode;
+}
+/**
+ * An artboard. Inside the editor each frame renders in its own iframe at its
+ * own width, so media queries, portals and fixed positioning behave like the
+ * real app. Rendered anywhere else it is just a sized box.
+ */
+declare function Frame({ name, width, height, children }: FrameProps): react.JSX.Element | null;
+
+export { Canvas, type CanvasProps, Frame, type FrameProps, HostContext };

package/dist/runtime/index.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  Canvas,
+  Frame,
+  HostContext
+} from "../chunk-J6CJBZO6.js";
+export {
+  Canvas,
+  Frame,
+  HostContext
+};

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "truecanvas",
+  "version": "0.1.0",
+  "description": "Design with your real React components: a Figma-like canvas for Next.js where layers are your .tsx and agents edit through MCP.",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "truecanvas": "dist/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/runtime/index.d.ts",
+      "default": "./dist/runtime/index.js"
+    },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "default": "./dist/next/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "default": "./dist/core/index.js"
+    },
+    "./host": {
+      "types": "./dist/runtime/host.d.ts",
+      "default": "./dist/runtime/host.js"
+    },
+    "./loader": "./dist/next/loader.cjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsup && vite build --config editor/vite.config.ts",
+    "build:lib": "tsup",
+    "build:editor": "vite build --config editor/vite.config.ts",
+    "dev:editor": "vite --config editor/vite.config.ts",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p editor/tsconfig.json",
+    "test": "node --test test/*.test.mjs",
+    "prepublishOnly": "pnpm build && pnpm test",
+    "prepack": "node ../../scripts/sync-readme.mjs"
+  },
+  "peerDependencies": {
+    "next": ">=15.0",
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@babel/parser": "^7.29.9",
+    "@modelcontextprotocol/sdk": "^1.32.0",
+    "launch-editor": "^2.14.1",
+    "magic-string": "^1.4.2",
+    "playwright-core": "^1.63.0",
+    "prettier": "^3.9.9",
+    "tinyglobby": "^0.2.17",
+    "typescript": "^6.0.3",
+    "zod": "^4.6.5"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.29.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "lucide-react": "^1.52.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsup": "^8.5.1",
+    "vite": "^8.3.2",
+    "zustand": "^5.0.15"
+  },
+  "keywords": [
+    "design",
+    "canvas",
+    "figma",
+    "react",
+    "nextjs",
+    "tailwind",
+    "mcp",
+    "agents",
+    "claude",
+    "cursor",
+    "design-system",
+    "components"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "homepage": "https://truecanvas.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nathandona/truecanvas.git",
+    "directory": "packages/truecanvas"
+  },
+  "bugs": {
+    "url": "https://github.com/Nathandona/truecanvas/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}