@clovis500c/figma-bridge 1.14.0 → 1.14.2

package/dist/server.js

@@ -214,7 +214,7 @@ var init_setup = __esm(() => {
 });
 
 // package.json
-var version = "1.14.0";
+var version = "1.14.2";
 var init_package = () => {};
 
 // node_modules/zod/v3/helpers/util.js
@@ -27735,6 +27735,8 @@ function decide(n, opts) {
   const strokes = visible(n.strokes);
   const other = (n.effects ?? []).filter((e) => e.type !== "DROP_SHADOW");
   const hasChildren = !!n.children?.some((c) => !c.hidden);
+  if (n.rasterize && raster !== "none")
+    return { kind: "picture", approximations: ["image file unreadable: pictured as it looks"] };
   if (n.vector || VECTOR_TYPES.includes(n.type)) {
     return raster === "none" ? { kind: "frame", approximations: ["vector shape skipped (rasterize is none)"] } : { kind: "picture", approximations };
   }
@@ -27896,7 +27898,10 @@ class Mapper {
     const geo = this.opts.mode === "offset" ? [["AnchorPoint", V2(0.5, 0.5)], ["Position", U2(0.5, 0, 0.5, 0)], ["Size", U2(0, root.w, 0, root.h)]] : fullScreen ? [["AnchorPoint", V2(0.5, 0.5)], ["Position", U2(0.5, 0, 0.5, 0)], ["Size", U2(1, 0, 1, 0)]] : [["AnchorPoint", V2(0.5, 0.5)], ["Position", U2(0.5, 0, 0.5, 0)], ["Size", U2(root.w / tw, 0, root.h / th, 0)]];
     top.props = top.props.filter(([k]) => !["AnchorPoint", "Position", "Size", "LayoutOrder", "ZIndex", "AutomaticSize"].includes(k));
     top.props.splice(1, 0, ...geo);
-    top.children.push(this.inst("UIAspectRatioConstraint", "UIAspectRatioConstraint", [["AspectRatio", F(root.w / root.h)]]));
+    const ratio = [["AspectRatio", F(root.w / root.h)]];
+    if (this.opts.mode !== "offset" && !fullScreen)
+      ratio.push(["DominantAxis", E("DominantAxis", "Height")]);
+    top.children.push(this.inst("UIAspectRatioConstraint", "UIAspectRatioConstraint", ratio));
     const out = this.opts.asRootFrame ? top : this.inst("ScreenGui", `${(this.names.get(root.id) ?? "Ui").replace(/Gui$/, "")}Gui`, [["ResetOnSpawn", B(false)], ["ZIndexBehavior", E("ZIndexBehavior", "Sibling")], ["IgnoreGuiInset", B(true)]], [top]);
     dedupe(out);
     return out;
@@ -27934,7 +27939,12 @@ class Mapper {
       out.push(["LayoutOrder", I(index + 1)]);
       return out;
     }
-    const c = n.constraints ?? { h: "MIN", v: "MIN" };
+    const c = { ...n.constraints ?? { h: "MIN", v: "MIN" } };
+    const centered = this.centered(n, parent);
+    if (centered.x && c.h === "MIN")
+      c.h = "CENTER";
+    if (centered.y && c.v === "MIN")
+      c.v = "CENTER";
     const axis = (pos, size, total, k) => {
       const end = total - pos - size;
       if (k === "SCALE" || f.scale) {
@@ -27961,6 +27971,15 @@ class Mapper {
     out.push(["ZIndex", I(index + 1)]);
     return out;
   }
+  centered(n, parent) {
+    if (!parent || parent.layout && !n.absolute)
+      return { x: false, y: false };
+    const t = n.text?.autoResize;
+    const hugX = t === "WIDTH_AND_HEIGHT" || !n.text && n.sizing?.h === "HUG";
+    const hugY = t === "WIDTH_AND_HEIGHT" || t === "HEIGHT" || !n.text && n.sizing?.v === "HUG";
+    const near = (pos, size, total) => Math.abs(pos + size / 2 - total / 2) <= 1.5 && size < total;
+    return { x: hugX && near(n.x, n.w, parent.w), y: hugY && near(n.y, n.h, parent.h) };
+  }
   automaticSize(n, d) {
     const hug = this.hugs(n, d);
     if (!hug.w && !hug.h)
@@ -28181,6 +28200,9 @@ class Mapper {
       const isButton = !!n.clickable || BUTTON_NAME.test(n.name);
       className = isButton ? "TextButton" : "TextLabel";
       props = this.textProps(n);
+      const centered = this.centered(n, parent);
+      const auto = n.text.autoResize === "WIDTH_AND_HEIGHT" || n.text.autoResize === "HEIGHT";
+      props = props.map(([k, v]) => k === "TextXAlignment" && centered.x ? [k, E("TextXAlignment", "Center")] : k === "TextYAlignment" && auto && n.text.valign === "TOP" ? [k, E("TextYAlignment", "Center")] : [k, v]);
       if (isButton)
         props.push(["AutoButtonColor", B(false)]);
       if ((n.effects ?? []).some((e) => e.type === "DROP_SHADOW"))
@@ -28188,7 +28210,8 @@ class Mapper {
       const size = props.find(([k]) => k === "TextSize")[1].v;
       const tight = n.text.autoResize === "WIDTH_AND_HEIGHT" || n.text.autoResize === "HEIGHT";
       const max = this.scaleOnly && tight ? size * 2 : size;
-      children.push(this.inst("UITextSizeConstraint", "UITextSizeConstraint", [["MaxTextSize", I(max)], ["MinTextSize", I(Math.max(1, Math.round(size * 0.5)))]]));
+      const min = this.scaleOnly ? 1 : Math.max(1, Math.round(size * 0.5));
+      children.push(this.inst("UITextSizeConstraint", "UITextSizeConstraint", [["MaxTextSize", I(max)], ["MinTextSize", I(min)]]));
       return this.inst(className, this.label(n, isButton ? "button" : "text"), [...common, ...props], children, n.id);
     }
     if (d.kind === "picture") {
@@ -28230,20 +28253,14 @@ class Mapper {
     if (d.kind === "panel") {
       this.counts.pictures++;
       const a = this.assetUrl(`${n.id}:panel`, n);
-      const scale = this.opts.scale ?? 2;
+      const scale = a.scale ?? this.opts.scale ?? 2;
       const inset = Math.ceil((Math.max(0, ...n.radius ?? [0]) + (n.strokeWeight ?? 0) + 2) * scale);
-      const pw = Math.round((a.size?.w ?? n.w) * scale);
-      const ph = Math.round((a.size?.h ?? n.h) * scale);
+      const pw = a.px?.w ?? Math.round((a.size?.w ?? n.w) * scale);
+      const ph = a.px?.h ?? Math.round((a.size?.h ?? n.h) * scale);
       const ix = Math.min(inset, Math.floor(pw / 2) - 1);
       const iy = Math.min(inset, Math.floor(ph / 2) - 1);
       className = button ? "ImageButton" : "ImageLabel";
-      props = [
-        ["BackgroundTransparency", F(1)],
-        ["Image", { t: "Content", url: a.url }],
-        ["ScaleType", E("ScaleType", "Slice")],
-        ["SliceCenter", { t: "Rect", x0: ix, y0: iy, x1: pw - ix, y1: ph - iy }],
-        ["SliceScale", F(1 / scale)]
-      ];
+      props = [["BackgroundTransparency", F(1)], ["Image", { t: "Content", url: a.url }], ...this.imageScaling(n, ix, iy, pw, ph, scale)];
       if (opacity < 1)
         props.push(["ImageTransparency", F(1 - opacity)]);
       if (button)
@@ -28319,14 +28336,27 @@ class Mapper {
     const flavor = button ? "button" : fills.length || visible(n.strokes).length || d.kind === "panel" ? "frame" : "container";
     return this.inst(className, this.label(n, flavor), [...common, ...props], children, n.id);
   }
+  imageScaling(n, ix, iy, pw, ph, scale) {
+    if (this.scaleOnly)
+      return [["ScaleType", E("ScaleType", "Stretch")]];
+    const resizes = n.grow || n.stretch || n.sizing?.h === "FILL" || n.sizing?.v === "FILL" || n.sizing?.h === "HUG" || n.sizing?.v === "HUG";
+    if (this.opts.mode === "offset" && !resizes)
+      return [["ScaleType", E("ScaleType", "Stretch")]];
+    return [
+      ["ScaleType", E("ScaleType", "Slice")],
+      ["SliceCenter", { t: "Rect", x0: ix, y0: iy, x1: pw - ix, y1: ph - iy }],
+      ["SliceScale", F(1 / scale)]
+    ];
+  }
   pictureGeometry(n, a, geo, parent) {
     if (!a.offset || !a.size || Math.abs(a.offset.x) < 0.5 && Math.abs(a.offset.y) < 0.5 && Math.abs(a.size.w - n.w) < 0.5 && Math.abs(a.size.h - n.h) < 0.5)
       return geo;
     const f = this.frameOf(n, parent);
     const dw = a.size.w - n.w;
     const dh = a.size.h - n.h;
-    const ox = a.offset.x;
-    const oy = a.offset.y;
+    const anchor = geo.find(([k]) => k === "AnchorPoint")?.[1];
+    const ox = a.offset.x + (anchor?.x ?? 0) * dw;
+    const oy = a.offset.y + (anchor?.y ?? 0) * dh;
     return geo.map(([k, v]) => {
       if (v.t !== "UDim2" || k !== "Size" && k !== "Position")
         return [k, v];
@@ -28348,7 +28378,7 @@ var num = (v) => Math.round(v * 1e4) / 1e4, S = (v) => ({ t: "string", v }), B =
 var init_map2 = __esm(() => {
   init_naming();
   init_fonts();
-  BUTTON_NAME = /button|btn|\bcta\b/i;
+  BUTTON_NAME = /button|btn|\bcta\b|^(close|back|buy|confirm|cancel|next|previous|prev|exit|play|claim|equip|purchase)$/i;
   VECTOR_TYPES = ["VECTOR", "BOOLEAN_OPERATION", "STAR", "POLYGON", "LINE"];
   ICON_WORDS = ["Icon", "Logo", "Image", "Illustration", "Avatar", "Emoji"];
   IMAGE_WORDS = ["Image", "Icon", "Avatar", "Logo", "Thumbnail", "Picture", "Photo", "Banner", "Background", "Illustration", "Art", "Cover"];
@@ -28476,15 +28506,23 @@ function toLuau(root, opts = {}) {
   const lines = [];
   const emit = (i, parentVar, depth) => {
     const v = identifier(i.name, i.className, used);
+    const outer = "\t".repeat(Math.max(0, depth - 1));
+    const tab = "\t".repeat(depth);
+    const add = (line) => lines.push(tab + line.replace(/\n/g, `
+${tab}`));
     if (!/^UI/.test(i.className) && depth <= 2 && parentVar)
-      lines.push("", `-- ${i.name.replace(/\n/g, " ")}`);
-    lines.push(`local ${v} = Instance.new(${luauString(i.className)})`);
+      lines.push("", `${outer}-- ${i.name.replace(/\n/g, " ")}`);
+    if (parentVar)
+      lines.push(`${outer}do`);
+    add(`local ${v} = Instance.new(${luauString(i.className)})`);
     for (const [k, val] of i.props)
-      lines.push(`${v}.${k} = ${luauValue(val)}`);
+      add(`${v}.${k} = ${luauValue(val)}`);
     for (const c of i.children)
       emit(c, v, depth + 1);
-    if (parentVar)
-      lines.push(`${v}.Parent = ${parentVar}`);
+    if (parentVar) {
+      add(`${v}.Parent = ${parentVar}`);
+      lines.push(`${outer}end`);
+    }
     return v;
   };
   const header = [
@@ -28516,6 +28554,7 @@ function substituteAssets(text, ids) {
 var ENUMS, n = (v) => String(Math.round(v * 1e4) / 1e4), xml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), KEYWORDS, rgb = (v) => Math.round(v * 255);
 var init_output = __esm(() => {
   ENUMS = {
+    DominantAxis: { Width: 0, Height: 1 },
     ZIndexBehavior: { Global: 0, Sibling: 1 },
     FillDirection: { Horizontal: 0, Vertical: 1 },
     HorizontalAlignment: { Center: 0, Left: 1, Right: 2 },
@@ -28655,7 +28694,7 @@ async function exportRoblox(args, deps) {
     const r = await deps.request("roblox_images", { items: wanted.slice(i, i + 20).map((w) => ({ ...w, scale: opts.scale })) }, 120000);
     for (const img of r.images) {
       if (img.b64)
-        pictures.set(`${img.id}:${img.mode}`, { b64: img.b64, offset: img.offset, size: img.size });
+        pictures.set(`${img.id}:${img.mode}`, { b64: img.b64, offset: img.offset, size: img.size, scale: img.scale });
       else
         warnings.push(`Picture of ${img.id} failed: ${img.error}`);
     }
@@ -28681,7 +28720,14 @@ async function exportRoblox(args, deps) {
     const p = pictures.get(`${w.id}:${w.mode}`);
     if (!p)
       continue;
-    add(`${w.id}:${w.mode}`, new Uint8Array(Buffer.from(p.b64, "base64")), { nodeId: w.id, layer: names.get(w.id) ?? w.id, kind: "picture", mode: w.mode }, "png", { offset: p.offset, size: p.size });
+    const bytes = new Uint8Array(Buffer.from(p.b64, "base64"));
+    const info = imageInfo(bytes);
+    add(`${w.id}:${w.mode}`, bytes, { nodeId: w.id, layer: names.get(w.id) ?? w.id, kind: "picture", mode: w.mode }, "png", {
+      offset: p.offset,
+      size: p.size,
+      scale: p.scale,
+      ...info ? { px: { w: info.width, h: info.height } } : {}
+    });
   }
   for (const hash of imageHashes(t.tree)) {
     const b64 = t.images[hash];
@@ -30770,6 +30816,15 @@ function snapshot(opts) {
     return false;
   }
   const SKIP = ["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "HEAD", "META", "LINK", "TITLE", "BASE"];
+  const skewed = (t) => {
+    if (!t || t === "none")
+      return false;
+    const m = /^matrix(([^)]+))$/.exec(t);
+    if (!m)
+      return true;
+    const v = m[1].split(",").map(Number);
+    return Math.abs(v[1]) > 0.001 || Math.abs(v[2]) > 0.001;
+  };
   const RASTER = ["CANVAS", "VIDEO", "IFRAME", "OBJECT", "EMBED", "AUDIO", "MATH"];
   function isPlainInline(el, cs) {
     if (cs.display !== "inline" || el.tagName === "IMG" || el.tagName === "svg" || el.tagName === "INPUT" || el.tagName === "BUTTON" || el.tagName === "SELECT" || el.tagName === "TEXTAREA")
@@ -30976,10 +31031,11 @@ function snapshot(opts) {
       return [{ kind: "image", tag, name, box, css: cssOf(cs), children: [], src: img.currentSrc || img.src }];
     }
     const nativeControl = tag === "input" && /^(checkbox|radio|range|color|file)$/i.test(el.type) || tag === "select" && cs.appearance !== "none";
-    if (RASTER.indexOf(el.tagName) !== -1 || nativeControl) {
+    if (RASTER.indexOf(el.tagName) !== -1 || nativeControl || skewed(cs.transform) && !(el.textContent || "").trim()) {
       if (box.w < 0.5 || box.h < 0.5)
         return [];
-      return [{ kind: "raster", tag, name, box, css: cssOf(cs), children: [] }];
+      el.setAttribute("data-fb-pic", String(count));
+      return [{ kind: "raster", tag, name, box, css: cssOf(cs), children: [], ref: count }];
     }
     const node = { kind: "box", tag, name, box, css: cssOf(cs), children: [] };
     if (tag === "input" || tag === "textarea") {
@@ -31161,6 +31217,7 @@ async function render(source, opts) {
           screenshot = opts.selector ? await page.locator(opts.selector).first().screenshot() : await page.screenshot({ fullPage: true, clip });
         } catch {}
         const r = { viewport: width, snap, screenshot };
+        let queue = Promise.resolve();
         await opts.withPage(r, {
           fetch: async (u) => {
             const res = await context.request.get(u, { timeout: 20000 });
@@ -31168,7 +31225,24 @@ async function render(source, opts) {
               throw new Error(`HTTP ${res.status()}`);
             return new Uint8Array(await res.body());
           },
-          picture: async (b) => new Uint8Array(await page.screenshot({ fullPage: true, clip: { x: b.x, y: b.y, width: Math.max(1, b.w), height: Math.max(1, b.h) }, omitBackground: true }))
+          picture: (b, ref) => {
+            const shot = queue.then(async () => {
+              const clip = { x: b.x, y: b.y, width: Math.max(1, b.w), height: Math.max(1, b.h) };
+              if (ref === undefined)
+                return new Uint8Array(await page.screenshot({ fullPage: true, clip, omitBackground: true }));
+              const sel = `[data-fb-pic="${ref}"]`;
+              const style = await page.addStyleTag({
+                content: `html,body{background:transparent!important}body *{visibility:hidden!important}${sel},${sel} *{visibility:visible!important}`
+              });
+              try {
+                return new Uint8Array(await page.screenshot({ fullPage: true, clip, omitBackground: true }));
+              } finally {
+                await style.evaluate((el) => el.remove()).catch(() => {});
+              }
+            });
+            queue = shot.catch(() => {});
+            return shot;
+          }
         });
         out.push(r);
       } finally {
@@ -31402,13 +31476,13 @@ class Converter {
     if (this.warnings.size < 40)
       this.warnings.add(msg);
   }
-  asset(url, box, layer) {
+  asset(url, box, layer, ref) {
     if (url && !layer && this.urlKeys.has(url))
       return this.urlKeys.get(url);
     if (url && layer && this.urlKeys.has(url) && this.assets[this.urlKeys.get(url)].layer)
       return this.urlKeys.get(url);
     const key = `w${this.n++}`;
-    this.assets[key] = { url, box, layer };
+    this.assets[key] = ref === undefined ? { url, box, layer } : { url, box, layer, ref };
     if (url)
       this.urlKeys.set(url, key);
     return key;
@@ -31470,7 +31544,7 @@ class Converter {
     if (n.kind === "image" || n.kind === "raster") {
       this.stats.images++;
       const fits = { contain: "fit", cover: "fill", none: "crop", "scale-down": "fit" };
-      const key = this.asset(n.kind === "image" ? n.src : undefined, n.box, true);
+      const key = this.asset(n.kind === "image" ? n.src : undefined, n.box, true, n.ref);
       return {
         type: "image",
         name: n.name || TAG_NAMES[n.tag] || "Image",
@@ -31516,7 +31590,9 @@ class Converter {
       spec.clip = true;
     const flow = n.children.filter((c) => !outOfFlow(c));
     const positioned = n.children.filter(outOfFlow);
-    const layout = flow.length ? this.layout(n, flow) : null;
+    let layout = flow.length ? this.layout(n, flow) : null;
+    if (layout && layout.dir === "grid" && !this.opts.grid)
+      layout = null;
     const children = [];
     if (layout) {
       this.stats.autoLayout++;
@@ -31539,6 +31615,8 @@ class Converter {
           child.colSpan = item.colSpan;
         if (item.rowSpan && item.rowSpan > 1)
           child.rowSpan = item.rowSpan;
+        if (layout.dir === "grid")
+          child.place = [r1(item.node.box.x - n.box.x), r1(item.node.box.y - n.box.y), r1(item.node.box.w), r1(item.node.box.h)];
         if (item.wrap) {
           this.stats.layers++;
           children.push({
@@ -31554,28 +31632,32 @@ class Converter {
       }
       spec.w = layout.fixedW || children.some((c) => c.w === "fill") ? n.box.w : "hug";
       spec.h = layout.fixedH || children.some((c) => c.h === "fill") ? n.box.h : "hug";
+      if (layout.dir === "grid")
+        spec.gridSize = [r1(n.box.w), r1(n.box.h)];
     } else {
       if (flow.length)
         this.stats.free++;
       spec.w = n.box.w;
       spec.h = n.box.h;
-      for (const c of paintOrder(flow)) {
-        const child = this.node(c);
-        if (!child)
-          break;
-        children.push(this.placeAt(child, c, n));
-      }
     }
-    for (const c of paintOrder(positioned)) {
+    const free = layout ? positioned : n.children;
+    const floor = layout ? Math.min(...flow.map(stackLevel)) : Infinity;
+    const below = [];
+    for (const c of paintOrder(free)) {
       const child = this.node(c);
       if (!child)
         break;
-      children.push({ ...this.placeAt(child, c, n), ...layout ? { absolute: true } : {} });
+      const placed = { ...this.placeAt(child, c, n), ...layout ? { absolute: true } : {} };
+      if (layout && stackLevel(c) < floor)
+        below.push(placed);
+      else
+        children.push(placed);
     }
+    children.unshift(...below);
     if (children.length)
       spec.children = children;
     if (!spec.name)
-      spec.name = layout ? layout.dir === "grid" ? "Grid" : layout.dir === "row" ? "Row" : "Column" : "Frame";
+      spec.name = layout ? layout.dir === "grid" ? "Grid" : layout.dir === "row" ? "Row" : "Column" : "Container";
     return spec;
   }
   placeAt(child, c, parent) {
@@ -31639,7 +31721,7 @@ class Converter {
         return span;
       });
     }
-    if (!n.autoWidth || (n.lines ?? 1) > 1)
+    if ((n.lines ?? 1) > 1 || !n.autoWidth && align)
       spec.w = n.box.w;
     return spec;
   }
@@ -31674,9 +31756,17 @@ function label(n) {
 function decorationOf(v) {
   return /underline/.test(v) ? "underline" : /line-through/.test(v) ? "strike" : undefined;
 }
+function stackLevel(n) {
+  const z = n.css.zIndex && n.css.zIndex !== "auto" ? Number(n.css.zIndex) || 0 : null;
+  if (z !== null && z < 0)
+    return z - 1;
+  const positioned = !!n.css.position && n.css.position !== "static";
+  if (!positioned && z === null)
+    return 0;
+  return 1 + Math.max(0, z ?? 0);
+}
 function paintOrder(list) {
-  const z = (n) => n.css.zIndex && n.css.zIndex !== "auto" ? Number(n.css.zIndex) || 0 : 0;
-  return list.map((n, i) => ({ n, i })).sort((a, b) => z(a.n) - z(b.n) || a.i - b.i).map((x) => x.n);
+  return list.map((n, i) => ({ n, i })).sort((a, b) => stackLevel(a.n) - stackLevel(b.n) || a.i - b.i).map((x) => x.n);
 }
 function padOf(n) {
   const b = borderWidths(n.css);
@@ -32126,7 +32216,7 @@ async function importWeb(opts, deps) {
         }
         if (a.layer) {
           try {
-            images[key] = await page.picture(a.box);
+            images[key] = await page.picture(a.box, a.ref);
             return;
           } catch {}
         }
@@ -32473,6 +32563,7 @@ var init_server3 = __esm(async () => {
     "Workflow:",
     "1. get_context, then get_design_system when the file has styles, variables or components: reuse them instead of raw values. find locates layers by name, text, type, style or component across pages.",
     "2. New UI → build (one call per screen or section, with auto-layout; grid, rich text spans, component sets with variants, prototype reactions). Editing existing design → describe it first, then build into it (parentId) or run_script.",
+    "Name every layer by its role, like a design system would: Header, NavBar, HeroSection, Content, PricingCard, CardTitle, Price, PrimaryButton, Avatar & Info, Icon/Search; components as Category/Variant (Button/Primary). Never leave Frame 12 or Rectangle 3: names become class names in code and instance names in Roblox.",
     "3. Design system → design_tokens writes variables (with Light/Dark modes) and styles from simple JSON, W3C tokens or a Tailwind theme; build uses them via var:, style: and modes.",
     "4. Verify → screenshot with returnImage:true, and audit to catch contrast, overflow and naming issues. Fix, then check again. audit {scope:'design-system'} scores the file's design system; audit {fix:true} binds raw values to variables and styles.",
     "Reproduce a mockup or screenshot: build it at the mockup's size → compare {nodeId, reference, returnImage:true} → fix the largest regions → compare again until mismatchPercent stops dropping.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clovis500c/figma-bridge",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "type": "module",
   "description": "Local MCP bridge that lets any AI agent design in the Figma desktop app, with no rate limits.",
   "keywords": [

package/plugin/code.js

@@ -2599,6 +2599,8 @@
     if (mode === "GRID") {
       if (await setupGrid(f, s, ctx, path))
         return;
+      if (Array.isArray(s.gridSize))
+        return placeGridItems(f, s);
       mode = "HORIZONTAL";
       s = Object.assign({}, s, { wrap: true, rowGap: s.rowGap !== undefined ? s.rowGap : s.gap, gap: s.columnGap !== undefined ? s.columnGap : s.gap });
     }
@@ -2643,7 +2645,28 @@
       return { type: "FIXED", value: parseFloat(px[1]) };
     return fallback === "FLEX" ? { type: "FLEX", value: 1 } : { type: "HUG" };
   }
+  var GRID_FALLBACK = `Figma's grid track API failed (a Figma bug: "invalid id"): grids were built as wrapping rows, or at their measured positions for imported pages.`;
+  var gridTracksBroken = false;
+  function tracksReadable(f) {
+    try {
+      const t = f.gridColumnSizes[0];
+      return !!t && typeof t.type === "string";
+    } catch (e) {
+      return false;
+    }
+  }
   async function setupGrid(f, s, ctx, path) {
+    const fallback = function() {
+      gridTracksBroken = true;
+      try {
+        f.layoutMode = "NONE";
+      } catch (e) {}
+      if (ctx.warnings.indexOf(GRID_FALLBACK) === -1)
+        ctx.warnings.push(GRID_FALLBACK);
+      return false;
+    };
+    if (gridTracksBroken)
+      return fallback();
     try {
       f.layoutMode = "GRID";
     } catch (e) {
@@ -2673,14 +2696,16 @@
     set("rows", function() {
       f.gridRowCount = rowCount;
     });
-    set("column sizes", function() {
+    if (!tracksReadable(f))
+      return fallback();
+    try {
       for (let i = 0;i < colCount; i++)
-        applyTrack(f.gridColumnSizes[i], track(cols ? cols[i] : undefined, fixedW ? "FLEX" : "HUG"));
-    });
-    set("row sizes", function() {
+        applyTrack(f, "gridColumnSizes", i, track(cols ? cols[i] : undefined, fixedW ? "FLEX" : "HUG"));
       for (let i = 0;i < rowCount; i++)
-        applyTrack(f.gridRowSizes[i], track(rows ? rows[i] : undefined, fixedH ? "FLEX" : "HUG"));
-    });
+        applyTrack(f, "gridRowSizes", i, track(rows ? rows[i] : undefined, fixedH ? "FLEX" : "HUG"));
+    } catch (e) {
+      return fallback();
+    }
     if (!fixedW)
       set("sizing", function() {
         f.layoutSizingHorizontal = "HUG";
@@ -2703,12 +2728,30 @@
       await setPadding(f, s.padding);
     return true;
   }
-  function applyTrack(t, spec) {
-    if (!t)
+  function placeGridItems(f, s) {
+    if (s.w === "hug" || s.w === undefined)
+      s.w = s.gridSize[0];
+    if (s.h === "hug" || s.h === undefined)
+      s.h = s.gridSize[1];
+    const kids = Array.isArray(s.children) ? s.children : [];
+    for (let i = 0;i < kids.length; i++) {
+      const p = kids[i] && kids[i].place;
+      if (!Array.isArray(p))
+        continue;
+      kids[i].x = p[0];
+      kids[i].y = p[1];
+      kids[i].w = p[2];
+      if (kids[i].type !== "text" || kids[i].h !== undefined)
+        kids[i].h = p[3];
+    }
+  }
+  function applyTrack(f, field, i, spec) {
+    if (!f[field][i])
       return;
-    t.type = spec.type;
-    if (spec.value !== undefined && spec.type !== "HUG")
-      t.value = spec.value;
+    if (f[field][i].type !== spec.type)
+      f[field][i].type = spec.type;
+    if (spec.value !== undefined && spec.type !== "HUG" && f[field][i].value !== spec.value)
+      f[field][i].value = spec.value;
   }
   function spanOf(s, axis) {
     if (!s || typeof s !== "object")
@@ -3127,10 +3170,13 @@
     const right = v[1] === undefined ? v[0] : v[1];
     const bottom = v[2] === undefined ? v[0] : v[2];
     const left = v[3] === undefined ? right : v[3];
-    await setNumber(f, "paddingTop", top);
-    await setNumber(f, "paddingRight", right);
-    await setNumber(f, "paddingBottom", bottom);
-    await setNumber(f, "paddingLeft", left);
+    const clamp = function(x) {
+      return typeof x === "number" ? Math.max(0, x) : x;
+    };
+    await setNumber(f, "paddingTop", clamp(top));
+    await setNumber(f, "paddingRight", clamp(right));
+    await setNumber(f, "paddingBottom", clamp(bottom));
+    await setNumber(f, "paddingLeft", clamp(left));
   }
   function lineHeight(v) {
     if (v === "auto")
@@ -4314,7 +4360,13 @@
       const image = figma.getImageByHash(h);
       if (!image)
         continue;
-      const bytes = await image.getBytesAsync();
+      let bytes;
+      try {
+        bytes = await image.getBytesAsync();
+      } catch (e) {
+        out.rasterize = true;
+        continue;
+      }
       if (ctx.imageBytes + bytes.length > 40 << 20)
         continue;
       ctx.imageBytes += bytes.length;
@@ -4386,22 +4438,39 @@
       })
     };
   }
+  function withTimeout(p, ms, message) {
+    return new Promise(function(resolve, reject) {
+      const timer = setTimeout(function() {
+        reject(new Error(message));
+      }, ms);
+      p.then(function(v) {
+        clearTimeout(timer);
+        resolve(v);
+      }, function(e) {
+        clearTimeout(timer);
+        reject(e);
+      });
+    });
+  }
   async function robloxImages(p) {
     const items = Array.isArray(p.items) ? p.items : [];
     const out = [];
     for (let i = 0;i < items.length; i++) {
       const it = items[i];
-      const scale = Math.max(1, Math.min(4, Number(it.scale) || 2));
+      let scale = Math.max(1, Math.min(4, Number(it.scale) || 2));
       let temp = null;
       try {
         let node = await getNode(it.id);
         if (it.mode === "panel" || it.mode === "shadow") {
           temp = node.clone();
+          figma.currentPage.appendChild(temp);
           if ("children" in temp)
             for (let k = temp.children.length - 1;k >= 0; k--)
               temp.children[k].remove();
           if (it.mode === "panel")
-            temp.effects = [];
+            temp.effects = node.effects.filter(function(e) {
+              return e.type !== "DROP_SHADOW";
+            });
           else {
             temp.effects = node.effects.filter(function(e) {
               return e.type === "DROP_SHADOW" && e.visible !== false;
@@ -4410,7 +4479,10 @@
           }
           node = temp;
         }
-        const bytes = await node.exportAsync({ format: "PNG", constraint: { type: "SCALE", value: scale } });
+        const box = node.absoluteRenderBounds || node.absoluteBoundingBox;
+        if (box)
+          scale = Math.min(scale, Math.floor(1024 / Math.max(1, box.width, box.height) * 1000) / 1000);
+        const bytes = await withTimeout(node.exportAsync({ format: "PNG", constraint: { type: "SCALE", value: scale } }), 20000, "export timed out");
         const rb = node.absoluteRenderBounds || node.absoluteBoundingBox;
         const bb = node.absoluteBoundingBox;
         out.push({
@@ -4500,7 +4572,7 @@
     finish(id, codeError("The user cancelled the selection request", "CANCELLED"));
   }
   // package.json
-  var version = "1.14.0";
+  var version = "1.14.2";
 
   // plugin/code.ts
   var DEFAULT_SIZE = { width: 340, height: 540 };

package/plugin/ui.html

@@ -523,7 +523,8 @@ const partials = new Map();
 function encode(msg) {
   const text = JSON.stringify(msg);
   if (text.length <= CHUNK) return [text];
-  const cid = crypto.randomUUID();
+  // Not crypto.randomUUID: the plugin iframe is not a secure context, where it is undefined.
+  const cid = Date.now().toString(36) + Math.random().toString(36).slice(2);
   const n = Math.ceil(text.length / CHUNK);
   const frames = [];
   for (let i = 0; i < n; i++) frames.push(JSON.stringify({ t: "chunk", cid, i, n, d: text.slice(i * CHUNK, (i + 1) * CHUNK) }));
@@ -541,7 +542,15 @@ function decode(raw) {
 }
 function send(msg) {
   if (!ws || ws.readyState !== WebSocket.OPEN) return false;
-  for (const f of encode(msg)) ws.send(f);
+  let frames;
+  try {
+    frames = encode(msg);
+  } catch (e) {
+    // A reply that can't be encoded still answers the request, so the agent doesn't wait for a timeout.
+    if (msg.t !== "res") return false;
+    frames = encode({ t: "res", id: msg.id, ok: false, error: "Could not send the result: " + ((e && e.message) || e), code: "PLUGIN_ERROR" });
+  }
+  for (const f of frames) ws.send(f);
   return true;
 }