uivisor 0.2.1 → 0.2.2

package/dist/overlay/index.js

@@ -255,8 +255,8 @@ function suggestUtility(property, value) {
     return `${sp}-[${n}px]`;
   }
   if (property === "line-height") {
-    const t = value.trim();
-    const unitless = /^(\d*\.?\d+)$/.exec(t);
+    const t2 = value.trim();
+    const unitless = /^(\d*\.?\d+)$/.exec(t2);
     if (unitless) {
       const named = {
         "1": "leading-none",
@@ -266,16 +266,16 @@ function suggestUtility(property, value) {
         "1.625": "leading-relaxed",
         "2": "leading-loose"
       };
-      return named[String(parseFloat(unitless[1]))] ?? `leading-[${t}]`;
+      return named[String(parseFloat(unitless[1]))] ?? `leading-[${t2}]`;
     }
-    const n = px(t);
+    const n = px(t2);
     if (n != null) return `leading-[${n}px]`;
-    return `leading-[${t}]`;
+    return `leading-[${t2}]`;
   }
   if (property === "letter-spacing") {
-    const t = value.trim();
-    if (t === "normal" || t === "0" || t === "0px" || t === "0em") return "tracking-normal";
-    const em = /^(-?\d*\.?\d+)em$/.exec(t);
+    const t2 = value.trim();
+    if (t2 === "normal" || t2 === "0" || t2 === "0px" || t2 === "0em") return "tracking-normal";
+    const em = /^(-?\d*\.?\d+)em$/.exec(t2);
     if (em) {
       const named = {
         "-0.05": "tracking-tighter",
@@ -284,9 +284,9 @@ function suggestUtility(property, value) {
         "0.05": "tracking-wider",
         "0.1": "tracking-widest"
       };
-      return named[String(parseFloat(em[1]))] ?? `tracking-[${t}]`;
+      return named[String(parseFloat(em[1]))] ?? `tracking-[${t2}]`;
     }
-    return `tracking-[${t}]`;
+    return `tracking-[${t2}]`;
   }
   if (property === "color" || property === "background-color") {
     const hex = rgbToHex(value) ?? (value.startsWith("#") ? value : null);
@@ -340,11 +340,11 @@ function suggestUtility(property, value) {
   };
   if (SIZE_PREFIX[property]) {
     const pre = SIZE_PREFIX[property];
-    const t = value.trim();
-    if (t === "auto") return `${pre}-auto`;
-    if (t === "100%") return `${pre}-full`;
-    const n = px(t);
-    if (n == null) return `${pre}-[${t}]`;
+    const t2 = value.trim();
+    if (t2 === "auto") return `${pre}-auto`;
+    if (t2 === "100%") return `${pre}-full`;
+    const n = px(t2);
+    if (n == null) return `${pre}-[${t2}]`;
     const scale = n / 4;
     if (Number.isInteger(scale) && scale >= 0 && scale <= 96) return `${pre}-${scale}`;
     return `${pre}-[${n}px]`;
@@ -424,6 +424,8 @@ var SECTIONS = [
         label: "Display",
         options: ["block", "inline-block", "inline", "flex", "inline-flex", "grid", "inline-grid", "none"]
       },
+      // Justify / Align are handled by the bigger visual button-rows injected right
+      // below Display (flexControlsHtml) — not duplicated here as plain selects.
       {
         kind: "select",
         css: "flex-direction",
@@ -431,20 +433,6 @@ var SECTIONS = [
         options: ["row", "row-reverse", "column", "column-reverse"],
         requires: "flexgrid"
       },
-      {
-        kind: "select",
-        css: "justify-content",
-        label: "Justify",
-        options: ["normal", "flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"],
-        requires: "flexgrid"
-      },
-      {
-        kind: "select",
-        css: "align-items",
-        label: "Align",
-        options: ["normal", "stretch", "flex-start", "center", "flex-end", "baseline"],
-        requires: "flexgrid"
-      },
       {
         kind: "select",
         css: "flex-wrap",
@@ -666,7 +654,7 @@ function buildDesignSystem(vars, rootPx = 16) {
     });
   }
   const byCategory = {};
-  for (const t of tokens) (byCategory[t.category] ||= []).push(t);
+  for (const t2 of tokens) (byCategory[t2.category] ||= []).push(t2);
   for (const cat of Object.keys(byCategory)) {
     byCategory[cat].sort(
       (a, b) => a.px != null && b.px != null ? a.px - b.px : a.name.localeCompare(b.name)
@@ -679,22 +667,22 @@ function nearestToken(ds, category, target) {
   if (!list || !list.length) return null;
   if (target.value != null) {
     const norm = (s) => {
-      const t = s.trim();
-      return (rgbToHex(t) || t).replace(/\s+/g, "").toLowerCase();
+      const t2 = s.trim();
+      return (rgbToHex(t2) || t2).replace(/\s+/g, "").toLowerCase();
     };
     const want = norm(target.value);
-    const hit = list.find((t) => norm(t.value) === want);
+    const hit = list.find((t2) => norm(t2.value) === want);
     if (hit) return { token: hit, exact: true };
   }
-  if (target.px != null && list.some((t) => t.px != null)) {
+  if (target.px != null && list.some((t2) => t2.px != null)) {
     let best = list[0];
     let bestD = Infinity;
-    for (const t of list) {
-      if (t.px == null) continue;
-      const d = Math.abs(t.px - target.px);
+    for (const t2 of list) {
+      if (t2.px == null) continue;
+      const d = Math.abs(t2.px - target.px);
       if (d < bestD) {
         bestD = d;
-        best = t;
+        best = t2;
       }
     }
     return { token: best, exact: bestD < 0.5 };
@@ -805,6 +793,115 @@ function mk(primaryMechanism, evidence, sourceClassNames) {
   return { primaryMechanism, evidence, sourceClassNames };
 }
 
+// src/overlay/i18n.ts
+var RU = {
+  // chrome / buttons
+  "Toggle uivisor (Alt+U)": "\u0412\u043A\u043B/\u0432\u044B\u043A\u043B uivisor (Alt+U)",
+  "Turn uivisor off (Alt+U)": "\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C uivisor (Alt+U)",
+  Close: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C",
+  "Drag to resize": "\u041F\u043E\u0442\u044F\u043D\u0438\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u0448\u0438\u0440\u0438\u043D\u0443",
+  "Drag to change": "\u041F\u043E\u0442\u044F\u043D\u0438\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C",
+  "Copy prompt for agent": "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043F\u0440\u043E\u043C\u043F\u0442 \u0434\u043B\u044F \u0430\u0433\u0435\u043D\u0442\u0430",
+  "Copy JSON": "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C JSON",
+  Reset: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C",
+  "Revert tweaks on selected element": "\u041E\u0442\u043A\u0430\u0442\u0438\u0442\u044C \u043F\u0440\u0430\u0432\u043A\u0438 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430",
+  Clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
+  "Clear all": "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0451",
+  Unit: "\u0415\u0434\u0438\u043D\u0438\u0446\u0430",
+  Token: "\u0422\u043E\u043A\u0435\u043D",
+  "pick token": "\u0432\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u043E\u043A\u0435\u043D",
+  Mixed: "\u0440\u0430\u0437\u043D\u044B\u0435",
+  "Edit each side individually": "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043A\u0430\u0436\u0434\u0443\u044E \u0441\u0442\u043E\u0440\u043E\u043D\u0443 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E",
+  // apply-changes-to
+  "Apply changes to": "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u043A",
+  "This element": "\u042D\u0442\u043E\u043C\u0443 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0443",
+  "Only this one": "\u0422\u043E\u043B\u044C\u043A\u043E \u044D\u0442\u043E\u043C\u0443",
+  "All {n} like this": "\u0412\u0441\u0435\u043C \u0442\u0430\u043A\u0438\u043C ({n})",
+  "New class\u2026": "\u041D\u043E\u0432\u044B\u0439 \u043A\u043B\u0430\u0441\u0441\u2026",
+  "new class name": "\u0438\u043C\u044F \u043D\u043E\u0432\u043E\u0433\u043E \u043A\u043B\u0430\u0441\u0441\u0430",
+  "Create a new class instead of touching the existing ones": "\u0421\u043E\u0437\u0434\u0430\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043B\u0430\u0441\u0441 \u0432\u043C\u0435\u0441\u0442\u043E \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0445",
+  // legend
+  file: "\u0438\u0437 \u0444\u0430\u0439\u043B\u0430",
+  edited: "\u0438\u0437\u043C\u0435\u043D\u0435\u043D\u043E",
+  inherited: "\u043D\u0430\u0441\u043B\u0435\u0434\u0443\u0435\u0442\u0441\u044F",
+  auto: "\u0430\u0432\u0442\u043E",
+  // empty / hint
+  "Click any element in the frame to select it.": "\u041A\u043B\u0438\u043A\u043D\u0438\u0442\u0435 \u043F\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0443 \u0432\u043E \u0444\u0440\u0435\u0439\u043C\u0435, \u0447\u0442\u043E\u0431\u044B \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u0435\u0433\u043E.",
+  "Click any element on the page to select it.": "\u041A\u043B\u0438\u043A\u043D\u0438\u0442\u0435 \u043F\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0443 \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435, \u0447\u0442\u043E\u0431\u044B \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u0435\u0433\u043E.",
+  "Alt+U toggles \xB7 Esc deselects \xB7 \u2318/Ctrl+Z undo, \u21E7 to redo. Tweaks stay in the browser \u2014 nothing is written to your code.": "Alt+U \u2014 \u0432\u043A\u043B/\u0432\u044B\u043A\u043B \xB7 Esc \u2014 \u0441\u043D\u044F\u0442\u044C \u0432\u044B\u0431\u043E\u0440 \xB7 \u2318/Ctrl+Z \u2014 \u043E\u0442\u043C\u0435\u043D\u0438\u0442\u044C, \u21E7 \u2014 \u0432\u0435\u0440\u043D\u0443\u0442\u044C. \u041F\u0440\u0430\u0432\u043A\u0438 \u0436\u0438\u0432\u0443\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u2014 \u0432 \u043A\u043E\u0434 \u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043F\u0438\u0448\u0435\u0442\u0441\u044F.",
+  // floating "all styles" readout
+  "all styles": "\u0432\u0441\u0435 \u0441\u0442\u0438\u043B\u0438",
+  computed: "\u0432\u044B\u0447\u0438\u0441\u043B\u0435\u043D\u043E",
+  // design system
+  "Design system": "\u0414\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0430",
+  "tokens detected": "\u0442\u043E\u043A\u0435\u043D\u043E\u0432 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
+  // frame readout
+  editing: "\u043F\u0440\u0430\u0432\u0438\u043C",
+  "No breakpoint \u2014 applies to every size by default": "\u0411\u0435\u0437 \u0431\u0440\u0435\u0439\u043A\u043F\u043E\u0438\u043D\u0442\u0430 \u2014 \u043F\u0440\u0438\u043C\u0435\u043D\u044F\u0435\u0442\u0441\u044F \u043A\u043E \u0432\u0441\u0435\u043C \u0440\u0430\u0437\u043C\u0435\u0440\u0430\u043C",
+  // toasts
+  "No tweaks recorded yet": "\u041F\u043E\u043A\u0430 \u043D\u0435\u0442 \u043D\u0438 \u043E\u0434\u043D\u043E\u0439 \u043F\u0440\u0430\u0432\u043A\u0438",
+  "Prompt copied \u2713": "\u041F\u0440\u043E\u043C\u043F\u0442 \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D \u2713",
+  "JSON copied \u2713": "JSON \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D \u2713",
+  "Nothing to undo": "\u041D\u0435\u0447\u0435\u0433\u043E \u043E\u0442\u043C\u0435\u043D\u044F\u0442\u044C",
+  "Undo \u21A9": "\u041E\u0442\u043C\u0435\u043D\u0435\u043D\u043E \u21A9",
+  "Nothing to redo": "\u041D\u0435\u0447\u0435\u0433\u043E \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044C",
+  "Redo \u21AA": "\u0412\u043E\u0437\u0432\u0440\u0430\u0449\u0435\u043D\u043E \u21AA",
+  // section titles
+  Layout: "\u0420\u0430\u0441\u043A\u043B\u0430\u0434\u043A\u0430",
+  Size: "\u0420\u0430\u0437\u043C\u0435\u0440",
+  Spacing: "\u041E\u0442\u0441\u0442\u0443\u043F\u044B",
+  Border: "\u0413\u0440\u0430\u043D\u0438\u0446\u0430",
+  Typography: "\u0422\u0438\u043F\u043E\u0433\u0440\u0430\u0444\u0438\u043A\u0430",
+  Fill: "\u0417\u0430\u043B\u0438\u0432\u043A\u0430",
+  // control labels
+  Display: "\u0422\u0438\u043F",
+  Direction: "\u041D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435",
+  Justify: "\u0420\u0430\u0441\u043F\u0440\u0435\u0434.",
+  Align: "\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432.",
+  Wrap: "\u041F\u0435\u0440\u0435\u043D\u043E\u0441",
+  Width: "\u0428\u0438\u0440\u0438\u043D\u0430",
+  Height: "\u0412\u044B\u0441\u043E\u0442\u0430",
+  "Max W": "\u041C\u0430\u043A\u0441 \u0428",
+  "Min H": "\u041C\u0438\u043D \u0412",
+  Padding: "\u0412\u043D\u0443\u0442\u0440. \u043E\u0442\u0441\u0442\u0443\u043F",
+  Margin: "\u0412\u043D\u0435\u0448\u043D. \u043E\u0442\u0441\u0442\u0443\u043F",
+  Gap: "\u041F\u0440\u043E\u043C\u0435\u0436\u0443\u0442\u043E\u043A",
+  Radius: "\u0421\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0438\u0435",
+  Weight: "\u041D\u0430\u0441\u044B\u0449\u0435\u043D\u043D\u043E\u0441\u0442\u044C",
+  Line: "\u0412\u044B\u0441\u043E\u0442\u0430 \u0441\u0442\u0440\u043E\u043A\u0438",
+  Text: "\u0422\u0435\u043A\u0441\u0442",
+  Background: "\u0424\u043E\u043D"
+};
+var DICT = { en: {}, ru: RU };
+function detect() {
+  try {
+    const saved = localStorage.getItem("uiv-lang");
+    if (saved === "en" || saved === "ru") return saved;
+  } catch {
+  }
+  try {
+    if (typeof navigator !== "undefined" && /^ru\b/i.test(navigator.language || "")) return "ru";
+  } catch {
+  }
+  return "en";
+}
+var lang = detect();
+function getLang() {
+  return lang;
+}
+function setLang(next) {
+  lang = next;
+  try {
+    localStorage.setItem("uiv-lang", next);
+  } catch {
+  }
+}
+function t(key, vars) {
+  let out = DICT[lang][key] ?? key;
+  if (vars) for (const k of Object.keys(vars)) out = out.replace(`{${k}}`, String(vars[k]));
+  return out;
+}
+
 // src/overlay/prompt.ts
 function collapseChanges(changes) {
   const byBp = groupByBreakpoint(changes);
@@ -1027,12 +1124,12 @@ var INTERNAL_COMPONENTS = /* @__PURE__ */ new Set([
 function isInternalName(name) {
   return INTERNAL_COMPONENTS.has(name) || /(?:Boundary|Router)$/.test(name) || name.startsWith("_");
 }
-function fiberName(t) {
-  if (typeof t === "function") return t.displayName || t.name || null;
-  if (t && typeof t === "object") {
-    const inner = t.type || t.render;
-    if (typeof inner === "function") return t.displayName || inner.displayName || inner.name || null;
-    if (typeof t.displayName === "string") return t.displayName;
+function fiberName(t2) {
+  if (typeof t2 === "function") return t2.displayName || t2.name || null;
+  if (t2 && typeof t2 === "object") {
+    const inner = t2.type || t2.render;
+    if (typeof inner === "function") return t2.displayName || inner.displayName || inner.name || null;
+    if (typeof t2.displayName === "string") return t2.displayName;
   }
   return null;
 }
@@ -1203,22 +1300,23 @@ var CSS = (
   border-bottom: 1px solid #242428; position: sticky; top: 0; z-index: 5; background: #141416;
 }
 .uiv-head b { font-size: 13px; color: #fafafa; letter-spacing: .2px; }
-.uiv-bp { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 999px;
+.uiv-lang { margin-left: auto; cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .4px;
+  padding: 2px 7px; border-radius: 6px; background: #1c1c20; border: 1px solid #313138; color: #a1a1aa; }
+.uiv-lang:hover { color: #fff; border-color: #4f46e5; background: #26262c; }
+.uiv-bp { font-size: 10px; padding: 2px 8px; border-radius: 999px;
   background: #312e81; color: #c7d2fe; font-weight: 600; }
 .uiv-x { cursor: pointer; color: #71717a; padding: 2px 4px; }
 .uiv-x:hover { color: #fff; }
 
 .uiv-sec { padding: 11px 13px; border-bottom: 1px solid #1f1f22; }
 
-/* ---- Framer-style top alignment toolbar ---- */
-.uiv-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 13px;
-  border-bottom: 1px solid #1f1f22; }
-.uiv-tgroup { display: flex; gap: 2px; }
-.uiv-tbtn { display: flex; align-items: center; justify-content: center; width: 26px; height: 22px;
-  border-radius: 5px; background: transparent; border: 1px solid transparent; color: #8b8b94; cursor: pointer; }
-.uiv-tbtn:hover { background: #1f1f23; color: #e4e4e7; }
-.uiv-tbtn.on { background: #312e81; border-color: #4f46e5; color: #fff; }
-.uiv-tsep { width: 1px; height: 16px; background: #2a2a2e; }
+/* ---- Framer-style flex/grid alignment buttons (Justify / Align rows) ---- */
+.uiv-fbtns { display: flex; gap: 5px; }
+.uiv-fbtn { flex: 1; display: flex; align-items: center; justify-content: center; height: 30px;
+  border-radius: 8px; background: #1c1c20; border: 1px solid #313138; color: #8b8b94;
+  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
+.uiv-fbtn:hover { background: #26262c; color: #e4e4e7; border-color: #45454d; }
+.uiv-fbtn.on { background: #312e81; border-color: #6366f1; color: #fff; box-shadow: 0 0 0 1px #4f46e5 inset; }
 .uiv-empty { color: #71717a; padding: 18px 12px; text-align: center; }
 
 .uiv-meta { line-height: 1.5; }
@@ -1242,14 +1340,20 @@ var CSS = (
 .uiv-chip.on, .uiv-clschip.on { background: #4f46e5; border-color: #6366f1; color: #fff; }
 .uiv-bphint { margin-top: 7px; font-size: 10px; color: #71717a; line-height: 1.4; }
 .uiv-bphint b { color: #c7d2fe; }
+/* "Apply changes to" dropdown (sits outside .uiv-ctl, so style it directly) */
+.uiv-targetsel { width: 100%; box-sizing: border-box; cursor: pointer;
+  background: #1c1c20; border: 1px solid #313138; color: #fff;
+  border-radius: 7px; padding: 7px 9px; font-size: 12px; outline: none; }
+.uiv-targetsel:hover { border-color: #45454d; }
+.uiv-targetsel:focus { border-color: #6366f1; }
 .uiv-newclass {
-  border: 1px dashed #52525b; background: transparent; color: #a1a1aa;
-  border-radius: 6px; padding: 3px 8px; font-size: 11px; width: 104px; outline: none;
+  margin-top: 7px; box-sizing: border-box; width: 100%;
+  border: 1px dashed #52525b; background: transparent; color: #e4e4e7;
+  border-radius: 7px; padding: 6px 9px; font-size: 12px; outline: none;
   font-family: ui-monospace, monospace;
 }
 .uiv-newclass::placeholder { color: #71717a; }
 .uiv-newclass:focus { border-style: solid; border-color: #6366f1; color: #fff; }
-.uiv-newclass.on { border-style: solid; border-color: #22d3ee; color: #fff; }
 
 /* ---- design-system indicator + token pickers ---- */
 .uiv-dsbar { padding: 7px 12px; border-bottom: 1px solid #27272a;
@@ -1323,8 +1427,9 @@ var CSS = (
 .uiv-acc:hover .uiv-chev { color: #818cf8; }
 .uiv-acc:not(.collapsed) .uiv-chev { transform: rotate(90deg); }
 
-.uiv-ctl { display: grid; grid-template-columns: 70px 1fr 26px; gap: 8px;
+.uiv-ctl { display: grid; grid-template-columns: 84px 1fr 26px; gap: 8px;
   align-items: center; margin-bottom: 7px; }
+.uiv-ctl > .clabel { overflow: hidden; text-overflow: ellipsis; }
 .uiv-ctl:last-child { margin-bottom: 0; }
 .uiv-ctl > .clabel { font-size: 11px; color: #a1a1aa; }
 .uiv-ctl > .cfield { min-width: 0; }
@@ -1385,7 +1490,7 @@ var CSS = (
 .uiv-jchg .bp { color: #818cf8; }
 .uiv-jchg .tok { color: #4ade80; }
 
-.uiv-foot { display: flex; gap: 6px; padding: 10px 12px; position: sticky; bottom: 0;
+.uiv-foot { display: flex; gap: 6px; padding: 10px 12px; position: sticky; bottom: 0; z-index: 8;
   background: #18181b; border-top: 1px solid #27272a; flex-wrap: wrap; }
 .uiv-btn { flex: 1; cursor: pointer; border: 1px solid #3f3f46; background: #27272a;
   color: #e4e4e7; border-radius: 7px; padding: 7px 8px; font-size: 11px; font-weight: 600;
@@ -1394,10 +1499,11 @@ var CSS = (
 .uiv-btn.primary { background: #4f46e5; border-color: #6366f1; color: #fff; flex-basis: 100%; }
 .uiv-btn.primary:hover { background: #4338ca; }
 .uiv-btn.ghost { flex: 0 0 auto; }
-/* floating read-only "all styles" block, docked bottom-right, left of the panel */
-.uiv-info { position: fixed; right: 384px; bottom: 16px; z-index: 2147483646;
-  width: 216px; max-height: 52vh; overflow: auto; display: none;
-  background: rgba(24,24,27,0.86); color: #e4e4e7;
+/* floating read-only "all styles" block \u2014 top-LEFT of the screen, its top edge on
+   the same line as the breakpoint toolbar (which is centred up top). */
+.uiv-info { position: fixed; left: 14px; top: 8px; z-index: 2147483646;
+  width: 216px; max-height: 84vh; overflow: auto; display: none;
+  background: rgba(24,24,27,0.92); color: #e4e4e7;
   border: 1px solid #3f3f46; border-radius: 10px; padding: 8px 10px;
   font-size: 11px; box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
 .uiv-info.show { display: block; }
@@ -1620,32 +1726,33 @@ var Uivisor = class {
     this.root.innerHTML = `
       <style>${CSS}</style>
       <div class="uiv-framewrap">
-        <div class="uiv-framebar"><div class="uiv-framechips uiv-chips"></div><span class="uiv-framew">768px</span><span class="uiv-framex" title="Turn uivisor off (Alt+U)">\u2715</span></div>
+        <div class="uiv-framebar"><div class="uiv-framechips uiv-chips"></div><span class="uiv-framew">768px</span><span class="uiv-framex" title="${escapeAttr(t("Turn uivisor off (Alt+U)"))}">\u2715</span></div>
         <div class="uiv-framestage">
           <div class="uiv-framehost">
             <iframe class="uiv-frame" data-uiv-frame="1"></iframe>
-            <div class="uiv-framehandle" title="Drag to resize"></div>
+            <div class="uiv-framehandle" title="${escapeAttr(t("Drag to resize"))}"></div>
           </div>
         </div>
       </div>
       <div class="uiv-box hover"></div>
       <div class="uiv-box sel"></div>
       <div class="uiv-tag"></div>
-      <div class="uiv-fab" title="Toggle uivisor (Alt+U)">\u25CE</div>
+      <div class="uiv-fab" title="${escapeAttr(t("Toggle uivisor (Alt+U)"))}">\u25CE</div>
       <div class="uiv-info"></div>
       <div class="uiv-toast"></div>
       <div class="uiv-panel">
         <div class="uiv-head">
           <b>uivisor</b>
+          <button class="uiv-lang" title="Language / \u042F\u0437\u044B\u043A">${getLang().toUpperCase()}</button>
           <span class="uiv-bp">base</span>
-          <span class="uiv-x" title="Close">\u2715</span>
+          <span class="uiv-x" title="${escapeAttr(t("Close"))}">\u2715</span>
         </div>
         <div class="uiv-body"></div>
         <div class="uiv-foot">
-          <button class="uiv-btn primary copy-prompt">Copy prompt for agent</button>
-          <button class="uiv-btn copy-json">Copy JSON</button>
-          <button class="uiv-btn ghost reset" title="Revert tweaks on selected element">Reset</button>
-          <button class="uiv-btn ghost clear" title="Clear all">Clear</button>
+          <button class="uiv-btn primary copy-prompt">${t("Copy prompt for agent")}</button>
+          <button class="uiv-btn copy-json">${t("Copy JSON")}</button>
+          <button class="uiv-btn ghost reset" title="${escapeAttr(t("Revert tweaks on selected element"))}">${t("Reset")}</button>
+          <button class="uiv-btn ghost clear" title="${escapeAttr(t("Clear all"))}">${t("Clear")}</button>
         </div>
       </div>
     `;
@@ -1660,6 +1767,7 @@ var Uivisor = class {
     this.frame = this.q(".uiv-frame");
     this.fab.addEventListener("click", () => this.toggle());
     this.q(".uiv-x").addEventListener("click", () => this.toggle(false));
+    this.q(".uiv-lang").addEventListener("click", () => this.setLanguage(getLang() === "ru" ? "en" : "ru"));
     this.q(".uiv-framex").addEventListener("click", () => this.toggle(false));
     this.q(".copy-prompt").addEventListener("click", () => this.copyPrompt());
     this.q(".copy-json").addEventListener("click", () => this.copyJSON());
@@ -1698,6 +1806,29 @@ var Uivisor = class {
   isOurs(e) {
     return e.composedPath().includes(this.host);
   }
+  /** Switch the UI language: persist it, refresh the static chrome built once in
+   *  mount() (buttons, titles, the toggle label) and re-render the live panel. */
+  setLanguage(next) {
+    setLang(next);
+    this.q(".uiv-lang").textContent = next.toUpperCase();
+    this.q(".uiv-x").setAttribute("title", t("Close"));
+    this.q(".uiv-framex").setAttribute("title", t("Turn uivisor off (Alt+U)"));
+    this.q(".uiv-framehandle").setAttribute("title", t("Drag to resize"));
+    this.fab.setAttribute("title", t("Toggle uivisor (Alt+U)"));
+    this.q(".copy-prompt").textContent = t("Copy prompt for agent");
+    this.q(".copy-json").textContent = t("Copy JSON");
+    const reset = this.q(".reset");
+    reset.textContent = t("Reset");
+    reset.setAttribute("title", t("Revert tweaks on selected element"));
+    const clear = this.q(".clear");
+    clear.textContent = t("Clear");
+    clear.setAttribute("title", t("Clear all"));
+    this.renderBody();
+    if (this.responsive) {
+      this.renderFrameBar();
+      this.setFrameWidth(this.frameWidth);
+    }
+  }
   // ---- enable / disable ----
   toggle(force) {
     this.enabled = force ?? !this.enabled;
@@ -1712,12 +1843,12 @@ var Uivisor = class {
       this.scheduleBpRefresh();
       if (!this.responsive) {
         this.pickedBp = "base";
-        this.frameWidth = this.defaultFrameWidth();
+        this.frameWidth = this.baseFrameWidth();
         this.toggleResponsive(true);
       }
     }
   }
-  /** Frame width on enable: the real window width (≈ the current breakpoint). */
+  /** The real window width — used as the desktop reference for a desktop-first base. */
   defaultFrameWidth() {
     return typeof window !== "undefined" ? window.innerWidth : 1280;
   }
@@ -1737,6 +1868,21 @@ var Uivisor = class {
     };
     for (const d of [250, 900, 2200]) window.setTimeout(refresh, d);
   }
+  /** Frame width for the "all"/base chip — the screen the project's UNPREFIXED
+   *  (base) styles target, which depends on the cascade direction:
+   *   • mobile-first (min-width)  → base is the SMALLEST view → a phone width;
+   *   • desktop-first (max-width) → base is the WIDEST view  → a desktop width.
+   *  The EDIT SCOPE stays decoupled (a base edit applies at every size regardless). */
+  baseFrameWidth() {
+    const sys = this.bpSystem();
+    const bps = sys.breakpoints;
+    if (sys.dir === "min") {
+      const firstBp = bps.length ? bps[0].minWidth : 640;
+      return Math.min(390, firstBp - 1);
+    }
+    const lastBp = bps.length ? bps[bps.length - 1].minWidth : 1024;
+    return Math.max(this.defaultFrameWidth(), lastBp + 80);
+  }
   // ---- responsive (virtual screen) mode ----
   /** The document the inspector currently targets: the iframe in responsive mode. */
   doc() {
@@ -1815,7 +1961,7 @@ var Uivisor = class {
     this.frameWidth = Math.max(280, Math.min(2400, Math.round(w)));
     const host = this.q(".uiv-framehost");
     host.style.width = `${this.frameWidth}px`;
-    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 editing ${this.bpLabel(this.scopeName())}`;
+    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 ${t("editing")} ${this.bpLabel(this.scopeName())}`;
     this.updateBp();
     this.reposition();
   }
@@ -1875,9 +2021,10 @@ var Uivisor = class {
     this.reposition();
     this.renderBody();
   }
-  /** Properties to snapshot on selection — the curated set the controls can edit. */
+  /** Properties to snapshot on selection — the curated set the controls can edit,
+   *  plus the flex-alignment props handled by the visual button-rows. */
   snapshotProps() {
-    return ALL_CSS;
+    return [.../* @__PURE__ */ new Set([...ALL_CSS, "justify-content", "align-items"])];
   }
   // ---- value helpers ----
   st() {
@@ -1916,8 +2063,8 @@ var Uivisor = class {
   tokenNameFor(css) {
     const ch = this.effectiveChange(css);
     if (!ch?.after.designToken) return null;
-    const t = this.designSystem().tokens.find((x) => x.cssVar === ch.after.designToken);
-    return t ? t.name : ch.after.designToken;
+    const t2 = this.designSystem().tokens.find((x) => x.cssVar === ch.after.designToken);
+    return t2 ? t2.name : ch.after.designToken;
   }
   liveNum(css) {
     const v = this.liveVal(css).trim();
@@ -2174,8 +2321,8 @@ var Uivisor = class {
     if (!this.selected) {
       body.innerHTML = `
         ${this.breakpointBarHtml()}
-        <div class="uiv-empty">Click any element ${this.responsive ? "in the frame" : "on the page"} to select it.</div>
-        <div class="uiv-hint">Alt+U toggles \xB7 Esc deselects \xB7 \u2318/Ctrl+Z undo, \u21E7 to redo. Tweaks stay in the browser \u2014 nothing is written to your code.</div>
+        <div class="uiv-empty">${t(this.responsive ? "Click any element in the frame to select it." : "Click any element on the page to select it.")}</div>
+        <div class="uiv-hint">${t("Alt+U toggles \xB7 Esc deselects \xB7 \u2318/Ctrl+Z undo, \u21E7 to redo. Tweaks stay in the browser \u2014 nothing is written to your code.")}</div>
         ${this.journalHtml()}
       `;
       if (this.responsive) this.renderFrameBar();
@@ -2192,7 +2339,6 @@ var Uivisor = class {
         <div class="uiv-src">${escapeHtml(src)}</div>
         <span class="uiv-mech">${st.record.styling.primaryMechanism}</span>
       </div>
-      ${this.alignToolbarHtml()}
       ${this.dsIndicatorHtml()}
       ${this.breakpointBarHtml()}
       ${this.targetHtml(st)}
@@ -2208,7 +2354,7 @@ var Uivisor = class {
     const ds = this.designSystem();
     if (ds.source === "none") return "";
     const cats = Object.keys(ds.byCategory).map((c) => `${ds.byCategory[c].length} ${c}`).join(" \xB7 ");
-    return `<div class="uiv-dsbar" title="${escapeAttr(cats)}">\u25C6 Design system \xB7 ${ds.tokens.length} tokens detected</div>`;
+    return `<div class="uiv-dsbar" title="${escapeAttr(cats)}">\u25C6 ${t("Design system")} \xB7 ${ds.tokens.length} ${t("tokens detected")}</div>`;
   }
   /** Longhand properties an authoring rule (or non-uivisor inline) sets on `el`.
    *  Reimplements getMatchedCSSRules over same-origin sheets (incl. matching
@@ -2275,7 +2421,7 @@ var Uivisor = class {
   ctlLabel(label, props) {
     const from = this.inheritedFrom(props);
     const badge = from ? ` <span class="uiv-inh" title="inherited from ${escapeAttr(this.bpLabel(from))} \u2014 not set at this breakpoint">\u2923${escapeHtml(this.bpLabel(from))}</span>` : "";
-    return `<span class="clabel">${label}${badge}</span>`;
+    return `<span class="clabel">${escapeHtml(t(label))}${badge}</span>`;
   }
   /** Is any of `props` authored in the project CSS? For inherited properties we
    *  also walk ancestors (a body/parent font rule still counts as "from the file"). */
@@ -2309,10 +2455,10 @@ var Uivisor = class {
       return /^#|rgb/.test(h) ? `<span class="uiv-sw" style="background:${h}"></span>${h}` : h;
     };
     const sides = (parts) => {
-      const [t, r, b, l] = parts.map(g);
-      if (t === r && r === b && b === l) return t;
-      if (t === b && r === l) return `${t} ${r}`;
-      return `${t} ${r} ${b} ${l}`;
+      const [t2, r, b, l] = parts.map(g);
+      if (t2 === r && r === b && b === l) return t2;
+      if (t2 === b && r === l) return `${t2} ${r}`;
+      return `${t2} ${r} ${b} ${l}`;
     };
     const px4 = (pre, suf = "") => [`${pre}-top${suf}`, `${pre}-right${suf}`, `${pre}-bottom${suf}`, `${pre}-left${suf}`];
     const clip = (s, n = 30) => s.length > n ? s.slice(0, n - 1) + "\u2026" : s;
@@ -2415,7 +2561,7 @@ var Uivisor = class {
       info.innerHTML = "";
       return;
     }
-    info.innerHTML = `<div class="uiv-info-h">all styles <span class="uiv-info-sub">computed</span></div><div class="uiv-readout">${this.styleRows()}</div>`;
+    info.innerHTML = `<div class="uiv-info-h">${t("all styles")} <span class="uiv-info-sub">${t("computed")}</span></div><div class="uiv-readout">${this.styleRows()}</div>`;
     info.classList.add("show");
   }
   /** Display label for a breakpoint name — the unprefixed "base" scope reads "all"
@@ -2439,7 +2585,7 @@ var Uivisor = class {
     const winBp = currentBreakpoint(sys).name;
     const isActive = (n) => this.responsive ? n === this.scopeName() : n === winBp;
     const chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${this.bpLabel(n)}</span></button>`;
-    const all = chip("base", isActive("base"), "No breakpoint \u2014 applies to every size by default");
+    const all = chip("base", isActive("base"), t("No breakpoint \u2014 applies to every size by default"));
     const rest = sys.breakpoints.map((b) => chip(b.name, isActive(b.name), sys.dir === "min" ? `\u2265 ${b.minWidth}px` : `\u2264 ${b.minWidth}px`)).join("");
     return all + rest;
   }
@@ -2467,12 +2613,10 @@ var Uivisor = class {
     const isNew = target.startsWith("new:");
     const newName = isNew ? target.slice(4) : "";
     const n = st.record.identity.instanceCount;
-    const chip = (val, label, on) => `<button class="uiv-clschip${on ? " on" : ""}" data-target="${escapeAttr(val)}">${escapeHtml(label)}</button>`;
-    const allChip = n > 1 ? chip("all", `All ${n} like this`, target === "all") : "";
-    const elChip = chip("element", n > 1 ? "Only this one" : "This element", target === "element");
-    const classChips = classes.map((c) => chip(c, `.${c}`, target === c)).join("");
-    const newInput = `<input class="uiv-newclass${isNew ? " on" : ""}" placeholder="+ new class" value="${escapeAttr(newName)}" title="Create a new class instead of touching the existing ones">`;
-    return `<div class="uiv-sec"><div class="uiv-sectitle">Apply changes to</div><div class="uiv-chips">${allChip}${elChip}${classChips}${newInput}</div></div>`;
+    const opt = (val, label) => `<option value="${escapeAttr(val)}"${target === val ? " selected" : ""}>${escapeHtml(label)}</option>`;
+    const opts = (n > 1 ? opt("all", t("All {n} like this", { n })) : "") + opt("element", n > 1 ? t("Only this one") : t("This element")) + classes.map((c) => opt(c, `.${c}`)).join("") + `<option value="__new__"${isNew ? " selected" : ""}>${escapeHtml(`\uFF0B ${t("New class\u2026")}`)}</option>`;
+    const newInput = isNew ? `<input class="uiv-newclass" placeholder="${escapeAttr(t("new class name"))}" value="${escapeAttr(newName)}" title="${escapeAttr(t("Create a new class instead of touching the existing ones"))}" spellcheck="false">` : "";
+    return `<div class="uiv-sec"><div class="uiv-sectitle">${t("Apply changes to")}</div><div class="cfield"><select class="uiv-sel uiv-targetsel">${opts}</select></div>${newInput}</div>`;
   }
   /** Decide which controls are relevant to the selected element. */
   context(el) {
@@ -2494,28 +2638,35 @@ var Uivisor = class {
   }
   /** Framer-style top alignment toolbar — justify (horizontal) + align (vertical)
    *  icon buttons. Shown for flex/grid containers (where they apply). */
-  alignToolbarHtml() {
+  /** Visual flex/grid alignment controls — bigger Framer-style icon buttons in two
+   *  labelled rows (Justify, Align). Injected right below the Display dropdown and
+   *  shown only for flex/grid containers; replaces the duplicate Justify/Align
+   *  selects entirely. Commits through the engine via the shared `.uiv-fbtn` binding. */
+  flexControlsHtml() {
     const el = this.selected;
     if (!el || !this.context(el).flexGrid) return "";
     const j = this.liveVal("justify-content").trim();
     const a = this.liveVal("align-items").trim();
-    const g = (r) => `<svg viewBox="0 0 14 14" width="13" height="13" fill="currentColor">${r}</svg>`;
-    const JI = {
-      "flex-start": g('<rect x="1" y="3" width="2" height="8"/><rect x="4" y="3" width="2" height="8"/>'),
-      center: g('<rect x="4" y="3" width="2" height="8"/><rect x="8" y="3" width="2" height="8"/>'),
-      "flex-end": g('<rect x="8" y="3" width="2" height="8"/><rect x="11" y="3" width="2" height="8"/>'),
-      "space-between": g('<rect x="1" y="3" width="2" height="8"/><rect x="11" y="3" width="2" height="8"/>')
-    };
-    const AI = {
-      "flex-start": g('<rect x="3" y="1" width="8" height="2"/><rect x="3" y="4" width="8" height="2"/>'),
-      center: g('<rect x="3" y="4" width="8" height="2"/><rect x="3" y="8" width="8" height="2"/>'),
-      "flex-end": g('<rect x="3" y="8" width="8" height="2"/><rect x="3" y="11" width="8" height="2"/>'),
-      stretch: g('<rect x="3" y="1" width="8" height="12"/>')
+    const g = (r) => `<svg viewBox="0 0 18 18" width="17" height="17" fill="currentColor">${r}</svg>`;
+    const JI = [
+      ["flex-start", g('<rect x="2" y="4" width="2.4" height="10" rx="1"/><rect x="5.6" y="4" width="2.4" height="10" rx="1"/>')],
+      ["center", g('<rect x="5" y="4" width="2.4" height="10" rx="1"/><rect x="10.6" y="4" width="2.4" height="10" rx="1"/>')],
+      ["flex-end", g('<rect x="10" y="4" width="2.4" height="10" rx="1"/><rect x="13.6" y="4" width="2.4" height="10" rx="1"/>')],
+      ["space-between", g('<rect x="2" y="4" width="2.4" height="10" rx="1"/><rect x="13.6" y="4" width="2.4" height="10" rx="1"/>')]
+    ];
+    const AI = [
+      ["flex-start", g('<rect x="4" y="2" width="10" height="2.4" rx="1"/><rect x="4" y="5.6" width="10" height="2.4" rx="1"/>')],
+      ["center", g('<rect x="4" y="5" width="10" height="2.4" rx="1"/><rect x="4" y="10.6" width="10" height="2.4" rx="1"/>')],
+      ["flex-end", g('<rect x="4" y="10" width="10" height="2.4" rx="1"/><rect x="4" y="13.6" width="10" height="2.4" rx="1"/>')],
+      ["stretch", g('<rect x="4" y="2" width="10" height="14" rx="1"/>')]
+    ];
+    const row = (label, prop, cur, entries) => {
+      const btns = entries.map(
+        ([v, ic]) => `<button class="uiv-fbtn${cur === v ? " on" : ""}" data-prop="${prop}" data-val="${v}" title="${prop}: ${v}">${ic}</button>`
+      ).join("");
+      return `<div class="uiv-ctl${this.controlStateClass([prop])}">${this.ctlLabel(label, [prop])}<div class="cfield uiv-fbtns">${btns}</div><span></span></div>`;
     };
-    const btn = (prop, val, icon, cur) => `<button class="uiv-tbtn${cur === val ? " on" : ""}" data-prop="${prop}" data-val="${val}" title="${prop}: ${val}">${icon}</button>`;
-    const jb = Object.entries(JI).map(([v, ic]) => btn("justify-content", v, ic, j)).join("");
-    const ab = Object.entries(AI).map(([v, ic]) => btn("align-items", v, ic, a)).join("");
-    return `<div class="uiv-toolbar"><div class="uiv-tgroup">${jb}</div><div class="uiv-tsep"></div><div class="uiv-tgroup">${ab}</div></div>`;
+    return row("Justify", "justify-content", j, JI) + row("Align", "align-items", a, AI);
   }
   /** Figma/Framer-style nested box-model widget: MARGIN ring around a PADDING ring,
    *  with an editable number on each of the 8 sides. Commits via the engine. */
@@ -2531,11 +2682,11 @@ var Uivisor = class {
       return `<input class="uiv-bm-i ${pos}${this.controlStateClass([css])}${tok ? " uiv-bm-tok" : ""}" data-css="${css}" value="${escapeAttr(val)}" title="${escapeAttr(title)}" inputmode="decimal" spellcheck="false">`;
     };
     const spaceTokens = this.designSystem().byCategory["spacing"] ?? [];
-    const pop = spaceTokens.length ? `<div class="uiv-bm-pop" hidden><span class="uiv-bm-poplabel">Token</span>` + spaceTokens.map((t) => `<button class="uiv-bm-chip" data-var="${escapeAttr(t.cssVar)}" title="${escapeAttr(t.value)}">${escapeHtml(t.name)} \xB7 ${escapeHtml(t.value)}</button>`).join("") + `</div>` : "";
+    const pop = spaceTokens.length ? `<div class="uiv-bm-pop" hidden><span class="uiv-bm-poplabel">${t("Token")}</span>` + spaceTokens.map((tok) => `<button class="uiv-bm-chip" data-var="${escapeAttr(tok.cssVar)}" title="${escapeAttr(tok.value)}">${escapeHtml(tok.name)} \xB7 ${escapeHtml(tok.value)}</button>`).join("") + `</div>` : "";
     return `<div class="uiv-bm"><span class="uiv-bm-tag">MARGIN</span>` + side("margin-top", "bm-top") + side("margin-right", "bm-right") + side("margin-bottom", "bm-bottom") + side("margin-left", "bm-left") + `<div class="uiv-bm-pad"><span class="uiv-bm-tag">PADDING</span>` + side("padding-top", "bm-top") + side("padding-right", "bm-right") + side("padding-bottom", "bm-bottom") + side("padding-left", "bm-left") + `<div class="uiv-bm-content"></div></div></div>` + pop;
   }
   controlsHtml(ctx) {
-    const legend = `<div class="uiv-leg"><span class="uiv-lg">file</span><span class="uiv-lg edit">edited</span><span class="uiv-lg inh">inherited</span><span class="uiv-lg auto">auto</span></div>`;
+    const legend = `<div class="uiv-leg"><span class="uiv-lg">${t("file")}</span><span class="uiv-lg edit">${t("edited")}</span><span class="uiv-lg inh">${t("inherited")}</span><span class="uiv-lg auto">${t("auto")}</span></div>`;
     const secs = SECTIONS.map((sec) => {
       const controls = sec.controls.filter((c) => this.relevant(c, ctx));
       if (!controls.length) return "";
@@ -2548,9 +2699,10 @@ var Uivisor = class {
         if (isSpacing && c.kind === "box" && (c.key === "padding" || c.key === "margin")) continue;
         const css = c.css;
         if (c.kind === "len" && c.hideWhenAuto && css && !this.revealedCtls.has(css) && this.controlState([css]) === "auto") {
-          adds.push(`<button class="uiv-addctl" data-css="${css}">+ ${escapeHtml(c.label)}</button>`);
+          adds.push(`<button class="uiv-addctl" data-css="${css}">+ ${escapeHtml(t(c.label))}</button>`);
         } else {
           rows.push(this.controlRow(c));
+          if (css === "display") rows.push(this.flexControlsHtml());
         }
       }
       const addRow = adds.length ? `<div class="uiv-adds">${adds.join("")}</div>` : "";
@@ -2561,10 +2713,10 @@ var Uivisor = class {
   /** A collapsible section header. Clicking it hides/shows the section's controls. */
   accordionTitle(title) {
     const collapsed = this.collapsedSecs.has(title);
-    return `<button class="uiv-sectitle uiv-acc${collapsed ? " collapsed" : ""}" data-sec="${escapeAttr(title)}"><span class="uiv-chev">${ICONS.chevron}</span>${title}</button>`;
+    return `<button class="uiv-sectitle uiv-acc${collapsed ? " collapsed" : ""}" data-sec="${escapeAttr(title)}"><span class="uiv-chev">${ICONS.chevron}</span>${escapeHtml(t(title))}</button>`;
   }
   numField(cssAttr, value, handle, changed, isSide, placeholder) {
-    return `<div class="uiv-num${changed ? " changed" : ""}" data-css="${cssAttr}"><span class="uiv-scrub${isSide ? " txt" : ""}" title="Drag to change">${handle}</span><input type="number" value="${escapeAttr(value)}" placeholder="${escapeAttr(placeholder)}"></div>`;
+    return `<div class="uiv-num${changed ? " changed" : ""}" data-css="${cssAttr}"><span class="uiv-scrub${isSide ? " txt" : ""}" title="${escapeAttr(t("Drag to change"))}">${handle}</span><input type="number" value="${escapeAttr(value)}" placeholder="${escapeAttr(placeholder)}"></div>`;
   }
   fontSizePx() {
     const el = this.selected;
@@ -2619,10 +2771,24 @@ var Uivisor = class {
     if (unit === "%") return px2 / fs * 100;
     return px2;
   }
+  /** A dim value's own number + unit ('' = unitless, e.g. line-height: 1.5). */
+  parseDim(v) {
+    const m = /^(-?\d*\.?\d+)(px|em|rem|%)?$/.exec(v.trim());
+    return m ? { num: parseFloat(m[1]), unit: m[2] ?? "" } : null;
+  }
   dimDisplay(c) {
     const st = this.st();
-    const computed = this.liveVal(c.css);
-    const unit = st.dimUnit[c.css] ?? c.defaultUnit;
+    const computed = this.liveVal(c.css).trim();
+    const native = this.parseDim(computed);
+    const picked = st.dimUnit[c.css];
+    if (picked != null) {
+      const px3 = this.currentPx(c.css);
+      if (px3 != null) return { num: String(round2(this.pxToUnit(px3, picked))), unit: picked, placeholder: computed || "\u2014" };
+    }
+    if (native && c.units.includes(native.unit)) {
+      return { num: String(round2(native.num)), unit: native.unit, placeholder: computed || "\u2014" };
+    }
+    const unit = picked ?? c.defaultUnit;
     const px2 = this.currentPx(c.css);
     if (px2 == null) return { num: "", unit, placeholder: computed || "normal" };
     return { num: String(round2(this.pxToUnit(px2, unit))), unit, placeholder: computed || "\u2014" };
@@ -2631,7 +2797,7 @@ var Uivisor = class {
     const d = this.dimDisplay(c);
     const changed = this.isChanged([c.css]);
     const units = c.units.map((u) => `<option value="${u}"${u === d.unit ? " selected" : ""}>${UNIT_LABELS[u] ?? u}</option>`).join("");
-    return `<div class="uiv-ctl${this.controlStateClass([c.css])}">${this.ctlLabel(c.label, [c.css])}<div class="cfield"><div class="uiv-num uiv-dim${changed ? " changed" : ""}" data-css="${c.css}"><span class="uiv-scrub" title="Drag to change">${c.icon}</span><input type="number" step="any" value="${escapeAttr(d.num)}" placeholder="${escapeAttr(d.placeholder)}"><select class="uiv-unit" title="Unit">${units}</select></div></div><span></span></div>`;
+    return `<div class="uiv-ctl${this.controlStateClass([c.css])}">${this.ctlLabel(c.label, [c.css])}<div class="cfield"><div class="uiv-num uiv-dim${changed ? " changed" : ""}" data-css="${c.css}"><span class="uiv-scrub" title="${escapeAttr(t("Drag to change"))}">${c.icon}</span><input type="number" step="any" value="${escapeAttr(d.num)}" placeholder="${escapeAttr(d.placeholder)}"><select class="uiv-unit" title="${escapeAttr(t("Unit"))}">${units}</select></div></div><span></span></div>`;
   }
   /** A design-token picker row for a property, shown only when the project exposes
    *  tokens for that category. Picking a token applies its value + tags the prompt. */
@@ -2647,17 +2813,17 @@ var Uivisor = class {
       (c) => c.property === css && c.after.designToken
     );
     if (cat === "color") {
-      const swatches = list.map((t) => {
-        const on = near?.exact && near.token.cssVar === t.cssVar;
-        return `<button class="uiv-swatch${on ? " on" : ""}" data-css="${css}" data-var="${escapeAttr(t.cssVar)}" title="${escapeAttr(`${t.name} \xB7 ${t.value}`)}" style="background:${escapeAttr(t.value)}"></button>`;
+      const swatches = list.map((tok) => {
+        const on = near?.exact && near.token.cssVar === tok.cssVar;
+        return `<button class="uiv-swatch${on ? " on" : ""}" data-css="${css}" data-var="${escapeAttr(tok.cssVar)}" title="${escapeAttr(`${tok.name} \xB7 ${tok.value}`)}" style="background:${escapeAttr(tok.value)}"></button>`;
       }).join("");
-      return `<div class="uiv-ctl"><span class="clabel uiv-tlabel">${label}</span><div class="cfield uiv-swatches">${swatches}</div><span></span></div>`;
+      return `<div class="uiv-ctl"><span class="clabel uiv-tlabel">${escapeHtml(t(label))}</span><div class="cfield uiv-swatches">${swatches}</div><span></span></div>`;
     }
-    const head = `<option value="">${near && !near.exact ? `\u2248 ${escapeHtml(near.token.name)} \xB7 pick token` : "\u2014 pick token \u2014"}</option>`;
+    const head = `<option value="">${near && !near.exact ? `\u2248 ${escapeHtml(near.token.name)} \xB7 ${t("pick token")}` : `\u2014 ${t("pick token")} \u2014`}</option>`;
     const opts = list.map(
-      (t) => `<option value="${escapeAttr(t.cssVar)}"${near?.exact && near.token.cssVar === t.cssVar ? " selected" : ""}>${escapeHtml(`${t.name} \xB7 ${t.value}`)}</option>`
+      (tok) => `<option value="${escapeAttr(tok.cssVar)}"${near?.exact && near.token.cssVar === tok.cssVar ? " selected" : ""}>${escapeHtml(`${tok.name} \xB7 ${tok.value}`)}</option>`
     ).join("");
-    return `<div class="uiv-ctl"><span class="clabel uiv-tlabel">${label}</span><div class="cfield"><select class="uiv-sel uiv-tokensel${edited ? " changed" : ""}" data-css="${css}">${head}${opts}</select></div><span></span></div>`;
+    return `<div class="uiv-ctl"><span class="clabel uiv-tlabel">${escapeHtml(t(label))}</span><div class="cfield"><select class="uiv-sel uiv-tokensel${edited ? " changed" : ""}" data-css="${css}">${head}${opts}</select></div><span></span></div>`;
   }
   controlRow(c) {
     if (c.kind === "box") {
@@ -2665,7 +2831,7 @@ var Uivisor = class {
       const info = this.numInfo(cssList);
       const changed = this.isChanged(cssList);
       const open = this.expanded.has(c.key);
-      let html = `<div class="uiv-ctl${this.controlStateClass(cssList)}">` + this.ctlLabel(c.label, cssList) + `<div class="cfield">${this.numField(cssList.join(","), info.mixed ? "" : info.value, c.icon, changed, false, info.mixed ? "Mixed" : "\u2014")}</div><button class="uiv-expand${open ? " on" : ""}" data-key="${c.key}" title="Edit each side individually">${open ? ICONS.collapse : ICONS.expand}</button></div>`;
+      let html = `<div class="uiv-ctl${this.controlStateClass(cssList)}">` + this.ctlLabel(c.label, cssList) + `<div class="cfield">${this.numField(cssList.join(","), info.mixed ? "" : info.value, c.icon, changed, false, info.mixed ? t("Mixed") : "\u2014")}</div><button class="uiv-expand${open ? " on" : ""}" data-key="${c.key}" title="${escapeAttr(t("Edit each side individually"))}">${open ? ICONS.collapse : ICONS.expand}</button></div>`;
       if (open) {
         html += `<div class="uiv-sides">` + c.sides.map((s) => {
           const v = this.liveNum(s.css);
@@ -2702,7 +2868,7 @@ var Uivisor = class {
   }
   bindControls() {
     const root = this.root;
-    root.querySelectorAll(".uiv-tbtn").forEach((node) => {
+    root.querySelectorAll(".uiv-fbtn").forEach((node) => {
       const btn = node;
       const prop = btn.getAttribute("data-prop");
       const val = btn.getAttribute("data-val");
@@ -2770,7 +2936,7 @@ var Uivisor = class {
       const cssVar = btn.getAttribute("data-var");
       btn.addEventListener("mousedown", (e) => {
         e.preventDefault();
-        const token = this.designSystem().tokens.find((t) => t.cssVar === cssVar);
+        const token = this.designSystem().tokens.find((t2) => t2.cssVar === cssVar);
         if (token) this.applyToken(this.lastBmSide, token);
       });
     });
@@ -2826,7 +2992,7 @@ var Uivisor = class {
       const css = sel.getAttribute("data-css");
       sel.addEventListener("change", () => {
         if (!sel.value) return;
-        const token = this.designSystem().tokens.find((t) => t.cssVar === sel.value);
+        const token = this.designSystem().tokens.find((t2) => t2.cssVar === sel.value);
         if (token) this.applyToken(css, token);
       });
     });
@@ -2835,7 +3001,7 @@ var Uivisor = class {
       const css = btn.getAttribute("data-css");
       const cssVar = btn.getAttribute("data-var");
       btn.addEventListener("click", () => {
-        const token = this.designSystem().tokens.find((t) => t.cssVar === cssVar);
+        const token = this.designSystem().tokens.find((t2) => t2.cssVar === cssVar);
         if (token) this.applyToken(css, token);
       });
     });
@@ -2870,22 +3036,24 @@ var Uivisor = class {
       const bp = btn.getAttribute("data-bp");
       btn.addEventListener("click", () => {
         this.pickedBp = bp;
-        this.setFrameWidth(bp === "base" ? this.defaultFrameWidth() : this.scopeWidth(bp));
+        this.setFrameWidth(bp === "base" ? this.baseFrameWidth() : this.scopeWidth(bp));
         this.reapplyScope();
         this.renderBody();
       });
     });
-    root.querySelectorAll(".uiv-clschip").forEach((node) => {
-      const btn = node;
-      const target = btn.getAttribute("data-target");
-      btn.addEventListener("click", () => {
+    const targetSel = root.querySelector(".uiv-targetsel");
+    if (targetSel) {
+      targetSel.addEventListener("change", () => {
         const st = this.st();
-        if (st && st.record.target !== target) this.pushHistory();
-        if (st) st.record.target = target;
+        if (!st) return;
+        const next = targetSel.value === "__new__" ? st.record.target.startsWith("new:") ? st.record.target : "new:" : targetSel.value;
+        if (st.record.target !== next) this.pushHistory();
+        st.record.target = next;
         this.reapplyForTarget();
         this.renderBody();
+        if (next === "new:") this.root.querySelector(".uiv-newclass")?.focus();
       });
-    });
+    }
     root.querySelectorAll(".uiv-newclass").forEach((node) => {
       const input = node;
       input.addEventListener("change", () => {
@@ -3041,13 +3209,13 @@ var Uivisor = class {
   }
   async copyPrompt() {
     const recs = this.records();
-    if (!recs.length) return this.showToast("No tweaks recorded yet");
+    if (!recs.length) return this.showToast(t("No tweaks recorded yet"));
     await this.copy(renderPrompt(recs));
-    this.showToast("Prompt copied \u2713");
+    this.showToast(t("Prompt copied \u2713"));
   }
   async copyJSON() {
     const recs = this.records();
-    if (!recs.length) return this.showToast("No tweaks recorded yet");
+    if (!recs.length) return this.showToast(t("No tweaks recorded yet"));
     const spec = renderSpec(recs, {
       url: location.href,
       width: window.innerWidth,
@@ -3056,7 +3224,7 @@ var Uivisor = class {
       now: (/* @__PURE__ */ new Date()).toISOString()
     });
     await this.copy(JSON.stringify(spec, null, 2));
-    this.showToast("JSON copied \u2713");
+    this.showToast(t("JSON copied \u2713"));
   }
   resetSelected() {
     const el = this.selected;
@@ -3120,16 +3288,16 @@ var Uivisor = class {
     this.renderBody();
   }
   undo() {
-    if (!this.undoStack.length) return this.showToast("Nothing to undo");
+    if (!this.undoStack.length) return this.showToast(t("Nothing to undo"));
     this.redoStack.push(this.cloneSnap());
     this.applySnap(this.undoStack.pop());
-    this.showToast("Undo \u21A9");
+    this.showToast(t("Undo \u21A9"));
   }
   redo() {
-    if (!this.redoStack.length) return this.showToast("Nothing to redo");
+    if (!this.redoStack.length) return this.showToast(t("Nothing to redo"));
     this.undoStack.push(this.cloneSnap());
     this.applySnap(this.redoStack.pop());
-    this.showToast("Redo \u21AA");
+    this.showToast(t("Redo \u21AA"));
   }
   async copy(text) {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uivisor",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "description": "Dev-only visual UI tweaker that turns mouse edits into a precise, breakpoint-aware prompt for your AI coding agent — without touching your source.",
   "license": "MIT",