truecanvas 0.6.7 → 0.6.8

package/dist/cli.js

@@ -146,8 +146,9 @@ async function createSnapshot(ws, shots, canvas, opts = {}) {
     used.add(slug);
     fs.writeFileSync(path.join(dir, "frames", `${slug}.html`), await freeze(raw, assets));
     fs.writeFileSync(path.join(dir, "frames", `${slug}.png`), raw.png);
+    if (raw.thumb) fs.writeFileSync(path.join(dir, "frames", `${slug}.thumb.jpg`), raw.thumb);
     const route = f.page && ws.config.framework === "next" ? routeOf(ws.config, f.page) : void 0;
-    out.push({ name: f.frameName, x: f.x, y: f.y, width: raw.width, height: f.height ?? raw.height, theme: f.theme, device: f.device, html: `frames/${slug}.html`, image: `frames/${slug}.png`, ...route ? { route } : {} });
+    out.push({ name: f.frameName, x: f.x, y: f.y, width: raw.width, height: f.height ?? raw.height, theme: f.theme, device: f.device, html: `frames/${slug}.html`, image: `frames/${slug}.png`, ...raw.thumb ? { thumb: `frames/${slug}.thumb.jpg` } : {}, ...route ? { route } : {} });
   }
   const manifest = {
     format: 1,
@@ -340,7 +341,7 @@ async function publishSnapshot(site, dir, manifest, opts = {}) {
   const known = new Set((await request(site, "GET", `${base}/assets`)).assets);
   const files = [];
   for (const name of fs2.readdirSync(path2.join(dir, "assets"))) if (!known.has(name)) files.push({ local: path2.join(dir, "assets", name), remote: `assets/${name}` });
-  for (const f of manifest.frames) for (const p of [f.html, f.image]) files.push({ local: path2.join(dir, p), remote: `${manifest.id}/${p}` });
+  for (const f of manifest.frames) for (const p of [f.html, f.image, ...f.thumb && can.includes("thumbs") ? [f.thumb] : []]) files.push({ local: path2.join(dir, p), remote: `${manifest.id}/${p}` });
   const skipped = [];
   let uploaded = 0;
   const fitting = files.filter((f) => {
@@ -408,7 +409,7 @@ async function publishSnapshot(site, dir, manifest, opts = {}) {
     access = after.access ?? access;
   }
   const live = opts.live ? "url" in opts.live ? { url: opts.live.url } : { files: true } : void 0;
-  const done = await request(site, "POST", `${base}/versions`, { id: manifest.id, createdAt: manifest.createdAt, frames: manifest.frames, live });
+  const done = await request(site, "POST", `${base}/versions`, { id: manifest.id, createdAt: manifest.createdAt, frames: can.includes("thumbs") ? manifest.frames : manifest.frames.map(({ thumb: _, ...f }) => f), live });
   const invited = opts.invite?.length ? await inviteTo(site, share.slug, opts.invite) : [];
   return { url: done.url, version: manifest.id, versions: done.versions, uploaded, skipped, password, live: done.live ?? null, access, invited };
 }
@@ -1761,7 +1762,8 @@ var Screenshotter = class {
       }
       const png = await page.screenshot({ type: "png", fullPage: true });
       const viewport = page.viewportSize();
-      return { url: raw.url, html: raw.html, css: raw.css, canvases, png, width: viewport.width, height: raw.height, requests: [...requests] };
+      const thumb = await page.screenshot({ type: "jpeg", quality: 72, clip: { x: 0, y: 0, width: viewport.width, height: Math.min(raw.height || viewport.height, Math.round(viewport.width * 0.75)) } }).catch(() => void 0);
+      return { url: raw.url, html: raw.html, css: raw.css, canvases, png, thumb, width: viewport.width, height: raw.height, requests: [...requests] };
     });
   }
 };

package/dist/share/index.d.ts

@@ -22,6 +22,8 @@ interface ShareFrame {
     /** paths inside the snapshot */
     html: string;
     image: string;
+    /** a small preview of the frame's top (links page, emails) */
+    thumb?: string;
     /** a frame linked to a page: its URL in the app (e.g. "/pricing"), so the live site can show it */
     route?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "truecanvas",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "Design with your real React components: a Figma-like canvas for Next.js and Vite where layers are your .tsx and agents edit through MCP.",
   "license": "MIT",
   "type": "module",