@nice2dev/ui-math 1.0.17 → 1.0.18

package/dist/index.mjs

@@ -2,7 +2,175 @@ var T = Object.defineProperty;
 var R = (e, t, r) => t in e ? T(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var M = (e, t, r) => R(e, typeof t != "symbol" ? t + "" : t, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useState, useRef, useCallback, useEffect } from "react";
+import React, { createContext, useMemo, useContext, useState, useRef, useCallback, useEffect } from "react";
+const translations = {
+  en: {
+    "calculator.matrixA": "Matrix A",
+    "calculator.matrixB": "Matrix B",
+    "calculator.exprPlaceholder": "Enter expression (e.g., x^2, sin(x))",
+    "calculator.differentiate": "Differentiate",
+    "calculator.integrate": "Integrate",
+    "calculator.convert": "Convert",
+    "plotter.quickAdd": "Quick add preset...",
+    "plotter.noPlots": "No plots added yet",
+    "plotter.grid": "Grid",
+    "plotter.axes": "Axes",
+    "editor.latexPlaceholder": "Enter LaTeX equation...",
+    "editor.clear": "Clear",
+    "editor.recognize": "Recognize",
+    "editor.recognizing": "Recognizing...",
+    "editor.handwritingNote": "Draw your equation above. Handwriting recognition requires external API integration."
+  },
+  pl: {
+    "calculator.matrixA": "Macierz A",
+    "calculator.matrixB": "Macierz B",
+    "calculator.exprPlaceholder": "Wprowadź wyrażenie (np. x^2, sin(x))",
+    "calculator.differentiate": "Różniczkuj",
+    "calculator.integrate": "Całkuj",
+    "calculator.convert": "Przelicz",
+    "plotter.quickAdd": "Szybko dodaj ustawienie...",
+    "plotter.noPlots": "Nie dodano jeszcze żadnych wykresów",
+    "plotter.grid": "Siatka",
+    "plotter.axes": "Osie",
+    "editor.latexPlaceholder": "Wprowadź równanie LaTeX...",
+    "editor.clear": "Wyczyść",
+    "editor.recognize": "Rozpoznaj",
+    "editor.recognizing": "Rozpoznawanie...",
+    "editor.handwritingNote": "Narysuj równanie powyżej. Rozpoznawanie pisma wymaga zewnętrznej integracji API."
+  },
+  de: {
+    "calculator.matrixA": "Matrix A",
+    "calculator.matrixB": "Matrix B",
+    "calculator.exprPlaceholder": "Ausdruck eingeben (z. B. x^2, sin(x))",
+    "calculator.differentiate": "Ableiten",
+    "calculator.integrate": "Integrieren",
+    "calculator.convert": "Umrechnen",
+    "plotter.quickAdd": "Voreinstellung schnell hinzufügen...",
+    "plotter.noPlots": "Noch keine Diagramme hinzugefügt",
+    "plotter.grid": "Raster",
+    "plotter.axes": "Achsen",
+    "editor.latexPlaceholder": "LaTeX-Gleichung eingeben...",
+    "editor.clear": "Löschen",
+    "editor.recognize": "Erkennen",
+    "editor.recognizing": "Erkennung läuft...",
+    "editor.handwritingNote": "Zeichnen Sie Ihre Gleichung oben. Die Handschrifterkennung erfordert eine externe API-Integration."
+  },
+  fr: {
+    "calculator.matrixA": "Matrice A",
+    "calculator.matrixB": "Matrice B",
+    "calculator.exprPlaceholder": "Saisir une expression (ex. x^2, sin(x))",
+    "calculator.differentiate": "Dériver",
+    "calculator.integrate": "Intégrer",
+    "calculator.convert": "Convertir",
+    "plotter.quickAdd": "Ajouter un préréglage rapide...",
+    "plotter.noPlots": "Aucun tracé ajouté pour le moment",
+    "plotter.grid": "Grille",
+    "plotter.axes": "Axes",
+    "editor.latexPlaceholder": "Saisir une équation LaTeX...",
+    "editor.clear": "Effacer",
+    "editor.recognize": "Reconnaître",
+    "editor.recognizing": "Reconnaissance...",
+    "editor.handwritingNote": "Dessinez votre équation ci-dessus. La reconnaissance d'écriture nécessite une intégration API externe."
+  },
+  es: {
+    "calculator.matrixA": "Matriz A",
+    "calculator.matrixB": "Matriz B",
+    "calculator.exprPlaceholder": "Introduce una expresión (p. ej. x^2, sin(x))",
+    "calculator.differentiate": "Derivar",
+    "calculator.integrate": "Integrar",
+    "calculator.convert": "Convertir",
+    "plotter.quickAdd": "Añadir preajuste rápido...",
+    "plotter.noPlots": "Aún no se ha añadido ningún gráfico",
+    "plotter.grid": "Cuadrícula",
+    "plotter.axes": "Ejes",
+    "editor.latexPlaceholder": "Introduce una ecuación LaTeX...",
+    "editor.clear": "Borrar",
+    "editor.recognize": "Reconocer",
+    "editor.recognizing": "Reconociendo...",
+    "editor.handwritingNote": "Dibuja tu ecuación arriba. El reconocimiento de escritura requiere integración con una API externa."
+  },
+  it: {
+    "calculator.matrixA": "Matrice A",
+    "calculator.matrixB": "Matrice B",
+    "calculator.exprPlaceholder": "Inserisci un’espressione (es. x^2, sin(x))",
+    "calculator.differentiate": "Derivare",
+    "calculator.integrate": "Integrare",
+    "calculator.convert": "Converti",
+    "plotter.quickAdd": "Aggiungi un preset rapido...",
+    "plotter.noPlots": "Nessun grafico aggiunto",
+    "plotter.grid": "Griglia",
+    "plotter.axes": "Assi",
+    "editor.latexPlaceholder": "Inserisci un’equazione LaTeX...",
+    "editor.clear": "Cancella",
+    "editor.recognize": "Riconosci",
+    "editor.recognizing": "Riconoscimento...",
+    "editor.handwritingNote": "Disegna la tua equazione qui sopra. Il riconoscimento della scrittura richiede un’integrazione API esterna."
+  },
+  pt: {
+    "calculator.matrixA": "Matriz A",
+    "calculator.matrixB": "Matriz B",
+    "calculator.exprPlaceholder": "Introduza uma expressão (p. ex. x^2, sin(x))",
+    "calculator.differentiate": "Derivar",
+    "calculator.integrate": "Integrar",
+    "calculator.convert": "Converter",
+    "plotter.quickAdd": "Adicionar predefinição rápida...",
+    "plotter.noPlots": "Ainda não foram adicionados gráficos",
+    "plotter.grid": "Grelha",
+    "plotter.axes": "Eixos",
+    "editor.latexPlaceholder": "Introduza uma equação LaTeX...",
+    "editor.clear": "Limpar",
+    "editor.recognize": "Reconhecer",
+    "editor.recognizing": "A reconhecer...",
+    "editor.handwritingNote": "Desenhe a sua equação acima. O reconhecimento de escrita requer integração com uma API externa."
+  },
+  cs: {
+    "calculator.matrixA": "Matice A",
+    "calculator.matrixB": "Matice B",
+    "calculator.exprPlaceholder": "Zadejte výraz (např. x^2, sin(x))",
+    "calculator.differentiate": "Derivovat",
+    "calculator.integrate": "Integrovat",
+    "calculator.convert": "Převést",
+    "plotter.quickAdd": "Rychle přidat předvolbu...",
+    "plotter.noPlots": "Zatím nebyl přidán žádný graf",
+    "plotter.grid": "Mřížka",
+    "plotter.axes": "Osy",
+    "editor.latexPlaceholder": "Zadejte rovnici v LaTeXu...",
+    "editor.clear": "Vymazat",
+    "editor.recognize": "Rozpoznat",
+    "editor.recognizing": "Rozpoznávání...",
+    "editor.handwritingNote": "Nakreslete svou rovnici výše. Rozpoznávání rukopisu vyžaduje externí integraci API."
+  },
+  uk: {
+    "calculator.matrixA": "Матриця A",
+    "calculator.matrixB": "Матриця B",
+    "calculator.exprPlaceholder": "Введіть вираз (напр. x^2, sin(x))",
+    "calculator.differentiate": "Диференціювати",
+    "calculator.integrate": "Інтегрувати",
+    "calculator.convert": "Перетворити",
+    "plotter.quickAdd": "Швидко додати пресет...",
+    "plotter.noPlots": "Поки що не додано жодного графіка",
+    "plotter.grid": "Сітка",
+    "plotter.axes": "Осі",
+    "editor.latexPlaceholder": "Введіть рівняння в LaTeX...",
+    "editor.clear": "Очистити",
+    "editor.recognize": "Розпізнати",
+    "editor.recognizing": "Розпізнавання...",
+    "editor.handwritingNote": "Намалюйте своє рівняння вище. Розпізнавання рукопису потребує зовнішньої інтеграції з API."
+  }
+}, I18nContext = createContext({
+  locale: "en",
+  t: (e, t) => t ?? e
+});
+function NiceI18nProvider({ locale: e = "en", overrides: t, children: r }) {
+  const a = useMemo(() => {
+    const o = { ...translations.en, ...translations[e], ...t };
+    return { locale: e, t: (s, l) => o[s] ?? l ?? s };
+  }, [e, t]);
+  return React.createElement(I18nContext.Provider, { value: a }, r);
+}
+function useNiceTranslation() {
+  return useContext(I18nContext);
+}
 const MATH_SYMBOLS = [
   // Greek lowercase
   { name: "alpha", latex: "\\alpha", category: "greek", preview: "α" },
@@ -267,16 +435,16 @@ class MathEditorService {
   }
   /** Update equation */
   updateEquation(t, r, a) {
-    const n = this.equations.get(t);
-    if (!n)
+    const o = this.equations.get(t);
+    if (!o)
       throw new Error(`Equation not found: ${t}`);
-    const o = {
-      ...n,
+    const n = {
+      ...o,
       latex: r,
-      label: a ?? n.label,
+      label: a ?? o.label,
       updatedAt: (/* @__PURE__ */ new Date()).toISOString()
     };
-    return this.equations.set(t, o), o;
+    return this.equations.set(t, n), n;
   }
   /** Delete equation */
   deleteEquation(t) {
@@ -310,13 +478,13 @@ class MathEditorService {
   /** Parse LaTeX and extract equations */
   parseLatex(t) {
     const r = [], a = /\\\[([\s\S]*?)\\\]/g;
-    let n;
-    for (; (n = a.exec(t)) !== null; )
-      r.push(this.createEquation(n[1].trim()));
-    const o = /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g;
-    for (; (n = o.exec(t)) !== null; ) {
-      const s = n[1].match(/\\label\{([^}]+)\}/), c = n[1].replace(/\\label\{[^}]+\}/, "").trim();
-      r.push(this.createEquation(c, s == null ? void 0 : s[1]));
+    let o;
+    for (; (o = a.exec(t)) !== null; )
+      r.push(this.createEquation(o[1].trim()));
+    const n = /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g;
+    for (; (o = n.exec(t)) !== null; ) {
+      const s = o[1].match(/\\label\{([^}]+)\}/), l = o[1].replace(/\\label\{[^}]+\}/, "").trim();
+      r.push(this.createEquation(l, s == null ? void 0 : s[1]));
     }
     return r;
   }
@@ -441,62 +609,62 @@ function NiceMathEditor({
   initialLatex: t = "",
   onChange: r,
   className: a,
-  style: n
+  style: o
 }) {
-  const [o, s] = useState(t), [c, l] = useState("input"), i = useRef(null), d = useCallback(
-    (y) => {
-      s(y), r == null || r(y);
+  const { t: n } = useNiceTranslation(), [s, l] = useState(t), [x, i] = useState("input"), d = useRef(null), g = useCallback(
+    (p) => {
+      l(p), r == null || r(p);
     },
     [r]
-  ), u = useCallback(
-    (y) => {
-      const g = i.current;
-      if (!g) {
-        d(o + y);
+  ), y = useCallback(
+    (p) => {
+      const f = d.current;
+      if (!f) {
+        g(s + p);
         return;
       }
-      const m = g.selectionStart, p = g.selectionEnd, x = o.slice(0, m) + y + o.slice(p);
-      d(x), setTimeout(() => {
-        g.focus(), g.selectionStart = g.selectionEnd = m + y.length;
+      const c = f.selectionStart, u = f.selectionEnd, b = s.slice(0, c) + p + s.slice(u);
+      g(b), setTimeout(() => {
+        f.focus(), f.selectionStart = f.selectionEnd = c + p.length;
       }, 0);
     },
-    [o, d]
+    [s, g]
   ), h = useCallback(
-    (y) => {
-      u(y.latex);
+    (p) => {
+      y(p.latex);
     },
-    [u]
-  ), b = {
+    [y]
+  ), w = {
     service: e,
-    latex: o,
-    setLatex: d,
-    insertSymbol: u,
+    latex: s,
+    setLatex: g,
+    insertSymbol: y,
     insertTemplate: h,
-    mode: c,
-    setMode: l
+    mode: x,
+    setMode: i
   };
-  return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value: b, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$3.container, ...n }, children: [
+  return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value: w, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$3.container, ...o }, children: [
     /* @__PURE__ */ jsx(Toolbar$1, {}),
     /* @__PURE__ */ jsxs("div", { style: styles$3.main, children: [
       /* @__PURE__ */ jsx(SymbolPalette, {}),
-      /* @__PURE__ */ jsx("div", { style: styles$3.editor, children: c === "input" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: styles$3.editor, children: x === "input" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           "textarea",
           {
-            ref: i,
-            value: o,
-            onChange: (y) => d(y.target.value),
-            placeholder: "Enter LaTeX equation...",
+            ref: d,
+            value: s,
+            onChange: (p) => g(p.target.value),
+            placeholder: n("editor.latexPlaceholder", "Enter LaTeX equation..."),
             style: styles$3.input
           }
         ),
-        /* @__PURE__ */ jsx(LatexPreview, { latex: o })
+        /* @__PURE__ */ jsx(LatexPreview, { latex: s })
       ] }) : /* @__PURE__ */ jsx(HandwritingCanvas, {}) })
     ] })
   ] }) });
 }
 function Toolbar$1() {
-  const { mode: e, setMode: t, latex: r, insertTemplate: a } = useMathEditor(), [n, o] = useState(!1);
+  const { mode: e, setMode: t, latex: r, insertTemplate: a } = useMathEditor(), [o, n] = useState(!1);
   return /* @__PURE__ */ jsxs("div", { style: styles$3.toolbar, children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -520,10 +688,19 @@ function Toolbar$1() {
         children: "✏️ Handwriting"
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { borderLeft: "1px solid var(--nice-border, #ccc)", height: "24px", margin: "0 8px" } }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          borderLeft: "1px solid var(--nice-border, #ccc)",
+          height: "24px",
+          margin: "0 8px"
+        }
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx("button", { onClick: () => o(!n), style: styles$3.button, children: "📐 Templates ▾" }),
-      n && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("button", { onClick: () => n(!o), style: styles$3.button, children: "📐 Templates ▾" }),
+      o && /* @__PURE__ */ jsx(
         "div",
         {
           style: {
@@ -542,28 +719,38 @@ function Toolbar$1() {
           children: ["basic", "calculus", "algebra", "geometry", "statistics", "physics"].map(
             (s) => /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("div", { style: styles$3.categoryHeader, children: s }),
-              EQUATION_TEMPLATES.filter((c) => c.category === s).map((c) => /* @__PURE__ */ jsxs(
+              EQUATION_TEMPLATES.filter((l) => l.category === s).map((l) => /* @__PURE__ */ jsxs(
                 "div",
                 {
                   onClick: () => {
-                    a(c), o(!1);
+                    a(l), n(!1);
                   },
                   style: {
                     padding: "8px 12px",
                     cursor: "pointer",
                     borderBottom: "1px solid var(--nice-border, #eee)"
                   },
-                  onMouseOver: (l) => l.target.style.backgroundColor = "var(--nice-bg-secondary, #f5f5f5)",
-                  onMouseOut: (l) => l.target.style.backgroundColor = "transparent",
+                  onMouseOver: (x) => x.target.style.backgroundColor = "var(--nice-bg-secondary, #f5f5f5)",
+                  onMouseOut: (x) => x.target.style.backgroundColor = "transparent",
                   children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: c.name }),
-                    /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", fontFamily: "monospace" }, children: [
-                      c.latex.substring(0, 40),
-                      c.latex.length > 40 ? "..." : ""
-                    ] })
+                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: l.name }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          color: "var(--nice-text-secondary, #666)",
+                          fontFamily: "monospace"
+                        },
+                        children: [
+                          l.latex.substring(0, 40),
+                          l.latex.length > 40 ? "..." : ""
+                        ]
+                      }
+                    )
                   ]
                 },
-                c.name
+                l.name
               ))
             ] }, s)
           )
@@ -594,127 +781,143 @@ function SymbolPalette() {
     "logic",
     "calculus",
     "matrices"
-  ], n = getSymbolsByCategory(t);
+  ], o = getSymbolsByCategory(t);
   return /* @__PURE__ */ jsxs("div", { style: styles$3.sidebar, children: [
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", padding: "8px", gap: "4px" }, children: a.map((o) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", padding: "8px", gap: "4px" }, children: a.map((n) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => r(o),
+        onClick: () => r(n),
         style: {
           padding: "4px 8px",
           fontSize: "11px",
           border: "1px solid var(--nice-border, #ddd)",
           borderRadius: "4px",
-          backgroundColor: t === o ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg, #fff)",
-          color: t === o ? "var(--nice-bg, #fff)" : "var(--nice-text, #333)",
+          backgroundColor: t === n ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg, #fff)",
+          color: t === n ? "var(--nice-bg, #fff)" : "var(--nice-text, #333)",
           cursor: "pointer"
         },
-        children: o
+        children: n
       },
-      o
+      n
     )) }),
-    /* @__PURE__ */ jsx("div", { style: styles$3.symbolGrid, children: n.map((o) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: styles$3.symbolGrid, children: o.map((n) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => e(o.latex),
+        onClick: () => e(n.latex),
         style: styles$3.symbolButton,
-        title: `${o.name}: ${o.latex}`,
-        children: o.preview || o.latex
+        title: `${n.name}: ${n.latex}`,
+        children: n.preview || n.latex
       },
-      o.name
+      n.name
     )) })
   ] });
 }
 function LatexPreview({ latex: e }) {
   return /* @__PURE__ */ jsxs("div", { style: styles$3.preview, children: [
-    /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", marginBottom: "8px" }, children: "Preview (requires KaTeX/MathJax integration):" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", marginBottom: "8px" },
+        children: "Preview (requires KaTeX/MathJax integration):"
+      }
+    ),
     /* @__PURE__ */ jsx("code", { style: { fontSize: "16px" }, children: e || "(empty)" })
   ] });
 }
 function HandwritingCanvas() {
-  const { setLatex: e, setMode: t } = useMathEditor(), r = useRef(null), [a, n] = useState([]), [o, s] = useState([]), [c, l] = useState(!1), [i, d] = useState(!1), u = (m) => {
-    const p = r.current;
-    if (!p)
+  const { t: e } = useNiceTranslation(), { setLatex: t, setMode: r } = useMathEditor(), a = useRef(null), [o, n] = useState([]), [s, l] = useState([]), [x, i] = useState(!1), [d, g] = useState(!1), y = (c) => {
+    const u = a.current;
+    if (!u)
       return;
-    l(!0);
-    const x = p.getBoundingClientRect();
-    s([
+    i(!0);
+    const b = u.getBoundingClientRect();
+    l([
       {
-        x: m.clientX - x.left,
-        y: m.clientY - x.top,
-        pressure: m.pressure,
+        x: c.clientX - b.left,
+        y: c.clientY - b.top,
+        pressure: c.pressure,
         timestamp: Date.now()
       }
     ]);
-  }, h = (m) => {
-    if (!c)
+  }, h = (c) => {
+    if (!x)
       return;
-    const p = r.current, x = p == null ? void 0 : p.getContext("2d");
-    if (!p || !x)
+    const u = a.current, b = u == null ? void 0 : u.getContext("2d");
+    if (!u || !b)
       return;
-    const w = p.getBoundingClientRect(), k = {
-      x: m.clientX - w.left,
-      y: m.clientY - w.top,
-      pressure: m.pressure,
+    const k = u.getBoundingClientRect(), m = {
+      x: c.clientX - k.left,
+      y: c.clientY - k.top,
+      pressure: c.pressure,
       timestamp: Date.now()
     };
-    if (s((f) => [...f, k]), o.length > 0) {
-      const f = o[o.length - 1];
-      x.beginPath(), x.moveTo(f.x, f.y), x.lineTo(k.x, k.y), x.strokeStyle = "var(--nice-text, #000)", x.lineWidth = 2, x.lineCap = "round", x.stroke();
+    if (l((v) => [...v, m]), s.length > 0) {
+      const v = s[s.length - 1];
+      b.beginPath(), b.moveTo(v.x, v.y), b.lineTo(m.x, m.y), b.strokeStyle = "var(--nice-text, #000)", b.lineWidth = 2, b.lineCap = "round", b.stroke();
     }
-  }, b = () => {
-    if (c) {
-      if (l(!1), o.length > 1) {
-        const m = {
+  }, w = () => {
+    if (x) {
+      if (i(!1), s.length > 1) {
+        const c = {
           id: Date.now().toString(),
-          points: [...o]
+          points: [...s]
         };
-        n((p) => [...p, m]);
+        n((u) => [...u, c]);
       }
-      s([]);
+      l([]);
     }
-  }, y = () => {
-    const m = r.current, p = m == null ? void 0 : m.getContext("2d");
-    p && m && p.clearRect(0, 0, m.width, m.height), n([]);
-  }, g = async () => {
-    if (a.length !== 0) {
-      d(!0);
+  }, p = () => {
+    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);
       try {
-        const m = await recognizeHandwriting(a);
-        e(m.latex), t("input");
+        const c = await recognizeHandwriting(o);
+        t(c.latex), r("input");
       } finally {
-        d(!1);
+        g(!1);
       }
     }
   };
   return useEffect(() => {
-    const m = r.current;
-    m && (m.width = m.offsetWidth, m.height = 200);
+    const c = a.current;
+    c && (c.width = c.offsetWidth, c.height = 200);
   }, []), /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       "canvas",
       {
-        ref: r,
+        ref: a,
         style: styles$3.canvas,
-        onPointerDown: u,
+        onPointerDown: y,
         onPointerMove: h,
-        onPointerUp: b,
-        onPointerLeave: b
+        onPointerUp: w,
+        onPointerLeave: w
       }
     ),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "12px" }, children: [
-      /* @__PURE__ */ jsx("button", { onClick: y, style: { ...styles$3.button, backgroundColor: "var(--nice-danger, #f44336)" }, children: "Clear" }),
       /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: g,
-          disabled: a.length === 0 || i,
+          onClick: p,
+          style: { ...styles$3.button, backgroundColor: "var(--nice-danger, #f44336)" },
+          children: e("editor.clear", "Clear")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: f,
+          disabled: o.length === 0 || d,
           style: styles$3.button,
-          children: i ? "Recognizing..." : "Recognize"
+          children: d ? e("editor.recognizing", "Recognizing...") : e("editor.recognize", "Recognize")
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", marginTop: "8px" }, children: "Draw your equation above. Handwriting recognition requires external API integration." })
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", marginTop: "8px" }, children: e(
+      "editor.handwritingNote",
+      "Draw your equation above. Handwriting recognition requires external API integration."
+    ) })
   ] });
 }
 const mathConstants = {
@@ -816,10 +1019,10 @@ class ExpressionParser {
       const a = r[1];
       if (this.pos += a.length, this.expr[this.pos] === "(") {
         this.pos++;
-        const n = [];
+        const o = [];
         for (; this.expr[this.pos] !== ")" && this.pos < this.expr.length; )
-          n.push(this.parseAddSub()), this.expr[this.pos] === "," && this.pos++;
-        return this.expr[this.pos] === ")" && this.pos++, { type: "call", name: a, args: n };
+          o.push(this.parseAddSub()), this.expr[this.pos] === "," && this.pos++;
+        return this.expr[this.pos] === ")" && this.pos++, { type: "call", name: a, args: o };
       }
       return { type: "variable", name: a };
     }
@@ -836,18 +1039,18 @@ class ExpressionParser {
       case "unary":
         return t.op === "-" ? -this.evaluate(t.arg, r) : this.evaluate(t.arg, r);
       case "binary": {
-        const a = this.evaluate(t.left, r), n = this.evaluate(t.right, r);
+        const a = this.evaluate(t.left, r), o = this.evaluate(t.right, r);
         switch (t.op) {
           case "+":
-            return a + n;
+            return a + o;
           case "-":
-            return a - n;
+            return a - o;
           case "*":
-            return a * n;
+            return a * o;
           case "/":
-            return a / n;
+            return a / o;
           case "^":
-            return Math.pow(a, n);
+            return Math.pow(a, o);
           default:
             return 0;
         }
@@ -856,8 +1059,8 @@ class ExpressionParser {
         const a = mathFunctions[t.name];
         if (!a)
           throw new Error(`Unknown function: ${t.name}`);
-        const n = t.args.map((o) => this.evaluate(o, r));
-        return a(...n);
+        const o = t.args.map((n) => this.evaluate(n, r));
+        return a(...o);
       }
       default:
         return 0;
@@ -897,8 +1100,8 @@ class GraphService {
     const a = this.plots.get(t);
     if (!a)
       throw new Error(`Plot not found: ${t}`);
-    const n = { ...a, ...r, id: a.id };
-    return this.plots.set(t, n), n;
+    const o = { ...a, ...r, id: a.id };
+    return this.plots.set(t, o), o;
   }
   /** Remove a plot */
   removePlot(t) {
@@ -913,12 +1116,12 @@ class GraphService {
     return this.plots.get(t);
   }
   /** Compute 2D function points */
-  compute2DFunction(t, r, a, n) {
-    const o = this.parser.parse(t), s = [], c = (r.max - r.min) / a;
-    for (let l = 0; l <= a; l++) {
-      const i = r.min + l * c;
+  compute2DFunction(t, r, a, o) {
+    const n = this.parser.parse(t), s = [], l = (r.max - r.min) / a;
+    for (let x = 0; x <= a; x++) {
+      const i = r.min + x * l;
       try {
-        const d = o({ x: i, ...n });
+        const d = n({ x: i, ...o });
         Number.isFinite(d) && s.push({ x: i, y: d });
       } catch {
       }
@@ -926,28 +1129,28 @@ class GraphService {
     return s;
   }
   /** Compute 2D parametric curve */
-  compute2DParametric(t, r, a, n, o) {
-    const s = this.parser.parse(t), c = this.parser.parse(r), l = [], i = (a.max - a.min) / n;
-    for (let d = 0; d <= n; d++) {
-      const u = a.min + d * i;
+  compute2DParametric(t, r, a, o, n) {
+    const s = this.parser.parse(t), l = this.parser.parse(r), x = [], i = (a.max - a.min) / o;
+    for (let d = 0; d <= o; d++) {
+      const g = a.min + d * i;
       try {
-        const h = s({ t: u, ...o }), b = c({ t: u, ...o });
-        Number.isFinite(h) && Number.isFinite(b) && l.push({ x: h, y: b });
+        const y = s({ t: g, ...n }), h = l({ t: g, ...n });
+        Number.isFinite(y) && Number.isFinite(h) && x.push({ x: y, y: h });
       } catch {
       }
     }
-    return l;
+    return x;
   }
   /** Compute 2D polar curve */
-  compute2DPolar(t, r, a, n) {
-    const o = this.parser.parse(t), s = [], c = (r.max - r.min) / a;
-    for (let l = 0; l <= a; l++) {
-      const i = r.min + l * c;
+  compute2DPolar(t, r, a, o) {
+    const n = this.parser.parse(t), s = [], l = (r.max - r.min) / a;
+    for (let x = 0; x <= a; x++) {
+      const i = r.min + x * l;
       try {
-        const d = o({ theta: i, t: i, ...n });
+        const d = n({ theta: i, t: i, ...o });
         if (Number.isFinite(d)) {
-          const u = d * Math.cos(i), h = d * Math.sin(i);
-          s.push({ x: u, y: h });
+          const g = d * Math.cos(i), y = d * Math.sin(i);
+          s.push({ x: g, y });
         }
       } catch {
       }
@@ -955,78 +1158,78 @@ class GraphService {
     return s;
   }
   /** Compute 3D surface points */
-  compute3DSurface(t, r, a, n, o) {
-    const s = this.parser.parse(t), c = [], l = (r.max - r.min) / n, i = (a.max - a.min) / n;
-    for (let d = 0; d <= n; d++) {
-      const u = [], h = r.min + d * l;
-      for (let b = 0; b <= n; b++) {
-        const y = a.min + b * i;
+  compute3DSurface(t, r, a, o, n) {
+    const s = this.parser.parse(t), l = [], x = (r.max - r.min) / o, i = (a.max - a.min) / o;
+    for (let d = 0; d <= o; d++) {
+      const g = [], y = r.min + d * x;
+      for (let h = 0; h <= o; h++) {
+        const w = a.min + h * i;
         try {
-          const g = s({ x: h, y, ...o });
-          Number.isFinite(g) ? u.push({ x: h, y, z: g }) : u.push({ x: h, y, z: 0 });
+          const p = s({ x: y, y: w, ...n });
+          Number.isFinite(p) ? g.push({ x: y, y: w, z: p }) : g.push({ x: y, y: w, z: 0 });
         } catch {
-          u.push({ x: h, y, z: 0 });
+          g.push({ x: y, y: w, z: 0 });
         }
       }
-      c.push(u);
+      l.push(g);
     }
-    return c;
+    return l;
   }
   /** Export plot data as SVG */
-  exportSVG(t, r, a, n) {
-    const s = a - 80, c = n - 40 * 2, l = (u) => 40 + (u - r.xRange.min) / (r.xRange.max - r.xRange.min) * s, i = (u) => n - 40 - (u - r.yRange.min) / (r.yRange.max - r.yRange.min) * c, d = [
-      `<svg xmlns="http://www.w3.org/2000/svg" width="${a}" height="${n}">`,
+  exportSVG(t, r, a, o) {
+    const s = a - 80, l = o - 40 * 2, x = (g) => 40 + (g - r.xRange.min) / (r.xRange.max - r.xRange.min) * s, i = (g) => o - 40 - (g - r.yRange.min) / (r.yRange.max - r.yRange.min) * l, d = [
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${a}" height="${o}">`,
       `<rect width="100%" height="100%" fill="rgb(${r.backgroundColor.r},${r.backgroundColor.g},${r.backgroundColor.b})"/>`
     ];
     if (r.showGrid) {
       d.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
-      for (let u = Math.ceil(r.xRange.min); u <= r.xRange.max; u++) {
-        const h = l(u);
-        d.push(`<line x1="${h}" y1="40" x2="${h}" y2="${n - 40}"/>`);
+      for (let g = Math.ceil(r.xRange.min); g <= r.xRange.max; g++) {
+        const y = x(g);
+        d.push(`<line x1="${y}" y1="40" x2="${y}" y2="${o - 40}"/>`);
       }
-      for (let u = Math.ceil(r.yRange.min); u <= r.yRange.max; u++) {
-        const h = i(u);
-        d.push(`<line x1="40" y1="${h}" x2="${a - 40}" y2="${h}"/>`);
+      for (let g = Math.ceil(r.yRange.min); g <= r.yRange.max; g++) {
+        const y = i(g);
+        d.push(`<line x1="40" y1="${y}" x2="${a - 40}" y2="${y}"/>`);
       }
       d.push("</g>");
     }
     if (r.showAxes) {
       d.push('<g stroke="var(--nice-text, #333)" stroke-width="1">');
-      const u = i(0), h = l(0);
-      d.push(`<line x1="40" y1="${u}" x2="${a - 40}" y2="${u}"/>`), d.push(`<line x1="${h}" y1="40" x2="${h}" y2="${n - 40}"/>`), d.push("</g>");
+      const g = i(0), y = x(0);
+      d.push(`<line x1="40" y1="${g}" x2="${a - 40}" y2="${g}"/>`), d.push(`<line x1="${y}" y1="40" x2="${y}" y2="${o - 40}"/>`), d.push("</g>");
     }
-    for (const u of t.filter((h) => h.visible))
-      if (u.type === "2d-function") {
-        const h = this.compute2DFunction(u.expression, r.xRange, u.resolution || 200);
-        if (h.length > 0) {
-          const b = h.map((y, g) => `${g === 0 ? "M" : "L"}${l(y.x)},${i(y.y)}`).join(" ");
+    for (const g of t.filter((y) => y.visible))
+      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, p) => `${p === 0 ? "M" : "L"}${x(w.x)},${i(w.y)}`).join(" ");
           d.push(
-            `<path d="${b}" fill="none" stroke="rgb(${u.color.r},${u.color.g},${u.color.b})" stroke-width="${u.lineWidth}"/>`
+            `<path d="${h}" fill="none" stroke="rgb(${g.color.r},${g.color.g},${g.color.b})" stroke-width="${g.lineWidth}"/>`
           );
         }
       }
     return r.showLabels && (d.push(
-      `<text x="${a / 2}" y="${n - 10}" text-anchor="middle" font-size="12">x</text>`
+      `<text x="${a / 2}" y="${o - 10}" text-anchor="middle" font-size="12">x</text>`
     ), d.push(
-      `<text x="10" y="${n / 2}" text-anchor="middle" font-size="12" transform="rotate(-90,10,${n / 2})">y</text>`
+      `<text x="10" y="${o / 2}" text-anchor="middle" font-size="12" transform="rotate(-90,10,${o / 2})">y</text>`
     )), d.push("</svg>"), d.join(`
 `);
   }
   /** Export as PNG (data URL) */
-  async exportPNG(t, r, a, n) {
-    const o = this.exportSVG(t, r, a, n);
-    return new Promise((s, c) => {
-      const l = new Image();
-      l.onload = () => {
+  async exportPNG(t, r, a, o) {
+    const n = this.exportSVG(t, r, a, o);
+    return new Promise((s, l) => {
+      const x = new Image();
+      x.onload = () => {
         const i = document.createElement("canvas");
-        i.width = a, i.height = n;
+        i.width = a, i.height = o;
         const d = i.getContext("2d");
         if (!d) {
-          c(new Error("Could not get canvas context"));
+          l(new Error("Could not get canvas context"));
           return;
         }
-        d.drawImage(l, 0, 0), s(i.toDataURL("image/png"));
-      }, l.onerror = c, l.src = "data:image/svg+xml;base64," + btoa(o);
+        d.drawImage(x, 0, 0), s(i.toDataURL("image/png"));
+      }, x.onerror = l, x.src = "data:image/svg+xml;base64," + btoa(n);
     });
   }
   generateId() {
@@ -1190,9 +1393,9 @@ function NiceGraphPlotter({
   width: t = 800,
   height: r = 600,
   className: a,
-  style: n
+  style: o
 }) {
-  const [o, s] = useState([]), [c, l] = useState({
+  const [n, s] = useState([]), [l, x] = useState({
     xRange: { min: -10, max: 10 },
     yRange: { min: -10, max: 10 },
     zRange: { min: -5, max: 5 },
@@ -1210,40 +1413,40 @@ function NiceGraphPlotter({
     minValue: -5,
     maxValue: 5,
     speed: 1
-  }), u = useCallback(() => {
+  }), g = useCallback(() => {
     s(e.getPlots());
-  }, [e]), h = useCallback((x) => {
-    l((w) => ({ ...w, ...x }));
-  }, []), b = useCallback((x) => {
-    d((w) => ({ ...w, ...x }));
-  }, []), y = useCallback(
-    (x) => {
-      e.addPlot(x), u();
+  }, [e]), y = useCallback((u) => {
+    x((b) => ({ ...b, ...u }));
+  }, []), h = useCallback((u) => {
+    d((b) => ({ ...b, ...u }));
+  }, []), w = useCallback(
+    (u) => {
+      e.addPlot(u), g();
     },
-    [e, u]
-  ), g = useCallback(
-    (x) => {
-      e.removePlot(x), u();
+    [e, g]
+  ), p = useCallback(
+    (u) => {
+      e.removePlot(u), g();
     },
-    [e, u]
-  ), m = useCallback(
-    (x, w) => {
-      e.updatePlot(x, w), u();
+    [e, g]
+  ), f = useCallback(
+    (u, b) => {
+      e.updatePlot(u, b), g();
     },
-    [e, u]
-  ), p = {
+    [e, g]
+  ), c = {
     service: e,
-    plots: o,
-    view: c,
-    setView: h,
-    addPlot: y,
-    removePlot: g,
-    updatePlot: m,
+    plots: n,
+    view: l,
+    setView: y,
+    addPlot: w,
+    removePlot: p,
+    updatePlot: f,
     animation: i,
-    setAnimation: b,
-    refresh: u
+    setAnimation: h,
+    refresh: g
   };
-  return /* @__PURE__ */ jsx(GraphContext.Provider, { value: p, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$2.container, ...n }, children: [
+  return /* @__PURE__ */ jsx(GraphContext.Provider, { value: c, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$2.container, ...o }, children: [
     /* @__PURE__ */ jsxs("div", { style: styles$2.sidebar, children: [
       /* @__PURE__ */ jsx(PlotControls, {}),
       /* @__PURE__ */ jsx(PlotList, {})
@@ -1255,11 +1458,11 @@ function NiceGraphPlotter({
   ] }) });
 }
 function PlotControls() {
-  const { addPlot: e } = useGraph(), [t, r] = useState("sin(x)"), [a, n] = useState("2d-function"), [o, s] = useState("cos(x)"), c = () => {
-    e({
-      type: a,
-      expression: t,
-      expressionY: a === "2d-parametric" ? o : void 0,
+  const { t: e } = useNiceTranslation(), { addPlot: t } = useGraph(), [r, a] = useState("sin(x)"), [o, n] = useState("2d-function"), [s, l] = useState("cos(x)"), x = () => {
+    t({
+      type: o,
+      expression: r,
+      expressionY: o === "2d-parametric" ? s : void 0,
       color: {
         r: Math.floor(Math.random() * 200),
         g: Math.floor(Math.random() * 200),
@@ -1271,8 +1474,8 @@ function PlotControls() {
     /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsxs(
       "select",
       {
-        value: a,
-        onChange: (l) => n(l.target.value),
+        value: o,
+        onChange: (i) => n(i.target.value),
         style: { ...styles$2.input, width: "100%" },
         children: [
           /* @__PURE__ */ jsx("option", { value: "2d-function", children: "y = f(x)" }),
@@ -1286,33 +1489,33 @@ function PlotControls() {
       "input",
       {
         type: "text",
-        value: t,
-        onChange: (l) => r(l.target.value),
-        placeholder: a === "2d-parametric" ? "x(t) = ..." : "Expression...",
+        value: r,
+        onChange: (i) => a(i.target.value),
+        placeholder: o === "2d-parametric" ? "x(t) = ..." : "Expression...",
         style: { ...styles$2.input, width: "100%" }
       }
     ) }),
-    a === "2d-parametric" && /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
+    o === "2d-parametric" && /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
       "input",
       {
         type: "text",
-        value: o,
-        onChange: (l) => s(l.target.value),
+        value: s,
+        onChange: (i) => l(i.target.value),
         placeholder: "y(t) = ...",
         style: { ...styles$2.input, width: "100%" }
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { onClick: c, style: { ...styles$2.button, width: "100%" }, children: "+ Add Plot" }),
+    /* @__PURE__ */ jsx("button", { onClick: x, style: { ...styles$2.button, width: "100%" }, children: "+ Add Plot" }),
     /* @__PURE__ */ jsxs(
       "select",
       {
-        onChange: (l) => {
-          const i = FUNCTION_PRESETS.find((d) => d.name === l.target.value);
-          i && e({
-            type: i.type,
-            expression: i.expression,
-            expressionY: i.expressionY,
-            label: i.name,
+        onChange: (i) => {
+          const d = FUNCTION_PRESETS.find((g) => g.name === i.target.value);
+          d && t({
+            type: d.type,
+            expression: d.expression,
+            expressionY: d.expressionY,
+            label: d.name,
             color: {
               r: Math.floor(Math.random() * 200),
               g: Math.floor(Math.random() * 200),
@@ -1323,29 +1526,39 @@ function PlotControls() {
         style: { ...styles$2.input, width: "100%", marginTop: "8px" },
         value: "",
         children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: !0, children: "Quick add preset..." }),
-          ["basic", "trigonometric", "exponential", "parametric", "polar", "3d"].map((l) => /* @__PURE__ */ jsx("optgroup", { label: l.charAt(0).toUpperCase() + l.slice(1), children: FUNCTION_PRESETS.filter((i) => i.category === l).map((i) => /* @__PURE__ */ jsxs("option", { value: i.name, children: [
-            i.name,
+          /* @__PURE__ */ jsx("option", { value: "", disabled: !0, children: e("plotter.quickAdd", "Quick add preset...") }),
+          ["basic", "trigonometric", "exponential", "parametric", "polar", "3d"].map((i) => /* @__PURE__ */ jsx("optgroup", { label: i.charAt(0).toUpperCase() + i.slice(1), children: FUNCTION_PRESETS.filter((d) => d.category === i).map((d) => /* @__PURE__ */ jsxs("option", { value: d.name, children: [
+            d.name,
             ": ",
-            i.expression
-          ] }, i.name)) }, l))
+            d.expression
+          ] }, d.name)) }, i))
         ]
       }
     )
   ] });
 }
 function PlotList() {
-  const { plots: e, removePlot: t, updatePlot: r } = useGraph();
+  const { t: e } = useNiceTranslation(), { plots: t, removePlot: r, updatePlot: a } = useGraph();
   return /* @__PURE__ */ jsxs("div", { style: styles$2.plotList, children: [
-    e.length === 0 && /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #666)", textAlign: "center", padding: "16px" }, children: "No plots added yet" }),
-    e.map((a) => /* @__PURE__ */ jsxs("div", { style: styles$2.plotItem, children: [
+    t.length === 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          color: "var(--nice-text-secondary, #666)",
+          textAlign: "center",
+          padding: "16px"
+        },
+        children: e("plotter.noPlots", "No plots added yet")
+      }
+    ),
+    t.map((o) => /* @__PURE__ */ jsxs("div", { style: styles$2.plotItem, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" }, children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
-            checked: a.visible,
-            onChange: (n) => r(a.id, { visible: n.target.checked })
+            checked: o.visible,
+            onChange: (n) => a(o.id, { visible: n.target.checked })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1355,15 +1568,15 @@ function PlotList() {
               width: "16px",
               height: "16px",
               borderRadius: "3px",
-              backgroundColor: `rgb(${a.color.r},${a.color.g},${a.color.b})`
+              backgroundColor: `rgb(${o.color.r},${o.color.g},${o.color.b})`
             }
           }
         ),
-        /* @__PURE__ */ jsx("span", { style: { flex: 1, fontWeight: 500 }, children: a.label || a.expression }),
+        /* @__PURE__ */ jsx("span", { style: { flex: 1, fontWeight: 500 }, children: o.label || o.expression }),
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => t(a.id),
+            onClick: () => r(o.id),
             style: {
               padding: "2px 6px",
               backgroundColor: "var(--nice-danger, #f44336)",
@@ -1377,23 +1590,33 @@ function PlotList() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", fontFamily: "monospace" }, children: a.type === "2d-parametric" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        "x(t) = ",
-        a.expression,
-        /* @__PURE__ */ jsx("br", {}),
-        "y(t) = ",
-        a.expressionY
-      ] }) : a.expression })
-    ] }, a.id))
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: "12px",
+            color: "var(--nice-text-secondary, #666)",
+            fontFamily: "monospace"
+          },
+          children: o.type === "2d-parametric" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "x(t) = ",
+            o.expression,
+            /* @__PURE__ */ jsx("br", {}),
+            "y(t) = ",
+            o.expressionY
+          ] }) : o.expression
+        }
+      )
+    ] }, o.id))
   ] });
 }
 function GraphToolbar({ width: e, height: t }) {
-  const { service: r, plots: a, view: n, setView: o } = useGraph(), s = () => {
-    const l = r.exportSVG(a, n, e, t), i = new Blob([l], { type: "image/svg+xml" }), d = URL.createObjectURL(i), u = document.createElement("a");
-    u.href = d, u.download = "graph.svg", u.click(), URL.revokeObjectURL(d);
-  }, c = async () => {
-    const l = await r.exportPNG(a, n, e, t), i = document.createElement("a");
-    i.href = l, i.download = "graph.png", i.click();
+  const { t: r } = useNiceTranslation(), { service: a, plots: o, view: n, setView: s } = useGraph(), l = () => {
+    const i = a.exportSVG(o, n, e, t), d = new Blob([i], { type: "image/svg+xml" }), g = URL.createObjectURL(d), y = document.createElement("a");
+    y.href = g, y.download = "graph.svg", y.click(), URL.revokeObjectURL(g);
+  }, x = async () => {
+    const i = await a.exportPNG(o, n, e, t), d = document.createElement("a");
+    d.href = i, d.download = "graph.png", d.click();
   };
   return /* @__PURE__ */ jsxs("div", { style: styles$2.toolbar, children: [
     /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
@@ -1404,7 +1627,7 @@ function GraphToolbar({ width: e, height: t }) {
         {
           type: "number",
           value: n.xRange.min,
-          onChange: (l) => o({ xRange: { ...n.xRange, min: Number(l.target.value) } }),
+          onChange: (i) => s({ xRange: { ...n.xRange, min: Number(i.target.value) } }),
           style: { ...styles$2.input, width: "50px" }
         }
       ),
@@ -1415,7 +1638,7 @@ function GraphToolbar({ width: e, height: t }) {
         {
           type: "number",
           value: n.xRange.max,
-          onChange: (l) => o({ xRange: { ...n.xRange, max: Number(l.target.value) } }),
+          onChange: (i) => s({ xRange: { ...n.xRange, max: Number(i.target.value) } }),
           style: { ...styles$2.input, width: "50px" }
         }
       ),
@@ -1429,7 +1652,7 @@ function GraphToolbar({ width: e, height: t }) {
         {
           type: "number",
           value: n.yRange.min,
-          onChange: (l) => o({ yRange: { ...n.yRange, min: Number(l.target.value) } }),
+          onChange: (i) => s({ yRange: { ...n.yRange, min: Number(i.target.value) } }),
           style: { ...styles$2.input, width: "50px" }
         }
       ),
@@ -1440,7 +1663,7 @@ function GraphToolbar({ width: e, height: t }) {
         {
           type: "number",
           value: n.yRange.max,
-          onChange: (l) => o({ yRange: { ...n.yRange, max: Number(l.target.value) } }),
+          onChange: (i) => s({ yRange: { ...n.yRange, max: Number(i.target.value) } }),
           style: { ...styles$2.input, width: "50px" }
         }
       ),
@@ -1452,10 +1675,10 @@ function GraphToolbar({ width: e, height: t }) {
         {
           type: "checkbox",
           checked: n.showGrid,
-          onChange: (l) => o({ showGrid: l.target.checked })
+          onChange: (i) => s({ showGrid: i.target.checked })
         }
       ),
-      "Grid"
+      r("plotter.grid", "Grid")
     ] }),
     /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
       /* @__PURE__ */ jsx(
@@ -1463,95 +1686,109 @@ function GraphToolbar({ width: e, height: t }) {
         {
           type: "checkbox",
           checked: n.showAxes,
-          onChange: (l) => o({ showAxes: l.target.checked })
+          onChange: (i) => s({ showAxes: i.target.checked })
         }
       ),
-      "Axes"
+      r("plotter.axes", "Axes")
     ] }),
     /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-    /* @__PURE__ */ jsx("button", { onClick: s, style: { ...styles$2.button, backgroundColor: "var(--nice-success, #4caf50)" }, children: "📥 SVG" }),
-    /* @__PURE__ */ jsx("button", { onClick: c, style: { ...styles$2.button, backgroundColor: "var(--nice-warning, #ff9800)" }, children: "📥 PNG" })
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: l,
+        style: { ...styles$2.button, backgroundColor: "var(--nice-success, #4caf50)" },
+        children: "📥 SVG"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: x,
+        style: { ...styles$2.button, backgroundColor: "var(--nice-warning, #ff9800)" },
+        children: "📥 PNG"
+      }
+    )
   ] });
 }
 function Canvas2D({ width: e, height: t }) {
-  const r = useRef(null), { service: a, plots: n, view: o, animation: s } = useGraph(), c = 40;
+  const r = useRef(null), { service: a, plots: o, view: n, animation: s } = useGraph(), l = 40;
   return useEffect(() => {
-    const l = r.current, i = l == null ? void 0 : l.getContext("2d");
-    if (!l || !i)
+    const x = r.current, i = x == null ? void 0 : x.getContext("2d");
+    if (!x || !i)
       return;
-    i.fillStyle = `rgb(${o.backgroundColor.r},${o.backgroundColor.g},${o.backgroundColor.b})`, i.fillRect(0, 0, e, t);
-    const d = e - c * 2, u = t - c * 2, h = (g) => c + (g - o.xRange.min) / (o.xRange.max - o.xRange.min) * d, b = (g) => t - c - (g - o.yRange.min) / (o.yRange.max - o.yRange.min) * u;
-    if (o.showGrid) {
+    i.fillStyle = `rgb(${n.backgroundColor.r},${n.backgroundColor.g},${n.backgroundColor.b})`, i.fillRect(0, 0, e, t);
+    const d = e - l * 2, g = t - l * 2, y = (p) => l + (p - n.xRange.min) / (n.xRange.max - n.xRange.min) * d, h = (p) => t - l - (p - n.yRange.min) / (n.yRange.max - n.yRange.min) * g;
+    if (n.showGrid) {
       i.strokeStyle = "var(--nice-border, #e0e0e0)", i.lineWidth = 0.5;
-      for (let g = Math.ceil(o.xRange.min); g <= o.xRange.max; g++) {
-        const m = h(g);
-        i.beginPath(), i.moveTo(m, c), i.lineTo(m, t - c), i.stroke();
+      for (let p = Math.ceil(n.xRange.min); p <= n.xRange.max; p++) {
+        const f = y(p);
+        i.beginPath(), i.moveTo(f, l), i.lineTo(f, t - l), i.stroke();
       }
-      for (let g = Math.ceil(o.yRange.min); g <= o.yRange.max; g++) {
-        const m = b(g);
-        i.beginPath(), i.moveTo(c, m), i.lineTo(e - c, m), i.stroke();
+      for (let p = Math.ceil(n.yRange.min); p <= n.yRange.max; p++) {
+        const f = h(p);
+        i.beginPath(), i.moveTo(l, f), i.lineTo(e - l, f), i.stroke();
       }
     }
-    if (o.showAxes) {
+    if (n.showAxes) {
       i.strokeStyle = "var(--nice-text, #333)", i.lineWidth = 1;
-      const g = b(0);
-      i.beginPath(), i.moveTo(c, g), i.lineTo(e - c, g), i.stroke();
-      const m = h(0);
-      if (i.beginPath(), i.moveTo(m, c), i.lineTo(m, t - c), i.stroke(), o.showLabels) {
-        i.fillStyle = "var(--nice-text, #333)", i.font = "12px sans-serif", i.textAlign = "center", i.fillText("x", e - c + 15, g + 4), i.fillText("y", m, c - 10), i.font = "10px sans-serif";
-        for (let p = Math.ceil(o.xRange.min); p <= o.xRange.max; p++)
-          p !== 0 && i.fillText(String(p), h(p), g + 15);
-        for (let p = Math.ceil(o.yRange.min); p <= o.yRange.max; p++)
-          p !== 0 && (i.textAlign = "right", i.fillText(String(p), m - 5, b(p) + 4));
+      const p = h(0);
+      i.beginPath(), i.moveTo(l, p), i.lineTo(e - l, p), i.stroke();
+      const f = y(0);
+      if (i.beginPath(), i.moveTo(f, l), i.lineTo(f, t - l), i.stroke(), n.showLabels) {
+        i.fillStyle = "var(--nice-text, #333)", i.font = "12px sans-serif", i.textAlign = "center", i.fillText("x", e - l + 15, p + 4), i.fillText("y", f, l - 10), i.font = "10px sans-serif";
+        for (let c = Math.ceil(n.xRange.min); c <= n.xRange.max; c++)
+          c !== 0 && i.fillText(String(c), y(c), p + 15);
+        for (let c = Math.ceil(n.yRange.min); c <= n.yRange.max; c++)
+          c !== 0 && (i.textAlign = "right", i.fillText(String(c), f - 5, h(c) + 4));
       }
     }
-    const y = s.isPlaying ? { [s.parameter]: s.currentValue } : {};
-    for (const g of n.filter((m) => m.visible)) {
-      const m = `rgb(${g.color.r},${g.color.g},${g.color.b})`;
-      i.strokeStyle = m, i.lineWidth = g.lineWidth || 2;
-      let p = [];
-      switch (g.type) {
+    const w = s.isPlaying ? { [s.parameter]: s.currentValue } : {};
+    for (const p of o.filter((f) => f.visible)) {
+      const f = `rgb(${p.color.r},${p.color.g},${p.color.b})`;
+      i.strokeStyle = f, i.lineWidth = p.lineWidth || 2;
+      let c = [];
+      switch (p.type) {
         case "2d-function":
-          p = a.compute2DFunction(
-            g.expression,
-            o.xRange,
-            g.resolution || 200,
-            y
+          c = a.compute2DFunction(
+            p.expression,
+            n.xRange,
+            p.resolution || 200,
+            w
           );
           break;
         case "2d-parametric":
-          p = a.compute2DParametric(
-            g.expression,
-            g.expressionY || "sin(t)",
-            g.parameterRange || { min: 0, max: 2 * Math.PI },
-            g.resolution || 200,
-            y
+          c = a.compute2DParametric(
+            p.expression,
+            p.expressionY || "sin(t)",
+            p.parameterRange || { min: 0, max: 2 * Math.PI },
+            p.resolution || 200,
+            w
           );
           break;
         case "2d-polar":
-          p = a.compute2DPolar(
-            g.expression,
-            g.parameterRange || { min: 0, max: 2 * Math.PI },
-            g.resolution || 200,
-            y
+          c = a.compute2DPolar(
+            p.expression,
+            p.parameterRange || { min: 0, max: 2 * Math.PI },
+            p.resolution || 200,
+            w
           );
           break;
       }
-      if (p.length > 0) {
+      if (c.length > 0) {
         i.beginPath();
-        let x = !1;
-        for (const w of p) {
-          const k = h(w.x), f = b(w.y);
-          if (f < 0 || f > t) {
-            x = !1;
+        let u = !1;
+        for (const b of c) {
+          const k = y(b.x), m = h(b.y);
+          if (m < 0 || m > t) {
+            u = !1;
             continue;
           }
-          x ? i.lineTo(k, f) : (i.moveTo(k, f), x = !0);
+          u ? i.lineTo(k, m) : (i.moveTo(k, m), u = !0);
         }
         i.stroke();
       }
     }
-  }, [n, o, s, a, e, t]), /* @__PURE__ */ jsx("canvas", { ref: r, width: e, height: t, style: styles$2.canvas });
+  }, [o, n, s, a, e, t]), /* @__PURE__ */ jsx("canvas", { ref: r, width: e, height: t, style: styles$2.canvas });
 }
 const UNITS = [
   // Length
@@ -1826,7 +2063,7 @@ const UNITS = [
 ], MatrixOps = {
   create(e, t, r = 0) {
     const a = [];
-    for (let n = 0; n < e; n++)
+    for (let o = 0; o < e; o++)
       a.push(new Array(t).fill(r));
     return { rows: e, cols: t, data: a };
   },
@@ -1841,8 +2078,8 @@ const UNITS = [
       throw new Error("Matrix dimensions must match for addition");
     const r = this.create(e.rows, e.cols);
     for (let a = 0; a < e.rows; a++)
-      for (let n = 0; n < e.cols; n++)
-        r.data[a][n] = e.data[a][n] + t.data[a][n];
+      for (let o = 0; o < e.cols; o++)
+        r.data[a][o] = e.data[a][o] + t.data[a][o];
     return r;
   },
   subtract(e, t) {
@@ -1850,8 +2087,8 @@ const UNITS = [
       throw new Error("Matrix dimensions must match for subtraction");
     const r = this.create(e.rows, e.cols);
     for (let a = 0; a < e.rows; a++)
-      for (let n = 0; n < e.cols; n++)
-        r.data[a][n] = e.data[a][n] - t.data[a][n];
+      for (let o = 0; o < e.cols; o++)
+        r.data[a][o] = e.data[a][o] - t.data[a][o];
     return r;
   },
   multiply(e, t) {
@@ -1859,19 +2096,19 @@ const UNITS = [
       throw new Error("Matrix A columns must equal Matrix B rows for multiplication");
     const r = this.create(e.rows, t.cols);
     for (let a = 0; a < e.rows; a++)
-      for (let n = 0; n < t.cols; n++) {
-        let o = 0;
+      for (let o = 0; o < t.cols; o++) {
+        let n = 0;
         for (let s = 0; s < e.cols; s++)
-          o += e.data[a][s] * t.data[s][n];
-        r.data[a][n] = o;
+          n += e.data[a][s] * t.data[s][o];
+        r.data[a][o] = n;
       }
     return r;
   },
   scalar(e, t) {
     const r = this.create(e.rows, e.cols);
     for (let a = 0; a < e.rows; a++)
-      for (let n = 0; n < e.cols; n++)
-        r.data[a][n] = e.data[a][n] * t;
+      for (let o = 0; o < e.cols; o++)
+        r.data[a][o] = e.data[a][o] * t;
     return r;
   },
   transpose(e) {
@@ -1895,14 +2132,14 @@ const UNITS = [
   },
   minor(e, t, r) {
     const a = this.create(e.rows - 1, e.cols - 1);
-    let n = 0;
-    for (let o = 0; o < e.rows; o++) {
-      if (o === t)
+    let o = 0;
+    for (let n = 0; n < e.rows; n++) {
+      if (n === t)
         continue;
       let s = 0;
-      for (let c = 0; c < e.cols; c++)
-        c !== r && (a.data[n][s] = e.data[o][c], s++);
-      n++;
+      for (let l = 0; l < e.cols; l++)
+        l !== r && (a.data[o][s] = e.data[n][l], s++);
+      o++;
     }
     return a;
   },
@@ -1911,10 +2148,10 @@ const UNITS = [
     if (t === 0)
       throw new Error("Matrix is singular, cannot compute inverse");
     const r = e.rows, a = this.create(r, r);
-    for (let n = 0; n < r; n++)
-      for (let o = 0; o < r; o++) {
-        const s = Math.pow(-1, n + o), c = this.determinant(this.minor(e, n, o));
-        a.data[o][n] = s * c;
+    for (let o = 0; o < r; o++)
+      for (let n = 0; n < r; n++) {
+        const s = Math.pow(-1, o + n), l = this.determinant(this.minor(e, o, n));
+        a.data[n][o] = s * l;
       }
     return this.scalar(a, 1 / t);
   },
@@ -1929,11 +2166,11 @@ const UNITS = [
   eigenvalues2x2(e) {
     if (e.rows !== 2 || e.cols !== 2)
       throw new Error("Only 2x2 matrices supported for eigenvalues");
-    const t = e.data[0][0], r = e.data[0][1], a = e.data[1][0], n = e.data[1][1], o = t + n, s = t * n - r * a, c = o * o - 4 * s;
-    if (c < 0)
+    const t = e.data[0][0], r = e.data[0][1], a = e.data[1][0], o = e.data[1][1], n = t + o, s = t * o - r * a, l = n * n - 4 * s;
+    if (l < 0)
       throw new Error("Complex eigenvalues not supported");
-    const l = Math.sqrt(c);
-    return [(o + l) / 2, (o - l) / 2];
+    const x = Math.sqrt(l);
+    return [(n + x) / 2, (n - x) / 2];
   },
   toString(e, t = 4) {
     return e.data.map((r) => "[ " + r.map((a) => a.toFixed(t).padStart(10)).join(" ") + " ]").join(`
@@ -1951,25 +2188,25 @@ const UNITS = [
   /** Numerical integration using Simpson's rule */
   integrate(e, t, r, a = 1e3) {
     a % 2 !== 0 && a++;
-    const n = (r - t) / a;
-    let o = e(t) + e(r);
+    const o = (r - t) / a;
+    let n = e(t) + e(r);
     for (let s = 1; s < a; s++) {
-      const c = t + s * n;
-      o += s % 2 === 0 ? 2 * e(c) : 4 * e(c);
+      const l = t + s * o;
+      n += s % 2 === 0 ? 2 * e(l) : 4 * e(l);
     }
-    return n / 3 * o;
+    return o / 3 * n;
   },
   /** Find root using Newton-Raphson method */
   findRoot(e, t, r = 1e-10, a = 100) {
-    let n = t;
-    for (let o = 0; o < a; o++) {
-      const s = e(n);
+    let o = t;
+    for (let n = 0; n < a; n++) {
+      const s = e(o);
       if (Math.abs(s) < r)
-        return n;
-      const c = this.derivative(e, n);
-      if (c === 0)
+        return o;
+      const l = this.derivative(e, o);
+      if (l === 0)
         throw new Error("Derivative is zero, Newton-Raphson failed");
-      n = n - s / c;
+      o = o - s / l;
     }
     throw new Error("Newton-Raphson did not converge");
   },
@@ -1986,8 +2223,8 @@ const UNITS = [
     }
     const r = e.match(/^(-?\d+\.?\d*)\*x\^(\d+)$/);
     if (r) {
-      const a = parseFloat(r[1]), n = parseInt(r[2], 10), o = a * n;
-      return n === 1 ? String(o) : n === 2 ? `${o}*x` : `${o}*x^${n - 1}`;
+      const a = parseFloat(r[1]), o = parseInt(r[2], 10), n = a * o;
+      return o === 1 ? String(n) : o === 2 ? `${n}*x` : `${n}*x^${o - 1}`;
     }
     return e === "sin(x)" ? "cos(x)" : e === "cos(x)" ? "-sin(x)" : e === "e^x" || e === "exp(x)" ? "e^x" : e === "ln(x)" ? "1/x" : `d/dx(${e})`;
   },
@@ -2011,8 +2248,8 @@ const UNITS = [
       throw new Error("No real solutions (complex roots)");
     if (a === 0)
       return [-t / (2 * e)];
-    const n = Math.sqrt(a);
-    return [(-t + n) / (2 * e), (-t - n) / (2 * e)];
+    const o = Math.sqrt(a);
+    return [(-t + o) / (2 * e), (-t - o) / (2 * e)];
   }
 };
 class CalculatorService {
@@ -2080,20 +2317,20 @@ class CalculatorService {
   }
   /** Convert between number bases */
   convertBase(e, t, r) {
-    const a = { BIN: 2, OCT: 8, DEC: 10, HEX: 16 }, n = parseInt(e, a[t]);
-    if (isNaN(n))
+    const a = { BIN: 2, OCT: 8, DEC: 10, HEX: 16 }, o = parseInt(e, a[t]);
+    if (isNaN(o))
       throw new Error("Invalid number for base conversion");
-    return n.toString(a[r]).toUpperCase();
+    return o.toString(a[r]).toUpperCase();
   }
   /** Convert units */
   convertUnits(e, t, r) {
-    const a = UNITS.find((s) => s.symbol === t), n = UNITS.find((s) => s.symbol === r);
-    if (!a || !n)
+    const a = UNITS.find((s) => s.symbol === t), o = UNITS.find((s) => s.symbol === r);
+    if (!a || !o)
       throw new Error("Unknown unit");
-    if (a.category !== n.category)
+    if (a.category !== o.category)
       throw new Error("Cannot convert between different unit categories");
-    const o = a.toBase(e);
-    return n.fromBase(o);
+    const n = a.toBase(e);
+    return o.fromBase(n);
   }
   /** Get units by category */
   getUnitsByCategory(e) {
@@ -2182,40 +2419,40 @@ function NiceCalculator({
   className: t,
   style: r
 }) {
-  const [a, n] = useState("0"), [o, s] = useState("standard"), [c, l] = useState([]), [i, d] = useState(!1), u = useCallback(
-    (g) => {
-      i && /[0-9.]/.test(g) ? (n(g), d(!1)) : (n((m) => m === "0" && g !== "." ? g : m + g), d(!1));
+  const [a, o] = useState("0"), [n, s] = useState("standard"), [l, x] = useState([]), [i, d] = useState(!1), g = useCallback(
+    (p) => {
+      i && /[0-9.]/.test(p) ? (o(p), d(!1)) : (o((f) => f === "0" && p !== "." ? p : f + p), d(!1));
     },
     [i]
-  ), h = useCallback(() => {
-    n("0"), d(!1);
-  }, []), b = useCallback(() => {
+  ), y = useCallback(() => {
+    o("0"), d(!1);
+  }, []), h = useCallback(() => {
     try {
-      const g = e.evaluate(a), m = e.format(g);
-      e.addHistory(a, m, o), l(e.getHistory()), n(m), d(!0);
+      const p = e.evaluate(a), f = e.format(p);
+      e.addHistory(a, f, n), x(e.getHistory()), o(f), d(!0);
     } catch {
-      n("Error"), d(!0);
+      o("Error"), d(!0);
     }
-  }, [a, o, e]), y = {
+  }, [a, n, e]), w = {
     service: e,
     display: a,
-    setDisplay: n,
-    mode: o,
+    setDisplay: o,
+    mode: n,
     setMode: s,
-    history: c,
-    calculate: b,
-    appendDigit: u,
-    clear: h
+    history: l,
+    calculate: h,
+    appendDigit: g,
+    clear: y
   };
-  return /* @__PURE__ */ jsx(CalculatorContext.Provider, { value: y, children: /* @__PURE__ */ jsxs("div", { className: t, style: { ...styles$1.container, ...r }, children: [
+  return /* @__PURE__ */ jsx(CalculatorContext.Provider, { value: w, children: /* @__PURE__ */ jsxs("div", { className: t, style: { ...styles$1.container, ...r }, children: [
     /* @__PURE__ */ jsx(ModeSelector, {}),
     /* @__PURE__ */ jsx(Display, {}),
-    o === "standard" && /* @__PURE__ */ jsx(StandardKeypad, {}),
-    o === "scientific" && /* @__PURE__ */ jsx(ScientificKeypad, {}),
-    o === "programmer" && /* @__PURE__ */ jsx(ProgrammerKeypad, {}),
-    o === "matrix" && /* @__PURE__ */ jsx(MatrixMode, {}),
-    o === "calculus" && /* @__PURE__ */ jsx(CalculusMode, {}),
-    o === "units" && /* @__PURE__ */ jsx(UnitsMode, {})
+    n === "standard" && /* @__PURE__ */ jsx(StandardKeypad, {}),
+    n === "scientific" && /* @__PURE__ */ jsx(ScientificKeypad, {}),
+    n === "programmer" && /* @__PURE__ */ jsx(ProgrammerKeypad, {}),
+    n === "matrix" && /* @__PURE__ */ jsx(MatrixMode, {}),
+    n === "calculus" && /* @__PURE__ */ jsx(CalculusMode, {}),
+    n === "units" && /* @__PURE__ */ jsx(UnitsMode, {})
   ] }) });
 }
 function ModeSelector() {
@@ -2246,11 +2483,11 @@ function Display() {
   return /* @__PURE__ */ jsx("div", { style: styles$1.display, children: /* @__PURE__ */ jsx("div", { style: styles$1.displayText, children: e }) });
 }
 function StandardKeypad() {
-  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: n } = useCalculator(), o = [
+  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: o } = useCalculator(), n = [
     { label: "AC", action: t, style: styles$1.keyFunction },
     {
       label: "±",
-      action: () => a(n.startsWith("-") ? n.slice(1) : "-" + n),
+      action: () => a(o.startsWith("-") ? o.slice(1) : "-" + o),
       style: styles$1.keyFunction
     },
     { label: "%", action: () => e("/100"), style: styles$1.keyFunction },
@@ -2269,13 +2506,19 @@ function StandardKeypad() {
     { label: "+", action: () => e("+"), style: styles$1.keyOperator },
     { label: "0", action: () => e("0") },
     { label: ".", action: () => e(".") },
-    { label: "⌫", action: () => a(n.length > 1 ? n.slice(0, -1) : "0") },
+    { label: "⌫", action: () => a(o.length > 1 ? o.slice(0, -1) : "0") },
     { label: "=", action: r, style: styles$1.keyOperator }
   ];
-  return /* @__PURE__ */ jsx("div", { style: styles$1.keypad, children: o.map((s, c) => /* @__PURE__ */ jsx("button", { onClick: s.action, style: { ...styles$1.key, ...s.style || {} }, children: s.label }, c)) });
+  return /* @__PURE__ */ jsx("div", { style: styles$1.keypad, children: n.map((s, l) => /* @__PURE__ */ jsx("button", { onClick: s.action, style: { ...styles$1.key, ...s.style || {} }, children: s.label }, l)) });
 }
 function ScientificKeypad() {
-  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: n } = useCalculator(), o = [
+  const {
+    appendDigit: e,
+    clear: t,
+    calculate: r,
+    setDisplay: a,
+    display: o
+  } = useCalculator(), n = [
     { label: "sin", action: () => e("sin(") },
     { label: "cos", action: () => e("cos(") },
     { label: "tan", action: () => e("tan(") },
@@ -2287,7 +2530,7 @@ function ScientificKeypad() {
     { label: "xʸ", action: () => e("^") },
     { label: "√", action: () => e("sqrt(") },
     { label: "eˣ", action: () => e("exp(") }
-  ], c = [
+  ], l = [
     { label: "(", action: () => e("(") },
     { label: ")", action: () => e(")") },
     { label: "π", action: () => e("π") },
@@ -2295,12 +2538,12 @@ function ScientificKeypad() {
     { label: "AC", action: t }
   ];
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(5, 1fr)" }, children: [...o, ...s, ...c].map((l, i) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(5, 1fr)" }, children: [...n, ...s, ...l].map((x, i) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: l.action,
+        onClick: x.action,
         style: { ...styles$1.key, ...styles$1.keyFunction, padding: "12px" },
-        children: l.label
+        children: x.label
       },
       i
     )) }),
@@ -2308,40 +2551,51 @@ function ScientificKeypad() {
   ] });
 }
 function ProgrammerKeypad() {
-  const { display: e, setDisplay: t, service: r } = useCalculator(), [a, n] = useState("DEC"), o = (c) => {
+  const { display: e, setDisplay: t, service: r } = useCalculator(), [a, o] = useState("DEC"), n = (l) => {
     try {
-      const l = r.convertBase(e, a, c);
-      t(l), n(c);
+      const x = r.convertBase(e, a, l);
+      t(x), o(l);
     } catch {
       t("Error");
     }
   }, s = a === "HEX" ? ["A", "B", "C", "D", "E", "F"] : [];
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", padding: "8px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: ["BIN", "OCT", "DEC", "HEX"].map((c) => /* @__PURE__ */ jsx(
-      "button",
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        onClick: () => o(c),
         style: {
-          flex: 1,
+          display: "flex",
+          gap: "4px",
           padding: "8px",
-          border: "none",
-          borderRadius: "4px",
-          backgroundColor: a === c ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-border, #3c3c3c)",
-          color: "var(--nice-bg, #fff)",
-          cursor: "pointer"
+          backgroundColor: "var(--nice-bg-secondary, #252525)"
         },
-        children: c
-      },
-      c
-    )) }),
-    s.length > 0 && /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(6, 1fr)" }, children: s.map((c) => /* @__PURE__ */ jsx(
+        children: ["BIN", "OCT", "DEC", "HEX"].map((l) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => n(l),
+            style: {
+              flex: 1,
+              padding: "8px",
+              border: "none",
+              borderRadius: "4px",
+              backgroundColor: a === l ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-border, #3c3c3c)",
+              color: "var(--nice-bg, #fff)",
+              cursor: "pointer"
+            },
+            children: l
+          },
+          l
+        ))
+      }
+    ),
+    s.length > 0 && /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(6, 1fr)" }, children: s.map((l) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => t(e === "0" ? c : e + c),
+        onClick: () => t(e === "0" ? l : e + l),
         style: styles$1.key,
-        children: c
+        children: l
       },
-      c
+      l
     )) }),
     /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(4, 1fr)" }, children: [
       "7",
@@ -2360,63 +2614,63 @@ function ProgrammerKeypad() {
       "NOT",
       "<<",
       ">>"
-    ].map((c) => {
-      const l = ["AND", "OR", "XOR", "NOT", "<<", ">>"].includes(c);
+    ].map((l) => {
+      const x = ["AND", "OR", "XOR", "NOT", "<<", ">>"].includes(l);
       return /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => t(e === "0" ? c : e + c),
-          style: { ...styles$1.key, ...l ? styles$1.keyFunction : {} },
-          children: c
+          onClick: () => t(e === "0" ? l : e + l),
+          style: { ...styles$1.key, ...x ? styles$1.keyFunction : {} },
+          children: l
         },
-        c
+        l
       );
     }) })
   ] });
 }
 function MatrixMode() {
-  const [e, t] = useState(MatrixOps.create(2, 2)), [r, a] = useState(MatrixOps.create(2, 2)), [n, o] = useState(""), s = (l, i, d, u, h) => {
-    const b = { ...l, data: l.data.map((y) => [...y]) };
-    b.data[d][u] = parseFloat(h) || 0, i(b);
-  };
+  const { t: e } = useNiceTranslation(), [t, r] = useState(MatrixOps.create(2, 2)), [a, o] = useState(MatrixOps.create(2, 2)), [n, s] = useState(""), l = (i, d, g, y, h) => {
+    const w = { ...i, data: i.data.map((p) => [...p]) };
+    w.data[g][y] = parseFloat(h) || 0, d(w);
+  }, x = [
+    { label: "A + B", fn: () => MatrixOps.toString(MatrixOps.add(t, a)) },
+    { label: "A - B", fn: () => MatrixOps.toString(MatrixOps.subtract(t, a)) },
+    { label: "A × B", fn: () => MatrixOps.toString(MatrixOps.multiply(t, a)) },
+    { label: "det(A)", fn: () => MatrixOps.determinant(t).toFixed(4) },
+    { label: "Aᵀ", fn: () => MatrixOps.toString(MatrixOps.transpose(t)) },
+    { label: "A⁻¹", fn: () => MatrixOps.toString(MatrixOps.inverse(t)) }
+  ];
   return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", marginBottom: "12px" }, children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: "Matrix A" }),
+        /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: e("calculator.matrixA", "Matrix A") }),
         /* @__PURE__ */ jsx(
           MatrixInput,
           {
-            matrix: e,
-            onChange: (l, i, d) => s(e, t, l, i, d)
+            matrix: t,
+            onChange: (i, d, g) => l(t, r, i, d, g)
           }
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: "Matrix B" }),
+        /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: e("calculator.matrixB", "Matrix B") }),
         /* @__PURE__ */ jsx(
           MatrixInput,
           {
-            matrix: r,
-            onChange: (l, i, d) => s(r, a, l, i, d)
+            matrix: a,
+            onChange: (i, d, g) => l(a, o, i, d, g)
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: [
-      { label: "A + B", fn: () => MatrixOps.toString(MatrixOps.add(e, r)) },
-      { label: "A - B", fn: () => MatrixOps.toString(MatrixOps.subtract(e, r)) },
-      { label: "A × B", fn: () => MatrixOps.toString(MatrixOps.multiply(e, r)) },
-      { label: "det(A)", fn: () => MatrixOps.determinant(e).toFixed(4) },
-      { label: "Aᵀ", fn: () => MatrixOps.toString(MatrixOps.transpose(e)) },
-      { label: "A⁻¹", fn: () => MatrixOps.toString(MatrixOps.inverse(e)) }
-    ].map((l) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: x.map((i) => /* @__PURE__ */ jsx(
       "button",
       {
         onClick: () => {
           try {
-            o(l.fn());
-          } catch (i) {
-            o(i.message);
+            s(i.fn());
+          } catch (d) {
+            s(d.message);
           }
         },
         style: {
@@ -2427,11 +2681,17 @@ function MatrixMode() {
           borderRadius: "4px",
           cursor: "pointer"
         },
-        children: l.label
+        children: i.label
       },
-      l.label
+      i.label
     )) }),
-    n && /* @__PURE__ */ jsx("pre", { style: { color: "var(--nice-bg, #fff)", fontFamily: "monospace", whiteSpace: "pre-wrap" }, children: n })
+    n && /* @__PURE__ */ jsx(
+      "pre",
+      {
+        style: { color: "var(--nice-bg, #fff)", fontFamily: "monospace", whiteSpace: "pre-wrap" },
+        children: n
+      }
+    )
   ] });
 }
 function MatrixInput({
@@ -2443,12 +2703,12 @@ function MatrixInput({
     {
       style: { display: "grid", gridTemplateColumns: `repeat(${e.cols}, 50px)`, gap: "4px" },
       children: e.data.map(
-        (r, a) => r.map((n, o) => /* @__PURE__ */ jsx(
+        (r, a) => r.map((o, n) => /* @__PURE__ */ jsx(
           "input",
           {
             type: "number",
-            value: n,
-            onChange: (s) => t(a, o, s.target.value),
+            value: o,
+            onChange: (s) => t(a, n, s.target.value),
             style: {
               width: "100%",
               padding: "4px",
@@ -2459,22 +2719,22 @@ function MatrixInput({
               borderRadius: "4px"
             }
           },
-          `${a}-${o}`
+          `${a}-${n}`
         ))
       )
     }
   );
 }
 function CalculusMode() {
-  const [e, t] = useState("x^2"), [r, a] = useState("");
+  const { t: e } = useNiceTranslation(), [t, r] = useState("x^2"), [a, o] = useState("");
   return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         type: "text",
-        value: e,
-        onChange: (n) => t(n.target.value),
-        placeholder: "Enter expression (e.g., x^2, sin(x))",
+        value: t,
+        onChange: (n) => r(n.target.value),
+        placeholder: e("calculator.exprPlaceholder", "Enter expression (e.g., x^2, sin(x))"),
         style: {
           width: "100%",
           padding: "8px",
@@ -2490,7 +2750,7 @@ function CalculusMode() {
       /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => a(`d/dx(${e}) = ${CalculusOps.symbolicDerivative(e)}`),
+          onClick: () => o(`d/dx(${t}) = ${CalculusOps.symbolicDerivative(t)}`),
           style: {
             padding: "8px 12px",
             backgroundColor: "var(--nice-success, #4caf50)",
@@ -2499,13 +2759,13 @@ function CalculusMode() {
             borderRadius: "4px",
             cursor: "pointer"
           },
-          children: "Differentiate"
+          children: e("calculator.differentiate", "Differentiate")
         }
       ),
       /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => a(`∫(${e})dx = ${CalculusOps.symbolicIntegral(e)}`),
+          onClick: () => o(`∫(${t})dx = ${CalculusOps.symbolicIntegral(t)}`),
           style: {
             padding: "8px 12px",
             backgroundColor: "var(--nice-primary, #2196f3)",
@@ -2514,11 +2774,11 @@ function CalculusMode() {
             borderRadius: "4px",
             cursor: "pointer"
           },
-          children: "Integrate"
+          children: e("calculator.integrate", "Integrate")
         }
       )
     ] }),
-    r && /* @__PURE__ */ jsx(
+    a && /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -2528,29 +2788,29 @@ function CalculusMode() {
           backgroundColor: "var(--nice-bg, #1e1e1e)",
           borderRadius: "4px"
         },
-        children: r
+        children: a
       }
     )
   ] });
 }
 function UnitsMode() {
-  const { service: e } = useCalculator(), [t, r] = useState("1"), [a, n] = useState("m"), [o, s] = useState("ft"), [c, l] = useState("Length"), [i, d] = useState(""), u = e.getUnitCategories(), h = e.getUnitsByCategory(c), b = () => {
+  const { t: e } = useNiceTranslation(), { service: t } = useCalculator(), [r, a] = useState("1"), [o, n] = useState("m"), [s, l] = useState("ft"), [x, i] = useState("Length"), [d, g] = useState(""), y = t.getUnitCategories(), h = t.getUnitsByCategory(x), w = () => {
     try {
-      const y = e.convertUnits(parseFloat(t), a, o);
-      d(`${t} ${a} = ${e.format(y)} ${o}`);
-    } catch (y) {
-      d(y.message);
+      const p = t.convertUnits(parseFloat(r), o, s);
+      g(`${r} ${o} = ${t.format(p)} ${s}`);
+    } catch (p) {
+      g(p.message);
     }
   };
   return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
     /* @__PURE__ */ jsx(
       "select",
       {
-        value: c,
-        onChange: (y) => {
-          l(y.target.value);
-          const g = e.getUnitsByCategory(y.target.value);
-          g.length >= 2 && (n(g[0].symbol), s(g[1].symbol));
+        value: x,
+        onChange: (p) => {
+          i(p.target.value);
+          const f = t.getUnitsByCategory(p.target.value);
+          f.length >= 2 && (n(f[0].symbol), l(f[1].symbol));
         },
         style: {
           width: "100%",
@@ -2561,7 +2821,7 @@ function UnitsMode() {
           border: "1px solid var(--nice-text-secondary, #555)",
           borderRadius: "4px"
         },
-        children: u.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
+        children: y.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: p }, p))
       }
     ),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
@@ -2569,8 +2829,8 @@ function UnitsMode() {
         "input",
         {
           type: "number",
-          value: t,
-          onChange: (y) => r(y.target.value),
+          value: r,
+          onChange: (p) => a(p.target.value),
           style: {
             flex: 1,
             padding: "8px",
@@ -2584,8 +2844,8 @@ function UnitsMode() {
       /* @__PURE__ */ jsx(
         "select",
         {
-          value: a,
-          onChange: (y) => n(y.target.value),
+          value: o,
+          onChange: (p) => n(p.target.value),
           style: {
             padding: "8px",
             backgroundColor: "var(--nice-border, #3c3c3c)",
@@ -2593,12 +2853,12 @@ function UnitsMode() {
             border: "1px solid var(--nice-text-secondary, #555)",
             borderRadius: "4px"
           },
-          children: h.map((y) => /* @__PURE__ */ jsxs("option", { value: y.symbol, children: [
-            y.name,
+          children: h.map((p) => /* @__PURE__ */ jsxs("option", { value: p.symbol, children: [
+            p.name,
             " (",
-            y.symbol,
+            p.symbol,
             ")"
-          ] }, y.symbol))
+          ] }, p.symbol))
         }
       )
     ] }),
@@ -2607,8 +2867,8 @@ function UnitsMode() {
       /* @__PURE__ */ jsx(
         "select",
         {
-          value: o,
-          onChange: (y) => s(y.target.value),
+          value: s,
+          onChange: (p) => l(p.target.value),
           style: {
             flex: 1,
             padding: "8px",
@@ -2617,19 +2877,19 @@ function UnitsMode() {
             border: "1px solid var(--nice-text-secondary, #555)",
             borderRadius: "4px"
           },
-          children: h.map((y) => /* @__PURE__ */ jsxs("option", { value: y.symbol, children: [
-            y.name,
+          children: h.map((p) => /* @__PURE__ */ jsxs("option", { value: p.symbol, children: [
+            p.name,
             " (",
-            y.symbol,
+            p.symbol,
             ")"
-          ] }, y.symbol))
+          ] }, p.symbol))
         }
       )
     ] }),
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: b,
+        onClick: w,
         style: {
           width: "100%",
           padding: "12px",
@@ -2640,10 +2900,21 @@ function UnitsMode() {
           fontSize: "16px",
           cursor: "pointer"
         },
-        children: "Convert"
+        children: e("calculator.convert", "Convert")
       }
     ),
-    i && /* @__PURE__ */ jsx("div", { style: { marginTop: "12px", color: "var(--nice-bg, #fff)", fontSize: "18px", textAlign: "center" }, children: i })
+    d && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          marginTop: "12px",
+          color: "var(--nice-bg, #fff)",
+          fontSize: "18px",
+          textAlign: "center"
+        },
+        children: d
+      }
+    )
   ] });
 }
 const GeoMath = {
@@ -2658,8 +2929,8 @@ const GeoMath = {
   /** Angle between three points (vertex at p2) */
   angle(e, t, r) {
     const a = Math.atan2(e.y - t.y, e.x - t.x);
-    let o = Math.atan2(r.y - t.y, r.x - t.x) - a;
-    return o < 0 && (o += 2 * Math.PI), o;
+    let n = Math.atan2(r.y - t.y, r.x - t.x) - a;
+    return n < 0 && (n += 2 * Math.PI), n;
   },
   /** Angle in degrees */
   angleDegrees(e, t, r) {
@@ -2667,63 +2938,63 @@ const GeoMath = {
   },
   /** Point on line closest to given point */
   closestPointOnLine(e, t, r) {
-    const a = t.x - e.x, n = t.y - e.y, o = ((r.x - e.x) * a + (r.y - e.y) * n) / (a * a + n * n);
-    return { x: e.x + o * a, y: e.y + o * n };
+    const a = t.x - e.x, o = t.y - e.y, n = ((r.x - e.x) * a + (r.y - e.y) * o) / (a * a + o * o);
+    return { x: e.x + n * a, y: e.y + n * o };
   },
   /** Line-line intersection */
   lineIntersection(e, t, r, a) {
-    const n = (e.x - t.x) * (r.y - a.y) - (e.y - t.y) * (r.x - a.x);
-    if (Math.abs(n) < 1e-10)
+    const o = (e.x - t.x) * (r.y - a.y) - (e.y - t.y) * (r.x - a.x);
+    if (Math.abs(o) < 1e-10)
       return null;
-    const o = ((e.x - r.x) * (r.y - a.y) - (e.y - r.y) * (r.x - a.x)) / n;
+    const n = ((e.x - r.x) * (r.y - a.y) - (e.y - r.y) * (r.x - a.x)) / o;
     return {
-      x: e.x + o * (t.x - e.x),
-      y: e.y + o * (t.y - e.y)
+      x: e.x + n * (t.x - e.x),
+      y: e.y + n * (t.y - e.y)
     };
   },
   /** Circle-line intersection */
   circleLineIntersection(e, t, r, a) {
-    const n = a.x - r.x, o = a.y - r.y, s = r.x - e.x, c = r.y - e.y, l = n * n + o * o, i = 2 * (s * n + c * o), d = s * s + c * c - t * t, u = i * i - 4 * l * d;
-    if (u < 0)
+    const o = a.x - r.x, n = a.y - r.y, s = r.x - e.x, l = r.y - e.y, x = o * o + n * n, i = 2 * (s * o + l * n), d = s * s + l * l - t * t, g = i * i - 4 * x * d;
+    if (g < 0)
       return [];
-    const h = Math.sqrt(u), b = (-i - h) / (2 * l), y = (-i + h) / (2 * l), g = [];
-    return b >= 0 && b <= 1 && g.push({ x: r.x + b * n, y: r.y + b * o }), y >= 0 && y <= 1 && Math.abs(y - b) > 1e-10 && g.push({ x: r.x + y * n, y: r.y + y * o }), g;
+    const y = Math.sqrt(g), h = (-i - y) / (2 * x), w = (-i + y) / (2 * x), p = [];
+    return h >= 0 && h <= 1 && p.push({ x: r.x + h * o, y: r.y + h * n }), w >= 0 && w <= 1 && Math.abs(w - h) > 1e-10 && p.push({ x: r.x + w * o, y: r.y + w * n }), p;
   },
   /** Circle-circle intersection */
   circleCircleIntersection(e, t, r, a) {
-    const n = this.distance(e, r);
-    if (n > t + a || n < Math.abs(t - a) || n === 0)
+    const o = this.distance(e, r);
+    if (o > t + a || o < Math.abs(t - a) || o === 0)
       return [];
-    const o = (t * t - a * a + n * n) / (2 * n), s = Math.sqrt(t * t - o * o), c = e.x + o * (r.x - e.x) / n, l = e.y + o * (r.y - e.y) / n;
+    const n = (t * t - a * a + o * o) / (2 * o), s = Math.sqrt(t * t - n * n), l = e.x + n * (r.x - e.x) / o, x = e.y + n * (r.y - e.y) / o;
     return [
-      { x: c + s * (r.y - e.y) / n, y: l - s * (r.x - e.x) / n },
-      { x: c - s * (r.y - e.y) / n, y: l + s * (r.x - e.x) / n }
+      { x: l + s * (r.y - e.y) / o, y: x - s * (r.x - e.x) / o },
+      { x: l - s * (r.y - e.y) / o, y: x + s * (r.x - e.x) / o }
     ];
   },
   /** Perpendicular line through point */
   perpendicularThrough(e, t, r) {
     this.closestPointOnLine(e, t, r);
-    const a = t.x - e.x, n = t.y - e.y;
+    const a = t.x - e.x, o = t.y - e.y;
     return {
       p1: r,
-      p2: { x: r.x - n, y: r.y + a }
+      p2: { x: r.x - o, y: r.y + a }
     };
   },
   /** Parallel line through point */
   parallelThrough(e, t, r) {
-    const a = t.x - e.x, n = t.y - e.y;
+    const a = t.x - e.x, o = t.y - e.y;
     return {
       p1: r,
-      p2: { x: r.x + a, y: r.y + n }
+      p2: { x: r.x + a, y: r.y + o }
     };
   },
   /** Angle bisector */
   angleBisector(e, t, r) {
-    const a = Math.atan2(e.y - t.y, e.x - t.x), n = Math.atan2(r.y - t.y, r.x - t.x);
-    let o = (a + n) / 2;
-    return Math.abs(n - a) > Math.PI && (o += Math.PI), {
-      x: t.x + Math.cos(o),
-      y: t.y + Math.sin(o)
+    const a = Math.atan2(e.y - t.y, e.x - t.x), o = Math.atan2(r.y - t.y, r.x - t.x);
+    let n = (a + o) / 2;
+    return Math.abs(o - a) > Math.PI && (n += Math.PI), {
+      x: t.x + Math.cos(n),
+      y: t.y + Math.sin(n)
     };
   },
   /** Reflect point over line */
@@ -2736,10 +3007,10 @@ const GeoMath = {
   },
   /** Rotate point around center */
   rotate(e, t, r) {
-    const a = Math.cos(r), n = Math.sin(r), o = e.x - t.x, s = e.y - t.y;
+    const a = Math.cos(r), o = Math.sin(r), n = e.x - t.x, s = e.y - t.y;
     return {
-      x: t.x + o * a - s * n,
-      y: t.y + o * n + s * a
+      x: t.x + n * a - s * o,
+      y: t.y + n * o + s * a
     };
   },
   /** Translate point */
@@ -2758,8 +3029,8 @@ const GeoMath = {
     let t = 0;
     const r = e.length;
     for (let a = 0; a < r; a++) {
-      const n = (a + 1) % r;
-      t += e[a].x * e[n].y, t -= e[n].x * e[a].y;
+      const o = (a + 1) % r;
+      t += e[a].x * e[o].y, t -= e[o].x * e[a].y;
     }
     return Math.abs(t) / 2;
   },
@@ -2768,22 +3039,22 @@ const GeoMath = {
     let t = 0;
     const r = e.length;
     for (let a = 0; a < r; a++) {
-      const n = (a + 1) % r;
-      t += this.distance(e[a], e[n]);
+      const o = (a + 1) % r;
+      t += this.distance(e[a], e[o]);
     }
     return t;
   },
   /** Triangle circumcenter */
   circumcenter(e, t, r) {
-    const a = 2 * (e.x * (t.y - r.y) + t.x * (r.y - e.y) + r.x * (e.y - t.y)), n = ((e.x ** 2 + e.y ** 2) * (t.y - r.y) + (t.x ** 2 + t.y ** 2) * (r.y - e.y) + (r.x ** 2 + r.y ** 2) * (e.y - t.y)) / a, o = ((e.x ** 2 + e.y ** 2) * (r.x - t.x) + (t.x ** 2 + t.y ** 2) * (e.x - r.x) + (r.x ** 2 + r.y ** 2) * (t.x - e.x)) / a;
-    return { x: n, y: o };
+    const a = 2 * (e.x * (t.y - r.y) + t.x * (r.y - e.y) + r.x * (e.y - t.y)), o = ((e.x ** 2 + e.y ** 2) * (t.y - r.y) + (t.x ** 2 + t.y ** 2) * (r.y - e.y) + (r.x ** 2 + r.y ** 2) * (e.y - t.y)) / a, n = ((e.x ** 2 + e.y ** 2) * (r.x - t.x) + (t.x ** 2 + t.y ** 2) * (e.x - r.x) + (r.x ** 2 + r.y ** 2) * (t.x - e.x)) / a;
+    return { x: o, y: n };
   },
   /** Triangle incenter */
   incenter(e, t, r) {
-    const a = this.distance(e, t), n = this.distance(t, r), o = this.distance(r, e), s = a + n + o;
+    const a = this.distance(e, t), o = this.distance(t, r), n = this.distance(r, e), s = a + o + n;
     return {
-      x: (n * e.x + o * t.x + a * r.x) / s,
-      y: (n * e.y + o * t.y + a * r.y) / s
+      x: (o * e.x + n * t.x + a * r.x) / s,
+      y: (o * e.y + n * t.y + a * r.y) / s
     };
   },
   /** Triangle centroid */
@@ -2822,8 +3093,8 @@ class GeometryService {
   deleteElement(t) {
     var r;
     this.elements.delete(t);
-    for (const [a, n] of this.elements)
-      (r = n.dependencies) != null && r.includes(t) && this.deleteElement(a);
+    for (const [a, o] of this.elements)
+      (r = o.dependencies) != null && r.includes(t) && this.deleteElement(a);
   }
   /** Get all elements */
   getAllElements() {
@@ -2928,91 +3199,91 @@ class GeometryService {
   }
   /** Create midpoint */
   createMidpoint(t, r) {
-    const a = this.getPoint(t), n = this.getPoint(r);
-    if (!a || !n)
+    const a = this.getPoint(t), o = this.getPoint(r);
+    if (!a || !o)
       return null;
-    const o = GeoMath.midpoint(a, n), s = this.createPoint(o.x, o.y);
+    const n = GeoMath.midpoint(a, o), s = this.createPoint(n.x, n.y);
     return s.dependencies = [t, r], s.color = { r: 0, g: 150, b: 0 }, s;
   }
   /** Create perpendicular */
   createPerpendicular(t, r, a) {
-    const n = this.getPoint(t), o = this.getPoint(r), s = this.getPoint(a);
-    if (!n || !o || !s)
+    const o = this.getPoint(t), n = this.getPoint(r), s = this.getPoint(a);
+    if (!o || !n || !s)
       return null;
-    const c = GeoMath.perpendicularThrough(n, o, s), l = this.createPoint(c.p2.x, c.p2.y), i = this.createLine(a, l.id);
+    const l = GeoMath.perpendicularThrough(o, n, s), x = this.createPoint(l.p2.x, l.p2.y), i = this.createLine(a, x.id);
     return i.dependencies = [t, r, a], i;
   }
   /** Create parallel */
   createParallel(t, r, a) {
-    const n = this.getPoint(t), o = this.getPoint(r), s = this.getPoint(a);
-    if (!n || !o || !s)
+    const o = this.getPoint(t), n = this.getPoint(r), s = this.getPoint(a);
+    if (!o || !n || !s)
       return null;
-    const c = GeoMath.parallelThrough(n, o, s), l = this.createPoint(c.p2.x, c.p2.y), i = this.createLine(a, l.id);
+    const l = GeoMath.parallelThrough(o, n, s), x = this.createPoint(l.p2.x, l.p2.y), i = this.createLine(a, x.id);
     return i.dependencies = [t, r, a], i;
   }
   /** Create intersection point */
   createIntersection(t, r) {
-    const a = this.elements.get(t), n = this.elements.get(r);
-    if (!a || !n)
+    const a = this.elements.get(t), o = this.elements.get(r);
+    if (!a || !o)
       return [];
-    const o = [], s = (i) => {
+    const n = [], s = (i) => {
       if (i.type === "line" || i.type === "segment" || i.type === "ray") {
-        const d = i, u = this.getPoint(d.point1Id ?? d.originId), h = this.getPoint(d.point2Id ?? d.throughId);
-        if (u && h)
-          return [u, h];
+        const d = i, g = this.getPoint(d.point1Id ?? d.originId), y = this.getPoint(d.point2Id ?? d.throughId);
+        if (g && y)
+          return [g, y];
       }
       return null;
-    }, c = s(a), l = s(n);
-    if (c && l) {
-      const i = GeoMath.lineIntersection(c[0], c[1], l[0], l[1]);
+    }, l = s(a), x = s(o);
+    if (l && x) {
+      const i = GeoMath.lineIntersection(l[0], l[1], x[0], x[1]);
       if (i) {
         const d = this.createPoint(i.x, i.y);
-        d.dependencies = [t, r], d.color = { r: 255, g: 0, b: 0 }, o.push(d);
+        d.dependencies = [t, r], d.color = { r: 255, g: 0, b: 0 }, n.push(d);
       }
     }
-    if (a.type === "circle" && l) {
+    if (a.type === "circle" && x) {
       const i = a, d = this.getPoint(i.centerId);
       if (d) {
-        const u = GeoMath.circleLineIntersection(d, i.radius, l[0], l[1]);
-        for (const h of u) {
-          const b = this.createPoint(h.x, h.y);
-          b.dependencies = [t, r], b.color = { r: 255, g: 0, b: 0 }, o.push(b);
+        const g = GeoMath.circleLineIntersection(d, i.radius, x[0], x[1]);
+        for (const y of g) {
+          const h = this.createPoint(y.x, y.y);
+          h.dependencies = [t, r], h.color = { r: 255, g: 0, b: 0 }, n.push(h);
         }
       }
     }
-    if (a.type === "circle" && n.type === "circle") {
-      const i = a, d = n, u = this.getPoint(i.centerId), h = this.getPoint(d.centerId);
-      if (u && h) {
-        const b = GeoMath.circleCircleIntersection(u, i.radius, h, d.radius);
-        for (const y of b) {
-          const g = this.createPoint(y.x, y.y);
-          g.dependencies = [t, r], g.color = { r: 255, g: 0, b: 0 }, o.push(g);
+    if (a.type === "circle" && o.type === "circle") {
+      const i = a, d = o, g = this.getPoint(i.centerId), y = this.getPoint(d.centerId);
+      if (g && y) {
+        const h = GeoMath.circleCircleIntersection(g, i.radius, y, d.radius);
+        for (const w of h) {
+          const p = this.createPoint(w.x, w.y);
+          p.dependencies = [t, r], p.color = { r: 255, g: 0, b: 0 }, n.push(p);
         }
       }
     }
-    return o;
+    return n;
   }
   /** Calculate measurement */
   calculateMeasurement(t, r) {
     switch (t) {
       case "distance": {
-        const a = this.getPoint(r[0]), n = this.getPoint(r[1]);
-        if (a && n)
-          return GeoMath.distance(a, n);
+        const a = this.getPoint(r[0]), o = this.getPoint(r[1]);
+        if (a && o)
+          return GeoMath.distance(a, o);
         break;
       }
       case "angle": {
-        const a = this.getPoint(r[0]), n = this.getPoint(r[1]), o = this.getPoint(r[2]);
-        if (a && n && o)
-          return GeoMath.angleDegrees(a, n, o);
+        const a = this.getPoint(r[0]), o = this.getPoint(r[1]), n = this.getPoint(r[2]);
+        if (a && o && n)
+          return GeoMath.angleDegrees(a, o, n);
         break;
       }
       case "area":
       case "perimeter": {
         const a = this.elements.get(r[0]);
         if ((a == null ? void 0 : a.type) === "polygon") {
-          const n = a.pointIds.map((o) => this.getPoint(o)).filter(Boolean);
-          return t === "area" ? GeoMath.polygonArea(n) : GeoMath.polygonPerimeter(n);
+          const o = a.pointIds.map((n) => this.getPoint(n)).filter(Boolean);
+          return t === "area" ? GeoMath.polygonArea(o) : GeoMath.polygonPerimeter(o);
         }
         break;
       }
@@ -3021,75 +3292,75 @@ class GeometryService {
   }
   /** Export to SVG */
   exportSVG(t, r, a) {
-    const n = [
+    const o = [
       `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${r}" viewBox="0 0 ${t} ${r}">`
     ];
-    n.push(
+    o.push(
       `<rect width="100%" height="100%" fill="rgb(${a.backgroundColor.r},${a.backgroundColor.g},${a.backgroundColor.b})"/>`
     );
-    const o = (s, c) => ({
+    const n = (s, l) => ({
       x: t / 2 + (s - a.centerX) * a.scale,
-      y: r / 2 - (c - a.centerY) * a.scale
+      y: r / 2 - (l - a.centerY) * a.scale
     });
     if (a.showGrid) {
-      n.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
+      o.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
       for (let s = Math.floor(-t / 2 / a.scale + a.centerX); s <= t / 2 / a.scale + a.centerX; s += a.gridSpacing) {
-        const c = o(s, 0);
-        n.push(`<line x1="${c.x}" y1="0" x2="${c.x}" y2="${r}"/>`);
+        const l = n(s, 0);
+        o.push(`<line x1="${l.x}" y1="0" x2="${l.x}" y2="${r}"/>`);
       }
       for (let s = Math.floor(-r / 2 / a.scale + a.centerY); s <= r / 2 / a.scale + a.centerY; s += a.gridSpacing) {
-        const c = o(0, s);
-        n.push(`<line x1="0" y1="${c.y}" x2="${t}" y2="${c.y}"/>`);
+        const l = n(0, s);
+        o.push(`<line x1="0" y1="${l.y}" x2="${t}" y2="${l.y}"/>`);
       }
-      n.push("</g>");
+      o.push("</g>");
     }
     if (a.showAxes) {
-      const s = o(0, 0);
-      n.push('<g stroke="var(--nice-text, #333)" stroke-width="1">'), n.push(`<line x1="0" y1="${s.y}" x2="${t}" y2="${s.y}"/>`), n.push(`<line x1="${s.x}" y1="0" x2="${s.x}" y2="${r}"/>`), n.push("</g>");
+      const s = n(0, 0);
+      o.push('<g stroke="var(--nice-text, #333)" stroke-width="1">'), o.push(`<line x1="0" y1="${s.y}" x2="${t}" y2="${s.y}"/>`), o.push(`<line x1="${s.x}" y1="0" x2="${s.x}" y2="${r}"/>`), o.push("</g>");
     }
     for (const s of this.getAllElements()) {
       if (!s.visible)
         continue;
-      const c = `rgb(${s.color.r},${s.color.g},${s.color.b})`;
+      const l = `rgb(${s.color.r},${s.color.g},${s.color.b})`;
       switch (s.type) {
         case "point": {
-          const l = o(s.x, s.y);
-          n.push(`<circle cx="${l.x}" cy="${l.y}" r="${s.size}" fill="${c}"/>`), s.label && n.push(`<text x="${l.x + 8}" y="${l.y - 8}" font-size="12">${s.label}</text>`);
+          const x = n(s.x, s.y);
+          o.push(`<circle cx="${x.x}" cy="${x.y}" r="${s.size}" fill="${l}"/>`), s.label && o.push(`<text x="${x.x + 8}" y="${x.y - 8}" font-size="12">${s.label}</text>`);
           break;
         }
         case "segment": {
-          const l = this.getPoint(s.point1Id), i = this.getPoint(s.point2Id);
-          if (l && i) {
-            const d = o(l.x, l.y), u = o(i.x, i.y);
-            n.push(
-              `<line x1="${d.x}" y1="${d.y}" x2="${u.x}" y2="${u.y}" stroke="${c}" stroke-width="${s.width}"/>`
+          const x = this.getPoint(s.point1Id), i = this.getPoint(s.point2Id);
+          if (x && i) {
+            const d = n(x.x, x.y), g = n(i.x, i.y);
+            o.push(
+              `<line x1="${d.x}" y1="${d.y}" x2="${g.x}" y2="${g.y}" stroke="${l}" stroke-width="${s.width}"/>`
             );
           }
           break;
         }
         case "circle": {
-          const l = this.getPoint(s.centerId);
-          if (l) {
-            const i = o(l.x, l.y), d = s.radius * a.scale, u = s.fill ? `rgba(${s.fill.r},${s.fill.g},${s.fill.b},${s.fill.a ?? 0.2})` : "none";
-            n.push(
-              `<circle cx="${i.x}" cy="${i.y}" r="${d}" fill="${u}" stroke="${c}" stroke-width="${s.width}"/>`
+          const x = this.getPoint(s.centerId);
+          if (x) {
+            const i = n(x.x, x.y), d = s.radius * a.scale, g = s.fill ? `rgba(${s.fill.r},${s.fill.g},${s.fill.b},${s.fill.a ?? 0.2})` : "none";
+            o.push(
+              `<circle cx="${i.x}" cy="${i.y}" r="${d}" fill="${g}" stroke="${l}" stroke-width="${s.width}"/>`
             );
           }
           break;
         }
         case "polygon": {
-          const l = s.pointIds.map((i) => this.getPoint(i)).filter(Boolean);
-          if (l.length > 0) {
-            const d = l.map((h) => o(h.x, h.y)).map((h, b) => `${b === 0 ? "M" : "L"}${h.x},${h.y}`).join(" ") + " Z", u = s.fill ? `rgba(${s.fill.r},${s.fill.g},${s.fill.b},${s.fill.a ?? 0.2})` : "none";
-            n.push(
-              `<path d="${d}" fill="${u}" stroke="${c}" stroke-width="${s.width}"/>`
+          const x = s.pointIds.map((i) => this.getPoint(i)).filter(Boolean);
+          if (x.length > 0) {
+            const d = x.map((y) => n(y.x, y.y)).map((y, h) => `${h === 0 ? "M" : "L"}${y.x},${y.y}`).join(" ") + " Z", g = s.fill ? `rgba(${s.fill.r},${s.fill.g},${s.fill.b},${s.fill.a ?? 0.2})` : "none";
+            o.push(
+              `<path d="${d}" fill="${g}" stroke="${l}" stroke-width="${s.width}"/>`
             );
           }
           break;
         }
       }
     }
-    return n.push("</svg>"), n.join(`
+    return o.push("</svg>"), o.join(`
 `);
   }
   generateId() {
@@ -3164,9 +3435,9 @@ function NiceGeometry({
   width: t = 800,
   height: r = 600,
   className: a,
-  style: n
+  style: o
 }) {
-  const [o, s] = useState([]), [c, l] = useState("point"), [i, d] = useState([]), [u, h] = useState({
+  const [n, s] = useState([]), [l, x] = useState("point"), [i, d] = useState([]), [g, y] = useState({
     centerX: 0,
     centerY: 0,
     scale: 40,
@@ -3176,26 +3447,26 @@ function NiceGeometry({
     snapToGrid: !0,
     snapToPoints: !0,
     backgroundColor: { r: 255, g: 255, b: 255 }
-  }), b = useCallback(() => {
+  }), h = useCallback(() => {
     s(e.getAllElements());
-  }, [e]), y = useCallback((m) => {
-    h((p) => ({ ...p, ...m }));
+  }, [e]), w = useCallback((f) => {
+    y((c) => ({ ...c, ...f }));
   }, []);
   useEffect(() => {
-    b();
-  }, [b]);
-  const g = {
+    h();
+  }, [h]);
+  const p = {
     service: e,
-    elements: o,
-    tool: c,
-    setTool: l,
-    view: u,
-    setView: y,
+    elements: n,
+    tool: l,
+    setTool: x,
+    view: g,
+    setView: w,
     selectedIds: i,
     setSelectedIds: d,
-    refresh: b
+    refresh: h
   };
-  return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: g, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles.container, ...n }, children: [
+  return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: p, 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 }),
@@ -3237,186 +3508,186 @@ function Toolbar() {
   )) });
 }
 function Canvas({ width: e, height: t }) {
-  const r = useRef(null), { service: a, elements: n, tool: o, view: s, selectedIds: c, setSelectedIds: l, refresh: i } = useGeometry(), [d, u] = useState([]), h = useCallback(
-    (m, p) => {
-      const x = (m - e / 2) / s.scale + s.centerX, w = -(p - t / 2) / s.scale + s.centerY;
+  const r = useRef(null), { service: a, elements: o, tool: n, view: s, selectedIds: l, setSelectedIds: x, refresh: i } = useGeometry(), [d, g] = useState([]), y = useCallback(
+    (f, c) => {
+      const u = (f - e / 2) / s.scale + s.centerX, b = -(c - t / 2) / s.scale + s.centerY;
       return s.snapToGrid ? {
-        x: Math.round(x / s.gridSpacing) * s.gridSpacing,
-        y: Math.round(w / s.gridSpacing) * s.gridSpacing
-      } : { x, y: w };
+        x: Math.round(u / s.gridSpacing) * s.gridSpacing,
+        y: Math.round(b / s.gridSpacing) * s.gridSpacing
+      } : { x: u, y: b };
     },
     [e, t, s]
-  ), b = useCallback(
-    (m, p) => ({
-      x: e / 2 + (m - s.centerX) * s.scale,
-      y: t / 2 - (p - s.centerY) * s.scale
+  ), h = useCallback(
+    (f, c) => ({
+      x: e / 2 + (f - s.centerX) * s.scale,
+      y: t / 2 - (c - s.centerY) * s.scale
     }),
     [e, t, s]
-  ), y = useCallback(
-    (m) => {
-      var w;
-      const p = (w = r.current) == null ? void 0 : w.getBoundingClientRect();
-      if (!p)
+  ), w = useCallback(
+    (f) => {
+      var b;
+      const c = (b = r.current) == null ? void 0 : b.getBoundingClientRect();
+      if (!c)
         return;
-      const x = h(m.clientX - p.left, m.clientY - p.top);
-      switch (o) {
+      const u = y(f.clientX - c.left, f.clientY - c.top);
+      switch (n) {
         case "point": {
-          a.createPoint(x.x, x.y), i();
+          a.createPoint(u.x, u.y), i();
           break;
         }
         case "segment":
         case "line":
         case "ray": {
-          const k = g(x);
+          const k = p(u);
           if (k)
-            u((f) => {
-              const v = [...f, k.id];
-              return v.length === 2 ? (o === "segment" ? a.createSegment(v[0], v[1]) : o === "line" ? a.createLine(v[0], v[1]) : o === "ray" && a.createRay(v[0], v[1]), i(), []) : v;
+            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]), i(), []) : v;
             });
           else {
-            const f = a.createPoint(x.x, x.y);
-            u((v) => {
-              const C = [...v, f.id];
-              return C.length === 2 ? (o === "segment" ? a.createSegment(C[0], C[1]) : o === "line" ? a.createLine(C[0], C[1]) : o === "ray" && a.createRay(C[0], C[1]), i(), []) : C;
+            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]), i(), []) : C;
             }), i();
           }
           break;
         }
         case "circle": {
-          const k = g(x);
+          const k = p(u);
           if (k)
-            u((f) => {
-              if (f.length === 0)
+            g((m) => {
+              if (m.length === 0)
                 return [k.id];
-              const v = a.getPoint(f[0]);
+              const v = a.getPoint(m[0]);
               if (v) {
-                const C = GeoMath.distance(v, x);
-                a.createCircle(f[0], C), i();
+                const C = GeoMath.distance(v, u);
+                a.createCircle(m[0], C), i();
               }
               return [];
             });
           else if (d.length === 1) {
-            const f = a.getPoint(d[0]);
-            if (f) {
-              const v = GeoMath.distance(f, x);
-              a.createCircle(d[0], v), i(), u([]);
+            const m = a.getPoint(d[0]);
+            if (m) {
+              const v = GeoMath.distance(m, u);
+              a.createCircle(d[0], v), i(), g([]);
             }
           } else {
-            const f = a.createPoint(x.x, x.y);
-            u([f.id]), i();
+            const m = a.createPoint(u.x, u.y);
+            g([m.id]), i();
           }
           break;
         }
         case "midpoint": {
-          const k = g(x);
-          k && u((f) => {
-            const v = [...f, k.id];
+          const k = p(u);
+          k && g((m) => {
+            const v = [...m, k.id];
             return v.length === 2 ? (a.createMidpoint(v[0], v[1]), i(), []) : v;
           });
           break;
         }
         case "select": {
-          const k = g(x);
-          l(k ? [k.id] : []);
+          const k = p(u);
+          x(k ? [k.id] : []);
           break;
         }
       }
     },
-    [o, a, i, h, d, l]
-  ), g = (m) => {
-    for (const x of n)
-      if (x.type === "point" && GeoMath.distance(x, m) < 0.5)
-        return x;
+    [n, a, i, y, d, x]
+  ), p = (f) => {
+    for (const u of o)
+      if (u.type === "point" && GeoMath.distance(u, f) < 0.5)
+        return u;
   };
   return useEffect(() => {
-    const m = r.current, p = m == null ? void 0 : m.getContext("2d");
-    if (!(!m || !p)) {
-      if (p.fillStyle = `rgb(${s.backgroundColor.r},${s.backgroundColor.g},${s.backgroundColor.b})`, p.fillRect(0, 0, e, t), s.showGrid) {
-        p.strokeStyle = "var(--nice-border, #e0e0e0)", p.lineWidth = 0.5;
-        const x = s.gridSpacing * s.scale, w = (e / 2 - s.centerX * s.scale) % x, k = (t / 2 + s.centerY * s.scale) % x;
-        for (let f = w; f < e; f += x)
-          p.beginPath(), p.moveTo(f, 0), p.lineTo(f, t), p.stroke();
-        for (let f = k; f < t; f += x)
-          p.beginPath(), p.moveTo(0, f), p.lineTo(e, f), p.stroke();
+    const f = r.current, c = f == null ? void 0 : f.getContext("2d");
+    if (!(!f || !c)) {
+      if (c.fillStyle = `rgb(${s.backgroundColor.r},${s.backgroundColor.g},${s.backgroundColor.b})`, c.fillRect(0, 0, e, t), s.showGrid) {
+        c.strokeStyle = "var(--nice-border, #e0e0e0)", c.lineWidth = 0.5;
+        const u = s.gridSpacing * s.scale, b = (e / 2 - s.centerX * s.scale) % u, k = (t / 2 + s.centerY * s.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 += u)
+          c.beginPath(), c.moveTo(0, m), c.lineTo(e, m), c.stroke();
       }
       if (s.showAxes) {
-        const x = b(0, 0);
-        p.strokeStyle = "var(--nice-text, #333)", p.lineWidth = 1, p.beginPath(), p.moveTo(0, x.y), p.lineTo(e, x.y), p.stroke(), p.beginPath(), p.moveTo(x.x, 0), p.lineTo(x.x, t), p.stroke();
+        const u = h(0, 0);
+        c.strokeStyle = "var(--nice-text, #333)", 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 n) {
-        if (!x.visible)
+      for (const u of o) {
+        if (!u.visible)
           continue;
-        const w = `rgb(${x.color.r},${x.color.g},${x.color.b})`, k = c.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 f = b(x.x, x.y);
-            p.beginPath(), p.arc(f.x, f.y, k ? x.size + 2 : x.size, 0, 2 * Math.PI), p.fillStyle = k ? "var(--nice-primary-hover, #1976d2)" : w, p.fill(), x.label && (p.fillStyle = "var(--nice-text, #333)", p.font = "12px sans-serif", p.fillText(x.label, f.x + 8, f.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 ? "var(--nice-primary-hover, #1976d2)" : b, c.fill(), u.label && (c.fillStyle = "var(--nice-text, #333)", c.font = "12px sans-serif", c.fillText(u.label, m.x + 8, m.y - 8));
             break;
           }
           case "segment": {
-            const f = a.getPoint(x.point1Id), v = a.getPoint(x.point2Id);
-            if (f && v) {
-              const C = b(f.x, f.y), S = b(v.x, v.y);
-              p.strokeStyle = w, p.lineWidth = x.width, p.beginPath(), p.moveTo(C.x, C.y), p.lineTo(S.x, S.y), p.stroke();
+            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 = u.width, c.beginPath(), c.moveTo(C.x, C.y), c.lineTo(S.x, S.y), c.stroke();
             }
             break;
           }
           case "line": {
-            const f = a.getPoint(x.point1Id), v = a.getPoint(x.point2Id);
-            if (f && v) {
-              const C = v.x - f.x, S = v.y - f.y, $ = -1e3, j = 1e3, P = b(f.x + $ * C, f.y + $ * S), B = b(f.x + j * C, f.y + j * S);
-              p.strokeStyle = w, p.lineWidth = x.width, p.beginPath(), p.moveTo(P.x, P.y), p.lineTo(B.x, B.y), p.stroke();
+            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, $ = 1e3, j = h(m.x + P * C, m.y + P * S), B = h(m.x + $ * C, m.y + $ * S);
+              c.strokeStyle = b, c.lineWidth = u.width, c.beginPath(), c.moveTo(j.x, j.y), c.lineTo(B.x, B.y), c.stroke();
             }
             break;
           }
           case "circle": {
-            const f = a.getPoint(x.centerId);
-            if (f) {
-              const v = b(f.x, f.y), C = x.radius * s.scale;
-              p.beginPath(), p.arc(v.x, v.y, C, 0, 2 * Math.PI), x.fill && (p.fillStyle = `rgba(${x.fill.r},${x.fill.g},${x.fill.b},${x.fill.a ?? 0.2})`, p.fill()), p.strokeStyle = w, p.lineWidth = x.width, p.stroke();
+            const m = a.getPoint(u.centerId);
+            if (m) {
+              const v = h(m.x, m.y), C = u.radius * s.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 f = x.pointIds.map((v) => a.getPoint(v)).filter(Boolean);
-            if (f.length > 0) {
-              p.beginPath();
-              const v = b(f[0].x, f[0].y);
-              p.moveTo(v.x, v.y);
-              for (let C = 1; C < f.length; C++) {
-                const S = b(f[C].x, f[C].y);
-                p.lineTo(S.x, S.y);
+            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);
+              c.moveTo(v.x, v.y);
+              for (let C = 1; C < m.length; C++) {
+                const S = h(m[C].x, m[C].y);
+                c.lineTo(S.x, S.y);
               }
-              p.closePath(), x.fill && (p.fillStyle = `rgba(${x.fill.r},${x.fill.g},${x.fill.b},${x.fill.a ?? 0.2})`, p.fill()), p.strokeStyle = w, p.lineWidth = x.width, p.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;
           }
         }
       }
       if (d.length > 0) {
-        p.fillStyle = "rgba(25, 118, 210, 0.3)";
-        for (const x of d) {
-          const w = a.getPoint(x);
-          if (w) {
-            const k = b(w.x, w.y);
-            p.beginPath(), p.arc(k.x, k.y, 12, 0, 2 * Math.PI), p.fill();
+        c.fillStyle = "rgba(25, 118, 210, 0.3)";
+        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();
           }
         }
       }
     }
-  }, [n, s, e, t, c, d, a, b]), /* @__PURE__ */ jsx(
+  }, [o, s, e, t, l, d, a, h]), /* @__PURE__ */ jsx(
     "canvas",
     {
       ref: r,
       width: e,
       height: t,
       style: styles.canvas,
-      onClick: y
+      onClick: w
     }
   );
 }
 function StatusBar({ width: e, height: t }) {
-  const { tool: r, elements: a, view: n, service: o } = useGeometry(), [s, c] = useState(null), l = {
+  const { tool: r, elements: a, view: o, service: n } = useGeometry(), [s, l] = useState(null), x = {
     select: "Select",
     point: "Point",
     line: "Line",
@@ -3442,7 +3713,7 @@ function StatusBar({ width: e, height: t }) {
   return /* @__PURE__ */ jsxs("div", { style: styles.statusBar, children: [
     /* @__PURE__ */ jsxs("span", { children: [
       "Tool: ",
-      l[r]
+      x[r]
     ] }),
     /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
     /* @__PURE__ */ jsxs("span", { children: [
@@ -3457,7 +3728,7 @@ function StatusBar({ width: e, height: t }) {
     /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
     /* @__PURE__ */ jsxs("span", { children: [
       "Scale: ",
-      n.scale.toFixed(1),
+      o.scale.toFixed(1),
       "x"
     ] })
   ] });
@@ -3477,6 +3748,7 @@ export {
   NiceCalculator,
   NiceGeometry,
   NiceGraphPlotter,
+  NiceI18nProvider,
   NiceMathEditor,
   createCalculatorService,
   createGeometryService,
@@ -3487,5 +3759,6 @@ export {
   useCalculator,
   useGeometry,
   useGraph,
-  useMathEditor
+  useMathEditor,
+  useNiceTranslation
 };