@nice2dev/ui-math 1.1.10 → 1.2.0

package/dist/index.mjs

@@ -21,6 +21,8 @@ const translations = {
     "editor.clear": "Clear",
     "editor.recognize": "Recognize",
     "editor.recognizing": "Recognizing...",
+    "editor.latexInput": "LaTeX Input",
+    "editor.handwriting": "Handwriting",
     "editor.handwritingNote": "Draw your equation above. Handwriting recognition requires external API integration."
   },
   pl: {
@@ -38,6 +40,8 @@ const translations = {
     "editor.clear": "Wyczyść",
     "editor.recognize": "Rozpoznaj",
     "editor.recognizing": "Rozpoznawanie...",
+    "editor.latexInput": "Wpis LaTeX",
+    "editor.handwriting": "Pismo odręczne",
     "editor.handwritingNote": "Narysuj równanie powyżej. Rozpoznawanie pisma wymaga zewnętrznej integracji API."
   },
   de: {
@@ -55,6 +59,8 @@ const translations = {
     "editor.clear": "Löschen",
     "editor.recognize": "Erkennen",
     "editor.recognizing": "Erkennung läuft...",
+    "editor.latexInput": "LaTeX-Eingabe",
+    "editor.handwriting": "Handschrift",
     "editor.handwritingNote": "Zeichnen Sie Ihre Gleichung oben. Die Handschrifterkennung erfordert eine externe API-Integration."
   },
   fr: {
@@ -72,6 +78,8 @@ const translations = {
     "editor.clear": "Effacer",
     "editor.recognize": "Reconnaître",
     "editor.recognizing": "Reconnaissance...",
+    "editor.latexInput": "Saisie LaTeX",
+    "editor.handwriting": "Écriture manuscrite",
     "editor.handwritingNote": "Dessinez votre équation ci-dessus. La reconnaissance d'écriture nécessite une intégration API externe."
   },
   es: {
@@ -89,6 +97,8 @@ const translations = {
     "editor.clear": "Borrar",
     "editor.recognize": "Reconocer",
     "editor.recognizing": "Reconociendo...",
+    "editor.latexInput": "Entrada LaTeX",
+    "editor.handwriting": "Escritura a mano",
     "editor.handwritingNote": "Dibuja tu ecuación arriba. El reconocimiento de escritura requiere integración con una API externa."
   },
   it: {
@@ -106,6 +116,8 @@ const translations = {
     "editor.clear": "Cancella",
     "editor.recognize": "Riconosci",
     "editor.recognizing": "Riconoscimento...",
+    "editor.latexInput": "Input LaTeX",
+    "editor.handwriting": "Scrittura a mano",
     "editor.handwritingNote": "Disegna la tua equazione qui sopra. Il riconoscimento della scrittura richiede un’integrazione API esterna."
   },
   pt: {
@@ -123,6 +135,8 @@ const translations = {
     "editor.clear": "Limpar",
     "editor.recognize": "Reconhecer",
     "editor.recognizing": "A reconhecer...",
+    "editor.latexInput": "Entrada LaTeX",
+    "editor.handwriting": "Escrita à mão",
     "editor.handwritingNote": "Desenhe a sua equação acima. O reconhecimento de escrita requer integração com uma API externa."
   },
   cs: {
@@ -140,6 +154,8 @@ const translations = {
     "editor.clear": "Vymazat",
     "editor.recognize": "Rozpoznat",
     "editor.recognizing": "Rozpoznávání...",
+    "editor.latexInput": "Zadání LaTeX",
+    "editor.handwriting": "Rukopis",
     "editor.handwritingNote": "Nakreslete svou rovnici výše. Rozpoznávání rukopisu vyžaduje externí integraci API."
   },
   uk: {
@@ -157,6 +173,8 @@ const translations = {
     "editor.clear": "Очистити",
     "editor.recognize": "Розпізнати",
     "editor.recognizing": "Розпізнавання...",
+    "editor.latexInput": "Введення LaTeX",
+    "editor.handwriting": "Рукопис",
     "editor.handwritingNote": "Намалюйте своє рівняння вище. Розпізнавання рукопису потребує зовнішньої інтеграції з API."
   }
 }, I18nContext = createContext({
@@ -623,9 +641,9 @@ function NiceMathEditor({
         y(l + f);
         return;
       }
-      const x = c.selectionStart, b = c.selectionEnd, k = l.slice(0, x) + f + l.slice(b);
+      const u = c.selectionStart, b = c.selectionEnd, k = l.slice(0, u) + f + l.slice(b);
       y(k), setTimeout(() => {
-        c.focus(), c.selectionStart = c.selectionEnd = x + f.length;
+        c.focus(), c.selectionStart = c.selectionEnd = u + f.length;
       }, 0);
     },
     [l, y]
@@ -634,7 +652,7 @@ function NiceMathEditor({
       h(f.latex);
     },
     [h]
-  ), u = {
+  ), x = {
     service: e,
     latex: l,
     setLatex: y,
@@ -643,7 +661,7 @@ function NiceMathEditor({
     mode: s,
     setMode: d
   };
-  return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value: u, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value: x, children: /* @__PURE__ */ jsxs(
     NiceAppShell,
     {
       flush: !0,
@@ -671,36 +689,38 @@ function NiceMathEditor({
   ) });
 }
 function Toolbar$1() {
-  const { mode: e, setMode: t, latex: r, insertTemplate: a } = useMathEditor(), [o, n] = useState(!1);
+  const { t: e } = useNiceTranslation(), { mode: t, setMode: r, latex: a, insertTemplate: o } = useMathEditor(), [n, i] = useState(!1);
   return /* @__PURE__ */ jsxs("div", { style: styles$3.toolbar, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        onClick: () => t("input"),
+        onClick: () => r("input"),
         style: {
           ...styles$3.button,
-          backgroundColor: e === "input" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg-tertiary, #9e9e9e)",
+          backgroundColor: t === "input" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg-tertiary, #9e9e9e)",
           // the inactive state sits on a theme surface: theme text, not the button's white
-          color: e === "input" ? "var(--nice-text-on-primary, #fff)" : "var(--nice-text-primary, #fff)"
+          color: t === "input" ? "var(--nice-color-white, #fff)" : "var(--nice-text-primary, #fff)"
         },
         children: [
           /* @__PURE__ */ jsx(NiceIcon, { name: "keyboard", size: 14 }),
-          " LaTeX Input"
+          " ",
+          e("editor.latexInput", "LaTeX Input")
         ]
       }
     ),
     /* @__PURE__ */ jsxs(
       "button",
       {
-        onClick: () => t("handwriting"),
+        onClick: () => r("handwriting"),
         style: {
           ...styles$3.button,
-          backgroundColor: e === "handwriting" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg-tertiary, #9e9e9e)",
-          color: e === "handwriting" ? "var(--nice-text-on-primary, #fff)" : "var(--nice-text-primary, #fff)"
+          backgroundColor: t === "handwriting" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg-tertiary, #9e9e9e)",
+          color: t === "handwriting" ? "var(--nice-color-white, #fff)" : "var(--nice-text-primary, #fff)"
         },
         children: [
           /* @__PURE__ */ jsx(NiceIcon, { name: "pen", size: 14 }),
-          " Handwriting"
+          " ",
+          e("editor.handwriting", "Handwriting")
         ]
       }
     ),
@@ -715,12 +735,12 @@ function Toolbar$1() {
       }
     ),
     /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxs("button", { onClick: () => n(!o), style: styles$3.button, children: [
+      /* @__PURE__ */ jsxs("button", { onClick: () => i(!n), style: styles$3.button, children: [
         /* @__PURE__ */ jsx(NiceIcon, { name: "ruler", size: 14 }),
         " Templates ",
         /* @__PURE__ */ jsx(NiceIcon, { name: "chevron-down", size: 12 })
       ] }),
-      o && /* @__PURE__ */ jsx(
+      n && /* @__PURE__ */ jsx(
         "div",
         {
           style: {
@@ -737,23 +757,23 @@ function Toolbar$1() {
             overflow: "auto"
           },
           children: ["basic", "calculus", "algebra", "geometry", "statistics", "physics"].map(
-            (i) => /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { style: styles$3.categoryHeader, children: i }),
-              EQUATION_TEMPLATES.filter((l) => l.category === i).map((l) => /* @__PURE__ */ jsxs(
+            (l) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: styles$3.categoryHeader, children: l }),
+              EQUATION_TEMPLATES.filter((p) => p.category === l).map((p) => /* @__PURE__ */ jsxs(
                 "div",
                 {
                   onClick: () => {
-                    a(l), n(!1);
+                    o(p), i(!1);
                   },
                   style: {
                     padding: "8px 12px",
                     cursor: "pointer",
                     borderBottom: "1px solid var(--nice-border, #eee)"
                   },
-                  onMouseOver: (p) => p.target.style.backgroundColor = "var(--nice-bg-secondary, #f5f5f5)",
-                  onMouseOut: (p) => p.target.style.backgroundColor = "transparent",
+                  onMouseOver: (s) => s.target.style.backgroundColor = "var(--nice-bg-secondary, #f5f5f5)",
+                  onMouseOut: (s) => s.target.style.backgroundColor = "transparent",
                   children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: l.name }),
+                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: p.name }),
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
@@ -763,16 +783,16 @@ function Toolbar$1() {
                           fontFamily: "monospace"
                         },
                         children: [
-                          l.latex.substring(0, 40),
-                          l.latex.length > 40 ? "..." : ""
+                          p.latex.substring(0, 40),
+                          p.latex.length > 40 ? "..." : ""
                         ]
                       }
                     )
                   ]
                 },
-                l.name
+                p.name
               ))
-            ] }, i)
+            ] }, l)
           )
         }
       )
@@ -781,7 +801,7 @@ function Toolbar$1() {
     /* @__PURE__ */ jsxs(
       "button",
       {
-        onClick: () => navigator.clipboard.writeText(r),
+        onClick: () => navigator.clipboard.writeText(a),
         style: { ...styles$3.button, backgroundColor: "var(--nice-success, #4caf50)" },
         children: [
           /* @__PURE__ */ jsx(NiceIcon, { name: "copy", size: 14 }),
@@ -816,7 +836,7 @@ function SymbolPalette() {
           border: "1px solid var(--nice-border, #ddd)",
           borderRadius: "4px",
           backgroundColor: t === n ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg, #fff)",
-          color: t === n ? "var(--nice-text-on-primary, #fff)" : "var(--nice-text, #333)",
+          color: t === n ? "var(--nice-color-white, #fff)" : "var(--nice-text, #333)",
           cursor: "pointer"
         },
         children: n
@@ -849,11 +869,11 @@ function LatexPreview({ latex: e }) {
 }
 function HandwritingCanvas() {
   const { t: e } = useNiceTranslation(), { setLatex: t, setMode: r } = useMathEditor(), a = useRef(null), [o, n] = useState([]), [i, l] = useState([]), [p, s] = useState(!1), [d, g] = useState(!1), y = (c) => {
-    const x = a.current;
-    if (!x)
+    const u = a.current;
+    if (!u)
       return;
     s(!0);
-    const b = x.getBoundingClientRect();
+    const b = u.getBoundingClientRect();
     l([
       {
         x: c.clientX - b.left,
@@ -865,10 +885,10 @@ function HandwritingCanvas() {
   }, h = (c) => {
     if (!p)
       return;
-    const x = a.current, b = x == null ? void 0 : x.getContext("2d");
-    if (!x || !b)
+    const u = a.current, b = u == null ? void 0 : u.getContext("2d");
+    if (!u || !b)
       return;
-    const k = x.getBoundingClientRect(), m = {
+    const k = u.getBoundingClientRect(), m = {
       x: c.clientX - k.left,
       y: c.clientY - k.top,
       pressure: c.pressure,
@@ -885,13 +905,13 @@ function HandwritingCanvas() {
           id: Date.now().toString(),
           points: [...i]
         };
-        n((x) => [...x, c]);
+        n((u) => [...u, c]);
       }
       l([]);
     }
-  }, u = () => {
-    const c = a.current, x = c == null ? void 0 : c.getContext("2d");
-    x && c && x.clearRect(0, 0, c.width, c.height), n([]);
+  }, x = () => {
+    const c = a.current, u = c == null ? void 0 : c.getContext("2d");
+    u && c && u.clearRect(0, 0, c.width, c.height), n([]);
   }, f = async () => {
     if (o.length !== 0) {
       g(!0);
@@ -922,7 +942,7 @@ function HandwritingCanvas() {
       /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: u,
+          onClick: x,
           style: { ...styles$3.button, backgroundColor: "var(--nice-danger, #f44336)" },
           children: e("editor.clear", "Clear")
         }
@@ -1188,8 +1208,8 @@ class GraphService {
       for (let h = 0; h <= o; h++) {
         const w = a.min + h * s;
         try {
-          const u = i({ x: y, y: w, ...n });
-          Number.isFinite(u) ? g.push({ x: y, y: w, z: u }) : g.push({ x: y, y: w, z: 0 });
+          const x = i({ x: y, y: w, ...n });
+          Number.isFinite(x) ? g.push({ x: y, y: w, z: x }) : g.push({ x: y, y: w, z: 0 });
         } catch {
           g.push({ x: y, y: w, z: 0 });
         }
@@ -1225,7 +1245,7 @@ class GraphService {
       if (g.type === "2d-function") {
         const y = this.compute2DFunction(g.expression, r.xRange, g.resolution || 200);
         if (y.length > 0) {
-          const h = y.map((w, u) => `${u === 0 ? "M" : "L"}${p(w.x)},${s(w.y)}`).join(" ");
+          const h = y.map((w, x) => `${x === 0 ? "M" : "L"}${p(w.x)},${s(w.y)}`).join(" ");
           d.push(
             `<path d="${h}" fill="none" stroke="rgb(${g.color.r},${g.color.g},${g.color.b})" stroke-width="${g.lineWidth}"/>`
           );
@@ -1438,23 +1458,23 @@ function NiceGraphPlotter({
     speed: 1
   }), g = useCallback(() => {
     i(e.getPlots());
-  }, [e]), y = useCallback((x) => {
-    p((b) => ({ ...b, ...x }));
-  }, []), h = useCallback((x) => {
-    d((b) => ({ ...b, ...x }));
+  }, [e]), y = useCallback((u) => {
+    p((b) => ({ ...b, ...u }));
+  }, []), h = useCallback((u) => {
+    d((b) => ({ ...b, ...u }));
   }, []), w = useCallback(
-    (x) => {
-      e.addPlot(x), g();
+    (u) => {
+      e.addPlot(u), g();
     },
     [e, g]
-  ), u = useCallback(
-    (x) => {
-      e.removePlot(x), g();
+  ), x = useCallback(
+    (u) => {
+      e.removePlot(u), g();
     },
     [e, g]
   ), f = useCallback(
-    (x, b) => {
-      e.updatePlot(x, b), g();
+    (u, b) => {
+      e.updatePlot(u, b), g();
     },
     [e, g]
   ), c = {
@@ -1463,7 +1483,7 @@ function NiceGraphPlotter({
     view: l,
     setView: y,
     addPlot: w,
-    removePlot: u,
+    removePlot: x,
     updatePlot: f,
     animation: s,
     setAnimation: h,
@@ -1746,73 +1766,73 @@ function Canvas2D({ width: e, height: t }) {
     if (!p || !s)
       return;
     s.fillStyle = `rgb(${n.backgroundColor.r},${n.backgroundColor.g},${n.backgroundColor.b})`, s.fillRect(0, 0, e, t);
-    const d = e - l * 2, g = t - l * 2, y = (u) => l + (u - n.xRange.min) / (n.xRange.max - n.xRange.min) * d, h = (u) => t - l - (u - n.yRange.min) / (n.yRange.max - n.yRange.min) * g;
+    const d = e - l * 2, g = t - l * 2, y = (x) => l + (x - n.xRange.min) / (n.xRange.max - n.xRange.min) * d, h = (x) => t - l - (x - n.yRange.min) / (n.yRange.max - n.yRange.min) * g;
     if (n.showGrid) {
       s.strokeStyle = resolveCssColor("var(--nice-border, #e0e0e0)", s.canvas), s.lineWidth = 0.5;
-      for (let u = Math.ceil(n.xRange.min); u <= n.xRange.max; u++) {
-        const f = y(u);
+      for (let x = Math.ceil(n.xRange.min); x <= n.xRange.max; x++) {
+        const f = y(x);
         s.beginPath(), s.moveTo(f, l), s.lineTo(f, t - l), s.stroke();
       }
-      for (let u = Math.ceil(n.yRange.min); u <= n.yRange.max; u++) {
-        const f = h(u);
+      for (let x = Math.ceil(n.yRange.min); x <= n.yRange.max; x++) {
+        const f = h(x);
         s.beginPath(), s.moveTo(l, f), s.lineTo(e - l, f), s.stroke();
       }
     }
     if (n.showAxes) {
       s.strokeStyle = resolveCssColor("var(--nice-text, #333)", s.canvas), s.lineWidth = 1;
-      const u = h(0);
-      s.beginPath(), s.moveTo(l, u), s.lineTo(e - l, u), s.stroke();
+      const x = h(0);
+      s.beginPath(), s.moveTo(l, x), s.lineTo(e - l, x), s.stroke();
       const f = y(0);
       if (s.beginPath(), s.moveTo(f, l), s.lineTo(f, t - l), s.stroke(), n.showLabels) {
-        s.fillStyle = resolveCssColor("var(--nice-text, #333)", s.canvas), s.font = "12px sans-serif", s.textAlign = "center", s.fillText("x", e - l + 15, u + 4), s.fillText("y", f, l - 10), s.font = "10px sans-serif";
+        s.fillStyle = resolveCssColor("var(--nice-text, #333)", s.canvas), s.font = "12px sans-serif", s.textAlign = "center", s.fillText("x", e - l + 15, x + 4), s.fillText("y", f, l - 10), s.font = "10px sans-serif";
         for (let c = Math.ceil(n.xRange.min); c <= n.xRange.max; c++)
-          c !== 0 && s.fillText(String(c), y(c), u + 15);
+          c !== 0 && s.fillText(String(c), y(c), x + 15);
         for (let c = Math.ceil(n.yRange.min); c <= n.yRange.max; c++)
           c !== 0 && (s.textAlign = "right", s.fillText(String(c), f - 5, h(c) + 4));
       }
     }
     const w = i.isPlaying ? { [i.parameter]: i.currentValue } : {};
-    for (const u of o.filter((f) => f.visible)) {
-      const f = `rgb(${u.color.r},${u.color.g},${u.color.b})`;
-      s.strokeStyle = f, s.lineWidth = u.lineWidth || 2;
+    for (const x of o.filter((f) => f.visible)) {
+      const f = `rgb(${x.color.r},${x.color.g},${x.color.b})`;
+      s.strokeStyle = f, s.lineWidth = x.lineWidth || 2;
       let c = [];
-      switch (u.type) {
+      switch (x.type) {
         case "2d-function":
           c = a.compute2DFunction(
-            u.expression,
+            x.expression,
             n.xRange,
-            u.resolution || 200,
+            x.resolution || 200,
             w
           );
           break;
         case "2d-parametric":
           c = a.compute2DParametric(
-            u.expression,
-            u.expressionY || "sin(t)",
-            u.parameterRange || { min: 0, max: 2 * Math.PI },
-            u.resolution || 200,
+            x.expression,
+            x.expressionY || "sin(t)",
+            x.parameterRange || { min: 0, max: 2 * Math.PI },
+            x.resolution || 200,
             w
           );
           break;
         case "2d-polar":
           c = a.compute2DPolar(
-            u.expression,
-            u.parameterRange || { min: 0, max: 2 * Math.PI },
-            u.resolution || 200,
+            x.expression,
+            x.parameterRange || { min: 0, max: 2 * Math.PI },
+            x.resolution || 200,
             w
           );
           break;
       }
       if (c.length > 0) {
         s.beginPath();
-        let x = !1;
+        let u = !1;
         for (const b of c) {
           const k = y(b.x), m = h(b.y);
           if (m < 0 || m > t) {
-            x = !1;
+            u = !1;
             continue;
           }
-          x ? s.lineTo(k, m) : (s.moveTo(k, m), x = !0);
+          u ? s.lineTo(k, m) : (s.moveTo(k, m), u = !0);
         }
         s.stroke();
       }
@@ -2430,7 +2450,7 @@ const styles$1 = {
     padding: "20px",
     border: "none",
     backgroundColor: "var(--nice-border, #3c3c3c)",
-    color: "var(--nice-text-on-primary, #fff)",
+    color: "var(--nice-color-white, #fff)",
     fontSize: "18px",
     cursor: "pointer",
     transition: "background-color 0.1s"
@@ -2449,15 +2469,15 @@ function NiceCalculator({
   style: r
 }) {
   const [a, o] = useState("0"), [n, i] = useState("standard"), [l, p] = useState([]), [s, d] = useState(!1), g = useCallback(
-    (u) => {
-      s && /[0-9.]/.test(u) ? (o(u), d(!1)) : (o((f) => f === "0" && u !== "." ? u : f + u), d(!1));
+    (x) => {
+      s && /[0-9.]/.test(x) ? (o(x), d(!1)) : (o((f) => f === "0" && x !== "." ? x : f + x), d(!1));
     },
     [s]
   ), y = useCallback(() => {
     o("0"), d(!1);
   }, []), h = useCallback(() => {
     try {
-      const u = e.evaluate(a), f = e.format(u);
+      const x = e.evaluate(a), f = e.format(x);
       e.addHistory(a, f, n), p(e.getHistory()), o(f), d(!0);
     } catch {
       o("Error"), d(!0);
@@ -2500,7 +2520,7 @@ function ModeSelector() {
       style: {
         ...styles$1.modeButton,
         backgroundColor: e === a.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
-        color: e === a.id ? "var(--nice-text-on-primary, #fff)" : "var(--nice-text-secondary, #888)"
+        color: e === a.id ? "var(--nice-color-white, #fff)" : "var(--nice-text-secondary, #888)"
       },
       children: a.label
     },
@@ -2608,7 +2628,7 @@ function ProgrammerKeypad() {
               border: "none",
               borderRadius: "4px",
               backgroundColor: a === l ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-border, #3c3c3c)",
-              color: "var(--nice-text-on-primary, #fff)",
+              color: "var(--nice-color-white, #fff)",
               cursor: "pointer"
             },
             children: l
@@ -2659,7 +2679,7 @@ function ProgrammerKeypad() {
 }
 function MatrixMode() {
   const { t: e } = useNiceTranslation(), [t, r] = useState(MatrixOps.create(2, 2)), [a, o] = useState(MatrixOps.create(2, 2)), [n, i] = useState(""), l = (s, d, g, y, h) => {
-    const w = { ...s, data: s.data.map((u) => [...u]) };
+    const w = { ...s, data: s.data.map((x) => [...x]) };
     w.data[g][y] = parseFloat(h) || 0, d(w);
   }, p = [
     { label: "A + B", fn: () => MatrixOps.toString(MatrixOps.add(t, a)) },
@@ -2747,7 +2767,7 @@ function MatrixInput({
               padding: "4px",
               textAlign: "center",
               backgroundColor: "var(--nice-border, #3c3c3c)",
-              color: "var(--nice-text-on-primary, #fff)",
+              color: "var(--nice-color-white, #fff)",
               border: "1px solid var(--nice-border-color, #555)",
               borderRadius: "4px"
             }
@@ -2773,7 +2793,7 @@ function CalculusMode() {
           padding: "8px",
           marginBottom: "12px",
           backgroundColor: "var(--nice-border, #3c3c3c)",
-          color: "var(--nice-text-on-primary, #fff)",
+          color: "var(--nice-color-white, #fff)",
           border: "1px solid var(--nice-border-color, #555)",
           borderRadius: "4px"
         }
@@ -2829,10 +2849,10 @@ function CalculusMode() {
 function UnitsMode() {
   const { t: e } = useNiceTranslation(), { service: t } = useCalculator(), [r, a] = useState("1"), [o, n] = useState("m"), [i, l] = useState("ft"), [p, s] = useState("Length"), [d, g] = useState(""), y = t.getUnitCategories(), h = t.getUnitsByCategory(p), w = () => {
     try {
-      const u = t.convertUnits(parseFloat(r), o, i);
-      g(`${r} ${o} = ${t.format(u)} ${i}`);
-    } catch (u) {
-      g(u.message);
+      const x = t.convertUnits(parseFloat(r), o, i);
+      g(`${r} ${o} = ${t.format(x)} ${i}`);
+    } catch (x) {
+      g(x.message);
     }
   };
   return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
@@ -2840,9 +2860,9 @@ function UnitsMode() {
       "select",
       {
         value: p,
-        onChange: (u) => {
-          s(u.target.value);
-          const f = t.getUnitsByCategory(u.target.value);
+        onChange: (x) => {
+          s(x.target.value);
+          const f = t.getUnitsByCategory(x.target.value);
           f.length >= 2 && (n(f[0].symbol), l(f[1].symbol));
         },
         style: {
@@ -2850,11 +2870,11 @@ function UnitsMode() {
           padding: "8px",
           marginBottom: "12px",
           backgroundColor: "var(--nice-border, #3c3c3c)",
-          color: "var(--nice-text-on-primary, #fff)",
+          color: "var(--nice-color-white, #fff)",
           border: "1px solid var(--nice-border-color, #555)",
           borderRadius: "4px"
         },
-        children: y.map((u) => /* @__PURE__ */ jsx("option", { value: u, children: u }, u))
+        children: y.map((x) => /* @__PURE__ */ jsx("option", { value: x, children: x }, x))
       }
     ),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
@@ -2863,12 +2883,12 @@ function UnitsMode() {
         {
           type: "number",
           value: r,
-          onChange: (u) => a(u.target.value),
+          onChange: (x) => a(x.target.value),
           style: {
             flex: 1,
             padding: "8px",
             backgroundColor: "var(--nice-border, #3c3c3c)",
-            color: "var(--nice-text-on-primary, #fff)",
+            color: "var(--nice-color-white, #fff)",
             border: "1px solid var(--nice-border-color, #555)",
             borderRadius: "4px"
           }
@@ -2878,20 +2898,20 @@ function UnitsMode() {
         "select",
         {
           value: o,
-          onChange: (u) => n(u.target.value),
+          onChange: (x) => n(x.target.value),
           style: {
             padding: "8px",
             backgroundColor: "var(--nice-border, #3c3c3c)",
-            color: "var(--nice-text-on-primary, #fff)",
+            color: "var(--nice-color-white, #fff)",
             border: "1px solid var(--nice-border-color, #555)",
             borderRadius: "4px"
           },
-          children: h.map((u) => /* @__PURE__ */ jsxs("option", { value: u.symbol, children: [
-            u.name,
+          children: h.map((x) => /* @__PURE__ */ jsxs("option", { value: x.symbol, children: [
+            x.name,
             " (",
-            u.symbol,
+            x.symbol,
             ")"
-          ] }, u.symbol))
+          ] }, x.symbol))
         }
       )
     ] }),
@@ -2901,21 +2921,21 @@ function UnitsMode() {
         "select",
         {
           value: i,
-          onChange: (u) => l(u.target.value),
+          onChange: (x) => l(x.target.value),
           style: {
             flex: 1,
             padding: "8px",
             backgroundColor: "var(--nice-border, #3c3c3c)",
-            color: "var(--nice-text-on-primary, #fff)",
+            color: "var(--nice-color-white, #fff)",
             border: "1px solid var(--nice-border-color, #555)",
             borderRadius: "4px"
           },
-          children: h.map((u) => /* @__PURE__ */ jsxs("option", { value: u.symbol, children: [
-            u.name,
+          children: h.map((x) => /* @__PURE__ */ jsxs("option", { value: x.symbol, children: [
+            x.name,
             " (",
-            u.symbol,
+            x.symbol,
             ")"
-          ] }, u.symbol))
+          ] }, x.symbol))
         }
       )
     ] }),
@@ -2990,8 +3010,8 @@ const GeoMath = {
     const o = a.x - r.x, n = a.y - r.y, i = r.x - e.x, l = r.y - e.y, p = o * o + n * n, s = 2 * (i * o + l * n), d = i * i + l * l - t * t, g = s * s - 4 * p * d;
     if (g < 0)
       return [];
-    const y = Math.sqrt(g), h = (-s - y) / (2 * p), w = (-s + y) / (2 * p), u = [];
-    return h >= 0 && h <= 1 && u.push({ x: r.x + h * o, y: r.y + h * n }), w >= 0 && w <= 1 && Math.abs(w - h) > 1e-10 && u.push({ x: r.x + w * o, y: r.y + w * n }), u;
+    const y = Math.sqrt(g), h = (-s - y) / (2 * p), w = (-s + y) / (2 * p), x = [];
+    return h >= 0 && h <= 1 && x.push({ x: r.x + h * o, y: r.y + h * n }), w >= 0 && w <= 1 && Math.abs(w - h) > 1e-10 && x.push({ x: r.x + w * o, y: r.y + w * n }), x;
   },
   /** Circle-circle intersection */
   circleCircleIntersection(e, t, r, a) {
@@ -3289,8 +3309,8 @@ class GeometryService {
       if (g && y) {
         const h = GeoMath.circleCircleIntersection(g, s.radius, y, d.radius);
         for (const w of h) {
-          const u = this.createPoint(w.x, w.y);
-          u.dependencies = [t, r], u.color = { r: 255, g: 0, b: 0 }, n.push(u);
+          const x = this.createPoint(w.x, w.y);
+          x.dependencies = [t, r], x.color = { r: 255, g: 0, b: 0 }, n.push(x);
         }
       }
     }
@@ -3488,7 +3508,7 @@ function NiceGeometry({
   useEffect(() => {
     h();
   }, [h]);
-  const u = {
+  const x = {
     service: e,
     elements: n,
     tool: l,
@@ -3499,7 +3519,7 @@ function NiceGeometry({
     setSelectedIds: d,
     refresh: h
   };
-  return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: u, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles.container, ...o }, children: [
+  return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: x, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles.container, ...o }, children: [
     /* @__PURE__ */ jsx(Toolbar, {}),
     /* @__PURE__ */ jsxs("div", { style: styles.main, children: [
       /* @__PURE__ */ jsx(Canvas, { width: t, height: r }),
@@ -3533,7 +3553,7 @@ function Toolbar() {
       style: {
         ...styles.toolButton,
         backgroundColor: e === a.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
-        color: e === a.id ? "var(--nice-text-on-primary, #fff)" : "var(--nice-text, #333)"
+        color: e === a.id ? "var(--nice-color-white, #fff)" : "var(--nice-text, #333)"
       },
       children: /^[a-z][a-z0-9-]*$/.test(a.icon) ? /* @__PURE__ */ jsx(NiceIcon$1, { name: a.icon, size: 16 }) : a.icon
     },
@@ -3543,11 +3563,11 @@ function Toolbar() {
 function Canvas({ width: e, height: t }) {
   const r = useRef(null), { service: a, elements: o, tool: n, view: i, selectedIds: l, setSelectedIds: p, refresh: s } = useGeometry(), [d, g] = useState([]), y = useCallback(
     (f, c) => {
-      const x = (f - e / 2) / i.scale + i.centerX, b = -(c - t / 2) / i.scale + i.centerY;
+      const u = (f - e / 2) / i.scale + i.centerX, b = -(c - t / 2) / i.scale + i.centerY;
       return i.snapToGrid ? {
-        x: Math.round(x / i.gridSpacing) * i.gridSpacing,
+        x: Math.round(u / i.gridSpacing) * i.gridSpacing,
         y: Math.round(b / i.gridSpacing) * i.gridSpacing
-      } : { x, y: b };
+      } : { x: u, y: b };
     },
     [e, t, i]
   ), h = useCallback(
@@ -3562,23 +3582,23 @@ function Canvas({ width: e, height: t }) {
       const c = (b = r.current) == null ? void 0 : b.getBoundingClientRect();
       if (!c)
         return;
-      const x = y(f.clientX - c.left, f.clientY - c.top);
+      const u = y(f.clientX - c.left, f.clientY - c.top);
       switch (n) {
         case "point": {
-          a.createPoint(x.x, x.y), s();
+          a.createPoint(u.x, u.y), s();
           break;
         }
         case "segment":
         case "line":
         case "ray": {
-          const k = u(x);
+          const k = x(u);
           if (k)
             g((m) => {
               const v = [...m, k.id];
               return v.length === 2 ? (n === "segment" ? a.createSegment(v[0], v[1]) : n === "line" ? a.createLine(v[0], v[1]) : n === "ray" && a.createRay(v[0], v[1]), s(), []) : v;
             });
           else {
-            const m = a.createPoint(x.x, x.y);
+            const m = a.createPoint(u.x, u.y);
             g((v) => {
               const C = [...v, m.id];
               return C.length === 2 ? (n === "segment" ? a.createSegment(C[0], C[1]) : n === "line" ? a.createLine(C[0], C[1]) : n === "ray" && a.createRay(C[0], C[1]), s(), []) : C;
@@ -3587,14 +3607,14 @@ function Canvas({ width: e, height: t }) {
           break;
         }
         case "circle": {
-          const k = u(x);
+          const k = x(u);
           if (k)
             g((m) => {
               if (m.length === 0)
                 return [k.id];
               const v = a.getPoint(m[0]);
               if (v) {
-                const C = GeoMath.distance(v, x);
+                const C = GeoMath.distance(v, u);
                 a.createCircle(m[0], C), s();
               }
               return [];
@@ -3602,17 +3622,17 @@ function Canvas({ width: e, height: t }) {
           else if (d.length === 1) {
             const m = a.getPoint(d[0]);
             if (m) {
-              const v = GeoMath.distance(m, x);
+              const v = GeoMath.distance(m, u);
               a.createCircle(d[0], v), s(), g([]);
             }
           } else {
-            const m = a.createPoint(x.x, x.y);
+            const m = a.createPoint(u.x, u.y);
             g([m.id]), s();
           }
           break;
         }
         case "midpoint": {
-          const k = u(x);
+          const k = x(u);
           k && g((m) => {
             const v = [...m, k.id];
             return v.length === 2 ? (a.createMidpoint(v[0], v[1]), s(), []) : v;
@@ -3620,69 +3640,69 @@ function Canvas({ width: e, height: t }) {
           break;
         }
         case "select": {
-          const k = u(x);
+          const k = x(u);
           p(k ? [k.id] : []);
           break;
         }
       }
     },
     [n, a, s, y, d, p]
-  ), u = (f) => {
-    for (const x of o)
-      if (x.type === "point" && GeoMath.distance(x, f) < 0.5)
-        return x;
+  ), x = (f) => {
+    for (const u of o)
+      if (u.type === "point" && GeoMath.distance(u, f) < 0.5)
+        return u;
   };
   return useEffect(() => {
     const f = r.current, c = f == null ? void 0 : f.getContext("2d");
     if (!(!f || !c)) {
       if (c.fillStyle = `rgb(${i.backgroundColor.r},${i.backgroundColor.g},${i.backgroundColor.b})`, c.fillRect(0, 0, e, t), i.showGrid) {
         c.strokeStyle = resolveCssColor("var(--nice-border, #e0e0e0)", c.canvas), c.lineWidth = 0.5;
-        const x = i.gridSpacing * i.scale, b = (e / 2 - i.centerX * i.scale) % x, k = (t / 2 + i.centerY * i.scale) % x;
-        for (let m = b; m < e; m += x)
+        const u = i.gridSpacing * i.scale, b = (e / 2 - i.centerX * i.scale) % u, k = (t / 2 + i.centerY * i.scale) % u;
+        for (let m = b; m < e; m += u)
           c.beginPath(), c.moveTo(m, 0), c.lineTo(m, t), c.stroke();
-        for (let m = k; m < t; m += x)
+        for (let m = k; m < t; m += u)
           c.beginPath(), c.moveTo(0, m), c.lineTo(e, m), c.stroke();
       }
       if (i.showAxes) {
-        const x = h(0, 0);
-        c.strokeStyle = resolveCssColor("var(--nice-text, #333)", c.canvas), c.lineWidth = 1, c.beginPath(), c.moveTo(0, x.y), c.lineTo(e, x.y), c.stroke(), c.beginPath(), c.moveTo(x.x, 0), c.lineTo(x.x, t), c.stroke();
+        const u = h(0, 0);
+        c.strokeStyle = resolveCssColor("var(--nice-text, #333)", c.canvas), c.lineWidth = 1, c.beginPath(), c.moveTo(0, u.y), c.lineTo(e, u.y), c.stroke(), c.beginPath(), c.moveTo(u.x, 0), c.lineTo(u.x, t), c.stroke();
       }
-      for (const x of o) {
-        if (!x.visible)
+      for (const u of o) {
+        if (!u.visible)
           continue;
-        const b = `rgb(${x.color.r},${x.color.g},${x.color.b})`, k = l.includes(x.id);
-        switch (x.type) {
+        const b = `rgb(${u.color.r},${u.color.g},${u.color.b})`, k = l.includes(u.id);
+        switch (u.type) {
           case "point": {
-            const m = h(x.x, x.y);
-            c.beginPath(), c.arc(m.x, m.y, k ? x.size + 2 : x.size, 0, 2 * Math.PI), c.fillStyle = k ? resolveCssColor("var(--nice-primary-hover, #1976d2)", c.canvas) : b, c.fill(), x.label && (c.fillStyle = resolveCssColor("var(--nice-text, #333)", c.canvas), c.font = "12px sans-serif", c.fillText(x.label, m.x + 8, m.y - 8));
+            const m = h(u.x, u.y);
+            c.beginPath(), c.arc(m.x, m.y, k ? u.size + 2 : u.size, 0, 2 * Math.PI), c.fillStyle = k ? resolveCssColor("var(--nice-primary-hover, #1976d2)", c.canvas) : b, c.fill(), u.label && (c.fillStyle = resolveCssColor("var(--nice-text, #333)", c.canvas), c.font = "12px sans-serif", c.fillText(u.label, m.x + 8, m.y - 8));
             break;
           }
           case "segment": {
-            const m = a.getPoint(x.point1Id), v = a.getPoint(x.point2Id);
+            const m = a.getPoint(u.point1Id), v = a.getPoint(u.point2Id);
             if (m && v) {
               const C = h(m.x, m.y), S = h(v.x, v.y);
-              c.strokeStyle = b, c.lineWidth = x.width, c.beginPath(), c.moveTo(C.x, C.y), c.lineTo(S.x, S.y), c.stroke();
+              c.strokeStyle = b, c.lineWidth = u.width, c.beginPath(), c.moveTo(C.x, C.y), c.lineTo(S.x, S.y), c.stroke();
             }
             break;
           }
           case "line": {
-            const m = a.getPoint(x.point1Id), v = a.getPoint(x.point2Id);
+            const m = a.getPoint(u.point1Id), v = a.getPoint(u.point2Id);
             if (m && v) {
               const C = v.x - m.x, S = v.y - m.y, P = -1e3, j = 1e3, $ = h(m.x + P * C, m.y + P * S), B = h(m.x + j * C, m.y + j * S);
-              c.strokeStyle = b, c.lineWidth = x.width, c.beginPath(), c.moveTo($.x, $.y), c.lineTo(B.x, B.y), c.stroke();
+              c.strokeStyle = b, c.lineWidth = u.width, c.beginPath(), c.moveTo($.x, $.y), c.lineTo(B.x, B.y), c.stroke();
             }
             break;
           }
           case "circle": {
-            const m = a.getPoint(x.centerId);
+            const m = a.getPoint(u.centerId);
             if (m) {
-              const v = h(m.x, m.y), C = x.radius * i.scale;
-              c.beginPath(), c.arc(v.x, v.y, C, 0, 2 * Math.PI), x.fill && (c.fillStyle = `rgba(${x.fill.r},${x.fill.g},${x.fill.b},${x.fill.a ?? 0.2})`, c.fill()), c.strokeStyle = b, c.lineWidth = x.width, c.stroke();
+              const v = h(m.x, m.y), C = u.radius * i.scale;
+              c.beginPath(), c.arc(v.x, v.y, C, 0, 2 * Math.PI), u.fill && (c.fillStyle = `rgba(${u.fill.r},${u.fill.g},${u.fill.b},${u.fill.a ?? 0.2})`, c.fill()), c.strokeStyle = b, c.lineWidth = u.width, c.stroke();
             }
             break;
           }
           case "polygon": {
-            const m = x.pointIds.map((v) => a.getPoint(v)).filter(Boolean);
+            const m = u.pointIds.map((v) => a.getPoint(v)).filter(Boolean);
             if (m.length > 0) {
               c.beginPath();
               const v = h(m[0].x, m[0].y);
@@ -3691,7 +3711,7 @@ function Canvas({ width: e, height: t }) {
                 const S = h(m[C].x, m[C].y);
                 c.lineTo(S.x, S.y);
               }
-              c.closePath(), x.fill && (c.fillStyle = `rgba(${x.fill.r},${x.fill.g},${x.fill.b},${x.fill.a ?? 0.2})`, c.fill()), c.strokeStyle = b, c.lineWidth = x.width, c.stroke();
+              c.closePath(), u.fill && (c.fillStyle = `rgba(${u.fill.r},${u.fill.g},${u.fill.b},${u.fill.a ?? 0.2})`, c.fill()), c.strokeStyle = b, c.lineWidth = u.width, c.stroke();
             }
             break;
           }
@@ -3699,8 +3719,8 @@ function Canvas({ width: e, height: t }) {
       }
       if (d.length > 0) {
         c.fillStyle = "rgba(25, 118, 210, 0.3)";
-        for (const x of d) {
-          const b = a.getPoint(x);
+        for (const u of d) {
+          const b = a.getPoint(u);
           if (b) {
             const k = h(b.x, b.y);
             c.beginPath(), c.arc(k.x, k.y, 12, 0, 2 * Math.PI), c.fill();