@nice2dev/ui-math 1.2.0 → 1.2.1

package/dist/index.mjs

@@ -1,11 +1,11 @@
-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 { NiceAppShell, NiceIcon } from "@nice2dev/ui";
-import { NiceTutorialButton, resolveTutorial, resolveCssColor, NiceIcon as NiceIcon$1 } from "@nice2dev/ui-core";
-import React, { createContext, useMemo, useContext, useState, useRef, useCallback, useEffect } from "react";
-const translations = {
+var pe = Object.defineProperty;
+var ue = (e, t, r) => t in e ? pe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var T = (e, t, r) => ue(e, typeof t != "symbol" ? t + "" : t, r);
+import { jsx as d, jsxs as v, Fragment as oe } from "react/jsx-runtime";
+import { NiceAppShell as ge, NiceIcon as X } from "@nice2dev/ui";
+import { NiceTutorialButton as xe, resolveTutorial as me, resolveCssColor as I, NiceIcon as G } from "@nice2dev/ui-core";
+import ye, { useMemo as he, useContext as j, createContext as F, useState as P, useRef as U, useCallback as R, useEffect as V } from "react";
+const J = {
   en: {
     "calculator.matrixA": "Matrix A",
     "calculator.matrixB": "Matrix B",
@@ -23,7 +23,10 @@ const translations = {
     "editor.recognizing": "Recognizing...",
     "editor.latexInput": "LaTeX Input",
     "editor.handwriting": "Handwriting",
-    "editor.handwritingNote": "Draw your equation above. Handwriting recognition requires external API integration."
+    "editor.handwritingNote": "Draw your equation above. Handwriting recognition requires external API integration.",
+    "editor.templates": "Templates",
+    "editor.copyLatex": "Copy LaTeX",
+    "plotter.close": "Close"
   },
   pl: {
     "calculator.matrixA": "Macierz A",
@@ -42,7 +45,10 @@ const translations = {
     "editor.recognizing": "Rozpoznawanie...",
     "editor.latexInput": "Wpis LaTeX",
     "editor.handwriting": "Pismo odręczne",
-    "editor.handwritingNote": "Narysuj równanie powyżej. Rozpoznawanie pisma wymaga zewnętrznej integracji API."
+    "editor.handwritingNote": "Narysuj równanie powyżej. Rozpoznawanie pisma wymaga zewnętrznej integracji API.",
+    "editor.templates": "Szablony",
+    "editor.copyLatex": "Kopiuj LaTeX",
+    "plotter.close": "Zamknij"
   },
   de: {
     "calculator.matrixA": "Matrix A",
@@ -61,7 +67,10 @@ const translations = {
     "editor.recognizing": "Erkennung läuft...",
     "editor.latexInput": "LaTeX-Eingabe",
     "editor.handwriting": "Handschrift",
-    "editor.handwritingNote": "Zeichnen Sie Ihre Gleichung oben. Die Handschrifterkennung erfordert eine externe API-Integration."
+    "editor.handwritingNote": "Zeichnen Sie Ihre Gleichung oben. Die Handschrifterkennung erfordert eine externe API-Integration.",
+    "editor.templates": "Vorlagen",
+    "editor.copyLatex": "LaTeX kopieren",
+    "plotter.close": "Schließen"
   },
   fr: {
     "calculator.matrixA": "Matrice A",
@@ -80,7 +89,10 @@ const translations = {
     "editor.recognizing": "Reconnaissance...",
     "editor.latexInput": "Saisie LaTeX",
     "editor.handwriting": "Écriture manuscrite",
-    "editor.handwritingNote": "Dessinez votre équation ci-dessus. La reconnaissance d'écriture nécessite une intégration API externe."
+    "editor.handwritingNote": "Dessinez votre équation ci-dessus. La reconnaissance d'écriture nécessite une intégration API externe.",
+    "editor.templates": "Modèles",
+    "editor.copyLatex": "Copier le LaTeX",
+    "plotter.close": "Fermer"
   },
   es: {
     "calculator.matrixA": "Matriz A",
@@ -99,7 +111,10 @@ const translations = {
     "editor.recognizing": "Reconociendo...",
     "editor.latexInput": "Entrada LaTeX",
     "editor.handwriting": "Escritura a mano",
-    "editor.handwritingNote": "Dibuja tu ecuación arriba. El reconocimiento de escritura requiere integración con una API externa."
+    "editor.handwritingNote": "Dibuja tu ecuación arriba. El reconocimiento de escritura requiere integración con una API externa.",
+    "editor.templates": "Plantillas",
+    "editor.copyLatex": "Copiar LaTeX",
+    "plotter.close": "Cerrar"
   },
   it: {
     "calculator.matrixA": "Matrice A",
@@ -118,7 +133,10 @@ const translations = {
     "editor.recognizing": "Riconoscimento...",
     "editor.latexInput": "Input LaTeX",
     "editor.handwriting": "Scrittura a mano",
-    "editor.handwritingNote": "Disegna la tua equazione qui sopra. Il riconoscimento della scrittura richiede un’integrazione API esterna."
+    "editor.handwritingNote": "Disegna la tua equazione qui sopra. Il riconoscimento della scrittura richiede un’integrazione API esterna.",
+    "editor.templates": "Modelli",
+    "editor.copyLatex": "Copia LaTeX",
+    "plotter.close": "Chiudi"
   },
   pt: {
     "calculator.matrixA": "Matriz A",
@@ -137,7 +155,10 @@ const translations = {
     "editor.recognizing": "A reconhecer...",
     "editor.latexInput": "Entrada LaTeX",
     "editor.handwriting": "Escrita à mão",
-    "editor.handwritingNote": "Desenhe a sua equação acima. O reconhecimento de escrita requer integração com uma API externa."
+    "editor.handwritingNote": "Desenhe a sua equação acima. O reconhecimento de escrita requer integração com uma API externa.",
+    "editor.templates": "Modelos",
+    "editor.copyLatex": "Copiar LaTeX",
+    "plotter.close": "Fechar"
   },
   cs: {
     "calculator.matrixA": "Matice A",
@@ -156,7 +177,10 @@ const translations = {
     "editor.recognizing": "Rozpoznávání...",
     "editor.latexInput": "Zadání LaTeX",
     "editor.handwriting": "Rukopis",
-    "editor.handwritingNote": "Nakreslete svou rovnici výše. Rozpoznávání rukopisu vyžaduje externí integraci API."
+    "editor.handwritingNote": "Nakreslete svou rovnici výše. Rozpoznávání rukopisu vyžaduje externí integraci API.",
+    "editor.templates": "Šablony",
+    "editor.copyLatex": "Kopírovat LaTeX",
+    "plotter.close": "Zavřít"
   },
   uk: {
     "calculator.matrixA": "Матриця A",
@@ -175,23 +199,26 @@ const translations = {
     "editor.recognizing": "Розпізнавання...",
     "editor.latexInput": "Введення LaTeX",
     "editor.handwriting": "Рукопис",
-    "editor.handwritingNote": "Намалюйте своє рівняння вище. Розпізнавання рукопису потребує зовнішньої інтеграції з API."
+    "editor.handwritingNote": "Намалюйте своє рівняння вище. Розпізнавання рукопису потребує зовнішньої інтеграції з API.",
+    "editor.templates": "Шаблони",
+    "editor.copyLatex": "Копіювати LaTeX",
+    "plotter.close": "Закрити"
   }
-}, I18nContext = createContext({
+}, ae = /* @__PURE__ */ F({
   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: (i, l) => o[i] ?? l ?? i };
+function Qe({ locale: e = "en", overrides: t, children: r }) {
+  const o = he(() => {
+    const a = { ...J.en, ...J[e], ...t };
+    return { locale: e, t: (i, c) => a[i] ?? c ?? i };
   }, [e, t]);
-  return React.createElement(I18nContext.Provider, { value: a }, r);
+  return ye.createElement(ae.Provider, { value: o }, r);
 }
-function useNiceTranslation() {
-  return useContext(I18nContext);
+function L() {
+  return j(ae);
 }
-const MATH_EDITOR_TOUR = [
+const fe = [
   {
     target: ".nice-math-editor",
     titleKey: "tutorial.mathEditor.intro.title",
@@ -200,7 +227,7 @@ const MATH_EDITOR_TOUR = [
     content: "Write equations as LaTeX or insert symbols from the palette; switch to handwriting input, and preview the rendered formula live.",
     placement: "auto"
   }
-], MATH_SYMBOLS = [
+], be = [
   // Greek lowercase
   { name: "alpha", latex: "\\alpha", category: "greek", preview: "α" },
   { name: "beta", latex: "\\beta", category: "greek", preview: "β" },
@@ -377,10 +404,10 @@ const MATH_EDITOR_TOUR = [
     preview: "{ }"
   }
 ];
-function getSymbolsByCategory(e) {
-  return MATH_SYMBOLS.filter((t) => t.category === e);
+function ve(e) {
+  return be.filter((t) => t.category === e);
 }
-const EQUATION_TEMPLATES = [
+const we = [
   // Basic
   { name: "Fraction", latex: "\\frac{a}{b}", category: "basic" },
   { name: "Square root", latex: "\\sqrt{x}", category: "basic" },
@@ -439,11 +466,11 @@ const EQUATION_TEMPLATES = [
     category: "physics"
   }
 ];
-class MathEditorService {
+class ke {
   constructor(t = {}) {
-    M(this, "equations", /* @__PURE__ */ new Map());
-    M(this, "config");
-    M(this, "nextNumber");
+    T(this, "equations", /* @__PURE__ */ new Map());
+    T(this, "config");
+    T(this, "nextNumber");
     this.config = {
       enableNumbering: t.enableNumbering ?? !0,
       startNumber: t.startNumber ?? 1,
@@ -452,7 +479,7 @@ class MathEditorService {
   }
   /** Create new equation */
   createEquation(t, r) {
-    const a = {
+    const o = {
       id: this.generateId(),
       latex: t,
       label: r,
@@ -460,17 +487,17 @@ class MathEditorService {
       createdAt: (/* @__PURE__ */ new Date()).toISOString(),
       updatedAt: (/* @__PURE__ */ new Date()).toISOString()
     };
-    return this.equations.set(a.id, a), a;
+    return this.equations.set(o.id, o), o;
   }
   /** Update equation */
-  updateEquation(t, r, a) {
-    const o = this.equations.get(t);
-    if (!o)
+  updateEquation(t, r, o) {
+    const a = this.equations.get(t);
+    if (!a)
       throw new Error(`Equation not found: ${t}`);
     const n = {
-      ...o,
+      ...a,
       latex: r,
-      label: a ?? o.label,
+      label: o ?? a.label,
       updatedAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     return this.equations.set(t, n), n;
@@ -506,14 +533,14 @@ class MathEditorService {
   }
   /** Parse LaTeX and extract equations */
   parseLatex(t) {
-    const r = [], a = /\\\[([\s\S]*?)\\\]/g;
-    let o;
-    for (; (o = a.exec(t)) !== null; )
-      r.push(this.createEquation(o[1].trim()));
+    const r = [], o = /\\\[([\s\S]*?)\\\]/g;
+    let a;
+    for (; (a = o.exec(t)) !== null; )
+      r.push(this.createEquation(a[1].trim()));
     const n = /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g;
-    for (; (o = n.exec(t)) !== null; ) {
-      const i = o[1].match(/\\label\{([^}]+)\}/), l = o[1].replace(/\\label\{[^}]+\}/, "").trim();
-      r.push(this.createEquation(l, i == null ? void 0 : i[1]));
+    for (; (a = n.exec(t)) !== null; ) {
+      const i = a[1].match(/\\label\{([^}]+)\}/), c = a[1].replace(/\\label\{[^}]+\}/, "").trim();
+      r.push(this.createEquation(c, i == null ? void 0 : i[1]));
     }
     return r;
   }
@@ -521,24 +548,24 @@ class MathEditorService {
     return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
   }
 }
-function createMathEditorService(e) {
-  return new MathEditorService(e);
+function Je(e) {
+  return new ke(e);
 }
-async function recognizeHandwriting(e) {
+async function Ce(e) {
   return await new Promise((r) => setTimeout(r, 500)), {
-    latex: e.reduce((r, a) => r + a.points.length, 0) > 50 ? "\\sqrt{x^2 + y^2}" : "x",
+    latex: e.reduce((r, o) => r + o.points.length, 0) > 50 ? "\\sqrt{x^2 + y^2}" : "x",
     confidence: 0.85,
     alternatives: ["x", "X", "\\times"]
   };
 }
-const MathEditorContext = createContext(null);
-function useMathEditor() {
-  const e = useContext(MathEditorContext);
+const ne = /* @__PURE__ */ F(null);
+function W() {
+  const e = j(ne);
   if (!e)
     throw new Error("useMathEditor must be used within MathEditorProvider");
   return e;
 }
-const styles$3 = {
+const A = {
   toolbar: {
     display: "flex",
     gap: "8px",
@@ -621,110 +648,110 @@ const styles$3 = {
     cursor: "crosshair"
   }
 };
-function NiceMathEditor({
+function et({
   service: e,
   initialLatex: t = "",
   onChange: r,
-  className: a,
-  style: o,
+  className: o,
+  style: a,
   tutorial: n
 }) {
-  const { t: i } = useNiceTranslation(), [l, p] = useState(t), [s, d] = useState("input"), g = useRef(null), y = useCallback(
-    (f) => {
-      p(f), r == null || r(f);
+  const { t: i } = L(), [c, u] = P(t), [s, p] = P("input"), m = U(null), y = R(
+    (b) => {
+      u(b), r == null || r(b);
     },
     [r]
-  ), h = useCallback(
-    (f) => {
-      const c = g.current;
-      if (!c) {
-        y(l + f);
+  ), f = R(
+    (b) => {
+      const l = m.current;
+      if (!l) {
+        y(c + b);
         return;
       }
-      const u = c.selectionStart, b = c.selectionEnd, k = l.slice(0, u) + f + l.slice(b);
-      y(k), setTimeout(() => {
-        c.focus(), c.selectionStart = c.selectionEnd = u + f.length;
+      const g = l.selectionStart, w = l.selectionEnd, M = c.slice(0, g) + b + c.slice(w);
+      y(M), setTimeout(() => {
+        l.focus(), l.selectionStart = l.selectionEnd = g + b.length;
       }, 0);
     },
-    [l, y]
-  ), w = useCallback(
-    (f) => {
-      h(f.latex);
+    [c, y]
+  ), C = R(
+    (b) => {
+      f(b.latex);
     },
-    [h]
+    [f]
   ), x = {
     service: e,
-    latex: l,
+    latex: c,
     setLatex: y,
-    insertSymbol: h,
-    insertTemplate: w,
+    insertSymbol: f,
+    insertTemplate: C,
     mode: s,
-    setMode: d
+    setMode: p
   };
-  return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value: x, children: /* @__PURE__ */ jsxs(
-    NiceAppShell,
+  return /* @__PURE__ */ d(ne.Provider, { value: x, children: /* @__PURE__ */ v(
+    ge,
     {
       flush: !0,
-      className: `nice-math-editor ${a ?? ""}`,
-      style: { position: "relative", ...o },
-      toolbar: /* @__PURE__ */ jsx(Toolbar$1, {}),
-      sidebar: /* @__PURE__ */ jsx(SymbolPalette, {}),
+      className: `nice-math-editor ${o ?? ""}`,
+      style: { position: "relative", ...a },
+      toolbar: /* @__PURE__ */ d(Pe, {}),
+      sidebar: /* @__PURE__ */ d(Me, {}),
       children: [
-        /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ jsx(NiceTutorialButton, { steps: resolveTutorial(n, MATH_EDITOR_TOUR) }) }),
-        /* @__PURE__ */ jsx("div", { style: styles$3.editor, children: s === "input" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ d("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ d(xe, { steps: me(n, fe) }) }),
+        /* @__PURE__ */ d("div", { style: A.editor, children: s === "input" ? /* @__PURE__ */ v(oe, { children: [
+          /* @__PURE__ */ d(
             "textarea",
             {
-              ref: g,
-              value: l,
-              onChange: (f) => y(f.target.value),
+              ref: m,
+              value: c,
+              onChange: (b) => y(b.target.value),
               placeholder: i("editor.latexPlaceholder", "Enter LaTeX equation..."),
-              style: styles$3.input
+              style: A.input
             }
           ),
-          /* @__PURE__ */ jsx(LatexPreview, { latex: l })
-        ] }) : /* @__PURE__ */ jsx(HandwritingCanvas, {}) })
+          /* @__PURE__ */ d(Se, { latex: c })
+        ] }) : /* @__PURE__ */ d(Be, {}) })
       ]
     }
   ) });
 }
-function Toolbar$1() {
-  const { t: e } = useNiceTranslation(), { mode: t, setMode: r, latex: a, insertTemplate: o } = useMathEditor(), [n, i] = useState(!1);
-  return /* @__PURE__ */ jsxs("div", { style: styles$3.toolbar, children: [
-    /* @__PURE__ */ jsxs(
+function Pe() {
+  const { t: e } = L(), { mode: t, setMode: r, latex: o, insertTemplate: a } = W(), [n, i] = P(!1);
+  return /* @__PURE__ */ v("div", { style: A.toolbar, children: [
+    /* @__PURE__ */ v(
       "button",
       {
         onClick: () => r("input"),
         style: {
-          ...styles$3.button,
+          ...A.button,
           backgroundColor: t === "input" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg-tertiary, #9e9e9e)",
           // the inactive state sits on a theme surface: theme text, not the button's white
           color: t === "input" ? "var(--nice-color-white, #fff)" : "var(--nice-text-primary, #fff)"
         },
         children: [
-          /* @__PURE__ */ jsx(NiceIcon, { name: "keyboard", size: 14 }),
+          /* @__PURE__ */ d(X, { name: "keyboard", size: 14 }),
           " ",
           e("editor.latexInput", "LaTeX Input")
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ v(
       "button",
       {
         onClick: () => r("handwriting"),
         style: {
-          ...styles$3.button,
+          ...A.button,
           backgroundColor: t === "handwriting" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg-tertiary, #9e9e9e)",
           color: t === "handwriting" ? "var(--nice-color-white, #fff)" : "var(--nice-text-primary, #fff)"
         },
         children: [
-          /* @__PURE__ */ jsx(NiceIcon, { name: "pen", size: 14 }),
+          /* @__PURE__ */ d(X, { name: "pen", size: 14 }),
           " ",
           e("editor.handwriting", "Handwriting")
         ]
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ d(
       "div",
       {
         style: {
@@ -734,13 +761,15 @@ function Toolbar$1() {
         }
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxs("button", { onClick: () => i(!n), style: styles$3.button, children: [
-        /* @__PURE__ */ jsx(NiceIcon, { name: "ruler", size: 14 }),
-        " Templates ",
-        /* @__PURE__ */ jsx(NiceIcon, { name: "chevron-down", size: 12 })
+    /* @__PURE__ */ v("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ v("button", { onClick: () => i(!n), style: A.button, children: [
+        /* @__PURE__ */ d(X, { name: "ruler", size: 14 }),
+        " ",
+        e("editor.templates", "Templates"),
+        " ",
+        /* @__PURE__ */ d(X, { name: "chevron-down", size: 12 })
       ] }),
-      n && /* @__PURE__ */ jsx(
+      n && /* @__PURE__ */ d(
         "div",
         {
           style: {
@@ -757,13 +786,13 @@ function Toolbar$1() {
             overflow: "auto"
           },
           children: ["basic", "calculus", "algebra", "geometry", "statistics", "physics"].map(
-            (l) => /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { style: styles$3.categoryHeader, children: l }),
-              EQUATION_TEMPLATES.filter((p) => p.category === l).map((p) => /* @__PURE__ */ jsxs(
+            (c) => /* @__PURE__ */ v("div", { children: [
+              /* @__PURE__ */ d("div", { style: A.categoryHeader, children: c }),
+              we.filter((u) => u.category === c).map((u) => /* @__PURE__ */ v(
                 "div",
                 {
                   onClick: () => {
-                    o(p), i(!1);
+                    a(u), i(!1);
                   },
                   style: {
                     padding: "8px 12px",
@@ -773,8 +802,8 @@ function Toolbar$1() {
                   onMouseOver: (s) => s.target.style.backgroundColor = "var(--nice-bg-secondary, #f5f5f5)",
                   onMouseOut: (s) => s.target.style.backgroundColor = "transparent",
                   children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: p.name }),
-                    /* @__PURE__ */ jsxs(
+                    /* @__PURE__ */ d("div", { style: { fontWeight: 500 }, children: u.name }),
+                    /* @__PURE__ */ v(
                       "div",
                       {
                         style: {
@@ -783,36 +812,37 @@ function Toolbar$1() {
                           fontFamily: "monospace"
                         },
                         children: [
-                          p.latex.substring(0, 40),
-                          p.latex.length > 40 ? "..." : ""
+                          u.latex.substring(0, 40),
+                          u.latex.length > 40 ? "..." : ""
                         ]
                       }
                     )
                   ]
                 },
-                p.name
+                u.name
               ))
-            ] }, l)
+            ] }, c)
           )
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ d("div", { style: { flex: 1 } }),
+    /* @__PURE__ */ v(
       "button",
       {
-        onClick: () => navigator.clipboard.writeText(a),
-        style: { ...styles$3.button, backgroundColor: "var(--nice-success, #4caf50)" },
+        onClick: () => navigator.clipboard.writeText(o),
+        style: { ...A.button, backgroundColor: "var(--nice-success, #4caf50)" },
         children: [
-          /* @__PURE__ */ jsx(NiceIcon, { name: "copy", size: 14 }),
-          " Copy LaTeX"
+          /* @__PURE__ */ d(X, { name: "copy", size: 14 }),
+          " ",
+          e("editor.copyLatex", "Copy LaTeX")
         ]
       }
     )
   ] });
 }
-function SymbolPalette() {
-  const { insertSymbol: e } = useMathEditor(), [t, r] = useState("greek"), a = [
+function Me() {
+  const { insertSymbol: e } = W(), [t, r] = P("greek"), o = [
     "greek",
     "operators",
     "relations",
@@ -824,9 +854,9 @@ function SymbolPalette() {
     "logic",
     "calculus",
     "matrices"
-  ], 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((n) => /* @__PURE__ */ jsx(
+  ], a = ve(t);
+  return /* @__PURE__ */ v("div", { style: A.sidebar, children: [
+    /* @__PURE__ */ d("div", { style: { display: "flex", flexWrap: "wrap", padding: "8px", gap: "4px" }, children: o.map((n) => /* @__PURE__ */ d(
       "button",
       {
         onClick: () => r(n),
@@ -843,11 +873,11 @@ function SymbolPalette() {
       },
       n
     )) }),
-    /* @__PURE__ */ jsx("div", { style: styles$3.symbolGrid, children: o.map((n) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ d("div", { style: A.symbolGrid, children: a.map((n) => /* @__PURE__ */ d(
       "button",
       {
         onClick: () => e(n.latex),
-        style: styles$3.symbolButton,
+        style: A.symbolButton,
         title: `${n.name}: ${n.latex}`,
         children: n.preview || n.latex
       },
@@ -855,122 +885,122 @@ function SymbolPalette() {
     )) })
   ] });
 }
-function LatexPreview({ latex: e }) {
-  return /* @__PURE__ */ jsxs("div", { style: styles$3.preview, children: [
-    /* @__PURE__ */ jsx(
+function Se({ latex: e }) {
+  return /* @__PURE__ */ v("div", { style: A.preview, children: [
+    /* @__PURE__ */ d(
       "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)" })
+    /* @__PURE__ */ d("code", { style: { fontSize: "16px" }, children: e || "(empty)" })
   ] });
 }
-function HandwritingCanvas() {
-  const { t: e } = useNiceTranslation(), { setLatex: t, setMode: r } = useMathEditor(), a = useRef(null), [o, n] = useState([]), [i, l] = useState([]), [p, s] = useState(!1), [d, g] = useState(!1), y = (c) => {
-    const u = a.current;
-    if (!u)
+function Be() {
+  const { t: e } = L(), { setLatex: t, setMode: r } = W(), o = U(null), [a, n] = P([]), [i, c] = P([]), [u, s] = P(!1), [p, m] = P(!1), y = (l) => {
+    const g = o.current;
+    if (!g)
       return;
     s(!0);
-    const b = u.getBoundingClientRect();
-    l([
+    const w = g.getBoundingClientRect();
+    c([
       {
-        x: c.clientX - b.left,
-        y: c.clientY - b.top,
-        pressure: c.pressure,
+        x: l.clientX - w.left,
+        y: l.clientY - w.top,
+        pressure: l.pressure,
         timestamp: Date.now()
       }
     ]);
-  }, h = (c) => {
-    if (!p)
+  }, f = (l) => {
+    if (!u)
       return;
-    const u = a.current, b = u == null ? void 0 : u.getContext("2d");
-    if (!u || !b)
+    const g = o.current, w = g == null ? void 0 : g.getContext("2d");
+    if (!g || !w)
       return;
-    const k = u.getBoundingClientRect(), m = {
-      x: c.clientX - k.left,
-      y: c.clientY - k.top,
-      pressure: c.pressure,
+    const M = g.getBoundingClientRect(), h = {
+      x: l.clientX - M.left,
+      y: l.clientY - M.top,
+      pressure: l.pressure,
       timestamp: Date.now()
     };
-    if (l((v) => [...v, m]), i.length > 0) {
-      const v = i[i.length - 1];
-      b.beginPath(), b.moveTo(v.x, v.y), b.lineTo(m.x, m.y), b.strokeStyle = resolveCssColor("var(--nice-text, #000)", b.canvas), b.lineWidth = 2, b.lineCap = "round", b.stroke();
+    if (c((k) => [...k, h]), i.length > 0) {
+      const k = i[i.length - 1];
+      w.beginPath(), w.moveTo(k.x, k.y), w.lineTo(h.x, h.y), w.strokeStyle = I("var(--nice-text, #000)", w.canvas), w.lineWidth = 2, w.lineCap = "round", w.stroke();
     }
-  }, w = () => {
-    if (p) {
+  }, C = () => {
+    if (u) {
       if (s(!1), i.length > 1) {
-        const c = {
+        const l = {
           id: Date.now().toString(),
           points: [...i]
         };
-        n((u) => [...u, c]);
+        n((g) => [...g, l]);
       }
-      l([]);
+      c([]);
     }
   }, x = () => {
-    const c = a.current, u = c == null ? void 0 : c.getContext("2d");
-    u && c && u.clearRect(0, 0, c.width, c.height), n([]);
-  }, f = async () => {
-    if (o.length !== 0) {
-      g(!0);
+    const l = o.current, g = l == null ? void 0 : l.getContext("2d");
+    g && l && g.clearRect(0, 0, l.width, l.height), n([]);
+  }, b = async () => {
+    if (a.length !== 0) {
+      m(!0);
       try {
-        const c = await recognizeHandwriting(o);
-        t(c.latex), r("input");
+        const l = await Ce(a);
+        t(l.latex), r("input");
       } finally {
-        g(!1);
+        m(!1);
       }
     }
   };
-  return useEffect(() => {
-    const c = a.current;
-    c && (c.width = c.offsetWidth, c.height = 200);
-  }, []), /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
+  return V(() => {
+    const l = o.current;
+    l && (l.width = l.offsetWidth, l.height = 200);
+  }, []), /* @__PURE__ */ v("div", { children: [
+    /* @__PURE__ */ d(
       "canvas",
       {
-        ref: a,
-        style: styles$3.canvas,
+        ref: o,
+        style: A.canvas,
         onPointerDown: y,
-        onPointerMove: h,
-        onPointerUp: w,
-        onPointerLeave: w
+        onPointerMove: f,
+        onPointerUp: C,
+        onPointerLeave: C
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "12px" }, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ v("div", { style: { display: "flex", gap: "8px", marginTop: "12px" }, children: [
+      /* @__PURE__ */ d(
         "button",
         {
           onClick: x,
-          style: { ...styles$3.button, backgroundColor: "var(--nice-danger, #f44336)" },
+          style: { ...A.button, backgroundColor: "var(--nice-danger, #f44336)" },
           children: e("editor.clear", "Clear")
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ d(
         "button",
         {
-          onClick: f,
-          disabled: o.length === 0 || d,
-          style: styles$3.button,
-          children: d ? e("editor.recognizing", "Recognizing...") : e("editor.recognize", "Recognize")
+          onClick: b,
+          disabled: a.length === 0 || p,
+          style: A.button,
+          children: p ? e("editor.recognizing", "Recognizing...") : e("editor.recognize", "Recognize")
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", marginTop: "8px" }, children: e(
+    /* @__PURE__ */ d("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 = {
+const $e = {
   pi: Math.PI,
   PI: Math.PI,
   e: Math.E,
   E: Math.E,
   phi: (1 + Math.sqrt(5)) / 2,
   tau: Math.PI * 2
-}, mathFunctions = {
+}, Re = {
   sin: Math.sin,
   cos: Math.cos,
   tan: Math.tan,
@@ -1002,15 +1032,19 @@ const mathConstants = {
   cot: (e) => 1 / Math.tan(e),
   ln: Math.log
 };
-class ExpressionParser {
-  constructor() {
-    M(this, "pos", 0);
-    M(this, "expr", "");
+class ie {
+  constructor(t = {}) {
+    T(this, "pos", 0);
+    T(this, "expr", "");
+    T(this, "options");
+    this.options = t;
   }
   parse(t) {
-    this.expr = t.replace(/\s+/g, ""), this.pos = 0;
+    this.expr = t.replace(/\s+/g, "").replace(/×/g, "*").replace(/÷/g, "/").replace(/−/g, "-").replace(/π/g, "pi").replace(/√(\d+(?:\.\d+)?)/g, "sqrt($1)").replace(/√/g, "sqrt"), this.pos = 0;
     const r = this.parseAddSub();
-    return (a) => this.evaluate(r, { ...mathConstants, ...a });
+    if (this.options.strict && this.pos < this.expr.length)
+      throw new Error(`Unexpected "${this.expr.slice(this.pos)}"`);
+    return (o) => this.evaluate(r, o);
   }
   parseAddSub() {
     let t = this.parseMulDiv();
@@ -1019,102 +1053,126 @@ class ExpressionParser {
       if (r !== "+" && r !== "-")
         break;
       this.pos++;
-      const a = this.parseMulDiv();
-      t = { type: "binary", op: r, left: t, right: a };
+      const o = this.parseMulDiv();
+      t = { type: "binary", op: r, left: t, right: o };
     }
     return t;
   }
   parseMulDiv() {
-    let t = this.parsePower();
+    let t = this.parseUnary();
     for (; this.pos < this.expr.length; ) {
       const r = this.expr[this.pos];
-      if (r !== "*" && r !== "/")
+      if (r === "*" || r === "/")
+        this.pos++, t = { type: "binary", op: r, left: t, right: this.parseUnary() };
+      else if (/[0-9a-zA-Z_(]/.test(r))
+        t = { type: "binary", op: "*", left: t, right: this.parsePower() };
+      else
         break;
-      this.pos++;
-      const a = this.parsePower();
-      t = { type: "binary", op: r, left: t, right: a };
-    }
-    return t;
-  }
-  parsePower() {
-    let t = this.parseUnary();
-    for (; this.pos < this.expr.length && this.expr[this.pos] === "^"; ) {
-      this.pos++;
-      const r = this.parseUnary();
-      t = { type: "binary", op: "^", left: t, right: r };
     }
     return t;
   }
   parseUnary() {
-    return this.expr[this.pos] === "-" ? (this.pos++, { type: "unary", op: "-", arg: this.parseUnary() }) : (this.expr[this.pos] === "+" && this.pos++, this.parsePrimary());
+    return this.expr[this.pos] === "-" ? (this.pos++, { type: "unary", arg: this.parseUnary() }) : this.expr[this.pos] === "+" ? (this.pos++, this.parseUnary()) : this.parsePower();
+  }
+  parsePower() {
+    const t = this.parsePrimary();
+    return this.expr[this.pos] === "^" ? (this.pos++, { type: "binary", op: "^", left: t, right: this.parseUnary() }) : t;
   }
   parsePrimary() {
     if (this.expr[this.pos] === "(") {
       this.pos++;
-      const a = this.parseAddSub();
-      return this.expr[this.pos] === ")" && this.pos++, a;
+      const o = this.parseAddSub();
+      if (this.expr[this.pos] === ")")
+        this.pos++;
+      else if (this.options.strict)
+        throw new Error('Missing ")"');
+      return o;
     }
-    const t = this.expr.slice(this.pos).match(/^(\d+\.?\d*)/);
+    const t = this.expr.slice(this.pos).match(/^(\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/);
     if (t)
-      return this.pos += t[1].length, { type: "number", value: parseFloat(t[1]) };
+      return this.pos += t[0].length, { type: "number", value: parseFloat(t[0]) };
     const r = this.expr.slice(this.pos).match(/^([a-zA-Z_][a-zA-Z0-9_]*)/);
     if (r) {
-      const a = r[1];
-      if (this.pos += a.length, this.expr[this.pos] === "(") {
+      const o = r[1];
+      if (this.pos += o.length, this.expr[this.pos] === "(") {
         this.pos++;
-        const o = [];
+        const a = [];
         for (; this.expr[this.pos] !== ")" && this.pos < this.expr.length; )
-          o.push(this.parseAddSub()), this.expr[this.pos] === "," && this.pos++;
-        return this.expr[this.pos] === ")" && this.pos++, { type: "call", name: a, args: o };
+          if (a.push(this.parseAddSub()), this.expr[this.pos] === ",")
+            this.pos++;
+          else if (this.expr[this.pos] !== ")")
+            break;
+        if (this.expr[this.pos] === ")")
+          this.pos++;
+        else if (this.options.strict)
+          throw new Error('Missing ")"');
+        return { type: "call", name: o, args: a };
       }
-      return { type: "variable", name: a };
+      return { type: "variable", name: o };
     }
+    if (this.options.strict)
+      throw new Error(
+        this.pos < this.expr.length ? `Unexpected "${this.expr[this.pos]}"` : "Unexpected end"
+      );
     return { type: "number", value: 0 };
   }
+  /** A name from a table, honouring `ignoreCase`. */
+  lookup(t, r) {
+    if (r in t)
+      return t[r];
+    if (this.options.ignoreCase) {
+      const o = r.toLowerCase(), a = Object.keys(t).find((n) => n.toLowerCase() === o);
+      return a === void 0 ? void 0 : t[a];
+    }
+  }
   evaluate(t, r) {
     switch (t.type) {
       case "number":
         return t.value;
-      case "variable":
+      case "variable": {
         if (t.name in r)
           return r[t.name];
+        const o = this.lookup({ ...$e, ...this.options.constants }, t.name);
+        if (o !== void 0)
+          return o;
         throw new Error(`Unknown variable: ${t.name}`);
+      }
       case "unary":
-        return t.op === "-" ? -this.evaluate(t.arg, r) : this.evaluate(t.arg, r);
+        return -this.evaluate(t.arg, r);
       case "binary": {
-        const a = this.evaluate(t.left, r), o = this.evaluate(t.right, r);
+        const o = this.evaluate(t.left, r), a = this.evaluate(t.right, r);
         switch (t.op) {
           case "+":
-            return a + o;
+            return o + a;
           case "-":
-            return a - o;
+            return o - a;
           case "*":
-            return a * o;
+            return o * a;
           case "/":
-            return a / o;
+            return o / a;
           case "^":
-            return Math.pow(a, o);
+            return Math.pow(o, a);
           default:
             return 0;
         }
       }
       case "call": {
-        const a = mathFunctions[t.name];
-        if (!a)
+        const o = this.lookup({ ...Re, ...this.options.functions }, t.name);
+        if (!o)
           throw new Error(`Unknown function: ${t.name}`);
-        const o = t.args.map((n) => this.evaluate(n, r));
-        return a(...o);
+        const a = t.args.map((n) => this.evaluate(n, r));
+        return o(...a);
       }
       default:
         return 0;
     }
   }
 }
-class GraphService {
+class Te {
   constructor(t = {}) {
-    M(this, "plots", /* @__PURE__ */ new Map());
-    M(this, "parser", new ExpressionParser());
-    M(this, "config");
+    T(this, "plots", /* @__PURE__ */ new Map());
+    T(this, "parser", new ie());
+    T(this, "config");
     this.config = {
       defaultResolution: t.defaultResolution ?? 200,
       maxResolution: t.maxResolution ?? 1e3
@@ -1140,11 +1198,11 @@ class GraphService {
   }
   /** Update a plot */
   updatePlot(t, r) {
-    const a = this.plots.get(t);
-    if (!a)
+    const o = this.plots.get(t);
+    if (!o)
       throw new Error(`Plot not found: ${t}`);
-    const o = { ...a, ...r, id: a.id };
-    return this.plots.set(t, o), o;
+    const a = { ...o, ...r, id: o.id };
+    return this.plots.set(t, a), a;
   }
   /** Remove a plot */
   removePlot(t) {
@@ -1159,41 +1217,41 @@ class GraphService {
     return this.plots.get(t);
   }
   /** Compute 2D function points */
-  compute2DFunction(t, r, a, o) {
-    const n = this.parser.parse(t), i = [], l = (r.max - r.min) / a;
-    for (let p = 0; p <= a; p++) {
-      const s = r.min + p * l;
+  compute2DFunction(t, r, o, a) {
+    const n = this.parser.parse(t), i = [], c = (r.max - r.min) / o;
+    for (let u = 0; u <= o; u++) {
+      const s = r.min + u * c;
       try {
-        const d = n({ x: s, ...o });
-        Number.isFinite(d) && i.push({ x: s, y: d });
+        const p = n({ x: s, ...a });
+        Number.isFinite(p) && i.push({ x: s, y: p });
       } catch {
       }
     }
     return i;
   }
   /** Compute 2D parametric curve */
-  compute2DParametric(t, r, a, o, n) {
-    const i = this.parser.parse(t), l = this.parser.parse(r), p = [], s = (a.max - a.min) / o;
-    for (let d = 0; d <= o; d++) {
-      const g = a.min + d * s;
+  compute2DParametric(t, r, o, a, n) {
+    const i = this.parser.parse(t), c = this.parser.parse(r), u = [], s = (o.max - o.min) / a;
+    for (let p = 0; p <= a; p++) {
+      const m = o.min + p * s;
       try {
-        const y = i({ t: g, ...n }), h = l({ t: g, ...n });
-        Number.isFinite(y) && Number.isFinite(h) && p.push({ x: y, y: h });
+        const y = i({ t: m, ...n }), f = c({ t: m, ...n });
+        Number.isFinite(y) && Number.isFinite(f) && u.push({ x: y, y: f });
       } catch {
       }
     }
-    return p;
+    return u;
   }
   /** Compute 2D polar curve */
-  compute2DPolar(t, r, a, o) {
-    const n = this.parser.parse(t), i = [], l = (r.max - r.min) / a;
-    for (let p = 0; p <= a; p++) {
-      const s = r.min + p * l;
+  compute2DPolar(t, r, o, a) {
+    const n = this.parser.parse(t), i = [], c = (r.max - r.min) / o;
+    for (let u = 0; u <= o; u++) {
+      const s = r.min + u * c;
       try {
-        const d = n({ theta: s, t: s, ...o });
-        if (Number.isFinite(d)) {
-          const g = d * Math.cos(s), y = d * Math.sin(s);
-          i.push({ x: g, y });
+        const p = n({ theta: s, t: s, ...a });
+        if (Number.isFinite(p)) {
+          const m = p * Math.cos(s), y = p * Math.sin(s);
+          i.push({ x: m, y });
         }
       } catch {
       }
@@ -1201,88 +1259,88 @@ class GraphService {
     return i;
   }
   /** Compute 3D surface points */
-  compute3DSurface(t, r, a, o, n) {
-    const i = this.parser.parse(t), l = [], p = (r.max - r.min) / o, s = (a.max - a.min) / o;
-    for (let d = 0; d <= o; d++) {
-      const g = [], y = r.min + d * p;
-      for (let h = 0; h <= o; h++) {
-        const w = a.min + h * s;
+  compute3DSurface(t, r, o, a, n) {
+    const i = this.parser.parse(t), c = [], u = (r.max - r.min) / a, s = (o.max - o.min) / a;
+    for (let p = 0; p <= a; p++) {
+      const m = [], y = r.min + p * u;
+      for (let f = 0; f <= a; f++) {
+        const C = o.min + f * s;
         try {
-          const x = i({ x: y, y: w, ...n });
-          Number.isFinite(x) ? g.push({ x: y, y: w, z: x }) : g.push({ x: y, y: w, z: 0 });
+          const x = i({ x: y, y: C, ...n });
+          Number.isFinite(x) ? m.push({ x: y, y: C, z: x }) : m.push({ x: y, y: C, z: 0 });
         } catch {
-          g.push({ x: y, y: w, z: 0 });
+          m.push({ x: y, y: C, z: 0 });
         }
       }
-      l.push(g);
+      c.push(m);
     }
-    return l;
+    return c;
   }
   /** Export plot data as SVG */
-  exportSVG(t, r, a, o) {
-    const i = a - 80, l = o - 80, p = (g) => 40 + (g - r.xRange.min) / (r.xRange.max - r.xRange.min) * i, s = (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}">`,
+  exportSVG(t, r, o, a) {
+    const i = o - 80, c = a - 80, u = (m) => 40 + (m - r.xRange.min) / (r.xRange.max - r.xRange.min) * i, s = (m) => a - 40 - (m - r.yRange.min) / (r.yRange.max - r.yRange.min) * c, p = [
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${o}" height="${a}">`,
       `<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 g = Math.ceil(r.xRange.min); g <= r.xRange.max; g++) {
-        const y = p(g);
-        d.push(`<line x1="${y}" y1="40" x2="${y}" y2="${o - 40}"/>`);
+      p.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
+      for (let m = Math.ceil(r.xRange.min); m <= r.xRange.max; m++) {
+        const y = u(m);
+        p.push(`<line x1="${y}" y1="40" x2="${y}" y2="${a - 40}"/>`);
       }
-      for (let g = Math.ceil(r.yRange.min); g <= r.yRange.max; g++) {
-        const y = s(g);
-        d.push(`<line x1="40" y1="${y}" x2="${a - 40}" y2="${y}"/>`);
+      for (let m = Math.ceil(r.yRange.min); m <= r.yRange.max; m++) {
+        const y = s(m);
+        p.push(`<line x1="40" y1="${y}" x2="${o - 40}" y2="${y}"/>`);
       }
-      d.push("</g>");
+      p.push("</g>");
     }
     if (r.showAxes) {
-      d.push('<g stroke="var(--nice-text, #333)" stroke-width="1">');
-      const g = s(0), y = p(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>");
+      p.push('<g stroke="var(--nice-text, #333)" stroke-width="1">');
+      const m = s(0), y = u(0);
+      p.push(`<line x1="40" y1="${m}" x2="${o - 40}" y2="${m}"/>`), p.push(`<line x1="${y}" y1="40" x2="${y}" y2="${a - 40}"/>`), p.push("</g>");
     }
-    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);
+    for (const m of t.filter((y) => y.visible))
+      if (m.type === "2d-function") {
+        const y = this.compute2DFunction(m.expression, r.xRange, m.resolution || 200);
         if (y.length > 0) {
-          const h = y.map((w, x) => `${x === 0 ? "M" : "L"}${p(w.x)},${s(w.y)}`).join(" ");
-          d.push(
-            `<path d="${h}" fill="none" stroke="rgb(${g.color.r},${g.color.g},${g.color.b})" stroke-width="${g.lineWidth}"/>`
+          const f = y.map((C, x) => `${x === 0 ? "M" : "L"}${u(C.x)},${s(C.y)}`).join(" ");
+          p.push(
+            `<path d="${f}" fill="none" stroke="rgb(${m.color.r},${m.color.g},${m.color.b})" stroke-width="${m.lineWidth}"/>`
           );
         }
       }
-    return r.showLabels && (d.push(
-      `<text x="${a / 2}" y="${o - 10}" text-anchor="middle" font-size="12">x</text>`
-    ), d.push(
-      `<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(`
+    return r.showLabels && (p.push(
+      `<text x="${o / 2}" y="${a - 10}" text-anchor="middle" font-size="12">x</text>`
+    ), p.push(
+      `<text x="10" y="${a / 2}" text-anchor="middle" font-size="12" transform="rotate(-90,10,${a / 2})">y</text>`
+    )), p.push("</svg>"), p.join(`
 `);
   }
   /** Export as PNG (data URL) */
-  async exportPNG(t, r, a, o) {
-    const n = this.exportSVG(t, r, a, o);
-    return new Promise((i, l) => {
-      const p = new Image();
-      p.onload = () => {
+  async exportPNG(t, r, o, a) {
+    const n = this.exportSVG(t, r, o, a);
+    return new Promise((i, c) => {
+      const u = new Image();
+      u.onload = () => {
         const s = document.createElement("canvas");
-        s.width = a, s.height = o;
-        const d = s.getContext("2d");
-        if (!d) {
-          l(new Error("Could not get canvas context"));
+        s.width = o, s.height = a;
+        const p = s.getContext("2d");
+        if (!p) {
+          c(new Error("Could not get canvas context"));
           return;
         }
-        d.drawImage(p, 0, 0), i(s.toDataURL("image/png"));
-      }, p.onerror = l, p.src = "data:image/svg+xml;base64," + btoa(n);
+        p.drawImage(u, 0, 0), i(s.toDataURL("image/png"));
+      }, u.onerror = c, u.src = "data:image/svg+xml;base64," + btoa(n);
     });
   }
   generateId() {
     return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
   }
 }
-function createGraphService(e) {
-  return new GraphService(e);
+function tt(e) {
+  return new Te(e);
 }
-const FUNCTION_PRESETS = [
+const ee = [
   // Basic
   { name: "Linear", expression: "x", type: "2d-function", category: "basic" },
   { name: "Quadratic", expression: "x^2", type: "2d-function", category: "basic" },
@@ -1365,14 +1423,14 @@ const FUNCTION_PRESETS = [
     type: "3d-surface",
     category: "3d"
   }
-], GraphContext = createContext(null);
-function useGraph() {
-  const e = useContext(GraphContext);
+], se = /* @__PURE__ */ F(null);
+function Y() {
+  const e = j(se);
   if (!e)
     throw new Error("useGraph must be used within GraphProvider");
   return e;
 }
-const styles$2 = {
+const $ = {
   container: {
     display: "flex",
     height: "100%",
@@ -1431,14 +1489,14 @@ const styles$2 = {
     backgroundColor: "var(--nice-bg-secondary, #fafafa)"
   }
 };
-function NiceGraphPlotter({
+function rt({
   service: e,
   width: t = 800,
   height: r = 600,
-  className: a,
-  style: o
+  className: o,
+  style: a
 }) {
-  const [n, i] = useState([]), [l, p] = useState({
+  const [n, i] = P([]), [c, u] = P({
     xRange: { min: -10, max: 10 },
     yRange: { min: -10, max: 10 },
     zRange: { min: -5, max: 5 },
@@ -1449,63 +1507,63 @@ function NiceGraphPlotter({
     cameraRotationX: 30,
     cameraRotationY: 45,
     cameraDistance: 5
-  }), [s, d] = useState({
+  }), [s, p] = P({
     isPlaying: !1,
     parameter: "a",
     currentValue: 0,
     minValue: -5,
     maxValue: 5,
     speed: 1
-  }), g = useCallback(() => {
+  }), m = R(() => {
     i(e.getPlots());
-  }, [e]), y = useCallback((u) => {
-    p((b) => ({ ...b, ...u }));
-  }, []), h = useCallback((u) => {
-    d((b) => ({ ...b, ...u }));
-  }, []), w = useCallback(
-    (u) => {
-      e.addPlot(u), g();
+  }, [e]), y = R((g) => {
+    u((w) => ({ ...w, ...g }));
+  }, []), f = R((g) => {
+    p((w) => ({ ...w, ...g }));
+  }, []), C = R(
+    (g) => {
+      e.addPlot(g), m();
     },
-    [e, g]
-  ), x = useCallback(
-    (u) => {
-      e.removePlot(u), g();
+    [e, m]
+  ), x = R(
+    (g) => {
+      e.removePlot(g), m();
     },
-    [e, g]
-  ), f = useCallback(
-    (u, b) => {
-      e.updatePlot(u, b), g();
+    [e, m]
+  ), b = R(
+    (g, w) => {
+      e.updatePlot(g, w), m();
     },
-    [e, g]
-  ), c = {
+    [e, m]
+  ), l = {
     service: e,
     plots: n,
-    view: l,
+    view: c,
     setView: y,
-    addPlot: w,
+    addPlot: C,
     removePlot: x,
-    updatePlot: f,
+    updatePlot: b,
     animation: s,
-    setAnimation: h,
-    refresh: g
+    setAnimation: f,
+    refresh: m
   };
-  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, {})
+  return /* @__PURE__ */ d(se.Provider, { value: l, children: /* @__PURE__ */ v("div", { className: o, style: { ...$.container, ...a }, children: [
+    /* @__PURE__ */ v("div", { style: $.sidebar, children: [
+      /* @__PURE__ */ d(Ae, {}),
+      /* @__PURE__ */ d(ze, {})
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles$2.main, children: [
-      /* @__PURE__ */ jsx(GraphToolbar, { width: t, height: r }),
-      /* @__PURE__ */ jsx(Canvas2D, { width: t, height: r })
+    /* @__PURE__ */ v("div", { style: $.main, children: [
+      /* @__PURE__ */ d(Ee, { width: t, height: r }),
+      /* @__PURE__ */ d(Ie, { width: t, height: r })
     ] })
   ] }) });
 }
-function PlotControls() {
-  const { t: e } = useNiceTranslation(), { addPlot: t } = useGraph(), [r, a] = useState("sin(x)"), [o, n] = useState("2d-function"), [i, l] = useState("cos(x)"), p = () => {
+function Ae() {
+  const { t: e } = L(), { addPlot: t } = Y(), [r, o] = P("sin(x)"), [a, n] = P("2d-function"), [i, c] = P("cos(x)"), u = () => {
     t({
-      type: o,
+      type: a,
       expression: r,
-      expressionY: o === "2d-parametric" ? i : void 0,
+      expressionY: a === "2d-parametric" ? i : void 0,
       color: {
         r: Math.floor(Math.random() * 200),
         g: Math.floor(Math.random() * 200),
@@ -1513,52 +1571,52 @@ function PlotControls() {
       }
     });
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", borderBottom: "1px solid var(--nice-border, #e0e0e0)" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ v("div", { style: { padding: "12px", borderBottom: "1px solid var(--nice-border, #e0e0e0)" }, children: [
+    /* @__PURE__ */ d("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ v(
       "select",
       {
-        value: o,
+        value: a,
         onChange: (s) => n(s.target.value),
-        style: { ...styles$2.input, width: "100%" },
+        style: { ...$.input, width: "100%" },
         children: [
-          /* @__PURE__ */ jsx("option", { value: "2d-function", children: "y = f(x)" }),
-          /* @__PURE__ */ jsx("option", { value: "2d-parametric", children: "Parametric (x(t), y(t))" }),
-          /* @__PURE__ */ jsx("option", { value: "2d-polar", children: "Polar r = f(θ)" }),
-          /* @__PURE__ */ jsx("option", { value: "3d-surface", children: "3D Surface z = f(x,y)" })
+          /* @__PURE__ */ d("option", { value: "2d-function", children: "y = f(x)" }),
+          /* @__PURE__ */ d("option", { value: "2d-parametric", children: "Parametric (x(t), y(t))" }),
+          /* @__PURE__ */ d("option", { value: "2d-polar", children: "Polar r = f(θ)" }),
+          /* @__PURE__ */ d("option", { value: "3d-surface", children: "3D Surface z = f(x,y)" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ d("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ d(
       "input",
       {
         type: "text",
         value: r,
-        onChange: (s) => a(s.target.value),
-        placeholder: o === "2d-parametric" ? "x(t) = ..." : "Expression...",
-        style: { ...styles$2.input, width: "100%" }
+        onChange: (s) => o(s.target.value),
+        placeholder: a === "2d-parametric" ? "x(t) = ..." : "Expression...",
+        style: { ...$.input, width: "100%" }
       }
     ) }),
-    o === "2d-parametric" && /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
+    a === "2d-parametric" && /* @__PURE__ */ d("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ d(
       "input",
       {
         type: "text",
         value: i,
-        onChange: (s) => l(s.target.value),
+        onChange: (s) => c(s.target.value),
         placeholder: "y(t) = ...",
-        style: { ...styles$2.input, width: "100%" }
+        style: { ...$.input, width: "100%" }
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { onClick: p, style: { ...styles$2.button, width: "100%" }, children: "+ Add Plot" }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ d("button", { onClick: u, style: { ...$.button, width: "100%" }, children: "+ Add Plot" }),
+    /* @__PURE__ */ v(
       "select",
       {
         onChange: (s) => {
-          const d = FUNCTION_PRESETS.find((g) => g.name === s.target.value);
-          d && t({
-            type: d.type,
-            expression: d.expression,
-            expressionY: d.expressionY,
-            label: d.name,
+          const p = ee.find((m) => m.name === s.target.value);
+          p && t({
+            type: p.type,
+            expression: p.expression,
+            expressionY: p.expressionY,
+            label: p.name,
             color: {
               r: Math.floor(Math.random() * 200),
               g: Math.floor(Math.random() * 200),
@@ -1566,24 +1624,24 @@ function PlotControls() {
             }
           });
         },
-        style: { ...styles$2.input, width: "100%", marginTop: "8px" },
+        style: { ...$.input, width: "100%", marginTop: "8px" },
         value: "",
         children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: !0, children: e("plotter.quickAdd", "Quick add preset...") }),
-          ["basic", "trigonometric", "exponential", "parametric", "polar", "3d"].map((s) => /* @__PURE__ */ jsx("optgroup", { label: s.charAt(0).toUpperCase() + s.slice(1), children: FUNCTION_PRESETS.filter((d) => d.category === s).map((d) => /* @__PURE__ */ jsxs("option", { value: d.name, children: [
-            d.name,
+          /* @__PURE__ */ d("option", { value: "", disabled: !0, children: e("plotter.quickAdd", "Quick add preset...") }),
+          ["basic", "trigonometric", "exponential", "parametric", "polar", "3d"].map((s) => /* @__PURE__ */ d("optgroup", { label: s.charAt(0).toUpperCase() + s.slice(1), children: ee.filter((p) => p.category === s).map((p) => /* @__PURE__ */ v("option", { value: p.name, children: [
+            p.name,
             ": ",
-            d.expression
-          ] }, d.name)) }, s))
+            p.expression
+          ] }, p.name)) }, s))
         ]
       }
     )
   ] });
 }
-function PlotList() {
-  const { t: e } = useNiceTranslation(), { plots: t, removePlot: r, updatePlot: a } = useGraph();
-  return /* @__PURE__ */ jsxs("div", { style: styles$2.plotList, children: [
-    t.length === 0 && /* @__PURE__ */ jsx(
+function ze() {
+  const { t: e } = L(), { plots: t, removePlot: r, updatePlot: o } = Y();
+  return /* @__PURE__ */ v("div", { style: $.plotList, children: [
+    t.length === 0 && /* @__PURE__ */ d(
       "div",
       {
         style: {
@@ -1594,32 +1652,33 @@ function PlotList() {
         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(
+    t.map((a) => /* @__PURE__ */ v("div", { style: $.plotItem, children: [
+      /* @__PURE__ */ v("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" }, children: [
+        /* @__PURE__ */ d(
           "input",
           {
             type: "checkbox",
-            checked: o.visible,
-            onChange: (n) => a(o.id, { visible: n.target.checked })
+            checked: a.visible,
+            onChange: (n) => o(a.id, { visible: n.target.checked })
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ d(
           "div",
           {
             style: {
               width: "16px",
               height: "16px",
               borderRadius: "3px",
-              backgroundColor: `rgb(${o.color.r},${o.color.g},${o.color.b})`
+              backgroundColor: `rgb(${a.color.r},${a.color.g},${a.color.b})`
             }
           }
         ),
-        /* @__PURE__ */ jsx("span", { style: { flex: 1, fontWeight: 500 }, children: o.label || o.expression }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ d("span", { style: { flex: 1, fontWeight: 500 }, children: a.label || a.expression }),
+        /* @__PURE__ */ d(
           "button",
           {
-            onClick: () => r(o.id),
+            "aria-label": e("plotter.close", "Close"),
+            onClick: () => r(a.id),
             style: {
               padding: "2px 6px",
               backgroundColor: "var(--nice-danger, #f44336)",
@@ -1629,11 +1688,11 @@ function PlotList() {
               cursor: "pointer",
               fontSize: "12px"
             },
-            children: "×"
+            children: /* @__PURE__ */ d(G, { name: "close", size: 14 })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ d(
         "div",
         {
           style: {
@@ -1641,79 +1700,79 @@ function PlotList() {
             color: "var(--nice-text-secondary, #666)",
             fontFamily: "monospace"
           },
-          children: o.type === "2d-parametric" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          children: a.type === "2d-parametric" ? /* @__PURE__ */ v(oe, { children: [
             "x(t) = ",
-            o.expression,
-            /* @__PURE__ */ jsx("br", {}),
+            a.expression,
+            /* @__PURE__ */ d("br", {}),
             "y(t) = ",
-            o.expressionY
-          ] }) : o.expression
+            a.expressionY
+          ] }) : a.expression
         }
       )
-    ] }, o.id))
+    ] }, a.id))
   ] });
 }
-function GraphToolbar({ width: e, height: t }) {
-  const { t: r } = useNiceTranslation(), { service: a, plots: o, view: n, setView: i } = useGraph(), l = () => {
-    const s = a.exportSVG(o, n, e, t), d = new Blob([s], { type: "image/svg+xml" }), g = URL.createObjectURL(d), y = document.createElement("a");
-    y.href = g, y.download = "graph.svg", y.click(), URL.revokeObjectURL(g);
-  }, p = async () => {
-    const s = await a.exportPNG(o, n, e, t), d = document.createElement("a");
-    d.href = s, d.download = "graph.png", d.click();
+function Ee({ width: e, height: t }) {
+  const { t: r } = L(), { service: o, plots: a, view: n, setView: i } = Y(), c = () => {
+    const s = o.exportSVG(a, n, e, t), p = new Blob([s], { type: "image/svg+xml" }), m = URL.createObjectURL(p), y = document.createElement("a");
+    y.href = m, y.download = "graph.svg", y.click(), URL.revokeObjectURL(m);
+  }, u = async () => {
+    const s = await o.exportPNG(a, n, e, t), p = document.createElement("a");
+    p.href = s, p.download = "graph.png", p.click();
   };
-  return /* @__PURE__ */ jsxs("div", { style: styles$2.toolbar, children: [
-    /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
+  return /* @__PURE__ */ v("div", { style: $.toolbar, children: [
+    /* @__PURE__ */ v("label", { style: { fontSize: "12px" }, children: [
       "X: [",
       " ",
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ d(
         "input",
         {
           type: "number",
           value: n.xRange.min,
           onChange: (s) => i({ xRange: { ...n.xRange, min: Number(s.target.value) } }),
-          style: { ...styles$2.input, width: "50px" }
+          style: { ...$.input, width: "50px" }
         }
       ),
       ",",
       " ",
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ d(
         "input",
         {
           type: "number",
           value: n.xRange.max,
           onChange: (s) => i({ xRange: { ...n.xRange, max: Number(s.target.value) } }),
-          style: { ...styles$2.input, width: "50px" }
+          style: { ...$.input, width: "50px" }
         }
       ),
       "]"
     ] }),
-    /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
+    /* @__PURE__ */ v("label", { style: { fontSize: "12px" }, children: [
       "Y: [",
       " ",
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ d(
         "input",
         {
           type: "number",
           value: n.yRange.min,
           onChange: (s) => i({ yRange: { ...n.yRange, min: Number(s.target.value) } }),
-          style: { ...styles$2.input, width: "50px" }
+          style: { ...$.input, width: "50px" }
         }
       ),
       ",",
       " ",
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ d(
         "input",
         {
           type: "number",
           value: n.yRange.max,
           onChange: (s) => i({ yRange: { ...n.yRange, max: Number(s.target.value) } }),
-          style: { ...styles$2.input, width: "50px" }
+          style: { ...$.input, width: "50px" }
         }
       ),
       "]"
     ] }),
-    /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ v("label", { style: { fontSize: "12px" }, children: [
+      /* @__PURE__ */ d(
         "input",
         {
           type: "checkbox",
@@ -1723,8 +1782,8 @@ function GraphToolbar({ width: e, height: t }) {
       ),
       r("plotter.grid", "Grid")
     ] }),
-    /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ v("label", { style: { fontSize: "12px" }, children: [
+      /* @__PURE__ */ d(
         "input",
         {
           type: "checkbox",
@@ -1734,112 +1793,112 @@ function GraphToolbar({ width: e, height: t }) {
       ),
       r("plotter.axes", "Axes")
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ d("div", { style: { flex: 1 } }),
+    /* @__PURE__ */ v(
       "button",
       {
-        onClick: l,
-        style: { ...styles$2.button, backgroundColor: "var(--nice-success, #4caf50)" },
+        onClick: c,
+        style: { ...$.button, backgroundColor: "var(--nice-success, #4caf50)" },
         children: [
-          /* @__PURE__ */ jsx(NiceIcon$1, { name: "download", size: 14 }),
+          /* @__PURE__ */ d(G, { name: "download", size: 14 }),
           " SVG"
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ v(
       "button",
       {
-        onClick: p,
-        style: { ...styles$2.button, backgroundColor: "var(--nice-warning, #ff9800)" },
+        onClick: u,
+        style: { ...$.button, backgroundColor: "var(--nice-warning, #ff9800)" },
         children: [
-          /* @__PURE__ */ jsx(NiceIcon$1, { name: "download", size: 14 }),
+          /* @__PURE__ */ d(G, { name: "download", size: 14 }),
           " PNG"
         ]
       }
     )
   ] });
 }
-function Canvas2D({ width: e, height: t }) {
-  const r = useRef(null), { service: a, plots: o, view: n, animation: i } = useGraph(), l = 40;
-  return useEffect(() => {
-    const p = r.current, s = p == null ? void 0 : p.getContext("2d");
-    if (!p || !s)
+function Ie({ width: e, height: t }) {
+  const r = U(null), { service: o, plots: a, view: n, animation: i } = Y(), c = 40;
+  return V(() => {
+    const u = r.current, s = u == null ? void 0 : u.getContext("2d");
+    if (!u || !s)
       return;
     s.fillStyle = `rgb(${n.backgroundColor.r},${n.backgroundColor.g},${n.backgroundColor.b})`, s.fillRect(0, 0, e, t);
-    const d = e - l * 2, g = t - l * 2, y = (x) => l + (x - n.xRange.min) / (n.xRange.max - n.xRange.min) * d, h = (x) => t - l - (x - n.yRange.min) / (n.yRange.max - n.yRange.min) * g;
+    const p = e - c * 2, m = t - c * 2, y = (x) => c + (x - n.xRange.min) / (n.xRange.max - n.xRange.min) * p, f = (x) => t - c - (x - n.yRange.min) / (n.yRange.max - n.yRange.min) * m;
     if (n.showGrid) {
-      s.strokeStyle = resolveCssColor("var(--nice-border, #e0e0e0)", s.canvas), s.lineWidth = 0.5;
+      s.strokeStyle = I("var(--nice-border, #e0e0e0)", s.canvas), s.lineWidth = 0.5;
       for (let x = Math.ceil(n.xRange.min); x <= n.xRange.max; x++) {
-        const f = y(x);
-        s.beginPath(), s.moveTo(f, l), s.lineTo(f, t - l), s.stroke();
+        const b = y(x);
+        s.beginPath(), s.moveTo(b, c), s.lineTo(b, t - c), s.stroke();
       }
       for (let x = Math.ceil(n.yRange.min); x <= n.yRange.max; x++) {
-        const f = h(x);
-        s.beginPath(), s.moveTo(l, f), s.lineTo(e - l, f), s.stroke();
+        const b = f(x);
+        s.beginPath(), s.moveTo(c, b), s.lineTo(e - c, b), s.stroke();
       }
     }
     if (n.showAxes) {
-      s.strokeStyle = resolveCssColor("var(--nice-text, #333)", s.canvas), s.lineWidth = 1;
-      const x = h(0);
-      s.beginPath(), s.moveTo(l, x), s.lineTo(e - l, x), s.stroke();
-      const f = y(0);
-      if (s.beginPath(), s.moveTo(f, l), s.lineTo(f, t - l), s.stroke(), n.showLabels) {
-        s.fillStyle = resolveCssColor("var(--nice-text, #333)", s.canvas), s.font = "12px sans-serif", s.textAlign = "center", s.fillText("x", e - l + 15, x + 4), s.fillText("y", f, l - 10), s.font = "10px sans-serif";
-        for (let c = Math.ceil(n.xRange.min); c <= n.xRange.max; c++)
-          c !== 0 && s.fillText(String(c), y(c), x + 15);
-        for (let c = Math.ceil(n.yRange.min); c <= n.yRange.max; c++)
-          c !== 0 && (s.textAlign = "right", s.fillText(String(c), f - 5, h(c) + 4));
+      s.strokeStyle = I("var(--nice-text, #333)", s.canvas), s.lineWidth = 1;
+      const x = f(0);
+      s.beginPath(), s.moveTo(c, x), s.lineTo(e - c, x), s.stroke();
+      const b = y(0);
+      if (s.beginPath(), s.moveTo(b, c), s.lineTo(b, t - c), s.stroke(), n.showLabels) {
+        s.fillStyle = I("var(--nice-text, #333)", s.canvas), s.font = "12px sans-serif", s.textAlign = "center", s.fillText("x", e - c + 15, x + 4), s.fillText("y", b, c - 10), s.font = "10px sans-serif";
+        for (let l = Math.ceil(n.xRange.min); l <= n.xRange.max; l++)
+          l !== 0 && s.fillText(String(l), y(l), x + 15);
+        for (let l = Math.ceil(n.yRange.min); l <= n.yRange.max; l++)
+          l !== 0 && (s.textAlign = "right", s.fillText(String(l), b - 5, f(l) + 4));
       }
     }
-    const w = i.isPlaying ? { [i.parameter]: i.currentValue } : {};
-    for (const x of o.filter((f) => f.visible)) {
-      const f = `rgb(${x.color.r},${x.color.g},${x.color.b})`;
-      s.strokeStyle = f, s.lineWidth = x.lineWidth || 2;
-      let c = [];
+    const C = i.isPlaying ? { [i.parameter]: i.currentValue } : {};
+    for (const x of a.filter((b) => b.visible)) {
+      const b = `rgb(${x.color.r},${x.color.g},${x.color.b})`;
+      s.strokeStyle = b, s.lineWidth = x.lineWidth || 2;
+      let l = [];
       switch (x.type) {
         case "2d-function":
-          c = a.compute2DFunction(
+          l = o.compute2DFunction(
             x.expression,
             n.xRange,
             x.resolution || 200,
-            w
+            C
           );
           break;
         case "2d-parametric":
-          c = a.compute2DParametric(
+          l = o.compute2DParametric(
             x.expression,
             x.expressionY || "sin(t)",
             x.parameterRange || { min: 0, max: 2 * Math.PI },
             x.resolution || 200,
-            w
+            C
           );
           break;
         case "2d-polar":
-          c = a.compute2DPolar(
+          l = o.compute2DPolar(
             x.expression,
             x.parameterRange || { min: 0, max: 2 * Math.PI },
             x.resolution || 200,
-            w
+            C
           );
           break;
       }
-      if (c.length > 0) {
+      if (l.length > 0) {
         s.beginPath();
-        let u = !1;
-        for (const b of c) {
-          const k = y(b.x), m = h(b.y);
-          if (m < 0 || m > t) {
-            u = !1;
+        let g = !1;
+        for (const w of l) {
+          const M = y(w.x), h = f(w.y);
+          if (h < 0 || h > t) {
+            g = !1;
             continue;
           }
-          u ? s.lineTo(k, m) : (s.moveTo(k, m), u = !0);
+          g ? s.lineTo(M, h) : (s.moveTo(M, h), g = !0);
         }
         s.stroke();
       }
     }
-  }, [o, n, i, a, e, t]), /* @__PURE__ */ jsx("canvas", { ref: r, width: e, height: t, style: styles$2.canvas });
+  }, [a, n, i, o, e, t]), /* @__PURE__ */ d("canvas", { ref: r, width: e, height: t, style: $.canvas });
 }
-const UNITS = [
+const O = [
   // Length
   { name: "Meter", symbol: "m", category: "Length", toBase: (e) => e, fromBase: (e) => e },
   {
@@ -2109,12 +2168,12 @@ const UNITS = [
     fromBase: (e) => e / 1099511627776
   },
   { name: "Bit", symbol: "bit", category: "Data", toBase: (e) => e / 8, fromBase: (e) => e * 8 }
-], MatrixOps = {
+], z = {
   create(e, t, r = 0) {
-    const a = [];
-    for (let o = 0; o < e; o++)
-      a.push(new Array(t).fill(r));
-    return { rows: e, cols: t, data: a };
+    const o = [];
+    for (let a = 0; a < e; a++)
+      o.push(new Array(t).fill(r));
+    return { rows: e, cols: t, data: o };
   },
   identity(e) {
     const t = this.create(e, e);
@@ -2126,45 +2185,45 @@ const UNITS = [
     if (e.rows !== t.rows || e.cols !== t.cols)
       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 o = 0; o < e.cols; o++)
-        r.data[a][o] = e.data[a][o] + t.data[a][o];
+    for (let o = 0; o < e.rows; o++)
+      for (let a = 0; a < e.cols; a++)
+        r.data[o][a] = e.data[o][a] + t.data[o][a];
     return r;
   },
   subtract(e, t) {
     if (e.rows !== t.rows || e.cols !== t.cols)
       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 o = 0; o < e.cols; o++)
-        r.data[a][o] = e.data[a][o] - t.data[a][o];
+    for (let o = 0; o < e.rows; o++)
+      for (let a = 0; a < e.cols; a++)
+        r.data[o][a] = e.data[o][a] - t.data[o][a];
     return r;
   },
   multiply(e, t) {
     if (e.cols !== t.rows)
       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 o = 0; o < t.cols; o++) {
+    for (let o = 0; o < e.rows; o++)
+      for (let a = 0; a < t.cols; a++) {
         let n = 0;
         for (let i = 0; i < e.cols; i++)
-          n += e.data[a][i] * t.data[i][o];
-        r.data[a][o] = n;
+          n += e.data[o][i] * t.data[i][a];
+        r.data[o][a] = n;
       }
     return r;
   },
   scalar(e, t) {
     const r = this.create(e.rows, e.cols);
-    for (let a = 0; a < e.rows; a++)
-      for (let o = 0; o < e.cols; o++)
-        r.data[a][o] = e.data[a][o] * t;
+    for (let o = 0; o < e.rows; o++)
+      for (let a = 0; a < e.cols; a++)
+        r.data[o][a] = e.data[o][a] * t;
     return r;
   },
   transpose(e) {
     const t = this.create(e.cols, e.rows);
     for (let r = 0; r < e.rows; r++)
-      for (let a = 0; a < e.cols; a++)
-        t.data[a][r] = e.data[r][a];
+      for (let o = 0; o < e.cols; o++)
+        t.data[o][r] = e.data[r][o];
     return t;
   },
   determinant(e) {
@@ -2180,29 +2239,29 @@ const UNITS = [
     return t;
   },
   minor(e, t, r) {
-    const a = this.create(e.rows - 1, e.cols - 1);
-    let o = 0;
+    const o = this.create(e.rows - 1, e.cols - 1);
+    let a = 0;
     for (let n = 0; n < e.rows; n++) {
       if (n === t)
         continue;
       let i = 0;
-      for (let l = 0; l < e.cols; l++)
-        l !== r && (a.data[o][i] = e.data[n][l], i++);
-      o++;
+      for (let c = 0; c < e.cols; c++)
+        c !== r && (o.data[a][i] = e.data[n][c], i++);
+      a++;
     }
-    return a;
+    return o;
   },
   inverse(e) {
     const t = this.determinant(e);
     if (t === 0)
       throw new Error("Matrix is singular, cannot compute inverse");
-    const r = e.rows, a = this.create(r, r);
-    for (let o = 0; o < r; o++)
+    const r = e.rows, o = this.create(r, r);
+    for (let a = 0; a < r; a++)
       for (let n = 0; n < r; n++) {
-        const i = Math.pow(-1, o + n), l = this.determinant(this.minor(e, o, n));
-        a.data[n][o] = i * l;
+        const i = Math.pow(-1, a + n), c = this.determinant(this.minor(e, a, n));
+        o.data[n][a] = i * c;
       }
-    return this.scalar(a, 1 / t);
+    return this.scalar(o, 1 / t);
   },
   trace(e) {
     if (e.rows !== e.cols)
@@ -2215,17 +2274,17 @@ 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], o = e.data[1][1], n = t + o, i = t * o - r * a, l = n * n - 4 * i;
-    if (l < 0)
+    const t = e.data[0][0], r = e.data[0][1], o = e.data[1][0], a = e.data[1][1], n = t + a, i = t * a - r * o, c = n * n - 4 * i;
+    if (c < 0)
       throw new Error("Complex eigenvalues not supported");
-    const p = Math.sqrt(l);
-    return [(n + p) / 2, (n - p) / 2];
+    const u = Math.sqrt(c);
+    return [(n + u) / 2, (n - u) / 2];
   },
   toString(e, t = 4) {
-    return e.data.map((r) => "[ " + r.map((a) => a.toFixed(t).padStart(10)).join(" ") + " ]").join(`
+    return e.data.map((r) => "[ " + r.map((o) => o.toFixed(t).padStart(10)).join(" ") + " ]").join(`
 `);
   }
-}, CalculusOps = {
+}, te = {
   /** Numerical derivative at a point */
   derivative(e, t, r = 1e-7) {
     return (e(t + r) - e(t - r)) / (2 * r);
@@ -2235,27 +2294,27 @@ const UNITS = [
     return (e(t + r) - 2 * e(t) + e(t - r)) / (r * r);
   },
   /** Numerical integration using Simpson's rule */
-  integrate(e, t, r, a = 1e3) {
-    a % 2 !== 0 && a++;
-    const o = (r - t) / a;
+  integrate(e, t, r, o = 1e3) {
+    o % 2 !== 0 && o++;
+    const a = (r - t) / o;
     let n = e(t) + e(r);
-    for (let i = 1; i < a; i++) {
-      const l = t + i * o;
-      n += i % 2 === 0 ? 2 * e(l) : 4 * e(l);
+    for (let i = 1; i < o; i++) {
+      const c = t + i * a;
+      n += i % 2 === 0 ? 2 * e(c) : 4 * e(c);
     }
-    return o / 3 * n;
+    return a / 3 * n;
   },
   /** Find root using Newton-Raphson method */
-  findRoot(e, t, r = 1e-10, a = 100) {
-    let o = t;
-    for (let n = 0; n < a; n++) {
-      const i = e(o);
+  findRoot(e, t, r = 1e-10, o = 100) {
+    let a = t;
+    for (let n = 0; n < o; n++) {
+      const i = e(a);
       if (Math.abs(i) < r)
-        return o;
-      const l = this.derivative(e, o);
-      if (l === 0)
+        return a;
+      const c = this.derivative(e, a);
+      if (c === 0)
         throw new Error("Derivative is zero, Newton-Raphson failed");
-      o = o - i / l;
+      a = a - i / c;
     }
     throw new Error("Newton-Raphson did not converge");
   },
@@ -2267,13 +2326,13 @@ const UNITS = [
       return "1";
     const t = e.match(/^x\^(\d+)$/);
     if (t) {
-      const a = parseInt(t[1], 10);
-      return a === 1 ? "1" : a === 2 ? "2*x" : `${a}*x^${a - 1}`;
+      const o = parseInt(t[1], 10);
+      return o === 1 ? "1" : o === 2 ? "2*x" : `${o}*x^${o - 1}`;
     }
     const r = e.match(/^(-?\d+\.?\d*)\*x\^(\d+)$/);
     if (r) {
-      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}`;
+      const o = parseFloat(r[1]), a = parseInt(r[2], 10), n = o * a;
+      return a === 1 ? String(n) : a === 2 ? `${n}*x` : `${n}*x^${a - 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})`;
   },
@@ -2292,48 +2351,64 @@ const UNITS = [
   },
   /** Solve quadratic equation ax² + bx + c = 0 */
   solveQuadratic(e, t, r) {
-    const a = t * t - 4 * e * r;
-    if (a < 0)
+    const o = t * t - 4 * e * r;
+    if (o < 0)
       throw new Error("No real solutions (complex roots)");
-    if (a === 0)
+    if (o === 0)
       return [-t / (2 * e)];
-    const o = Math.sqrt(a);
-    return [(-t + o) / (2 * e), (-t - o) / (2 * e)];
+    const a = Math.sqrt(o);
+    return [(-t + a) / (2 * e), (-t - a) / (2 * e)];
   }
 };
-class CalculatorService {
-  constructor(e = {}) {
-    M(this, "history", []);
-    M(this, "memory", 0);
-    M(this, "variables", /* @__PURE__ */ new Map());
-    M(this, "config");
+class Le {
+  constructor(t = {}) {
+    T(this, "history", []);
+    T(this, "memory", 0);
+    T(this, "variables", /* @__PURE__ */ new Map());
+    T(this, "config");
     this.config = {
-      precision: e.precision ?? 12,
-      angleUnit: e.angleUnit ?? "rad"
+      precision: t.precision ?? 12,
+      angleUnit: t.angleUnit ?? "rad"
     };
   }
-  /** Evaluate expression */
-  evaluate(expression) {
-    let expr = expression.replace(/π|pi/gi, String(Math.PI)).replace(/e(?![xp])/gi, String(Math.E)).replace(/\^/g, "**").replace(/√/g, "Math.sqrt").replace(/sin/gi, "Math.sin").replace(/cos/gi, "Math.cos").replace(/tan/gi, "Math.tan").replace(/asin/gi, "Math.asin").replace(/acos/gi, "Math.acos").replace(/atan/gi, "Math.atan").replace(/sinh/gi, "Math.sinh").replace(/cosh/gi, "Math.cosh").replace(/tanh/gi, "Math.tanh").replace(/log10/gi, "Math.log10").replace(/log2/gi, "Math.log2").replace(/ln/gi, "Math.log").replace(/log\b/gi, "Math.log10").replace(/exp/gi, "Math.exp").replace(/sqrt/gi, "Math.sqrt").replace(/cbrt/gi, "Math.cbrt").replace(/abs/gi, "Math.abs").replace(/floor/gi, "Math.floor").replace(/ceil/gi, "Math.ceil").replace(/round/gi, "Math.round").replace(/pow/gi, "Math.pow").replace(/min/gi, "Math.min").replace(/max/gi, "Math.max");
-    for (const [e, t] of this.variables)
-      expr = expr.replace(new RegExp(`\\b${e}\\b`, "g"), String(t));
+  /**
+   * Evaluate an expression — parsed by {@link ExpressionParser}, never run as code (until 1.2.0 a
+   * chain of regex replacements fed `new Function`: `asin` came out as `aMath.sin`, `ceil` lost
+   * its `e` to Euler's number, a result in exponent notation summed wrongly, and any text ran).
+   * `log` is base 10 like the key, `ln` natural; trig functions follow `angleUnit`.
+   */
+  evaluate(t) {
+    const r = this.config.angleUnit === "deg", o = (c) => r ? c * Math.PI / 180 : c, a = (c) => r ? c * 180 / Math.PI : c, n = new ie({
+      strict: !0,
+      ignoreCase: !0,
+      functions: {
+        log: Math.log10,
+        sin: (c) => Math.sin(o(c)),
+        cos: (c) => Math.cos(o(c)),
+        tan: (c) => Math.tan(o(c)),
+        asin: (c) => a(Math.asin(c)),
+        acos: (c) => a(Math.acos(c)),
+        atan: (c) => a(Math.atan(c))
+      }
+    });
+    let i;
     try {
-      const result = eval(expr);
-      if (typeof result != "number" || !Number.isFinite(result))
-        throw new Error("Invalid result");
-      return result;
-    } catch (e) {
-      throw new Error(`Invalid expression: ${e.message}`);
+      i = n.parse(t)(Object.fromEntries(this.variables));
+    } catch (c) {
+      throw new Error(`Invalid expression: ${c.message}`);
     }
+    if (!Number.isFinite(i))
+      throw new Error("Invalid expression: Invalid result");
+    return i;
   }
   /** Add to history */
-  addHistory(e, t, r) {
+  addHistory(t, r, o) {
     this.history.unshift({
       id: Date.now().toString(36),
-      expression: e,
-      result: t,
+      expression: t,
+      result: r,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      mode: r
+      mode: o
     }), this.history.length > 100 && this.history.pop();
   }
   /** Get history */
@@ -2345,67 +2420,67 @@ class CalculatorService {
     this.history = [];
   }
   /** Memory operations */
-  memoryStore(e) {
-    this.memory = e;
+  memoryStore(t) {
+    this.memory = t;
   }
   memoryRecall() {
     return this.memory;
   }
-  memoryAdd(e) {
-    this.memory += e;
+  memoryAdd(t) {
+    this.memory += t;
   }
   memoryClear() {
     this.memory = 0;
   }
   /** Variable operations */
-  setVariable(e, t) {
-    this.variables.set(e, t);
+  setVariable(t, r) {
+    this.variables.set(t, r);
   }
-  getVariable(e) {
-    return this.variables.get(e);
+  getVariable(t) {
+    return this.variables.get(t);
   }
   /** Convert between number bases */
-  convertBase(e, t, r) {
-    const a = { BIN: 2, OCT: 8, DEC: 10, HEX: 16 }, o = parseInt(e, a[t]);
-    if (isNaN(o))
+  convertBase(t, r, o) {
+    const a = { BIN: 2, OCT: 8, DEC: 10, HEX: 16 }, n = parseInt(t, a[r]);
+    if (isNaN(n))
       throw new Error("Invalid number for base conversion");
-    return o.toString(a[r]).toUpperCase();
+    return n.toString(a[o]).toUpperCase();
   }
   /** Convert units */
-  convertUnits(e, t, r) {
-    const a = UNITS.find((i) => i.symbol === t), o = UNITS.find((i) => i.symbol === r);
-    if (!a || !o)
+  convertUnits(t, r, o) {
+    const a = O.find((c) => c.symbol === r), n = O.find((c) => c.symbol === o);
+    if (!a || !n)
       throw new Error("Unknown unit");
-    if (a.category !== o.category)
+    if (a.category !== n.category)
       throw new Error("Cannot convert between different unit categories");
-    const n = a.toBase(e);
-    return o.fromBase(n);
+    const i = a.toBase(t);
+    return n.fromBase(i);
   }
   /** Get units by category */
-  getUnitsByCategory(e) {
-    return UNITS.filter((t) => t.category === e);
+  getUnitsByCategory(t) {
+    return O.filter((r) => r.category === t);
   }
   /** Get all unit categories */
   getUnitCategories() {
-    return [...new Set(UNITS.map((e) => e.category))];
+    return [...new Set(O.map((t) => t.category))];
   }
   /** Format number with precision */
-  format(e) {
-    const t = this.config.precision;
-    return Math.abs(e) < 1e-10 ? "0" : Math.abs(e) > 1e10 || Math.abs(e) < 1e-6 ? e.toExponential(t) : parseFloat(e.toPrecision(t)).toString();
+  format(t) {
+    const r = this.config.precision;
+    return Math.abs(t) < 1e-10 ? "0" : Math.abs(t) > 1e10 || Math.abs(t) < 1e-6 ? t.toExponential(r) : parseFloat(t.toPrecision(r)).toString();
   }
 }
-function createCalculatorService(e) {
-  return new CalculatorService(e);
+function ot(e) {
+  return new Le(e);
 }
-const CalculatorContext = createContext(null);
-function useCalculator() {
-  const e = useContext(CalculatorContext);
+const ce = /* @__PURE__ */ F(null);
+function N() {
+  const e = j(ce);
   if (!e)
     throw new Error("useCalculator must be used within CalculatorProvider");
   return e;
 }
-const styles$1 = {
+const B = {
   container: {
     width: "400px",
     fontFamily: "'Inter', sans-serif",
@@ -2460,52 +2535,52 @@ const styles$1 = {
     color: "var(--nice-text, #000)"
   },
   keyFunction: {
-    backgroundColor: "#505050"
+    backgroundColor: "var(--nice-bg-tertiary, #505050)"
   }
 };
-function NiceCalculator({
+function at({
   service: e,
   className: t,
   style: r
 }) {
-  const [a, o] = useState("0"), [n, i] = useState("standard"), [l, p] = useState([]), [s, d] = useState(!1), g = useCallback(
+  const [o, a] = P("0"), [n, i] = P("standard"), [c, u] = P([]), [s, p] = P(!1), m = R(
     (x) => {
-      s && /[0-9.]/.test(x) ? (o(x), d(!1)) : (o((f) => f === "0" && x !== "." ? x : f + x), d(!1));
+      s && /[0-9.]/.test(x) ? (a(x), p(!1)) : (a((b) => b === "0" && x !== "." ? x : b + x), p(!1));
     },
     [s]
-  ), y = useCallback(() => {
-    o("0"), d(!1);
-  }, []), h = useCallback(() => {
+  ), y = R(() => {
+    a("0"), p(!1);
+  }, []), f = R(() => {
     try {
-      const x = e.evaluate(a), f = e.format(x);
-      e.addHistory(a, f, n), p(e.getHistory()), o(f), d(!0);
+      const x = e.evaluate(o), b = e.format(x);
+      e.addHistory(o, b, n), u(e.getHistory()), a(b), p(!0);
     } catch {
-      o("Error"), d(!0);
+      a("Error"), p(!0);
     }
-  }, [a, n, e]), w = {
+  }, [o, n, e]), C = {
     service: e,
-    display: a,
-    setDisplay: o,
+    display: o,
+    setDisplay: a,
     mode: n,
     setMode: i,
-    history: l,
-    calculate: h,
-    appendDigit: g,
+    history: c,
+    calculate: f,
+    appendDigit: m,
     clear: y
   };
-  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, {}),
-    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, {})
+  return /* @__PURE__ */ d(ce.Provider, { value: C, children: /* @__PURE__ */ v("div", { className: t, style: { ...B.container, ...r }, children: [
+    /* @__PURE__ */ d(De, {}),
+    /* @__PURE__ */ d(qe, {}),
+    n === "standard" && /* @__PURE__ */ d(le, {}),
+    n === "scientific" && /* @__PURE__ */ d(Ne, {}),
+    n === "programmer" && /* @__PURE__ */ d(Xe, {}),
+    n === "matrix" && /* @__PURE__ */ d(Ge, {}),
+    n === "calculus" && /* @__PURE__ */ d(je, {}),
+    n === "units" && /* @__PURE__ */ d(Fe, {})
   ] }) });
 }
-function ModeSelector() {
-  const { mode: e, setMode: t } = useCalculator(), r = [
+function De() {
+  const { mode: e, setMode: t } = N(), r = [
     { id: "standard", label: "Standard" },
     { id: "scientific", label: "Scientific" },
     { id: "programmer", label: "Programmer" },
@@ -2513,61 +2588,61 @@ function ModeSelector() {
     { id: "calculus", label: "Calculus" },
     { id: "units", label: "Units" }
   ];
-  return /* @__PURE__ */ jsx("div", { style: styles$1.modeSelector, children: r.map((a) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ d("div", { style: B.modeSelector, children: r.map((o) => /* @__PURE__ */ d(
     "button",
     {
-      onClick: () => t(a.id),
+      onClick: () => t(o.id),
       style: {
-        ...styles$1.modeButton,
-        backgroundColor: e === a.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
-        color: e === a.id ? "var(--nice-color-white, #fff)" : "var(--nice-text-secondary, #888)"
+        ...B.modeButton,
+        backgroundColor: e === o.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
+        color: e === o.id ? "var(--nice-color-white, #fff)" : "var(--nice-text-secondary, #888)"
       },
-      children: a.label
+      children: o.label
     },
-    a.id
+    o.id
   )) });
 }
-function Display() {
-  const { display: e } = useCalculator();
-  return /* @__PURE__ */ jsx("div", { style: styles$1.display, children: /* @__PURE__ */ jsx("div", { style: styles$1.displayText, children: e }) });
+function qe() {
+  const { display: e } = N();
+  return /* @__PURE__ */ d("div", { style: B.display, children: /* @__PURE__ */ d("div", { style: B.displayText, children: e }) });
 }
-function StandardKeypad() {
-  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: o } = useCalculator(), n = [
-    { label: "AC", action: t, style: styles$1.keyFunction },
+function le() {
+  const { appendDigit: e, clear: t, calculate: r, setDisplay: o, display: a } = N(), n = [
+    { label: "AC", action: t, style: B.keyFunction },
     {
       label: "±",
-      action: () => a(o.startsWith("-") ? o.slice(1) : "-" + o),
-      style: styles$1.keyFunction
+      action: () => o(a.startsWith("-") ? a.slice(1) : "-" + a),
+      style: B.keyFunction
     },
-    { label: "%", action: () => e("/100"), style: styles$1.keyFunction },
-    { label: "÷", action: () => e("/"), style: styles$1.keyOperator },
+    { label: "%", action: () => e("/100"), style: B.keyFunction },
+    { label: "÷", action: () => e("/"), style: B.keyOperator },
     { label: "7", action: () => e("7") },
     { label: "8", action: () => e("8") },
     { label: "9", action: () => e("9") },
-    { label: "×", action: () => e("*"), style: styles$1.keyOperator },
+    { label: "×", action: () => e("*"), style: B.keyOperator },
     { label: "4", action: () => e("4") },
     { label: "5", action: () => e("5") },
     { label: "6", action: () => e("6") },
-    { label: "−", action: () => e("-"), style: styles$1.keyOperator },
+    { label: "−", action: () => e("-"), style: B.keyOperator },
     { label: "1", action: () => e("1") },
     { label: "2", action: () => e("2") },
     { label: "3", action: () => e("3") },
-    { label: "+", action: () => e("+"), style: styles$1.keyOperator },
+    { label: "+", action: () => e("+"), style: B.keyOperator },
     { label: "0", action: () => e("0") },
     { label: ".", action: () => e(".") },
-    { label: "⌫", action: () => a(o.length > 1 ? o.slice(0, -1) : "0") },
-    { label: "=", action: r, style: styles$1.keyOperator }
+    { label: "⌫", action: () => o(a.length > 1 ? a.slice(0, -1) : "0") },
+    { label: "=", action: r, style: B.keyOperator }
   ];
-  return /* @__PURE__ */ jsx("div", { style: styles$1.keypad, children: n.map((i, l) => /* @__PURE__ */ jsx("button", { onClick: i.action, style: { ...styles$1.key, ...i.style || {} }, children: i.label }, l)) });
+  return /* @__PURE__ */ d("div", { style: B.keypad, children: n.map((i, c) => /* @__PURE__ */ d("button", { onClick: i.action, style: { ...B.key, ...i.style || {} }, children: i.label }, c)) });
 }
-function ScientificKeypad() {
+function Ne() {
   const {
     appendDigit: e,
     clear: t,
     calculate: r,
-    setDisplay: a,
-    display: o
-  } = useCalculator(), n = [
+    setDisplay: o,
+    display: a
+  } = N(), n = [
     { label: "sin", action: () => e("sin(") },
     { label: "cos", action: () => e("cos(") },
     { label: "tan", action: () => e("tan(") },
@@ -2579,37 +2654,37 @@ function ScientificKeypad() {
     { label: "xʸ", action: () => e("^") },
     { label: "√", action: () => e("sqrt(") },
     { label: "eˣ", action: () => e("exp(") }
-  ], l = [
+  ], c = [
     { label: "(", action: () => e("(") },
     { label: ")", action: () => e(")") },
     { label: "π", action: () => e("π") },
     { label: "e", action: () => e("e") },
     { label: "AC", action: t }
   ];
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(5, 1fr)" }, children: [...n, ...i, ...l].map((p, s) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ v("div", { children: [
+    /* @__PURE__ */ d("div", { style: { ...B.keypad, gridTemplateColumns: "repeat(5, 1fr)" }, children: [...n, ...i, ...c].map((u, s) => /* @__PURE__ */ d(
       "button",
       {
-        onClick: p.action,
-        style: { ...styles$1.key, ...styles$1.keyFunction, padding: "12px" },
-        children: p.label
+        onClick: u.action,
+        style: { ...B.key, ...B.keyFunction, padding: "12px" },
+        children: u.label
       },
       s
     )) }),
-    /* @__PURE__ */ jsx(StandardKeypad, {})
+    /* @__PURE__ */ d(le, {})
   ] });
 }
-function ProgrammerKeypad() {
-  const { display: e, setDisplay: t, service: r } = useCalculator(), [a, o] = useState("DEC"), n = (l) => {
+function Xe() {
+  const { display: e, setDisplay: t, service: r } = N(), [o, a] = P("DEC"), n = (c) => {
     try {
-      const p = r.convertBase(e, a, l);
-      t(p), o(l);
+      const u = r.convertBase(e, o, c);
+      t(u), a(c);
     } catch {
       t("Error");
     }
-  }, i = a === "HEX" ? ["A", "B", "C", "D", "E", "F"] : [];
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
+  }, i = o === "HEX" ? ["A", "B", "C", "D", "E", "F"] : [];
+  return /* @__PURE__ */ v("div", { children: [
+    /* @__PURE__ */ d(
       "div",
       {
         style: {
@@ -2618,35 +2693,35 @@ function ProgrammerKeypad() {
           padding: "8px",
           backgroundColor: "var(--nice-bg-secondary, #252525)"
         },
-        children: ["BIN", "OCT", "DEC", "HEX"].map((l) => /* @__PURE__ */ jsx(
+        children: ["BIN", "OCT", "DEC", "HEX"].map((c) => /* @__PURE__ */ d(
           "button",
           {
-            onClick: () => n(l),
+            onClick: () => n(c),
             style: {
               flex: 1,
               padding: "8px",
               border: "none",
               borderRadius: "4px",
-              backgroundColor: a === l ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-border, #3c3c3c)",
+              backgroundColor: o === c ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-border, #3c3c3c)",
               color: "var(--nice-color-white, #fff)",
               cursor: "pointer"
             },
-            children: l
+            children: c
           },
-          l
+          c
         ))
       }
     ),
-    i.length > 0 && /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(6, 1fr)" }, children: i.map((l) => /* @__PURE__ */ jsx(
+    i.length > 0 && /* @__PURE__ */ d("div", { style: { ...B.keypad, gridTemplateColumns: "repeat(6, 1fr)" }, children: i.map((c) => /* @__PURE__ */ d(
       "button",
       {
-        onClick: () => t(e === "0" ? l : e + l),
-        style: styles$1.key,
-        children: l
+        onClick: () => t(e === "0" ? c : e + c),
+        style: B.key,
+        children: c
       },
-      l
+      c
     )) }),
-    /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(4, 1fr)" }, children: [
+    /* @__PURE__ */ d("div", { style: { ...B.keypad, gridTemplateColumns: "repeat(4, 1fr)" }, children: [
       "7",
       "8",
       "9",
@@ -2663,63 +2738,63 @@ function ProgrammerKeypad() {
       "NOT",
       "<<",
       ">>"
-    ].map((l) => {
-      const p = ["AND", "OR", "XOR", "NOT", "<<", ">>"].includes(l);
-      return /* @__PURE__ */ jsx(
+    ].map((c) => {
+      const u = ["AND", "OR", "XOR", "NOT", "<<", ">>"].includes(c);
+      return /* @__PURE__ */ d(
         "button",
         {
-          onClick: () => t(e === "0" ? l : e + l),
-          style: { ...styles$1.key, ...p ? styles$1.keyFunction : {} },
-          children: l
+          onClick: () => t(e === "0" ? c : e + c),
+          style: { ...B.key, ...u ? B.keyFunction : {} },
+          children: c
         },
-        l
+        c
       );
     }) })
   ] });
 }
-function MatrixMode() {
-  const { t: e } = useNiceTranslation(), [t, r] = useState(MatrixOps.create(2, 2)), [a, o] = useState(MatrixOps.create(2, 2)), [n, i] = useState(""), l = (s, d, g, y, h) => {
-    const w = { ...s, data: s.data.map((x) => [...x]) };
-    w.data[g][y] = parseFloat(h) || 0, d(w);
-  }, p = [
-    { 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)) }
+function Ge() {
+  const { t: e } = L(), [t, r] = P(z.create(2, 2)), [o, a] = P(z.create(2, 2)), [n, i] = P(""), c = (s, p, m, y, f) => {
+    const C = { ...s, data: s.data.map((x) => [...x]) };
+    C.data[m][y] = parseFloat(f) || 0, p(C);
+  }, u = [
+    { label: "A + B", fn: () => z.toString(z.add(t, o)) },
+    { label: "A - B", fn: () => z.toString(z.subtract(t, o)) },
+    { label: "A × B", fn: () => z.toString(z.multiply(t, o)) },
+    { label: "det(A)", fn: () => z.determinant(t).toFixed(4) },
+    { label: "Aᵀ", fn: () => z.toString(z.transpose(t)) },
+    { label: "A⁻¹", fn: () => z.toString(z.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: e("calculator.matrixA", "Matrix A") }),
-        /* @__PURE__ */ jsx(
-          MatrixInput,
+  return /* @__PURE__ */ v("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
+    /* @__PURE__ */ v("div", { style: { display: "flex", gap: "12px", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ v("div", { children: [
+        /* @__PURE__ */ d("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: e("calculator.matrixA", "Matrix A") }),
+        /* @__PURE__ */ d(
+          re,
           {
             matrix: t,
-            onChange: (s, d, g) => l(t, r, s, d, g)
+            onChange: (s, p, m) => c(t, r, s, p, m)
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: e("calculator.matrixB", "Matrix B") }),
-        /* @__PURE__ */ jsx(
-          MatrixInput,
+      /* @__PURE__ */ v("div", { children: [
+        /* @__PURE__ */ d("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: e("calculator.matrixB", "Matrix B") }),
+        /* @__PURE__ */ d(
+          re,
           {
-            matrix: a,
-            onChange: (s, d, g) => l(a, o, s, d, g)
+            matrix: o,
+            onChange: (s, p, m) => c(o, a, s, p, m)
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: p.map((s) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ d("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: u.map((s) => /* @__PURE__ */ d(
       "button",
       {
         onClick: () => {
           try {
             i(s.fn());
-          } catch (d) {
-            i(d.message);
+          } catch (p) {
+            i(p.message);
           }
         },
         style: {
@@ -2734,7 +2809,7 @@ function MatrixMode() {
       },
       s.label
     )) }),
-    n && /* @__PURE__ */ jsx(
+    n && /* @__PURE__ */ d(
       "pre",
       {
         style: {
@@ -2747,21 +2822,21 @@ function MatrixMode() {
     )
   ] });
 }
-function MatrixInput({
+function re({
   matrix: e,
   onChange: t
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ d(
     "div",
     {
       style: { display: "grid", gridTemplateColumns: `repeat(${e.cols}, 50px)`, gap: "4px" },
       children: e.data.map(
-        (r, a) => r.map((o, n) => /* @__PURE__ */ jsx(
+        (r, o) => r.map((a, n) => /* @__PURE__ */ d(
           "input",
           {
             type: "number",
-            value: o,
-            onChange: (i) => t(a, n, i.target.value),
+            value: a,
+            onChange: (i) => t(o, n, i.target.value),
             style: {
               width: "100%",
               padding: "4px",
@@ -2772,16 +2847,16 @@ function MatrixInput({
               borderRadius: "4px"
             }
           },
-          `${a}-${n}`
+          `${o}-${n}`
         ))
       )
     }
   );
 }
-function CalculusMode() {
-  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(
+function je() {
+  const { t: e } = L(), [t, r] = P("x^2"), [o, a] = P("");
+  return /* @__PURE__ */ v("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
+    /* @__PURE__ */ d(
       "input",
       {
         type: "text",
@@ -2799,11 +2874,11 @@ function CalculusMode() {
         }
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ v("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ d(
         "button",
         {
-          onClick: () => o(`d/dx(${t}) = ${CalculusOps.symbolicDerivative(t)}`),
+          onClick: () => a(`d/dx(${t}) = ${te.symbolicDerivative(t)}`),
           style: {
             padding: "8px 12px",
             backgroundColor: "var(--nice-success, #4caf50)",
@@ -2815,10 +2890,10 @@ function CalculusMode() {
           children: e("calculator.differentiate", "Differentiate")
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ d(
         "button",
         {
-          onClick: () => o(`∫(${t})dx = ${CalculusOps.symbolicIntegral(t)}`),
+          onClick: () => a(`∫(${t})dx = ${te.symbolicIntegral(t)}`),
           style: {
             padding: "8px 12px",
             backgroundColor: "var(--nice-primary, #2196f3)",
@@ -2831,7 +2906,7 @@ function CalculusMode() {
         }
       )
     ] }),
-    a && /* @__PURE__ */ jsx(
+    o && /* @__PURE__ */ d(
       "div",
       {
         style: {
@@ -2841,29 +2916,29 @@ function CalculusMode() {
           backgroundColor: "var(--nice-bg, #1e1e1e)",
           borderRadius: "4px"
         },
-        children: a
+        children: o
       }
     )
   ] });
 }
-function UnitsMode() {
-  const { t: e } = useNiceTranslation(), { service: t } = useCalculator(), [r, a] = useState("1"), [o, n] = useState("m"), [i, l] = useState("ft"), [p, s] = useState("Length"), [d, g] = useState(""), y = t.getUnitCategories(), h = t.getUnitsByCategory(p), w = () => {
+function Fe() {
+  const { t: e } = L(), { service: t } = N(), [r, o] = P("1"), [a, n] = P("m"), [i, c] = P("ft"), [u, s] = P("Length"), [p, m] = P(""), y = t.getUnitCategories(), f = t.getUnitsByCategory(u), C = () => {
     try {
-      const x = t.convertUnits(parseFloat(r), o, i);
-      g(`${r} ${o} = ${t.format(x)} ${i}`);
+      const x = t.convertUnits(parseFloat(r), a, i);
+      m(`${r} ${a} = ${t.format(x)} ${i}`);
     } catch (x) {
-      g(x.message);
+      m(x.message);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ v("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
+    /* @__PURE__ */ d(
       "select",
       {
-        value: p,
+        value: u,
         onChange: (x) => {
           s(x.target.value);
-          const f = t.getUnitsByCategory(x.target.value);
-          f.length >= 2 && (n(f[0].symbol), l(f[1].symbol));
+          const b = t.getUnitsByCategory(x.target.value);
+          b.length >= 2 && (n(b[0].symbol), c(b[1].symbol));
         },
         style: {
           width: "100%",
@@ -2874,16 +2949,16 @@ function UnitsMode() {
           border: "1px solid var(--nice-border-color, #555)",
           borderRadius: "4px"
         },
-        children: y.map((x) => /* @__PURE__ */ jsx("option", { value: x, children: x }, x))
+        children: y.map((x) => /* @__PURE__ */ d("option", { value: x, children: x }, x))
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ v("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ d(
         "input",
         {
           type: "number",
           value: r,
-          onChange: (x) => a(x.target.value),
+          onChange: (x) => o(x.target.value),
           style: {
             flex: 1,
             padding: "8px",
@@ -2894,10 +2969,10 @@ function UnitsMode() {
           }
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ d(
         "select",
         {
-          value: o,
+          value: a,
           onChange: (x) => n(x.target.value),
           style: {
             padding: "8px",
@@ -2906,7 +2981,7 @@ function UnitsMode() {
             border: "1px solid var(--nice-border-color, #555)",
             borderRadius: "4px"
           },
-          children: h.map((x) => /* @__PURE__ */ jsxs("option", { value: x.symbol, children: [
+          children: f.map((x) => /* @__PURE__ */ v("option", { value: x.symbol, children: [
             x.name,
             " (",
             x.symbol,
@@ -2915,13 +2990,13 @@ function UnitsMode() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
-      /* @__PURE__ */ jsx("span", { style: { color: "var(--nice-text-secondary, #888)" }, children: "→" }),
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ v("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ d("span", { style: { color: "var(--nice-text-secondary, #888)" }, children: /* @__PURE__ */ d(G, { name: "arrow-right", size: 12 }) }),
+      /* @__PURE__ */ d(
         "select",
         {
           value: i,
-          onChange: (x) => l(x.target.value),
+          onChange: (x) => c(x.target.value),
           style: {
             flex: 1,
             padding: "8px",
@@ -2930,7 +3005,7 @@ function UnitsMode() {
             border: "1px solid var(--nice-border-color, #555)",
             borderRadius: "4px"
           },
-          children: h.map((x) => /* @__PURE__ */ jsxs("option", { value: x.symbol, children: [
+          children: f.map((x) => /* @__PURE__ */ v("option", { value: x.symbol, children: [
             x.name,
             " (",
             x.symbol,
@@ -2939,10 +3014,10 @@ function UnitsMode() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ d(
       "button",
       {
-        onClick: w,
+        onClick: C,
         style: {
           width: "100%",
           padding: "12px",
@@ -2956,7 +3031,7 @@ function UnitsMode() {
         children: e("calculator.convert", "Convert")
       }
     ),
-    d && /* @__PURE__ */ jsx(
+    p && /* @__PURE__ */ d(
       "div",
       {
         style: {
@@ -2965,12 +3040,12 @@ function UnitsMode() {
           fontSize: "18px",
           textAlign: "center"
         },
-        children: d
+        children: p
       }
     )
   ] });
 }
-const GeoMath = {
+const E = {
   /** Distance between two points */
   distance(e, t) {
     return Math.sqrt((t.x - e.x) ** 2 + (t.y - e.y) ** 2);
@@ -2981,8 +3056,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 n = Math.atan2(r.y - t.y, r.x - t.x) - a;
+    const o = Math.atan2(e.y - t.y, e.x - t.x);
+    let n = Math.atan2(r.y - t.y, r.x - t.x) - o;
     return n < 0 && (n += 2 * Math.PI), n;
   },
   /** Angle in degrees */
@@ -2991,79 +3066,79 @@ const GeoMath = {
   },
   /** Point on line closest to given point */
   closestPointOnLine(e, t, r) {
-    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 };
+    const o = t.x - e.x, a = t.y - e.y, n = ((r.x - e.x) * o + (r.y - e.y) * a) / (o * o + a * a);
+    return { x: e.x + n * o, y: e.y + n * a };
   },
   /** Line-line intersection */
-  lineIntersection(e, t, r, a) {
-    const o = (e.x - t.x) * (r.y - a.y) - (e.y - t.y) * (r.x - a.x);
-    if (Math.abs(o) < 1e-10)
+  lineIntersection(e, t, r, o) {
+    const a = (e.x - t.x) * (r.y - o.y) - (e.y - t.y) * (r.x - o.x);
+    if (Math.abs(a) < 1e-10)
       return null;
-    const n = ((e.x - r.x) * (r.y - a.y) - (e.y - r.y) * (r.x - a.x)) / o;
+    const n = ((e.x - r.x) * (r.y - o.y) - (e.y - r.y) * (r.x - o.x)) / a;
     return {
       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 o = a.x - r.x, n = a.y - r.y, i = r.x - e.x, l = r.y - e.y, p = o * o + n * n, s = 2 * (i * o + l * n), d = i * i + l * l - t * t, g = s * s - 4 * p * d;
-    if (g < 0)
+  circleLineIntersection(e, t, r, o) {
+    const a = o.x - r.x, n = o.y - r.y, i = r.x - e.x, c = r.y - e.y, u = a * a + n * n, s = 2 * (i * a + c * n), p = i * i + c * c - t * t, m = s * s - 4 * u * p;
+    if (m < 0)
       return [];
-    const y = Math.sqrt(g), h = (-s - y) / (2 * p), w = (-s + y) / (2 * p), x = [];
-    return h >= 0 && h <= 1 && x.push({ x: r.x + h * o, y: r.y + h * n }), w >= 0 && w <= 1 && Math.abs(w - h) > 1e-10 && x.push({ x: r.x + w * o, y: r.y + w * n }), x;
+    const y = Math.sqrt(m), f = (-s - y) / (2 * u), C = (-s + y) / (2 * u), x = [];
+    return f >= 0 && f <= 1 && x.push({ x: r.x + f * a, y: r.y + f * n }), C >= 0 && C <= 1 && Math.abs(C - f) > 1e-10 && x.push({ x: r.x + C * a, y: r.y + C * n }), x;
   },
   /** Circle-circle intersection */
-  circleCircleIntersection(e, t, r, a) {
-    const o = this.distance(e, r);
-    if (o > t + a || o < Math.abs(t - a) || o === 0)
+  circleCircleIntersection(e, t, r, o) {
+    const a = this.distance(e, r);
+    if (a > t + o || a < Math.abs(t - o) || a === 0)
       return [];
-    const n = (t * t - a * a + o * o) / (2 * o), i = Math.sqrt(t * t - n * n), l = e.x + n * (r.x - e.x) / o, p = e.y + n * (r.y - e.y) / o;
+    const n = (t * t - o * o + a * a) / (2 * a), i = Math.sqrt(t * t - n * n), c = e.x + n * (r.x - e.x) / a, u = e.y + n * (r.y - e.y) / a;
     return [
-      { x: l + i * (r.y - e.y) / o, y: p - i * (r.x - e.x) / o },
-      { x: l - i * (r.y - e.y) / o, y: p + i * (r.x - e.x) / o }
+      { x: c + i * (r.y - e.y) / a, y: u - i * (r.x - e.x) / a },
+      { x: c - i * (r.y - e.y) / a, y: u + i * (r.x - e.x) / a }
     ];
   },
   /** Perpendicular line through point */
   perpendicularThrough(e, t, r) {
     this.closestPointOnLine(e, t, r);
-    const a = t.x - e.x, o = t.y - e.y;
+    const o = t.x - e.x, a = t.y - e.y;
     return {
       p1: r,
-      p2: { x: r.x - o, y: r.y + a }
+      p2: { x: r.x - a, y: r.y + o }
     };
   },
   /** Parallel line through point */
   parallelThrough(e, t, r) {
-    const a = t.x - e.x, o = t.y - e.y;
+    const o = t.x - e.x, a = t.y - e.y;
     return {
       p1: r,
-      p2: { x: r.x + a, y: r.y + o }
+      p2: { x: r.x + o, y: r.y + a }
     };
   },
   /** Angle bisector */
   angleBisector(e, t, r) {
-    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), {
+    const o = Math.atan2(e.y - t.y, e.x - t.x), a = Math.atan2(r.y - t.y, r.x - t.x);
+    let n = (o + a) / 2;
+    return Math.abs(a - o) > Math.PI && (n += Math.PI), {
       x: t.x + Math.cos(n),
       y: t.y + Math.sin(n)
     };
   },
   /** Reflect point over line */
   reflect(e, t, r) {
-    const a = this.closestPointOnLine(t, r, e);
+    const o = this.closestPointOnLine(t, r, e);
     return {
-      x: 2 * a.x - e.x,
-      y: 2 * a.y - e.y
+      x: 2 * o.x - e.x,
+      y: 2 * o.y - e.y
     };
   },
   /** Rotate point around center */
   rotate(e, t, r) {
-    const a = Math.cos(r), o = Math.sin(r), n = e.x - t.x, i = e.y - t.y;
+    const o = Math.cos(r), a = Math.sin(r), n = e.x - t.x, i = e.y - t.y;
     return {
-      x: t.x + n * a - i * o,
-      y: t.y + n * o + i * a
+      x: t.x + n * o - i * a,
+      y: t.y + n * a + i * o
     };
   },
   /** Translate point */
@@ -3081,9 +3156,9 @@ const GeoMath = {
   polygonArea(e) {
     let t = 0;
     const r = e.length;
-    for (let a = 0; a < r; a++) {
-      const o = (a + 1) % r;
-      t += e[a].x * e[o].y, t -= e[o].x * e[a].y;
+    for (let o = 0; o < r; o++) {
+      const a = (o + 1) % r;
+      t += e[o].x * e[a].y, t -= e[a].x * e[o].y;
     }
     return Math.abs(t) / 2;
   },
@@ -3091,23 +3166,23 @@ const GeoMath = {
   polygonPerimeter(e) {
     let t = 0;
     const r = e.length;
-    for (let a = 0; a < r; a++) {
-      const o = (a + 1) % r;
-      t += this.distance(e[a], e[o]);
+    for (let o = 0; o < r; o++) {
+      const a = (o + 1) % r;
+      t += this.distance(e[o], e[a]);
     }
     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)), 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 };
+    const o = 2 * (e.x * (t.y - r.y) + t.x * (r.y - e.y) + r.x * (e.y - t.y)), a = ((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)) / o, 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)) / o;
+    return { x: a, y: n };
   },
   /** Triangle incenter */
   incenter(e, t, r) {
-    const a = this.distance(e, t), o = this.distance(t, r), n = this.distance(r, e), i = a + o + n;
+    const o = this.distance(e, t), a = this.distance(t, r), n = this.distance(r, e), i = o + a + n;
     return {
-      x: (o * e.x + n * t.x + a * r.x) / i,
-      y: (o * e.y + n * t.y + a * r.y) / i
+      x: (a * e.x + n * t.x + o * r.x) / i,
+      y: (a * e.y + n * t.y + o * r.y) / i
     };
   },
   /** Triangle centroid */
@@ -3118,15 +3193,15 @@ const GeoMath = {
     };
   }
 };
-class GeometryService {
+class Oe {
   constructor() {
-    M(this, "elements", /* @__PURE__ */ new Map());
-    M(this, "nextLabel", 1);
+    T(this, "elements", /* @__PURE__ */ new Map());
+    T(this, "nextLabel", 1);
   }
   /** Add element */
   addElement(t) {
-    const r = this.generateId(), a = { ...t, id: r };
-    return this.elements.set(r, a), a;
+    const r = this.generateId(), o = { ...t, id: r };
+    return this.elements.set(r, o), o;
   }
   /** Get element */
   getElement(t) {
@@ -3139,15 +3214,15 @@ class GeometryService {
   }
   /** Update element */
   updateElement(t, r) {
-    const a = this.elements.get(t);
-    a && this.elements.set(t, { ...a, ...r, id: t, type: a.type });
+    const o = this.elements.get(t);
+    o && this.elements.set(t, { ...o, ...r, id: t, type: o.type });
   }
   /** Delete element */
   deleteElement(t) {
     var r;
     this.elements.delete(t);
-    for (const [a, o] of this.elements)
-      (r = o.dependencies) != null && r.includes(t) && this.deleteElement(a);
+    for (const [o, a] of this.elements)
+      (r = a.dependencies) != null && r.includes(t) && this.deleteElement(o);
   }
   /** Get all elements */
   getAllElements() {
@@ -3162,12 +3237,12 @@ class GeometryService {
     this.elements.clear(), this.nextLabel = 1;
   }
   /** Create point */
-  createPoint(t, r, a) {
+  createPoint(t, r, o) {
     return this.addElement({
       type: "point",
       x: t,
       y: r,
-      label: a ?? this.getNextLabel(),
+      label: o ?? this.getNextLabel(),
       color: { r: 0, g: 0, b: 0 },
       visible: !0,
       selected: !1,
@@ -3252,64 +3327,64 @@ class GeometryService {
   }
   /** Create midpoint */
   createMidpoint(t, r) {
-    const a = this.getPoint(t), o = this.getPoint(r);
-    if (!a || !o)
+    const o = this.getPoint(t), a = this.getPoint(r);
+    if (!o || !a)
       return null;
-    const n = GeoMath.midpoint(a, o), i = this.createPoint(n.x, n.y);
+    const n = E.midpoint(o, a), i = this.createPoint(n.x, n.y);
     return i.dependencies = [t, r], i.color = { r: 0, g: 150, b: 0 }, i;
   }
   /** Create perpendicular */
-  createPerpendicular(t, r, a) {
-    const o = this.getPoint(t), n = this.getPoint(r), i = this.getPoint(a);
-    if (!o || !n || !i)
+  createPerpendicular(t, r, o) {
+    const a = this.getPoint(t), n = this.getPoint(r), i = this.getPoint(o);
+    if (!a || !n || !i)
       return null;
-    const l = GeoMath.perpendicularThrough(o, n, i), p = this.createPoint(l.p2.x, l.p2.y), s = this.createLine(a, p.id);
-    return s.dependencies = [t, r, a], s;
+    const c = E.perpendicularThrough(a, n, i), u = this.createPoint(c.p2.x, c.p2.y), s = this.createLine(o, u.id);
+    return s.dependencies = [t, r, o], s;
   }
   /** Create parallel */
-  createParallel(t, r, a) {
-    const o = this.getPoint(t), n = this.getPoint(r), i = this.getPoint(a);
-    if (!o || !n || !i)
+  createParallel(t, r, o) {
+    const a = this.getPoint(t), n = this.getPoint(r), i = this.getPoint(o);
+    if (!a || !n || !i)
       return null;
-    const l = GeoMath.parallelThrough(o, n, i), p = this.createPoint(l.p2.x, l.p2.y), s = this.createLine(a, p.id);
-    return s.dependencies = [t, r, a], s;
+    const c = E.parallelThrough(a, n, i), u = this.createPoint(c.p2.x, c.p2.y), s = this.createLine(o, u.id);
+    return s.dependencies = [t, r, o], s;
   }
   /** Create intersection point */
   createIntersection(t, r) {
-    const a = this.elements.get(t), o = this.elements.get(r);
-    if (!a || !o)
+    const o = this.elements.get(t), a = this.elements.get(r);
+    if (!o || !a)
       return [];
     const n = [], i = (s) => {
       if (s.type === "line" || s.type === "segment" || s.type === "ray") {
-        const d = s, g = this.getPoint(d.point1Id ?? d.originId), y = this.getPoint(d.point2Id ?? d.throughId);
-        if (g && y)
-          return [g, y];
+        const p = s, m = this.getPoint(p.point1Id ?? p.originId), y = this.getPoint(p.point2Id ?? p.throughId);
+        if (m && y)
+          return [m, y];
       }
       return null;
-    }, l = i(a), p = i(o);
-    if (l && p) {
-      const s = GeoMath.lineIntersection(l[0], l[1], p[0], p[1]);
+    }, c = i(o), u = i(a);
+    if (c && u) {
+      const s = E.lineIntersection(c[0], c[1], u[0], u[1]);
       if (s) {
-        const d = this.createPoint(s.x, s.y);
-        d.dependencies = [t, r], d.color = { r: 255, g: 0, b: 0 }, n.push(d);
+        const p = this.createPoint(s.x, s.y);
+        p.dependencies = [t, r], p.color = { r: 255, g: 0, b: 0 }, n.push(p);
       }
     }
-    if (a.type === "circle" && p) {
-      const s = a, d = this.getPoint(s.centerId);
-      if (d) {
-        const g = GeoMath.circleLineIntersection(d, s.radius, p[0], p[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 (o.type === "circle" && u) {
+      const s = o, p = this.getPoint(s.centerId);
+      if (p) {
+        const m = E.circleLineIntersection(p, s.radius, u[0], u[1]);
+        for (const y of m) {
+          const f = this.createPoint(y.x, y.y);
+          f.dependencies = [t, r], f.color = { r: 255, g: 0, b: 0 }, n.push(f);
         }
       }
     }
-    if (a.type === "circle" && o.type === "circle") {
-      const s = a, d = o, g = this.getPoint(s.centerId), y = this.getPoint(d.centerId);
-      if (g && y) {
-        const h = GeoMath.circleCircleIntersection(g, s.radius, y, d.radius);
-        for (const w of h) {
-          const x = this.createPoint(w.x, w.y);
+    if (o.type === "circle" && a.type === "circle") {
+      const s = o, p = a, m = this.getPoint(s.centerId), y = this.getPoint(p.centerId);
+      if (m && y) {
+        const f = E.circleCircleIntersection(m, s.radius, y, p.radius);
+        for (const C of f) {
+          const x = this.createPoint(C.x, C.y);
           x.dependencies = [t, r], x.color = { r: 255, g: 0, b: 0 }, n.push(x);
         }
       }
@@ -3320,23 +3395,23 @@ class GeometryService {
   calculateMeasurement(t, r) {
     switch (t) {
       case "distance": {
-        const a = this.getPoint(r[0]), o = this.getPoint(r[1]);
-        if (a && o)
-          return GeoMath.distance(a, o);
+        const o = this.getPoint(r[0]), a = this.getPoint(r[1]);
+        if (o && a)
+          return E.distance(o, a);
         break;
       }
       case "angle": {
-        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);
+        const o = this.getPoint(r[0]), a = this.getPoint(r[1]), n = this.getPoint(r[2]);
+        if (o && a && n)
+          return E.angleDegrees(o, a, n);
         break;
       }
       case "area":
       case "perimeter": {
-        const a = this.elements.get(r[0]);
-        if ((a == null ? void 0 : a.type) === "polygon") {
-          const o = a.pointIds.map((n) => this.getPoint(n)).filter(Boolean);
-          return t === "area" ? GeoMath.polygonArea(o) : GeoMath.polygonPerimeter(o);
+        const o = this.elements.get(r[0]);
+        if ((o == null ? void 0 : o.type) === "polygon") {
+          const a = o.pointIds.map((n) => this.getPoint(n)).filter(Boolean);
+          return t === "area" ? E.polygonArea(a) : E.polygonPerimeter(a);
         }
         break;
       }
@@ -3344,76 +3419,76 @@ class GeometryService {
     return 0;
   }
   /** Export to SVG */
-  exportSVG(t, r, a) {
-    const o = [
+  exportSVG(t, r, o) {
+    const a = [
       `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${r}" viewBox="0 0 ${t} ${r}">`
     ];
-    o.push(
-      `<rect width="100%" height="100%" fill="rgb(${a.backgroundColor.r},${a.backgroundColor.g},${a.backgroundColor.b})"/>`
+    a.push(
+      `<rect width="100%" height="100%" fill="rgb(${o.backgroundColor.r},${o.backgroundColor.g},${o.backgroundColor.b})"/>`
     );
-    const n = (i, l) => ({
-      x: t / 2 + (i - a.centerX) * a.scale,
-      y: r / 2 - (l - a.centerY) * a.scale
+    const n = (i, c) => ({
+      x: t / 2 + (i - o.centerX) * o.scale,
+      y: r / 2 - (c - o.centerY) * o.scale
     });
-    if (a.showGrid) {
-      o.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
-      for (let i = Math.floor(-t / 2 / a.scale + a.centerX); i <= t / 2 / a.scale + a.centerX; i += a.gridSpacing) {
-        const l = n(i, 0);
-        o.push(`<line x1="${l.x}" y1="0" x2="${l.x}" y2="${r}"/>`);
+    if (o.showGrid) {
+      a.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
+      for (let i = Math.floor(-t / 2 / o.scale + o.centerX); i <= t / 2 / o.scale + o.centerX; i += o.gridSpacing) {
+        const c = n(i, 0);
+        a.push(`<line x1="${c.x}" y1="0" x2="${c.x}" y2="${r}"/>`);
       }
-      for (let i = Math.floor(-r / 2 / a.scale + a.centerY); i <= r / 2 / a.scale + a.centerY; i += a.gridSpacing) {
-        const l = n(0, i);
-        o.push(`<line x1="0" y1="${l.y}" x2="${t}" y2="${l.y}"/>`);
+      for (let i = Math.floor(-r / 2 / o.scale + o.centerY); i <= r / 2 / o.scale + o.centerY; i += o.gridSpacing) {
+        const c = n(0, i);
+        a.push(`<line x1="0" y1="${c.y}" x2="${t}" y2="${c.y}"/>`);
       }
-      o.push("</g>");
+      a.push("</g>");
     }
-    if (a.showAxes) {
+    if (o.showAxes) {
       const i = n(0, 0);
-      o.push('<g stroke="var(--nice-text, #333)" stroke-width="1">'), o.push(`<line x1="0" y1="${i.y}" x2="${t}" y2="${i.y}"/>`), o.push(`<line x1="${i.x}" y1="0" x2="${i.x}" y2="${r}"/>`), o.push("</g>");
+      a.push('<g stroke="var(--nice-text, #333)" stroke-width="1">'), a.push(`<line x1="0" y1="${i.y}" x2="${t}" y2="${i.y}"/>`), a.push(`<line x1="${i.x}" y1="0" x2="${i.x}" y2="${r}"/>`), a.push("</g>");
     }
     for (const i of this.getAllElements()) {
       if (!i.visible)
         continue;
-      const l = `rgb(${i.color.r},${i.color.g},${i.color.b})`;
+      const c = `rgb(${i.color.r},${i.color.g},${i.color.b})`;
       switch (i.type) {
         case "point": {
-          const p = n(i.x, i.y);
-          o.push(`<circle cx="${p.x}" cy="${p.y}" r="${i.size}" fill="${l}"/>`), i.label && o.push(`<text x="${p.x + 8}" y="${p.y - 8}" font-size="12">${i.label}</text>`);
+          const u = n(i.x, i.y);
+          a.push(`<circle cx="${u.x}" cy="${u.y}" r="${i.size}" fill="${c}"/>`), i.label && a.push(`<text x="${u.x + 8}" y="${u.y - 8}" font-size="12">${i.label}</text>`);
           break;
         }
         case "segment": {
-          const p = this.getPoint(i.point1Id), s = this.getPoint(i.point2Id);
-          if (p && s) {
-            const d = n(p.x, p.y), g = n(s.x, s.y);
-            o.push(
-              `<line x1="${d.x}" y1="${d.y}" x2="${g.x}" y2="${g.y}" stroke="${l}" stroke-width="${i.width}"/>`
+          const u = this.getPoint(i.point1Id), s = this.getPoint(i.point2Id);
+          if (u && s) {
+            const p = n(u.x, u.y), m = n(s.x, s.y);
+            a.push(
+              `<line x1="${p.x}" y1="${p.y}" x2="${m.x}" y2="${m.y}" stroke="${c}" stroke-width="${i.width}"/>`
             );
           }
           break;
         }
         case "circle": {
-          const p = this.getPoint(i.centerId);
-          if (p) {
-            const s = n(p.x, p.y), d = i.radius * a.scale, g = i.fill ? `rgba(${i.fill.r},${i.fill.g},${i.fill.b},${i.fill.a ?? 0.2})` : "none";
-            o.push(
-              `<circle cx="${s.x}" cy="${s.y}" r="${d}" fill="${g}" stroke="${l}" stroke-width="${i.width}"/>`
+          const u = this.getPoint(i.centerId);
+          if (u) {
+            const s = n(u.x, u.y), p = i.radius * o.scale, m = i.fill ? `rgba(${i.fill.r},${i.fill.g},${i.fill.b},${i.fill.a ?? 0.2})` : "none";
+            a.push(
+              `<circle cx="${s.x}" cy="${s.y}" r="${p}" fill="${m}" stroke="${c}" stroke-width="${i.width}"/>`
             );
           }
           break;
         }
         case "polygon": {
-          const p = i.pointIds.map((s) => this.getPoint(s)).filter(Boolean);
-          if (p.length > 0) {
-            const d = p.map((y) => n(y.x, y.y)).map((y, h) => `${h === 0 ? "M" : "L"}${y.x},${y.y}`).join(" ") + " Z", g = i.fill ? `rgba(${i.fill.r},${i.fill.g},${i.fill.b},${i.fill.a ?? 0.2})` : "none";
-            o.push(
-              `<path d="${d}" fill="${g}" stroke="${l}" stroke-width="${i.width}"/>`
+          const u = i.pointIds.map((s) => this.getPoint(s)).filter(Boolean);
+          if (u.length > 0) {
+            const p = u.map((y) => n(y.x, y.y)).map((y, f) => `${f === 0 ? "M" : "L"}${y.x},${y.y}`).join(" ") + " Z", m = i.fill ? `rgba(${i.fill.r},${i.fill.g},${i.fill.b},${i.fill.a ?? 0.2})` : "none";
+            a.push(
+              `<path d="${p}" fill="${m}" stroke="${c}" stroke-width="${i.width}"/>`
             );
           }
           break;
         }
       }
     }
-    return o.push("</svg>"), o.join(`
+    return a.push("</svg>"), a.join(`
 `);
   }
   generateId() {
@@ -3424,17 +3499,17 @@ class GeometryService {
     return this.nextLabel++, r < 26 ? t[r] : t[r % 26] + Math.floor(r / 26);
   }
 }
-function createGeometryService() {
-  return new GeometryService();
+function nt() {
+  return new Oe();
 }
-const GeometryContext = createContext(null);
-function useGeometry() {
-  const e = useContext(GeometryContext);
+const de = /* @__PURE__ */ F(null);
+function H() {
+  const e = j(de);
   if (!e)
     throw new Error("useGeometry must be used within GeometryProvider");
   return e;
 }
-const styles = {
+const q = {
   container: {
     display: "flex",
     height: "100%",
@@ -3483,14 +3558,14 @@ const styles = {
     color: "var(--nice-text-secondary, #666)"
   }
 };
-function NiceGeometry({
+function it({
   service: e,
   width: t = 800,
   height: r = 600,
-  className: a,
-  style: o
+  className: o,
+  style: a
 }) {
-  const [n, i] = useState([]), [l, p] = useState("point"), [s, d] = useState([]), [g, y] = useState({
+  const [n, i] = P([]), [c, u] = P("point"), [s, p] = P([]), [m, y] = P({
     centerX: 0,
     centerY: 0,
     scale: 40,
@@ -3500,35 +3575,35 @@ function NiceGeometry({
     snapToGrid: !0,
     snapToPoints: !0,
     backgroundColor: { r: 255, g: 255, b: 255 }
-  }), h = useCallback(() => {
+  }), f = R(() => {
     i(e.getAllElements());
-  }, [e]), w = useCallback((f) => {
-    y((c) => ({ ...c, ...f }));
+  }, [e]), C = R((b) => {
+    y((l) => ({ ...l, ...b }));
   }, []);
-  useEffect(() => {
-    h();
-  }, [h]);
+  V(() => {
+    f();
+  }, [f]);
   const x = {
     service: e,
     elements: n,
-    tool: l,
-    setTool: p,
-    view: g,
-    setView: w,
+    tool: c,
+    setTool: u,
+    view: m,
+    setView: C,
     selectedIds: s,
-    setSelectedIds: d,
-    refresh: h
+    setSelectedIds: p,
+    refresh: f
   };
-  return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: x, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles.container, ...o }, children: [
-    /* @__PURE__ */ jsx(Toolbar, {}),
-    /* @__PURE__ */ jsxs("div", { style: styles.main, children: [
-      /* @__PURE__ */ jsx(Canvas, { width: t, height: r }),
-      /* @__PURE__ */ jsx(StatusBar, { width: t, height: r })
+  return /* @__PURE__ */ d(de.Provider, { value: x, children: /* @__PURE__ */ v("div", { className: o, style: { ...q.container, ...a }, children: [
+    /* @__PURE__ */ d(Ue, {}),
+    /* @__PURE__ */ v("div", { style: q.main, children: [
+      /* @__PURE__ */ d(Ve, { width: t, height: r }),
+      /* @__PURE__ */ d(Ye, { width: t, height: r })
     ] })
   ] }) });
 }
-function Toolbar() {
-  const { tool: e, setTool: t } = useGeometry(), r = [
+function Ue() {
+  const { tool: e, setTool: t } = H(), r = [
     { id: "select", icon: "cursor", title: "Select" },
     { id: "point", icon: "•", title: "Point" },
     { id: "segment", icon: "—", title: "Segment" },
@@ -3545,205 +3620,208 @@ function Toolbar() {
     { id: "rotate", icon: "refresh", title: "Rotate" },
     { id: "measure", icon: "ruler", title: "Measure" }
   ];
-  return /* @__PURE__ */ jsx("div", { style: styles.toolbar, children: r.map((a) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ d("div", { style: q.toolbar, children: r.map((o) => /* @__PURE__ */ d(
     "button",
     {
-      onClick: () => t(a.id),
-      title: a.title,
+      onClick: () => t(o.id),
+      title: o.title,
       style: {
-        ...styles.toolButton,
-        backgroundColor: e === a.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
-        color: e === a.id ? "var(--nice-color-white, #fff)" : "var(--nice-text, #333)"
+        ...q.toolButton,
+        backgroundColor: e === o.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
+        color: e === o.id ? "var(--nice-color-white, #fff)" : "var(--nice-text, #333)"
       },
-      children: /^[a-z][a-z0-9-]*$/.test(a.icon) ? /* @__PURE__ */ jsx(NiceIcon$1, { name: a.icon, size: 16 }) : a.icon
+      children: /^[a-z][a-z0-9-]*$/.test(o.icon) ? /* @__PURE__ */ d(G, { name: o.icon, size: 16 }) : o.icon
     },
-    a.id
+    o.id
   )) });
 }
-function Canvas({ width: e, height: t }) {
-  const r = useRef(null), { service: a, elements: o, tool: n, view: i, selectedIds: l, setSelectedIds: p, refresh: s } = useGeometry(), [d, g] = useState([]), y = useCallback(
-    (f, c) => {
-      const u = (f - e / 2) / i.scale + i.centerX, b = -(c - t / 2) / i.scale + i.centerY;
+function Ve({ width: e, height: t }) {
+  const r = U(null), { service: o, elements: a, tool: n, view: i, selectedIds: c, setSelectedIds: u, refresh: s } = H(), [p, m] = P([]), y = R(
+    (b, l) => {
+      const g = (b - e / 2) / i.scale + i.centerX, w = -(l - t / 2) / i.scale + i.centerY;
       return i.snapToGrid ? {
-        x: Math.round(u / i.gridSpacing) * i.gridSpacing,
-        y: Math.round(b / i.gridSpacing) * i.gridSpacing
-      } : { x: u, y: b };
+        x: Math.round(g / i.gridSpacing) * i.gridSpacing,
+        y: Math.round(w / i.gridSpacing) * i.gridSpacing
+      } : { x: g, y: w };
     },
     [e, t, i]
-  ), h = useCallback(
-    (f, c) => ({
-      x: e / 2 + (f - i.centerX) * i.scale,
-      y: t / 2 - (c - i.centerY) * i.scale
+  ), f = R(
+    (b, l) => ({
+      x: e / 2 + (b - i.centerX) * i.scale,
+      y: t / 2 - (l - i.centerY) * i.scale
     }),
     [e, t, i]
-  ), w = useCallback(
-    (f) => {
-      var b;
-      const c = (b = r.current) == null ? void 0 : b.getBoundingClientRect();
-      if (!c)
+  ), C = R(
+    (b) => {
+      var w;
+      const l = (w = r.current) == null ? void 0 : w.getBoundingClientRect();
+      if (!l)
         return;
-      const u = y(f.clientX - c.left, f.clientY - c.top);
+      const g = y(b.clientX - l.left, b.clientY - l.top);
       switch (n) {
         case "point": {
-          a.createPoint(u.x, u.y), s();
+          o.createPoint(g.x, g.y), s();
           break;
         }
         case "segment":
         case "line":
         case "ray": {
-          const k = x(u);
-          if (k)
-            g((m) => {
-              const v = [...m, k.id];
-              return v.length === 2 ? (n === "segment" ? a.createSegment(v[0], v[1]) : n === "line" ? a.createLine(v[0], v[1]) : n === "ray" && a.createRay(v[0], v[1]), s(), []) : v;
+          const M = x(g);
+          if (M)
+            m((h) => {
+              const k = [...h, M.id];
+              return k.length === 2 ? (n === "segment" ? o.createSegment(k[0], k[1]) : n === "line" ? o.createLine(k[0], k[1]) : n === "ray" && o.createRay(k[0], k[1]), s(), []) : k;
             });
           else {
-            const m = a.createPoint(u.x, u.y);
-            g((v) => {
-              const C = [...v, m.id];
-              return C.length === 2 ? (n === "segment" ? a.createSegment(C[0], C[1]) : n === "line" ? a.createLine(C[0], C[1]) : n === "ray" && a.createRay(C[0], C[1]), s(), []) : C;
+            const h = o.createPoint(g.x, g.y);
+            m((k) => {
+              const S = [...k, h.id];
+              return S.length === 2 ? (n === "segment" ? o.createSegment(S[0], S[1]) : n === "line" ? o.createLine(S[0], S[1]) : n === "ray" && o.createRay(S[0], S[1]), s(), []) : S;
             }), s();
           }
           break;
         }
         case "circle": {
-          const k = x(u);
-          if (k)
-            g((m) => {
-              if (m.length === 0)
-                return [k.id];
-              const v = a.getPoint(m[0]);
-              if (v) {
-                const C = GeoMath.distance(v, u);
-                a.createCircle(m[0], C), s();
+          const M = x(g);
+          if (M)
+            m((h) => {
+              if (h.length === 0)
+                return [M.id];
+              const k = o.getPoint(h[0]);
+              if (k) {
+                const S = E.distance(k, g);
+                o.createCircle(h[0], S), s();
               }
               return [];
             });
-          else if (d.length === 1) {
-            const m = a.getPoint(d[0]);
-            if (m) {
-              const v = GeoMath.distance(m, u);
-              a.createCircle(d[0], v), s(), g([]);
+          else if (p.length === 1) {
+            const h = o.getPoint(p[0]);
+            if (h) {
+              const k = E.distance(h, g);
+              o.createCircle(p[0], k), s(), m([]);
             }
           } else {
-            const m = a.createPoint(u.x, u.y);
-            g([m.id]), s();
+            const h = o.createPoint(g.x, g.y);
+            m([h.id]), s();
           }
           break;
         }
         case "midpoint": {
-          const k = x(u);
-          k && g((m) => {
-            const v = [...m, k.id];
-            return v.length === 2 ? (a.createMidpoint(v[0], v[1]), s(), []) : v;
+          const M = x(g);
+          M && m((h) => {
+            const k = [...h, M.id];
+            return k.length === 2 ? (o.createMidpoint(k[0], k[1]), s(), []) : k;
           });
           break;
         }
         case "select": {
-          const k = x(u);
-          p(k ? [k.id] : []);
+          const M = x(g);
+          u(M ? [M.id] : []);
           break;
         }
       }
     },
-    [n, a, s, y, d, p]
-  ), x = (f) => {
-    for (const u of o)
-      if (u.type === "point" && GeoMath.distance(u, f) < 0.5)
-        return u;
+    [n, o, s, y, p, u]
+  ), x = (b) => {
+    for (const g of a)
+      if (g.type === "point" && E.distance(g, b) < 0.5)
+        return g;
   };
-  return useEffect(() => {
-    const f = r.current, c = f == null ? void 0 : f.getContext("2d");
-    if (!(!f || !c)) {
-      if (c.fillStyle = `rgb(${i.backgroundColor.r},${i.backgroundColor.g},${i.backgroundColor.b})`, c.fillRect(0, 0, e, t), i.showGrid) {
-        c.strokeStyle = resolveCssColor("var(--nice-border, #e0e0e0)", c.canvas), c.lineWidth = 0.5;
-        const u = i.gridSpacing * i.scale, b = (e / 2 - i.centerX * i.scale) % u, k = (t / 2 + i.centerY * i.scale) % u;
-        for (let m = b; m < e; m += u)
-          c.beginPath(), c.moveTo(m, 0), c.lineTo(m, t), c.stroke();
-        for (let m = k; m < t; m += u)
-          c.beginPath(), c.moveTo(0, m), c.lineTo(e, m), c.stroke();
+  return V(() => {
+    const b = r.current, l = b == null ? void 0 : b.getContext("2d");
+    if (!(!b || !l)) {
+      if (l.fillStyle = `rgb(${i.backgroundColor.r},${i.backgroundColor.g},${i.backgroundColor.b})`, l.fillRect(0, 0, e, t), i.showGrid) {
+        l.strokeStyle = I("var(--nice-border, #e0e0e0)", l.canvas), l.lineWidth = 0.5;
+        const g = i.gridSpacing * i.scale, w = (e / 2 - i.centerX * i.scale) % g, M = (t / 2 + i.centerY * i.scale) % g;
+        for (let h = w; h < e; h += g)
+          l.beginPath(), l.moveTo(h, 0), l.lineTo(h, t), l.stroke();
+        for (let h = M; h < t; h += g)
+          l.beginPath(), l.moveTo(0, h), l.lineTo(e, h), l.stroke();
       }
       if (i.showAxes) {
-        const u = h(0, 0);
-        c.strokeStyle = resolveCssColor("var(--nice-text, #333)", c.canvas), c.lineWidth = 1, c.beginPath(), c.moveTo(0, u.y), c.lineTo(e, u.y), c.stroke(), c.beginPath(), c.moveTo(u.x, 0), c.lineTo(u.x, t), c.stroke();
+        const g = f(0, 0);
+        l.strokeStyle = I("var(--nice-text, #333)", l.canvas), l.lineWidth = 1, l.beginPath(), l.moveTo(0, g.y), l.lineTo(e, g.y), l.stroke(), l.beginPath(), l.moveTo(g.x, 0), l.lineTo(g.x, t), l.stroke();
       }
-      for (const u of o) {
-        if (!u.visible)
+      for (const g of a) {
+        if (!g.visible)
           continue;
-        const b = `rgb(${u.color.r},${u.color.g},${u.color.b})`, k = l.includes(u.id);
-        switch (u.type) {
+        const w = `rgb(${g.color.r},${g.color.g},${g.color.b})`, M = c.includes(g.id);
+        switch (g.type) {
           case "point": {
-            const m = h(u.x, u.y);
-            c.beginPath(), c.arc(m.x, m.y, k ? u.size + 2 : u.size, 0, 2 * Math.PI), c.fillStyle = k ? resolveCssColor("var(--nice-primary-hover, #1976d2)", c.canvas) : b, c.fill(), u.label && (c.fillStyle = resolveCssColor("var(--nice-text, #333)", c.canvas), c.font = "12px sans-serif", c.fillText(u.label, m.x + 8, m.y - 8));
+            const h = f(g.x, g.y);
+            l.beginPath(), l.arc(h.x, h.y, M ? g.size + 2 : g.size, 0, 2 * Math.PI), l.fillStyle = M ? I("var(--nice-primary-hover, #1976d2)", l.canvas) : w, l.fill(), g.label && (l.fillStyle = I("var(--nice-text, #333)", l.canvas), l.font = "12px sans-serif", l.fillText(g.label, h.x + 8, h.y - 8));
             break;
           }
           case "segment": {
-            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();
+            const h = o.getPoint(g.point1Id), k = o.getPoint(g.point2Id);
+            if (h && k) {
+              const S = f(h.x, h.y), D = f(k.x, k.y);
+              l.strokeStyle = w, l.lineWidth = g.width, l.beginPath(), l.moveTo(S.x, S.y), l.lineTo(D.x, D.y), l.stroke();
             }
             break;
           }
           case "line": {
-            const m = a.getPoint(u.point1Id), v = a.getPoint(u.point2Id);
-            if (m && v) {
-              const C = v.x - m.x, S = v.y - m.y, P = -1e3, j = 1e3, $ = h(m.x + P * C, m.y + P * S), B = h(m.x + j * C, m.y + j * S);
-              c.strokeStyle = b, c.lineWidth = u.width, c.beginPath(), c.moveTo($.x, $.y), c.lineTo(B.x, B.y), c.stroke();
+            const h = o.getPoint(g.point1Id), k = o.getPoint(g.point2Id);
+            if (h && k) {
+              const S = k.x - h.x, D = k.y - h.y, _ = -1e3, K = 1e3, Z = f(h.x + _ * S, h.y + _ * D), Q = f(h.x + K * S, h.y + K * D);
+              l.strokeStyle = w, l.lineWidth = g.width, l.beginPath(), l.moveTo(Z.x, Z.y), l.lineTo(Q.x, Q.y), l.stroke();
             }
             break;
           }
           case "circle": {
-            const m = a.getPoint(u.centerId);
-            if (m) {
-              const v = h(m.x, m.y), C = u.radius * i.scale;
-              c.beginPath(), c.arc(v.x, v.y, C, 0, 2 * Math.PI), u.fill && (c.fillStyle = `rgba(${u.fill.r},${u.fill.g},${u.fill.b},${u.fill.a ?? 0.2})`, c.fill()), c.strokeStyle = b, c.lineWidth = u.width, c.stroke();
+            const h = o.getPoint(g.centerId);
+            if (h) {
+              const k = f(h.x, h.y), S = g.radius * i.scale;
+              l.beginPath(), l.arc(k.x, k.y, S, 0, 2 * Math.PI), g.fill && (l.fillStyle = `rgba(${g.fill.r},${g.fill.g},${g.fill.b},${g.fill.a ?? 0.2})`, l.fill()), l.strokeStyle = w, l.lineWidth = g.width, l.stroke();
             }
             break;
           }
           case "polygon": {
-            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);
+            const h = g.pointIds.map((k) => o.getPoint(k)).filter(Boolean);
+            if (h.length > 0) {
+              l.beginPath();
+              const k = f(h[0].x, h[0].y);
+              l.moveTo(k.x, k.y);
+              for (let S = 1; S < h.length; S++) {
+                const D = f(h[S].x, h[S].y);
+                l.lineTo(D.x, D.y);
               }
-              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();
+              l.closePath(), g.fill && (l.fillStyle = `rgba(${g.fill.r},${g.fill.g},${g.fill.b},${g.fill.a ?? 0.2})`, l.fill()), l.strokeStyle = w, l.lineWidth = g.width, l.stroke();
             }
             break;
           }
         }
       }
-      if (d.length > 0) {
-        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();
+      if (p.length > 0) {
+        l.fillStyle = I(
+          "var(--nice-primary-tint-30, rgba(25, 118, 210, 0.3))",
+          l.canvas
+        );
+        for (const g of p) {
+          const w = o.getPoint(g);
+          if (w) {
+            const M = f(w.x, w.y);
+            l.beginPath(), l.arc(M.x, M.y, 12, 0, 2 * Math.PI), l.fill();
           }
         }
       }
     }
-  }, [o, i, e, t, l, d, a, h]), /* @__PURE__ */ jsx(
+  }, [a, i, e, t, c, p, o, f]), /* @__PURE__ */ d(
     "canvas",
     {
       ref: r,
       width: e,
       height: t,
-      style: styles.canvas,
-      onClick: w
+      style: q.canvas,
+      onClick: C
     }
   );
 }
-function StatusBar({
+function Ye({
   width: e,
   height: t
 }) {
-  const { tool: r, elements: a, view: o, service: n } = useGeometry(), [i, l] = useState(null), p = {
+  const { tool: r, elements: o, view: a, service: n } = H(), [i, c] = P(null), u = {
     select: "Select",
     point: "Point",
     line: "Line",
@@ -3765,56 +3843,56 @@ function StatusBar({
     dilate: "Dilate",
     measure: "Measure",
     text: "Text"
-  }, s = a.filter((d) => d.type === "point").length;
-  return /* @__PURE__ */ jsxs("div", { style: styles.statusBar, children: [
-    /* @__PURE__ */ jsxs("span", { children: [
+  }, s = o.filter((p) => p.type === "point").length;
+  return /* @__PURE__ */ v("div", { style: q.statusBar, children: [
+    /* @__PURE__ */ v("span", { children: [
       "Tool: ",
-      p[r]
+      u[r]
     ] }),
-    /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
-    /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ d("span", { style: { margin: "0 16px" }, children: "|" }),
+    /* @__PURE__ */ v("span", { children: [
       "Objects: ",
-      a.length
+      o.length
     ] }),
-    /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
-    /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ d("span", { style: { margin: "0 16px" }, children: "|" }),
+    /* @__PURE__ */ v("span", { children: [
       "Points: ",
       s
     ] }),
-    /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
-    /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ d("span", { style: { margin: "0 16px" }, children: "|" }),
+    /* @__PURE__ */ v("span", { children: [
       "Scale: ",
-      o.scale.toFixed(1),
+      a.scale.toFixed(1),
       "x"
     ] })
   ] });
 }
 export {
-  CalculatorService,
-  CalculusOps,
-  EQUATION_TEMPLATES,
-  ExpressionParser,
-  FUNCTION_PRESETS,
-  GeoMath,
-  GeometryService,
-  GraphService,
-  MATH_SYMBOLS,
-  MathEditorService,
-  MatrixOps,
-  NiceCalculator,
-  NiceGeometry,
-  NiceGraphPlotter,
-  NiceI18nProvider,
-  NiceMathEditor,
-  createCalculatorService,
-  createGeometryService,
-  createGraphService,
-  createMathEditorService,
-  getSymbolsByCategory,
-  recognizeHandwriting,
-  useCalculator,
-  useGeometry,
-  useGraph,
-  useMathEditor,
-  useNiceTranslation
+  Le as CalculatorService,
+  te as CalculusOps,
+  we as EQUATION_TEMPLATES,
+  ie as ExpressionParser,
+  ee as FUNCTION_PRESETS,
+  E as GeoMath,
+  Oe as GeometryService,
+  Te as GraphService,
+  be as MATH_SYMBOLS,
+  ke as MathEditorService,
+  z as MatrixOps,
+  at as NiceCalculator,
+  it as NiceGeometry,
+  rt as NiceGraphPlotter,
+  Qe as NiceI18nProvider,
+  et as NiceMathEditor,
+  ot as createCalculatorService,
+  nt as createGeometryService,
+  tt as createGraphService,
+  Je as createMathEditorService,
+  ve as getSymbolsByCategory,
+  Ce as recognizeHandwriting,
+  N as useCalculator,
+  H as useGeometry,
+  Y as useGraph,
+  W as useMathEditor,
+  L as useNiceTranslation
 };