uivisor 0.2.0 → 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 };
@@ -737,609 +725,6 @@ function collectVarNames(rule, out) {
   if (inner) for (const r of Array.from(inner)) collectVarNames(r, out);
 }
 
-// src/overlay/cssData.ts
-var CSS_PROPERTY_DATA = [
-  { "property": "display", "category": "Layout", "type": "enum", "keywords": ["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "flow-root", "none", "contents", "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-cell", "table-column-group", "table-column", "table-caption", "list-item", "ruby"] },
-  { "property": "position", "category": "Layout", "type": "enum", "keywords": ["static", "relative", "absolute", "fixed", "sticky"] },
-  { "property": "top", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
-  { "property": "right", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
-  { "property": "bottom", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
-  { "property": "left", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "box": "inset" },
-  { "property": "inset", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
-  { "property": "inset-block", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
-  { "property": "inset-inline", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"], "shorthand": true },
-  { "property": "inset-block-start", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
-  { "property": "inset-block-end", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
-  { "property": "inset-inline-start", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
-  { "property": "inset-inline-end", "category": "Layout", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw"] },
-  { "property": "float", "category": "Layout", "type": "enum", "keywords": ["left", "right", "none", "inline-start", "inline-end"] },
-  { "property": "clear", "category": "Layout", "type": "enum", "keywords": ["none", "left", "right", "both", "inline-start", "inline-end"] },
-  { "property": "visibility", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "collapse"], "inherited": true },
-  { "property": "z-index", "category": "Layout", "type": "integer", "keywords": ["auto"] },
-  { "property": "box-sizing", "category": "Layout", "type": "enum", "keywords": ["content-box", "border-box"] },
-  { "property": "overflow", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"], "shorthand": true },
-  { "property": "overflow-x", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
-  { "property": "overflow-y", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
-  { "property": "overflow-block", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
-  { "property": "overflow-inline", "category": "Layout", "type": "enum", "keywords": ["visible", "hidden", "clip", "scroll", "auto"] },
-  { "property": "overflow-clip-margin", "category": "Layout", "type": "length", "keywords": ["content-box", "padding-box", "border-box"], "units": ["px", "em", "rem"] },
-  { "property": "isolation", "category": "Layout", "type": "enum", "keywords": ["auto", "isolate"] },
-  { "property": "contain", "category": "Layout", "type": "enum", "keywords": ["none", "strict", "content", "size", "inline-size", "layout", "style", "paint"] },
-  { "property": "content-visibility", "category": "Layout", "type": "enum", "keywords": ["visible", "auto", "hidden"] },
-  { "property": "contain-intrinsic-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"], "shorthand": true },
-  { "property": "contain-intrinsic-width", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
-  { "property": "contain-intrinsic-height", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
-  { "property": "contain-intrinsic-block-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
-  { "property": "contain-intrinsic-inline-size", "category": "Layout", "type": "length", "keywords": ["none", "auto"], "units": ["px", "em", "rem"] },
-  { "property": "order", "category": "Layout", "type": "integer" },
-  { "property": "flex", "category": "Flexbox", "type": "shorthand", "shorthand": true },
-  { "property": "flex-grow", "category": "Flexbox", "type": "number" },
-  { "property": "flex-shrink", "category": "Flexbox", "type": "number" },
-  { "property": "flex-basis", "category": "Flexbox", "type": "length", "keywords": ["auto", "content", "max-content", "min-content", "fit-content"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "flex-direction", "category": "Flexbox", "type": "enum", "keywords": ["row", "row-reverse", "column", "column-reverse"] },
-  { "property": "flex-wrap", "category": "Flexbox", "type": "enum", "keywords": ["nowrap", "wrap", "wrap-reverse"] },
-  { "property": "flex-flow", "category": "Flexbox", "type": "shorthand", "keywords": ["row", "row-reverse", "column", "column-reverse", "nowrap", "wrap", "wrap-reverse"], "shorthand": true },
-  { "property": "justify-content", "category": "Flexbox", "type": "enum", "keywords": ["normal", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right", "stretch", "safe", "unsafe"] },
-  { "property": "align-items", "category": "Flexbox", "type": "enum", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "safe", "unsafe", "anchor-center"] },
-  { "property": "align-content", "category": "Flexbox", "type": "enum", "keywords": ["normal", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "stretch", "start", "end", "baseline", "first baseline", "last baseline", "safe", "unsafe"] },
-  { "property": "align-self", "category": "Flexbox", "type": "enum", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "safe", "unsafe", "anchor-center"] },
-  { "property": "justify-self", "category": "Flexbox", "type": "enum", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "safe", "unsafe", "anchor-center"] },
-  { "property": "justify-items", "category": "Flexbox", "type": "enum", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "legacy", "safe", "unsafe", "anchor-center"] },
-  { "property": "place-content", "category": "Flexbox", "type": "shorthand", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right", "baseline", "first baseline", "last baseline"], "shorthand": true },
-  { "property": "place-items", "category": "Flexbox", "type": "shorthand", "keywords": ["normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end", "left", "right", "legacy"], "shorthand": true },
-  { "property": "place-self", "category": "Flexbox", "type": "shorthand", "keywords": ["auto", "normal", "stretch", "flex-start", "flex-end", "center", "baseline", "first baseline", "last baseline", "start", "end", "self-start", "self-end"], "shorthand": true },
-  { "property": "gap", "category": "Flexbox", "type": "shorthand", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "row-gap", "category": "Flexbox", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "column-gap", "category": "Flexbox", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "grid", "category": "Grid", "type": "shorthand", "shorthand": true },
-  { "property": "grid-template", "category": "Grid", "type": "shorthand", "shorthand": true },
-  { "property": "grid-template-columns", "category": "Grid", "type": "string", "keywords": ["none", "min-content", "max-content", "auto", "subgrid", "masonry"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
-  { "property": "grid-template-rows", "category": "Grid", "type": "string", "keywords": ["none", "min-content", "max-content", "auto", "subgrid", "masonry"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
-  { "property": "grid-template-areas", "category": "Grid", "type": "string", "keywords": ["none"] },
-  { "property": "grid-auto-columns", "category": "Grid", "type": "length", "keywords": ["auto", "min-content", "max-content"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
-  { "property": "grid-auto-rows", "category": "Grid", "type": "length", "keywords": ["auto", "min-content", "max-content"], "units": ["px", "em", "rem", "%", "fr", "vh", "vw", "ch"] },
-  { "property": "grid-auto-flow", "category": "Grid", "type": "enum", "keywords": ["row", "column", "dense"] },
-  { "property": "grid-column", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
-  { "property": "grid-row", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
-  { "property": "grid-column-start", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
-  { "property": "grid-column-end", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
-  { "property": "grid-row-start", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
-  { "property": "grid-row-end", "category": "Grid", "type": "string", "keywords": ["auto", "span"] },
-  { "property": "grid-area", "category": "Grid", "type": "shorthand", "keywords": ["auto", "span"], "shorthand": true },
-  { "property": "margin", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
-  { "property": "margin-top", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "margin-right", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "margin-bottom", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "margin-left", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "margin-block", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
-  { "property": "margin-block-start", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "margin-block-end", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "margin-inline", "category": "Spacing", "type": "shorthand", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin", "shorthand": true },
-  { "property": "margin-inline-start", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "margin-inline-end", "category": "Spacing", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "padding", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
-  { "property": "padding-top", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "padding-right", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "padding-bottom", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "padding-left", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "padding-block", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
-  { "property": "padding-block-start", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "padding-block-end", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "padding-inline", "category": "Spacing", "type": "shorthand", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding", "shorthand": true },
-  { "property": "padding-inline-start", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "padding-inline-end", "category": "Spacing", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "width", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "height", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "min-width", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "max-width", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "min-height", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "max-height", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "aspect-ratio", "category": "Sizing", "type": "number", "keywords": ["auto"] },
-  { "property": "block-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "inline-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "min-block-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "max-block-size", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "min-inline-size", "category": "Sizing", "type": "length", "keywords": ["auto", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "max-inline-size", "category": "Sizing", "type": "length", "keywords": ["none", "max-content", "min-content", "fit-content", "stretch"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "object-fit", "category": "Sizing", "type": "enum", "keywords": ["fill", "contain", "cover", "none", "scale-down"] },
-  { "property": "object-position", "category": "Sizing", "type": "length", "keywords": ["left", "right", "top", "bottom", "center"], "units": ["px", "%", "em", "rem"] },
-  { "property": "border", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-width", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-style", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-color", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-top", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-right", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-bottom", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-left", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-top-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
-  { "property": "border-right-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
-  { "property": "border-bottom-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
-  { "property": "border-left-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "border-width" },
-  { "property": "border-top-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
-  { "property": "border-right-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
-  { "property": "border-bottom-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
-  { "property": "border-left-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"], "box": "border-style" },
-  { "property": "border-top-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
-  { "property": "border-right-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
-  { "property": "border-bottom-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
-  { "property": "border-left-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"], "box": "border-color" },
-  { "property": "border-block", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-block-start", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-block-end", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-inline", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-inline-start", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-inline-end", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-block-width", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-inline-width", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-block-style", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-inline-style", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-block-color", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-inline-color", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-block-start-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "border-block-end-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "border-inline-start-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "border-inline-end-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "border-block-start-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
-  { "property": "border-block-end-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
-  { "property": "border-inline-start-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
-  { "property": "border-inline-end-style", "category": "Border", "type": "enum", "keywords": ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
-  { "property": "border-block-start-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
-  { "property": "border-block-end-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
-  { "property": "border-inline-start-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
-  { "property": "border-inline-end-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "transparent"] },
-  { "property": "border-radius", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-top-left-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
-  { "property": "border-top-right-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
-  { "property": "border-bottom-right-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
-  { "property": "border-bottom-left-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "radius" },
-  { "property": "border-start-start-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "border-start-end-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "border-end-start-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "border-end-end-radius", "category": "Border", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "border-image", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "border-image-source", "category": "Border", "type": "image", "keywords": ["none"] },
-  { "property": "border-image-slice", "category": "Border", "type": "number", "keywords": ["fill"], "units": ["%"] },
-  { "property": "border-image-width", "category": "Border", "type": "number", "keywords": ["auto"], "units": ["px", "%", "em", "rem"] },
-  { "property": "border-image-outset", "category": "Border", "type": "number", "units": ["px", "em", "rem"] },
-  { "property": "border-image-repeat", "category": "Border", "type": "enum", "keywords": ["stretch", "repeat", "round", "space"] },
-  { "property": "outline", "category": "Border", "type": "shorthand", "shorthand": true },
-  { "property": "outline-width", "category": "Border", "type": "length", "keywords": ["thin", "medium", "thick"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "outline-style", "category": "Border", "type": "enum", "keywords": ["auto", "none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"] },
-  { "property": "outline-color", "category": "Border", "type": "color", "keywords": ["currentcolor", "invert"] },
-  { "property": "outline-offset", "category": "Border", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "background", "category": "Background", "type": "shorthand", "shorthand": true },
-  { "property": "background-color", "category": "Background", "type": "color" },
-  { "property": "background-image", "category": "Background", "type": "image" },
-  { "property": "background-position", "category": "Background", "type": "shorthand", "keywords": ["top", "right", "bottom", "left", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "background-position-x", "category": "Background", "type": "length", "keywords": ["left", "right", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "background-position-y", "category": "Background", "type": "length", "keywords": ["top", "bottom", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "background-size", "category": "Background", "type": "shorthand", "keywords": ["auto", "cover", "contain"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "background-repeat", "category": "Background", "type": "enum", "keywords": ["repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"] },
-  { "property": "background-attachment", "category": "Background", "type": "enum", "keywords": ["scroll", "fixed", "local"] },
-  { "property": "background-clip", "category": "Background", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "text"] },
-  { "property": "background-origin", "category": "Background", "type": "enum", "keywords": ["border-box", "padding-box", "content-box"] },
-  { "property": "background-blend-mode", "category": "Background", "type": "enum", "keywords": ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"] },
-  { "property": "color", "category": "Typography", "type": "color", "inherited": true },
-  { "property": "opacity", "category": "Typography", "type": "number" },
-  { "property": "font", "category": "Typography", "type": "shorthand", "inherited": true, "shorthand": true },
-  { "property": "font-family", "category": "Typography", "type": "string", "inherited": true },
-  { "property": "font-size", "category": "Typography", "type": "length", "keywords": ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "larger", "smaller"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "inherited": true },
-  { "property": "font-size-adjust", "category": "Typography", "type": "number", "keywords": ["none", "ex-height", "cap-height", "ch-width", "ic-width", "ic-height", "from-font"], "inherited": true },
-  { "property": "font-weight", "category": "Typography", "type": "integer", "keywords": ["normal", "bold", "bolder", "lighter"], "inherited": true },
-  { "property": "font-style", "category": "Typography", "type": "enum", "keywords": ["normal", "italic", "oblique"], "inherited": true },
-  { "property": "font-variant", "category": "Typography", "type": "shorthand", "keywords": ["normal", "none", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps", "ordinal", "slashed-zero", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums", "diagonal-fractions", "stacked-fractions"], "inherited": true, "shorthand": true },
-  { "property": "font-variant-caps", "category": "Typography", "type": "enum", "keywords": ["normal", "small-caps", "all-small-caps", "petite-caps", "all-petite-caps", "unicase", "titling-caps"], "inherited": true },
-  { "property": "font-variant-numeric", "category": "Typography", "type": "enum", "keywords": ["normal", "ordinal", "slashed-zero", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums", "diagonal-fractions", "stacked-fractions"], "inherited": true },
-  { "property": "font-variant-ligatures", "category": "Typography", "type": "enum", "keywords": ["normal", "none", "common-ligatures", "no-common-ligatures", "discretionary-ligatures", "no-discretionary-ligatures", "historical-ligatures", "no-historical-ligatures", "contextual", "no-contextual"], "inherited": true },
-  { "property": "font-variant-east-asian", "category": "Typography", "type": "enum", "keywords": ["normal", "ruby", "jis78", "jis83", "jis90", "jis04", "simplified", "traditional", "full-width", "proportional-width"], "inherited": true },
-  { "property": "font-variant-position", "category": "Typography", "type": "enum", "keywords": ["normal", "sub", "super"], "inherited": true },
-  { "property": "font-stretch", "category": "Typography", "type": "percentage", "keywords": ["normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"], "units": ["%"], "inherited": true },
-  { "property": "font-feature-settings", "category": "Typography", "type": "string", "keywords": ["normal"], "inherited": true },
-  { "property": "font-variation-settings", "category": "Typography", "type": "string", "keywords": ["normal"], "inherited": true },
-  { "property": "font-kerning", "category": "Typography", "type": "enum", "keywords": ["auto", "normal", "none"], "inherited": true },
-  { "property": "font-optical-sizing", "category": "Typography", "type": "enum", "keywords": ["auto", "none"], "inherited": true },
-  { "property": "font-synthesis", "category": "Typography", "type": "enum", "keywords": ["none", "weight", "style", "small-caps", "position"], "inherited": true, "shorthand": true },
-  { "property": "line-height", "category": "Typography", "type": "number", "keywords": ["normal"], "units": ["px", "%", "em", "rem"], "inherited": true },
-  { "property": "letter-spacing", "category": "Typography", "type": "length", "keywords": ["normal"], "units": ["px", "em", "rem", "ch"], "inherited": true },
-  { "property": "word-spacing", "category": "Typography", "type": "length", "keywords": ["normal"], "units": ["px", "%", "em", "rem"], "inherited": true },
-  { "property": "text-align", "category": "Typography", "type": "enum", "keywords": ["start", "end", "left", "right", "center", "justify", "match-parent", "justify-all"], "inherited": true },
-  { "property": "text-align-last", "category": "Typography", "type": "enum", "keywords": ["auto", "start", "end", "left", "right", "center", "justify"], "inherited": true },
-  { "property": "text-justify", "category": "Typography", "type": "enum", "keywords": ["auto", "none", "inter-word", "inter-character"], "inherited": true },
-  { "property": "text-decoration", "category": "Typography", "type": "shorthand", "shorthand": true },
-  { "property": "text-decoration-line", "category": "Typography", "type": "enum", "keywords": ["none", "underline", "overline", "line-through", "blink"] },
-  { "property": "text-decoration-color", "category": "Typography", "type": "color" },
-  { "property": "text-decoration-style", "category": "Typography", "type": "enum", "keywords": ["solid", "double", "dotted", "dashed", "wavy"] },
-  { "property": "text-decoration-thickness", "category": "Typography", "type": "length", "keywords": ["auto", "from-font"], "units": ["px", "%", "em", "rem"] },
-  { "property": "text-decoration-skip-ink", "category": "Typography", "type": "enum", "keywords": ["auto", "none", "all"], "inherited": true },
-  { "property": "text-underline-offset", "category": "Typography", "type": "length", "keywords": ["auto"], "units": ["px", "%", "em", "rem"], "inherited": true },
-  { "property": "text-underline-position", "category": "Typography", "type": "enum", "keywords": ["auto", "from-font", "under", "left", "right"], "inherited": true },
-  { "property": "text-emphasis", "category": "Typography", "type": "shorthand", "inherited": true, "shorthand": true },
-  { "property": "text-emphasis-style", "category": "Typography", "type": "enum", "keywords": ["none", "filled", "open", "dot", "circle", "double-circle", "triangle", "sesame"], "inherited": true },
-  { "property": "text-emphasis-color", "category": "Typography", "type": "color", "inherited": true },
-  { "property": "text-emphasis-position", "category": "Typography", "type": "enum", "keywords": ["over", "under", "left", "right"], "inherited": true },
-  { "property": "text-transform", "category": "Typography", "type": "enum", "keywords": ["none", "capitalize", "uppercase", "lowercase", "full-width", "full-size-kana"], "inherited": true },
-  { "property": "text-indent", "category": "Typography", "type": "length", "keywords": ["hanging", "each-line"], "units": ["px", "%", "em", "rem"], "inherited": true },
-  { "property": "text-overflow", "category": "Typography", "type": "enum", "keywords": ["clip", "ellipsis"] },
-  { "property": "text-shadow", "category": "Typography", "type": "string", "keywords": ["none"], "inherited": true },
-  { "property": "white-space", "category": "Typography", "type": "enum", "keywords": ["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"], "inherited": true },
-  { "property": "white-space-collapse", "category": "Typography", "type": "enum", "keywords": ["collapse", "preserve", "preserve-breaks", "preserve-spaces", "break-spaces"], "inherited": true },
-  { "property": "text-wrap", "category": "Typography", "type": "enum", "keywords": ["wrap", "nowrap", "balance", "pretty", "stable"], "inherited": true },
-  { "property": "text-wrap-mode", "category": "Typography", "type": "enum", "keywords": ["wrap", "nowrap"], "inherited": true },
-  { "property": "text-wrap-style", "category": "Typography", "type": "enum", "keywords": ["auto", "balance", "pretty", "stable"], "inherited": true },
-  { "property": "word-break", "category": "Typography", "type": "enum", "keywords": ["normal", "break-all", "keep-all", "break-word", "auto-phrase"], "inherited": true },
-  { "property": "line-break", "category": "Typography", "type": "enum", "keywords": ["auto", "loose", "normal", "strict", "anywhere"], "inherited": true },
-  { "property": "overflow-wrap", "category": "Typography", "type": "enum", "keywords": ["normal", "break-word", "anywhere"], "inherited": true },
-  { "property": "hyphens", "category": "Typography", "type": "enum", "keywords": ["none", "manual", "auto"], "inherited": true },
-  { "property": "hyphenate-character", "category": "Typography", "type": "string", "keywords": ["auto"], "inherited": true },
-  { "property": "direction", "category": "Typography", "type": "enum", "keywords": ["ltr", "rtl"], "inherited": true },
-  { "property": "unicode-bidi", "category": "Typography", "type": "enum", "keywords": ["normal", "embed", "isolate", "bidi-override", "isolate-override", "plaintext"] },
-  { "property": "writing-mode", "category": "Typography", "type": "enum", "keywords": ["horizontal-tb", "vertical-rl", "vertical-lr", "sideways-rl", "sideways-lr"], "inherited": true },
-  { "property": "text-orientation", "category": "Typography", "type": "enum", "keywords": ["mixed", "upright", "sideways"], "inherited": true },
-  { "property": "text-combine-upright", "category": "Typography", "type": "enum", "keywords": ["none", "all", "digits"], "inherited": true },
-  { "property": "vertical-align", "category": "Typography", "type": "length", "keywords": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"], "units": ["px", "%", "em", "rem"] },
-  { "property": "tab-size", "category": "Typography", "type": "number", "units": ["px", "em", "rem"], "inherited": true },
-  { "property": "quotes", "category": "Typography", "type": "string", "keywords": ["none", "auto"], "inherited": true },
-  { "property": "hanging-punctuation", "category": "Typography", "type": "enum", "keywords": ["none", "first", "last", "force-end", "allow-end"], "inherited": true },
-  { "property": "text-rendering", "category": "Typography", "type": "enum", "keywords": ["auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"], "inherited": true },
-  { "property": "-webkit-text-stroke", "category": "Typography", "type": "shorthand", "shorthand": true },
-  { "property": "-webkit-text-stroke-width", "category": "Typography", "type": "length", "units": ["px", "em", "rem"] },
-  { "property": "-webkit-text-stroke-color", "category": "Typography", "type": "color" },
-  { "property": "-webkit-text-fill-color", "category": "Typography", "type": "color" },
-  { "property": "-webkit-line-clamp", "category": "Typography", "type": "integer", "keywords": ["none"] },
-  { "property": "caret-color", "category": "Typography", "type": "color", "keywords": ["auto"], "inherited": true },
-  { "property": "box-shadow", "category": "Effects", "type": "string", "keywords": ["none"] },
-  { "property": "filter", "category": "Effects", "type": "string", "keywords": ["none"] },
-  { "property": "backdrop-filter", "category": "Effects", "type": "string", "keywords": ["none"] },
-  { "property": "mix-blend-mode", "category": "Effects", "type": "enum", "keywords": ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-darker", "plus-lighter"] },
-  { "property": "clip-path", "category": "Effects", "type": "string", "keywords": ["none", "border-box", "padding-box", "content-box", "margin-box", "fill-box", "stroke-box", "view-box"] },
-  { "property": "mask", "category": "Effects", "type": "shorthand", "shorthand": true },
-  { "property": "mask-image", "category": "Effects", "type": "image", "keywords": ["none"] },
-  { "property": "mask-mode", "category": "Effects", "type": "enum", "keywords": ["alpha", "luminance", "match-source"] },
-  { "property": "mask-repeat", "category": "Effects", "type": "enum", "keywords": ["repeat", "repeat-x", "repeat-y", "space", "round", "no-repeat"] },
-  { "property": "mask-position", "category": "Effects", "type": "length", "keywords": ["top", "bottom", "left", "right", "center"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "mask-clip", "category": "Effects", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "fill-box", "stroke-box", "view-box", "no-clip"] },
-  { "property": "mask-origin", "category": "Effects", "type": "enum", "keywords": ["border-box", "padding-box", "content-box", "fill-box", "stroke-box", "view-box"] },
-  { "property": "mask-size", "category": "Effects", "type": "length", "keywords": ["auto", "cover", "contain"], "units": ["px", "%", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "mask-composite", "category": "Effects", "type": "enum", "keywords": ["add", "subtract", "intersect", "exclude"] },
-  { "property": "mask-type", "category": "Effects", "type": "enum", "keywords": ["luminance", "alpha"] },
-  { "property": "cursor", "category": "Effects", "type": "enum", "keywords": ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"], "inherited": true },
-  { "property": "accent-color", "category": "Effects", "type": "color", "keywords": ["auto"], "inherited": true },
-  { "property": "color-scheme", "category": "Effects", "type": "enum", "keywords": ["normal", "light", "dark", "only"], "inherited": true },
-  { "property": "transform", "category": "Transform", "type": "string" },
-  { "property": "transform-origin", "category": "Transform", "type": "string" },
-  { "property": "transform-style", "category": "Transform", "type": "enum", "keywords": ["flat", "preserve-3d"] },
-  { "property": "transform-box", "category": "Transform", "type": "enum", "keywords": ["content-box", "border-box", "fill-box", "stroke-box", "view-box"] },
-  { "property": "translate", "category": "Transform", "type": "string" },
-  { "property": "rotate", "category": "Transform", "type": "string" },
-  { "property": "scale", "category": "Transform", "type": "string" },
-  { "property": "perspective", "category": "Transform", "type": "length", "keywords": ["none"], "units": ["px", "em", "rem", "vh", "vw", "ch"] },
-  { "property": "perspective-origin", "category": "Transform", "type": "string" },
-  { "property": "backface-visibility", "category": "Transform", "type": "enum", "keywords": ["visible", "hidden"] },
-  { "property": "transition", "category": "Animation", "type": "shorthand", "shorthand": true },
-  { "property": "transition-property", "category": "Animation", "type": "enum", "keywords": ["none", "all"] },
-  { "property": "transition-duration", "category": "Animation", "type": "time", "units": ["s", "ms"] },
-  { "property": "transition-timing-function", "category": "Animation", "type": "enum", "keywords": ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps", "cubic-bezier"] },
-  { "property": "transition-delay", "category": "Animation", "type": "time", "units": ["s", "ms"] },
-  { "property": "transition-behavior", "category": "Animation", "type": "enum", "keywords": ["normal", "allow-discrete"] },
-  { "property": "animation", "category": "Animation", "type": "shorthand", "shorthand": true },
-  { "property": "animation-name", "category": "Animation", "type": "enum", "keywords": ["none"] },
-  { "property": "animation-duration", "category": "Animation", "type": "time", "units": ["s", "ms"] },
-  { "property": "animation-timing-function", "category": "Animation", "type": "enum", "keywords": ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps", "cubic-bezier"] },
-  { "property": "animation-delay", "category": "Animation", "type": "time", "units": ["s", "ms"] },
-  { "property": "animation-iteration-count", "category": "Animation", "type": "number", "keywords": ["infinite"] },
-  { "property": "animation-direction", "category": "Animation", "type": "enum", "keywords": ["normal", "reverse", "alternate", "alternate-reverse"] },
-  { "property": "animation-fill-mode", "category": "Animation", "type": "enum", "keywords": ["none", "forwards", "backwards", "both"] },
-  { "property": "animation-play-state", "category": "Animation", "type": "enum", "keywords": ["running", "paused"] },
-  { "property": "animation-composition", "category": "Animation", "type": "enum", "keywords": ["replace", "add", "accumulate"] },
-  { "property": "will-change", "category": "Animation", "type": "enum", "keywords": ["auto", "scroll-position", "contents"] },
-  { "property": "content", "category": "Misc", "type": "string" },
-  { "property": "list-style", "category": "Misc", "type": "shorthand", "inherited": true, "shorthand": true },
-  { "property": "list-style-type", "category": "Misc", "type": "enum", "keywords": ["disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-latin", "upper-latin", "lower-alpha", "upper-alpha", "armenian", "georgian", "cjk-decimal", "cjk-ideographic", "hebrew", "hiragana", "hiragana-iroha", "katakana", "katakana-iroha", "arabic-indic", "bengali", "cambodian", "khmer", "devanagari", "gujarati", "gurmukhi", "kannada", "lao", "malayalam", "myanmar", "oriya", "persian", "tamil", "telugu", "thai", "tibetan", "japanese-formal", "japanese-informal", "korean-hangul-formal", "korean-hanja-formal", "korean-hanja-informal", "simp-chinese-formal", "simp-chinese-informal", "trad-chinese-formal", "trad-chinese-informal", "disclosure-open", "disclosure-closed", "none"], "inherited": true },
-  { "property": "list-style-position", "category": "Misc", "type": "enum", "keywords": ["inside", "outside"], "inherited": true },
-  { "property": "list-style-image", "category": "Misc", "type": "image", "inherited": true },
-  { "property": "scroll-behavior", "category": "Misc", "type": "enum", "keywords": ["auto", "smooth"] },
-  { "property": "scroll-snap-type", "category": "Misc", "type": "enum", "keywords": ["none", "x", "y", "block", "inline", "both", "mandatory", "proximity"] },
-  { "property": "scroll-snap-align", "category": "Misc", "type": "enum", "keywords": ["none", "start", "end", "center"] },
-  { "property": "scroll-snap-stop", "category": "Misc", "type": "enum", "keywords": ["normal", "always"] },
-  { "property": "scroll-margin", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "scroll-margin-top", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "scroll-margin-right", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "scroll-margin-bottom", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "scroll-margin-left", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "scroll-margin-block", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "scroll-margin-inline", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "scroll-margin-block-start", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "scroll-margin-block-end", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "scroll-margin-inline-start", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "scroll-margin-inline-end", "category": "Misc", "type": "length", "units": ["px", "em", "rem", "vh", "vw", "ch"], "box": "margin" },
-  { "property": "scroll-padding", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "scroll-padding-top", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "scroll-padding-right", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "scroll-padding-bottom", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "scroll-padding-left", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "scroll-padding-block", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "scroll-padding-inline", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "shorthand": true },
-  { "property": "scroll-padding-block-start", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "scroll-padding-block-end", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "scroll-padding-inline-start", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "scroll-padding-inline-end", "category": "Misc", "type": "length", "units": ["px", "%", "em", "rem", "vh", "vw", "ch"], "box": "padding" },
-  { "property": "overscroll-behavior", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"], "shorthand": true },
-  { "property": "overscroll-behavior-x", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
-  { "property": "overscroll-behavior-y", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
-  { "property": "overscroll-behavior-block", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
-  { "property": "overscroll-behavior-inline", "category": "Misc", "type": "enum", "keywords": ["auto", "contain", "none"] },
-  { "property": "user-select", "category": "Misc", "type": "enum", "keywords": ["auto", "text", "none", "all", "contain"] },
-  { "property": "pointer-events", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "all"], "inherited": true },
-  { "property": "touch-action", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "pan-x", "pan-left", "pan-right", "pan-y", "pan-up", "pan-down", "pinch-zoom", "manipulation"] },
-  { "property": "resize", "category": "Misc", "type": "enum", "keywords": ["none", "both", "horizontal", "vertical", "block", "inline"] },
-  { "property": "appearance", "category": "Misc", "type": "enum", "keywords": ["none", "auto", "base-select", "menulist-button", "textfield", "button", "searchfield", "textarea", "checkbox", "radio", "menulist", "listbox", "meter", "progress-bar", "push-button", "slider-horizontal", "square-button"] },
-  { "property": "table-layout", "category": "Misc", "type": "enum", "keywords": ["auto", "fixed"] },
-  { "property": "border-collapse", "category": "Misc", "type": "enum", "keywords": ["separate", "collapse"], "inherited": true },
-  { "property": "border-spacing", "category": "Misc", "type": "length", "units": ["px", "em", "rem"], "inherited": true },
-  { "property": "caption-side", "category": "Misc", "type": "enum", "keywords": ["top", "bottom", "block-start", "block-end", "inline-start", "inline-end"], "inherited": true },
-  { "property": "empty-cells", "category": "Misc", "type": "enum", "keywords": ["show", "hide"], "inherited": true },
-  { "property": "caret", "category": "Misc", "type": "shorthand", "inherited": true, "shorthand": true },
-  { "property": "caret-shape", "category": "Misc", "type": "enum", "keywords": ["auto", "bar", "block", "underscore"], "inherited": true },
-  { "property": "scrollbar-width", "category": "Misc", "type": "enum", "keywords": ["auto", "thin", "none"] },
-  { "property": "scrollbar-color", "category": "Misc", "type": "color", "inherited": true },
-  { "property": "scrollbar-gutter", "category": "Misc", "type": "enum", "keywords": ["auto", "stable", "both-edges"] },
-  { "property": "image-rendering", "category": "Misc", "type": "enum", "keywords": ["auto", "smooth", "high-quality", "crisp-edges", "pixelated"], "inherited": true },
-  { "property": "counter-reset", "category": "Misc", "type": "string" },
-  { "property": "counter-increment", "category": "Misc", "type": "string" },
-  { "property": "counter-set", "category": "Misc", "type": "string" },
-  { "property": "all", "category": "Misc", "type": "enum", "keywords": ["initial", "inherit", "unset", "revert", "revert-layer"], "shorthand": true },
-  { "property": "forced-color-adjust", "category": "Misc", "type": "enum", "keywords": ["auto", "none", "preserve-parent-color"], "inherited": true },
-  { "property": "print-color-adjust", "category": "Misc", "type": "enum", "keywords": ["economy", "exact"], "inherited": true }
-];
-
-// src/overlay/cssRegistry.ts
-var COMMON = /* @__PURE__ */ new Set([
-  // Layout
-  "display",
-  "position",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "float",
-  "clear",
-  "z-index",
-  "box-sizing",
-  "visibility",
-  "overflow",
-  "overflow-x",
-  "overflow-y",
-  "opacity",
-  // Flexbox
-  "flex",
-  "flex-direction",
-  "flex-wrap",
-  "justify-content",
-  "align-items",
-  "align-content",
-  "align-self",
-  "justify-self",
-  "flex-grow",
-  "flex-shrink",
-  "flex-basis",
-  "order",
-  "gap",
-  "row-gap",
-  "column-gap",
-  // Grid
-  "grid-template-columns",
-  "grid-template-rows",
-  "grid-auto-flow",
-  "grid-auto-columns",
-  "grid-auto-rows",
-  "grid-column",
-  "grid-row",
-  "grid-area",
-  "justify-items",
-  "place-items",
-  // Spacing
-  "margin",
-  "margin-top",
-  "margin-right",
-  "margin-bottom",
-  "margin-left",
-  "padding",
-  "padding-top",
-  "padding-right",
-  "padding-bottom",
-  "padding-left",
-  // Sizing
-  "width",
-  "height",
-  "min-width",
-  "max-width",
-  "min-height",
-  "max-height",
-  "aspect-ratio",
-  "object-fit",
-  "object-position",
-  // Border
-  "border",
-  "border-width",
-  "border-style",
-  "border-color",
-  "border-top-width",
-  "border-right-width",
-  "border-bottom-width",
-  "border-left-width",
-  "border-radius",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-bottom-right-radius",
-  "border-bottom-left-radius",
-  "outline",
-  "outline-width",
-  "outline-style",
-  "outline-color",
-  "outline-offset",
-  // Background
-  "background",
-  "background-color",
-  "background-image",
-  "background-size",
-  "background-position",
-  "background-repeat",
-  "background-attachment",
-  "background-clip",
-  // Typography
-  "color",
-  "font",
-  "font-family",
-  "font-size",
-  "font-weight",
-  "font-style",
-  "font-variant",
-  "line-height",
-  "letter-spacing",
-  "word-spacing",
-  "text-align",
-  "text-decoration",
-  "text-decoration-line",
-  "text-decoration-color",
-  "text-transform",
-  "text-indent",
-  "text-overflow",
-  "white-space",
-  "text-shadow",
-  "direction",
-  "vertical-align",
-  // Effects
-  "box-shadow",
-  "filter",
-  "backdrop-filter",
-  "mix-blend-mode",
-  "clip-path",
-  "cursor",
-  "mask",
-  // Transform
-  "transform",
-  "transform-origin",
-  "transform-style",
-  "perspective",
-  "backface-visibility",
-  "translate",
-  "rotate",
-  "scale",
-  // Animation
-  "transition",
-  "transition-property",
-  "transition-duration",
-  "transition-timing-function",
-  "transition-delay",
-  "animation",
-  "animation-name",
-  "animation-duration",
-  "animation-timing-function",
-  "animation-delay",
-  "animation-iteration-count",
-  "animation-direction",
-  "animation-fill-mode",
-  "will-change",
-  // Misc
-  "content",
-  "list-style",
-  "list-style-type",
-  "list-style-position",
-  "user-select",
-  "pointer-events",
-  "scroll-behavior",
-  "resize",
-  "caret-color",
-  "accent-color",
-  "appearance"
-]);
-var CATEGORY_ORDER = [
-  "Layout",
-  "Flexbox",
-  "Grid",
-  "Spacing",
-  "Sizing",
-  "Border",
-  "Background",
-  "Typography",
-  "Effects",
-  "Transform",
-  "Animation",
-  "Misc"
-];
-var DEFAULT_UNITS = ["px", "%", "em", "rem", "vh", "vw", "ch"];
-function categoryFor(p) {
-  if (/^grid/.test(p)) return "Grid";
-  if (/^(flex|justify|align|order|place)/.test(p)) return "Flexbox";
-  if (/^(margin|padding|gap|row-gap|column-gap)/.test(p)) return "Spacing";
-  if (/^(width|height|min-|max-|aspect-ratio|inline-size|block-size|object-)/.test(p)) return "Sizing";
-  if (/^(border|outline)/.test(p)) return "Border";
-  if (/^background/.test(p)) return "Background";
-  if (/^(font|text|color$|line-height|letter|word|white-space|writing|direction|vertical-align|tab-size|hyphens|quotes|list-style)/.test(p))
-    return "Typography";
-  if (/^(transition|animation|will-change)/.test(p)) return "Animation";
-  if (/^(transform|translate|rotate|scale|perspective|backface)/.test(p)) return "Transform";
-  if (/^(opacity|box-shadow|filter|backdrop|mix-blend|clip-path|mask|cursor)/.test(p)) return "Effects";
-  if (/^(display|position|top|right|bottom|left|inset|float|clear|visibility|z-index|box-sizing|overflow|isolation|contain)/.test(p))
-    return "Layout";
-  return "Misc";
-}
-function typeForValue(p, v) {
-  const s = (v || "").trim();
-  if (/color/.test(p) || /^(rgb|rgba|hsl|hsla|#|currentcolor|transparent)\b/i.test(s)) return "color";
-  if (/^-?\d*\.?\d+(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|q)$/i.test(s)) return "length";
-  if (/^-?\d*\.?\d+(s|ms)$/i.test(s)) return "time";
-  if (/^-?\d*\.?\d+(deg|rad|grad|turn)$/i.test(s)) return "angle";
-  if (/^(url\(|linear-gradient|radial-gradient|conic-gradient)/i.test(s)) return "image";
-  if (/(^|-)color$/.test(p)) return "color";
-  if (/(width|height|size|^inset|margin|padding|gap|^top$|^left$|^right$|^bottom$|spacing|indent|offset|radius|translate|^scroll-padding|^scroll-margin)/.test(p))
-    return "length";
-  if (/^-?\d+$/.test(s)) return "integer";
-  if (/^-?\d*\.?\d+$/.test(s)) return "number";
-  return "string";
-}
-var _registry = null;
-function cssRegistry() {
-  if (_registry) return _registry;
-  const byProp = /* @__PURE__ */ new Map();
-  for (const m of CSS_PROPERTY_DATA) {
-    byProp.set(m.property, {
-      ...m,
-      units: m.units && m.units.length ? m.units : m.type === "length" ? DEFAULT_UNITS : void 0,
-      common: COMMON.has(m.property)
-    });
-  }
-  try {
-    if (typeof document !== "undefined") {
-      const cs = getComputedStyle(document.documentElement);
-      for (let i = 0; i < cs.length; i++) {
-        const p = cs[i];
-        if (!p || p.startsWith("--") || byProp.has(p)) continue;
-        const type = typeForValue(p, cs.getPropertyValue(p));
-        byProp.set(p, { property: p, category: categoryFor(p), type, units: type === "length" ? DEFAULT_UNITS : void 0 });
-      }
-    }
-  } catch {
-  }
-  const groups = /* @__PURE__ */ new Map();
-  for (const [prop, m] of byProp) {
-    const cat = m.category || "Misc";
-    const arr = groups.get(cat) ?? [];
-    arr.push(prop);
-    groups.set(cat, arr);
-  }
-  const orderedNames = [
-    ...CATEGORY_ORDER.filter((c) => groups.has(c)),
-    ...[...groups.keys()].filter((c) => !CATEGORY_ORDER.includes(c)).sort()
-  ];
-  const categories = orderedNames.map((name) => ({ name, props: groups.get(name).slice().sort() }));
-  _registry = { byProp, categories };
-  return _registry;
-}
-function cssMeta(property) {
-  return cssRegistry().byProp.get(property);
-}
-
 // src/overlay/mechanism.ts
 var TW_UTILITY = /^-?(?:p|m|px|py|pt|pr|pb|pl|mx|my|mt|mr|mb|ml|gap|w|h|min-w|max-w|min-h|max-h|text|bg|border|rounded|flex|grid|gap-x|gap-y|items|justify|self|place|font|leading|tracking|space|inline|block|inline-block|hidden|table|absolute|relative|fixed|sticky|static|top|bottom|left|right|inset|z|shadow|opacity|transition|duration|ease|scale|rotate|translate|cursor|overflow|object|aspect|order|col|row|basis|grow|shrink|divide|ring|outline)(?:-|$)/;
 var TW_VARIANT = /^(?:sm|md|lg|xl|2xl|hover|focus|focus-visible|focus-within|active|visited|disabled|dark|group|group-hover|peer|first|last|odd|even|motion-safe|motion-reduce|print|rtl|ltr)::?|^(?:sm|md|lg|xl|2xl|hover|focus|active|disabled|dark|group-hover):/;
@@ -1408,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);
@@ -1630,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;
 }
@@ -1806,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; }
@@ -1845,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;
@@ -1926,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; }
@@ -1988,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;
@@ -1997,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; }
@@ -2033,6 +1536,10 @@ var CSS = (
 .uiv-bm-i.st-edited { color: #4ade80; }
 .uiv-bm-i.st-inherit { color: #38bdf8; }
 .uiv-bm-i.st-auto { color: #6b7280; }
+/* a side bound to a design token \u2014 shown by name, accent-coloured, no spin */
+.uiv-bm-i.uiv-bm-tok { color: #a5b4fc; font-size: 9px; letter-spacing: -0.2px;
+  border-color: #4338ca; background: #1e1b4b40; text-overflow: ellipsis; }
+.uiv-bm-i.uiv-bm-tok.st-edited { color: #818cf8; }
 /* spacing-token dropdown \u2014 opens when a side value is focused/clicked */
 .uiv-bm-pop { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
   margin: -3px 0 8px; padding: 8px; background: #1c1c20; border: 1px solid #34343c;
@@ -2044,39 +1551,6 @@ var CSS = (
   padding: 3px 8px; font-size: 10px; cursor: pointer; font-family: ui-monospace, monospace; }
 .uiv-bm-chip:hover { background: #4f46e5; border-color: #6366f1; color: #fff; }
 
-/* ---- All CSS inspector (search + categories + generic smart inputs) ---- */
-.uiv-csssearch { width: 100%; background: #0f0f12; border: 1px solid #3f3f46; color: #e4e4e7;
-  border-radius: 7px; padding: 7px 9px; font-size: 12px; outline: none; font-family: ui-monospace, monospace; }
-.uiv-csssearch:focus { border-color: #6366f1; }
-.uiv-csssearch::placeholder { color: #6b6b73; }
-.uiv-catacc .uiv-catn { color: #52525b; font-weight: 700; margin-left: auto; }
-.uiv-showall { background: none; border: 0; color: #818cf8; cursor: pointer;
-  font-size: 10px; padding: 2px 0 4px; font-weight: 600; }
-.uiv-showall:hover { color: #a5b4fc; }
-.uiv-gctl { grid-template-columns: 108px 1fr; gap: 8px; margin-bottom: 5px; }
-.uiv-gplabel { font-family: ui-monospace, monospace; font-size: 10px; color: #a1a1aa;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.uiv-gsel { width: 100%; background: #1c1c20; border: 1px solid #313138; color: #fff;
-  border-radius: 7px; padding: 5px 6px; font-size: 11px; outline: none; font-family: ui-monospace, monospace; }
-.uiv-gsel:focus { border-color: #6366f1; }
-.uiv-gnum { display: flex; align-items: stretch; background: #1c1c20; border: 1px solid #313138;
-  border-radius: 7px; overflow: hidden; }
-.uiv-gnum:focus-within { border-color: #6366f1; }
-.uiv-gtext { flex: 1; min-width: 0; background: #1c1c20; border: 1px solid #313138; color: #fff;
-  border-radius: 7px; padding: 5px 7px; font-size: 11px; outline: none; font-family: ui-monospace, monospace; }
-.uiv-gnum .uiv-gtext { border: none; border-radius: 0; background: transparent; padding-left: 2px; }
-.uiv-gtext:focus { border-color: #6366f1; }
-.uiv-gtext::placeholder { color: #6b6b73; }
-.uiv-gcolorwrap { display: flex; gap: 5px; align-items: center; }
-.uiv-gcolor { width: 28px; height: 26px; padding: 2px; flex: 0 0 auto; background: #1c1c20;
-  border: 1px solid #313138; border-radius: 7px; cursor: pointer; }
-.uiv-gtextc { flex: 1; }
-.uiv-gctl.st-file .uiv-gtext, .uiv-gctl.st-file .uiv-gsel { color: #e4e4e7; }
-.uiv-gctl.st-edited .uiv-gtext, .uiv-gctl.st-edited .uiv-gsel { color: #4ade80; }
-.uiv-gctl.st-edited .uiv-gnum, .uiv-gctl.st-edited .uiv-gsel { border-color: #4ade80; }
-.uiv-gctl.st-inherit .uiv-gtext, .uiv-gctl.st-inherit .uiv-gsel { color: #38bdf8; }
-.uiv-gctl.st-auto .uiv-gtext, .uiv-gctl.st-auto .uiv-gsel { color: #6b7280; }
-
 .uiv-toast { position: fixed; right: 16px; bottom: 128px; z-index: 2147483647;
   background: #22c55e; color: #052e16; padding: 8px 12px; border-radius: 8px;
   font-size: 12px; font-weight: 600; display: none; }
@@ -2097,38 +1571,6 @@ var INHERITED_PROPS = /* @__PURE__ */ new Set([
   "text-align",
   "font-family"
 ]);
-var BOX_SIDES = {
-  inset: [
-    { css: "top", label: "T" },
-    { css: "right", label: "R" },
-    { css: "bottom", label: "B" },
-    { css: "left", label: "L" }
-  ],
-  padding: [
-    { css: "padding-top", label: "T" },
-    { css: "padding-right", label: "R" },
-    { css: "padding-bottom", label: "B" },
-    { css: "padding-left", label: "L" }
-  ],
-  margin: [
-    { css: "margin-top", label: "T" },
-    { css: "margin-right", label: "R" },
-    { css: "margin-bottom", label: "B" },
-    { css: "margin-left", label: "L" }
-  ],
-  radius: [
-    { css: "border-top-left-radius", label: "TL" },
-    { css: "border-top-right-radius", label: "TR" },
-    { css: "border-bottom-right-radius", label: "BR" },
-    { css: "border-bottom-left-radius", label: "BL" }
-  ],
-  "border-width": [
-    { css: "border-top-width", label: "T" },
-    { css: "border-right-width", label: "R" },
-    { css: "border-bottom-width", label: "B" },
-    { css: "border-left-width", label: "L" }
-  ]
-};
 var Uivisor = class {
   constructor() {
     this.enabled = false;
@@ -2139,10 +1581,6 @@ var Uivisor = class {
     this.collapsedSecs = /* @__PURE__ */ new Set();
     /** Controls manually revealed via "+" (hideWhenAuto controls that are auto). */
     this.revealedCtls = /* @__PURE__ */ new Set();
-    /** "All CSS" search query + which property categories are expanded / showing all. */
-    this.cssSearch = "";
-    this.expandedCats = /* @__PURE__ */ new Set();
-    this.showAllCats = /* @__PURE__ */ new Set();
     /** Box-model widget: the last-focused side the token dropdown targets. */
     this.lastBmSide = "padding-top";
     /** Undo / redo stacks of full edit-state snapshots. */
@@ -2162,6 +1600,11 @@ var Uivisor = class {
     // responsive (virtual screen) mode
     this.responsive = false;
     this.frameWidth = 768;
+    /** The breakpoint new edits are scoped to — chosen explicitly via the chips,
+     *  NOT derived from the frame's pixel width. Defaults to 'base' so a casual tweak
+     *  applies to EVERY size (and never "disappears" when you view another size).
+     *  Picking a specific breakpoint chip narrows the scope to that breakpoint. */
+    this.pickedBp = "base";
     // ---- pointer handling ----
     this.onMove = (e) => {
       if (!this.enabled || this.isOurs(e)) {
@@ -2231,12 +1674,6 @@ var Uivisor = class {
         this.selBox.style.display = "none";
       }
     };
-    /** Properties to snapshot on selection: the curated set ∪ the whole registry. */
-    this._snapProps = null;
-    // ---- "All CSS" inspector (registry-driven, curated like Framer/Webflow) ----
-    /** Properties already covered by the curated quick-control sections above — so we
-     *  don't show them again in the All-CSS area. */
-    this._curatedProps = null;
   }
   /** Project breakpoints — re-detect until the stylesheets yield a real set. */
   bpSystem() {
@@ -2289,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>
     `;
@@ -2329,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());
@@ -2367,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;
@@ -2380,21 +1842,16 @@ var Uivisor = class {
     } else {
       this.scheduleBpRefresh();
       if (!this.responsive) {
-        this.frameWidth = this.defaultFrameWidth();
+        this.pickedBp = "base";
+        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;
   }
-  /** Frame width for the "all"/base chip: a phone-ish width in the base range. */
-  baseFrameWidth() {
-    const bps = this.bpSystem().breakpoints;
-    const firstBp = bps.length ? bps[0].minWidth : 640;
-    return this.bpSystem().dir === "min" ? Math.min(390, firstBp - 1) : 390;
-  }
   /** Stylesheets (esp. JIT/CDN Tailwind) load async — re-detect breakpoints a few
    *  times after enabling and re-render only if the set actually changed. */
   scheduleBpRefresh() {
@@ -2411,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() {
@@ -2489,8 +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`;
-    const bp = activeBreakpoint(this.frameWidth, this.bpSystem()).name;
-    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 ${this.bpLabel(bp)}`;
+    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 ${t("editing")} ${this.bpLabel(this.scopeName())}`;
     this.updateBp();
     this.reposition();
   }
@@ -2550,9 +2021,10 @@ var Uivisor = class {
     this.reposition();
     this.renderBody();
   }
+  /** Properties to snapshot on selection — the curated set the controls can edit,
+   *  plus the flex-alignment props handled by the visual button-rows. */
   snapshotProps() {
-    if (!this._snapProps) this._snapProps = [.../* @__PURE__ */ new Set([...ALL_CSS, ...cssRegistry().byProp.keys()])];
-    return this._snapProps;
+    return [.../* @__PURE__ */ new Set([...ALL_CSS, "justify-content", "align-items"])];
   }
   // ---- value helpers ----
   st() {
@@ -2586,6 +2058,14 @@ var Uivisor = class {
     if (inline && !inline.includes("var(")) return inline;
     return this.computedVal(css) || st.original[css] || "";
   }
+  /** If a design token is the effective value for `css`, its short name (e.g. "lg"
+   *  for --space-lg) — so the field shows the token by name, not its resolved px. */
+  tokenNameFor(css) {
+    const ch = this.effectiveChange(css);
+    if (!ch?.after.designToken) return null;
+    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();
     const m = /^(-?\d*\.?\d+)px$/.exec(v);
@@ -2687,18 +2167,37 @@ var Uivisor = class {
     }
     this.reposition();
   }
-  /** The breakpoint recorded edits are scoped to: manual override, else window. */
-  /** The breakpoint edits are scoped to: the virtual screen's width when in
-   *  responsive mode, otherwise the real window. */
+  /** The breakpoint new edits are scoped to. In responsive mode it's the EXPLICITLY
+   *  picked breakpoint (default 'base' = every size), decoupled from the frame's
+   *  pixel width — so editing at a desktop-sized frame still defaults to "all sizes"
+   *  instead of silently scoping to the top breakpoint and vanishing elsewhere. */
   activeScope() {
     const sys = this.bpSystem();
-    if (this.responsive) return activeBreakpoint(this.frameWidth, sys);
-    return currentBreakpoint(sys);
-  }
-  /** The width the inspector is scoped to (virtual screen, else real window). */
+    if (!this.responsive) return currentBreakpoint(sys);
+    const name = this.scopeName();
+    const bp = sys.breakpoints.find((b) => b.name === name);
+    return { name, minWidth: bp ? bp.minWidth : 0 };
+  }
+  /** The picked breakpoint, validated against the current system (falls back to
+   *  'base' if a previously-picked breakpoint no longer exists after re-detection). */
+  scopeName() {
+    if (this.pickedBp === "base") return "base";
+    return this.bpSystem().breakpoints.some((b) => b.name === this.pickedBp) ? this.pickedBp : "base";
+  }
+  /** The width the cascade is evaluated at — the representative width of the PICKED
+   *  scope, not the frame's visual width. base → a width where only base applies (so
+   *  base edits win and show everywhere); a named breakpoint → its threshold. */
   activeWidth() {
-    if (this.responsive) return this.frameWidth;
-    return typeof window !== "undefined" ? window.innerWidth : 0;
+    if (!this.responsive) return typeof window !== "undefined" ? window.innerWidth : 0;
+    return this.scopeWidth(this.scopeName());
+  }
+  scopeWidth(name) {
+    const sys = this.bpSystem();
+    if (name !== "base") {
+      const bp = sys.breakpoints.find((b) => b.name === name);
+      if (bp) return bp.minWidth;
+    }
+    return sys.dir === "min" ? 0 : 1e6;
   }
   /** The recorded change that wins the breakpoint cascade for `css` at the active
    *  width — i.e. the value effective here, set on this breakpoint or inherited. */
@@ -2822,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();
@@ -2840,13 +2339,11 @@ 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)}
       ${this.controlsHtml(this.context(this.selected))}
       ${this.journalHtml()}
-      ${this.allCssHtml()}
     `;
     if (this.responsive) this.renderFrameBar();
     this.renderInfo();
@@ -2857,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
@@ -2924,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"). */
@@ -2958,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;
@@ -3064,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"
@@ -3085,11 +2582,10 @@ var Uivisor = class {
    *  project breakpoint. Reused by the panel (Live) and the over-frame bar. */
   breakpointChipsHtml() {
     const sys = this.bpSystem();
-    const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
     const winBp = currentBreakpoint(sys).name;
-    const isActive = (n) => this.responsive ? n === frameBp : n === winBp;
+    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;
   }
@@ -3117,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) {
@@ -3144,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. */
@@ -3174,13 +2675,18 @@ var Uivisor = class {
       const n = this.liveNum(css);
       return n == null ? "0" : String(round2(n));
     };
-    const side = (css, pos) => `<input class="uiv-bm-i ${pos}${this.controlStateClass([css])}" data-css="${css}" value="${escapeAttr(num(css))}" title="${css}" inputmode="decimal" spellcheck="false">`;
+    const side = (css, pos) => {
+      const tok = this.tokenNameFor(css);
+      const val = tok ?? num(css);
+      const title = tok ? `${css}: ${tok}` : css;
+      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 "";
@@ -3193,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>` : "";
@@ -3206,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;
@@ -3264,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" };
@@ -3276,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. */
@@ -3292,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") {
@@ -3310,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);
@@ -3345,214 +2866,9 @@ var Uivisor = class {
     const val = toHexInput(this.liveVal(c.css));
     return `<div class="uiv-ctl${this.controlStateClass([c.css])}">${this.ctlLabel(c.label, [c.css])}<div class="cfield"><input type="color" class="uiv-color${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}" value="${val}"></div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
   }
-  curatedCssProps() {
-    if (this._curatedProps) return this._curatedProps;
-    const set = /* @__PURE__ */ new Set();
-    for (const sec of SECTIONS)
-      for (const c of sec.controls) {
-        if (c.kind === "box") c.sides.forEach((s) => set.add(s.css));
-        else set.add(c.css || "");
-      }
-    set.delete("");
-    this._curatedProps = set;
-    return set;
-  }
-  /**
-   * Search box + categorised accordions. By default each category shows only the
-   * COMMON properties (Framer/Webflow-style — no logical/vendor/rare noise), box
-   * groups as a 4-sided editor; "+ N more" reveals the long tail and search reaches
-   * literally everything. Additive: the curated sections above are untouched.
-   */
-  allCssHtml() {
-    const reg = cssRegistry();
-    const curated = this.curatedCssProps();
-    const q = this.cssSearch.trim().toLowerCase();
-    const search = `<div class="uiv-sec"><div class="uiv-sectitle">All CSS</div><input class="uiv-csssearch" placeholder="Search any of ${reg.byProp.size} properties\u2026" value="${escapeAttr(this.cssSearch)}" spellcheck="false"></div>`;
-    if (q) {
-      const hits = [...reg.byProp.values()].filter((m) => m.property.includes(q)).sort((a, b) => a.property.localeCompare(b.property));
-      const rows = hits.slice(0, 60).map((m) => this.genericRow(m)).join("");
-      const more = hits.length > 60 ? `<div class="uiv-bphint">+${hits.length - 60} more \u2014 refine the search</div>` : "";
-      return search + `<div class="uiv-sec"><div class="uiv-sectitle">Results (${hits.length})</div>` + (rows || '<div class="uiv-empty">No property matches.</div>') + more + `</div>`;
-    }
-    const cats = reg.categories.map((c) => {
-      const avail = c.props.filter((p) => !curated.has(p));
-      if (!avail.length) return "";
-      const common = avail.filter((p) => reg.byProp.get(p).common);
-      const open = this.expandedCats.has(c.name);
-      const head = `<button class="uiv-sectitle uiv-catacc${open ? "" : " collapsed"}" data-cat="${escapeAttr(c.name)}"><span class="uiv-chev">${ICONS.chevron}</span>${c.name} <span class="uiv-catn">${common.length}</span></button>`;
-      let body = "";
-      if (open) {
-        const showAll = this.showAllCats.has(c.name);
-        body = this.renderCommonControls(showAll ? avail : common);
-        if (!showAll && avail.length > common.length)
-          body += `<button class="uiv-showall" data-cat="${escapeAttr(c.name)}">+ ${avail.length - common.length} more</button>`;
-      }
-      return `<div class="uiv-sec">${head}${body}</div>`;
-    }).filter(Boolean).join("");
-    return search + cats;
-  }
-  /** Render a property list: box-groups (inset etc.) as a 4-sided editor, the rest
-   *  as smart inputs. Reuses the tested box control + the generic field. */
-  renderCommonControls(props) {
-    const reg = cssRegistry();
-    const boxGroups = {};
-    const singles = [];
-    for (const p of props) {
-      const m = reg.byProp.get(p);
-      if (m.box && BOX_SIDES[m.box] && !m.shorthand) boxGroups[m.box] = true;
-      else singles.push(p);
-    }
-    let html = "";
-    for (const g of Object.keys(boxGroups)) html += this.boxGroupControl(g);
-    for (const p of singles) html += this.genericRow(reg.byProp.get(p));
-    return html;
-  }
-  /** A 4-sided box editor for a box group (inset/padding/…), via the curated control. */
-  boxGroupControl(group) {
-    const sides = BOX_SIDES[group];
-    if (!sides) return "";
-    const icon = group === "radius" ? ICONS.radius : group === "border-width" ? ICONS.border : group === "margin" ? ICONS.margin : group === "inset" ? ICONS.margin : ICONS.padding;
-    const label = { inset: "Inset", padding: "Padding", margin: "Margin", radius: "Radius", "border-width": "Border" }[group] || group;
-    return this.controlRow({ kind: "box", key: `g-${group}`, label, icon, sides });
-  }
-  genericRow(m) {
-    const prop = m.property;
-    return `<div class="uiv-ctl uiv-gctl${this.controlStateClass([prop])}"><span class="clabel uiv-gplabel" title="${escapeAttr(prop)}">${escapeHtml(prop)}</span><div class="cfield">${this.genericField(m)}</div></div>`;
-  }
-  /** Smart input for one property, by its registry type. Commits via the engine. */
-  genericField(m) {
-    const prop = m.property;
-    const cur = this.liveVal(prop);
-    const da = `data-gprop="${escapeAttr(prop)}"`;
-    if (m.type === "enum" && m.keywords && m.keywords.length) {
-      const c = cur.trim();
-      const list = c && !m.keywords.includes(c) ? [c, ...m.keywords] : m.keywords;
-      const opts = list.map((k) => `<option value="${escapeAttr(k)}"${k === c ? " selected" : ""}>${escapeHtml(k)}</option>`).join("");
-      return `<select class="uiv-gsel" ${da}>${opts}</select>`;
-    }
-    if (m.type === "color") {
-      return `<div class="uiv-gcolorwrap"><input type="color" class="uiv-gcolor" ${da} value="${toHexInput(cur)}"><input type="text" class="uiv-gtext uiv-gtextc" ${da} value="${escapeAttr(cur)}" placeholder="\u2014" spellcheck="false"></div>`;
-    }
-    const complex = (m.type === "shorthand" || m.shorthand || /^grid-template/.test(prop)) && !this.isChanged([prop]);
-    const val = complex ? "" : cur;
-    const ph = complex && cur ? escapeAttr(cur) : "\u2014";
-    const numeric = m.type === "length" || m.type === "number" || m.type === "integer" || m.type === "percentage" || m.type === "time" || m.type === "angle";
-    if (numeric) {
-      return `<div class="uiv-gnum"><span class="uiv-scrub uiv-gscrub" ${da} title="Drag to change">${ICONS.size}</span><input type="text" class="uiv-gtext" ${da} value="${escapeAttr(val)}" placeholder="${ph}" spellcheck="false"></div>`;
-    }
-    return `<input type="text" class="uiv-gtext uiv-gtextonly" ${da} value="${escapeAttr(val)}" placeholder="${ph}" spellcheck="false">`;
-  }
-  /** Bind the "All CSS" search, category toggles and generic inputs. */
-  bindGeneric() {
-    const root = this.root;
-    const search = root.querySelector(".uiv-csssearch");
-    if (search) {
-      search.addEventListener("input", () => {
-        const pos = search.selectionStart ?? search.value.length;
-        this.cssSearch = search.value;
-        this.renderBody();
-        const s2 = this.root.querySelector(".uiv-csssearch");
-        if (s2) {
-          s2.focus();
-          s2.setSelectionRange(pos, pos);
-        }
-      });
-    }
-    root.querySelectorAll(".uiv-catacc").forEach((node) => {
-      const btn = node;
-      const cat = btn.getAttribute("data-cat");
-      btn.addEventListener("click", () => {
-        if (this.expandedCats.has(cat)) this.expandedCats.delete(cat);
-        else this.expandedCats.add(cat);
-        this.renderBody();
-      });
-    });
-    root.querySelectorAll(".uiv-showall").forEach((node) => {
-      const btn = node;
-      const cat = btn.getAttribute("data-cat");
-      btn.addEventListener("click", () => {
-        this.showAllCats.add(cat);
-        this.renderBody();
-      });
-    });
-    const commit = (prop, value) => {
-      this.pushHistory();
-      this.commitValue([prop], value, true);
-    };
-    root.querySelectorAll(".uiv-gsel").forEach((node) => {
-      const sel = node;
-      sel.addEventListener("change", () => commit(sel.getAttribute("data-gprop"), sel.value));
-    });
-    root.querySelectorAll(".uiv-gcolor").forEach((node) => {
-      const inp = node;
-      const prop = inp.getAttribute("data-gprop");
-      inp.addEventListener("change", () => {
-        if (inp.value.toLowerCase() === toHexInput(this.liveVal(prop)).toLowerCase()) return;
-        commit(prop, inp.value);
-      });
-    });
-    root.querySelectorAll(".uiv-gtext").forEach((node) => {
-      const inp = node;
-      inp.addEventListener("change", () => commit(inp.getAttribute("data-gprop"), inp.value));
-      inp.addEventListener("keydown", (e) => {
-        if (e.key === "Enter") inp.blur();
-      });
-    });
-    root.querySelectorAll(".uiv-gscrub").forEach((node) => {
-      const handle = node;
-      const prop = handle.getAttribute("data-gprop");
-      const input = handle.parentElement.querySelector("input");
-      this.bindGenericScrub(handle, input, prop);
-    });
-  }
-  /** Default unit for a numeric property when the current value carries none —
-   *  from the registry type, so a unitless number never gets a bogus "px". */
-  defaultUnit(prop) {
-    const t = cssMeta(prop)?.type;
-    if (t === "number" || t === "integer") return "";
-    if (t === "time") return "s";
-    if (t === "angle") return "deg";
-    if (t === "percentage") return "%";
-    return "px";
-  }
-  bindGenericScrub(handle, input, prop) {
-    handle.addEventListener("pointerdown", (e) => {
-      e.preventDefault();
-      const startX = e.clientX;
-      const m = /^(-?\d*\.?\d+)(\D*)$/.exec(input.value.trim());
-      const start2 = m ? parseFloat(m[1]) : 0;
-      const unit = m && m[2] ? m[2] : this.defaultUnit(prop);
-      const unitless = unit === "";
-      const step = unitless ? cssMeta(prop)?.type === "integer" ? 1 : 0.01 : 1;
-      let pushed = false;
-      try {
-        handle.setPointerCapture(e.pointerId);
-      } catch {
-      }
-      const move = (ev) => {
-        if (!pushed) {
-          this.pushHistory();
-          pushed = true;
-        }
-        let nv = start2 + Math.round(ev.clientX - startX) * step;
-        if (ev.shiftKey) nv = Math.round(nv / (10 * step)) * 10 * step;
-        nv = +nv.toFixed(unitless && step < 1 ? 2 : 0);
-        input.value = `${nv}${unit}`;
-        this.liveSet([prop], input.value);
-      };
-      const up = () => {
-        handle.removeEventListener("pointermove", move);
-        handle.removeEventListener("pointerup", up);
-        this.recordProps([prop]);
-      };
-      handle.addEventListener("pointermove", move);
-      handle.addEventListener("pointerup", up);
-    });
-  }
   bindControls() {
     const root = this.root;
-    this.bindGeneric();
-    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");
@@ -3620,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);
       });
     });
@@ -3676,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);
       });
     });
@@ -3685,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);
       });
     });
@@ -3719,23 +3035,25 @@ var Uivisor = class {
       const btn = node;
       const bp = btn.getAttribute("data-bp");
       btn.addEventListener("click", () => {
-        const w = bp === "base" ? this.baseFrameWidth() : this.bpSystem().breakpoints.find((b) => b.name === bp)?.minWidth ?? 768;
-        this.setFrameWidth(w);
+        this.pickedBp = 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", () => {
@@ -3891,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,
@@ -3906,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;
@@ -3970,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 {