@clovis500c/figma-bridge 1.12.0 → 1.14.0

package/dist/server.js

@@ -46,8 +46,175 @@ var __esm = (fn, res, err) => () => {
 };
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
+// src/setup.ts
+import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+function clientList(home, appData) {
+  return [
+    { id: "claude-code", label: "Claude Code", files: [join(home, ".claude.json")], format: "json", extra: { type: "stdio" } },
+    { id: "claude-desktop", label: "Claude Desktop", files: [join(appData, "Claude", "claude_desktop_config.json")], format: "json" },
+    { id: "codex", label: "Codex", files: [join(home, ".codex", "config.toml")], format: "toml" },
+    {
+      id: "antigravity",
+      label: "Antigravity",
+      files: [join(home, ".gemini", "antigravity", "mcp_config.json"), join(home, ".gemini", "config", "mcp_config.json")],
+      format: "json"
+    },
+    { id: "gemini-cli", label: "Gemini CLI", files: [join(home, ".gemini", "settings.json")], format: "json" },
+    { id: "cursor", label: "Cursor", files: [join(home, ".cursor", "mcp.json")], format: "json" },
+    { id: "windsurf", label: "Windsurf", files: [join(home, ".codeium", "windsurf", "mcp_config.json")], format: "json" }
+  ];
+}
+function backup(path, text) {
+  writeFileSync(path + ".bak-figma-bridge", text);
+}
+function writeJson(path, entry) {
+  const text = existsSync(path) ? readFileSync(path, "utf8") : "";
+  const config = text.trim() ? JSON.parse(text) : {};
+  if (text.trim())
+    backup(path, text);
+  config.mcpServers = { ...config.mcpServers, [SERVER_NAME]: entry };
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, JSON.stringify(config, null, 2) + `
+`);
+}
+function tomlBlock(command, args) {
+  return [
+    `[mcp_servers.${SERVER_NAME}]`,
+    `command = '${command}'`,
+    `args = [${args.map((a) => `'${a}'`).join(", ")}]`,
+    "startup_timeout_sec = 60",
+    "tool_timeout_sec = 120"
+  ].join(`
+`);
+}
+function writeToml(path, command, args) {
+  const text = existsSync(path) ? readFileSync(path, "utf8") : "";
+  if (text.trim())
+    backup(path, text);
+  const kept = [];
+  let skipping = false;
+  for (const line of text.split(/\r?\n/)) {
+    const header = /^\s*\[([^\]]+)\]\s*$/.exec(line);
+    if (header)
+      skipping = header[1] === `mcp_servers.${SERVER_NAME}` || header[1].startsWith(`mcp_servers.${SERVER_NAME}.`);
+    if (!skipping)
+      kept.push(line);
+  }
+  const body = kept.join(`
+`).trimEnd();
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, (body ? body + `
+
+` : "") + tomlBlock(command, args) + `
+`);
+}
+function runSetup(opts) {
+  const all = clientList(opts.home, opts.appData);
+  const forced = opts.clients ?? [];
+  const unknown = forced.filter((id) => !all.some((c) => c.id === id));
+  if (unknown.length)
+    throw new Error(`Unknown client(s): ${unknown.join(", ")}. Known: ${all.map((c) => c.id).join(", ")}`);
+  const result = { updated: [], failed: [], missing: [] };
+  for (const client of all) {
+    const detected = client.files.filter((f) => existsSync(dirname(f)) && (client.id !== "gemini-cli" || existsSync(f)));
+    const targets = forced.length ? forced.includes(client.id) ? detected.length ? detected : [client.files[0]] : [] : detected;
+    if (!targets.length) {
+      if (!forced.length)
+        result.missing.push(client.label);
+      continue;
+    }
+    for (const file of targets) {
+      try {
+        if (client.format === "toml")
+          writeToml(file, opts.command, opts.args);
+        else
+          writeJson(file, { ...client.extra, command: opts.command, args: opts.args });
+        result.updated.push({ client: client.id, label: client.label, file });
+      } catch (e) {
+        result.failed.push({ client: client.id, label: client.label, file, error: e.message });
+      }
+    }
+  }
+  return result;
+}
+function installPlugin(from, to, version) {
+  mkdirSync(to, { recursive: true });
+  for (const f of PLUGIN_FILES)
+    copyFileSync(join(from, f), join(to, f));
+  if (version)
+    writeFileSync(join(to, "version.json"), JSON.stringify({ version }) + `
+`);
+  return join(to, "manifest.json");
+}
+function compareVersions(a, b) {
+  const pa = a.split(/[.-]/).map((n) => parseInt(n, 10) || 0);
+  const pb = b.split(/[.-]/).map((n) => parseInt(n, 10) || 0);
+  for (let i = 0;i < Math.max(pa.length, pb.length); i++) {
+    const d = (pa[i] ?? 0) - (pb[i] ?? 0);
+    if (d)
+      return d;
+  }
+  return 0;
+}
+function syncPlugin(from, to, version) {
+  if (!PLUGIN_FILES.every((f) => existsSync(join(from, f))))
+    return "skipped";
+  const had = existsSync(join(to, "manifest.json"));
+  let installed = "";
+  try {
+    installed = JSON.parse(readFileSync(join(to, "version.json"), "utf8")).version || "";
+  } catch {}
+  if (installed) {
+    const order = compareVersions(installed, version);
+    if (order > 0)
+      return "newer";
+    if (order === 0 && PLUGIN_FILES.every((f) => existsSync(join(to, f))))
+      return "current";
+  }
+  installPlugin(from, to, version);
+  return had ? "updated" : "installed";
+}
+function printSetup(r, rerun) {
+  for (const label of r.missing)
+    console.log(dim(`  –  ${label.padEnd(15)} not found`));
+  for (const u of r.updated)
+    console.log(green(`  ✔  ${u.label.padEnd(15)}`) + dim(u.file));
+  for (const f of r.failed)
+    console.log(yellow(`  !  ${f.label.padEnd(15)}could not update ${f.file}: ${f.error}`));
+  if (!r.updated.length)
+    console.log(yellow(`
+No AI client found. Use \`${rerun} --client <name>\` or \`${rerun} --print\` for manual config.`));
+}
+function printSnippets(command, args) {
+  console.log(bold("JSON clients") + dim(" (Claude, Antigravity, Gemini CLI, Cursor, Windsurf…)"));
+  console.log(JSON.stringify({ mcpServers: { [SERVER_NAME]: { command, args } } }, null, 2));
+  console.log(bold(`
+Codex`) + dim(" (~/.codex/config.toml)"));
+  console.log(tomlBlock(command, args) + `
+`);
+}
+function parseClients(argv) {
+  const out = [];
+  argv.forEach((a, i) => {
+    if (a === "--client" && argv[i + 1])
+      out.push(...argv[i + 1].split(","));
+    else if (a.startsWith("--client="))
+      out.push(...a.slice(9).split(","));
+  });
+  return out;
+}
+var SERVER_NAME = "FigmaBridge", PLUGIN_FILES, color = (code) => (s) => process.stdout.isTTY ? `\x1B[${code}m${s}\x1B[0m` : s, bold, green, dim, yellow;
+var init_setup = __esm(() => {
+  PLUGIN_FILES = ["manifest.json", "code.js", "ui.html"];
+  bold = color(1);
+  green = color(32);
+  dim = color(2);
+  yellow = color(33);
+});
+
 // package.json
-var version = "1.12.0";
+var version = "1.14.0";
 var init_package = () => {};
 
 // node_modules/zod/v3/helpers/util.js
@@ -27221,13 +27388,13 @@ Turn ${opt(a.target, "the selected frame")} into code for the project at ${opt(a
       name: "figma-to-roblox",
       title: "Figma to Roblox",
       description: "Turn a frame into Roblox UI and place it in Studio with a Roblox Studio MCP.",
-      args: { target: "Layer name or id (default: the selection)", mode: "scale, offset or hybrid (default hybrid)" },
+      args: { target: "Layer name or id (default: the selection)", mode: "scale (default), offset or hybrid" },
       render: (a) => `
 Turn ${opt(a.target, "the selected frame")} into Roblox UI that looks the same, and put it in the open Roblox Studio place.
-1. export_roblox {${a.target ? `nodeId:"<id of ${a.target}>", ` : ""}mode:"${opt(a.mode, "hybrid")}"}. Read the warnings (approximations, font substitutions).
+1. export_roblox {${a.target ? `nodeId:"<id of ${a.target}>", ` : ""}mode:"${opt(a.mode, "scale")}"}. Read the warnings (approximations, font substitutions).
 2. If assets are not uploaded (placeholders rbxassetid://PENDING_n): upload each file in assets[] with the Roblox Studio MCP (e.g. upload_image), and replace each placeholder in the Luau with the returned id.
 3. Run the Luau with execute_luau: it creates the ScreenGui under StarterGui (replacing an earlier copy) and returns it.
-4. Take a Studio screenshot and compare it with screenshot {returnImage:true} of the Figma frame. Fix differences in the Luau (or in Figma, then export again).
+4. Take a Studio screenshot and compare it with screenshot {returnImage:true} of the Figma frame. Fix differences in the Luau (or in Figma, then export again), keeping every size, position, padding and gap in scale (no offsets) and the PascalCase names.
 5. Report the result and anything Roblox could not reproduce.`
     },
     {
@@ -27246,6 +27413,218 @@ Audit and improve this file${a.target ? ` (fixes limited to ${a.target})` : ""}.
   ];
 });
 
+// plugin/lib/naming.ts
+function isGenericName(n) {
+  const name = n.name.trim();
+  if (!name || GENERIC_NAME.test(name))
+    return true;
+  if (n.kind === "text" && n.text !== undefined) {
+    const t = n.text.trim();
+    const a = name.toLowerCase();
+    const b = t.toLowerCase();
+    return a === b || a.length >= 12 && b.indexOf(a) === 0;
+  }
+  return false;
+}
+function visibleKids(n) {
+  return n.children.filter(function(c) {
+    return !c.hidden;
+  });
+}
+function maxFont(n) {
+  let m = n.kind === "text" && n.fontSize ? n.fontSize : 0;
+  for (let i = 0;i < n.children.length; i++) {
+    const c = n.children[i];
+    if (c && !c.hidden)
+      m = Math.max(m, maxFont(c));
+  }
+  return m;
+}
+function onlyKinds(list, kinds) {
+  for (let i = 0;i < list.length; i++) {
+    const c = list[i];
+    if (c && kinds.indexOf(c.kind) === -1)
+      return false;
+  }
+  return list.length > 0;
+}
+function buttonLike(n) {
+  const kids = visibleKids(n);
+  if (!n.background || n.h > 72 || kids.length === 0 || kids.length > 3)
+    return false;
+  let texts = 0;
+  for (let i = 0;i < kids.length; i++) {
+    const c = kids[i];
+    if (!c)
+      continue;
+    if (c.kind === "text") {
+      texts++;
+      if ((c.text || "").length > 32)
+        return false;
+    } else if (c.kind !== "vector" && c.kind !== "image")
+      return false;
+  }
+  return texts === 1;
+}
+function isScreen(n) {
+  return SCREEN_W.indexOf(Math.round(n.w)) !== -1 && n.h >= 640 || n.w >= 1024 && n.h >= 600;
+}
+function largestText(n, parent) {
+  const others = parent ? visibleKids(parent).filter(function(c) {
+    return c !== n && c.kind === "text";
+  }) : [];
+  const size = n.fontSize || 14;
+  return others.length > 0 && others.every(function(c) {
+    return (c.fontSize || 14) < size;
+  });
+}
+function covers(n, p) {
+  return Math.abs(n.x) <= 1 && Math.abs(n.y) <= 1 && n.w >= p.w - 1 && n.h >= p.h - 1;
+}
+function roleOf(n, parent, root, top, inButton) {
+  const kids = visibleKids(n);
+  if (n.kind === "text") {
+    const t = (n.text || "").trim();
+    const size = n.fontSize || 14;
+    if (inButton)
+      return "Label";
+    if (NUMERIC.test(t))
+      return "Value";
+    if (size >= top - 0.5 && size >= 18)
+      return "Title";
+    if (size >= 16 && largestText(n, parent))
+      return "Title";
+    if (size >= 20)
+      return "Heading";
+    if (t.length > 60)
+      return "Description";
+    if (size <= 12)
+      return "Caption";
+    if (t.length > 30)
+      return "Description";
+    return "Label";
+  }
+  if (n.kind === "vector")
+    return "Icon";
+  if (n.kind === "image" && kids.length === 0) {
+    const round = n.ellipse || n.radius !== undefined && Math.abs(n.w - n.h) <= 1 && n.radius >= n.w / 2 - 1;
+    return round ? "Avatar" : "Image";
+  }
+  if (kids.length === 0) {
+    if (Math.min(n.w, n.h) <= 2 && Math.max(n.w, n.h) > 8)
+      return "Divider";
+    if (parent && covers(n, parent))
+      return "Background";
+    if (n.clickable)
+      return "Button";
+    if (n.ellipse)
+      return n.w <= 16 ? "Dot" : "Circle";
+    return "Shape";
+  }
+  if (n.clickable)
+    return "Button";
+  if (buttonLike(n)) {
+    const label = kids.filter(function(c) {
+      return c.kind === "text";
+    })[0];
+    return n.h <= 24 || label && (label.fontSize || 14) <= 12 ? "Badge" : "Button";
+  }
+  if (!parent) {
+    if (isScreen(n))
+      return "Screen";
+  } else if (parent === root && isScreen(root)) {
+    if (n.w >= root.w * 0.9 && n.y <= root.h * 0.1 && n.h <= root.h * 0.25)
+      return "Header";
+    if (n.w >= root.w * 0.9 && n.y + n.h >= root.h * 0.9 && n.h <= root.h * 0.25)
+      return "Footer";
+    if (n.h >= root.h * 0.9 && n.w <= root.w * 0.35 && n.x <= 1)
+      return "Sidebar";
+  }
+  const flow = kids.filter(function(c) {
+    return !c.absolute;
+  });
+  if (flow.length >= 2) {
+    const r = baseName(flow[0]);
+    const same = flow.every(function(c) {
+      return baseName(c) === r;
+    });
+    if (same && r && r !== "Label" && r !== "Value" && r !== "Divider") {
+      if (r === "Button")
+        return "Actions";
+      return r + (n.layout === "GRID" || n.wrap ? "Grid" : "List");
+    }
+  }
+  if (n.background)
+    return n.radius ? "Card" : "Panel";
+  if (onlyKinds(kids, ["text"]))
+    return "TextGroup";
+  if (n.layout === "HORIZONTAL")
+    return "Row";
+  if (n.layout === "GRID")
+    return "Grid";
+  return "Container";
+}
+function baseName(n) {
+  return pascalName(n.role || n.name).replace(/\d+$/, "");
+}
+function inferRoles(root) {
+  const top = maxFont(root);
+  const walk = function(n, parent, inButton) {
+    const button = n.kind !== "text" && (n.clickable || buttonLike(n) || /button|btn/i.test(n.name));
+    for (let i = 0;i < n.children.length; i++) {
+      const c = n.children[i];
+      if (c)
+        walk(c, n, inButton || button);
+    }
+    if (isGenericName(n))
+      n.role = roleOf(n, parent, root, top, inButton);
+  };
+  walk(root, null, false);
+}
+function pascalName(name) {
+  let segs = name.split("/").map(function(s) {
+    return s.replace(/^[\w-]+:/, "").trim();
+  }).filter(function(s) {
+    return s && !/^default$/i.test(s);
+  });
+  if (segs.length > 1)
+    segs = segs.slice(1).concat([segs[0]]);
+  const words = segs.join(" ").normalize("NFKD").replace(/[̀-ͯ]/g, "").replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^A-Za-z0-9]+/).filter(Boolean);
+  const out = words.map(function(w) {
+    return w === w.toUpperCase() && w.length <= 4 ? w : w.charAt(0).toUpperCase() + w.slice(1).toLowerCase();
+  }).join("");
+  return out.slice(0, 48);
+}
+function endsWithWord(name, words) {
+  for (let i = 0;i < words.length; i++) {
+    const w = words[i];
+    if (name.length >= w.length && name.slice(-w.length) === w)
+      return true;
+  }
+  return false;
+}
+function uniqueSiblingNames(names) {
+  const counts = {};
+  for (let i = 0;i < names.length; i++) {
+    const k = names[i];
+    counts[k] = (counts[k] || 0) + 1;
+  }
+  const seen = {};
+  return names.map(function(k) {
+    if ((counts[k] || 0) < 2)
+      return k;
+    seen[k] = (seen[k] || 0) + 1;
+    return k + seen[k];
+  });
+}
+var GENERIC_NAME, NUMERIC, SCREEN_W, ROLE_WORDS;
+var init_naming = __esm(() => {
+  GENERIC_NAME = /^(frame|rectangle|ellipse|group|vector|text|line|polygon|star|component|instance|section|image|auto ?layout|union|subtract|intersect|exclude|boolean|layer|shape|slice|mask|container|wrapper|div|span|box)(\s*\d+)?(\s+copy(\s*\d+)?)?$/i;
+  NUMERIC = /^[\s$€£¥+\-−]*[\d][\d\s.,:%/×x+\-−]*[\s$€£¥%kKmMbB]*$/;
+  SCREEN_W = [360, 375, 390, 393, 402, 412, 414, 428, 430, 440];
+  ROLE_WORDS = ("Actions Avatar Background Badge Banner Bar Body Button Card Column Container Content Controls Details Dialog Divider Footer Frame Grid Group Gui " + "Header Hero Hud HUD Info Item List Menu Modal Nav Navbar Navigation Overlay Panel Popup Row Screen Section Sidebar Slot Stack Stats Tab Tabs Tile " + "Toolbar Tooltip Window Wrapper").split(" ");
+});
+
 // src/roblox/fonts.ts
 function robloxFamily(family, overrides = {}) {
   const key = family.trim().toLowerCase();
@@ -27350,26 +27729,24 @@ function visible(list) {
 function decide(n, opts) {
   const approximations = [];
   if (n.text)
-    return { kind: "text", shadow: false, approximations };
+    return { kind: "text", approximations };
   const raster = opts.rasterize;
   const fills = visible(n.fills);
   const strokes = visible(n.strokes);
-  const effects = n.effects ?? [];
-  const drop = effects.filter((e) => e.type === "DROP_SHADOW");
-  const other = effects.filter((e) => e.type !== "DROP_SHADOW");
+  const other = (n.effects ?? []).filter((e) => e.type !== "DROP_SHADOW");
   const hasChildren = !!n.children?.some((c) => !c.hidden);
-  if (n.vector || ["VECTOR", "BOOLEAN_OPERATION", "STAR", "POLYGON", "LINE"].includes(n.type)) {
-    return raster === "none" ? { kind: "frame", shadow: false, approximations: ["vector shape skipped (rasterize is none)"] } : { kind: "picture", shadow: false, approximations };
+  if (n.vector || VECTOR_TYPES.includes(n.type)) {
+    return raster === "none" ? { kind: "frame", approximations: ["vector shape skipped (rasterize is none)"] } : { kind: "picture", approximations };
   }
   const image = fills.length === 1 && fills[0].type === "IMAGE";
-  if (image && !hasChildren && !strokes.length && !effects.length && raster !== "all")
-    return { kind: "image", shadow: false, approximations };
+  if (image && !hasChildren && !strokes.length && !other.length && raster !== "all")
+    return { kind: "image", approximations };
   const reasons = [];
   if (fills.length > 1)
     reasons.push("several fills");
   if (fills.length === 1 && !["SOLID", "GRADIENT_LINEAR", "IMAGE"].includes(fills[0].type))
     reasons.push(`${fills[0].type.toLowerCase().replace("_", " ")} fill`);
-  if (image && (strokes.length || effects.length))
+  if (image && (strokes.length || other.length))
     reasons.push("image with stroke or effects");
   if (strokes.length > 1 || strokes[0] && strokes[0].type !== "SOLID")
     reasons.push("complex stroke");
@@ -27379,18 +27756,16 @@ function decide(n, opts) {
     reasons.push(other.map((e) => e.type.toLowerCase().replace(/_/g, " ")).join(", "));
   if (n.type === "ELLIPSE" && Math.abs(n.w - n.h) > 0.5)
     reasons.push("oval");
-  const styled = fills.length + strokes.length + effects.length > 0;
+  const styled = fills.length + strokes.length + (n.effects ?? []).length > 0;
   if ((reasons.length || raster === "all" && styled) && raster !== "none") {
-    return { kind: hasChildren ? "panel" : "picture", shadow: false, approximations };
+    return { kind: hasChildren ? "panel" : "picture", approximations };
   }
   if (reasons.length)
     approximations.push(`${reasons.join(", ")}: approximated (rasterize is none)`);
   const r = n.radius ?? [];
   if (r.length && r.some((v) => Math.abs(v - r[0]) > 0.5))
     approximations.push("different corner radii: used the largest");
-  if (drop.length && raster === "none")
-    approximations.push("drop shadow skipped (rasterize is none)");
-  return { kind: "frame", shadow: drop.length > 0 && raster !== "none", approximations };
+  return { kind: "frame", approximations };
 }
 function pictureRequests(root, opts) {
   const out = [];
@@ -27402,8 +27777,6 @@ function pictureRequests(root, opts) {
       out.push({ id: n.id, mode: "full" });
     if (d.kind === "panel")
       out.push({ id: n.id, mode: "panel" });
-    if (d.shadow)
-      out.push({ id: n.id, mode: "shadow" });
     if (d.kind !== "picture")
       for (const c of n.children ?? [])
         walk(c);
@@ -27423,6 +27796,56 @@ function imageHashes(root) {
   walk(root);
   return [...out];
 }
+function robloxName(base, flavor) {
+  switch (flavor) {
+    case "text":
+      return /Label$/.test(base) ? base : `${base}Label`;
+    case "button": {
+      const b = base.replace(/Btn$/, "Button");
+      return /Button$/.test(b) ? b : `${b}Button`;
+    }
+    case "icon":
+      return endsWithWord(base, ICON_WORDS) ? base : `${base}Icon`;
+    case "image":
+      return endsWithWord(base, IMAGE_WORDS) ? base : `${base}Image`;
+    default:
+      return endsWithWord(base, ROLE_WORDS) ? base : `${base}${flavor === "frame" ? "Frame" : "Container"}`;
+  }
+}
+function roleTree(n) {
+  const fills = visible(n.fills);
+  const kind = n.text ? "text" : n.vector || VECTOR_TYPES.includes(n.type) ? "vector" : fills.length === 1 && fills[0].type === "IMAGE" && !n.children?.length ? "image" : n.children?.length || n.layout ? "frame" : "shape";
+  return {
+    id: n.id,
+    kind,
+    name: n.name,
+    x: n.x,
+    y: n.y,
+    w: n.w,
+    h: n.h,
+    hidden: n.hidden,
+    text: n.text?.characters,
+    fontSize: n.text ? Math.max(0, ...n.text.segments.map((s) => s.size)) : undefined,
+    layout: n.layout?.mode,
+    wrap: n.layout?.wrap,
+    background: fills.length > 0 || visible(n.strokes).length > 0,
+    radius: Math.max(0, ...n.radius ?? []),
+    ellipse: n.type === "ELLIPSE",
+    clickable: n.clickable,
+    absolute: n.absolute,
+    children: (n.children ?? []).map(roleTree)
+  };
+}
+function dedupe(i) {
+  const layers = i.children.filter((c) => !/^UI/.test(c.className));
+  const names = uniqueSiblingNames(layers.map((c) => c.name));
+  layers.forEach((c, k) => {
+    c.name = names[k];
+    c.props[0] = ["Name", S(c.name)];
+  });
+  for (const c of i.children)
+    dedupe(c);
+}
 
 class Mapper {
   opts;
@@ -27431,48 +27854,82 @@ class Mapper {
   fontSubstitutions = new Map;
   counts = { instances: 0, pictures: 0, skippedHidden: 0 };
   textFactor = 1;
+  names = new Map;
+  roles = new Map;
   constructor(opts, assets) {
     this.opts = opts;
     this.assets = assets;
   }
+  get scaleOnly() {
+    return this.opts.mode === "scale";
+  }
   warn(n, msg) {
     if (this.warnings.size < 60)
       this.warnings.add(n ? `${n.name}: ${msg}` : msg);
   }
+  nameLayers(root) {
+    const tree = roleTree(root);
+    inferRoles(tree);
+    const walk = (r) => {
+      const base = pascalName(r.role ?? r.name) || pascalName(r.role ?? "") || "Layer";
+      this.names.set(r.id, base);
+      if (r.role)
+        this.roles.set(r.id, r.role);
+      for (const c of r.children)
+        walk(c);
+    };
+    walk(tree);
+  }
+  label(n, flavor) {
+    return robloxName(this.names.get(n.id) ?? (pascalName(n.name) || "Layer"), flavor);
+  }
+  isButton(n) {
+    return !!n.clickable || BUTTON_NAME.test(n.name) || this.roles.get(n.id) === "Button";
+  }
   map(root) {
+    this.nameLayers(root);
     const [tw, th] = this.opts.targetResolution;
     const fullScreen = Math.abs(root.w / root.h - tw / th) < 0.1 * (tw / th) && root.w >= tw * 0.4;
     if (fullScreen && this.opts.mode !== "offset")
       this.textFactor = tw / root.w;
     const top = this.node(root, null, 0);
     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"].includes(k));
+    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", "AspectRatio", [["AspectRatio", F(root.w / root.h)]]));
-    if (this.opts.asRootFrame)
-      return top;
-    return this.inst("ScreenGui", root.name, [["ResetOnSpawn", B(false)], ["ZIndexBehavior", E("ZIndexBehavior", "Sibling")], ["IgnoreGuiInset", B(true)]], [top]);
+    top.children.push(this.inst("UIAspectRatioConstraint", "UIAspectRatioConstraint", [["AspectRatio", F(root.w / root.h)]]));
+    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;
   }
   inst(className, name, props = [], children = [], source) {
     this.counts.instances++;
     return { className, name, props: [["Name", S(name)], ...props], children, ...source ? { source } : {} };
   }
+  frameOf(n, parent) {
+    const inFlow = !!parent.layout && !n.absolute;
+    const scale = this.opts.mode === "scale" || this.opts.mode === "hybrid" && !inFlow;
+    if (!inFlow)
+      return { scale, w: Math.max(1, parent.w), h: Math.max(1, parent.h), inFlow };
+    const p = parent.layout.padding;
+    return { scale, w: Math.max(1, parent.w - (p[1] ?? 0) - (p[3] ?? 0)), h: Math.max(1, parent.h - (p[0] ?? 0) - (p[2] ?? 0)), inFlow };
+  }
+  hugs(n, d) {
+    if (this.scaleOnly)
+      return { w: false, h: false };
+    const content = d.kind === "text" || !!n.layout;
+    return { w: n.sizing?.h === "HUG" && content, h: n.sizing?.v === "HUG" && content };
+  }
   geometry(n, parent, index, d) {
     const out = [];
     if (!parent)
       return out;
-    const inFlow = !!parent.layout && !n.absolute;
-    const useScale = this.opts.mode === "scale" || this.opts.mode === "hybrid" && !inFlow;
-    const hugW = n.sizing?.h === "HUG" && (d.kind === "text" || !!n.layout);
-    const hugH = n.sizing?.v === "HUG" && (d.kind === "text" || !!n.layout);
-    if (inFlow) {
-      const l = parent.layout;
-      const horizontal = l.mode === "HORIZONTAL";
-      const pw = parent.w - (l.padding[1] ?? 0) - (l.padding[3] ?? 0);
-      const ph = parent.h - (l.padding[0] ?? 0) - (l.padding[2] ?? 0);
+    const f = this.frameOf(n, parent);
+    const hug = this.hugs(n, d);
+    if (f.inFlow) {
+      const horizontal = parent.layout.mode === "HORIZONTAL";
       const crossFill = horizontal ? n.sizing?.v === "FILL" || n.stretch : n.sizing?.h === "FILL" || n.stretch;
-      const w = (horizontal ? false : crossFill) ? U(1, 0) : hugW ? U(0, 0) : useScale && l.mode !== "GRID" ? U(n.w / Math.max(1, pw), 0) : U(0, n.w);
-      const h = (horizontal ? crossFill : false) ? U(1, 0) : hugH ? U(0, 0) : useScale && l.mode !== "GRID" ? U(n.h / Math.max(1, ph), 0) : U(0, n.h);
+      const w = !horizontal && crossFill ? U(1, 0) : hug.w ? U(0, 0) : f.scale ? U(n.w / f.w, 0) : U(0, n.w);
+      const h = horizontal && crossFill ? U(1, 0) : hug.h ? U(0, 0) : f.scale ? U(n.h / f.h, 0) : U(0, n.h);
       out.push(["Size", { t: "UDim2", xs: w.s, xo: w.o, ys: h.s, yo: h.o }]);
       out.push(["LayoutOrder", I(index + 1)]);
       return out;
@@ -27480,7 +27937,7 @@ class Mapper {
     const c = n.constraints ?? { h: "MIN", v: "MIN" };
     const axis = (pos, size, total, k) => {
       const end = total - pos - size;
-      if (k === "SCALE" || useScale) {
+      if (k === "SCALE" || f.scale) {
         if (k === "MAX")
           return { anchor: 1, p: [(pos + size) / total, 0], s: [size / total, 0] };
         if (k === "CENTER")
@@ -27495,39 +27952,63 @@ class Mapper {
         return { anchor: 0, p: [0, pos], s: [1, -(pos + end)] };
       return { anchor: 0, p: [0, pos], s: [0, size] };
     };
-    const x = axis(n.x, n.w, Math.max(1, parent.w), c.h);
-    const y = axis(n.y, n.h, Math.max(1, parent.h), c.v);
+    const x = axis(n.x, n.w, f.w, c.h);
+    const y = axis(n.y, n.h, f.h, c.v);
     if (x.anchor || y.anchor)
       out.push(["AnchorPoint", V2(x.anchor, y.anchor)]);
     out.push(["Position", U2(x.p[0], x.p[1], y.p[0], y.p[1])]);
-    out.push(["Size", U2(hugW ? 0 : x.s[0], hugW ? 0 : x.s[1], hugH ? 0 : y.s[0], hugH ? 0 : y.s[1])]);
+    out.push(["Size", U2(hug.w ? 0 : x.s[0], hug.w ? 0 : x.s[1], hug.h ? 0 : y.s[0], hug.h ? 0 : y.s[1])]);
     out.push(["ZIndex", I(index + 1)]);
     return out;
   }
   automaticSize(n, d) {
-    const hugW = n.sizing?.h === "HUG" && (d.kind === "text" || !!n.layout);
-    const hugH = n.sizing?.v === "HUG" && (d.kind === "text" || !!n.layout);
-    if (!hugW && !hugH)
+    const hug = this.hugs(n, d);
+    if (!hug.w && !hug.h)
       return [];
-    return [["AutomaticSize", E("AutomaticSize", hugW && hugH ? "XY" : hugW ? "X" : "Y")]];
+    return [["AutomaticSize", E("AutomaticSize", hug.w && hug.h ? "XY" : hug.w ? "X" : "Y")]];
   }
   corner(n) {
     const r = Math.max(0, ...n.radius ?? []);
     if (!r && !(n.type === "ELLIPSE"))
       return null;
-    const pill = n.type === "ELLIPSE" || r >= Math.min(n.w, n.h) / 2 - 0.5;
-    return this.inst("UICorner", "UICorner", [["CornerRadius", pill ? U(0.5, 0) : U(0, r)]]);
+    const short = Math.max(1, Math.min(n.w, n.h));
+    const pill = n.type === "ELLIPSE" || r >= short / 2 - 0.5;
+    return this.inst("UICorner", "UICorner", [["CornerRadius", pill ? U(0.5, 0) : this.scaleOnly ? U(r / short, 0) : U(0, r)]]);
   }
   stroke(n) {
     const s = visible(n.strokes)[0];
     if (!s || s.type !== "SOLID" || !n.strokeWeight)
       return null;
-    return this.inst("UIStroke", "UIStroke", [
+    const short = Math.max(1, Math.min(n.w, n.h));
+    const props = [
       ["ApplyStrokeMode", E("ApplyStrokeMode", "Border")],
       ["Color", C3(s.color)],
-      ["Thickness", F(n.strokeWeight)],
+      ["Thickness", F(this.scaleOnly ? n.strokeWeight / short : n.strokeWeight)],
       ["Transparency", F(1 - s.opacity)],
-      ["LineJoinMode", E("LineJoinMode", "Round")]
+      ["LineJoinMode", E("LineJoinMode", "Round")],
+      ["BorderStrokePosition", E("BorderStrokePosition", n.strokeAlign === "OUTSIDE" ? "Outer" : n.strokeAlign === "CENTER" ? "Center" : "Inner")]
+    ];
+    if (this.scaleOnly)
+      props.push(["StrokeSizingMode", E("StrokeSizingMode", "ScaledSize")]);
+    return this.inst("UIStroke", "UIStroke", props);
+  }
+  shadow(n) {
+    const list = (n.effects ?? []).filter((e) => e.type === "DROP_SHADOW");
+    if (!list.length)
+      return null;
+    if (list.length > 1)
+      this.warn(n, "several drop shadows: kept the largest");
+    const e = list.reduce((a, b) => b.blur + (b.spread ?? 0) > a.blur + (a.spread ?? 0) ? b : a);
+    const w = Math.max(1, n.w);
+    const h = Math.max(1, n.h);
+    const spread = (e.spread ?? 0) * 2;
+    const s = this.scaleOnly;
+    return this.inst("UIShadow", "UIShadow", [
+      ["Color", C3(e.color ?? "#000000")],
+      ["Transparency", F(1 - (e.alpha ?? 0.25))],
+      ["BlurRadius", s ? U(e.blur / Math.min(w, h), 0) : U(0, e.blur)],
+      ["Offset", s ? U2((e.x ?? 0) / w, 0, (e.y ?? 0) / h, 0) : U2(0, e.x ?? 0, 0, e.y ?? 0)],
+      ["Spread", s ? U2(spread / w, 0, spread / h, 0) : U2(0, spread, 0, spread)]
     ]);
   }
   gradient(p) {
@@ -27550,18 +28031,26 @@ class Mapper {
   }
   layoutChildren(n) {
     const l = n.layout;
+    const s = this.scaleOnly;
     const out = [];
-    const [t, r, b, lft] = l.padding;
+    const [t = 0, r = 0, b = 0, lft = 0] = l.padding;
+    const w = Math.max(1, n.w);
+    const h = Math.max(1, n.h);
+    const cw = Math.max(1, w - r - lft);
+    const ch = Math.max(1, h - t - b);
+    const pad = (v, total) => s ? U(v / total, 0) : U(0, v);
     if (t || r || b || lft)
-      out.push(this.inst("UIPadding", "UIPadding", [["PaddingTop", U(0, t)], ["PaddingRight", U(0, r)], ["PaddingBottom", U(0, b)], ["PaddingLeft", U(0, lft)]]));
+      out.push(this.inst("UIPadding", "UIPadding", [["PaddingTop", pad(t, h)], ["PaddingRight", pad(r, w)], ["PaddingBottom", pad(b, h)], ["PaddingLeft", pad(lft, w)]]));
     if (l.mode === "GRID") {
       const kids = (n.children ?? []).filter((c) => !c.hidden && !c.absolute);
       const first = kids[0];
       if (kids.some((k) => Math.abs(k.w - (first?.w ?? 0)) > 1 || Math.abs(k.h - (first?.h ?? 0)) > 1))
         this.warn(n, "grid cells of different sizes: UIGridLayout uses the first cell's size");
+      const fw = first?.w ?? 100;
+      const fh = first?.h ?? 100;
       out.push(this.inst("UIGridLayout", "UIGridLayout", [
-        ["CellSize", U2(0, first?.w ?? 100, 0, first?.h ?? 100)],
-        ["CellPadding", U2(0, l.columnGap ?? 0, 0, l.rowGap ?? 0)],
+        ["CellSize", s ? U2(fw / cw, 0, fh / ch, 0) : U2(0, fw, 0, fh)],
+        ["CellPadding", s ? U2((l.columnGap ?? 0) / cw, 0, (l.rowGap ?? 0) / ch, 0) : U2(0, l.columnGap ?? 0, 0, l.rowGap ?? 0)],
         ["FillDirectionMaxCells", I(l.columns ?? 0)],
         ["SortOrder", E("SortOrder", "LayoutOrder")]
       ]));
@@ -27570,10 +28059,11 @@ class Mapper {
     const horizontal = l.mode === "HORIZONTAL";
     const main = l.primary === "CENTER" ? "Center" : l.primary === "MAX" ? horizontal ? "Right" : "Bottom" : horizontal ? "Left" : "Top";
     const cross = l.counter === "CENTER" ? "Center" : l.counter === "MAX" ? horizontal ? "Bottom" : "Right" : horizontal ? "Top" : "Left";
+    const gap = l.primary === "SPACE_BETWEEN" ? 0 : l.gap;
     const props = [
       ["FillDirection", E("FillDirection", horizontal ? "Horizontal" : "Vertical")],
       ["SortOrder", E("SortOrder", "LayoutOrder")],
-      ["Padding", U(0, l.primary === "SPACE_BETWEEN" ? 0 : l.gap)],
+      ["Padding", pad(gap, horizontal ? cw : ch)],
       ["HorizontalAlignment", E("HorizontalAlignment", horizontal ? main === "Right" ? "Right" : main === "Center" ? "Center" : "Left" : cross === "Right" ? "Right" : cross === "Center" ? "Center" : "Left")],
       ["VerticalAlignment", E("VerticalAlignment", horizontal ? cross === "Bottom" ? "Bottom" : cross === "Center" ? "Center" : "Top" : main === "Bottom" ? "Bottom" : main === "Center" ? "Center" : "Top")]
     ];
@@ -27636,10 +28126,12 @@ class Mapper {
       props.push(["LineHeight", F(Math.max(1, Math.min(3, base.lineHeight / (base.size * 1.2))))]);
     if (t.maxLines)
       props.push(["TextTruncate", E("TextTruncate", "AtEnd")]);
-    if (this.opts.textScaled)
+    if (this.opts.textScaled || this.scaleOnly)
       props.push(["TextScaled", B(true)]);
     if (segs.some((s) => s.letterSpacing))
       this.warn(n, "letter spacing has no Roblox equivalent: ignored");
+    if (rich && this.scaleOnly && segs.some((s) => s.size !== base.size))
+      this.warn(n, "several text sizes with TextScaled: the size tags may not scale with the label");
     return props;
   }
   richRun(s, base) {
@@ -27677,7 +28169,7 @@ class Mapper {
     const d = decide(n, this.opts);
     for (const a of d.approximations)
       this.warn(n, a);
-    const button = !!parent && (n.clickable || BUTTON_NAME.test(n.name)) && d.kind !== "text";
+    const button = !!parent && this.isButton(n) && d.kind !== "text";
     const geo = this.geometry(n, parent, index, d);
     const common = [...geo, ...this.automaticSize(n, d)];
     if (n.rotation)
@@ -27686,26 +28178,32 @@ class Mapper {
     let className = "Frame";
     let props = [];
     if (d.kind === "text") {
-      className = n.clickable || BUTTON_NAME.test(n.name) ? "TextButton" : "TextLabel";
+      const isButton = !!n.clickable || BUTTON_NAME.test(n.name);
+      className = isButton ? "TextButton" : "TextLabel";
       props = this.textProps(n);
-      if (className === "TextButton")
+      if (isButton)
         props.push(["AutoButtonColor", B(false)]);
+      if ((n.effects ?? []).some((e) => e.type === "DROP_SHADOW"))
+        this.warn(n, "text shadow has no Roblox equivalent: ignored");
       const size = props.find(([k]) => k === "TextSize")[1].v;
-      children.push(this.inst("UITextSizeConstraint", "UITextSizeConstraint", [["MaxTextSize", I(size)], ["MinTextSize", I(Math.max(1, Math.round(size * 0.5)))]]));
-      return this.inst(className, n.name, [...common, ...props], children, n.id);
+      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)))]]));
+      return this.inst(className, this.label(n, isButton ? "button" : "text"), [...common, ...props], children, n.id);
     }
     if (d.kind === "picture") {
       this.counts.pictures++;
       const a = this.assetUrl(`${n.id}:full`, n);
       className = button ? "ImageButton" : "ImageLabel";
-      const pic = this.pictureGeometry(n, a, geo);
+      const pic = parent ? this.pictureGeometry(n, a, geo, parent) : geo;
       props = [["BackgroundTransparency", F(1)], ["Image", { t: "Content", url: a.url }], ["ScaleType", E("ScaleType", "Stretch")]];
       if (n.opacity !== undefined && n.opacity < 1)
         props.push(["ImageTransparency", F(1 - n.opacity)]);
       if (button)
         props.push(["AutoButtonColor", B(false)]);
       children.push(this.inst("UIAspectRatioConstraint", "UIAspectRatioConstraint", [["AspectRatio", F((a.size?.w ?? n.w) / Math.max(1, a.size?.h ?? n.h))]]));
-      return this.inst(className, n.name, [...pic, ...props], children, n.id);
+      const flavor = button ? "button" : n.vector || VECTOR_TYPES.includes(n.type) ? "icon" : "image";
+      return this.inst(className, this.label(n, flavor), [...pic, ...props], children, n.id);
     }
     const fills = visible(n.fills);
     const opacity = n.opacity ?? 1;
@@ -27723,8 +28221,11 @@ class Mapper {
       const corner = this.corner(n);
       if (corner)
         children.push(corner);
+      const shadow = this.shadow(n);
+      if (shadow)
+        children.push(shadow);
       children.push(this.inst("UIAspectRatioConstraint", "UIAspectRatioConstraint", [["AspectRatio", F(n.w / Math.max(1, n.h))]]));
-      return this.inst(className, n.name, [...common, ...props], children, n.id);
+      return this.inst(className, this.label(n, button ? "button" : "image"), [...common, ...props], children, n.id);
     }
     if (d.kind === "panel") {
       this.counts.pictures++;
@@ -27747,6 +28248,13 @@ class Mapper {
         props.push(["ImageTransparency", F(1 - opacity)]);
       if (button)
         props.push(["AutoButtonColor", B(false)]);
+      const shadow = this.shadow(n);
+      if (shadow) {
+        const corner = this.corner(n);
+        if (corner)
+          children.push(corner);
+        children.push(shadow);
+      }
     } else {
       className = button ? "TextButton" : hasKids && opacity < 1 ? "CanvasGroup" : "Frame";
       const f = fills[0];
@@ -27763,7 +28271,7 @@ class Mapper {
       } else if (f.type === "IMAGE") {
         props.push(["BackgroundTransparency", F(1)]);
         const a = this.assetUrl(`image:${f.imageHash}`, n);
-        const bg = this.inst("ImageLabel", "Background", [["Size", U2(1, 0, 1, 0)], ["ZIndex", I(0)], ["BackgroundTransparency", F(1)], ["Image", { t: "Content", url: a.url }], ["ScaleType", E("ScaleType", f.scaleMode === "FIT" ? "Fit" : "Crop")]]);
+        const bg = this.inst("ImageLabel", "BackgroundImage", [["Size", U2(1, 0, 1, 0)], ["ZIndex", I(0)], ["BackgroundTransparency", F(1)], ["Image", { t: "Content", url: a.url }], ["ScaleType", E("ScaleType", f.scaleMode === "FIT" ? "Fit" : "Crop")]]);
         const corner = this.corner(n);
         if (corner)
           bg.children.push(corner);
@@ -27779,6 +28287,9 @@ class Mapper {
       const stroke = this.stroke(n);
       if (stroke)
         children.push(stroke);
+      const shadow = this.shadow(n);
+      if (shadow)
+        children.push(shadow);
     }
     props.push(["BorderSizePixel", I(0)]);
     if (n.clip)
@@ -27787,8 +28298,7 @@ class Mapper {
     const flow = n.layout ? kids.filter((k) => !k.absolute) : kids;
     const loose = n.layout ? kids.filter((k) => k.absolute) : [];
     const me = { w: n.w, h: n.h, layout: n.layout };
-    const mapped = (list, p) => list.map((k, i) => this.node(k, p, i)).filter((x) => !!x);
-    const flowMapped = mapped(flow, me);
+    const flowMapped = flow.map((k, i) => this.node(k, me, i)).filter((x) => !!x);
     if (n.layout && n.layout.mode !== "GRID") {
       for (const k of flow) {
         const target = k.grow && !k.hidden ? flowMapped.find((c) => c.source === k.id) : undefined;
@@ -27806,44 +28316,24 @@ class Mapper {
         children.push(...this.layoutChildren(n));
       children.push(...flowMapped);
     }
-    const self = this.inst(className, n.name, [...common, ...props], children, n.id);
-    if (!d.shadow)
-      return self;
-    this.counts.pictures++;
-    const a = this.assetUrl(`${n.id}:shadow`, n);
-    const scale = this.opts.scale ?? 2;
-    const sh = (n.effects ?? []).filter((e) => e.type === "DROP_SHADOW");
-    const reach = Math.max(...sh.map((e) => e.blur + (e.spread ?? 0) + Math.max(Math.abs(e.x ?? 0), Math.abs(e.y ?? 0))));
-    const off = a.offset ?? { x: 0, y: 0 };
-    const size = a.size ?? { w: n.w, h: n.h };
-    const inset = Math.ceil((Math.max(0, ...n.radius ?? [0]) + reach) * scale);
-    const pw = Math.round(size.w * scale);
-    const ph = Math.round(size.h * scale);
-    const ix = Math.min(inset, Math.floor(pw / 2) - 1);
-    const iy = Math.min(inset, Math.floor(ph / 2) - 1);
-    const shadow = this.inst("ImageLabel", "Shadow", [
-      ["Position", U2(0, off.x, 0, off.y)],
-      ["Size", U2(1, size.w - n.w, 1, size.h - n.h)],
-      ["ZIndex", I(1)],
-      ["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)]
-    ]);
-    self.props = self.props.filter(([k]) => !["AnchorPoint", "Position", "Size", "LayoutOrder", "AutomaticSize"].includes(k));
-    self.props.splice(1, 0, ["Size", U2(1, 0, 1, 0)], ["ZIndex", I(2)]);
-    return this.inst("Frame", n.name, [...common.filter(([k]) => k !== "AutomaticSize"), ["BackgroundTransparency", F(1)], ["BorderSizePixel", I(0)]], [shadow, self], n.id);
+    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);
   }
-  pictureGeometry(n, a, geo) {
+  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;
     return geo.map(([k, v]) => {
-      if (k === "Size" && v.t === "UDim2")
-        return [k, { ...v, xo: Math.round(v.xo + a.size.w - n.w), yo: Math.round(v.yo + a.size.h - n.h) }];
-      if (k === "Position" && v.t === "UDim2")
-        return [k, { ...v, xo: Math.round(v.xo + a.offset.x), yo: Math.round(v.yo + a.offset.y) }];
-      return [k, v];
+      if (v.t !== "UDim2" || k !== "Size" && k !== "Position")
+        return [k, v];
+      if (f.scale) {
+        return k === "Size" ? [k, { ...v, xs: num(v.xs + dw / f.w), ys: num(v.ys + dh / f.h) }] : [k, { ...v, xs: num(v.xs + ox / f.w), ys: num(v.ys + oy / f.h) }];
+      }
+      return k === "Size" ? [k, { ...v, xo: Math.round(v.xo + dw), yo: Math.round(v.yo + dh) }] : [k, { ...v, xo: Math.round(v.xo + ox), yo: Math.round(v.yo + oy) }];
     });
   }
 }
@@ -27854,10 +28344,14 @@ function mapToRoblox(root, opts, assets) {
     m.warn(null, `${m.counts.skippedHidden} hidden layer(s) skipped`);
   return { root: out, warnings: [...m.warnings], fontSubstitutions: Object.fromEntries(m.fontSubstitutions), counts: m.counts };
 }
-var num = (v) => Math.round(v * 1000) / 1000, S = (v) => ({ t: "string", v }), B = (v) => ({ t: "bool", v }), I = (v) => ({ t: "int", v: Math.round(v) }), F = (v) => ({ t: "float", v: num(v) }), E = (e, v) => ({ t: "enum", e, v }), U = (s, o) => ({ t: "UDim", s: num(s), o: Math.round(o) }), U2 = (xs, xo, ys, yo) => ({ t: "UDim2", xs: num(xs), xo: Math.round(xo), ys: num(ys), yo: Math.round(yo) }), V2 = (x, y) => ({ t: "Vector2", x: num(x), y: num(y) }), C3 = (hex) => ({ t: "Color3", ...color3(hex) }), BUTTON_NAME;
+var num = (v) => Math.round(v * 1e4) / 1e4, S = (v) => ({ t: "string", v }), B = (v) => ({ t: "bool", v }), I = (v) => ({ t: "int", v: Math.round(v) }), F = (v) => ({ t: "float", v: num(v) }), E = (e, v) => ({ t: "enum", e, v }), U = (s, o) => ({ t: "UDim", s: num(s), o: Math.round(o) }), U2 = (xs, xo, ys, yo) => ({ t: "UDim2", xs: num(xs), xo: Math.round(xo), ys: num(ys), yo: Math.round(yo) }), V2 = (x, y) => ({ t: "Vector2", x: num(x), y: num(y) }), C3 = (hex) => ({ t: "Color3", ...color3(hex) }), BUTTON_NAME, VECTOR_TYPES, ICON_WORDS, IMAGE_WORDS;
 var init_map2 = __esm(() => {
+  init_naming();
   init_fonts();
-  BUTTON_NAME = /\b(button|btn|cta)\b/i;
+  BUTTON_NAME = /button|btn|\bcta\b/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"];
 });
 
 // src/roblox/output.ts
@@ -28019,7 +28513,7 @@ return ${rootVar}
 function substituteAssets(text, ids) {
   return text.replace(/rbxassetid:\/\/PENDING_\d+/g, (m) => ids[m] ? `rbxassetid://${ids[m]}` : m);
 }
-var ENUMS, n = (v) => String(Math.round(v * 1000) / 1000), xml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), KEYWORDS, rgb = (v) => Math.round(v * 255);
+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 = {
     ZIndexBehavior: { Global: 0, Sibling: 1 },
@@ -28035,7 +28529,9 @@ var init_output = __esm(() => {
     ScaleType: { Stretch: 0, Slice: 1, Tile: 2, Fit: 3, Crop: 4 },
     ApplyStrokeMode: { Contextual: 0, Border: 1 },
     LineJoinMode: { Round: 0, Bevel: 1, Miter: 2 },
-    TextTruncate: { None: 0, AtEnd: 1, SplitWord: 2 }
+    TextTruncate: { None: 0, AtEnd: 1, SplitWord: 2 },
+    StrokeSizingMode: { FixedSize: 0, ScaledSize: 1 },
+    BorderStrokePosition: { Outer: 0, Center: 1, Inner: 2 }
   };
   KEYWORDS = new Set(["and", "break", "do", "else", "elseif", "end", "false", "for", "function", "if", "in", "local", "nil", "not", "or", "repeat", "return", "then", "true", "until", "while", "continue", "export", "type", "game", "workspace", "script", "PARENT", "existing"]);
 });
@@ -28141,7 +28637,7 @@ import { join as join2 } from "node:path";
 async function exportRoblox(args, deps) {
   const env = deps.env ?? process.env;
   const opts = {
-    mode: args.mode ?? "hybrid",
+    mode: args.mode ?? "scale",
     targetResolution: args.targetResolution ?? [1920, 1080],
     rasterize: args.rasterize ?? "auto",
     asRootFrame: args.asRootFrame,
@@ -30585,6 +31081,8 @@ function snapshot(opts) {
 }
 
 // src/web/browser.ts
+import { existsSync as existsSync5 } from "node:fs";
+import { join as join8 } from "node:path";
 import { pathToFileURL } from "node:url";
 async function loadPlaywright() {
   try {
@@ -30593,12 +31091,39 @@ async function loadPlaywright() {
     throw new WebImportError("import_web needs the optional package playwright-core, which is not installed. Reinstall without --no-optional, or run `npm install -g playwright-core` (it uses your installed Chrome or Edge; no browser is downloaded).", "MISSING_DEPENDENCY");
   }
 }
+function otherChromiumBrowsers() {
+  const env = process.env;
+  const roots = process.platform === "win32" ? [env.ProgramFiles, env["ProgramFiles(x86)"], env.LOCALAPPDATA, "C:\\Program Files", "C:\\Program Files (x86)"].filter(Boolean) : [];
+  const candidates = process.platform === "win32" ? [
+    { label: "Brave", paths: roots.map((r) => join8(r, "BraveSoftware", "Brave-Browser", "Application", "brave.exe")) },
+    { label: "Chromium", paths: roots.map((r) => join8(r, "Chromium", "Application", "chrome.exe")) },
+    { label: "Vivaldi", paths: roots.map((r) => join8(r, "Vivaldi", "Application", "vivaldi.exe")) },
+    { label: "Opera", paths: roots.map((r) => join8(r, "Programs", "Opera", "opera.exe")) }
+  ] : process.platform === "darwin" ? [
+    { label: "Brave", paths: ["/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"] },
+    { label: "Chromium", paths: ["/Applications/Chromium.app/Contents/MacOS/Chromium"] },
+    { label: "Arc", paths: ["/Applications/Arc.app/Contents/MacOS/Arc"] }
+  ] : [
+    { label: "Brave", paths: ["/usr/bin/brave-browser", "/usr/bin/brave"] },
+    { label: "Chromium", paths: ["/usr/bin/chromium", "/usr/bin/chromium-browser", "/snap/bin/chromium"] }
+  ];
+  const found = [];
+  for (const c of candidates) {
+    const path = c.paths.find((p) => existsSync5(p));
+    if (path)
+      found.push({ label: c.label, path });
+  }
+  return found;
+}
 async function launchBrowser() {
   const { chromium } = await loadPlaywright();
   const tries = [];
   if (process.env.FIGMA_BRIDGE_BROWSER)
     tries.push({ label: process.env.FIGMA_BRIDGE_BROWSER, opts: { executablePath: process.env.FIGMA_BRIDGE_BROWSER } });
-  tries.push({ label: "Chrome", opts: { channel: "chrome" } }, { label: "Edge", opts: { channel: "msedge" } }, { label: "Playwright Chromium", opts: {} });
+  tries.push({ label: "Chrome", opts: { channel: "chrome" } }, { label: "Edge", opts: { channel: "msedge" } });
+  for (const b of otherChromiumBrowsers())
+    tries.push({ label: b.label, opts: { executablePath: b.path } });
+  tries.push({ label: "Playwright Chromium", opts: {} });
   const errors = [];
   for (const t of tries) {
     try {
@@ -30608,7 +31133,7 @@ async function launchBrowser() {
 `)[0]}`);
     }
   }
-  throw new WebImportError(`No browser found to render the page. Install Google Chrome or Microsoft Edge, or set FIGMA_BRIDGE_BROWSER to a Chromium-based browser. (${errors.join("; ")})`, "NO_BROWSER");
+  throw new WebImportError(`No browser found to render the page. Install Chrome, Edge or Brave, or set FIGMA_BRIDGE_BROWSER to a Chromium-based browser. (${errors.join("; ")})`, "NO_BROWSER");
 }
 async function render(source, opts) {
   const given = [source.url, source.html, source.path].filter((v) => v !== undefined).length;
@@ -31647,7 +32172,7 @@ var init_import = __esm(() => {
 import { createHash as createHash2 } from "node:crypto";
 import { mkdirSync as mkdirSync5, readdirSync as readdirSync2, readFileSync as readFileSync8, rmSync, statSync as statSync2, writeFileSync as writeFileSync5 } from "node:fs";
 import { homedir as homedir2 } from "node:os";
-import { join as join8 } from "node:path";
+import { join as join9 } from "node:path";
 function ensureDir() {
   mkdirSync5(SNIPPETS_DIR, { recursive: true });
 }
@@ -31664,14 +32189,14 @@ function files() {
 }
 function listSnippets() {
   return files().map((f) => {
-    const source = readFileSync8(join8(SNIPPETS_DIR, f), "utf8");
+    const source = readFileSync8(join9(SNIPPETS_DIR, f), "utf8");
     return { name: f.slice(0, -3), description: header2(source, "description"), usage: header2(source, "usage") };
   });
 }
 function getSnippet(name) {
   checkName(name);
   try {
-    return readFileSync8(join8(SNIPPETS_DIR, `${name}.js`), "utf8");
+    return readFileSync8(join9(SNIPPETS_DIR, `${name}.js`), "utf8");
   } catch {
     throw new BridgeError(`No snippet named "${name}".`, "NOT_FOUND");
   }
@@ -31684,37 +32209,37 @@ function saveSnippet(name, code, description = "", usage = "") {
 // @usage ${usage.replace(/\n/g, " ") || `await lib.${name}(args)`}
 ${body}
 `;
-  const path = join8(SNIPPETS_DIR, `${name}.js`);
+  const path = join9(SNIPPETS_DIR, `${name}.js`);
   writeFileSync5(path, text);
   return path;
 }
 function deleteSnippet(name) {
   checkName(name);
-  rmSync(join8(SNIPPETS_DIR, `${name}.js`), { force: true });
+  rmSync(join9(SNIPPETS_DIR, `${name}.js`), { force: true });
 }
 function loadLibrary() {
   const list = files();
-  const stamp = list.map((f) => `${f}:${statSync2(join8(SNIPPETS_DIR, f)).mtimeMs}`).join("|");
+  const stamp = list.map((f) => `${f}:${statSync2(join9(SNIPPETS_DIR, f)).mtimeMs}`).join("|");
   if (cached2 && cached2.stamp === stamp)
     return cached2;
   const lib = {};
   for (const f of list)
-    lib[f.slice(0, -3)] = readFileSync8(join8(SNIPPETS_DIR, f), "utf8");
+    lib[f.slice(0, -3)] = readFileSync8(join9(SNIPPETS_DIR, f), "utf8");
   cached2 = { stamp, hash: stamp ? createHash2("sha1").update(stamp + JSON.stringify(lib)).digest("base64url").slice(0, 12) : "empty", lib };
   return cached2;
 }
 var SNIPPETS_DIR, NAME, cached2 = null;
 var init_snippets = __esm(() => {
   init_bridge();
-  SNIPPETS_DIR = process.env.FIGMA_BRIDGE_SNIPPETS || join8(homedir2(), ".figma-bridge", "snippets");
+  SNIPPETS_DIR = process.env.FIGMA_BRIDGE_SNIPPETS || join9(homedir2(), ".figma-bridge", "snippets");
   NAME = /^[A-Za-z_][A-Za-z0-9_]{0,63}$/;
 });
 
 // src/server.ts
 import { appendFileSync, mkdirSync as mkdirSync6, statSync as statSync3, truncateSync, writeFileSync as writeFileSync6 } from "node:fs";
 import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
-import { tmpdir } from "node:os";
-import { dirname as dirname4, join as join9 } from "node:path";
+import { homedir as homedir3, tmpdir } from "node:os";
+import { dirname as dirname4, join as join10 } from "node:path";
 import { fileURLToPath } from "node:url";
 function log(line) {
   const text = `[${new Date().toISOString().slice(11, 23)}] ${line}`;
@@ -31882,7 +32407,7 @@ async function layerNames(session, ids) {
   return bridge.request("node_info", { ids: [...new Set(ids)] }, 20000).catch(() => ({}));
 }
 var PORT, CHANNEL, OUT_DIR, LOG_FILE, MAX_OUTPUT_CHARS = 60000, MAX_IMAGE_BYTES, FIGMA_MAX_IMAGE_DIM = 4096, VIEW_MAX_DIM = 1568, bridge, ok = (value) => ({ content: [{ type: "text", text: json(value) }] }), plain = (text) => ({ content: [{ type: "text", text }] }), oneLine = (s, max = 120) => s.replace(/\s+/g, " ").trim().slice(0, max), safeName = (s) => s.replace(/[^\w.-]+/g, "_").replace(/^_+|_+$/g, "").slice(0, 40) || "node", INSTRUCTIONS, BUILD_DESCRIPTION = `Create a whole layout in ONE call from a declarative spec. Fonts load automatically, icons are fetched, images loaded. Much faster and safer than run_script for new UI.
-Node: {type?, name?, ...props, children?: Node[]}. type is inferred (text/spans→text, icon→icon, src→image, component→instance, variants→componentSet, else frame). Types: frame, component, componentSet, text, rect, ellipse, line, icon, image, svg, instance.
+Node: {type?, name?, ...props, children?: Node[]}. Name layers by role (Header, Card, CardList, Title, Description, PrimaryButton, Icon); unnamed layers get a role name (Container, Row, Card, Title, Label, Button, Icon, Divider…). type is inferred (text/spans→text, icon→icon, src→image, component→instance, variants→componentSet, else frame). Types: frame, component, componentSet, text, rect, ellipse, line, icon, image, svg, instance.
 FRAME: layout "row"|"column"|"grid" (auto-layout; omit for free positioning), gap (number|"auto"), padding (n | [v,h] | [t,r,b,l]), align (cross axis: start|center|end|baseline), justify (main axis: start|center|end|between), wrap, rowGap, clip. Frames have no fill unless set.
 GRID: layout:"grid", columns (count | tracks like [200,"1fr","2fr","hug"]), rows (same; default: enough rows, hugging), columnGap, rowGap (or gap). Children: span:[rows,cols] or colSpan/rowSpan, cellAlign/cellValign. Give the grid a w for "fr" columns.
 SIZE: w / h: number (fixed) | "fill" (stretch inside an auto-layout parent) | "hug". Auto-layout frames hug by default. grow:true. absolute:true with x/y inside auto-layout; x/y for children of free frames.
@@ -31918,12 +32443,13 @@ var init_server3 = __esm(async () => {
   init_tokens();
   init_tokens_export();
   init_import();
+  init_setup();
   init_snippets();
   init_package();
   PORT = Number(process.env.FIGMA_BRIDGE_PORT) || 3055;
   CHANNEL = process.env.FIGMA_BRIDGE_CHANNEL || "default";
-  OUT_DIR = process.env.FIGMA_BRIDGE_OUT || join9(tmpdir(), "figma-bridge");
-  LOG_FILE = join9(OUT_DIR, "bridge.log");
+  OUT_DIR = process.env.FIGMA_BRIDGE_OUT || join10(tmpdir(), "figma-bridge");
+  LOG_FILE = join10(OUT_DIR, "bridge.log");
   MAX_IMAGE_BYTES = 50 << 20;
   mkdirSync6(OUT_DIR, { recursive: true });
   try {
@@ -31932,6 +32458,16 @@ var init_server3 = __esm(async () => {
   } catch {}
   bridge = new Bridge({ port: PORT, channel: CHANNEL, version, log });
   bridge.start();
+  if (process.env.FIGMA_BRIDGE_PLUGIN_SYNC !== "0") {
+    try {
+      const target = process.env.FIGMA_BRIDGE_PLUGIN_DIR || join10(homedir3(), ".figma-bridge", "plugin");
+      const status = syncPlugin(join10(dirname4(fileURLToPath(import.meta.url)), "..", "plugin"), target, version);
+      if (status === "installed" || status === "updated")
+        log(`Figma plugin ${status} to v${version} in ${target}; reopen it in Figma`);
+    } catch (e) {
+      log(`Could not update the Figma plugin copy: ${e.message}`);
+    }
+  }
   INSTRUCTIONS = [
     "Figma Bridge drives the user's Figma desktop app through a local plugin. No rate limits: iterate freely.",
     "Workflow:",
@@ -31950,7 +32486,8 @@ var init_server3 = __esm(async () => {
     "Rules: load fonts before editing text; pages load on demand (await figma.setCurrentPageAsync / getNodeByIdAsync); keep results small.",
     "The user can cancel a command from the plugin (code CANCELLED): build stops, a script may still finish, so check the file before retrying.",
     "With FIGMA_TOKEN set: comments reads and posts file comments pinned to layers, versions lists the history and diffs a version against now.",
-    "Roblox: export_roblox turns a frame into a ScreenGui (.rbxmx + Luau for execute_luau + PNG assets); with a Roblox Studio MCP, upload the assets, run the Luau and check a Studio screenshot.",
+    "Names: give every layer you create a professional name for its role, as a design system or a developer would: Screen, Header, Navbar, Sidebar, Section, Container, Card, CardList, Row, Grid, Title, Subtitle, Description, Label, Price, PrimaryButton, Icon, Avatar, Badge, Input, Divider, Background. Never leave Frame 12, Rectangle 3 or a text named after its content; build names unnamed layers by role and audit {fix:true} renames default names.",
+    "Roblox: export_roblox turns a frame into a ScreenGui (.rbxmx + Luau for execute_luau + PNG assets), in scale only (no offsets) with PascalCase names (ShopGui, ItemCard, TitleLabel, BuyButton); with a Roblox Studio MCP, upload the assets, run the Luau and check a Studio screenshot. Any Roblox UI you write by hand follows the same rules: UDim2.fromScale, scale padding and gaps, UIStroke ScaledSize, TextScaled + UITextSizeConstraint, UIAspectRatioConstraint on the root.",
     "Prompts new-screen, apply-design-system, reproduce-screenshot, import-website, figma-to-code, audit-and-fix and figma-to-roblox are ready-made workflows; the resources figma-bridge://docs/build-spec and figma-bridge://docs/workflow are the full reference.",
     "If no file is connected, tell the user to run Plugins → Development → Figma Bridge in Figma (Ctrl+Alt+P re-runs it). If list_sessions reports versionMismatch, ask them to reopen or update the plugin."
   ];
@@ -32076,7 +32613,7 @@ ${f.content}`).join(`
       const single = files.length === 1 && /\.[a-z0-9]+$/i.test(args.path);
       const written = [];
       for (const f of files) {
-        const target = single ? args.path : join9(args.path, f.path);
+        const target = single ? args.path : join10(args.path, f.path);
         written.push({ format: f.format, path: target, status: await writeIfChanged(target, f.content) });
       }
       return ok({ counts, files: written, ...warnings.length ? { warnings } : {} });
@@ -32114,7 +32651,7 @@ ${f.content}`).join(`
     const bytes = Buffer.from(r.bytesB64, "base64");
     const info = imageInfo(bytes);
     const ext = r.format === "JPG" ? "jpg" : "png";
-    const path = join9(OUT_DIR, `${safeName(r.name)}-${safeName(r.nodeId)}-${Date.now()}.${ext}`);
+    const path = join10(OUT_DIR, `${safeName(r.name)}-${safeName(r.nodeId)}-${Date.now()}.${ext}`);
     await writeFile(path, bytes);
     const meta = { path, nodeId: r.nodeId, name: r.name, width: info?.width, height: info?.height, bytes: bytes.length };
     const content = [{ type: "text", text: json(meta) }];
@@ -32141,7 +32678,7 @@ ${f.content}`).join(`
     const diff = await bridge.request("compare_images", { actual: shot.bytesB64, reference: Buffer.from(refBytes).toString("base64"), referenceMime: info.mime, threshold: args.threshold, sideBySide: !!args.returnImage }, 90000);
     const pct = (v) => Math.round(v * 1e4) / 100;
     const toLayer = (v, axis) => Math.round((v / shot.scale + shot.offset[axis]) * 10) / 10;
-    const heatmapPath = join9(OUT_DIR, `compare-${safeName(shot.name)}-${Date.now()}.png`);
+    const heatmapPath = join10(OUT_DIR, `compare-${safeName(shot.name)}-${Date.now()}.png`);
     await writeFile(heatmapPath, Buffer.from(diff.heatmap, "base64"));
     const refRatio = diff.reference.width / diff.reference.height;
     const ratio = diff.width / diff.height;
@@ -32215,7 +32752,7 @@ Example: {"url":"https://example.com","viewports":[1440,390]}`,
       const built = await bridge.request("build", { spec: v.spec, images, parentId: args.parentId, x, y, select: false, label: "Web import" }, 120000);
       let reference;
       if (v.screenshot) {
-        reference = join9(OUT_DIR, `import-${safeName(v.title || "page")}-${v.viewport}-${Date.now()}.png`);
+        reference = join10(OUT_DIR, `import-${safeName(v.title || "page")}-${v.viewport}-${Date.now()}.png`);
         await writeFile(reference, v.screenshot);
       }
       frames.push({ viewport: v.viewport, rootId: built.rootId, name: v.spec.name, layers: built.created, size: { width: v.width, height: v.height }, reference });
@@ -32285,7 +32822,7 @@ Links are added to existing interactions unless replace:true; clear:[ids] remove
     }
   }, ({ nodeId, projectPath, framework, styling, name, outDir, write, overwrite }) => track("export_code", `${nodeId ?? "(selection)"} ${projectPath ?? `${framework ?? "html"}/${styling ?? "css"}`}`, async () => {
     const r = await bridge.request("export_tree", { nodeId }, 120000);
-    const dir = join9(OUT_DIR, `export-${safeName(r.tree.name)}-${Date.now()}`);
+    const dir = join10(OUT_DIR, `export-${safeName(r.tree.name)}-${Date.now()}`);
     const finalName = {};
     const assetBytes = {};
     for (const [file, a] of Object.entries(r.assets)) {
@@ -32301,8 +32838,8 @@ Links are added to existing interactions unless replace:true; clear:[ids] remove
     if (projectPath) {
       const plan = planProjectExport(projectPath, tree, assetBytes, { framework, styling, name, outDir });
       for (const f of plan.files) {
-        mkdirSync6(dirname4(join9(dir, f.path)), { recursive: true });
-        writeFileSync6(join9(dir, f.path), typeof f.content === "string" ? f.content : Buffer.from(f.content));
+        mkdirSync6(dirname4(join10(dir, f.path)), { recursive: true });
+        writeFileSync6(join10(dir, f.path), typeof f.content === "string" ? f.content : Buffer.from(f.content));
       }
       const written = write ? writePlan(projectPath, plan.files, !!overwrite) : null;
       const s = plan.stack;
@@ -32327,13 +32864,13 @@ ${f.content}`).join(`
 … truncated: the full code is in ${dir}`;
       return { content: [{ type: "text", text: json(meta) }, { type: "text", text }] };
     }
-    mkdirSync6(join9(dir, "assets"), { recursive: true });
+    mkdirSync6(join10(dir, "assets"), { recursive: true });
     for (const [file, bytes] of Object.entries(assetBytes))
-      writeFileSync6(join9(dir, "assets", file), bytes);
+      writeFileSync6(join10(dir, "assets", file), bytes);
     const fw = framework ?? "html";
     const code = generateCode(tree, { framework: fw, styling: styling ?? "css", assetPath: (f) => `assets/${f}` });
     for (const f of code.files)
-      writeFileSync6(join9(dir, f.path), f.content);
+      writeFileSync6(join10(dir, f.path), f.content);
     warnings.push(...code.warnings);
     const meta = {
       dir,
@@ -32485,21 +33022,22 @@ ${f.content}`).join(`
   server.registerTool("export_roblox", {
     title: "Export a frame to Roblox UI",
     description: "Turn a Figma frame (default: selection) into Roblox UI that looks the same: a .rbxmx model (a ScreenGui, or a Frame with asRootFrame), an equivalent Luau builder " + `script for execute_luau (creates the UI under PARENT, default StarterGui, replaces a previous copy with the same name, returns the root), and the PNG assets.
-` + "Frames become Frames with UICorner, UIStroke, UIGradient, UIPadding; auto-layout becomes UIListLayout (UIFlexItem for fill, AutomaticSize for hug) or UIGridLayout; " + "constraints become AnchorPoint + UDim2; text becomes TextLabel with FontFace (Inter → Builder Sans…), RichText for mixed styles, UITextSizeConstraint; clickable or " + "*Button layers become TextButton/ImageButton. What Roblox can't draw (vectors, icons, blurs, several fills, radial gradients) is rasterized at 2×; panels whose background " + `can't be native become 9-slice images with their content on top; drop shadows become a 9-slice image behind the panel.
-` + "mode: scale (UDim2 scale everywhere), offset (pixels), hybrid (default: scale for free-positioned layers, pixels inside auto-layout). " + "Assets: with upload:true and ROBLOX_API_KEY + ROBLOX_CREATOR_ID set, pictures are uploaded through Open Cloud and their ids written in; otherwise each asset has a " + "placeholder (rbxassetid://PENDING_n): upload the files with your Roblox Studio tools (e.g. upload_image), replace the placeholders in the Luau, run it with execute_luau and check a Studio screenshot. " + 'Example: {"nodeId":"12:34","mode":"hybrid"}',
+` + "Everything is in SCALE by default: sizes, positions, UIPadding, list gaps, grid cells, UICorner, UIStroke (StrokeSizingMode ScaledSize) and UIShadow are relative, " + "text uses TextScaled with a UITextSizeConstraint, and nothing is in offset. Instances get professional PascalCase names (ShopGui, ItemCard, TitleLabel, BuyButton, CoinIcon, " + `CardList, Header): the layer's own name, or its role when Figma named it (Frame 12 → Card, Container, Row…).
+` + "Frames become Frames with UICorner, UIStroke, UIGradient, UIShadow, UIPadding; auto-layout becomes UIListLayout (UIFlexItem for fill) or UIGridLayout; " + "constraints become AnchorPoint + UDim2; text becomes TextLabel with FontFace (Inter → Builder Sans…), RichText for mixed styles; clickable or " + "*Button layers become TextButton/ImageButton. What Roblox can't draw (vectors, icons, blurs, several fills, radial gradients) is rasterized at 2×; panels whose background " + `can't be native become 9-slice images with their content on top.
+` + "mode: scale (default, recommended); offset (pixels) or hybrid (pixels inside auto-layout) only when the user asks for them. " + "Assets: with upload:true and ROBLOX_API_KEY + ROBLOX_CREATOR_ID set, pictures are uploaded through Open Cloud and their ids written in; otherwise each asset has a " + "placeholder (rbxassetid://PENDING_n): upload the files with your Roblox Studio tools (e.g. upload_image), replace the placeholders in the Luau, run it with execute_luau and check a Studio screenshot. " + 'When writing Roblox UI yourself, follow the same rules: scale only, PascalCase role names. Example: {"nodeId":"12:34"}',
     inputSchema: {
       nodeId: string2().optional(),
-      mode: _enum(["scale", "offset", "hybrid"]).optional().describe("Default hybrid"),
+      mode: _enum(["scale", "offset", "hybrid"]).optional().describe("Default scale (no offsets); offset or hybrid only if the user asks"),
       targetResolution: array(number2().int().min(100).max(8000)).length(2).optional().describe("Screen size the UI is designed for, default [1920, 1080]"),
       rasterize: _enum(["auto", "none", "all"]).optional().describe("auto (default): pictures only where Roblox can't draw it; none: approximate instead; all: every styled layer"),
       outDir: string2().optional().describe("Folder for the files (default: a new temp folder)"),
       upload: boolean2().optional().describe("Upload the pictures through Open Cloud (needs ROBLOX_API_KEY and ROBLOX_CREATOR_ID)"),
       asRootFrame: boolean2().optional().describe("Root is a Frame instead of a ScreenGui"),
-      textScaled: boolean2().optional().describe("TextScaled on labels (UITextSizeConstraint keeps the design size as the maximum)"),
+      textScaled: boolean2().optional().describe("TextScaled on labels in offset or hybrid mode (always on in scale mode)"),
       fonts: object2({}).passthrough().optional().describe('Figma family → Roblox family or rbxasset URL, e.g. {"Inter":"GothamSSm"}'),
       parent: string2().optional().describe('Luau expression for the parent, default game:GetService("StarterGui")')
     }
-  }, (args) => track("export_roblox", `${args.nodeId ?? "(selection)"} ${args.mode ?? "hybrid"}`, async () => {
+  }, (args) => track("export_roblox", `${args.nodeId ?? "(selection)"} ${args.mode ?? "scale"}`, async () => {
     const r = await exportRoblox({ ...args, targetResolution: args.targetResolution, fonts: args.fonts }, { request: (m, p, t) => bridge.request(m, p, t), outDir: OUT_DIR });
     let luau = r.luau;
     if (luau.length > MAX_OUTPUT_CHARS)
@@ -32631,154 +33169,20 @@ ${f.content}`).join(`
 });
 
 // src/cli.ts
-import { homedir as homedir3 } from "node:os";
-import { dirname as dirname5, join as join10 } from "node:path";
-import { fileURLToPath as fileURLToPath2 } from "node:url";
-
-// src/setup.ts
-import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-var SERVER_NAME = "FigmaBridge";
-function clientList(home, appData) {
-  return [
-    { id: "claude-code", label: "Claude Code", files: [join(home, ".claude.json")], format: "json", extra: { type: "stdio" } },
-    { id: "claude-desktop", label: "Claude Desktop", files: [join(appData, "Claude", "claude_desktop_config.json")], format: "json" },
-    { id: "codex", label: "Codex", files: [join(home, ".codex", "config.toml")], format: "toml" },
-    {
-      id: "antigravity",
-      label: "Antigravity",
-      files: [join(home, ".gemini", "antigravity", "mcp_config.json"), join(home, ".gemini", "config", "mcp_config.json")],
-      format: "json"
-    },
-    { id: "gemini-cli", label: "Gemini CLI", files: [join(home, ".gemini", "settings.json")], format: "json" },
-    { id: "cursor", label: "Cursor", files: [join(home, ".cursor", "mcp.json")], format: "json" },
-    { id: "windsurf", label: "Windsurf", files: [join(home, ".codeium", "windsurf", "mcp_config.json")], format: "json" }
-  ];
-}
-function backup(path, text) {
-  writeFileSync(path + ".bak-figma-bridge", text);
-}
-function writeJson(path, entry) {
-  const text = existsSync(path) ? readFileSync(path, "utf8") : "";
-  const config = text.trim() ? JSON.parse(text) : {};
-  if (text.trim())
-    backup(path, text);
-  config.mcpServers = { ...config.mcpServers, [SERVER_NAME]: entry };
-  mkdirSync(dirname(path), { recursive: true });
-  writeFileSync(path, JSON.stringify(config, null, 2) + `
-`);
-}
-function tomlBlock(command, args) {
-  return [
-    `[mcp_servers.${SERVER_NAME}]`,
-    `command = '${command}'`,
-    `args = [${args.map((a) => `'${a}'`).join(", ")}]`,
-    "startup_timeout_sec = 60",
-    "tool_timeout_sec = 120"
-  ].join(`
-`);
-}
-function writeToml(path, command, args) {
-  const text = existsSync(path) ? readFileSync(path, "utf8") : "";
-  if (text.trim())
-    backup(path, text);
-  const kept = [];
-  let skipping = false;
-  for (const line of text.split(/\r?\n/)) {
-    const header = /^\s*\[([^\]]+)\]\s*$/.exec(line);
-    if (header)
-      skipping = header[1] === `mcp_servers.${SERVER_NAME}` || header[1].startsWith(`mcp_servers.${SERVER_NAME}.`);
-    if (!skipping)
-      kept.push(line);
-  }
-  const body = kept.join(`
-`).trimEnd();
-  mkdirSync(dirname(path), { recursive: true });
-  writeFileSync(path, (body ? body + `
-
-` : "") + tomlBlock(command, args) + `
-`);
-}
-function runSetup(opts) {
-  const all = clientList(opts.home, opts.appData);
-  const forced = opts.clients ?? [];
-  const unknown = forced.filter((id) => !all.some((c) => c.id === id));
-  if (unknown.length)
-    throw new Error(`Unknown client(s): ${unknown.join(", ")}. Known: ${all.map((c) => c.id).join(", ")}`);
-  const result = { updated: [], failed: [], missing: [] };
-  for (const client of all) {
-    const detected = client.files.filter((f) => existsSync(dirname(f)) && (client.id !== "gemini-cli" || existsSync(f)));
-    const targets = forced.length ? forced.includes(client.id) ? detected.length ? detected : [client.files[0]] : [] : detected;
-    if (!targets.length) {
-      if (!forced.length)
-        result.missing.push(client.label);
-      continue;
-    }
-    for (const file of targets) {
-      try {
-        if (client.format === "toml")
-          writeToml(file, opts.command, opts.args);
-        else
-          writeJson(file, { ...client.extra, command: opts.command, args: opts.args });
-        result.updated.push({ client: client.id, label: client.label, file });
-      } catch (e) {
-        result.failed.push({ client: client.id, label: client.label, file, error: e.message });
-      }
-    }
-  }
-  return result;
-}
-function installPlugin(from, to) {
-  mkdirSync(to, { recursive: true });
-  for (const f of ["manifest.json", "code.js", "ui.html"])
-    copyFileSync(join(from, f), join(to, f));
-  return join(to, "manifest.json");
-}
-var color = (code) => (s) => process.stdout.isTTY ? `\x1B[${code}m${s}\x1B[0m` : s;
-var bold = color(1);
-var green = color(32);
-var dim = color(2);
-var yellow = color(33);
-function printSetup(r, rerun) {
-  for (const label of r.missing)
-    console.log(dim(`  –  ${label.padEnd(15)} not found`));
-  for (const u of r.updated)
-    console.log(green(`  ✔  ${u.label.padEnd(15)}`) + dim(u.file));
-  for (const f of r.failed)
-    console.log(yellow(`  !  ${f.label.padEnd(15)}could not update ${f.file}: ${f.error}`));
-  if (!r.updated.length)
-    console.log(yellow(`
-No AI client found. Use \`${rerun} --client <name>\` or \`${rerun} --print\` for manual config.`));
-}
-function printSnippets(command, args) {
-  console.log(bold("JSON clients") + dim(" (Claude, Antigravity, Gemini CLI, Cursor, Windsurf…)"));
-  console.log(JSON.stringify({ mcpServers: { [SERVER_NAME]: { command, args } } }, null, 2));
-  console.log(bold(`
-Codex`) + dim(" (~/.codex/config.toml)"));
-  console.log(tomlBlock(command, args) + `
-`);
-}
-function parseClients(argv) {
-  const out = [];
-  argv.forEach((a, i) => {
-    if (a === "--client" && argv[i + 1])
-      out.push(...argv[i + 1].split(","));
-    else if (a.startsWith("--client="))
-      out.push(...a.slice(9).split(","));
-  });
-  return out;
-}
-
-// src/cli.ts
+init_setup();
 init_package();
+import { homedir as homedir4 } from "node:os";
+import { dirname as dirname5, join as join11 } from "node:path";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
 var PACKAGE = "@clovis500c/figma-bridge";
 var [cmd, ...rest] = process.argv.slice(2);
-var home = homedir3();
-var pluginSource = join10(dirname5(fileURLToPath2(import.meta.url)), "..", "plugin");
-var pluginTarget = join10(home, ".figma-bridge", "plugin");
-var npx = process.platform === "win32" ? { command: "cmd", args: ["/c", "npx", "-y", PACKAGE] } : { command: "npx", args: ["-y", PACKAGE] };
+var home = homedir4();
+var pluginSource = join11(dirname5(fileURLToPath2(import.meta.url)), "..", "plugin");
+var pluginTarget = join11(home, ".figma-bridge", "plugin");
+var spec = `${PACKAGE}@latest`;
+var npx = process.platform === "win32" ? { command: "cmd", args: ["/c", "npx", "-y", spec] } : { command: "npx", args: ["-y", spec] };
 function plugin() {
-  const manifest = installPlugin(pluginSource, pluginTarget);
+  const manifest = installPlugin(pluginSource, pluginTarget, version);
   console.log(`${bold("Figma plugin")} copied to ${dim(pluginTarget)}`);
   return manifest;
 }
@@ -32787,7 +33191,7 @@ function next(manifest) {
 ${bold("Next")}
   1. Figma desktop → Plugins → Development → Import plugin from manifest…
      ${green(manifest)}
-     (once; after an update, run ${bold(`npx ${PACKAGE} plugin`)} again and reopen the plugin)
+     (once: updates install themselves when your AI client restarts; then reopen the plugin)
   2. Restart your AI client, then run Plugins → Development → Figma Bridge in a Figma file.
 `);
 }
@@ -32805,7 +33209,7 @@ Figma Bridge setup
       break;
     }
     try {
-      const appData = process.env.APPDATA || join10(home, "AppData", "Roaming");
+      const appData = process.env.APPDATA || join11(home, "AppData", "Roaming");
       printSetup(runSetup({ home, appData, command: npx.command, args: npx.args, clients: parseClients(rest) }), `npx ${PACKAGE} setup`);
     } catch (e) {
       console.log(yellow(e.message));