openfig-cli 0.3.12 → 0.3.14

package/README.md

@@ -1,4 +1,6 @@
-<img src="assets/logo.webp" alt="OpenFig" width="320" />
+<img src="assets/logo.jpg" alt="OpenFig" width="320" />
+
+<a href="https://www.buymeacoffee.com/coenenrob9"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="40" /></a>
 
 Open tools for Figma files.
 

package/bin/cli.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * OpenFig — Open-source tools for Figma .deck / .fig files.
+ * OpenFig — Open-source tools for Figma file parsing and rendering.
  *
  * Usage: openfig <command> [args...]
  *
@@ -36,7 +36,7 @@ const arg2 = process.argv[2];
 let command, rawArgs;
 
 if (!arg2 || arg2 === '--help' || arg2 === '-h') {
-  console.log(`OpenFig — Open-source tools for Figma .deck / .fig files\n`);
+  console.log(`OpenFig — Open-source tools for Figma file parsing and rendering\n`);
   console.log('Usage: openfig <command> [args...]\n');
   console.log('Commands:');
   console.log('  export         Export slides as images (PNG/JPG/WEBP)');

package/bin/commands/clone-slide.mjs

@@ -5,14 +5,14 @@
  *        --template <slideId|name> --name <newName>
  *        [--after <slideId>] [--set key=value ...] [--set-image key=path ...]
  */
-import { FigDeck } from '../lib/core/fig-deck.mjs';
-import { nid, parseId, positionChar } from '../lib/core/node-helpers.mjs';
-import { imageOv } from '../lib/core/image-helpers.mjs';
-import { deepClone } from '../lib/core/deep-clone.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
+import { nid, parseId, positionChar } from '../../lib/core/node-helpers.mjs';
+import { imageOv } from '../../lib/core/image-helpers.mjs';
+import { deepClone } from '../../lib/core/deep-clone.mjs';
 import { readFileSync, copyFileSync, existsSync, mkdirSync } from 'fs';
 import { createHash } from 'crypto';
 import { join, resolve } from 'path';
-import { getImageDimensions, generateThumbnail } from '../lib/core/image-utils.mjs';
+import { getImageDimensions, generateThumbnail } from '../../lib/core/image-utils.mjs';
 
 function sha1Hex(buf) {
   return createHash('sha1').update(buf).digest('hex');

package/bin/commands/export.mjs

@@ -16,9 +16,9 @@
 import { existsSync, mkdirSync, rmSync, writeFileSync } from 'fs';
 import { join, parse, resolve } from 'path';
 import { createInterface } from 'readline';
-import { FigDeck } from '../lib/core/fig-deck.mjs';
-import { renderDeck, registerFontDir } from '../lib/rasterizer/deck-rasterizer.mjs';
-import { resolveFonts } from '../lib/rasterizer/font-resolver.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
+import { renderDeck, registerFontDir } from '../../lib/rasterizer/deck-rasterizer.mjs';
+import { resolveFonts } from '../../lib/rasterizer/font-resolver.mjs';
 
 async function confirmOverwrite(dir) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });

package/bin/commands/insert-image.mjs

@@ -3,13 +3,13 @@
  *
  * Usage: node cli.mjs insert-image <file.deck> -o <output.deck> --slide <id|name> --key <overrideKey> --image <path.png> [--thumb <thumb.png>]
  */
-import { FigDeck } from '../lib/core/fig-deck.mjs';
-import { nid, parseId } from '../lib/core/node-helpers.mjs';
-import { imageOv } from '../lib/core/image-helpers.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
+import { nid, parseId } from '../../lib/core/node-helpers.mjs';
+import { imageOv } from '../../lib/core/image-helpers.mjs';
 import { readFileSync, copyFileSync, existsSync, mkdirSync } from 'fs';
 import { createHash } from 'crypto';
 import { join, resolve } from 'path';
-import { getImageDimensions, generateThumbnail } from '../lib/core/image-utils.mjs';
+import { getImageDimensions, generateThumbnail } from '../../lib/core/image-utils.mjs';
 
 function sha1Hex(buf) {
   return createHash('sha1').update(buf).digest('hex');

package/bin/commands/inspect.mjs

@@ -3,8 +3,8 @@
  *
  * Usage: node cli.mjs inspect <file.deck|file.fig> [--depth N] [--type TYPE] [--json]
  */
-import { FigDeck } from '../lib/core/fig-deck.mjs';
-import { nid } from '../lib/core/node-helpers.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
+import { nid } from '../../lib/core/node-helpers.mjs';
 
 export async function run(args, flags) {
   const file = args[0];

package/bin/commands/list-overrides.mjs

@@ -3,8 +3,8 @@
  *
  * Usage: node cli.mjs list-overrides <file.deck> [--symbol NAME|ID]
  */
-import { FigDeck } from '../lib/core/fig-deck.mjs';
-import { nid } from '../lib/core/node-helpers.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
+import { nid } from '../../lib/core/node-helpers.mjs';
 
 export async function run(args, flags) {
   const file = args[0];

package/bin/commands/list-text.mjs

@@ -3,9 +3,9 @@
  *
  * Usage: node cli.mjs list-text <file.deck>
  */
-import { FigDeck } from '../lib/core/fig-deck.mjs';
-import { nid } from '../lib/core/node-helpers.mjs';
-import { hashToHex } from '../lib/core/image-helpers.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
+import { nid } from '../../lib/core/node-helpers.mjs';
+import { hashToHex } from '../../lib/core/image-helpers.mjs';
 
 export async function run(args) {
   const file = args[0];

package/bin/commands/remove-slide.mjs

@@ -3,8 +3,8 @@
  *
  * Usage: node cli.mjs remove-slide <file.deck> -o <output.deck> --slide <id|name> [--slide ...]
  */
-import { FigDeck } from '../lib/core/fig-deck.mjs';
-import { nid, removeNode } from '../lib/core/node-helpers.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
+import { nid, removeNode } from '../../lib/core/node-helpers.mjs';
 
 export async function run(args, flags) {
   const file = args[0];

package/bin/commands/roundtrip.mjs

@@ -3,7 +3,7 @@
  *
  * Usage: node cli.mjs roundtrip <file.deck> -o <output.deck>
  */
-import { FigDeck } from '../lib/core/fig-deck.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
 
 export async function run(args, flags) {
   const file = args[0];

package/bin/commands/update-text.mjs

@@ -3,8 +3,8 @@
  *
  * Usage: node cli.mjs update-text <file.deck> -o <output.deck> --slide <id|name> --set key=value [--set key=value ...]
  */
-import { FigDeck } from '../lib/core/fig-deck.mjs';
-import { nid, parseId } from '../lib/core/node-helpers.mjs';
+import { FigDeck } from '../../lib/core/fig-deck.mjs';
+import { nid, parseId } from '../../lib/core/node-helpers.mjs';
 
 export async function run(args, flags) {
   const file = args[0];

package/lib/rasterizer/svg-builder.mjs

@@ -265,6 +265,105 @@ function esc(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
+/**
+ * Detect stale derivedTextData: text was edited outside Figma but glyph layout
+ * wasn't recomputed. Returns true when the layout clearly doesn't match the text.
+ */
+function isStaleLayout(chars, baselines, glyphs) {
+  if (!chars) return false;
+  const len = chars.length;
+
+  if (baselines?.length) {
+    const lastEnd = baselines[baselines.length - 1]?.endCharacter;
+    // baselines endCharacter should match chars length (±1 for trailing newline)
+    if (lastEnd != null && Math.abs(lastEnd - len) > 1) return true;
+  }
+
+  if (glyphs?.length) {
+    const maxFirstChar = glyphs.reduce((max, g) =>
+      Math.max(max, g.firstCharacter ?? 0), 0);
+    if (maxFirstChar >= len) return true;        // glyphs point beyond new text
+    if (len > maxFirstChar + 3) return true;     // new text much longer than glyph coverage
+  }
+
+  return false;
+}
+
+/**
+ * Fallback text layout for stale derivedTextData.
+ * Emits line-level <tspan> elements and lets resvg handle per-glyph layout.
+ * Uses original baseline metrics (line height, ascent, position) where available
+ * since those are style-dependent, not content-dependent.
+ * Auto-scales font size down when new text is longer than the original.
+ * Returns { tspans, fontSize } so the caller can use the adjusted size.
+ */
+function fallbackTextTspans(dispChars, fontSize, node) {
+  const baselines = node.derivedTextData?.baselines;
+  const lines = dispChars.split('\n');
+  // Drop trailing empty line from trailing newline
+  if (lines.length > 1 && !lines[lines.length - 1]) lines.pop();
+
+  // Use original baseline metrics for spacing (style property, still valid)
+  let lineHeightPx = baselines?.[0]?.lineHeight ?? fontSize * 1.2;
+  let lineAscent   = baselines?.[0]?.lineAscent ?? fontSize * 0.8;
+
+  // Auto-fit: scale font size down when new text is longer than original.
+  // Uses character count ratio per line as a proxy for width ratio.
+  const nodeW = node.size?.x ?? 1920;
+  const nodeH = node.size?.y ?? 0;
+  let scale = 1;
+  if (baselines?.length) {
+    const maxOrigCharsPerLine = Math.max(...baselines.map(b =>
+      Math.max(0, (b.endCharacter ?? 0) - (b.firstCharacter ?? 0))));
+    const maxNewCharsPerLine = Math.max(...lines.map(l => l.length));
+
+    // Scale down if widest new line has more chars than widest original line
+    if (maxNewCharsPerLine > maxOrigCharsPerLine && maxOrigCharsPerLine > 0) {
+      scale = Math.min(scale, maxOrigCharsPerLine / maxNewCharsPerLine);
+    }
+
+    // Also scale down if more lines than original (would overflow vertically)
+    if (lines.length > baselines.length && nodeH > 0) {
+      scale = Math.min(scale, baselines.length / lines.length);
+    }
+
+    scale = Math.max(scale, 0.15); // don't shrink below 15%
+  }
+
+  const adjFontSize    = fontSize * scale;
+  const adjLineHeight  = lineHeightPx * scale;
+  const adjLineAscent  = lineAscent * scale;
+
+  // Horizontal alignment → text-anchor + x position
+  const align  = node.textAlignHorizontal ?? 'LEFT';
+  const anchor = align === 'CENTER' ? 'middle' : align === 'RIGHT' ? 'end' : 'start';
+  const anchorX = align === 'CENTER' ? nodeW / 2 : align === 'RIGHT' ? nodeW : 0;
+
+  // Use first baseline position if available (preserves Figma's padding/offset),
+  // otherwise compute from vertical alignment
+  let startX, startY;
+  if (baselines?.[0]?.position) {
+    startX = align === 'LEFT' ? baselines[0].position.x : anchorX;
+    // Scale startY relative to the baseline position for auto-fit
+    startY = baselines[0].position.y * scale;
+  } else {
+    startX = anchorX;
+    const totalH = lines.length * adjLineHeight;
+    const nodeH  = node.size?.y ?? totalH;
+    const vAlign = node.textAlignVertical ?? 'TOP';
+    startY = vAlign === 'CENTER' ? (nodeH - totalH) / 2 + adjLineAscent
+           : vAlign === 'BOTTOM' ? nodeH - totalH + adjLineAscent
+           : adjLineAscent;
+  }
+
+  const tspans = lines.map((line, i) => {
+    const y = startY + i * adjLineHeight;
+    return `<tspan x="${startX}" y="${y.toFixed(2)}" text-anchor="${anchor}">${esc(line) || ' '}</tspan>`;
+  }).join('');
+
+  return { tspans, fontSize: adjFontSize };
+}
+
 function styleAttrsFromFontName(fontName, derivedFontWeight) {
   const style = fontName?.style ?? 'Regular';
   const weight = derivedFontWeight
@@ -300,12 +399,12 @@ function renderText(deck, node) {
                   : node.textCase === 'LOWER' ? chars.toLowerCase()
                   : chars;
 
-  const fontSize   = node.derivedTextData?.glyphs?.[0]?.fontSize ?? node.fontSize ?? 24;
+  let   fontSize   = node.derivedTextData?.glyphs?.[0]?.fontSize ?? node.fontSize ?? 24;
   const fontFamily = node.fontName?.family ?? 'Inter';
   const fill       = resolveFill(getFillPaints(node)) ?? '#000000';
   // Letter spacing: PERCENT is % of fontSize, PIXELS is absolute
   const ls = node.letterSpacing;
-  const letterSpacingPx = !ls ? 0
+  let   letterSpacingPx = !ls ? 0
     : ls.units === 'PERCENT' ? (ls.value / 100) * fontSize
     : ls.units === 'PIXELS'  ? ls.value
     : 0;
@@ -313,7 +412,8 @@ function renderText(deck, node) {
   const glyphs     = node.derivedTextData?.glyphs;
   const styleIds   = node.textData?.characterStyleIDs;
   const styleTable = node.textData?.styleOverrideTable;
-  if (!glyphs?.length) {
+  const stale = isStaleLayout(chars, baselines, glyphs);
+  if (!glyphs?.length && !stale) {
     throw new Error(`TEXT ${node.name ?? nid(node)} is missing derived glyph layout`);
   }
 
@@ -354,7 +454,15 @@ function renderText(deck, node) {
   }
 
   let tspans = '';
-  if (baselines?.length && glyphs?.length && styleIds?.length) {
+  if (stale || !glyphs?.length) {
+    // Fallback: derivedTextData is stale (text was edited outside Figma).
+    // Emit line-level tspans and let resvg handle per-glyph layout.
+    const origFontSize = fontSize;
+    const fb = fallbackTextTspans(dispChars, fontSize, node);
+    tspans = fb.tspans;
+    fontSize = fb.fontSize;                              // auto-fit may have scaled down
+    if (origFontSize > 0) letterSpacingPx *= fontSize / origFontSize;
+  } else if (baselines?.length && glyphs?.length && styleIds?.length) {
     // Mixed-style: group consecutive glyphs by styleID, emit per-glyph with ligature merge
     for (const b of baselines) {
       const lineGlyphs = glyphs.filter(g => g.firstCharacter >= b.firstCharacter && g.firstCharacter < b.endCharacter);
@@ -587,7 +695,8 @@ function renderShapeWithText(deck, node) {
   const truncationStartIndex = derivedText.truncationStartIndex >= 0
     ? derivedText.truncationStartIndex
     : null;
-  if (!glyphs?.length) {
+  const swtStale = isStaleLayout(chars, derivedText.baselines, glyphs);
+  if (!glyphs?.length && !swtStale) {
     throw new Error(`SHAPE_WITH_TEXT ${node.name ?? nid(node)} is missing derived glyph layout`);
   }
 
@@ -602,36 +711,53 @@ function renderShapeWithText(deck, node) {
   const textFill     = resolveFill(textOv.fillPaints) ?? '#000000';
 
   let tspan;
-  function esc(s) { return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
-
-  const spans = [];
-  for (let i = 0; i < glyphs.length; i++) {
-    const g = glyphs[i];
-    if (truncationStartIndex != null && g.firstCharacter != null && g.firstCharacter >= truncationStartIndex) continue;
-
-    let slice = '';
-    let stopAfter = false;
-    if (g.firstCharacter == null) {
-      if (truncationStartIndex == null) continue;
-      slice = '…';
-      stopAfter = true;
-    } else {
-      let nextChar = null;
-      for (let j = i + 1; j < glyphs.length; j++) {
-        const fc = glyphs[j].firstCharacter;
-        if (fc != null && fc > g.firstCharacter) {
-          nextChar = fc;
-          break;
+
+  if (swtStale || !glyphs?.length) {
+    // Fallback: stale layout — center text in shape using textBox offset
+    const swtBaselines = derivedText.baselines;
+    const lineHeightPx = swtBaselines?.[0]?.lineHeight ?? fontSize * 1.2;
+    const lineAscent   = swtBaselines?.[0]?.lineAscent ?? fontSize * 0.8;
+    const lines = dispChars.split('\n').filter((l, i, a) => i < a.length - 1 || l);
+    const totalH = lines.length * lineHeightPx;
+    // Center vertically in the text box area
+    const textBoxH = textDerived.size?.y ?? h;
+    const startY = textBoxY + (textBoxH - totalH) / 2 + lineAscent;
+    const textBoxW = textDerived.size?.x ?? w;
+    const cx = textBoxX + textBoxW / 2;
+    tspan = lines.map((line, i) => {
+      const y = startY + i * lineHeightPx;
+      return `<tspan x="${cx}" y="${y.toFixed(2)}" text-anchor="middle">${esc(line) || ' '}</tspan>`;
+    }).join('');
+  } else {
+    const spans = [];
+    for (let i = 0; i < glyphs.length; i++) {
+      const g = glyphs[i];
+      if (truncationStartIndex != null && g.firstCharacter != null && g.firstCharacter >= truncationStartIndex) continue;
+
+      let slice = '';
+      let stopAfter = false;
+      if (g.firstCharacter == null) {
+        if (truncationStartIndex == null) continue;
+        slice = '…';
+        stopAfter = true;
+      } else {
+        let nextChar = null;
+        for (let j = i + 1; j < glyphs.length; j++) {
+          const fc = glyphs[j].firstCharacter;
+          if (fc != null && fc > g.firstCharacter) {
+            nextChar = fc;
+            break;
+          }
         }
+        slice = dispChars.slice(g.firstCharacter, nextChar ?? (g.firstCharacter + 1));
       }
-      slice = dispChars.slice(g.firstCharacter, nextChar ?? (g.firstCharacter + 1));
-    }
 
-    if (!slice) continue;
-    spans.push(`<tspan x="${textBoxX + g.position.x}" y="${textBoxY + g.position.y}">${esc(slice)}</tspan>`);
-    if (stopAfter) break;
+      if (!slice) continue;
+      spans.push(`<tspan x="${textBoxX + g.position.x}" y="${textBoxY + g.position.y}">${esc(slice)}</tspan>`);
+      if (stopAfter) break;
+    }
+    tspan = spans.join('');
   }
-  tspan = spans.join('');
 
   const textSvg = [
     `<text font-size="${fontSize}" font-family="${fontFamily}, sans-serif"`,

package/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": "0.2",
   "name": "openfig",
   "version": "0.3.11",
-  "description": "Open-source tools for parsing and rendering Figma design files",
+  "description": "Open-source tools for Figma file parsing and rendering",
   "author": {
     "name": "OpenFig Contributors"
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "openfig-cli",
-  "version": "0.3.12",
-  "description": "OpenFig — Open-source tools for parsing and rendering Figma design files",
+  "version": "0.3.14",
+  "description": "OpenFig — Open-source tools for Figma file parsing and rendering",
   "type": "module",
   "bin": {
     "openfig": "bin/cli.mjs",