openfig-cli 0.4.1 → 0.4.3

package/README.md

@@ -27,19 +27,19 @@ In Claude Design, choose the **Slide deck** tab and create your project.
 The **Use speaker notes** toggle is optional; if on, OpenFig maps notes
 to each slide.
 
-![Create slide deck](docs/images/create_slides_project.png)
+<img src="docs/images/create_slides_project.png" alt="Create slide deck" width="380" />
 
 ### 2. Build your deck, then export
 
 When you're done designing, click **Share → Export as standalone HTML**.
 
-![Export as standalone HTML](docs/images/export_standalone_html.png)
+<img src="docs/images/export_standalone_html.png" alt="Export as standalone HTML" width="720" />
 
 Claude Design generates a single self-contained file named
 `{Project Name} (Standalone).html` — all slides, images, fonts, and the
 rendering engine inlined. Works offline.
 
-![Download standalone HTML](docs/images/download_standalone_html.png)
+<img src="docs/images/download_standalone_html.png" alt="Download standalone HTML" width="480" />
 
 ### 3. Convert to .deck
 

package/lib/slides/browser-extract.mjs

@@ -191,6 +191,7 @@ export async function extractSlides(page, opts = {}) {
                 viewBox: vb ? vb[2] : `0 0 ${rect.width} ${rect.height}`,
                 inline: svgInline,
                 ...(parseFloat(cs.opacity) < 1 ? { opacity: parseFloat(cs.opacity) } : {}),
+                ...(cs.filter && cs.filter !== 'none' ? { filter: cs.filter } : {}),
               });
             } else {
               pushElement({
@@ -199,6 +200,7 @@ export async function extractSlides(page, opts = {}) {
                 x: rect.x, y: rect.y, width: rect.width, height: rect.height,
                 objectFit: cs.objectFit || 'contain',
                 opacity: cs.opacity,
+                ...(cs.filter && cs.filter !== 'none' ? { filter: cs.filter } : {}),
               });
             }
           } else {
@@ -221,6 +223,7 @@ export async function extractSlides(page, opts = {}) {
             viewBox: el.getAttribute('viewBox') || `0 0 ${rect.width} ${rect.height}`,
             inline: el.outerHTML,
             ...(eff < 1 ? { opacity: eff } : {}),
+            ...(cs.filter && cs.filter !== 'none' ? { filter: cs.filter } : {}),
           });
         } else {
           if (tag !== 'SECTION') maybeEmitShape(el, cs, rect);

package/lib/slides/handoff/element-dispatch.mjs

@@ -1,3 +1,7 @@
+import sharp from 'sharp';
+import { existsSync } from 'node:fs';
+import { basename, dirname, extname, join } from 'node:path';
+
 const SERIF = 'Georgia';
 const SANS = 'Inter';
 const BORDER = '#E8EAEE';
@@ -392,8 +396,63 @@ function applyFilter(node, el) {
   }
 }
 
+// Bake a parsed CSS image filter into the raster bytes via sharp, returning
+// the path to a (cached) variant file. Returns the original path unchanged
+// if the filter is empty or one we don't know how to apply here.
+//
+// Output is always PNG so alpha is preserved for both invert and forceWhite
+// (the "brightness(0) invert(1)" white-mask trick).
+async function bakeImageFilter(srcPath, filter, displayWidth) {
+  if (!filter || (!filter.invert && !filter.forceWhite)) return srcPath;
+
+  const ext = extname(srcPath).toLowerCase();
+  const stem = basename(srcPath, ext);
+  const key = filter.forceWhite ? 'forceWhite' : 'invert';
+  const outPath = join(dirname(srcPath), `${stem}.${key}.png`);
+  if (existsSync(outPath)) return outPath;
+
+  // SVGs need an explicit density to rasterize crisply. Pick ~4× the target
+  // display width so the resulting PNG holds up under typical Figma zoom.
+  const isSvg = ext === '.svg';
+  const density = isSvg ? Math.max(192, Math.round((displayWidth || 256) * 4 * 72 / 256)) : 72;
+  const pipeline = isSvg ? sharp(srcPath, { density }) : sharp(srcPath);
+
+  if (filter.forceWhite) {
+    // brightness(0) invert(1) → every pixel becomes opaque-white where the
+    // source had any color, with the source's alpha channel preserved.
+    // Implemented as: composite a solid white plate using the source as a
+    // `dest-in` mask, which keeps the white only where the source has alpha.
+    const meta = await pipeline.metadata();
+    const white = sharp({
+      create: {
+        width: meta.width,
+        height: meta.height,
+        channels: 4,
+        background: { r: 255, g: 255, b: 255, alpha: 1 },
+      },
+    });
+    // Re-read the source through a fresh pipeline as a composite input —
+    // sharp doesn't let us reuse the existing `pipeline` reference.
+    const sourceForMask = isSvg
+      ? await sharp(srcPath, { density }).png().toBuffer()
+      : await sharp(srcPath).png().toBuffer();
+    await white
+      .composite([{ input: sourceForMask, blend: 'dest-in' }])
+      .png()
+      .toFile(outPath);
+    return outPath;
+  }
+
+  // Plain invert(1): flip RGB, preserve alpha.
+  await pipeline.negate({ alpha: false }).png().toFile(outPath);
+  return outPath;
+}
+
 async function handleImage(slide, el, ctx) {
-  const path = ctx.resolveMedia(el.src);
+  let path = ctx.resolveMedia(el.src);
+  if (el.filter && (el.filter.invert || el.filter.forceWhite)) {
+    path = await bakeImageFilter(path, el.filter, el.width);
+  }
   const opts = { x: el.x, y: el.y, width: el.width, height: el.height };
   opts.scaleMode = el.objectFit === 'contain' ? 'FIT' : 'FILL';
   const node = await slide.addImage(path, opts);

package/lib/slides/html-converter.mjs

@@ -48,7 +48,17 @@ function rewriteTemplateForBrowser(template, mediaMap) {
     const src = img.getAttribute('src');
     if (!src) continue;
     const asset = mediaMap[src];
-    if (asset) img.setAttribute('src', `media/${asset.filename}`);
+    if (!asset) continue;
+    if (asset.mime === 'image/svg+xml') {
+      // Inline SVG assets as data URLs so browser-extract's decodeSvgDataUrl
+      // path picks them up and emits a native Figma VECTOR node. Without
+      // this, the <img> is treated as a raster reference and the logo
+      // bakes to pixels at display size, losing crispness on Figma zoom.
+      const svgBytes = readFileSync(asset.path);
+      img.setAttribute('src', `data:image/svg+xml;base64,${svgBytes.toString('base64')}`);
+    } else {
+      img.setAttribute('src', `media/${asset.filename}`);
+    }
   }
   return doc.toString();
 }
@@ -131,6 +141,119 @@ function normalizeFont(family) {
   return portable ?? entries[0];
 }
 
+// Invert an RGB color value. Returns the input unchanged if the format isn't
+// recognized (so unusual literals fall through rather than corrupting the
+// SVG). Handles #RGB, #RRGGBB, rgb()/rgba(), and the named colors "black" and
+// "white" — enough to cover Claude Design's exports.
+function invertCssColor(color) {
+  const s = String(color).trim();
+  if (s === 'none' || s === 'transparent' || s === 'currentColor') return s;
+  if (s.startsWith('#')) {
+    const hex = s.length === 4
+      ? '#' + [...s.slice(1)].map((c) => c + c).join('')
+      : s;
+    if (!/^#[0-9a-f]{6}$/i.test(hex)) return color;
+    const r = 255 - parseInt(hex.slice(1, 3), 16);
+    const g = 255 - parseInt(hex.slice(3, 5), 16);
+    const b = 255 - parseInt(hex.slice(5, 7), 16);
+    return '#' + [r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('');
+  }
+  const m = s.match(/^rgba?\(([^)]+)\)$/i);
+  if (m) {
+    const parts = m[1].split(',').map((t) => t.trim());
+    const rgb = parts.slice(0, 3).map((t) => parseInt(t, 10));
+    if (rgb.some((n) => Number.isNaN(n))) return color;
+    const inv = rgb.map((n) => 255 - n);
+    return parts.length === 4
+      ? `rgba(${inv.join(', ')}, ${parts[3]})`
+      : `rgb(${inv.join(', ')})`;
+  }
+  const lower = s.toLowerCase();
+  if (lower === 'black') return '#ffffff';
+  if (lower === 'white') return '#000000';
+  return color;
+}
+
+// Rewrite every fill/stroke color in an SVG string. `mode` is either
+// 'invert' (RGB complement) or 'forceWhite' (every visible color → #fff,
+// used for the brightness(0) invert(1) "white mask" trick).
+//
+// Touches three forms of color declaration:
+//   1. <… fill="X" stroke="Y" …>
+//   2. <… style="fill: X; stroke: Y">
+//   3. CSS rules inside <style> blocks
+function transformSvgColors(svg, mode) {
+  const transform = mode === 'forceWhite'
+    ? (val) => {
+        const v = String(val).trim();
+        if (v === 'none' || v === 'transparent' || v === 'currentColor') return v;
+        return '#ffffff';
+      }
+    : (val) => invertCssColor(val);
+
+  // Attribute form: fill="..." / stroke="..." (single or double quotes)
+  let out = svg.replace(
+    /\b(fill|stroke)\s*=\s*(['"])([^'"]+)\2/gi,
+    (_, attr, quote, val) => `${attr}=${quote}${transform(val)}${quote}`,
+  );
+  // Inline style attribute: style="fill: ...; stroke: ..."
+  out = out.replace(/\bstyle\s*=\s*(['"])([^'"]*)\1/gi, (_, quote, css) => {
+    const newCss = css.replace(
+      /\b(fill|stroke)\s*:\s*([^;]+)/gi,
+      (__, prop, val) => `${prop}: ${transform(val.trim())}`,
+    );
+    return `style=${quote}${newCss}${quote}`;
+  });
+  // CSS rules inside <style> blocks
+  out = out.replace(/<style\b([^>]*)>([\s\S]*?)<\/style>/gi, (_, attrs, body) => {
+    const newBody = body.replace(
+      /\b(fill|stroke)\s*:\s*([^;}\s]+)/gi,
+      (__, prop, val) => `${prop}: ${transform(val)}`,
+    );
+    return `<style${attrs}>${newBody}</style>`;
+  });
+  return out;
+}
+
+// Parse the subset of CSS `filter` values we can bake into image bytes via
+// sharp at handoff time. Returns { invert?: 1, forceWhite?: true, raw }, or
+// null if the value isn't one we know how to apply.
+//
+// Supported today:
+//   `invert(1)` / `invert(100%)`           → flip raster colors
+//   `brightness(0) invert(1)` (any order)  → force every visible pixel white
+//                                             (the "white-from-any-source" trick)
+//
+// Anything else (hue-rotate, grayscale, sepia, partial invert, etc.) returns
+// null so the caller can emit a warning. Adding new cases is mechanical —
+// see DECK-FEATURES-ROADMAP for the filter-coverage plan.
+function parseImageFilter(raw) {
+  if (!raw || raw === 'none') return null;
+  const tokens = String(raw).match(/[a-z-]+\([^)]*\)/gi) || [];
+  if (tokens.length === 0) return null;
+  let invert = false;
+  let brightnessZero = false;
+  for (const tok of tokens) {
+    const m = tok.match(/^([a-z-]+)\(\s*([^)]*)\s*\)$/i);
+    if (!m) return null;
+    const fn = m[1].toLowerCase();
+    const arg = m[2].trim();
+    if (fn === 'invert') {
+      // accept invert(1) or invert(100%)
+      if (arg === '1' || arg === '100%') invert = true;
+      else return null;
+    } else if (fn === 'brightness') {
+      if (arg === '0' || arg === '0%') brightnessZero = true;
+      else return null;
+    } else {
+      return null;
+    }
+  }
+  if (brightnessZero && invert) return { forceWhite: true, raw };
+  if (invert) return { invert: 1, raw };
+  return null;
+}
+
 function normalizeElement(el) {
   if (!el) return null;
   const out = { ...el };
@@ -181,6 +304,30 @@ function normalizeElement(el) {
       else delete out.opacity;
     }
   }
+  if (el.type === 'image' && el.filter) {
+    const parsed = parseImageFilter(el.filter);
+    if (parsed) {
+      out.filter = parsed;
+    } else {
+      // Keep raw so the warn pass downstream can report which CSS we skipped.
+      out.unhandledFilter = el.filter;
+      delete out.filter;
+    }
+  }
+  if (el.type === 'svg' && el.filter) {
+    const parsed = parseImageFilter(el.filter);
+    if (parsed && typeof out.inline === 'string') {
+      // Apply the filter by rewriting fill/stroke colors directly in the SVG
+      // markup so the downstream vector pipeline emits already-corrected
+      // colors — no raster trip, no Figma effect needed.
+      const mode = parsed.forceWhite ? 'forceWhite' : 'invert';
+      out.inline = transformSvgColors(out.inline, mode);
+      delete out.filter;
+    } else if (!parsed) {
+      out.unhandledFilter = el.filter;
+      delete out.filter;
+    }
+  }
   if (el.type === 'layoutContainer') {
     out.children = normalizeElements(el.children ?? []);
   }
@@ -366,6 +513,24 @@ export async function convertStandaloneHtml(htmlPath, outDeckPath, opts = {}) {
     );
   }
 
+  // Surface any CSS filters on <img> / inline-<svg> elements that we
+  // recognised the shape of but don't apply yet (anything outside
+  // parseImageFilter's allowlist). Strips the diagnostic field after
+  // reporting so it never reaches the handoff stage.
+  for (const slide of manifestOut.slides) {
+    for (const el of slide.elements ?? []) {
+      if ((el.type === 'image' || el.type === 'svg') && el.unhandledFilter) {
+        const what = el.type === 'svg' ? '<svg>' : '<img>';
+        collector.warn(
+          slide.index - 1,
+          `${what} filter not applied: ${el.unhandledFilter} (only invert(1) and brightness(0) invert(1) are supported today)`,
+          el.src || (el.inline ? el.inline.slice(0, 40) : undefined),
+        );
+        delete el.unhandledFilter;
+      }
+    }
+  }
+
   const warnings = collector.report();
   if (warnings.length && !opts.silent) {
     const logger = opts.warnLogger || ((s) => process.stderr.write(s + '\n'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openfig-cli",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "OpenFig — Open-source tools for Figma file parsing and rendering",
   "type": "module",
   "bin": {