figma-coder-mcp 0.2.1 → 0.3.0

package/dist/bin.js

@@ -295,7 +295,8 @@ var require_client = __commonJS({
       async renderImages(fileKey, nodeIds, format = "svg", requestAuth, scale = 1) {
         const auth = this.resolveAuth(requestAuth);
         const ids = nodeIds.map(url_1.normalizeNodeId).join(",");
-        const data = await this.get(`/images/${fileKey}?ids=${encodeURIComponent(ids)}&format=${format}&scale=${scale}`, auth);
+        const svgOpts = format === "svg" ? "&svg_outline_text=true&svg_simplify_stroke=true" : "";
+        const data = await this.get(`/images/${fileKey}?ids=${encodeURIComponent(ids)}&format=${format}&scale=${scale}${svgOpts}`, auth);
         if (data.err) {
           throw new errors_1.FigmaApiError(`Figma image render error: ${data.err}`, 502);
         }
@@ -361,8 +362,9 @@ var require_style_ir = __commonJS({
   "../packages/figma-core/dist/converter/style-ir.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.StyleIr = void 0;
+    exports.StyleIr = exports.IMAGE_FILL_TOKEN = void 0;
     var color_1 = require_color();
+    exports.IMAGE_FILL_TOKEN = "__FIGMA_IMAGE__";
     var ALIGN_MAIN = {
       MIN: "flex-start",
       CENTER: "center",
@@ -375,7 +377,7 @@ var require_style_ir = __commonJS({
       MAX: "flex-end",
       BASELINE: "baseline"
     };
-    var StyleIr = class {
+    var StyleIr = class _StyleIr {
       /** Convert a Figma node subtree into the Style IR tree. */
       convert(root) {
         return this.walk(root, void 0);
@@ -392,10 +394,22 @@ var require_style_ir = __commonJS({
           this.applyEffects(node, css);
         }
         this.applyOpacity(node, css);
+        this.applyBlend(node, css);
         const isText = node.type === "TEXT";
         if (isText)
           this.applyText(node, css);
         const tag = isText ? "p" : "div";
+        if (asset?.kind === "vector") {
+          return {
+            id: node.id,
+            name: node.name,
+            figmaType: node.type,
+            tag,
+            css,
+            asset,
+            children: []
+          };
+        }
         const visibleChildren = (node.children ?? []).filter((c) => c.visible !== false);
         const maskChild = visibleChildren.find((c) => c.isMask);
         if (maskChild) {
@@ -405,17 +419,79 @@ var require_style_ir = __commonJS({
           this.applyRadius(maskChild, css);
         }
         const children = visibleChildren.map((c) => this.walk(c, node));
+        const runs = isText ? this.textRuns(node) : void 0;
         return {
           id: node.id,
           name: node.name,
           figmaType: node.type,
           tag,
           ...isText ? { text: node.characters ?? "" } : {},
+          ...runs ? { runs } : {},
           css,
           ...asset ? { asset } : {},
           children
         };
       }
+      /**
+       * Split a text node into styled runs when it has per-character overrides
+       * (a bold word, a colored span). Returns undefined for plain single-style
+       * text (the common case) so the renderer emits one string. `css` per run holds
+       * ONLY the overridden props; the <p> base style supplies the rest.
+       */
+      textRuns(node) {
+        const chars = node.characters ?? "";
+        const overrides = node.characterStyleOverrides;
+        const table = node.styleOverrideTable;
+        if (!chars || !overrides?.length || !table)
+          return void 0;
+        if (!overrides.some((id) => id && table[String(id)]))
+          return void 0;
+        const raw = [];
+        let curId = -1;
+        for (let i = 0; i < chars.length; i++) {
+          const id = overrides[i] ?? 0;
+          if (id !== curId || raw.length === 0) {
+            raw.push({ id, text: "" });
+            curId = id;
+          }
+          raw[raw.length - 1].text += chars[i];
+        }
+        if (raw.length <= 1)
+          return void 0;
+        return raw.map((r) => ({
+          text: r.text,
+          css: r.id && table[String(r.id)] ? this.overrideCss(table[String(r.id)]) : {}
+        }));
+      }
+      /** Map an override style entry (partial TypeStyle + optional fills) to CSS. */
+      overrideCss(o) {
+        const css = {};
+        if (o.fontWeight)
+          css["font-weight"] = String(o.fontWeight);
+        if (o.fontSize)
+          css["font-size"] = (0, color_1.px)(o.fontSize);
+        if (o.fontFamily)
+          css["font-family"] = `'${o.fontFamily}', sans-serif`;
+        if (o.italic)
+          css["font-style"] = "italic";
+        if (o.letterSpacing)
+          css["letter-spacing"] = (0, color_1.px)(o.letterSpacing);
+        if (o.lineHeightPx)
+          css["line-height"] = (0, color_1.px)(o.lineHeightPx);
+        if (o.textDecoration === "UNDERLINE")
+          css["text-decoration"] = "underline";
+        if (o.textDecoration === "STRIKETHROUGH")
+          css["text-decoration"] = "line-through";
+        if (o.textCase === "UPPER")
+          css["text-transform"] = "uppercase";
+        if (o.textCase === "LOWER")
+          css["text-transform"] = "lowercase";
+        const fills = this.visiblePaints(o.fills);
+        const p = fills[fills.length - 1];
+        if (p?.type === "SOLID" && p.color)
+          css.color = (0, color_1.figmaColorToCss)(p.color, p.opacity ?? 1);
+        return css;
+      }
       // ---- layout -------------------------------------------------------------
       applyLayout(node, parent, css) {
         const auto = node.layoutMode === "HORIZONTAL" || node.layoutMode === "VERTICAL";
@@ -457,8 +533,60 @@ var require_style_ir = __commonJS({
         const box = node.absoluteBoundingBox;
         if (!box)
           return;
-        css.width = (0, color_1.px)(box.width);
-        css.height = (0, color_1.px)(box.height);
+        this.applyAxisSize(node, parent, css, "H", box.width);
+        this.applyAxisSize(node, parent, css, "V", box.height);
+        if (node.minWidth != null)
+          css["min-width"] = (0, color_1.px)(node.minWidth);
+        if (node.maxWidth != null)
+          css["max-width"] = (0, color_1.px)(node.maxWidth);
+        if (node.minHeight != null)
+          css["min-height"] = (0, color_1.px)(node.minHeight);
+        if (node.maxHeight != null)
+          css["max-height"] = (0, color_1.px)(node.maxHeight);
+      }
+      /**
+       * Size one axis. Inside an auto-layout parent we honor Figma's sizing intent —
+       * FILL → grow (flex-1) or stretch the cross axis, HUG → let content size it,
+       * FIXED → px — instead of freezing every box to its pixel dimensions. Outside
+       * auto-layout (absolute children, root) we keep the exact px.
+       */
+      applyAxisSize(node, parent, css, axis, boxDim) {
+        const dim = axis === "H" ? "width" : "height";
+        const parentMainHorizontal = parent?.layoutMode === "HORIZONTAL";
+        const parentAuto = parentMainHorizontal || parent?.layoutMode === "VERTICAL";
+        const sizing = this.axisSizing(node, axis, parentMainHorizontal);
+        if (!parentAuto || !sizing) {
+          css[dim] = (0, color_1.px)(boxDim);
+          return;
+        }
+        const isMainAxis = axis === "H" === parentMainHorizontal;
+        if (sizing === "FILL") {
+          if (isMainAxis)
+            css.flex = "1 1 0%";
+          else
+            css["align-self"] = "stretch";
+          return;
+        }
+        if (sizing === "HUG") {
+          const hasContent = (node.children?.length ?? 0) > 0 || node.type === "TEXT";
+          if (!hasContent)
+            css[dim] = (0, color_1.px)(boxDim);
+          return;
+        }
+        css[dim] = (0, color_1.px)(boxDim);
+      }
+      /** Resolve a node's sizing mode on an axis, falling back from the modern
+       *  layoutSizing* fields to the legacy layoutGrow/layoutAlign. */
+      axisSizing(node, axis, parentMainHorizontal) {
+        const explicit = axis === "H" ? node.layoutSizingHorizontal : node.layoutSizingVertical;
+        if (explicit)
+          return explicit;
+        const isMainAxis = axis === "H" === parentMainHorizontal;
+        if (isMainAxis && node.layoutGrow === 1)
+          return "FILL";
+        if (!isMainAxis && node.layoutAlign === "STRETCH")
+          return "FILL";
+        return void 0;
       }
       // ---- paints -------------------------------------------------------------
       visiblePaints(paints) {
@@ -472,22 +600,109 @@ var require_style_ir = __commonJS({
         const fills = this.visiblePaints(node.fills);
         if (!fills.length)
           return;
-        const paint = fills[fills.length - 1];
-        if (paint.type === "SOLID" && paint.color) {
-          css["background-color"] = (0, color_1.figmaColorToCss)(paint.color, paint.opacity ?? 1);
-        } else if (paint.type === "GRADIENT_LINEAR") {
-          const grad = this.linearGradient(paint);
-          if (grad)
-            css["background-image"] = grad;
-        } else if (paint.type === "IMAGE") {
+        if (fills.length === 1) {
+          const only = fills[0];
+          if (only.type === "SOLID" && only.color) {
+            css["background-color"] = (0, color_1.figmaColorToCss)(only.color, only.opacity ?? 1);
+            return;
+          }
+          if (only.type === "IMAGE" && asset?.kind === "image") {
+            css["background-image"] = `url(${exports.IMAGE_FILL_TOKEN})`;
+            this.applyImageSizing(only, css);
+            return;
+          }
+        }
+        const layers = [];
+        let hasImage = false;
+        for (let i = fills.length - 1; i >= 0; i--) {
+          const paint = fills[i];
+          if (paint.type === "IMAGE") {
+            if (asset?.kind !== "image")
+              continue;
+            layers.push(`url(${exports.IMAGE_FILL_TOKEN})`);
+            hasImage = true;
+            continue;
+          }
+          const layer = this.paintToLayer(paint);
+          if (layer)
+            layers.push(layer);
+        }
+        if (!layers.length)
+          return;
+        css["background-image"] = layers.join(", ");
+        if (hasImage) {
           css["background-size"] = "cover";
           css["background-position"] = "center";
         }
       }
-      linearGradient(paint) {
+      /**
+       * Translate a Figma IMAGE paint's fit (scaleMode + crop transform) into CSS
+       * background sizing. Previously we always emitted cover/center, which only
+       * matches FILL-without-crop; FIT/TILE/STRETCH and cropped fills rendered the
+       * wrong region/scale.
+       */
+      applyImageSizing(paint, css) {
+        const pct = (n) => `${Number(n.toFixed(3))}%`;
+        const m = paint.imageTransform;
+        if (m && m.length >= 2 && m[0].length >= 3) {
+          const sx = m[0][0];
+          const sy = m[1][1];
+          const tx = m[0][2];
+          const ty = m[1][2];
+          if (sx > 0 && sy > 0 && sx < 1 && sy < 1) {
+            css["background-size"] = `${pct(100 / sx)} ${pct(100 / sy)}`;
+            css["background-position"] = `${pct(tx / (1 - sx) * 100)} ${pct(ty / (1 - sy) * 100)}`;
+            css["background-repeat"] = "no-repeat";
+            return;
+          }
+        }
+        switch (paint.scaleMode) {
+          case "FIT":
+            css["background-size"] = "contain";
+            css["background-position"] = "center";
+            css["background-repeat"] = "no-repeat";
+            break;
+          case "STRETCH":
+            css["background-size"] = "100% 100%";
+            break;
+          case "TILE":
+            css["background-repeat"] = "repeat";
+            break;
+          case "FILL":
+          default:
+            css["background-size"] = "cover";
+            css["background-position"] = "center";
+            break;
+        }
+      }
+      /** A single Figma paint as one CSS `background-image` layer (or null if it
+       *  carries no renderable color, e.g. an image handled separately). */
+      paintToLayer(paint) {
+        if (paint.type === "SOLID" && paint.color) {
+          const c = (0, color_1.figmaColorToCss)(paint.color, paint.opacity ?? 1);
+          return `linear-gradient(${c}, ${c})`;
+        }
+        if (paint.type === "GRADIENT_LINEAR")
+          return this.linearGradient(paint);
+        if (paint.type === "GRADIENT_RADIAL")
+          return this.radialGradient(paint);
+        if (paint.type === "GRADIENT_ANGULAR")
+          return this.angularGradient(paint);
+        if (paint.type === "GRADIENT_DIAMOND")
+          return this.radialGradient(paint);
+        return null;
+      }
+      /** Comma-joined `color pos%` stops shared by every gradient kind. */
+      gradientStops(paint) {
         const stops = paint.gradientStops ?? [];
         if (stops.length < 2)
           return null;
+        return stops.map((s) => `${(0, color_1.figmaColorToCss)(s.color, paint.opacity ?? 1)} ${Math.round(s.position * 100)}%`).join(", ");
+      }
+      linearGradient(paint) {
+        const stopStr = this.gradientStops(paint);
+        if (!stopStr)
+          return null;
         let angle = 180;
         const handles = paint.gradientHandlePositions;
         if (handles && handles.length >= 2) {
@@ -495,19 +710,101 @@ var require_style_ir = __commonJS({
           const dy = handles[1].y - handles[0].y;
           angle = Math.round(Math.atan2(dy, dx) * 180 / Math.PI + 90);
         }
-        const stopStr = stops.map((s) => `${(0, color_1.figmaColorToCss)(s.color, paint.opacity ?? 1)} ${Math.round(s.position * 100)}%`).join(", ");
         return `linear-gradient(${angle}deg, ${stopStr})`;
       }
+      /**
+       * Radial gradient. Figma's handles are normalized box coordinates: [0] is the
+       * center, [1] the end of one radius, [2] the end of the perpendicular radius.
+       * We map the center to a percentage position and each radius to a percentage
+       * of the box (an axis-aligned ellipse — CSS can't rotate a radial gradient, so
+       * a rotated Figma radial is approximated). Falls back to a centered circle.
+       */
+      radialGradient(paint) {
+        const stopStr = this.gradientStops(paint);
+        if (!stopStr)
+          return null;
+        const h = paint.gradientHandlePositions;
+        if (!h || h.length < 3) {
+          return `radial-gradient(circle at center, ${stopStr})`;
+        }
+        const pct = (n) => `${Number((n * 100).toFixed(2))}%`;
+        const cx = h[0].x;
+        const cy = h[0].y;
+        const rx = Math.hypot(h[1].x - cx, h[1].y - cy);
+        const ry = Math.hypot(h[2].x - cx, h[2].y - cy);
+        return `radial-gradient(ellipse ${pct(rx)} ${pct(ry)} at ${pct(cx)} ${pct(cy)}, ${stopStr})`;
+      }
+      /**
+       * Angular (conic) gradient. Handle [0] is the center and [0]->[1] sets the
+       * start angle. CSS conic accepts percentage stops, matching Figma's 0..1.
+       */
+      angularGradient(paint) {
+        const stopStr = this.gradientStops(paint);
+        if (!stopStr)
+          return null;
+        let angle = 0;
+        let cx = 0.5;
+        let cy = 0.5;
+        const h = paint.gradientHandlePositions;
+        if (h && h.length >= 2) {
+          cx = h[0].x;
+          cy = h[0].y;
+          angle = Math.round(Math.atan2(h[1].y - cy, h[1].x - cx) * 180 / Math.PI + 90);
+        }
+        const pct = (n) => `${Number((n * 100).toFixed(2))}%`;
+        return `conic-gradient(from ${angle}deg at ${pct(cx)} ${pct(cy)}, ${stopStr})`;
+      }
       applyStroke(node, css) {
         const strokes = this.visiblePaints(node.strokes);
-        if (!strokes.length || !node.strokeWeight)
+        if (!strokes.length)
           return;
         const paint = strokes[strokes.length - 1];
-        if (paint.type === "SOLID" && paint.color) {
-          css.border = `${(0, color_1.px)(node.strokeWeight)} solid ${(0, color_1.figmaColorToCss)(paint.color, paint.opacity ?? 1)}`;
+        if (paint.type !== "SOLID" || !paint.color)
+          return;
+        const color = (0, color_1.figmaColorToCss)(paint.color, paint.opacity ?? 1);
+        if (node.type === "LINE") {
+          if (!node.strokeWeight)
+            return;
+          const box = node.absoluteBoundingBox;
+          const vertical = !!box && box.height > box.width;
+          css[vertical ? "border-left" : "border-top"] = `${(0, color_1.px)(node.strokeWeight)} solid ${color}`;
+          return;
+        }
+        const ind = node.individualStrokeWeights;
+        if (ind && (ind.top !== ind.right || ind.right !== ind.bottom || ind.bottom !== ind.left)) {
+          const side = (w2, name) => {
+            if (w2 > 0)
+              css[`border-${name}`] = `${(0, color_1.px)(w2)} solid ${color}`;
+          };
+          side(ind.top, "top");
+          side(ind.right, "right");
+          side(ind.bottom, "bottom");
+          side(ind.left, "left");
+          return;
+        }
+        if (!node.strokeWeight)
+          return;
+        const w = (0, color_1.px)(node.strokeWeight);
+        switch (node.strokeAlign) {
+          case "OUTSIDE":
+            css.outline = `${w} solid ${color}`;
+            css["outline-offset"] = "0px";
+            break;
+          case "CENTER":
+            css.outline = `${w} solid ${color}`;
+            css["outline-offset"] = `${(0, color_1.px)(-(node.strokeWeight / 2))}`;
+            break;
+          case "INSIDE":
+          default:
+            css.border = `${w} solid ${color}`;
+            break;
         }
       }
       applyRadius(node, css) {
+        if (node.type === "ELLIPSE") {
+          css["border-radius"] = "50%";
+          return;
+        }
         if (node.rectangleCornerRadii) {
           const [tl, tr, br, bl] = node.rectangleCornerRadii;
           if (tl || tr || br || bl) {
@@ -581,25 +878,163 @@ var require_style_ir = __commonJS({
             css["white-space"] = "pre";
           else if (s.textAutoResize === "HEIGHT")
             css["white-space"] = "pre-wrap";
+          if (s.textAlignVertical === "CENTER" || s.textAlignVertical === "BOTTOM") {
+            css.display = "flex";
+            css["flex-direction"] = "column";
+            css["justify-content"] = s.textAlignVertical === "CENTER" ? "center" : "flex-end";
+          }
         }
         const fills = this.visiblePaints(node.fills);
         const paint = fills[fills.length - 1];
         if (paint?.type === "SOLID" && paint.color) {
           css.color = (0, color_1.figmaColorToCss)(paint.color, paint.opacity ?? 1);
+        } else if (paint) {
+          const layer = this.paintToLayer(paint);
+          if (layer) {
+            css["background-image"] = layer;
+            css["-webkit-background-clip"] = "text";
+            css["background-clip"] = "text";
+            css.color = "transparent";
+          }
         }
       }
+      /** Map a Figma layer blend mode to CSS `mix-blend-mode` (no-op for NORMAL). */
+      applyBlend(node, css) {
+        const bm = node.blendMode;
+        if (!bm || bm === "NORMAL" || bm === "PASS_THROUGH")
+          return;
+        const css_ = bm.toLowerCase().replace(/_/g, "-");
+        const allowed = /* @__PURE__ */ new Set([
+          "multiply",
+          "screen",
+          "overlay",
+          "darken",
+          "lighten",
+          "color-dodge",
+          "color-burn",
+          "hard-light",
+          "soft-light",
+          "difference",
+          "exclusion",
+          "hue",
+          "saturation",
+          "color",
+          "luminosity"
+        ]);
+        if (allowed.has(css_))
+          css["mix-blend-mode"] = css_;
+      }
       // ---- assets -------------------------------------------------------------
       detectAsset(node) {
+        const imagePaint = [...this.visiblePaints(node.fills)].reverse().find((p) => p.type === "IMAGE" && p.imageRef);
         const vectorTypes = ["VECTOR", "STAR", "LINE", "ELLIPSE", "REGULAR_POLYGON", "BOOLEAN_OPERATION"];
-        if (vectorTypes.includes(node.type))
+        if (vectorTypes.includes(node.type)) {
+          if (node.type === "ELLIPSE" && imagePaint) {
+            return { kind: "image", imageRef: imagePaint.imageRef };
+          }
+          if (this.isCssRenderableVector(node))
+            return void 0;
           return { kind: "vector" };
-        const imagePaint = [...this.visiblePaints(node.fills)].reverse().find((p) => p.type === "IMAGE" && p.imageRef);
+        }
         if (imagePaint)
           return { kind: "image", imageRef: imagePaint.imageRef };
+        if (this.isVectorOnlyContainer(node))
+          return { kind: "vector" };
         return void 0;
       }
+      /**
+       * Whether a vector-typed node is faithfully renderable with CSS, so it can
+       * skip server-side rasterization.
+       *
+       * - ELLIPSE / LINE encode their geometry in the node type, so CSS always
+       *   reproduces them (circle/oval via border-radius:50%, line via a border).
+       * - VECTOR / BOOLEAN_OPERATION have arbitrary geometry the IR can't see, so
+       *   they only qualify with a positive "rounded rectangle" signal (corner
+       *   radius or a background blur — i.e. a panel) plus at least one paint we can
+       *   render (a solid/gradient fill or a stroke-only outline).
+       *
+       * A rotated node never qualifies: the IR emits no transform, so the baked
+       * raster (which already carries the rotation) is the faithful fallback.
+       */
+      isCssRenderableVector(node) {
+        if (this.hasRotation(node))
+          return false;
+        const fills = this.visiblePaints(node.fills);
+        if (fills.some((p) => p.type === "IMAGE"))
+          return false;
+        if (node.type === "ELLIPSE" || node.type === "LINE")
+          return true;
+        if (node.type === "VECTOR" || node.type === "BOOLEAN_OPERATION") {
+          const hasPaintableFill = fills.some((p) => p.type === "SOLID" || p.type === "GRADIENT_LINEAR");
+          if (!hasPaintableFill)
+            return false;
+          const hasRadius = (node.cornerRadius ?? 0) > 0 || (node.rectangleCornerRadii?.some((r) => r > 0) ?? false);
+          const hasBackgroundBlur = (node.effects ?? []).some((e) => e.type === "BACKGROUND_BLUR" && e.visible !== false);
+          return hasRadius || hasBackgroundBlur;
+        }
+        return false;
+      }
+      /**
+       * Whether a container should collapse into a single rendered SVG: its entire
+       * visible subtree is vector paths (no text, no image fills, no plain boxes)
+       * AND at least one of those paths actually needs rasterizing (a subtree of
+       * only CSS-renderable shapes is cheaper kept as elements).
+       */
+      isVectorOnlyContainer(node) {
+        if (!_StyleIr.CONTAINER_TYPES.includes(node.type))
+          return false;
+        if (!node.absoluteBoundingBox)
+          return false;
+        const isAutoLayout = node.layoutMode === "HORIZONTAL" || node.layoutMode === "VERTICAL";
+        const childCount = (node.children ?? []).filter((c) => c.visible !== false).length;
+        if (isAutoLayout && childCount < _StyleIr.SVG_COLLAPSE_AUTOLAYOUT_THRESHOLD)
+          return false;
+        const scan = this.collapseScan(node);
+        return scan.pure && scan.hasRaster;
+      }
+      /**
+       * Classify a subtree for the collapse decision. `pure` is true only when every
+       * visible node is a vector shape; `hasRaster` is true when at least one of
+       * them would hit /v1/images (i.e. isn't reproducible as a CSS box).
+       */
+      collapseScan(node) {
+        const NOT_PURE = { pure: false, hasRaster: false };
+        if (node.visible === false)
+          return { pure: true, hasRaster: false };
+        if (node.type === "TEXT")
+          return NOT_PURE;
+        const hasImageFill = this.visiblePaints(node.fills).some((p) => p.type === "IMAGE" && p.imageRef);
+        if (hasImageFill)
+          return NOT_PURE;
+        const vectorTypes = ["VECTOR", "STAR", "LINE", "ELLIPSE", "REGULAR_POLYGON", "BOOLEAN_OPERATION"];
+        if (vectorTypes.includes(node.type)) {
+          return { pure: true, hasRaster: !this.isCssRenderableVector(node) };
+        }
+        if (_StyleIr.CONTAINER_TYPES.includes(node.type)) {
+          const kids = (node.children ?? []).filter((c) => c.visible !== false);
+          if (!kids.length)
+            return NOT_PURE;
+          let hasRaster = false;
+          for (const kid of kids) {
+            const r = this.collapseScan(kid);
+            if (!r.pure)
+              return NOT_PURE;
+            hasRaster = hasRaster || r.hasRaster;
+          }
+          return { pure: true, hasRaster };
+        }
+        return NOT_PURE;
+      }
+      /** True when the node is rotated beyond a tiny floating-point tolerance
+       *  (~0.5°). Figma reports rotation in radians; axis-aligned nodes carry
+       *  values like 8.7e-8 that must read as "not rotated". */
+      hasRotation(node) {
+        return typeof node.rotation === "number" && Math.abs(node.rotation) > 0.01;
+      }
     };
     exports.StyleIr = StyleIr;
+    StyleIr.CONTAINER_TYPES = ["GROUP", "FRAME", "INSTANCE", "COMPONENT"];
+    StyleIr.SVG_COLLAPSE_AUTOLAYOUT_THRESHOLD = 10;
   }
 });
 
@@ -612,6 +1047,111 @@ var require_tailwind_mapper = __commonJS({
     function arb(value) {
       return value.replace(/\s+/g, "_");
     }
+    var SPACING = [
+      ["0", 0],
+      ["px", 1],
+      ["0.5", 2],
+      ["1", 4],
+      ["1.5", 6],
+      ["2", 8],
+      ["2.5", 10],
+      ["3", 12],
+      ["3.5", 14],
+      ["4", 16],
+      ["5", 20],
+      ["6", 24],
+      ["7", 28],
+      ["8", 32],
+      ["9", 36],
+      ["10", 40],
+      ["11", 44],
+      ["12", 48],
+      ["14", 56],
+      ["16", 64],
+      ["20", 80],
+      ["24", 96],
+      ["28", 112],
+      ["32", 128],
+      ["36", 144],
+      ["40", 160],
+      ["44", 176],
+      ["48", 192],
+      ["52", 208],
+      ["56", 224],
+      ["60", 240],
+      ["64", 256],
+      ["72", 288],
+      ["80", 320],
+      ["96", 384]
+    ];
+    var RADIUS = [
+      ["-none", 0],
+      ["-sm", 2],
+      ["", 4],
+      ["-md", 6],
+      ["-lg", 8],
+      ["-xl", 12],
+      ["-2xl", 16],
+      ["-3xl", 24],
+      ["-full", 9999]
+    ];
+    var FONT_SIZE = [
+      ["xs", 12],
+      ["sm", 14],
+      ["base", 16],
+      ["lg", 18],
+      ["xl", 20],
+      ["2xl", 24],
+      ["3xl", 30],
+      ["4xl", 36],
+      ["5xl", 48],
+      ["6xl", 60],
+      ["7xl", 72],
+      ["8xl", 96],
+      ["9xl", 128]
+    ];
+    var FONT_WEIGHT = {
+      "100": "thin",
+      "200": "extralight",
+      "300": "light",
+      "400": "normal",
+      "500": "medium",
+      "600": "semibold",
+      "700": "bold",
+      "800": "extrabold",
+      "900": "black"
+    };
+    function pxNum(value) {
+      const m = /^(-?\d*\.?\d+)px$/.exec(value.trim());
+      return m ? parseFloat(m[1]) : null;
+    }
+    function nearest(n, scale) {
+      let best = null;
+      let bestPx = 0;
+      let bestD = Infinity;
+      for (const [tok, px] of scale) {
+        const d = Math.abs(px - n);
+        if (d < bestD) {
+          bestD = d;
+          best = tok;
+          bestPx = px;
+        }
+      }
+      if (best === null)
+        return null;
+      return bestD <= 0.5 ? best : null;
+    }
+    function spacingClass(prefix, value, round) {
+      if (round) {
+        const n = pxNum(value);
+        if (n !== null && n >= 0) {
+          const tok = nearest(n, SPACING);
+          if (tok !== null)
+            return `${prefix}-${tok}`;
+        }
+      }
+      return `${prefix}-[${arb(value)}]`;
+    }
     var JUSTIFY = {
       "flex-start": "justify-start",
       center: "justify-center",
@@ -630,7 +1170,8 @@ var require_tailwind_mapper = __commonJS({
       right: "text-right",
       justify: "text-justify"
     };
-    function cssToTailwind(css) {
+    function cssToTailwind(css, opts = {}) {
+      const round = opts.round ?? false;
       const classes = [];
       const leftover = {};
       const push = (c) => {
@@ -663,16 +1204,16 @@ var require_tailwind_mapper = __commonJS({
             ITEMS[value] ? push(ITEMS[value]) : leftover[prop] = value;
             break;
           case "gap":
-            push(`gap-[${arb(value)}]`);
+            push(spacingClass("gap", value, round));
             break;
           case "padding":
-            applyPadding(value, push, leftover);
+            applyPadding(value, push, leftover, round);
             break;
           case "width":
-            push(`w-[${arb(value)}]`);
+            push(spacingClass("w", value, round));
             break;
           case "height":
-            push(`h-[${arb(value)}]`);
+            push(spacingClass("h", value, round));
             break;
           case "position":
             if (value === "absolute")
@@ -683,10 +1224,10 @@ var require_tailwind_mapper = __commonJS({
               leftover[prop] = value;
             break;
           case "left":
-            push(`left-[${arb(value)}]`);
+            push(spacingClass("left", value, round));
             break;
           case "top":
-            push(`top-[${arb(value)}]`);
+            push(spacingClass("top", value, round));
             break;
           case "overflow":
             if (value === "hidden")
@@ -713,7 +1254,14 @@ var require_tailwind_mapper = __commonJS({
             applyBorder(value, push, leftover);
             break;
           case "border-radius":
-            value.includes(" ") ? leftover[prop] = value : push(`rounded-[${arb(value)}]`);
+            if (value.includes(" ")) {
+              leftover[prop] = value;
+            } else if (round && value === "50%") {
+              push("rounded-full");
+            } else {
+              const tok = round ? snapRadius(value) : null;
+              push(tok !== null ? `rounded${tok}` : `rounded-[${arb(value)}]`);
+            }
             break;
           case "box-shadow":
             push(`shadow-[${arb(value)}]`);
@@ -731,11 +1279,13 @@ var require_tailwind_mapper = __commonJS({
           case "color":
             push(`text-[${arb(value)}]`);
             break;
-          case "font-size":
-            push(`text-[${arb(value)}]`);
+          case "font-size": {
+            const tok = round ? nearest(pxNum(value) ?? -1, FONT_SIZE) : null;
+            push(tok ? `text-${tok}` : `text-[${arb(value)}]`);
             break;
+          }
           case "font-weight":
-            push(`font-[${arb(value)}]`);
+            push(round && FONT_WEIGHT[value] ? `font-${FONT_WEIGHT[value]}` : `font-[${arb(value)}]`);
             break;
           case "line-height":
             push(`leading-[${arb(value)}]`);
@@ -768,16 +1318,29 @@ var require_tailwind_mapper = __commonJS({
       }
       return { classes, leftover };
     }
-    function applyPadding(value, push, leftover) {
+    function snapRadius(value) {
+      const n = pxNum(value);
+      if (n === null || n < 0)
+        return null;
+      return nearest(n, RADIUS);
+    }
+    function applyPadding(value, push, leftover, round) {
       const parts = value.split(/\s+/);
       if (parts.length === 4) {
         const [t, r, b, l] = parts;
-        push(`pt-[${arb(t)}]`);
-        push(`pr-[${arb(r)}]`);
-        push(`pb-[${arb(b)}]`);
-        push(`pl-[${arb(l)}]`);
+        if (round && t === r && r === b && b === l) {
+          push(spacingClass("p", t, round));
+        } else if (round && t === b && l === r) {
+          push(spacingClass("py", t, round));
+          push(spacingClass("px", r, round));
+        } else {
+          push(spacingClass("pt", t, round));
+          push(spacingClass("pr", r, round));
+          push(spacingClass("pb", b, round));
+          push(spacingClass("pl", l, round));
+        }
       } else if (parts.length === 1) {
-        push(`p-[${arb(parts[0])}]`);
+        push(spacingClass("p", parts[0], round));
       } else {
         leftover.padding = value;
       }
@@ -808,6 +1371,7 @@ var require_html_renderer = __commonJS({
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.HtmlRenderer = void 0;
+    var style_ir_1 = require_style_ir();
     var tailwind_mapper_1 = require_tailwind_mapper();
     function escapeHtml(s) {
       return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
@@ -815,14 +1379,19 @@ var require_html_renderer = __commonJS({
     function styleString(css) {
       return Object.entries(css).map(([k, v]) => `${k}: ${v}`).join("; ");
     }
+    function svgPlaceholder(markup) {
+      return `data:image/svg+xml,${encodeURIComponent(markup)}`;
+    }
+    var IMAGE_PLACEHOLDER = svgPlaceholder("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid slice'><rect width='100' height='100' fill='#e5e7eb'/><circle cx='35' cy='34' r='9' fill='#c4cad3'/><path d='M16 78l22-26 15 15 16-16 17 27z' fill='#c4cad3'/></svg>");
+    var VECTOR_PLACEHOLDER = svgPlaceholder("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet'><rect width='24' height='24' rx='4' fill='#eef0f3'/><path d='M7 14l3.5-4 2.5 3 2-2.5L18 14z' fill='#b9c0cb'/><circle cx='9' cy='8.5' r='1.6' fill='#b9c0cb'/></svg>");
     var HtmlRenderer = class _HtmlRenderer {
       /** Render the Style IR tree into an HTML fragment string. */
       renderFragment(node, opts = {}) {
-        return this.render(node, opts.mode ?? "tailwind", 0);
+        return this.render(node, opts.mode ?? "tailwind", 0, opts.round ?? true);
       }
       /** Render a standalone, previewable HTML document (Tailwind Play CDN). */
       renderDocument(node, opts = {}) {
-        const body = this.render(node, opts.mode ?? "tailwind", 2);
+        const body = this.render(node, opts.mode ?? "tailwind", 2, opts.round ?? true);
         return this.wrapDocument(body, node.name || "Figma Export", this.fontLinks(node));
       }
       /** Wrap an arbitrary HTML fragment (e.g. LLM output) into a previewable document. */
@@ -867,21 +1436,30 @@ ${bodyHtml}
         }
         return links.join("\n");
       }
-      render(node, mode, depth) {
+      render(node, mode, depth, round) {
         const indent = "  ".repeat(depth);
-        const isVectorAsset = node.asset?.kind === "vector" && !!node.assetSrc;
-        const isImageAsset = node.asset?.kind === "image" && !!node.assetSrc;
+        const isVectorAsset = node.asset?.kind === "vector";
+        const isImageAsset = node.asset?.kind === "image";
         const extraStyle = {};
+        let baseCss = node.css;
         if (isImageAsset) {
-          extraStyle["background-image"] = `url(${node.assetSrc})`;
+          const imageUrl = node.assetSrc ? `url(${node.assetSrc})` : `url(${IMAGE_PLACEHOLDER})`;
+          const stack = node.css["background-image"];
+          extraStyle["background-image"] = stack ? stack.split(`url(${style_ir_1.IMAGE_FILL_TOKEN})`).join(imageUrl) : imageUrl;
+          if (!node.assetSrc) {
+            extraStyle["background-size"] = "cover";
+            extraStyle["background-position"] = "center";
+          }
+          const { ["background-image"]: _omit, ...rest } = node.css;
+          baseCss = rest;
         }
         const attrs = [];
         if (mode === "inline") {
-          const css = { ...node.css, ...extraStyle };
+          const css = { ...baseCss, ...extraStyle };
           if (Object.keys(css).length)
             attrs.push(`style="${escapeHtml(styleString(css))}"`);
         } else {
-          const { classes, leftover } = (0, tailwind_mapper_1.cssToTailwind)(node.css);
+          const { classes, leftover } = (0, tailwind_mapper_1.cssToTailwind)(baseCss, { round });
           const style = { ...leftover, ...extraStyle };
           if (classes.length)
             attrs.push(`class="${classes.join(" ")}"`);
@@ -891,7 +1469,15 @@ ${bodyHtml}
         attrs.push(`data-figma-name="${escapeHtml(node.name)}"`);
         const attrStr = attrs.length ? " " + attrs.join(" ") : "";
         if (isVectorAsset) {
-          return `${indent}<img${attrStr} src="${node.assetSrc}" alt="${escapeHtml(node.name)}" />`;
+          const src = node.assetSrc ?? VECTOR_PLACEHOLDER;
+          return `${indent}<img${attrStr} src="${src}" alt="${escapeHtml(node.name)}" />`;
+        }
+        if (node.runs && node.runs.length) {
+          const spans = node.runs.map((r) => {
+            const s = Object.keys(r.css).length ? ` style="${escapeHtml(styleString(r.css))}"` : "";
+            return `<span${s}>${escapeHtml(r.text)}</span>`;
+          }).join("");
+          return `${indent}<${node.tag}${attrStr}>${spans}</${node.tag}>`;
         }
         if (node.text !== void 0) {
           return `${indent}<${node.tag}${attrStr}>${escapeHtml(node.text)}</${node.tag}>`;
@@ -899,7 +1485,7 @@ ${bodyHtml}
         if (!node.children.length) {
           return `${indent}<${node.tag}${attrStr}></${node.tag}>`;
         }
-        const childHtml = node.children.map((c) => this.render(c, mode, depth + 1)).join("\n");
+        const childHtml = node.children.map((c) => this.render(c, mode, depth + 1, round)).join("\n");
         return `${indent}<${node.tag}${attrStr}>
 ${childHtml}
 ${indent}</${node.tag}>`;
@@ -931,45 +1517,213 @@ ${indent}</${node.tag}>`;
   }
 });
 
+// ../packages/figma-core/dist/converter/compact-design.js
+var require_compact_design = __commonJS({
+  "../packages/figma-core/dist/converter/compact-design.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.toCompactDesign = toCompactDesign2;
+    exports.stableStringify = stableStringify;
+    var MIN_TEMPLATE_NODES = 3;
+    var POSITIONAL_KEYS = /* @__PURE__ */ new Set(["left", "top", "width", "height"]);
+    function toCompactDesign2(root) {
+      const styles = {};
+      const styleIds = /* @__PURE__ */ new Map();
+      let styleSeq = 0;
+      const styleRef = (css) => {
+        if (!css || Object.keys(css).length === 0)
+          return void 0;
+        const key = stableStringify(css);
+        let id = styleIds.get(key);
+        if (!id) {
+          id = `s${++styleSeq}`;
+          styleIds.set(key, id);
+          styles[id] = css;
+        }
+        return id;
+      };
+      const hashCount = /* @__PURE__ */ new Map();
+      const build = (node) => {
+        const children = node.children.map(build);
+        const compact = { tag: node.tag };
+        if (node.name)
+          compact.name = node.name;
+        if (node.figmaType && node.figmaType !== "FRAME")
+          compact.type = node.figmaType;
+        const box = {};
+        const rest = {};
+        for (const [k, v] of Object.entries(node.css)) {
+          if (POSITIONAL_KEYS.has(k))
+            box[k] = v;
+          else
+            rest[k] = v;
+        }
+        if (Object.keys(box).length)
+          compact.box = box;
+        const sref = styleRef(rest);
+        if (sref)
+          compact.style = sref;
+        if (node.text !== void 0)
+          compact.text = node.text;
+        if (node.asset)
+          compact.asset = { kind: node.asset.kind };
+        if (children.length)
+          compact.children = children.map((c) => c.compact);
+        const hash = stableStringify({
+          t: compact.tag,
+          ty: compact.type,
+          b: compact.box,
+          s: compact.style,
+          x: compact.text,
+          a: compact.asset?.kind,
+          c: children.map((c) => c.hash)
+        });
+        hashCount.set(hash, (hashCount.get(hash) ?? 0) + 1);
+        const size = 1 + children.reduce((n, c) => n + c.size, 0);
+        return { compact, children, hash, size };
+      };
+      const built = build(root);
+      const elements = {};
+      const elementIds = /* @__PURE__ */ new Map();
+      let elemSeq = 0;
+      const templatize = (b) => {
+        if (b.compact.children) {
+          b.compact.children = b.children.map(templatize);
+        }
+        if (b.size >= MIN_TEMPLATE_NODES && (hashCount.get(b.hash) ?? 0) >= 2) {
+          let id = elementIds.get(b.hash);
+          if (!id) {
+            id = `e${++elemSeq}`;
+            elementIds.set(b.hash, id);
+            elements[id] = b.compact;
+          }
+          return { ref: id };
+        }
+        return b.compact;
+      };
+      const rootCompact = templatize(built);
+      return { name: root.name, globalVars: { styles }, elements, root: rootCompact };
+    }
+    function stableStringify(value) {
+      return JSON.stringify(value, (_k, v) => v && typeof v === "object" && !Array.isArray(v) ? Object.keys(v).sort().reduce((acc, k) => {
+        acc[k] = v[k];
+        return acc;
+      }, {}) : v);
+    }
+  }
+});
+
 // ../packages/figma-core/dist/assets/asset-resolver.js
 var require_asset_resolver = __commonJS({
   "../packages/figma-core/dist/assets/asset-resolver.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.AssetResolver = void 0;
+    var errors_1 = require_errors();
     var AssetResolver = class {
       constructor(figma, cache, logger) {
         this.figma = figma;
         this.cache = cache;
         this.logger = logger;
         this.fetchConcurrency = 8;
+        this.renderBatchSize = 20;
+        this.renderMaxAttempts = 4;
+        this.renderMaxBackoffMs = 4e3;
       }
       async resolve(root, fileKey, auth, scale = 2) {
         const vectors = [];
         const images = [];
         this.collect(root, vectors, images);
         if (!vectors.length && !images.length) {
-          return { vectors: 0, images: 0, embedded: 0, fromCache: 0 };
+          return {
+            vectors: 0,
+            images: 0,
+            embedded: 0,
+            fromCache: 0,
+            unresolvedVectors: 0,
+            unresolvedImages: 0,
+            rateLimited: false
+          };
         }
         let fromCache = 0;
         fromCache += await this.fillFromCache(vectors, fileKey, "svg", 1);
         fromCache += await this.fillImageFillsFromCache(images, fileKey);
         const vMissing = vectors.filter((n) => !n.assetSrc);
-        let svgUrls = {};
-        if (vMissing.length) {
-          try {
-            svgUrls = await this.figma.renderImages(fileKey, vMissing.map((n) => n.id), "svg", auth);
-            await this.retryMissing(vMissing, svgUrls, fileKey, "svg", auth, 1);
-          } catch (err) {
-            this.logger.warn(`Vector render failed (keeping cached vectors + image fills): ${err.message}`);
-          }
-        }
+        const { urls: svgUrls, rateLimited } = vMissing.length ? await this.renderVectors(vMissing.map((n) => n.id), fileKey, auth) : { urls: {}, rateLimited: false };
         const iMissing = images.filter((n) => !n.assetSrc && n.asset?.imageRef);
         let embedded = 0;
         embedded += await this.embed(vMissing, svgUrls, "image/svg+xml", fileKey, "svg", 1);
         embedded += await this.embedImageFills(iMissing, fileKey, auth);
+        const unresolvedVectors = vectors.filter((n) => !n.assetSrc).length;
+        const unresolvedImages = images.filter((n) => !n.assetSrc).length;
         this.logger.log(`Assets: ${vectors.length} vectors, ${images.length} image fills, ${fromCache} from cache, ${embedded} newly embedded`);
-        return { vectors: vectors.length, images: images.length, embedded, fromCache };
+        if (unresolvedVectors || unresolvedImages) {
+          this.logger.warn(`Assets unresolved: ${unresolvedVectors}/${vectors.length} vectors, ${unresolvedImages}/${images.length} image fills` + (rateLimited ? " (Figma render endpoint rate-limited; they fall back to placeholders)" : ""));
+        }
+        return {
+          vectors: vectors.length,
+          images: images.length,
+          embedded,
+          fromCache,
+          unresolvedVectors,
+          unresolvedImages,
+          rateLimited
+        };
+      }
+      /**
+       * Render vector node ids via /v1/images in small batches. Each batch is
+       * retried with capped exponential backoff on a 429 and isolated so an
+       * exhausted batch leaves only its own ids unresolved. Returns the merged
+       * id -> url map and whether any batch was rate-limited.
+       */
+      async renderVectors(ids, fileKey, auth) {
+        const urls = {};
+        let rateLimited = false;
+        for (let i = 0; i < ids.length; i += this.renderBatchSize) {
+          const batch = ids.slice(i, i + this.renderBatchSize);
+          try {
+            const rendered = await this.withRenderRetry(() => this.figma.renderImages(fileKey, batch, "svg", auth), (was429) => {
+              if (was429)
+                rateLimited = true;
+            });
+            for (const [id, url] of Object.entries(rendered)) {
+              if (url)
+                urls[id] = url;
+            }
+          } catch (err) {
+            if (err instanceof errors_1.FigmaApiError && err.status === 429)
+              rateLimited = true;
+            this.logger.warn(`Vector render batch [${i}, ${i + batch.length}) failed after retries: ${err.message}`);
+          }
+        }
+        return { urls, rateLimited };
+      }
+      /**
+       * Run a render call, retrying on a Figma 429 with capped exponential backoff.
+       * The backoff is deliberately capped (`renderMaxBackoffMs`) so a multi-hour
+       * `Retry-After` can never block the request — we exhaust a few quick attempts
+       * and then surface the failure instead of waiting.
+       */
+      async withRenderRetry(fn, onRateLimit) {
+        let lastErr;
+        for (let attempt = 0; attempt < this.renderMaxAttempts; attempt++) {
+          try {
+            return await fn();
+          } catch (err) {
+            lastErr = err;
+            const is429 = err instanceof errors_1.FigmaApiError && err.status === 429;
+            if (!is429 || attempt === this.renderMaxAttempts - 1)
+              throw err;
+            onRateLimit(true);
+            const backoff = Math.min(this.renderMaxBackoffMs, 500 * 2 ** attempt);
+            this.logger.warn(`Figma render rate-limited; retrying in ${backoff}ms (attempt ${attempt + 1}/${this.renderMaxAttempts})`);
+            await this.sleep(backoff);
+          }
+        }
+        throw lastErr;
+      }
+      sleep(ms) {
+        return new Promise((resolve2) => setTimeout(resolve2, ms));
       }
       assetKey(fileKey, id, format, scale) {
         return `asset:${fileKey}:${id}:${format}:${scale}`;
@@ -1057,22 +1811,6 @@ var require_asset_resolver = __commonJS({
         for (const child of node.children)
           this.collect(child, vectors, images);
       }
-      async retryMissing(nodes, urlMap, fileKey, format, auth, scale) {
-        const missing = nodes.filter((n) => !urlMap[n.id]).map((n) => n.id);
-        if (!missing.length)
-          return;
-        try {
-          const retry = await this.figma.renderImages(fileKey, missing, format, auth, scale);
-          for (const [id, url] of Object.entries(retry)) {
-            if (url)
-              urlMap[id] = url;
-          }
-          const stillMissing = missing.filter((id) => !urlMap[id]).length;
-          this.logger.log(`Retried ${missing.length} missing ${format} assets; ${stillMissing} still unrendered`);
-        } catch (err) {
-          this.logger.warn(`Asset retry (${format}) failed: ${err.message}`);
-        }
-      }
       async embed(nodes, urlMap, mime, fileKey, format, scale) {
         let count = 0;
         for (let i = 0; i < nodes.length; i += this.fetchConcurrency) {
@@ -1580,16 +2318,22 @@ var require_convert = __commonJS({
         const node = await this.client.fetchNode(target2.fileKey, target2.nodeId, auth);
         const ir = this.styleIr.convert(node);
         let assetWarning;
-        if (options.assets !== false) {
+        if (options.assets === true) {
           try {
-            await this.assets.resolve(ir, target2.fileKey, auth, options.assetScale ?? 2);
+            const r = await this.assets.resolve(ir, target2.fileKey, auth, options.assetScale ?? 2);
+            const unresolved = r.unresolvedVectors + r.unresolvedImages;
+            if (unresolved > 0) {
+              assetWarning = `${unresolved} asset(s) could not be rendered (${r.unresolvedVectors} vectors, ${r.unresolvedImages} image fills) and fall back to placeholders` + (r.rateLimited ? ". Figma\u2019s render endpoint is rate-limited \u2014 retry later for full fidelity." : ".");
+              this.logger.warn(assetWarning);
+            }
           } catch (err) {
             assetWarning = `Assets not fully resolved: ${err.message}`;
             this.logger.warn(assetWarning);
           }
         }
         const mode = options.mode ?? "tailwind";
-        let fragment = this.renderer.renderFragment(ir, { mode });
+        const round = options.round ?? true;
+        let fragment = this.renderer.renderFragment(ir, { mode, round });
         let usedLlm = false;
         if (options.llm && this.restructure?.enabled) {
           fragment = await this.restructure.restructure(fragment);
@@ -1695,7 +2439,7 @@ var require_dist = __commonJS({
       for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p)) __createBinding(exports2, m, p);
     };
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.createFigmaCore = exports.countNodes = exports.FigmaConverter = exports.stripHeavyAssets = exports.stripCodeFence = exports.runAgent = exports.RefineAgent = exports.LlmRestructure = exports.ollamaConfigFromEnv = exports.OllamaClient = exports.AssetResolver = exports.px = exports.figmaColorToCss = exports.cssToTailwind = exports.HtmlRenderer = exports.StyleIr = exports.resolveFigmaTarget = exports.normalizeNodeId = exports.parseFigmaUrl = exports.FigmaClient = exports.NoopLogger = exports.ConsoleLogger = exports.DiskCache = exports.MemoryCache = exports.FigmaInputError = exports.FigmaApiError = void 0;
+    exports.createFigmaCore = exports.countNodes = exports.FigmaConverter = exports.stripHeavyAssets = exports.stripCodeFence = exports.runAgent = exports.RefineAgent = exports.LlmRestructure = exports.ollamaConfigFromEnv = exports.OllamaClient = exports.AssetResolver = exports.stableStringify = exports.toCompactDesign = exports.px = exports.figmaColorToCss = exports.cssToTailwind = exports.HtmlRenderer = exports.IMAGE_FILL_TOKEN = exports.StyleIr = exports.resolveFigmaTarget = exports.normalizeNodeId = exports.parseFigmaUrl = exports.FigmaClient = exports.NoopLogger = exports.ConsoleLogger = exports.DiskCache = exports.MemoryCache = exports.FigmaInputError = exports.FigmaApiError = void 0;
     var errors_1 = require_errors();
     Object.defineProperty(exports, "FigmaApiError", { enumerable: true, get: function() {
       return errors_1.FigmaApiError;
@@ -1735,6 +2479,9 @@ var require_dist = __commonJS({
     Object.defineProperty(exports, "StyleIr", { enumerable: true, get: function() {
       return style_ir_1.StyleIr;
     } });
+    Object.defineProperty(exports, "IMAGE_FILL_TOKEN", { enumerable: true, get: function() {
+      return style_ir_1.IMAGE_FILL_TOKEN;
+    } });
     var html_renderer_1 = require_html_renderer();
     Object.defineProperty(exports, "HtmlRenderer", { enumerable: true, get: function() {
       return html_renderer_1.HtmlRenderer;
@@ -1750,6 +2497,13 @@ var require_dist = __commonJS({
     Object.defineProperty(exports, "px", { enumerable: true, get: function() {
       return color_1.px;
     } });
+    var compact_design_1 = require_compact_design();
+    Object.defineProperty(exports, "toCompactDesign", { enumerable: true, get: function() {
+      return compact_design_1.toCompactDesign;
+    } });
+    Object.defineProperty(exports, "stableStringify", { enumerable: true, get: function() {
+      return compact_design_1.stableStringify;
+    } });
     var asset_resolver_1 = require_asset_resolver();
     Object.defineProperty(exports, "AssetResolver", { enumerable: true, get: function() {
       return asset_resolver_1.AssetResolver;
@@ -1805,31 +2559,37 @@ var import_core = __toESM(require_dist(), 1);
 import { promises as fs2 } from "fs";
 import * as path2 from "path";
 
-// src/credentials.ts
+// src/settings.ts
 import { promises as fs } from "fs";
 import * as os from "os";
 import * as path from "path";
 var DIR = path.join(os.homedir(), ".figma-mcp");
-var FILE = path.join(DIR, "credentials.json");
-function credentialsPath() {
+var FILE = path.join(DIR, "settings.json");
+function settingsPath() {
   return FILE;
 }
-async function loadCredentials() {
+async function loadSettings() {
   try {
     const raw = await fs.readFile(FILE, "utf8");
-    return JSON.parse(raw);
+    const parsed = JSON.parse(raw);
+    if (!parsed.env || typeof parsed.env !== "object") parsed.env = {};
+    return parsed;
   } catch {
-    return {};
+    return { env: {} };
   }
 }
-async function saveCredentials(patch) {
-  const current = await loadCredentials();
-  const next = { ...current, ...patch };
+async function saveSettings(patch) {
+  const current = await loadSettings();
+  const next = {
+    ...current,
+    ...patch,
+    env: { ...current.env ?? {}, ...patch.env ?? {} }
+  };
   await fs.mkdir(DIR, { recursive: true });
   await fs.writeFile(FILE, JSON.stringify(next, null, 2), { mode: 384 });
   return next;
 }
-async function clearCredentials() {
+async function clearSettings() {
   try {
     await fs.unlink(FILE);
   } catch {
@@ -1839,24 +2599,25 @@ async function clearCredentials() {
 // src/refresh.ts
 var SKEW_MS = 6e4;
 async function ensureFreshApiToken(apiUrl, force = false) {
-  const creds = await loadCredentials();
-  if (!creds.apiToken || !creds.refreshToken) return;
+  const settings = await loadSettings();
+  const apiToken = settings.env?.FIGMA_MCP_TOKEN;
+  if (!apiToken || !settings.refreshToken) return;
   if (!force) {
-    if (!creds.apiTokenExpiresAt) return;
-    if (Date.now() < creds.apiTokenExpiresAt - SKEW_MS) return;
+    if (!settings.apiTokenExpiresAt) return;
+    if (Date.now() < settings.apiTokenExpiresAt - SKEW_MS) return;
   }
   const base = apiUrl.replace(/\/+$/, "");
   try {
     const res = await fetch(`${base}/auth/figma/cli-refresh`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ refresh_token: creds.refreshToken })
+      body: JSON.stringify({ refresh_token: settings.refreshToken })
     });
     if (!res.ok) return;
     const t = await res.json();
-    await saveCredentials({
-      apiToken: t.access_token,
-      refreshToken: t.refresh_token ?? creds.refreshToken,
+    await saveSettings({
+      env: { FIGMA_MCP_TOKEN: t.access_token },
+      refreshToken: t.refresh_token ?? settings.refreshToken,
       apiTokenExpiresAt: t.expires_in ? Date.now() + t.expires_in * 1e3 : void 0
     });
   } catch {
@@ -1864,13 +2625,15 @@ async function ensureFreshApiToken(apiUrl, force = false) {
 }
 
 // src/config.ts
+var DEFAULT_API_URL = "https://figmacoder-api.sitenow.cloud";
 async function resolveConfig(overrides = {}) {
-  let creds = await loadCredentials();
-  const mode = overrides.mode ?? process.env.FIGMA_MCP_MODE ?? "auto";
-  const pat = overrides.pat ?? process.env.FIGMA_PAT ?? process.env.FIGMA_TOKEN ?? creds.pat;
-  const apiUrl = overrides.apiUrl ?? process.env.FIGMA_MCP_API ?? creds.apiUrl;
+  let settings = await loadSettings();
+  let env = settings.env ?? {};
+  const mode = overrides.mode ?? process.env.FIGMA_MCP_MODE ?? env.FIGMA_MCP_MODE ?? "auto";
+  const pat = overrides.pat ?? process.env.FIGMA_PAT ?? process.env.FIGMA_TOKEN ?? env.FIGMA_PAT ?? env.FIGMA_TOKEN;
+  const apiUrl = overrides.apiUrl ?? process.env.FIGMA_MCP_API ?? env.FIGMA_MCP_API ?? DEFAULT_API_URL;
   const apiTokenOverride = overrides.apiToken ?? process.env.FIGMA_MCP_TOKEN;
-  const outDir = overrides.outDir ?? process.env.FIGMA_MCP_OUT_DIR ?? `${process.cwd()}/figma-output`;
+  const outDir = overrides.outDir ?? process.env.FIGMA_MCP_OUT_DIR ?? env.FIGMA_MCP_OUT_DIR ?? `${process.cwd()}/figma-output`;
   let effectiveMode;
   if (mode === "local") {
     effectiveMode = "local";
@@ -1881,9 +2644,10 @@ async function resolveConfig(overrides = {}) {
   }
   if (effectiveMode === "remote" && apiUrl && !apiTokenOverride) {
     await ensureFreshApiToken(apiUrl);
-    creds = await loadCredentials();
+    settings = await loadSettings();
+    env = settings.env ?? {};
   }
-  const apiToken = apiTokenOverride ?? creds.apiToken;
+  const apiToken = apiTokenOverride ?? env.FIGMA_MCP_TOKEN;
   return { mode, effectiveMode, pat, apiUrl, apiToken, outDir };
 }
 function describeConfig(cfg) {
@@ -1907,7 +2671,7 @@ async function post(cfg, route, body) {
   let res = await fetch(url, { method: "POST", headers: authHeaders(cfg), body: payload });
   if (res.status === 401 && cfg.apiToken) {
     await ensureFreshApiToken(cfg.apiUrl, true);
-    const refreshed = (await loadCredentials()).apiToken;
+    const refreshed = (await loadSettings()).env?.FIGMA_MCP_TOKEN;
     if (refreshed && refreshed !== cfg.apiToken) {
       res = await fetch(url, { method: "POST", headers: authHeaders(cfg, refreshed), body: payload });
     }
@@ -1936,7 +2700,9 @@ function remoteExtractStyles(cfg, body) {
 var INLINE_LIMIT = 1e5;
 var core;
 var corePat;
+var coreOverride;
 function getCore(pat) {
+  if (coreOverride) return coreOverride;
   if (!core || corePat !== pat) {
     core = (0, import_core.createFigmaCore)({ figmaToken: pat });
     corePat = pat;
@@ -1966,6 +2732,7 @@ async function convertFigmaToHtml(args, overrides = {}) {
       document: args.document ?? true,
       assets: args.assets,
       assetScale: args.assetScale,
+      round: args.round,
       llm: args.llm
     });
     result = { name: r.name, nodeCount: r.nodeCount, mode: r.mode, llm: r.llm, html: r.html };
@@ -1976,6 +2743,7 @@ async function convertFigmaToHtml(args, overrides = {}) {
       document: args.document ?? true,
       assets: args.assets,
       assetScale: args.assetScale,
+      round: args.round,
       llm: args.llm
     });
     result = { name: r.name, nodeCount: r.nodeCount, mode: r.mode, llm: r.llm, html: r.html, previewUrl: r.previewUrl };
@@ -2003,23 +2771,33 @@ async function getFigmaData(args, overrides = {}) {
   } else {
     ir = await remoteExtractStyles(cfg, target(args));
   }
-  const json = JSON.stringify(ir, null, 2);
   const nodeCount = countIr(ir);
+  const compact = (0, import_core.toCompactDesign)(ir);
+  const json = JSON.stringify(compact);
+  const legend = [
+    "Compact design format (token-optimized):",
+    "- `globalVars.styles`: id -> CSS declaration map. A node's full CSS = { ...globalVars.styles[node.style], ...node.box }.",
+    "- `node.box`: per-node left/top/width/height (kept inline because unique).",
+    '- `elements`: id -> a subtree that repeats; a node `{ref:"e1"}` is an instance of elements.e1.',
+    "- `root`: the node tree (each node: tag, optional type/name/text/asset/style/box/children)."
+  ].join("\n");
   if (json.length <= INLINE_LIMIT) {
-    return [`Style IR for "${ir.name}" (${nodeCount} nodes, ${describeConfig(cfg)}):`, "", json].join("\n");
+    return [
+      `Compact design for "${compact.name}" (${nodeCount} nodes, ${describeConfig(cfg)}):`,
+      legend,
+      "",
+      json
+    ].join("\n");
   }
-  const filePath = await writeOut(cfg.outDir, `${sanitize(ir.name)}.ir.json`, json);
+  const filePath = await writeOut(cfg.outDir, `${sanitize(compact.name)}.design.json`, json);
   return [
-    `Style IR for "${ir.name}" is large (${nodeCount} nodes, ${(json.length / 1024).toFixed(1)} KB) \u2014 written to a file.`,
+    `Compact design for "${compact.name}" is large (${nodeCount} nodes, ${(json.length / 1024).toFixed(1)} KB) \u2014 written to a file.`,
     `- file: ${filePath}`,
-    `- root: <${ir.tag}> figmaType=${ir.figmaType}, css keys=${Object.keys(ir.css || {}).length}`,
+    `- ${Object.keys(compact.globalVars.styles).length} shared styles, ${Object.keys(compact.elements).length} repeated-subtree templates`,
     "",
-    "Top-level children:",
-    ...(ir.children || []).map(
-      (c, i) => `  ${i}. "${c.name}" <${c.tag}> ${c.figmaType} (${(c.children || []).length} children)`
-    ),
+    legend,
     "",
-    "Read the file for the full tree (each node has exact `css`)."
+    "Read the file for the full tree."
   ].join("\n");
 }
 function countIr(node) {
@@ -2049,7 +2827,7 @@ function buildServer() {
     "get_figma_data",
     {
       title: "Get Figma design data",
-      description: "Fetch the deterministic Style IR (exact CSS per node) for a Figma file or node, so an agent can reason about the design and generate code itself. Small trees are returned inline; large trees are written to a JSON file and summarised.",
+      description: "Fetch a Figma file/node as a compact, token-efficient design tree for an agent to reason about and generate code from. Styles are deduped into globalVars.styles (nodes carry short `style` refs), per-node position/size is inline as `box`, and repeated subtrees are hoisted into `elements` ({ref}). Small results are returned inline; large ones are written to a JSON file and summarised.",
       inputSchema: targetShape
     },
     safe((a) => getFigmaData(a))
@@ -2058,13 +2836,16 @@ function buildServer() {
     "convert_figma_to_html",
     {
       title: "Convert Figma to HTML + Tailwind",
-      description: "Convert a Figma file/node into finished, self-contained HTML + Tailwind (deterministic Style IR, assets inlined, optional LLM restructure). The HTML is written to a file; a compact summary + path is returned to keep context small.",
+      description: "Convert a Figma file/node into finished, self-contained HTML + Tailwind (deterministic Style IR, optional LLM restructure). Asset inlining is off by default (placeholders shown for images/vectors); pass assets:true to render & inline them. The HTML is written to a file; a compact summary + path is returned to keep context small.",
       inputSchema: {
         ...targetShape,
         mode: z.enum(["tailwind", "inline"]).optional().describe("Output mode. Default 'tailwind'."),
         document: z.boolean().optional().describe("Emit a full HTML document (default true) vs a fragment."),
-        assets: z.boolean().optional().describe("Export & inline vectors/images as data URIs. Default true."),
+        assets: z.boolean().optional().describe("Export & inline vectors/images as data URIs. Default false (placeholders shown instead)."),
         assetScale: z.number().min(1).max(4).optional().describe("Raster export scale (1-4). Default 2."),
+        round: z.boolean().optional().describe(
+          "Snap on-grid values to idiomatic Tailwind scale tokens (p-4, gap-6, rounded-lg, text-2xl); off-grid values stay exact. Default true. Set false for exact arbitrary values everywhere."
+        ),
         llm: z.boolean().optional().describe("Run the LLM restructure pass (needs OLLAMA_* config). Default false."),
         outFile: z.string().optional().describe("Override the output file name (within the output dir).")
       }
@@ -2100,9 +2881,7 @@ var page = (title, body) => `<!doctype html><meta charset="utf-8"><title>figma-c
 async function login(opts = {}) {
   const cfg = await resolveConfig({ apiUrl: opts.apiUrl });
   if (!cfg.apiUrl) {
-    throw new Error(
-      "OAuth login needs the backend URL. Set it with `figma-coder-mcp set-api <URL>` or FIGMA_MCP_API."
-    );
+    throw new Error("OAuth login needs the backend URL. Set FIGMA_MCP_API or pass --api <URL>.");
   }
   const base = cfg.apiUrl.replace(/\/+$/, "");
   const tokens = await new Promise((resolve2, reject) => {
@@ -2155,13 +2934,15 @@ If it doesn't open automatically, visit:
       openBrowser(authorizeUrl);
     });
   });
-  await saveCredentials({
-    apiUrl: base,
-    apiToken: tokens.access_token,
+  await saveSettings({
+    env: {
+      FIGMA_MCP_API: base,
+      FIGMA_MCP_TOKEN: tokens.access_token
+    },
     refreshToken: tokens.refresh_token,
     apiTokenExpiresAt: tokens.expires_in ? Date.now() + tokens.expires_in * 1e3 : void 0
   });
-  console.error(`\u2713 Saved Figma OAuth session to ${credentialsPath()}`);
+  console.error(`\u2713 Saved Figma OAuth session to ${settingsPath()}`);
   console.error("Run the MCP in remote mode (set FIGMA_MCP_MODE=remote) to use it.");
 }
 
@@ -2192,29 +2973,31 @@ function targetFrom(value, flags) {
   if (/figma\.com\//.test(value)) return { figmaUrl: value, nodeId };
   return { fileKey: value, nodeId };
 }
-var HELP = `figma-coder-mcp \u2014 Figma -> HTML/Tailwind for AI agents (MCP server + CLI)
+var HELP = `figma-coder-mcp: Figma -> HTML/Tailwind for AI agents (MCP server + CLI)
 
 Usage:
   figma-coder-mcp [serve]                 Start the MCP server over stdio (default)
   figma-coder-mcp convert <url|key> [..]  One-off convert to HTML (writes a file)
   figma-coder-mcp data <url|key> [..]     One-off: print/save the Style IR
   figma-coder-mcp set-token <PAT>         Store a Figma personal access token (local mode)
-  figma-coder-mcp set-api <URL>           Store the backend converter URL (remote mode)
   figma-coder-mcp login [--api <URL>]     Log in with Figma via OAuth (remote mode)
   figma-coder-mcp status                  Show how requests will be served (no secrets)
-  figma-coder-mcp logout                  Remove stored credentials
+  figma-coder-mcp logout                  Remove stored settings
   figma-coder-mcp help                    Show this help
 
 Common flags (convert/data):
   --node <id>     Node id ("1-23" or "1:23")
   --mode <m>      tailwind | inline (convert)
-  --no-assets     Skip asset inlining (convert)
+  --assets        Render & inline assets (convert; off by default, placeholders shown)
+  --no-round      Keep exact arbitrary values (default snaps on-grid values to Tailwind tokens)
   --llm           Run LLM restructure (convert; needs OLLAMA_* env)
   --out <file>    Output file name (convert)
 
 Config (env or stored): FIGMA_PAT, FIGMA_MCP_API, FIGMA_MCP_TOKEN, FIGMA_MCP_MODE,
 FIGMA_MCP_OUT_DIR, FIGMA_MCP_NO_BROWSER (skip auto-opening the browser on login).
-Auto mode prefers local (PAT) so it works even if the backend is down.`;
+Auto mode prefers local (PAT) so it works even if the backend is down; with no PAT
+it uses the hosted backend by default (override the URL with FIGMA_MCP_API).
+Stored settings live in ~/.figma-mcp/settings.json under "env" (edit it directly if you like).`;
 async function main() {
   const [positionals, flags] = parseArgs(process.argv.slice(2));
   const cmd = positionals[0] ?? "serve";
@@ -2227,7 +3010,9 @@ async function main() {
       const text = await convertFigmaToHtml({
         ...targetFrom(positionals[1], flags),
         mode: flags.mode === "inline" ? "inline" : flags.mode === "tailwind" ? "tailwind" : void 0,
-        assets: flags["no-assets"] ? false : void 0,
+        assets: flags.assets ? true : flags["no-assets"] ? false : void 0,
+        round: flags["no-round"] ? false : void 0,
+        // default true (in core)
         llm: flags.llm === true,
         outFile: typeof flags.out === "string" ? flags.out : void 0
       });
@@ -2242,15 +3027,8 @@ async function main() {
     case "set-token": {
       const pat = positionals[1];
       if (!pat) throw new Error("Usage: figma-coder-mcp set-token <PAT>");
-      await saveCredentials({ pat });
-      console.log(`Stored Figma PAT in ${credentialsPath()}`);
-      return;
-    }
-    case "set-api": {
-      const url = positionals[1];
-      if (!url) throw new Error("Usage: figma-coder-mcp set-api <URL>");
-      await saveCredentials({ apiUrl: url });
-      console.log(`Stored backend URL (${url}) in ${credentialsPath()}`);
+      await saveSettings({ env: { FIGMA_PAT: pat } });
+      console.log(`Stored FIGMA_PAT in ${settingsPath()}`);
       return;
     }
     case "login": {
@@ -2260,12 +3038,12 @@ async function main() {
     case "status": {
       const cfg = await resolveConfig();
       console.log(describeConfig(cfg));
-      console.log(`credentials: ${credentialsPath()}`);
+      console.log(`settings: ${settingsPath()}`);
       return;
     }
     case "logout":
-      await clearCredentials();
-      console.log("Cleared stored credentials.");
+      await clearSettings();
+      console.log("Cleared stored settings.");
       return;
     case "help":
     case "--help":