@clovis500c/figma-bridge 1.13.0 → 1.14.2

package/dist/server.js

@@ -214,7 +214,7 @@ var init_setup = __esm(() => {
 });
 
 // package.json
-var version = "1.13.0";
+var version = "1.14.2";
 var init_package = () => {};
 
 // node_modules/zod/v3/helpers/util.js
@@ -27388,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.`
     },
     {
@@ -27413,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();
@@ -27517,26 +27729,26 @@ 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.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 };
   }
   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");
@@ -27546,18 +27758,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 = [];
@@ -27569,8 +27779,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);
@@ -27590,6 +27798,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;
@@ -27598,56 +27856,98 @@ 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]);
+    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;
   }
   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;
     }
-    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" || useScale) {
+      if (k === "SCALE" || f.scale) {
         if (k === "MAX")
           return { anchor: 1, p: [(pos + size) / total, 0], s: [size / total, 0] };
         if (k === "CENTER")
@@ -27662,39 +27962,72 @@ 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;
   }
+  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 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) {
@@ -27717,18 +28050,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")]
       ]));
@@ -27737,10 +28078,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")]
     ];
@@ -27803,10 +28145,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) {
@@ -27844,7 +28188,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)
@@ -27853,26 +28197,36 @@ 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")
+      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"))
+        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;
+      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") {
       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;
@@ -27890,30 +28244,34 @@ 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++;
       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)
         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];
@@ -27930,7 +28288,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);
@@ -27946,6 +28304,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)
@@ -27954,8 +28315,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;
@@ -27973,44 +28333,37 @@ 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 }],
+    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)]
-    ]);
-    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);
+    ];
   }
-  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 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 (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) }];
     });
   }
 }
@@ -28021,10 +28374,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|^(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"];
 });
 
 // src/roblox/output.ts
@@ -28149,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 = [
@@ -28186,9 +28551,10 @@ 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 = {
+    DominantAxis: { Width: 0, Height: 1 },
     ZIndexBehavior: { Global: 0, Sibling: 1 },
     FillDirection: { Horizontal: 0, Vertical: 1 },
     HorizontalAlignment: { Center: 0, Left: 1, Right: 2 },
@@ -28202,7 +28568,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"]);
 });
@@ -28308,7 +28676,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,
@@ -28326,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}`);
     }
@@ -28352,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];
@@ -30441,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")
@@ -30647,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") {
@@ -30832,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 });
@@ -30839,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 {
@@ -31073,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;
@@ -31141,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",
@@ -31187,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++;
@@ -31210,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({
@@ -31225,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) {
@@ -31310,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;
   }
@@ -31345,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);
@@ -31797,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 {}
         }
@@ -32078,7 +32497,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.
@@ -32144,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.",
@@ -32157,7 +32577,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."
   ];
@@ -32692,21 +33113,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)