@nice2dev/ui-math 1.0.11 → 1.0.14

package/dist/index.mjs

@@ -267,16 +267,16 @@ class MathEditorService {
   }
   /** Update equation */
   updateEquation(t, r, a) {
-    const o = this.equations.get(t);
-    if (!o)
+    const n = this.equations.get(t);
+    if (!n)
       throw new Error(`Equation not found: ${t}`);
-    const n = {
-      ...o,
+    const o = {
+      ...n,
       latex: r,
-      label: a ?? o.label,
+      label: a ?? n.label,
       updatedAt: (/* @__PURE__ */ new Date()).toISOString()
     };
-    return this.equations.set(t, n), n;
+    return this.equations.set(t, o), o;
   }
   /** Delete equation */
   deleteEquation(t) {
@@ -310,12 +310,12 @@ 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 n = /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g;
-    for (; (o = n.exec(t)) !== null; ) {
-      const s = o[1].match(/\\label\{([^}]+)\}/), c = o[1].replace(/\\label\{[^}]+\}/, "").trim();
+    let n;
+    for (; (n = a.exec(t)) !== null; )
+      r.push(this.createEquation(n[1].trim()));
+    const o = /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g;
+    for (; (n = o.exec(t)) !== null; ) {
+      const s = n[1].match(/\\label\{([^}]+)\}/), c = n[1].replace(/\\label\{[^}]+\}/, "").trim();
       r.push(this.createEquation(c, s == null ? void 0 : s[1]));
     }
     return r;
@@ -353,8 +353,8 @@ const styles$3 = {
     display: "flex",
     gap: "8px",
     padding: "8px",
-    borderBottom: "1px solid #e0e0e0",
-    backgroundColor: "#fafafa",
+    borderBottom: "1px solid var(--nice-border, #e0e0e0)",
+    backgroundColor: "var(--nice-bg-secondary, #fafafa)",
     flexWrap: "wrap",
     alignItems: "center"
   },
@@ -365,9 +365,9 @@ const styles$3 = {
   },
   sidebar: {
     width: "200px",
-    borderRight: "1px solid #e0e0e0",
+    borderRight: "1px solid var(--nice-border, #e0e0e0)",
     overflow: "auto",
-    backgroundColor: "#f5f5f5"
+    backgroundColor: "var(--nice-bg-secondary, #f5f5f5)"
   },
   editor: {
     flex: 1,
@@ -382,15 +382,15 @@ const styles$3 = {
     padding: "12px",
     fontFamily: "'JetBrains Mono', monospace",
     fontSize: "14px",
-    border: "1px solid #ddd",
+    border: "1px solid var(--nice-border, #ddd)",
     borderRadius: "4px",
     resize: "vertical"
   },
   preview: {
     marginTop: "16px",
     padding: "20px",
-    backgroundColor: "#fff",
-    border: "1px solid #e0e0e0",
+    backgroundColor: "var(--nice-bg, #fff)",
+    border: "1px solid var(--nice-border, #e0e0e0)",
     borderRadius: "4px",
     minHeight: "60px",
     fontSize: "20px",
@@ -398,7 +398,7 @@ const styles$3 = {
   },
   button: {
     padding: "6px 12px",
-    backgroundColor: "#1976d2",
+    backgroundColor: "var(--nice-primary-hover, #1976d2)",
     color: "white",
     border: "none",
     borderRadius: "4px",
@@ -413,16 +413,16 @@ const styles$3 = {
   },
   symbolButton: {
     padding: "8px",
-    border: "1px solid #ddd",
+    border: "1px solid var(--nice-border, #ddd)",
     borderRadius: "4px",
-    backgroundColor: "#fff",
+    backgroundColor: "var(--nice-bg, #fff)",
     cursor: "pointer",
     fontSize: "16px",
     textAlign: "center"
   },
   categoryHeader: {
     padding: "8px 12px",
-    backgroundColor: "#e0e0e0",
+    backgroundColor: "var(--nice-border, #e0e0e0)",
     fontWeight: 600,
     fontSize: "12px",
     textTransform: "uppercase"
@@ -430,9 +430,9 @@ const styles$3 = {
   canvas: {
     width: "100%",
     height: "200px",
-    border: "1px solid #ddd",
+    border: "1px solid var(--nice-border, #ddd)",
     borderRadius: "4px",
-    backgroundColor: "#fff",
+    backgroundColor: "var(--nice-bg, #fff)",
     cursor: "crosshair"
   }
 };
@@ -441,9 +441,9 @@ function NiceMathEditor({
   initialLatex: t = "",
   onChange: r,
   className: a,
-  style: o
+  style: n
 }) {
-  const [n, s] = useState(t), [c, l] = useState("input"), i = useRef(null), d = useCallback(
+  const [o, s] = useState(t), [c, l] = useState("input"), i = useRef(null), d = useCallback(
     (y) => {
       s(y), r == null || r(y);
     },
@@ -452,15 +452,15 @@ function NiceMathEditor({
     (y) => {
       const g = i.current;
       if (!g) {
-        d(n + y);
+        d(o + y);
         return;
       }
-      const m = g.selectionStart, p = g.selectionEnd, x = n.slice(0, m) + y + n.slice(p);
+      const m = g.selectionStart, p = g.selectionEnd, x = o.slice(0, m) + y + o.slice(p);
       d(x), setTimeout(() => {
         g.focus(), g.selectionStart = g.selectionEnd = m + y.length;
       }, 0);
     },
-    [n, d]
+    [o, d]
   ), h = useCallback(
     (y) => {
       u(y.latex);
@@ -468,14 +468,14 @@ function NiceMathEditor({
     [u]
   ), b = {
     service: e,
-    latex: n,
+    latex: o,
     setLatex: d,
     insertSymbol: u,
     insertTemplate: h,
     mode: c,
     setMode: l
   };
-  return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value: b, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$3.container, ...o }, children: [
+  return /* @__PURE__ */ jsx(MathEditorContext.Provider, { value: b, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$3.container, ...n }, children: [
     /* @__PURE__ */ jsx(Toolbar$1, {}),
     /* @__PURE__ */ jsxs("div", { style: styles$3.main, children: [
       /* @__PURE__ */ jsx(SymbolPalette, {}),
@@ -484,19 +484,19 @@ function NiceMathEditor({
           "textarea",
           {
             ref: i,
-            value: n,
+            value: o,
             onChange: (y) => d(y.target.value),
             placeholder: "Enter LaTeX equation...",
             style: styles$3.input
           }
         ),
-        /* @__PURE__ */ jsx(LatexPreview, { latex: n })
+        /* @__PURE__ */ jsx(LatexPreview, { latex: o })
       ] }) : /* @__PURE__ */ jsx(HandwritingCanvas, {}) })
     ] })
   ] }) });
 }
 function Toolbar$1() {
-  const { mode: e, setMode: t, latex: r, insertTemplate: a } = useMathEditor(), [o, n] = useState(!1);
+  const { mode: e, setMode: t, latex: r, insertTemplate: a } = useMathEditor(), [n, o] = useState(!1);
   return /* @__PURE__ */ jsxs("div", { style: styles$3.toolbar, children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -504,7 +504,7 @@ function Toolbar$1() {
         onClick: () => t("input"),
         style: {
           ...styles$3.button,
-          backgroundColor: e === "input" ? "#1976d2" : "#9e9e9e"
+          backgroundColor: e === "input" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-text-secondary, #9e9e9e)"
         },
         children: "⌨️ LaTeX Input"
       }
@@ -515,25 +515,25 @@ function Toolbar$1() {
         onClick: () => t("handwriting"),
         style: {
           ...styles$3.button,
-          backgroundColor: e === "handwriting" ? "#1976d2" : "#9e9e9e"
+          backgroundColor: e === "handwriting" ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-text-secondary, #9e9e9e)"
         },
         children: "✏️ Handwriting"
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { borderLeft: "1px solid #ccc", height: "24px", margin: "0 8px" } }),
+    /* @__PURE__ */ jsx("div", { style: { borderLeft: "1px solid var(--nice-border, #ccc)", height: "24px", margin: "0 8px" } }),
     /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx("button", { onClick: () => n(!o), style: styles$3.button, children: "📐 Templates ▾" }),
-      o && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("button", { onClick: () => o(!n), style: styles$3.button, children: "📐 Templates ▾" }),
+      n && /* @__PURE__ */ jsx(
         "div",
         {
           style: {
             position: "absolute",
             top: "100%",
             left: 0,
-            backgroundColor: "#fff",
-            border: "1px solid #ddd",
+            backgroundColor: "var(--nice-bg, #fff)",
+            border: "1px solid var(--nice-border, #ddd)",
             borderRadius: "4px",
-            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+            boxShadow: "0 2px 8px var(--nice-overlay-15, rgba(0, 0, 0, 0.15))",
             zIndex: 100,
             width: "300px",
             maxHeight: "400px",
@@ -546,18 +546,18 @@ function Toolbar$1() {
                 "div",
                 {
                   onClick: () => {
-                    a(c), n(!1);
+                    a(c), o(!1);
                   },
                   style: {
                     padding: "8px 12px",
                     cursor: "pointer",
-                    borderBottom: "1px solid #eee"
+                    borderBottom: "1px solid var(--nice-border, #eee)"
                   },
-                  onMouseOver: (l) => l.target.style.backgroundColor = "#f5f5f5",
+                  onMouseOver: (l) => l.target.style.backgroundColor = "var(--nice-bg-secondary, #f5f5f5)",
                   onMouseOut: (l) => l.target.style.backgroundColor = "transparent",
                   children: [
                     /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: c.name }),
-                    /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "#666", fontFamily: "monospace" }, children: [
+                    /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", fontFamily: "monospace" }, children: [
                       c.latex.substring(0, 40),
                       c.latex.length > 40 ? "..." : ""
                     ] })
@@ -575,7 +575,7 @@ function Toolbar$1() {
       "button",
       {
         onClick: () => navigator.clipboard.writeText(r),
-        style: { ...styles$3.button, backgroundColor: "#4caf50" },
+        style: { ...styles$3.button, backgroundColor: "var(--nice-success, #4caf50)" },
         children: "📋 Copy LaTeX"
       }
     )
@@ -594,45 +594,45 @@ function SymbolPalette() {
     "logic",
     "calculus",
     "matrices"
-  ], o = getSymbolsByCategory(t);
+  ], n = 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(
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", padding: "8px", gap: "4px" }, children: a.map((o) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => r(n),
+        onClick: () => r(o),
         style: {
           padding: "4px 8px",
           fontSize: "11px",
-          border: "1px solid #ddd",
+          border: "1px solid var(--nice-border, #ddd)",
           borderRadius: "4px",
-          backgroundColor: t === n ? "#1976d2" : "#fff",
-          color: t === n ? "#fff" : "#333",
+          backgroundColor: t === o ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-bg, #fff)",
+          color: t === o ? "var(--nice-bg, #fff)" : "var(--nice-text, #333)",
           cursor: "pointer"
         },
-        children: n
+        children: o
       },
-      n
+      o
     )) }),
-    /* @__PURE__ */ jsx("div", { style: styles$3.symbolGrid, children: o.map((n) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: styles$3.symbolGrid, children: n.map((o) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => e(n.latex),
+        onClick: () => e(o.latex),
         style: styles$3.symbolButton,
-        title: `${n.name}: ${n.latex}`,
-        children: n.preview || n.latex
+        title: `${o.name}: ${o.latex}`,
+        children: o.preview || o.latex
       },
-      n.name
+      o.name
     )) })
   ] });
 }
 function LatexPreview({ latex: e }) {
   return /* @__PURE__ */ jsxs("div", { style: styles$3.preview, children: [
-    /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "#666", marginBottom: "8px" }, children: "Preview (requires KaTeX/MathJax integration):" }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", marginBottom: "8px" }, children: "Preview (requires KaTeX/MathJax integration):" }),
     /* @__PURE__ */ jsx("code", { style: { fontSize: "16px" }, children: e || "(empty)" })
   ] });
 }
 function HandwritingCanvas() {
-  const { setLatex: e, setMode: t } = useMathEditor(), r = useRef(null), [a, o] = useState([]), [n, s] = useState([]), [c, l] = useState(!1), [i, d] = useState(!1), u = (m) => {
+  const { setLatex: e, setMode: t } = useMathEditor(), r = useRef(null), [a, n] = useState([]), [o, s] = useState([]), [c, l] = useState(!1), [i, d] = useState(!1), u = (m) => {
     const p = r.current;
     if (!p)
       return;
@@ -658,24 +658,24 @@ function HandwritingCanvas() {
       pressure: m.pressure,
       timestamp: Date.now()
     };
-    if (s((f) => [...f, k]), n.length > 0) {
-      const f = n[n.length - 1];
-      x.beginPath(), x.moveTo(f.x, f.y), x.lineTo(k.x, k.y), x.strokeStyle = "#000", x.lineWidth = 2, x.lineCap = "round", x.stroke();
+    if (s((f) => [...f, k]), o.length > 0) {
+      const f = o[o.length - 1];
+      x.beginPath(), x.moveTo(f.x, f.y), x.lineTo(k.x, k.y), x.strokeStyle = "var(--nice-text, #000)", x.lineWidth = 2, x.lineCap = "round", x.stroke();
     }
   }, b = () => {
     if (c) {
-      if (l(!1), n.length > 1) {
+      if (l(!1), o.length > 1) {
         const m = {
           id: Date.now().toString(),
-          points: [...n]
+          points: [...o]
         };
-        o((p) => [...p, m]);
+        n((p) => [...p, m]);
       }
       s([]);
     }
   }, y = () => {
     const m = r.current, p = m == null ? void 0 : m.getContext("2d");
-    p && m && p.clearRect(0, 0, m.width, m.height), o([]);
+    p && m && p.clearRect(0, 0, m.width, m.height), n([]);
   }, g = async () => {
     if (a.length !== 0) {
       d(!0);
@@ -703,7 +703,7 @@ function HandwritingCanvas() {
       }
     ),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "12px" }, children: [
-      /* @__PURE__ */ jsx("button", { onClick: y, style: { ...styles$3.button, backgroundColor: "#f44336" }, children: "Clear" }),
+      /* @__PURE__ */ jsx("button", { onClick: y, style: { ...styles$3.button, backgroundColor: "var(--nice-danger, #f44336)" }, children: "Clear" }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -714,7 +714,7 @@ function HandwritingCanvas() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#666", marginTop: "8px" }, children: "Draw your equation above. Handwriting recognition requires external API integration." })
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", marginTop: "8px" }, children: "Draw your equation above. Handwriting recognition requires external API integration." })
   ] });
 }
 const mathConstants = {
@@ -816,10 +816,10 @@ class ExpressionParser {
       const a = r[1];
       if (this.pos += a.length, this.expr[this.pos] === "(") {
         this.pos++;
-        const o = [];
+        const n = [];
         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 };
+          n.push(this.parseAddSub()), this.expr[this.pos] === "," && this.pos++;
+        return this.expr[this.pos] === ")" && this.pos++, { type: "call", name: a, args: n };
       }
       return { type: "variable", name: a };
     }
@@ -836,18 +836,18 @@ class ExpressionParser {
       case "unary":
         return t.op === "-" ? -this.evaluate(t.arg, r) : this.evaluate(t.arg, r);
       case "binary": {
-        const a = this.evaluate(t.left, r), o = this.evaluate(t.right, r);
+        const a = this.evaluate(t.left, r), n = this.evaluate(t.right, r);
         switch (t.op) {
           case "+":
-            return a + o;
+            return a + n;
           case "-":
-            return a - o;
+            return a - n;
           case "*":
-            return a * o;
+            return a * n;
           case "/":
-            return a / o;
+            return a / n;
           case "^":
-            return Math.pow(a, o);
+            return Math.pow(a, n);
           default:
             return 0;
         }
@@ -856,8 +856,8 @@ class ExpressionParser {
         const a = mathFunctions[t.name];
         if (!a)
           throw new Error(`Unknown function: ${t.name}`);
-        const o = t.args.map((n) => this.evaluate(n, r));
-        return a(...o);
+        const n = t.args.map((o) => this.evaluate(o, r));
+        return a(...n);
       }
       default:
         return 0;
@@ -897,8 +897,8 @@ class GraphService {
     const a = this.plots.get(t);
     if (!a)
       throw new Error(`Plot not found: ${t}`);
-    const o = { ...a, ...r, id: a.id };
-    return this.plots.set(t, o), o;
+    const n = { ...a, ...r, id: a.id };
+    return this.plots.set(t, n), n;
   }
   /** Remove a plot */
   removePlot(t) {
@@ -913,12 +913,12 @@ class GraphService {
     return this.plots.get(t);
   }
   /** Compute 2D function points */
-  compute2DFunction(t, r, a, o) {
-    const n = this.parser.parse(t), s = [], c = (r.max - r.min) / a;
+  compute2DFunction(t, r, a, n) {
+    const o = this.parser.parse(t), s = [], c = (r.max - r.min) / a;
     for (let l = 0; l <= a; l++) {
       const i = r.min + l * c;
       try {
-        const d = n({ x: i, ...o });
+        const d = o({ x: i, ...n });
         Number.isFinite(d) && s.push({ x: i, y: d });
       } catch {
       }
@@ -926,12 +926,12 @@ class GraphService {
     return s;
   }
   /** Compute 2D parametric curve */
-  compute2DParametric(t, r, a, o, n) {
-    const s = this.parser.parse(t), c = this.parser.parse(r), l = [], i = (a.max - a.min) / o;
-    for (let d = 0; d <= o; d++) {
+  compute2DParametric(t, r, a, n, o) {
+    const s = this.parser.parse(t), c = this.parser.parse(r), l = [], i = (a.max - a.min) / n;
+    for (let d = 0; d <= n; d++) {
       const u = a.min + d * i;
       try {
-        const h = s({ t: u, ...n }), b = c({ t: u, ...n });
+        const h = s({ t: u, ...o }), b = c({ t: u, ...o });
         Number.isFinite(h) && Number.isFinite(b) && l.push({ x: h, y: b });
       } catch {
       }
@@ -939,12 +939,12 @@ class GraphService {
     return l;
   }
   /** Compute 2D polar curve */
-  compute2DPolar(t, r, a, o) {
-    const n = this.parser.parse(t), s = [], c = (r.max - r.min) / a;
+  compute2DPolar(t, r, a, n) {
+    const o = this.parser.parse(t), s = [], c = (r.max - r.min) / a;
     for (let l = 0; l <= a; l++) {
       const i = r.min + l * c;
       try {
-        const d = n({ theta: i, t: i, ...o });
+        const d = o({ theta: i, t: i, ...n });
         if (Number.isFinite(d)) {
           const u = d * Math.cos(i), h = d * Math.sin(i);
           s.push({ x: u, y: h });
@@ -955,14 +955,14 @@ class GraphService {
     return s;
   }
   /** Compute 3D surface points */
-  compute3DSurface(t, r, a, o, n) {
-    const s = this.parser.parse(t), c = [], l = (r.max - r.min) / o, i = (a.max - a.min) / o;
-    for (let d = 0; d <= o; d++) {
+  compute3DSurface(t, r, a, n, o) {
+    const s = this.parser.parse(t), c = [], l = (r.max - r.min) / n, i = (a.max - a.min) / n;
+    for (let d = 0; d <= n; d++) {
       const u = [], h = r.min + d * l;
-      for (let b = 0; b <= o; b++) {
+      for (let b = 0; b <= n; b++) {
         const y = a.min + b * i;
         try {
-          const g = s({ x: h, y, ...n });
+          const g = s({ x: h, y, ...o });
           Number.isFinite(g) ? u.push({ x: h, y, z: g }) : u.push({ x: h, y, z: 0 });
         } catch {
           u.push({ x: h, y, z: 0 });
@@ -973,16 +973,16 @@ class GraphService {
     return c;
   }
   /** Export plot data as SVG */
-  exportSVG(t, r, a, o) {
-    const s = a - 80, c = o - 40 * 2, l = (u) => 40 + (u - r.xRange.min) / (r.xRange.max - r.xRange.min) * s, i = (u) => o - 40 - (u - r.yRange.min) / (r.yRange.max - r.yRange.min) * c, d = [
-      `<svg xmlns="http://www.w3.org/2000/svg" width="${a}" height="${o}">`,
+  exportSVG(t, r, a, n) {
+    const s = a - 80, c = n - 40 * 2, l = (u) => 40 + (u - r.xRange.min) / (r.xRange.max - r.xRange.min) * s, i = (u) => n - 40 - (u - r.yRange.min) / (r.yRange.max - r.yRange.min) * c, d = [
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${a}" height="${n}">`,
       `<rect width="100%" height="100%" fill="rgb(${r.backgroundColor.r},${r.backgroundColor.g},${r.backgroundColor.b})"/>`
     ];
     if (r.showGrid) {
-      d.push('<g stroke="#ddd" stroke-width="0.5">');
+      d.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
       for (let u = Math.ceil(r.xRange.min); u <= r.xRange.max; u++) {
         const h = l(u);
-        d.push(`<line x1="${h}" y1="40" x2="${h}" y2="${o - 40}"/>`);
+        d.push(`<line x1="${h}" y1="40" x2="${h}" y2="${n - 40}"/>`);
       }
       for (let u = Math.ceil(r.yRange.min); u <= r.yRange.max; u++) {
         const h = i(u);
@@ -991,9 +991,9 @@ class GraphService {
       d.push("</g>");
     }
     if (r.showAxes) {
-      d.push('<g stroke="#333" stroke-width="1">');
+      d.push('<g stroke="var(--nice-text, #333)" stroke-width="1">');
       const u = i(0), h = l(0);
-      d.push(`<line x1="40" y1="${u}" x2="${a - 40}" y2="${u}"/>`), d.push(`<line x1="${h}" y1="40" x2="${h}" y2="${o - 40}"/>`), d.push("</g>");
+      d.push(`<line x1="40" y1="${u}" x2="${a - 40}" y2="${u}"/>`), d.push(`<line x1="${h}" y1="40" x2="${h}" y2="${n - 40}"/>`), d.push("</g>");
     }
     for (const u of t.filter((h) => h.visible))
       if (u.type === "2d-function") {
@@ -1006,27 +1006,27 @@ class GraphService {
         }
       }
     return r.showLabels && (d.push(
-      `<text x="${a / 2}" y="${o - 10}" text-anchor="middle" font-size="12">x</text>`
+      `<text x="${a / 2}" y="${n - 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>`
+      `<text x="10" y="${n / 2}" text-anchor="middle" font-size="12" transform="rotate(-90,10,${n / 2})">y</text>`
     )), d.push("</svg>"), d.join(`
 `);
   }
   /** Export as PNG (data URL) */
-  async exportPNG(t, r, a, o) {
-    const n = this.exportSVG(t, r, a, o);
+  async exportPNG(t, r, a, n) {
+    const o = this.exportSVG(t, r, a, n);
     return new Promise((s, c) => {
       const l = new Image();
       l.onload = () => {
         const i = document.createElement("canvas");
-        i.width = a, i.height = o;
+        i.width = a, i.height = n;
         const d = i.getContext("2d");
         if (!d) {
           c(new Error("Could not get canvas context"));
           return;
         }
         d.drawImage(l, 0, 0), s(i.toDataURL("image/png"));
-      }, l.onerror = c, l.src = "data:image/svg+xml;base64," + btoa(n);
+      }, l.onerror = c, l.src = "data:image/svg+xml;base64," + btoa(o);
     });
   }
   generateId() {
@@ -1135,7 +1135,7 @@ const styles$2 = {
   },
   sidebar: {
     width: "280px",
-    borderRight: "1px solid #e0e0e0",
+    borderRight: "1px solid var(--nice-border, #e0e0e0)",
     display: "flex",
     flexDirection: "column",
     overflow: "hidden"
@@ -1149,22 +1149,22 @@ const styles$2 = {
     flex: 1,
     display: "flex",
     flexDirection: "column",
-    backgroundColor: "#fff"
+    backgroundColor: "var(--nice-bg, #fff)"
   },
   canvas: {
     flex: 1,
-    backgroundColor: "#fff"
+    backgroundColor: "var(--nice-bg, #fff)"
   },
   toolbar: {
     display: "flex",
     gap: "8px",
     padding: "8px",
-    borderBottom: "1px solid #e0e0e0",
+    borderBottom: "1px solid var(--nice-border, #e0e0e0)",
     alignItems: "center"
   },
   button: {
     padding: "6px 12px",
-    backgroundColor: "#1976d2",
+    backgroundColor: "var(--nice-primary-hover, #1976d2)",
     color: "white",
     border: "none",
     borderRadius: "4px",
@@ -1173,16 +1173,16 @@ const styles$2 = {
   },
   input: {
     padding: "6px 8px",
-    border: "1px solid #ddd",
+    border: "1px solid var(--nice-border, #ddd)",
     borderRadius: "4px",
     fontSize: "13px"
   },
   plotItem: {
     padding: "8px",
     marginBottom: "8px",
-    border: "1px solid #e0e0e0",
+    border: "1px solid var(--nice-border, #e0e0e0)",
     borderRadius: "4px",
-    backgroundColor: "#fafafa"
+    backgroundColor: "var(--nice-bg-secondary, #fafafa)"
   }
 };
 function NiceGraphPlotter({
@@ -1190,9 +1190,9 @@ function NiceGraphPlotter({
   width: t = 800,
   height: r = 600,
   className: a,
-  style: o
+  style: n
 }) {
-  const [n, s] = useState([]), [c, l] = useState({
+  const [o, s] = useState([]), [c, l] = useState({
     xRange: { min: -10, max: 10 },
     yRange: { min: -10, max: 10 },
     zRange: { min: -5, max: 5 },
@@ -1233,7 +1233,7 @@ function NiceGraphPlotter({
     [e, u]
   ), p = {
     service: e,
-    plots: n,
+    plots: o,
     view: c,
     setView: h,
     addPlot: y,
@@ -1243,7 +1243,7 @@ function NiceGraphPlotter({
     setAnimation: b,
     refresh: u
   };
-  return /* @__PURE__ */ jsx(GraphContext.Provider, { value: p, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$2.container, ...o }, children: [
+  return /* @__PURE__ */ jsx(GraphContext.Provider, { value: p, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles$2.container, ...n }, children: [
     /* @__PURE__ */ jsxs("div", { style: styles$2.sidebar, children: [
       /* @__PURE__ */ jsx(PlotControls, {}),
       /* @__PURE__ */ jsx(PlotList, {})
@@ -1255,11 +1255,11 @@ function NiceGraphPlotter({
   ] }) });
 }
 function PlotControls() {
-  const { addPlot: e } = useGraph(), [t, r] = useState("sin(x)"), [a, o] = useState("2d-function"), [n, s] = useState("cos(x)"), c = () => {
+  const { addPlot: e } = useGraph(), [t, r] = useState("sin(x)"), [a, n] = useState("2d-function"), [o, s] = useState("cos(x)"), c = () => {
     e({
       type: a,
       expression: t,
-      expressionY: a === "2d-parametric" ? n : void 0,
+      expressionY: a === "2d-parametric" ? o : void 0,
       color: {
         r: Math.floor(Math.random() * 200),
         g: Math.floor(Math.random() * 200),
@@ -1267,12 +1267,12 @@ function PlotControls() {
       }
     });
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", borderBottom: "1px solid #e0e0e0" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", borderBottom: "1px solid var(--nice-border, #e0e0e0)" }, children: [
     /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsxs(
       "select",
       {
         value: a,
-        onChange: (l) => o(l.target.value),
+        onChange: (l) => n(l.target.value),
         style: { ...styles$2.input, width: "100%" },
         children: [
           /* @__PURE__ */ jsx("option", { value: "2d-function", children: "y = f(x)" }),
@@ -1296,7 +1296,7 @@ function PlotControls() {
       "input",
       {
         type: "text",
-        value: n,
+        value: o,
         onChange: (l) => s(l.target.value),
         placeholder: "y(t) = ...",
         style: { ...styles$2.input, width: "100%" }
@@ -1337,7 +1337,7 @@ function PlotControls() {
 function PlotList() {
   const { plots: e, removePlot: t, updatePlot: r } = useGraph();
   return /* @__PURE__ */ jsxs("div", { style: styles$2.plotList, children: [
-    e.length === 0 && /* @__PURE__ */ jsx("div", { style: { color: "#666", textAlign: "center", padding: "16px" }, children: "No plots added yet" }),
+    e.length === 0 && /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #666)", textAlign: "center", padding: "16px" }, children: "No plots added yet" }),
     e.map((a) => /* @__PURE__ */ jsxs("div", { style: styles$2.plotItem, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" }, children: [
         /* @__PURE__ */ jsx(
@@ -1345,7 +1345,7 @@ function PlotList() {
           {
             type: "checkbox",
             checked: a.visible,
-            onChange: (o) => r(a.id, { visible: o.target.checked })
+            onChange: (n) => r(a.id, { visible: n.target.checked })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1366,7 +1366,7 @@ function PlotList() {
             onClick: () => t(a.id),
             style: {
               padding: "2px 6px",
-              backgroundColor: "#f44336",
+              backgroundColor: "var(--nice-danger, #f44336)",
               color: "white",
               border: "none",
               borderRadius: "3px",
@@ -1377,7 +1377,7 @@ function PlotList() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "#666", fontFamily: "monospace" }, children: a.type === "2d-parametric" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--nice-text-secondary, #666)", fontFamily: "monospace" }, children: a.type === "2d-parametric" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         "x(t) = ",
         a.expression,
         /* @__PURE__ */ jsx("br", {}),
@@ -1388,11 +1388,11 @@ function PlotList() {
   ] });
 }
 function GraphToolbar({ width: e, height: t }) {
-  const { service: r, plots: a, view: o, setView: n } = useGraph(), s = () => {
-    const l = r.exportSVG(a, o, e, t), i = new Blob([l], { type: "image/svg+xml" }), d = URL.createObjectURL(i), u = document.createElement("a");
+  const { service: r, plots: a, view: n, setView: o } = useGraph(), s = () => {
+    const l = r.exportSVG(a, n, e, t), i = new Blob([l], { type: "image/svg+xml" }), d = URL.createObjectURL(i), u = document.createElement("a");
     u.href = d, u.download = "graph.svg", u.click(), URL.revokeObjectURL(d);
   }, c = async () => {
-    const l = await r.exportPNG(a, o, e, t), i = document.createElement("a");
+    const l = await r.exportPNG(a, n, e, t), i = document.createElement("a");
     i.href = l, i.download = "graph.png", i.click();
   };
   return /* @__PURE__ */ jsxs("div", { style: styles$2.toolbar, children: [
@@ -1403,8 +1403,8 @@ function GraphToolbar({ width: e, height: t }) {
         "input",
         {
           type: "number",
-          value: o.xRange.min,
-          onChange: (l) => n({ xRange: { ...o.xRange, min: Number(l.target.value) } }),
+          value: n.xRange.min,
+          onChange: (l) => o({ xRange: { ...n.xRange, min: Number(l.target.value) } }),
           style: { ...styles$2.input, width: "50px" }
         }
       ),
@@ -1414,8 +1414,8 @@ function GraphToolbar({ width: e, height: t }) {
         "input",
         {
           type: "number",
-          value: o.xRange.max,
-          onChange: (l) => n({ xRange: { ...o.xRange, max: Number(l.target.value) } }),
+          value: n.xRange.max,
+          onChange: (l) => o({ xRange: { ...n.xRange, max: Number(l.target.value) } }),
           style: { ...styles$2.input, width: "50px" }
         }
       ),
@@ -1428,8 +1428,8 @@ function GraphToolbar({ width: e, height: t }) {
         "input",
         {
           type: "number",
-          value: o.yRange.min,
-          onChange: (l) => n({ yRange: { ...o.yRange, min: Number(l.target.value) } }),
+          value: n.yRange.min,
+          onChange: (l) => o({ yRange: { ...n.yRange, min: Number(l.target.value) } }),
           style: { ...styles$2.input, width: "50px" }
         }
       ),
@@ -1439,8 +1439,8 @@ function GraphToolbar({ width: e, height: t }) {
         "input",
         {
           type: "number",
-          value: o.yRange.max,
-          onChange: (l) => n({ yRange: { ...o.yRange, max: Number(l.target.value) } }),
+          value: n.yRange.max,
+          onChange: (l) => o({ yRange: { ...n.yRange, max: Number(l.target.value) } }),
           style: { ...styles$2.input, width: "50px" }
         }
       ),
@@ -1451,8 +1451,8 @@ function GraphToolbar({ width: e, height: t }) {
         "input",
         {
           type: "checkbox",
-          checked: o.showGrid,
-          onChange: (l) => n({ showGrid: l.target.checked })
+          checked: n.showGrid,
+          onChange: (l) => o({ showGrid: l.target.checked })
         }
       ),
       "Grid"
@@ -1462,51 +1462,51 @@ function GraphToolbar({ width: e, height: t }) {
         "input",
         {
           type: "checkbox",
-          checked: o.showAxes,
-          onChange: (l) => n({ showAxes: l.target.checked })
+          checked: n.showAxes,
+          onChange: (l) => o({ showAxes: l.target.checked })
         }
       ),
       "Axes"
     ] }),
     /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-    /* @__PURE__ */ jsx("button", { onClick: s, style: { ...styles$2.button, backgroundColor: "#4caf50" }, children: "📥 SVG" }),
-    /* @__PURE__ */ jsx("button", { onClick: c, style: { ...styles$2.button, backgroundColor: "#ff9800" }, children: "📥 PNG" })
+    /* @__PURE__ */ jsx("button", { onClick: s, style: { ...styles$2.button, backgroundColor: "var(--nice-success, #4caf50)" }, children: "📥 SVG" }),
+    /* @__PURE__ */ jsx("button", { onClick: c, style: { ...styles$2.button, backgroundColor: "var(--nice-warning, #ff9800)" }, children: "📥 PNG" })
   ] });
 }
 function Canvas2D({ width: e, height: t }) {
-  const r = useRef(null), { service: a, plots: o, view: n, animation: s } = useGraph(), c = 40;
+  const r = useRef(null), { service: a, plots: n, view: o, animation: s } = useGraph(), c = 40;
   return useEffect(() => {
     const l = r.current, i = l == null ? void 0 : l.getContext("2d");
     if (!l || !i)
       return;
-    i.fillStyle = `rgb(${n.backgroundColor.r},${n.backgroundColor.g},${n.backgroundColor.b})`, i.fillRect(0, 0, e, t);
-    const d = e - c * 2, u = t - c * 2, h = (g) => c + (g - n.xRange.min) / (n.xRange.max - n.xRange.min) * d, b = (g) => t - c - (g - n.yRange.min) / (n.yRange.max - n.yRange.min) * u;
-    if (n.showGrid) {
-      i.strokeStyle = "#e0e0e0", i.lineWidth = 0.5;
-      for (let g = Math.ceil(n.xRange.min); g <= n.xRange.max; g++) {
+    i.fillStyle = `rgb(${o.backgroundColor.r},${o.backgroundColor.g},${o.backgroundColor.b})`, i.fillRect(0, 0, e, t);
+    const d = e - c * 2, u = t - c * 2, h = (g) => c + (g - o.xRange.min) / (o.xRange.max - o.xRange.min) * d, b = (g) => t - c - (g - o.yRange.min) / (o.yRange.max - o.yRange.min) * u;
+    if (o.showGrid) {
+      i.strokeStyle = "var(--nice-border, #e0e0e0)", i.lineWidth = 0.5;
+      for (let g = Math.ceil(o.xRange.min); g <= o.xRange.max; g++) {
         const m = h(g);
         i.beginPath(), i.moveTo(m, c), i.lineTo(m, t - c), i.stroke();
       }
-      for (let g = Math.ceil(n.yRange.min); g <= n.yRange.max; g++) {
+      for (let g = Math.ceil(o.yRange.min); g <= o.yRange.max; g++) {
         const m = b(g);
         i.beginPath(), i.moveTo(c, m), i.lineTo(e - c, m), i.stroke();
       }
     }
-    if (n.showAxes) {
-      i.strokeStyle = "#333", i.lineWidth = 1;
+    if (o.showAxes) {
+      i.strokeStyle = "var(--nice-text, #333)", i.lineWidth = 1;
       const g = b(0);
       i.beginPath(), i.moveTo(c, g), i.lineTo(e - c, g), i.stroke();
       const m = h(0);
-      if (i.beginPath(), i.moveTo(m, c), i.lineTo(m, t - c), i.stroke(), n.showLabels) {
-        i.fillStyle = "#333", i.font = "12px sans-serif", i.textAlign = "center", i.fillText("x", e - c + 15, g + 4), i.fillText("y", m, c - 10), i.font = "10px sans-serif";
-        for (let p = Math.ceil(n.xRange.min); p <= n.xRange.max; p++)
+      if (i.beginPath(), i.moveTo(m, c), i.lineTo(m, t - c), i.stroke(), o.showLabels) {
+        i.fillStyle = "var(--nice-text, #333)", i.font = "12px sans-serif", i.textAlign = "center", i.fillText("x", e - c + 15, g + 4), i.fillText("y", m, c - 10), i.font = "10px sans-serif";
+        for (let p = Math.ceil(o.xRange.min); p <= o.xRange.max; p++)
           p !== 0 && i.fillText(String(p), h(p), g + 15);
-        for (let p = Math.ceil(n.yRange.min); p <= n.yRange.max; p++)
+        for (let p = Math.ceil(o.yRange.min); p <= o.yRange.max; p++)
           p !== 0 && (i.textAlign = "right", i.fillText(String(p), m - 5, b(p) + 4));
       }
     }
     const y = s.isPlaying ? { [s.parameter]: s.currentValue } : {};
-    for (const g of o.filter((m) => m.visible)) {
+    for (const g of n.filter((m) => m.visible)) {
       const m = `rgb(${g.color.r},${g.color.g},${g.color.b})`;
       i.strokeStyle = m, i.lineWidth = g.lineWidth || 2;
       let p = [];
@@ -1514,7 +1514,7 @@ function Canvas2D({ width: e, height: t }) {
         case "2d-function":
           p = a.compute2DFunction(
             g.expression,
-            n.xRange,
+            o.xRange,
             g.resolution || 200,
             y
           );
@@ -1551,7 +1551,7 @@ function Canvas2D({ width: e, height: t }) {
         i.stroke();
       }
     }
-  }, [o, n, s, a, e, t]), /* @__PURE__ */ jsx("canvas", { ref: r, width: e, height: t, style: styles$2.canvas });
+  }, [n, o, s, a, e, t]), /* @__PURE__ */ jsx("canvas", { ref: r, width: e, height: t, style: styles$2.canvas });
 }
 const UNITS = [
   // Length
@@ -1826,7 +1826,7 @@ const UNITS = [
 ], MatrixOps = {
   create(e, t, r = 0) {
     const a = [];
-    for (let o = 0; o < e; o++)
+    for (let n = 0; n < e; n++)
       a.push(new Array(t).fill(r));
     return { rows: e, cols: t, data: a };
   },
@@ -1841,8 +1841,8 @@ const UNITS = [
       throw new Error("Matrix dimensions must match for addition");
     const r = this.create(e.rows, e.cols);
     for (let a = 0; a < e.rows; a++)
-      for (let o = 0; o < e.cols; o++)
-        r.data[a][o] = e.data[a][o] + t.data[a][o];
+      for (let n = 0; n < e.cols; n++)
+        r.data[a][n] = e.data[a][n] + t.data[a][n];
     return r;
   },
   subtract(e, t) {
@@ -1850,8 +1850,8 @@ const UNITS = [
       throw new Error("Matrix dimensions must match for subtraction");
     const r = this.create(e.rows, e.cols);
     for (let a = 0; a < e.rows; a++)
-      for (let o = 0; o < e.cols; o++)
-        r.data[a][o] = e.data[a][o] - t.data[a][o];
+      for (let n = 0; n < e.cols; n++)
+        r.data[a][n] = e.data[a][n] - t.data[a][n];
     return r;
   },
   multiply(e, t) {
@@ -1859,19 +1859,19 @@ const UNITS = [
       throw new Error("Matrix A columns must equal Matrix B rows for multiplication");
     const r = this.create(e.rows, t.cols);
     for (let a = 0; a < e.rows; a++)
-      for (let o = 0; o < t.cols; o++) {
-        let n = 0;
+      for (let n = 0; n < t.cols; n++) {
+        let o = 0;
         for (let s = 0; s < e.cols; s++)
-          n += e.data[a][s] * t.data[s][o];
-        r.data[a][o] = n;
+          o += e.data[a][s] * t.data[s][n];
+        r.data[a][n] = o;
       }
     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 n = 0; n < e.cols; n++)
+        r.data[a][n] = e.data[a][n] * t;
     return r;
   },
   transpose(e) {
@@ -1895,14 +1895,14 @@ const UNITS = [
   },
   minor(e, t, r) {
     const a = this.create(e.rows - 1, e.cols - 1);
-    let o = 0;
-    for (let n = 0; n < e.rows; n++) {
-      if (n === t)
+    let n = 0;
+    for (let o = 0; o < e.rows; o++) {
+      if (o === t)
         continue;
       let s = 0;
       for (let c = 0; c < e.cols; c++)
-        c !== r && (a.data[o][s] = e.data[n][c], s++);
-      o++;
+        c !== r && (a.data[n][s] = e.data[o][c], s++);
+      n++;
     }
     return a;
   },
@@ -1911,10 +1911,10 @@ const UNITS = [
     if (t === 0)
       throw new Error("Matrix is singular, cannot compute inverse");
     const r = e.rows, a = this.create(r, r);
-    for (let o = 0; o < r; o++)
-      for (let n = 0; n < r; n++) {
-        const s = Math.pow(-1, o + n), c = this.determinant(this.minor(e, o, n));
-        a.data[n][o] = s * c;
+    for (let n = 0; n < r; n++)
+      for (let o = 0; o < r; o++) {
+        const s = Math.pow(-1, n + o), c = this.determinant(this.minor(e, n, o));
+        a.data[o][n] = s * c;
       }
     return this.scalar(a, 1 / t);
   },
@@ -1929,11 +1929,11 @@ const UNITS = [
   eigenvalues2x2(e) {
     if (e.rows !== 2 || e.cols !== 2)
       throw new Error("Only 2x2 matrices supported for eigenvalues");
-    const t = e.data[0][0], r = e.data[0][1], a = e.data[1][0], o = e.data[1][1], n = t + o, s = t * o - r * a, c = n * n - 4 * s;
+    const t = e.data[0][0], r = e.data[0][1], a = e.data[1][0], n = e.data[1][1], o = t + n, s = t * n - r * a, c = o * o - 4 * s;
     if (c < 0)
       throw new Error("Complex eigenvalues not supported");
     const l = Math.sqrt(c);
-    return [(n + l) / 2, (n - l) / 2];
+    return [(o + l) / 2, (o - l) / 2];
   },
   toString(e, t = 4) {
     return e.data.map((r) => "[ " + r.map((a) => a.toFixed(t).padStart(10)).join(" ") + " ]").join(`
@@ -1951,25 +1951,25 @@ const UNITS = [
   /** Numerical integration using Simpson's rule */
   integrate(e, t, r, a = 1e3) {
     a % 2 !== 0 && a++;
-    const o = (r - t) / a;
-    let n = e(t) + e(r);
+    const n = (r - t) / a;
+    let o = e(t) + e(r);
     for (let s = 1; s < a; s++) {
-      const c = t + s * o;
-      n += s % 2 === 0 ? 2 * e(c) : 4 * e(c);
+      const c = t + s * n;
+      o += s % 2 === 0 ? 2 * e(c) : 4 * e(c);
     }
-    return o / 3 * n;
+    return n / 3 * o;
   },
   /** 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 s = e(o);
+    let n = t;
+    for (let o = 0; o < a; o++) {
+      const s = e(n);
       if (Math.abs(s) < r)
-        return o;
-      const c = this.derivative(e, o);
+        return n;
+      const c = this.derivative(e, n);
       if (c === 0)
         throw new Error("Derivative is zero, Newton-Raphson failed");
-      o = o - s / c;
+      n = n - s / c;
     }
     throw new Error("Newton-Raphson did not converge");
   },
@@ -1986,8 +1986,8 @@ const UNITS = [
     }
     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 a = parseFloat(r[1]), n = parseInt(r[2], 10), o = a * n;
+      return n === 1 ? String(o) : n === 2 ? `${o}*x` : `${o}*x^${n - 1}`;
     }
     return e === "sin(x)" ? "cos(x)" : e === "cos(x)" ? "-sin(x)" : e === "e^x" || e === "exp(x)" ? "e^x" : e === "ln(x)" ? "1/x" : `d/dx(${e})`;
   },
@@ -2011,8 +2011,8 @@ const UNITS = [
       throw new Error("No real solutions (complex roots)");
     if (a === 0)
       return [-t / (2 * e)];
-    const o = Math.sqrt(a);
-    return [(-t + o) / (2 * e), (-t - o) / (2 * e)];
+    const n = Math.sqrt(a);
+    return [(-t + n) / (2 * e), (-t - n) / (2 * e)];
   }
 };
 class CalculatorService {
@@ -2080,20 +2080,20 @@ class CalculatorService {
   }
   /** 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))
+    const a = { BIN: 2, OCT: 8, DEC: 10, HEX: 16 }, n = parseInt(e, a[t]);
+    if (isNaN(n))
       throw new Error("Invalid number for base conversion");
-    return o.toString(a[r]).toUpperCase();
+    return n.toString(a[r]).toUpperCase();
   }
   /** Convert units */
   convertUnits(e, t, r) {
-    const a = UNITS.find((s) => s.symbol === t), o = UNITS.find((s) => s.symbol === r);
-    if (!a || !o)
+    const a = UNITS.find((s) => s.symbol === t), n = UNITS.find((s) => s.symbol === r);
+    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 o = a.toBase(e);
+    return n.fromBase(o);
   }
   /** Get units by category */
   getUnitsByCategory(e) {
@@ -2123,31 +2123,31 @@ const styles$1 = {
   container: {
     width: "400px",
     fontFamily: "'Inter', sans-serif",
-    backgroundColor: "#1e1e1e",
+    backgroundColor: "var(--nice-bg, #1e1e1e)",
     borderRadius: "12px",
     overflow: "hidden",
-    boxShadow: "0 4px 20px rgba(0,0,0,0.3)"
+    boxShadow: "0 4px 20px var(--nice-overlay-30, rgba(0, 0, 0, 0.3))"
   },
   modeSelector: {
     display: "flex",
-    backgroundColor: "#2d2d2d"
+    backgroundColor: "var(--nice-bg-secondary, #2d2d2d)"
   },
   modeButton: {
     flex: 1,
     padding: "8px",
     border: "none",
     backgroundColor: "transparent",
-    color: "#888",
+    color: "var(--nice-text-secondary, #888)",
     fontSize: "11px",
     cursor: "pointer"
   },
   display: {
     padding: "20px",
-    backgroundColor: "#252525",
+    backgroundColor: "var(--nice-bg-secondary, #252525)",
     minHeight: "80px"
   },
   displayText: {
-    color: "#fff",
+    color: "var(--nice-bg, #fff)",
     fontSize: "32px",
     fontFamily: "'JetBrains Mono', monospace",
     textAlign: "right",
@@ -2157,21 +2157,21 @@ const styles$1 = {
     display: "grid",
     gridTemplateColumns: "repeat(4, 1fr)",
     gap: "1px",
-    backgroundColor: "#333",
+    backgroundColor: "var(--nice-text, #333)",
     padding: "1px"
   },
   key: {
     padding: "20px",
     border: "none",
-    backgroundColor: "#3c3c3c",
-    color: "#fff",
+    backgroundColor: "var(--nice-border, #3c3c3c)",
+    color: "var(--nice-bg, #fff)",
     fontSize: "18px",
     cursor: "pointer",
     transition: "background-color 0.1s"
   },
   keyOperator: {
-    backgroundColor: "#ff9f0a",
-    color: "#000"
+    backgroundColor: "var(--nice-warning, #ff9f0a)",
+    color: "var(--nice-text, #000)"
   },
   keyFunction: {
     backgroundColor: "#505050"
@@ -2182,25 +2182,25 @@ function NiceCalculator({
   className: t,
   style: r
 }) {
-  const [a, o] = useState("0"), [n, s] = useState("standard"), [c, l] = useState([]), [i, d] = useState(!1), u = useCallback(
+  const [a, n] = useState("0"), [o, s] = useState("standard"), [c, l] = useState([]), [i, d] = useState(!1), u = useCallback(
     (g) => {
-      i && /[0-9.]/.test(g) ? (o(g), d(!1)) : (o((m) => m === "0" && g !== "." ? g : m + g), d(!1));
+      i && /[0-9.]/.test(g) ? (n(g), d(!1)) : (n((m) => m === "0" && g !== "." ? g : m + g), d(!1));
     },
     [i]
   ), h = useCallback(() => {
-    o("0"), d(!1);
+    n("0"), d(!1);
   }, []), b = useCallback(() => {
     try {
       const g = e.evaluate(a), m = e.format(g);
-      e.addHistory(a, m, n), l(e.getHistory()), o(m), d(!0);
+      e.addHistory(a, m, o), l(e.getHistory()), n(m), d(!0);
     } catch {
-      o("Error"), d(!0);
+      n("Error"), d(!0);
     }
-  }, [a, n, e]), y = {
+  }, [a, o, e]), y = {
     service: e,
     display: a,
-    setDisplay: o,
-    mode: n,
+    setDisplay: n,
+    mode: o,
     setMode: s,
     history: c,
     calculate: b,
@@ -2210,12 +2210,12 @@ function NiceCalculator({
   return /* @__PURE__ */ jsx(CalculatorContext.Provider, { value: y, 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, {})
+    o === "standard" && /* @__PURE__ */ jsx(StandardKeypad, {}),
+    o === "scientific" && /* @__PURE__ */ jsx(ScientificKeypad, {}),
+    o === "programmer" && /* @__PURE__ */ jsx(ProgrammerKeypad, {}),
+    o === "matrix" && /* @__PURE__ */ jsx(MatrixMode, {}),
+    o === "calculus" && /* @__PURE__ */ jsx(CalculusMode, {}),
+    o === "units" && /* @__PURE__ */ jsx(UnitsMode, {})
   ] }) });
 }
 function ModeSelector() {
@@ -2233,8 +2233,8 @@ function ModeSelector() {
       onClick: () => t(a.id),
       style: {
         ...styles$1.modeButton,
-        backgroundColor: e === a.id ? "#1976d2" : "transparent",
-        color: e === a.id ? "#fff" : "#888"
+        backgroundColor: e === a.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
+        color: e === a.id ? "var(--nice-bg, #fff)" : "var(--nice-text-secondary, #888)"
       },
       children: a.label
     },
@@ -2246,11 +2246,11 @@ function Display() {
   return /* @__PURE__ */ jsx("div", { style: styles$1.display, children: /* @__PURE__ */ jsx("div", { style: styles$1.displayText, children: e }) });
 }
 function StandardKeypad() {
-  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: o } = useCalculator(), n = [
+  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: n } = useCalculator(), o = [
     { label: "AC", action: t, style: styles$1.keyFunction },
     {
       label: "±",
-      action: () => a(o.startsWith("-") ? o.slice(1) : "-" + o),
+      action: () => a(n.startsWith("-") ? n.slice(1) : "-" + n),
       style: styles$1.keyFunction
     },
     { label: "%", action: () => e("/100"), style: styles$1.keyFunction },
@@ -2269,13 +2269,13 @@ function StandardKeypad() {
     { label: "+", action: () => e("+"), style: styles$1.keyOperator },
     { label: "0", action: () => e("0") },
     { label: ".", action: () => e(".") },
-    { label: "⌫", action: () => a(o.length > 1 ? o.slice(0, -1) : "0") },
+    { label: "⌫", action: () => a(n.length > 1 ? n.slice(0, -1) : "0") },
     { label: "=", action: r, style: styles$1.keyOperator }
   ];
-  return /* @__PURE__ */ jsx("div", { style: styles$1.keypad, children: n.map((s, c) => /* @__PURE__ */ jsx("button", { onClick: s.action, style: { ...styles$1.key, ...s.style || {} }, children: s.label }, c)) });
+  return /* @__PURE__ */ jsx("div", { style: styles$1.keypad, children: o.map((s, c) => /* @__PURE__ */ jsx("button", { onClick: s.action, style: { ...styles$1.key, ...s.style || {} }, children: s.label }, c)) });
 }
 function ScientificKeypad() {
-  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: o } = useCalculator(), n = [
+  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: n } = useCalculator(), o = [
     { label: "sin", action: () => e("sin(") },
     { label: "cos", action: () => e("cos(") },
     { label: "tan", action: () => e("tan(") },
@@ -2295,7 +2295,7 @@ function ScientificKeypad() {
     { label: "AC", action: t }
   ];
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(5, 1fr)" }, children: [...n, ...s, ...c].map((l, i) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(5, 1fr)" }, children: [...o, ...s, ...c].map((l, i) => /* @__PURE__ */ jsx(
       "button",
       {
         onClick: l.action,
@@ -2308,26 +2308,26 @@ function ScientificKeypad() {
   ] });
 }
 function ProgrammerKeypad() {
-  const { display: e, setDisplay: t, service: r } = useCalculator(), [a, o] = useState("DEC"), n = (c) => {
+  const { display: e, setDisplay: t, service: r } = useCalculator(), [a, n] = useState("DEC"), o = (c) => {
     try {
       const l = r.convertBase(e, a, c);
-      t(l), o(c);
+      t(l), n(c);
     } catch {
       t("Error");
     }
   }, s = a === "HEX" ? ["A", "B", "C", "D", "E", "F"] : [];
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", padding: "8px", backgroundColor: "#252525" }, children: ["BIN", "OCT", "DEC", "HEX"].map((c) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", padding: "8px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: ["BIN", "OCT", "DEC", "HEX"].map((c) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => n(c),
+        onClick: () => o(c),
         style: {
           flex: 1,
           padding: "8px",
           border: "none",
           borderRadius: "4px",
-          backgroundColor: a === c ? "#1976d2" : "#3c3c3c",
-          color: "#fff",
+          backgroundColor: a === c ? "var(--nice-primary-hover, #1976d2)" : "var(--nice-border, #3c3c3c)",
+          color: "var(--nice-bg, #fff)",
           cursor: "pointer"
         },
         children: c
@@ -2375,14 +2375,14 @@ function ProgrammerKeypad() {
   ] });
 }
 function MatrixMode() {
-  const [e, t] = useState(MatrixOps.create(2, 2)), [r, a] = useState(MatrixOps.create(2, 2)), [o, n] = useState(""), s = (l, i, d, u, h) => {
+  const [e, t] = useState(MatrixOps.create(2, 2)), [r, a] = useState(MatrixOps.create(2, 2)), [n, o] = useState(""), s = (l, i, d, u, h) => {
     const b = { ...l, data: l.data.map((y) => [...y]) };
     b.data[d][u] = parseFloat(h) || 0, i(b);
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "#252525" }, children: [
+  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: "#888", marginBottom: "4px" }, children: "Matrix A" }),
+        /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: "Matrix A" }),
         /* @__PURE__ */ jsx(
           MatrixInput,
           {
@@ -2392,7 +2392,7 @@ function MatrixMode() {
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: { color: "#888", marginBottom: "4px" }, children: "Matrix B" }),
+        /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #888)", marginBottom: "4px" }, children: "Matrix B" }),
         /* @__PURE__ */ jsx(
           MatrixInput,
           {
@@ -2414,15 +2414,15 @@ function MatrixMode() {
       {
         onClick: () => {
           try {
-            n(l.fn());
+            o(l.fn());
           } catch (i) {
-            n(i.message);
+            o(i.message);
           }
         },
         style: {
           padding: "8px 12px",
-          backgroundColor: "#1976d2",
-          color: "#fff",
+          backgroundColor: "var(--nice-primary-hover, #1976d2)",
+          color: "var(--nice-bg, #fff)",
           border: "none",
           borderRadius: "4px",
           cursor: "pointer"
@@ -2431,7 +2431,7 @@ function MatrixMode() {
       },
       l.label
     )) }),
-    o && /* @__PURE__ */ jsx("pre", { style: { color: "#fff", fontFamily: "monospace", whiteSpace: "pre-wrap" }, children: o })
+    n && /* @__PURE__ */ jsx("pre", { style: { color: "var(--nice-bg, #fff)", fontFamily: "monospace", whiteSpace: "pre-wrap" }, children: n })
   ] });
 }
 function MatrixInput({
@@ -2443,23 +2443,23 @@ function MatrixInput({
     {
       style: { display: "grid", gridTemplateColumns: `repeat(${e.cols}, 50px)`, gap: "4px" },
       children: e.data.map(
-        (r, a) => r.map((o, n) => /* @__PURE__ */ jsx(
+        (r, a) => r.map((n, o) => /* @__PURE__ */ jsx(
           "input",
           {
             type: "number",
-            value: o,
-            onChange: (s) => t(a, n, s.target.value),
+            value: n,
+            onChange: (s) => t(a, o, s.target.value),
             style: {
               width: "100%",
               padding: "4px",
               textAlign: "center",
-              backgroundColor: "#3c3c3c",
-              color: "#fff",
-              border: "1px solid #555",
+              backgroundColor: "var(--nice-border, #3c3c3c)",
+              color: "var(--nice-bg, #fff)",
+              border: "1px solid var(--nice-text-secondary, #555)",
               borderRadius: "4px"
             }
           },
-          `${a}-${n}`
+          `${a}-${o}`
         ))
       )
     }
@@ -2467,21 +2467,21 @@ function MatrixInput({
 }
 function CalculusMode() {
   const [e, t] = useState("x^2"), [r, a] = useState("");
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "#252525" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         type: "text",
         value: e,
-        onChange: (o) => t(o.target.value),
+        onChange: (n) => t(n.target.value),
         placeholder: "Enter expression (e.g., x^2, sin(x))",
         style: {
           width: "100%",
           padding: "8px",
           marginBottom: "12px",
-          backgroundColor: "#3c3c3c",
-          color: "#fff",
-          border: "1px solid #555",
+          backgroundColor: "var(--nice-border, #3c3c3c)",
+          color: "var(--nice-bg, #fff)",
+          border: "1px solid var(--nice-text-secondary, #555)",
           borderRadius: "4px"
         }
       }
@@ -2493,8 +2493,8 @@ function CalculusMode() {
           onClick: () => a(`d/dx(${e}) = ${CalculusOps.symbolicDerivative(e)}`),
           style: {
             padding: "8px 12px",
-            backgroundColor: "#4caf50",
-            color: "#fff",
+            backgroundColor: "var(--nice-success, #4caf50)",
+            color: "var(--nice-bg, #fff)",
             border: "none",
             borderRadius: "4px",
             cursor: "pointer"
@@ -2508,8 +2508,8 @@ function CalculusMode() {
           onClick: () => a(`∫(${e})dx = ${CalculusOps.symbolicIntegral(e)}`),
           style: {
             padding: "8px 12px",
-            backgroundColor: "#2196f3",
-            color: "#fff",
+            backgroundColor: "var(--nice-primary, #2196f3)",
+            color: "var(--nice-bg, #fff)",
             border: "none",
             borderRadius: "4px",
             cursor: "pointer"
@@ -2522,10 +2522,10 @@ function CalculusMode() {
       "div",
       {
         style: {
-          color: "#fff",
+          color: "var(--nice-bg, #fff)",
           fontFamily: "monospace",
           padding: "8px",
-          backgroundColor: "#1e1e1e",
+          backgroundColor: "var(--nice-bg, #1e1e1e)",
           borderRadius: "4px"
         },
         children: r
@@ -2534,15 +2534,15 @@ function CalculusMode() {
   ] });
 }
 function UnitsMode() {
-  const { service: e } = useCalculator(), [t, r] = useState("1"), [a, o] = useState("m"), [n, s] = useState("ft"), [c, l] = useState("Length"), [i, d] = useState(""), u = e.getUnitCategories(), h = e.getUnitsByCategory(c), b = () => {
+  const { service: e } = useCalculator(), [t, r] = useState("1"), [a, n] = useState("m"), [o, s] = useState("ft"), [c, l] = useState("Length"), [i, d] = useState(""), u = e.getUnitCategories(), h = e.getUnitsByCategory(c), b = () => {
     try {
-      const y = e.convertUnits(parseFloat(t), a, n);
-      d(`${t} ${a} = ${e.format(y)} ${n}`);
+      const y = e.convertUnits(parseFloat(t), a, o);
+      d(`${t} ${a} = ${e.format(y)} ${o}`);
     } catch (y) {
       d(y.message);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "#252525" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "var(--nice-bg-secondary, #252525)" }, children: [
     /* @__PURE__ */ jsx(
       "select",
       {
@@ -2550,15 +2550,15 @@ function UnitsMode() {
         onChange: (y) => {
           l(y.target.value);
           const g = e.getUnitsByCategory(y.target.value);
-          g.length >= 2 && (o(g[0].symbol), s(g[1].symbol));
+          g.length >= 2 && (n(g[0].symbol), s(g[1].symbol));
         },
         style: {
           width: "100%",
           padding: "8px",
           marginBottom: "12px",
-          backgroundColor: "#3c3c3c",
-          color: "#fff",
-          border: "1px solid #555",
+          backgroundColor: "var(--nice-border, #3c3c3c)",
+          color: "var(--nice-bg, #fff)",
+          border: "1px solid var(--nice-text-secondary, #555)",
           borderRadius: "4px"
         },
         children: u.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
@@ -2574,9 +2574,9 @@ function UnitsMode() {
           style: {
             flex: 1,
             padding: "8px",
-            backgroundColor: "#3c3c3c",
-            color: "#fff",
-            border: "1px solid #555",
+            backgroundColor: "var(--nice-border, #3c3c3c)",
+            color: "var(--nice-bg, #fff)",
+            border: "1px solid var(--nice-text-secondary, #555)",
             borderRadius: "4px"
           }
         }
@@ -2585,12 +2585,12 @@ function UnitsMode() {
         "select",
         {
           value: a,
-          onChange: (y) => o(y.target.value),
+          onChange: (y) => n(y.target.value),
           style: {
             padding: "8px",
-            backgroundColor: "#3c3c3c",
-            color: "#fff",
-            border: "1px solid #555",
+            backgroundColor: "var(--nice-border, #3c3c3c)",
+            color: "var(--nice-bg, #fff)",
+            border: "1px solid var(--nice-text-secondary, #555)",
             borderRadius: "4px"
           },
           children: h.map((y) => /* @__PURE__ */ jsxs("option", { value: y.symbol, children: [
@@ -2603,18 +2603,18 @@ function UnitsMode() {
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
-      /* @__PURE__ */ jsx("span", { style: { color: "#888" }, children: "→" }),
+      /* @__PURE__ */ jsx("span", { style: { color: "var(--nice-text-secondary, #888)" }, children: "→" }),
       /* @__PURE__ */ jsx(
         "select",
         {
-          value: n,
+          value: o,
           onChange: (y) => s(y.target.value),
           style: {
             flex: 1,
             padding: "8px",
-            backgroundColor: "#3c3c3c",
-            color: "#fff",
-            border: "1px solid #555",
+            backgroundColor: "var(--nice-border, #3c3c3c)",
+            color: "var(--nice-bg, #fff)",
+            border: "1px solid var(--nice-text-secondary, #555)",
             borderRadius: "4px"
           },
           children: h.map((y) => /* @__PURE__ */ jsxs("option", { value: y.symbol, children: [
@@ -2633,8 +2633,8 @@ function UnitsMode() {
         style: {
           width: "100%",
           padding: "12px",
-          backgroundColor: "#ff9f0a",
-          color: "#000",
+          backgroundColor: "var(--nice-warning, #ff9f0a)",
+          color: "var(--nice-text, #000)",
           border: "none",
           borderRadius: "4px",
           fontSize: "16px",
@@ -2643,7 +2643,7 @@ function UnitsMode() {
         children: "Convert"
       }
     ),
-    i && /* @__PURE__ */ jsx("div", { style: { marginTop: "12px", color: "#fff", fontSize: "18px", textAlign: "center" }, children: i })
+    i && /* @__PURE__ */ jsx("div", { style: { marginTop: "12px", color: "var(--nice-bg, #fff)", fontSize: "18px", textAlign: "center" }, children: i })
   ] });
 }
 const GeoMath = {
@@ -2658,8 +2658,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;
-    return n < 0 && (n += 2 * Math.PI), n;
+    let o = Math.atan2(r.y - t.y, r.x - t.x) - a;
+    return o < 0 && (o += 2 * Math.PI), o;
   },
   /** Angle in degrees */
   angleDegrees(e, t, r) {
@@ -2667,63 +2667,63 @@ 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 a = t.x - e.x, n = t.y - e.y, o = ((r.x - e.x) * a + (r.y - e.y) * n) / (a * a + n * n);
+    return { x: e.x + o * a, y: e.y + o * n };
   },
   /** 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)
+    const n = (e.x - t.x) * (r.y - a.y) - (e.y - t.y) * (r.x - a.x);
+    if (Math.abs(n) < 1e-10)
       return null;
-    const n = ((e.x - r.x) * (r.y - a.y) - (e.y - r.y) * (r.x - a.x)) / o;
+    const o = ((e.x - r.x) * (r.y - a.y) - (e.y - r.y) * (r.x - a.x)) / n;
     return {
-      x: e.x + n * (t.x - e.x),
-      y: e.y + n * (t.y - e.y)
+      x: e.x + o * (t.x - e.x),
+      y: e.y + o * (t.y - e.y)
     };
   },
   /** Circle-line intersection */
   circleLineIntersection(e, t, r, a) {
-    const o = a.x - r.x, n = a.y - r.y, s = r.x - e.x, c = r.y - e.y, l = o * o + n * n, i = 2 * (s * o + c * n), d = s * s + c * c - t * t, u = i * i - 4 * l * d;
+    const n = a.x - r.x, o = a.y - r.y, s = r.x - e.x, c = r.y - e.y, l = n * n + o * o, i = 2 * (s * n + c * o), d = s * s + c * c - t * t, u = i * i - 4 * l * d;
     if (u < 0)
       return [];
     const h = Math.sqrt(u), b = (-i - h) / (2 * l), y = (-i + h) / (2 * l), g = [];
-    return b >= 0 && b <= 1 && g.push({ x: r.x + b * o, y: r.y + b * n }), y >= 0 && y <= 1 && Math.abs(y - b) > 1e-10 && g.push({ x: r.x + y * o, y: r.y + y * n }), g;
+    return b >= 0 && b <= 1 && g.push({ x: r.x + b * n, y: r.y + b * o }), y >= 0 && y <= 1 && Math.abs(y - b) > 1e-10 && g.push({ x: r.x + y * n, y: r.y + y * o }), g;
   },
   /** 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)
+    const n = this.distance(e, r);
+    if (n > t + a || n < Math.abs(t - a) || n === 0)
       return [];
-    const n = (t * t - a * a + o * o) / (2 * o), s = Math.sqrt(t * t - n * n), c = e.x + n * (r.x - e.x) / o, l = e.y + n * (r.y - e.y) / o;
+    const o = (t * t - a * a + n * n) / (2 * n), s = Math.sqrt(t * t - o * o), c = e.x + o * (r.x - e.x) / n, l = e.y + o * (r.y - e.y) / n;
     return [
-      { x: c + s * (r.y - e.y) / o, y: l - s * (r.x - e.x) / o },
-      { x: c - s * (r.y - e.y) / o, y: l + s * (r.x - e.x) / o }
+      { x: c + s * (r.y - e.y) / n, y: l - s * (r.x - e.x) / n },
+      { x: c - s * (r.y - e.y) / n, y: l + s * (r.x - e.x) / n }
     ];
   },
   /** 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 a = t.x - e.x, n = t.y - e.y;
     return {
       p1: r,
-      p2: { x: r.x - o, y: r.y + a }
+      p2: { x: r.x - n, y: r.y + a }
     };
   },
   /** Parallel line through point */
   parallelThrough(e, t, r) {
-    const a = t.x - e.x, o = t.y - e.y;
+    const a = t.x - e.x, n = t.y - e.y;
     return {
       p1: r,
-      p2: { x: r.x + a, y: r.y + o }
+      p2: { x: r.x + a, y: r.y + n }
     };
   },
   /** 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), {
-      x: t.x + Math.cos(n),
-      y: t.y + Math.sin(n)
+    const a = Math.atan2(e.y - t.y, e.x - t.x), n = Math.atan2(r.y - t.y, r.x - t.x);
+    let o = (a + n) / 2;
+    return Math.abs(n - a) > Math.PI && (o += Math.PI), {
+      x: t.x + Math.cos(o),
+      y: t.y + Math.sin(o)
     };
   },
   /** Reflect point over line */
@@ -2736,10 +2736,10 @@ const GeoMath = {
   },
   /** Rotate point around center */
   rotate(e, t, r) {
-    const a = Math.cos(r), o = Math.sin(r), n = e.x - t.x, s = e.y - t.y;
+    const a = Math.cos(r), n = Math.sin(r), o = e.x - t.x, s = e.y - t.y;
     return {
-      x: t.x + n * a - s * o,
-      y: t.y + n * o + s * a
+      x: t.x + o * a - s * n,
+      y: t.y + o * n + s * a
     };
   },
   /** Translate point */
@@ -2758,8 +2758,8 @@ const GeoMath = {
     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;
+      const n = (a + 1) % r;
+      t += e[a].x * e[n].y, t -= e[n].x * e[a].y;
     }
     return Math.abs(t) / 2;
   },
@@ -2768,22 +2768,22 @@ const GeoMath = {
     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]);
+      const n = (a + 1) % r;
+      t += this.distance(e[a], e[n]);
     }
     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 a = 2 * (e.x * (t.y - r.y) + t.x * (r.y - e.y) + r.x * (e.y - t.y)), n = ((e.x ** 2 + e.y ** 2) * (t.y - r.y) + (t.x ** 2 + t.y ** 2) * (r.y - e.y) + (r.x ** 2 + r.y ** 2) * (e.y - t.y)) / a, o = ((e.x ** 2 + e.y ** 2) * (r.x - t.x) + (t.x ** 2 + t.y ** 2) * (e.x - r.x) + (r.x ** 2 + r.y ** 2) * (t.x - e.x)) / a;
+    return { x: n, y: o };
   },
   /** Triangle incenter */
   incenter(e, t, r) {
-    const a = this.distance(e, t), o = this.distance(t, r), n = this.distance(r, e), s = a + o + n;
+    const a = this.distance(e, t), n = this.distance(t, r), o = this.distance(r, e), s = a + n + o;
     return {
-      x: (o * e.x + n * t.x + a * r.x) / s,
-      y: (o * e.y + n * t.y + a * r.y) / s
+      x: (n * e.x + o * t.x + a * r.x) / s,
+      y: (n * e.y + o * t.y + a * r.y) / s
     };
   },
   /** Triangle centroid */
@@ -2822,8 +2822,8 @@ class GeometryService {
   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 [a, n] of this.elements)
+      (r = n.dependencies) != null && r.includes(t) && this.deleteElement(a);
   }
   /** Get all elements */
   getAllElements() {
@@ -2928,46 +2928,46 @@ class GeometryService {
   }
   /** Create midpoint */
   createMidpoint(t, r) {
-    const a = this.getPoint(t), o = this.getPoint(r);
-    if (!a || !o)
+    const a = this.getPoint(t), n = this.getPoint(r);
+    if (!a || !n)
       return null;
-    const n = GeoMath.midpoint(a, o), s = this.createPoint(n.x, n.y);
+    const o = GeoMath.midpoint(a, n), s = this.createPoint(o.x, o.y);
     return s.dependencies = [t, r], s.color = { r: 0, g: 150, b: 0 }, s;
   }
   /** Create perpendicular */
   createPerpendicular(t, r, a) {
-    const o = this.getPoint(t), n = this.getPoint(r), s = this.getPoint(a);
-    if (!o || !n || !s)
+    const n = this.getPoint(t), o = this.getPoint(r), s = this.getPoint(a);
+    if (!n || !o || !s)
       return null;
-    const c = GeoMath.perpendicularThrough(o, n, s), l = this.createPoint(c.p2.x, c.p2.y), i = this.createLine(a, l.id);
+    const c = GeoMath.perpendicularThrough(n, o, s), l = this.createPoint(c.p2.x, c.p2.y), i = this.createLine(a, l.id);
     return i.dependencies = [t, r, a], i;
   }
   /** Create parallel */
   createParallel(t, r, a) {
-    const o = this.getPoint(t), n = this.getPoint(r), s = this.getPoint(a);
-    if (!o || !n || !s)
+    const n = this.getPoint(t), o = this.getPoint(r), s = this.getPoint(a);
+    if (!n || !o || !s)
       return null;
-    const c = GeoMath.parallelThrough(o, n, s), l = this.createPoint(c.p2.x, c.p2.y), i = this.createLine(a, l.id);
+    const c = GeoMath.parallelThrough(n, o, s), l = this.createPoint(c.p2.x, c.p2.y), i = this.createLine(a, l.id);
     return i.dependencies = [t, r, a], i;
   }
   /** Create intersection point */
   createIntersection(t, r) {
-    const a = this.elements.get(t), o = this.elements.get(r);
-    if (!a || !o)
+    const a = this.elements.get(t), n = this.elements.get(r);
+    if (!a || !n)
       return [];
-    const n = [], s = (i) => {
+    const o = [], s = (i) => {
       if (i.type === "line" || i.type === "segment" || i.type === "ray") {
         const d = i, u = this.getPoint(d.point1Id ?? d.originId), h = this.getPoint(d.point2Id ?? d.throughId);
         if (u && h)
           return [u, h];
       }
       return null;
-    }, c = s(a), l = s(o);
+    }, c = s(a), l = s(n);
     if (c && l) {
       const i = GeoMath.lineIntersection(c[0], c[1], l[0], l[1]);
       if (i) {
         const d = this.createPoint(i.x, i.y);
-        d.dependencies = [t, r], d.color = { r: 255, g: 0, b: 0 }, n.push(d);
+        d.dependencies = [t, r], d.color = { r: 255, g: 0, b: 0 }, o.push(d);
       }
     }
     if (a.type === "circle" && l) {
@@ -2976,43 +2976,43 @@ class GeometryService {
         const u = GeoMath.circleLineIntersection(d, i.radius, l[0], l[1]);
         for (const h of u) {
           const b = this.createPoint(h.x, h.y);
-          b.dependencies = [t, r], b.color = { r: 255, g: 0, b: 0 }, n.push(b);
+          b.dependencies = [t, r], b.color = { r: 255, g: 0, b: 0 }, o.push(b);
         }
       }
     }
-    if (a.type === "circle" && o.type === "circle") {
-      const i = a, d = o, u = this.getPoint(i.centerId), h = this.getPoint(d.centerId);
+    if (a.type === "circle" && n.type === "circle") {
+      const i = a, d = n, u = this.getPoint(i.centerId), h = this.getPoint(d.centerId);
       if (u && h) {
         const b = GeoMath.circleCircleIntersection(u, i.radius, h, d.radius);
         for (const y of b) {
           const g = this.createPoint(y.x, y.y);
-          g.dependencies = [t, r], g.color = { r: 255, g: 0, b: 0 }, n.push(g);
+          g.dependencies = [t, r], g.color = { r: 255, g: 0, b: 0 }, o.push(g);
         }
       }
     }
-    return n;
+    return o;
   }
   /** Calculate measurement */
   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 a = this.getPoint(r[0]), n = this.getPoint(r[1]);
+        if (a && n)
+          return GeoMath.distance(a, n);
         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 a = this.getPoint(r[0]), n = this.getPoint(r[1]), o = this.getPoint(r[2]);
+        if (a && n && o)
+          return GeoMath.angleDegrees(a, n, o);
         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 n = a.pointIds.map((o) => this.getPoint(o)).filter(Boolean);
+          return t === "area" ? GeoMath.polygonArea(n) : GeoMath.polygonPerimeter(n);
         }
         break;
       }
@@ -3021,31 +3021,31 @@ class GeometryService {
   }
   /** Export to SVG */
   exportSVG(t, r, a) {
-    const o = [
+    const n = [
       `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${r}" viewBox="0 0 ${t} ${r}">`
     ];
-    o.push(
+    n.push(
       `<rect width="100%" height="100%" fill="rgb(${a.backgroundColor.r},${a.backgroundColor.g},${a.backgroundColor.b})"/>`
     );
-    const n = (s, c) => ({
+    const o = (s, c) => ({
       x: t / 2 + (s - a.centerX) * a.scale,
       y: r / 2 - (c - a.centerY) * a.scale
     });
     if (a.showGrid) {
-      o.push('<g stroke="#ddd" stroke-width="0.5">');
+      n.push('<g stroke="var(--nice-border, #ddd)" stroke-width="0.5">');
       for (let s = Math.floor(-t / 2 / a.scale + a.centerX); s <= t / 2 / a.scale + a.centerX; s += a.gridSpacing) {
-        const c = n(s, 0);
-        o.push(`<line x1="${c.x}" y1="0" x2="${c.x}" y2="${r}"/>`);
+        const c = o(s, 0);
+        n.push(`<line x1="${c.x}" y1="0" x2="${c.x}" y2="${r}"/>`);
       }
       for (let s = Math.floor(-r / 2 / a.scale + a.centerY); s <= r / 2 / a.scale + a.centerY; s += a.gridSpacing) {
-        const c = n(0, s);
-        o.push(`<line x1="0" y1="${c.y}" x2="${t}" y2="${c.y}"/>`);
+        const c = o(0, s);
+        n.push(`<line x1="0" y1="${c.y}" x2="${t}" y2="${c.y}"/>`);
       }
-      o.push("</g>");
+      n.push("</g>");
     }
     if (a.showAxes) {
-      const s = n(0, 0);
-      o.push('<g stroke="#333" stroke-width="1">'), o.push(`<line x1="0" y1="${s.y}" x2="${t}" y2="${s.y}"/>`), o.push(`<line x1="${s.x}" y1="0" x2="${s.x}" y2="${r}"/>`), o.push("</g>");
+      const s = o(0, 0);
+      n.push('<g stroke="var(--nice-text, #333)" stroke-width="1">'), n.push(`<line x1="0" y1="${s.y}" x2="${t}" y2="${s.y}"/>`), n.push(`<line x1="${s.x}" y1="0" x2="${s.x}" y2="${r}"/>`), n.push("</g>");
     }
     for (const s of this.getAllElements()) {
       if (!s.visible)
@@ -3053,15 +3053,15 @@ class GeometryService {
       const c = `rgb(${s.color.r},${s.color.g},${s.color.b})`;
       switch (s.type) {
         case "point": {
-          const l = n(s.x, s.y);
-          o.push(`<circle cx="${l.x}" cy="${l.y}" r="${s.size}" fill="${c}"/>`), s.label && o.push(`<text x="${l.x + 8}" y="${l.y - 8}" font-size="12">${s.label}</text>`);
+          const l = o(s.x, s.y);
+          n.push(`<circle cx="${l.x}" cy="${l.y}" r="${s.size}" fill="${c}"/>`), s.label && n.push(`<text x="${l.x + 8}" y="${l.y - 8}" font-size="12">${s.label}</text>`);
           break;
         }
         case "segment": {
           const l = this.getPoint(s.point1Id), i = this.getPoint(s.point2Id);
           if (l && i) {
-            const d = n(l.x, l.y), u = n(i.x, i.y);
-            o.push(
+            const d = o(l.x, l.y), u = o(i.x, i.y);
+            n.push(
               `<line x1="${d.x}" y1="${d.y}" x2="${u.x}" y2="${u.y}" stroke="${c}" stroke-width="${s.width}"/>`
             );
           }
@@ -3070,8 +3070,8 @@ class GeometryService {
         case "circle": {
           const l = this.getPoint(s.centerId);
           if (l) {
-            const i = n(l.x, l.y), d = s.radius * a.scale, u = s.fill ? `rgba(${s.fill.r},${s.fill.g},${s.fill.b},${s.fill.a ?? 0.2})` : "none";
-            o.push(
+            const i = o(l.x, l.y), d = s.radius * a.scale, u = s.fill ? `rgba(${s.fill.r},${s.fill.g},${s.fill.b},${s.fill.a ?? 0.2})` : "none";
+            n.push(
               `<circle cx="${i.x}" cy="${i.y}" r="${d}" fill="${u}" stroke="${c}" stroke-width="${s.width}"/>`
             );
           }
@@ -3080,8 +3080,8 @@ class GeometryService {
         case "polygon": {
           const l = s.pointIds.map((i) => this.getPoint(i)).filter(Boolean);
           if (l.length > 0) {
-            const d = l.map((h) => n(h.x, h.y)).map((h, b) => `${b === 0 ? "M" : "L"}${h.x},${h.y}`).join(" ") + " Z", u = s.fill ? `rgba(${s.fill.r},${s.fill.g},${s.fill.b},${s.fill.a ?? 0.2})` : "none";
-            o.push(
+            const d = l.map((h) => o(h.x, h.y)).map((h, b) => `${b === 0 ? "M" : "L"}${h.x},${h.y}`).join(" ") + " Z", u = s.fill ? `rgba(${s.fill.r},${s.fill.g},${s.fill.b},${s.fill.a ?? 0.2})` : "none";
+            n.push(
               `<path d="${d}" fill="${u}" stroke="${c}" stroke-width="${s.width}"/>`
             );
           }
@@ -3089,7 +3089,7 @@ class GeometryService {
         }
       }
     }
-    return o.push("</svg>"), o.join(`
+    return n.push("</svg>"), n.join(`
 `);
   }
   generateId() {
@@ -3119,8 +3119,8 @@ const styles = {
   },
   toolbar: {
     width: "50px",
-    backgroundColor: "#f5f5f5",
-    borderRight: "1px solid #e0e0e0",
+    backgroundColor: "var(--nice-bg-secondary, #f5f5f5)",
+    borderRight: "1px solid var(--nice-border, #e0e0e0)",
     display: "flex",
     flexDirection: "column",
     padding: "8px 4px",
@@ -3150,13 +3150,13 @@ const styles = {
   },
   statusBar: {
     height: "30px",
-    backgroundColor: "#f5f5f5",
-    borderTop: "1px solid #e0e0e0",
+    backgroundColor: "var(--nice-bg-secondary, #f5f5f5)",
+    borderTop: "1px solid var(--nice-border, #e0e0e0)",
     padding: "0 12px",
     display: "flex",
     alignItems: "center",
     fontSize: "12px",
-    color: "#666"
+    color: "var(--nice-text-secondary, #666)"
   }
 };
 function NiceGeometry({
@@ -3164,9 +3164,9 @@ function NiceGeometry({
   width: t = 800,
   height: r = 600,
   className: a,
-  style: o
+  style: n
 }) {
-  const [n, s] = useState([]), [c, l] = useState("point"), [i, d] = useState([]), [u, h] = useState({
+  const [o, s] = useState([]), [c, l] = useState("point"), [i, d] = useState([]), [u, h] = useState({
     centerX: 0,
     centerY: 0,
     scale: 40,
@@ -3186,7 +3186,7 @@ function NiceGeometry({
   }, [b]);
   const g = {
     service: e,
-    elements: n,
+    elements: o,
     tool: c,
     setTool: l,
     view: u,
@@ -3195,7 +3195,7 @@ function NiceGeometry({
     setSelectedIds: d,
     refresh: b
   };
-  return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: g, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles.container, ...o }, children: [
+  return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: g, children: /* @__PURE__ */ jsxs("div", { className: a, style: { ...styles.container, ...n }, children: [
     /* @__PURE__ */ jsx(Toolbar, {}),
     /* @__PURE__ */ jsxs("div", { style: styles.main, children: [
       /* @__PURE__ */ jsx(Canvas, { width: t, height: r }),
@@ -3228,8 +3228,8 @@ function Toolbar() {
       title: a.title,
       style: {
         ...styles.toolButton,
-        backgroundColor: e === a.id ? "#1976d2" : "transparent",
-        color: e === a.id ? "#fff" : "#333"
+        backgroundColor: e === a.id ? "var(--nice-primary-hover, #1976d2)" : "transparent",
+        color: e === a.id ? "var(--nice-bg, #fff)" : "var(--nice-text, #333)"
       },
       children: a.icon
     },
@@ -3237,7 +3237,7 @@ function Toolbar() {
   )) });
 }
 function Canvas({ width: e, height: t }) {
-  const r = useRef(null), { service: a, elements: o, tool: n, view: s, selectedIds: c, setSelectedIds: l, refresh: i } = useGeometry(), [d, u] = useState([]), h = useCallback(
+  const r = useRef(null), { service: a, elements: n, tool: o, view: s, selectedIds: c, setSelectedIds: l, refresh: i } = useGeometry(), [d, u] = useState([]), h = useCallback(
     (m, p) => {
       const x = (m - e / 2) / s.scale + s.centerX, w = -(p - t / 2) / s.scale + s.centerY;
       return s.snapToGrid ? {
@@ -3259,7 +3259,7 @@ function Canvas({ width: e, height: t }) {
       if (!p)
         return;
       const x = h(m.clientX - p.left, m.clientY - p.top);
-      switch (n) {
+      switch (o) {
         case "point": {
           a.createPoint(x.x, x.y), i();
           break;
@@ -3271,13 +3271,13 @@ function Canvas({ width: e, height: t }) {
           if (k)
             u((f) => {
               const v = [...f, k.id];
-              return v.length === 2 ? (n === "segment" ? a.createSegment(v[0], v[1]) : n === "line" ? a.createLine(v[0], v[1]) : n === "ray" && a.createRay(v[0], v[1]), i(), []) : v;
+              return v.length === 2 ? (o === "segment" ? a.createSegment(v[0], v[1]) : o === "line" ? a.createLine(v[0], v[1]) : o === "ray" && a.createRay(v[0], v[1]), i(), []) : v;
             });
           else {
             const f = a.createPoint(x.x, x.y);
             u((v) => {
               const C = [...v, f.id];
-              return C.length === 2 ? (n === "segment" ? a.createSegment(C[0], C[1]) : n === "line" ? a.createLine(C[0], C[1]) : n === "ray" && a.createRay(C[0], C[1]), i(), []) : C;
+              return C.length === 2 ? (o === "segment" ? a.createSegment(C[0], C[1]) : o === "line" ? a.createLine(C[0], C[1]) : o === "ray" && a.createRay(C[0], C[1]), i(), []) : C;
             }), i();
           }
           break;
@@ -3322,9 +3322,9 @@ function Canvas({ width: e, height: t }) {
         }
       }
     },
-    [n, a, i, h, d, l]
+    [o, a, i, h, d, l]
   ), g = (m) => {
-    for (const x of o)
+    for (const x of n)
       if (x.type === "point" && GeoMath.distance(x, m) < 0.5)
         return x;
   };
@@ -3332,7 +3332,7 @@ function Canvas({ width: e, height: t }) {
     const m = r.current, p = m == null ? void 0 : m.getContext("2d");
     if (!(!m || !p)) {
       if (p.fillStyle = `rgb(${s.backgroundColor.r},${s.backgroundColor.g},${s.backgroundColor.b})`, p.fillRect(0, 0, e, t), s.showGrid) {
-        p.strokeStyle = "#e0e0e0", p.lineWidth = 0.5;
+        p.strokeStyle = "var(--nice-border, #e0e0e0)", p.lineWidth = 0.5;
         const x = s.gridSpacing * s.scale, w = (e / 2 - s.centerX * s.scale) % x, k = (t / 2 + s.centerY * s.scale) % x;
         for (let f = w; f < e; f += x)
           p.beginPath(), p.moveTo(f, 0), p.lineTo(f, t), p.stroke();
@@ -3341,16 +3341,16 @@ function Canvas({ width: e, height: t }) {
       }
       if (s.showAxes) {
         const x = b(0, 0);
-        p.strokeStyle = "#333", p.lineWidth = 1, p.beginPath(), p.moveTo(0, x.y), p.lineTo(e, x.y), p.stroke(), p.beginPath(), p.moveTo(x.x, 0), p.lineTo(x.x, t), p.stroke();
+        p.strokeStyle = "var(--nice-text, #333)", p.lineWidth = 1, p.beginPath(), p.moveTo(0, x.y), p.lineTo(e, x.y), p.stroke(), p.beginPath(), p.moveTo(x.x, 0), p.lineTo(x.x, t), p.stroke();
       }
-      for (const x of o) {
+      for (const x of n) {
         if (!x.visible)
           continue;
         const w = `rgb(${x.color.r},${x.color.g},${x.color.b})`, k = c.includes(x.id);
         switch (x.type) {
           case "point": {
             const f = b(x.x, x.y);
-            p.beginPath(), p.arc(f.x, f.y, k ? x.size + 2 : x.size, 0, 2 * Math.PI), p.fillStyle = k ? "#1976d2" : w, p.fill(), x.label && (p.fillStyle = "#333", p.font = "12px sans-serif", p.fillText(x.label, f.x + 8, f.y - 8));
+            p.beginPath(), p.arc(f.x, f.y, k ? x.size + 2 : x.size, 0, 2 * Math.PI), p.fillStyle = k ? "var(--nice-primary-hover, #1976d2)" : w, p.fill(), x.label && (p.fillStyle = "var(--nice-text, #333)", p.font = "12px sans-serif", p.fillText(x.label, f.x + 8, f.y - 8));
             break;
           }
           case "segment": {
@@ -3404,7 +3404,7 @@ function Canvas({ width: e, height: t }) {
         }
       }
     }
-  }, [o, s, e, t, c, d, a, b]), /* @__PURE__ */ jsx(
+  }, [n, s, e, t, c, d, a, b]), /* @__PURE__ */ jsx(
     "canvas",
     {
       ref: r,
@@ -3416,7 +3416,7 @@ function Canvas({ width: e, height: t }) {
   );
 }
 function StatusBar({ width: e, height: t }) {
-  const { tool: r, elements: a, view: o, service: n } = useGeometry(), [s, c] = useState(null), l = {
+  const { tool: r, elements: a, view: n, service: o } = useGeometry(), [s, c] = useState(null), l = {
     select: "Select",
     point: "Point",
     line: "Line",
@@ -3457,7 +3457,7 @@ function StatusBar({ width: e, height: t }) {
     /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
     /* @__PURE__ */ jsxs("span", { children: [
       "Scale: ",
-      o.scale.toFixed(1),
+      n.scale.toFixed(1),
       "x"
     ] })
   ] });