figmatk 0.3.9 → 0.3.11

package/.claude-plugin/marketplace.json

@@ -13,7 +13,7 @@
     {
       "name": "figmatk",
       "description": "Swiss Army Knife for Figma Files (.deck)",
-      "version": "0.3.9",
+      "version": "0.3.11",
       "author": {
         "name": "FigmaTK Contributors"
       },

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "figmatk",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Create and edit Figma Slides .deck files programmatically — no Figma API required",
   "author": {
     "name": "FigmaTK Contributors"

package/lib/rasterizer/svg-builder.mjs

@@ -519,27 +519,47 @@ function renderVector(deck, node) {
   const blobs = deck.message?.blobs;
   const parts = [];
 
-  // Fill paths
+  // Fill paths — combine all fillGeometry entries into one compound path so
+  // overlapping sub-paths interact via fill-rule (e.g. QR codes, letter cutouts).
   const fillColor = resolveFill(getFillPaints(node));
   if (fillColor && node.fillGeometry?.length && blobs) {
+    const segments = [];
+    let hasEvenOdd = false;
     for (const geo of node.fillGeometry) {
       const d = decodeCmdBlob(blobs, geo.commandsBlob);
-      if (!d) continue;
-      const rule = geo.windingRule === 'EVENODD' ? ' fill-rule="evenodd"' : '';
-      parts.push(`<path d="${d}" fill="${fillColor}"${rule}/>`);
+      if (d) segments.push(d);
+      if (geo.windingRule === 'EVENODD') hasEvenOdd = true;
+    }
+    if (segments.length) {
+      // Multiple sub-paths: use evenodd so overlapping regions create holes
+      const rule = (segments.length > 1 || hasEvenOdd) ? ' fill-rule="evenodd"' : '';
+      parts.push(`<path d="${segments.join('')}" fill="${fillColor}"${rule}/>`);
     }
   }
 
-  // Stroke paths
+  // Stroke paths — also compound (stroke outlines are pre-expanded fill shapes)
   const strokeColor = resolveFill(node.strokePaints);
   const sw = node.strokeWeight ?? 0;
   if (strokeColor && sw > 0 && node.strokeGeometry?.length && blobs) {
+    const segments = [];
+    let hasEvenOdd = false;
     for (const geo of node.strokeGeometry) {
       const d = decodeCmdBlob(blobs, geo.commandsBlob);
-      if (!d) continue;
-      // strokeGeometry encodes the stroke outline as a fill shape
-      const rule = geo.windingRule === 'EVENODD' ? ' fill-rule="evenodd"' : '';
-      parts.push(`<path d="${d}" fill="${strokeColor}"${rule}/>`);
+      if (d) segments.push(d);
+      if (geo.windingRule === 'EVENODD') hasEvenOdd = true;
+    }
+    if (segments.length) {
+      const rule = (segments.length > 1 || hasEvenOdd) ? ' fill-rule="evenodd"' : '';
+      parts.push(`<path d="${segments.join('')}" fill="${strokeColor}"${rule}/>`);
+    }
+  }
+
+  // Fallback: decode vectorNetworkBlob when no pre-computed fill/strokeGeometry
+  if (!parts.length && node.vectorData?.vectorNetworkBlob != null && blobs) {
+    const vnbD = decodeVnb(blobs, node.vectorData.vectorNetworkBlob, node.vectorData.normalizedSize, node.size);
+    if (vnbD) {
+      const color = fillColor ?? resolveFill(node.strokePaints) ?? '#000000';
+      parts.push(`<path d="${vnbD}" fill="${color}" fill-rule="evenodd"/>`);
     }
   }
 
@@ -594,6 +614,103 @@ function decodeCmdBlob(blobs, blobIdx) {
 
 function f(v) { return +v.toFixed(2); }
 
+/**
+ * Decode vectorNetworkBlob into an SVG path d-string.
+ * VNB stores vertices, segments (lines/cubics), and regions (loops of segment indices).
+ * Coordinates are in normalizedSize space and must be scaled to nodeSize.
+ *
+ * Binary layout (all little-endian):
+ *   Header: numVertices(u32), numSegments(u32), numRegions(u32), numStyles(u32)
+ *   Vertices: x(f32), y(f32), handleMirroring(u32)  — 12 bytes each
+ *   Segments: startVertex(u32), tangentStartX(f32), tangentStartY(f32),
+ *             endVertex(u32), tangentEndX(f32), tangentEndY(f32), segType(u32) — 28 bytes each
+ *   Regions: numLoops(u32), per loop: segCount(u32) + segIndices(u32[segCount]), windingRule(u32)
+ */
+function decodeVnb(blobs, blobIdx, normalizedSize, nodeSize) {
+  const buf = blobToBuffer(blobs, blobIdx);
+  if (!buf || buf.length < 16) return null;
+
+  const scaleX = (nodeSize?.x ?? 1) / (normalizedSize?.x ?? 1);
+  const scaleY = (nodeSize?.y ?? 1) / (normalizedSize?.y ?? 1);
+
+  let off = 0;
+  const numVerts = buf.readUInt32LE(off); off += 4;
+  const numSegs  = buf.readUInt32LE(off); off += 4;
+  const numRegions = buf.readUInt32LE(off); off += 4;
+  off += 4; // numStyles
+
+  // Parse vertices
+  const verts = [];
+  for (let i = 0; i < numVerts; i++) {
+    const x = buf.readFloatLE(off) * scaleX; off += 4;
+    const y = buf.readFloatLE(off) * scaleY; off += 4;
+    off += 4; // handleMirroring
+    verts.push({ x, y });
+  }
+
+  // Parse segments
+  const segs = [];
+  for (let i = 0; i < numSegs; i++) {
+    const sv = buf.readUInt32LE(off); off += 4;
+    const tsx = buf.readFloatLE(off) * scaleX; off += 4;
+    const tsy = buf.readFloatLE(off) * scaleY; off += 4;
+    const ev = buf.readUInt32LE(off); off += 4;
+    const tex = buf.readFloatLE(off) * scaleX; off += 4;
+    const tey = buf.readFloatLE(off) * scaleY; off += 4;
+    const type = buf.readUInt32LE(off); off += 4;
+    segs.push({ sv, tsx, tsy, ev, tex, tey, type });
+  }
+
+  // Parse regions → build SVG paths
+  const cmds = [];
+  for (let r = 0; r < numRegions; r++) {
+    if (off + 4 > buf.length) break;
+    const numLoops = buf.readUInt32LE(off); off += 4;
+    for (let loop = 0; loop < numLoops; loop++) {
+      if (off + 4 > buf.length) break;
+      const segCount = buf.readUInt32LE(off); off += 4;
+      for (let s = 0; s < segCount; s++) {
+        if (off + 4 > buf.length) break;
+        const segIdx = buf.readUInt32LE(off); off += 4;
+        if (segIdx >= segs.length) continue;
+        const seg = segs[segIdx];
+        const start = verts[seg.sv];
+        const end = verts[seg.ev];
+        if (!start || !end) continue;
+
+        if (s === 0) cmds.push(`M${f(start.x)},${f(start.y)}`);
+
+        if (seg.type === 0) {
+          // Line
+          cmds.push(`L${f(end.x)},${f(end.y)}`);
+        } else {
+          // Cubic bezier — tangents are relative to their vertex
+          const c1x = start.x + seg.tsx;
+          const c1y = start.y + seg.tsy;
+          const c2x = end.x + seg.tex;
+          const c2y = end.y + seg.tey;
+          cmds.push(`C${f(c1x)},${f(c1y)} ${f(c2x)},${f(c2y)} ${f(end.x)},${f(end.y)}`);
+        }
+      }
+      cmds.push('Z');
+    }
+    off += 4; // windingRule
+  }
+
+  return cmds.length ? cmds.join('') : null;
+}
+
+function blobToBuffer(blobs, blobIdx) {
+  if (blobIdx == null || !blobs?.[blobIdx]) return null;
+  const raw = blobs[blobIdx].bytes ?? blobs[blobIdx];
+  if (!raw) return null;
+  if (Buffer.isBuffer(raw) || raw instanceof Uint8Array) return Buffer.from(raw);
+  const len = Object.keys(raw).length;
+  const buf = Buffer.alloc(len);
+  for (let i = 0; i < len; i++) buf[i] = raw[i];
+  return buf;
+}
+
 function renderPlaceholder(deck, node) {
   const { x, y } = pos(node);
   const { w, h } = size(node);
@@ -653,13 +770,19 @@ function renderInstance(deck, node) {
     }
   }
 
+  // Render SYMBOL's own fill as background (e.g. dark-blue cover slide)
+  const { w, h } = size(symbol.size ? symbol : node);
+  const rx = Math.min(symbol.cornerRadius ?? 0, w / 2, h / 2);
+  let { defs, bg } = renderRoundedRectFillStack(deck, getFillPaints(symbol), w, h, rx);
+
   const inner = childrenSvg(deck, symbol);
 
   // Restore mutations
   for (const fn of restores) fn();
 
-  if (!inner) return '';
-  return `<g transform="translate(${x},${y})">\n${inner}\n</g>`;
+  const parts = [defs, bg, inner].filter(Boolean).join('\n');
+  if (!parts) return '';
+  return `<g transform="translate(${x},${y})">\n${parts}\n</g>`;
 }
 
 // ── Dispatcher ────────────────────────────────────────────────────────────────
@@ -684,7 +807,12 @@ const RENDERERS = {
 function renderNode(deck, node) {
   if (node.phase === 'REMOVED') return '';
   const fn = RENDERERS[node.type] ?? renderPlaceholder;
-  return fn(deck, node);
+  let svg = fn(deck, node);
+  const op = node.opacity;
+  if (svg && op != null && op < 1) {
+    svg = `<g opacity="${op}">${svg}</g>`;
+  }
+  return svg;
 }
 
 function childrenSvg(deck, node) {

package/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": "0.2",
   "name": "figmatk",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Create and edit Figma Slides .deck files programmatically - no Figma API required",
   "author": {
     "name": "FigmaTK Contributors"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figmatk",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Figma Toolkit — Swiss-army knife CLI for Figma .deck and .fig files",
   "type": "module",
   "bin": {

package/skills/figma-slides-creator/SKILL.md

@@ -6,7 +6,7 @@ description: >
   clone or remove slides, or produce a .deck file for Figma Slides.
   Powered by FigmaTK under the hood.
 metadata:
-  version: "0.3.9"
+  version: "0.3.11"
 ---
 
 # FigmaTK Skill

package/skills/figma-template-builder/SKILL.md

@@ -6,7 +6,7 @@ description: >
   template from an existing deck, define reusable layouts, mark editable
   text/image slots, or prepare a draft template for later instantiation.
 metadata:
-  version: "0.3.9"
+  version: "0.3.11"
 ---
 
 # Figma Template Builder