figmatk 0.3.8 → 0.3.10

package/.claude-plugin/marketplace.json

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

package/.claude-plugin/plugin.json

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

package/lib/rasterizer/svg-builder.mjs

@@ -500,6 +500,217 @@ function renderLine(deck, node) {
   return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${stroke}" stroke-width="${sw}"/>`;
 }
 
+/**
+ * VECTOR — decode fillGeometry/strokeGeometry commandsBlob binary to SVG paths.
+ *
+ * Blob format: [cmdByte][float32LE params...]
+ *   0x01 = moveTo (x, y)
+ *   0x02 = lineTo (x, y)
+ *   0x04 = cubicTo (c1x, c1y, c2x, c2y, x, y)
+ *   0x00 = close
+ *
+ * Coordinates are in node-size space. The full affine transform matrix is used
+ * to position, scale, and rotate the vector in the slide.
+ */
+function renderVector(deck, node) {
+  const t = node.transform ?? {};
+  const m00 = t.m00 ?? 1, m01 = t.m01 ?? 0, m02 = t.m02 ?? 0;
+  const m10 = t.m10 ?? 0, m11 = t.m11 ?? 1, m12 = t.m12 ?? 0;
+  const blobs = deck.message?.blobs;
+  const parts = [];
+
+  // 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) 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 — 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) 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"/>`);
+    }
+  }
+
+  if (!parts.length) return renderPlaceholder(deck, node);
+  return `<g transform="matrix(${m00},${m10},${m01},${m11},${m02},${m12})">\n${parts.join('\n')}\n</g>`;
+}
+
+/** Decode a commandsBlob index into an SVG path d-string. */
+function decodeCmdBlob(blobs, blobIdx) {
+  if (blobIdx == null || !blobs?.[blobIdx]) return null;
+  const raw = blobs[blobIdx].bytes ?? blobs[blobIdx];
+  if (!raw) return null;
+
+  // Convert indexed object to Buffer if needed
+  let buf;
+  if (Buffer.isBuffer(raw) || raw instanceof Uint8Array) {
+    buf = Buffer.from(raw);
+  } else {
+    const len = Object.keys(raw).length;
+    buf = Buffer.alloc(len);
+    for (let i = 0; i < len; i++) buf[i] = raw[i];
+  }
+
+  const cmds = [];
+  let off = 0;
+  while (off < buf.length) {
+    const cmd = buf[off++];
+    if (cmd === 0x01) { // moveTo
+      const x = buf.readFloatLE(off); off += 4;
+      const y = buf.readFloatLE(off); off += 4;
+      cmds.push(`M${f(x)},${f(y)}`);
+    } else if (cmd === 0x02) { // lineTo
+      const x = buf.readFloatLE(off); off += 4;
+      const y = buf.readFloatLE(off); off += 4;
+      cmds.push(`L${f(x)},${f(y)}`);
+    } else if (cmd === 0x04) { // cubicTo
+      const c1x = buf.readFloatLE(off); off += 4;
+      const c1y = buf.readFloatLE(off); off += 4;
+      const c2x = buf.readFloatLE(off); off += 4;
+      const c2y = buf.readFloatLE(off); off += 4;
+      const x = buf.readFloatLE(off); off += 4;
+      const y = buf.readFloatLE(off); off += 4;
+      cmds.push(`C${f(c1x)},${f(c1y)} ${f(c2x)},${f(c2y)} ${f(x)},${f(y)}`);
+    } else if (cmd === 0x00) { // close
+      cmds.push('Z');
+    } else {
+      break; // unknown command — stop
+    }
+  }
+  return cmds.length ? cmds.join('') : null;
+}
+
+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);
@@ -580,7 +791,7 @@ const RENDERERS = {
   GROUP:             renderGroup,
   SECTION:           renderGroup,
   BOOLEAN_OPERATION: renderGroup,
-  VECTOR:            renderPlaceholder,
+  VECTOR:            renderVector,
   LINE:              renderLine,
   STAR:              renderPlaceholder,
   POLYGON:           renderPlaceholder,
@@ -590,7 +801,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.3",
+  "version": "0.3.10",
   "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.8",
+  "version": "0.3.10",
   "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.8"
+  version: "0.3.10"
 ---
 
 # 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.8"
+  version: "0.3.10"
 ---
 
 # Figma Template Builder