npm - @nice2dev/ui-math - Versions diffs - 1.0.10 - Mend

@nice2dev/ui-math 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,3491 @@
+var T = Object.defineProperty;
+var R = (e, t, r) => t in e ? T(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var M = (e, t, r) => R(e, typeof t != "symbol" ? t + "" : t, r);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useState, useRef, useCallback, useEffect } from "react";
+const MATH_SYMBOLS = [
+  // Greek lowercase
+  { name: "alpha", latex: "\\alpha", category: "greek", preview: "α" },
+  { name: "beta", latex: "\\beta", category: "greek", preview: "β" },
+  { name: "gamma", latex: "\\gamma", category: "greek", preview: "γ" },
+  { name: "delta", latex: "\\delta", category: "greek", preview: "δ" },
+  { name: "epsilon", latex: "\\epsilon", category: "greek", preview: "ε" },
+  { name: "zeta", latex: "\\zeta", category: "greek", preview: "ζ" },
+  { name: "eta", latex: "\\eta", category: "greek", preview: "η" },
+  { name: "theta", latex: "\\theta", category: "greek", preview: "θ" },
+  { name: "iota", latex: "\\iota", category: "greek", preview: "ι" },
+  { name: "kappa", latex: "\\kappa", category: "greek", preview: "κ" },
+  { name: "lambda", latex: "\\lambda", category: "greek", preview: "λ" },
+  { name: "mu", latex: "\\mu", category: "greek", preview: "μ" },
+  { name: "nu", latex: "\\nu", category: "greek", preview: "ν" },
+  { name: "xi", latex: "\\xi", category: "greek", preview: "ξ" },
+  { name: "pi", latex: "\\pi", category: "greek", preview: "π" },
+  { name: "rho", latex: "\\rho", category: "greek", preview: "ρ" },
+  { name: "sigma", latex: "\\sigma", category: "greek", preview: "σ" },
+  { name: "tau", latex: "\\tau", category: "greek", preview: "τ" },
+  { name: "upsilon", latex: "\\upsilon", category: "greek", preview: "υ" },
+  { name: "phi", latex: "\\phi", category: "greek", preview: "φ" },
+  { name: "chi", latex: "\\chi", category: "greek", preview: "χ" },
+  { name: "psi", latex: "\\psi", category: "greek", preview: "ψ" },
+  { name: "omega", latex: "\\omega", category: "greek", preview: "ω" },
+  // Greek uppercase
+  { name: "Gamma", latex: "\\Gamma", category: "greek", preview: "Γ" },
+  { name: "Delta", latex: "\\Delta", category: "greek", preview: "Δ" },
+  { name: "Theta", latex: "\\Theta", category: "greek", preview: "Θ" },
+  { name: "Lambda", latex: "\\Lambda", category: "greek", preview: "Λ" },
+  { name: "Xi", latex: "\\Xi", category: "greek", preview: "Ξ" },
+  { name: "Pi", latex: "\\Pi", category: "greek", preview: "Π" },
+  { name: "Sigma", latex: "\\Sigma", category: "greek", preview: "Σ" },
+  { name: "Phi", latex: "\\Phi", category: "greek", preview: "Φ" },
+  { name: "Psi", latex: "\\Psi", category: "greek", preview: "Ψ" },
+  { name: "Omega", latex: "\\Omega", category: "greek", preview: "Ω" },
+  // Operators
+  { name: "plus/minus", latex: "\\pm", category: "operators", preview: "±" },
+  { name: "minus/plus", latex: "\\mp", category: "operators", preview: "∓" },
+  { name: "times", latex: "\\times", category: "operators", preview: "×" },
+  { name: "divide", latex: "\\div", category: "operators", preview: "÷" },
+  { name: "cdot", latex: "\\cdot", category: "operators", preview: "·" },
+  { name: "star", latex: "\\star", category: "operators", preview: "⋆" },
+  { name: "circle", latex: "\\circ", category: "operators", preview: "∘" },
+  { name: "bullet", latex: "\\bullet", category: "operators", preview: "•" },
+  { name: "oplus", latex: "\\oplus", category: "operators", preview: "⊕" },
+  { name: "otimes", latex: "\\otimes", category: "operators", preview: "⊗" },
+  { name: "odot", latex: "\\odot", category: "operators", preview: "⊙" },
+  // Relations
+  { name: "less than", latex: "<", category: "relations", preview: "<" },
+  { name: "greater than", latex: ">", category: "relations", preview: ">" },
+  { name: "less or equal", latex: "\\leq", category: "relations", preview: "≤" },
+  { name: "greater or equal", latex: "\\geq", category: "relations", preview: "≥" },
+  { name: "not equal", latex: "\\neq", category: "relations", preview: "≠" },
+  { name: "approximately", latex: "\\approx", category: "relations", preview: "≈" },
+  { name: "equivalent", latex: "\\equiv", category: "relations", preview: "≡" },
+  { name: "similar", latex: "\\sim", category: "relations", preview: "∼" },
+  { name: "proportional", latex: "\\propto", category: "relations", preview: "∝" },
+  { name: "perpendicular", latex: "\\perp", category: "relations", preview: "⊥" },
+  { name: "parallel", latex: "\\parallel", category: "relations", preview: "∥" },
+  // Arrows
+  { name: "right arrow", latex: "\\rightarrow", category: "arrows", preview: "→" },
+  { name: "left arrow", latex: "\\leftarrow", category: "arrows", preview: "←" },
+  { name: "double right", latex: "\\Rightarrow", category: "arrows", preview: "⇒" },
+  { name: "double left", latex: "\\Leftarrow", category: "arrows", preview: "⇐" },
+  { name: "iff", latex: "\\Leftrightarrow", category: "arrows", preview: "⇔" },
+  { name: "up arrow", latex: "\\uparrow", category: "arrows", preview: "↑" },
+  { name: "down arrow", latex: "\\downarrow", category: "arrows", preview: "↓" },
+  { name: "maps to", latex: "\\mapsto", category: "arrows", preview: "↦" },
+  // Functions
+  { name: "sine", latex: "\\sin", category: "functions", preview: "sin" },
+  { name: "cosine", latex: "\\cos", category: "functions", preview: "cos" },
+  { name: "tangent", latex: "\\tan", category: "functions", preview: "tan" },
+  { name: "cotangent", latex: "\\cot", category: "functions", preview: "cot" },
+  { name: "arcsine", latex: "\\arcsin", category: "functions", preview: "arcsin" },
+  { name: "arccosine", latex: "\\arccos", category: "functions", preview: "arccos" },
+  { name: "arctangent", latex: "\\arctan", category: "functions", preview: "arctan" },
+  { name: "logarithm", latex: "\\log", category: "functions", preview: "log" },
+  { name: "natural log", latex: "\\ln", category: "functions", preview: "ln" },
+  { name: "exponential", latex: "\\exp", category: "functions", preview: "exp" },
+  { name: "limit", latex: "\\lim", category: "functions", preview: "lim" },
+  { name: "supremum", latex: "\\sup", category: "functions", preview: "sup" },
+  { name: "infimum", latex: "\\inf", category: "functions", preview: "inf" },
+  { name: "maximum", latex: "\\max", category: "functions", preview: "max" },
+  { name: "minimum", latex: "\\min", category: "functions", preview: "min" },
+  // Accents
+  { name: "hat", latex: "\\hat{x}", category: "accents", preview: "x̂" },
+  { name: "bar", latex: "\\bar{x}", category: "accents", preview: "x̄" },
+  { name: "vector", latex: "\\vec{x}", category: "accents", preview: "x⃗" },
+  { name: "dot", latex: "\\dot{x}", category: "accents", preview: "ẋ" },
+  { name: "double dot", latex: "\\ddot{x}", category: "accents", preview: "ẍ" },
+  { name: "tilde", latex: "\\tilde{x}", category: "accents", preview: "x̃" },
+  // Delimiters
+  { name: "parentheses", latex: "\\left( \\right)", category: "delimiters", preview: "( )" },
+  { name: "brackets", latex: "\\left[ \\right]", category: "delimiters", preview: "[ ]" },
+  { name: "braces", latex: "\\left\\{ \\right\\}", category: "delimiters", preview: "{ }" },
+  {
+    name: "angle brackets",
+    latex: "\\left\\langle \\right\\rangle",
+    category: "delimiters",
+    preview: "⟨ ⟩"
+  },
+  {
+    name: "ceiling",
+    latex: "\\left\\lceil \\right\\rceil",
+    category: "delimiters",
+    preview: "⌈ ⌉"
+  },
+  {
+    name: "floor",
+    latex: "\\left\\lfloor \\right\\rfloor",
+    category: "delimiters",
+    preview: "⌊ ⌋"
+  },
+  { name: "absolute", latex: "\\left| \\right|", category: "delimiters", preview: "| |" },
+  { name: "norm", latex: "\\left\\| \\right\\|", category: "delimiters", preview: "‖ ‖" },
+  // Sets
+  { name: "element of", latex: "\\in", category: "sets", preview: "∈" },
+  { name: "not element", latex: "\\notin", category: "sets", preview: "∉" },
+  { name: "contains", latex: "\\ni", category: "sets", preview: "∋" },
+  { name: "subset", latex: "\\subset", category: "sets", preview: "⊂" },
+  { name: "superset", latex: "\\supset", category: "sets", preview: "⊃" },
+  { name: "subset or equal", latex: "\\subseteq", category: "sets", preview: "⊆" },
+  { name: "union", latex: "\\cup", category: "sets", preview: "∪" },
+  { name: "intersection", latex: "\\cap", category: "sets", preview: "∩" },
+  { name: "set minus", latex: "\\setminus", category: "sets", preview: "∖" },
+  { name: "empty set", latex: "\\emptyset", category: "sets", preview: "∅" },
+  { name: "naturals", latex: "\\mathbb{N}", category: "sets", preview: "ℕ" },
+  { name: "integers", latex: "\\mathbb{Z}", category: "sets", preview: "ℤ" },
+  { name: "rationals", latex: "\\mathbb{Q}", category: "sets", preview: "ℚ" },
+  { name: "reals", latex: "\\mathbb{R}", category: "sets", preview: "ℝ" },
+  { name: "complex", latex: "\\mathbb{C}", category: "sets", preview: "ℂ" },
+  // Logic
+  { name: "for all", latex: "\\forall", category: "logic", preview: "∀" },
+  { name: "exists", latex: "\\exists", category: "logic", preview: "∃" },
+  { name: "not exists", latex: "\\nexists", category: "logic", preview: "∄" },
+  { name: "and", latex: "\\land", category: "logic", preview: "∧" },
+  { name: "or", latex: "\\lor", category: "logic", preview: "∨" },
+  { name: "not", latex: "\\neg", category: "logic", preview: "¬" },
+  { name: "therefore", latex: "\\therefore", category: "logic", preview: "∴" },
+  { name: "because", latex: "\\because", category: "logic", preview: "∵" },
+  // Calculus
+  { name: "integral", latex: "\\int", category: "calculus", preview: "∫" },
+  { name: "double integral", latex: "\\iint", category: "calculus", preview: "∬" },
+  { name: "triple integral", latex: "\\iiint", category: "calculus", preview: "∭" },
+  { name: "contour integral", latex: "\\oint", category: "calculus", preview: "∮" },
+  { name: "partial", latex: "\\partial", category: "calculus", preview: "∂" },
+  { name: "nabla/gradient", latex: "\\nabla", category: "calculus", preview: "∇" },
+  { name: "summation", latex: "\\sum", category: "calculus", preview: "Σ" },
+  { name: "product", latex: "\\prod", category: "calculus", preview: "Π" },
+  { name: "infinity", latex: "\\infty", category: "calculus", preview: "∞" },
+  // Matrices
+  {
+    name: "matrix",
+    latex: "\\begin{pmatrix} a & b \\\\ c & d \\end{pmatrix}",
+    category: "matrices",
+    preview: "[ ]"
+  },
+  {
+    name: "determinant",
+    latex: "\\begin{vmatrix} a & b \\\\ c & d \\end{vmatrix}",
+    category: "matrices",
+    preview: "| |"
+  },
+  {
+    name: "bracket matrix",
+    latex: "\\begin{bmatrix} a & b \\\\ c & d \\end{bmatrix}",
+    category: "matrices",
+    preview: "[[ ]]"
+  },
+  {
+    name: "cases",
+    latex: "\\begin{cases} a & \\text{if } x > 0 \\\\ b & \\text{otherwise} \\end{cases}",
+    category: "matrices",
+    preview: "{ }"
+  }
+];
+function getSymbolsByCategory(e) {
+  return MATH_SYMBOLS.filter((t) => t.category === e);
+}
+const EQUATION_TEMPLATES = [
+  // Basic
+  { name: "Fraction", latex: "\\frac{a}{b}", category: "basic" },
+  { name: "Square root", latex: "\\sqrt{x}", category: "basic" },
+  { name: "Nth root", latex: "\\sqrt[n]{x}", category: "basic" },
+  { name: "Power", latex: "x^{n}", category: "basic" },
+  { name: "Subscript", latex: "x_{n}", category: "basic" },
+  { name: "Both", latex: "x_{i}^{n}", category: "basic" },
+  // Calculus
+  { name: "Derivative", latex: "\\frac{d}{dx}f(x)", category: "calculus" },
+  { name: "Partial derivative", latex: "\\frac{\\partial f}{\\partial x}", category: "calculus" },
+  { name: "Definite integral", latex: "\\int_{a}^{b} f(x)\\,dx", category: "calculus" },
+  { name: "Indefinite integral", latex: "\\int f(x)\\,dx", category: "calculus" },
+  { name: "Limit", latex: "\\lim_{x \\to a} f(x)", category: "calculus" },
+  { name: "Summation", latex: "\\sum_{i=1}^{n} a_i", category: "calculus" },
+  { name: "Product", latex: "\\prod_{i=1}^{n} a_i", category: "calculus" },
+  // Algebra
+  {
+    name: "Quadratic formula",
+    latex: "x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}",
+    category: "algebra"
+  },
+  { name: "Binomial", latex: "\\binom{n}{k} = \\frac{n!}{k!(n-k)!}", category: "algebra" },
+  {
+    name: "System of equations",
+    latex: "\\begin{cases} ax + by = c \\\\ dx + ey = f \\end{cases}",
+    category: "algebra"
+  },
+  // Geometry/Trigonometry
+  { name: "Pythagorean", latex: "a^2 + b^2 = c^2", category: "geometry" },
+  { name: "Circle area", latex: "A = \\pi r^2", category: "geometry" },
+  { name: "Sphere volume", latex: "V = \\frac{4}{3}\\pi r^3", category: "geometry" },
+  { name: "Euler's identity", latex: "e^{i\\pi} + 1 = 0", category: "geometry" },
+  // Statistics
+  { name: "Mean", latex: "\\bar{x} = \\frac{1}{n}\\sum_{i=1}^{n} x_i", category: "statistics" },
+  {
+    name: "Variance",
+    latex: "\\sigma^2 = \\frac{1}{n}\\sum_{i=1}^{n}(x_i - \\bar{x})^2",
+    category: "statistics"
+  },
+  {
+    name: "Normal distribution",
+    latex: "f(x) = \\frac{1}{\\sigma\\sqrt{2\\pi}}e^{-\\frac{(x-\\mu)^2}{2\\sigma^2}}",
+    category: "statistics"
+  },
+  // Physics
+  { name: "Einstein mass-energy", latex: "E = mc^2", category: "physics" },
+  { name: "Newton's second law", latex: "F = ma", category: "physics" },
+  {
+    name: "Schrödinger equation",
+    latex: "i\\hbar\\frac{\\partial}{\\partial t}\\Psi = \\hat{H}\\Psi",
+    category: "physics"
+  },
+  {
+    name: "Maxwell's equations",
+    latex: "\\nabla \\cdot \\vec{E} = \\frac{\\rho}{\\epsilon_0}",
+    category: "physics"
+  }
+];
+class MathEditorService {
+  constructor(t = {}) {
+    M(this, "equations", /* @__PURE__ */ new Map());
+    M(this, "config");
+    M(this, "nextNumber");
+    this.config = {
+      enableNumbering: t.enableNumbering ?? !0,
+      startNumber: t.startNumber ?? 1,
+      renderDelay: t.renderDelay ?? 100
+    }, this.nextNumber = this.config.startNumber;
+  }
+  /** Create new equation */
+  createEquation(t, r) {
+    const a = {
+      id: this.generateId(),
+      latex: t,
+      label: r,
+      number: this.config.enableNumbering ? this.nextNumber++ : void 0,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    return this.equations.set(a.id, a), a;
+  }
+  /** Update equation */
+  updateEquation(t, r, a) {
+    const o = this.equations.get(t);
+    if (!o)
+      throw new Error(`Equation not found: ${t}`);
+    const n = {
+      ...o,
+      latex: r,
+      label: a ?? o.label,
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    return this.equations.set(t, n), n;
+  }
+  /** Delete equation */
+  deleteEquation(t) {
+    this.equations.delete(t);
+  }
+  /** Get equation */
+  getEquation(t) {
+    return this.equations.get(t);
+  }
+  /** List all equations */
+  listEquations() {
+    return Array.from(this.equations.values()).sort(
+      (t, r) => new Date(t.createdAt).getTime() - new Date(r.createdAt).getTime()
+    );
+  }
+  /** Export to LaTeX document */
+  exportToLatex() {
+    const t = [
+      "\\documentclass{article}",
+      "\\usepackage{amsmath}",
+      "\\usepackage{amssymb}",
+      "",
+      "\\begin{document}",
+      ""
+    ];
+    for (const r of this.listEquations())
+      r.number !== void 0 ? (t.push("\\begin{equation}"), r.label && t.push(`\\label{${r.label}}`), t.push(r.latex), t.push("\\end{equation}")) : (t.push("\\["), t.push(r.latex), t.push("\\]")), t.push("");
+    return t.push("\\end{document}"), t.join(`
+`);
+  }
+  /** 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();
+      r.push(this.createEquation(c, s == null ? void 0 : s[1]));
+    }
+    return r;
+  }
+  generateId() {
+    return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
+  }
+}
+function createMathEditorService(e) {
+  return new MathEditorService(e);
+}
+async function recognizeHandwriting(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",
+    confidence: 0.85,
+    alternatives: ["x", "X", "\\times"]
+  };
+}
+const MathEditorContext = createContext(null);
+function useMathEditor() {
+  const e = useContext(MathEditorContext);
+  if (!e)
+    throw new Error("useMathEditor must be used within MathEditorProvider");
+  return e;
+}
+const styles$3 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    fontFamily: "'Inter', sans-serif",
+    fontSize: "14px"
+  },
+  toolbar: {
+    display: "flex",
+    gap: "8px",
+    padding: "8px",
+    borderBottom: "1px solid #e0e0e0",
+    backgroundColor: "#fafafa",
+    flexWrap: "wrap",
+    alignItems: "center"
+  },
+  main: {
+    display: "flex",
+    flex: 1,
+    overflow: "hidden"
+  },
+  sidebar: {
+    width: "200px",
+    borderRight: "1px solid #e0e0e0",
+    overflow: "auto",
+    backgroundColor: "#f5f5f5"
+  },
+  editor: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    padding: "16px",
+    overflow: "auto"
+  },
+  input: {
+    width: "100%",
+    minHeight: "100px",
+    padding: "12px",
+    fontFamily: "'JetBrains Mono', monospace",
+    fontSize: "14px",
+    border: "1px solid #ddd",
+    borderRadius: "4px",
+    resize: "vertical"
+  },
+  preview: {
+    marginTop: "16px",
+    padding: "20px",
+    backgroundColor: "#fff",
+    border: "1px solid #e0e0e0",
+    borderRadius: "4px",
+    minHeight: "60px",
+    fontSize: "20px",
+    textAlign: "center"
+  },
+  button: {
+    padding: "6px 12px",
+    backgroundColor: "#1976d2",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "13px"
+  },
+  symbolGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(5, 1fr)",
+    gap: "4px",
+    padding: "8px"
+  },
+  symbolButton: {
+    padding: "8px",
+    border: "1px solid #ddd",
+    borderRadius: "4px",
+    backgroundColor: "#fff",
+    cursor: "pointer",
+    fontSize: "16px",
+    textAlign: "center"
+  },
+  categoryHeader: {
+    padding: "8px 12px",
+    backgroundColor: "#e0e0e0",
+    fontWeight: 600,
+    fontSize: "12px",
+    textTransform: "uppercase"
+  },
+  canvas: {
+    width: "100%",
+    height: "200px",
+    border: "1px solid #ddd",
+    borderRadius: "4px",
+    backgroundColor: "#fff",
+    cursor: "crosshair"
+  }
+};
+function NiceMathEditor({
+  service: e,
+  initialLatex: t = "",
+  onChange: r,
+  className: a,
+  style: o
+}) {
+  const [n, s] = useState(t), [c, l] = useState("input"), i = useRef(null), d = useCallback(
+    (y) => {
+      s(y), r == null || r(y);
+    },
+    [r]
+  ), u = useCallback(
+    (y) => {
+      const g = i.current;
+      if (!g) {
+        d(n + y);
+        return;
+      }
+      const m = g.selectionStart, p = g.selectionEnd, x = n.slice(0, m) + y + n.slice(p);
+      d(x), setTimeout(() => {
+        g.focus(), g.selectionStart = g.selectionEnd = m + y.length;
+      }, 0);
+    },
+    [n, d]
+  ), h = useCallback(
+    (y) => {
+      u(y.latex);
+    },
+    [u]
+  ), b = {
+    service: e,
+    latex: n,
+    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: [
+    /* @__PURE__ */ jsx(Toolbar$1, {}),
+    /* @__PURE__ */ jsxs("div", { style: styles$3.main, children: [
+      /* @__PURE__ */ jsx(SymbolPalette, {}),
+      /* @__PURE__ */ jsx("div", { style: styles$3.editor, children: c === "input" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: i,
+            value: n,
+            onChange: (y) => d(y.target.value),
+            placeholder: "Enter LaTeX equation...",
+            style: styles$3.input
+          }
+        ),
+        /* @__PURE__ */ jsx(LatexPreview, { latex: n })
+      ] }) : /* @__PURE__ */ jsx(HandwritingCanvas, {}) })
+    ] })
+  ] }) });
+}
+function Toolbar$1() {
+  const { mode: e, setMode: t, latex: r, insertTemplate: a } = useMathEditor(), [o, n] = useState(!1);
+  return /* @__PURE__ */ jsxs("div", { style: styles$3.toolbar, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => t("input"),
+        style: {
+          ...styles$3.button,
+          backgroundColor: e === "input" ? "#1976d2" : "#9e9e9e"
+        },
+        children: "⌨️ LaTeX Input"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => t("handwriting"),
+        style: {
+          ...styles$3.button,
+          backgroundColor: e === "handwriting" ? "#1976d2" : "#9e9e9e"
+        },
+        children: "✏️ Handwriting"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { borderLeft: "1px solid #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(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            backgroundColor: "#fff",
+            border: "1px solid #ddd",
+            borderRadius: "4px",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+            zIndex: 100,
+            width: "300px",
+            maxHeight: "400px",
+            overflow: "auto"
+          },
+          children: ["basic", "calculus", "algebra", "geometry", "statistics", "physics"].map(
+            (s) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: styles$3.categoryHeader, children: s }),
+              EQUATION_TEMPLATES.filter((c) => c.category === s).map((c) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  onClick: () => {
+                    a(c), n(!1);
+                  },
+                  style: {
+                    padding: "8px 12px",
+                    cursor: "pointer",
+                    borderBottom: "1px solid #eee"
+                  },
+                  onMouseOver: (l) => l.target.style.backgroundColor = "#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: [
+                      c.latex.substring(0, 40),
+                      c.latex.length > 40 ? "..." : ""
+                    ] })
+                  ]
+                },
+                c.name
+              ))
+            ] }, s)
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => navigator.clipboard.writeText(r),
+        style: { ...styles$3.button, backgroundColor: "#4caf50" },
+        children: "📋 Copy LaTeX"
+      }
+    )
+  ] });
+}
+function SymbolPalette() {
+  const { insertSymbol: e } = useMathEditor(), [t, r] = useState("greek"), a = [
+    "greek",
+    "operators",
+    "relations",
+    "arrows",
+    "functions",
+    "accents",
+    "delimiters",
+    "sets",
+    "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(
+      "button",
+      {
+        onClick: () => r(n),
+        style: {
+          padding: "4px 8px",
+          fontSize: "11px",
+          border: "1px solid #ddd",
+          borderRadius: "4px",
+          backgroundColor: t === n ? "#1976d2" : "#fff",
+          color: t === n ? "#fff" : "#333",
+          cursor: "pointer"
+        },
+        children: n
+      },
+      n
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: styles$3.symbolGrid, children: o.map((n) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => e(n.latex),
+        style: styles$3.symbolButton,
+        title: `${n.name}: ${n.latex}`,
+        children: n.preview || n.latex
+      },
+      n.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("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 p = r.current;
+    if (!p)
+      return;
+    l(!0);
+    const x = p.getBoundingClientRect();
+    s([
+      {
+        x: m.clientX - x.left,
+        y: m.clientY - x.top,
+        pressure: m.pressure,
+        timestamp: Date.now()
+      }
+    ]);
+  }, h = (m) => {
+    if (!c)
+      return;
+    const p = r.current, x = p == null ? void 0 : p.getContext("2d");
+    if (!p || !x)
+      return;
+    const w = p.getBoundingClientRect(), k = {
+      x: m.clientX - w.left,
+      y: m.clientY - w.top,
+      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();
+    }
+  }, b = () => {
+    if (c) {
+      if (l(!1), n.length > 1) {
+        const m = {
+          id: Date.now().toString(),
+          points: [...n]
+        };
+        o((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([]);
+  }, g = async () => {
+    if (a.length !== 0) {
+      d(!0);
+      try {
+        const m = await recognizeHandwriting(a);
+        e(m.latex), t("input");
+      } finally {
+        d(!1);
+      }
+    }
+  };
+  return useEffect(() => {
+    const m = r.current;
+    m && (m.width = m.offsetWidth, m.height = 200);
+  }, []), /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: r,
+        style: styles$3.canvas,
+        onPointerDown: u,
+        onPointerMove: h,
+        onPointerUp: b,
+        onPointerLeave: b
+      }
+    ),
+    /* @__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: g,
+          disabled: a.length === 0 || i,
+          style: styles$3.button,
+          children: i ? "Recognizing..." : "Recognize"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#666", marginTop: "8px" }, children: "Draw your equation above. Handwriting recognition requires external API integration." })
+  ] });
+}
+const mathConstants = {
+  pi: Math.PI,
+  PI: Math.PI,
+  e: Math.E,
+  E: Math.E,
+  phi: (1 + Math.sqrt(5)) / 2,
+  tau: Math.PI * 2
+}, mathFunctions = {
+  sin: Math.sin,
+  cos: Math.cos,
+  tan: Math.tan,
+  asin: Math.asin,
+  acos: Math.acos,
+  atan: Math.atan,
+  atan2: Math.atan2,
+  sinh: Math.sinh,
+  cosh: Math.cosh,
+  tanh: Math.tanh,
+  sqrt: Math.sqrt,
+  cbrt: Math.cbrt,
+  abs: Math.abs,
+  floor: Math.floor,
+  ceil: Math.ceil,
+  round: Math.round,
+  exp: Math.exp,
+  log: Math.log,
+  log10: Math.log10,
+  log2: Math.log2,
+  pow: Math.pow,
+  min: Math.min,
+  max: Math.max,
+  sign: Math.sign,
+  hypot: Math.hypot,
+  // Custom
+  sec: (e) => 1 / Math.cos(e),
+  csc: (e) => 1 / Math.sin(e),
+  cot: (e) => 1 / Math.tan(e),
+  ln: Math.log
+};
+class ExpressionParser {
+  constructor() {
+    M(this, "pos", 0);
+    M(this, "expr", "");
+  }
+  parse(t) {
+    this.expr = t.replace(/\s+/g, ""), this.pos = 0;
+    const r = this.parseAddSub();
+    return (a) => this.evaluate(r, { ...mathConstants, ...a });
+  }
+  parseAddSub() {
+    let t = this.parseMulDiv();
+    for (; this.pos < this.expr.length; ) {
+      const r = this.expr[this.pos];
+      if (r !== "+" && r !== "-")
+        break;
+      this.pos++;
+      const a = this.parseMulDiv();
+      t = { type: "binary", op: r, left: t, right: a };
+    }
+    return t;
+  }
+  parseMulDiv() {
+    let t = this.parsePower();
+    for (; this.pos < this.expr.length; ) {
+      const r = this.expr[this.pos];
+      if (r !== "*" && r !== "/")
+        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());
+  }
+  parsePrimary() {
+    if (this.expr[this.pos] === "(") {
+      this.pos++;
+      const a = this.parseAddSub();
+      return this.expr[this.pos] === ")" && this.pos++, a;
+    }
+    const t = this.expr.slice(this.pos).match(/^(\d+\.?\d*)/);
+    if (t)
+      return this.pos += t[1].length, { type: "number", value: parseFloat(t[1]) };
+    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] === "(") {
+        this.pos++;
+        const o = [];
+        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 };
+      }
+      return { type: "variable", name: a };
+    }
+    return { type: "number", value: 0 };
+  }
+  evaluate(t, r) {
+    switch (t.type) {
+      case "number":
+        return t.value;
+      case "variable":
+        if (t.name in r)
+          return r[t.name];
+        throw new Error(`Unknown variable: ${t.name}`);
+      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);
+        switch (t.op) {
+          case "+":
+            return a + o;
+          case "-":
+            return a - o;
+          case "*":
+            return a * o;
+          case "/":
+            return a / o;
+          case "^":
+            return Math.pow(a, o);
+          default:
+            return 0;
+        }
+      }
+      case "call": {
+        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);
+      }
+      default:
+        return 0;
+    }
+  }
+}
+class GraphService {
+  constructor(t = {}) {
+    M(this, "plots", /* @__PURE__ */ new Map());
+    M(this, "parser", new ExpressionParser());
+    M(this, "config");
+    this.config = {
+      defaultResolution: t.defaultResolution ?? 200,
+      maxResolution: t.maxResolution ?? 1e3
+    };
+  }
+  /** Add a plot */
+  addPlot(t) {
+    const r = {
+      id: this.generateId(),
+      type: t.type,
+      expression: t.expression,
+      expressionY: t.expressionY,
+      expressionZ: t.expressionZ,
+      label: t.label,
+      color: t.color ?? { r: 66, g: 133, b: 244 },
+      lineWidth: t.lineWidth ?? 2,
+      visible: t.visible ?? !0,
+      parameterRange: t.parameterRange ?? { min: -Math.PI, max: Math.PI },
+      parameterRange2: t.parameterRange2 ?? { min: -Math.PI, max: Math.PI },
+      resolution: t.resolution ?? this.config.defaultResolution
+    };
+    return this.plots.set(r.id, r), r;
+  }
+  /** Update a plot */
+  updatePlot(t, r) {
+    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;
+  }
+  /** Remove a plot */
+  removePlot(t) {
+    this.plots.delete(t);
+  }
+  /** Get all plots */
+  getPlots() {
+    return Array.from(this.plots.values());
+  }
+  /** Get plot by ID */
+  getPlot(t) {
+    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;
+    for (let l = 0; l <= a; l++) {
+      const i = r.min + l * c;
+      try {
+        const d = n({ x: i, ...o });
+        Number.isFinite(d) && s.push({ x: i, y: d });
+      } catch {
+      }
+    }
+    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++) {
+      const u = a.min + d * i;
+      try {
+        const h = s({ t: u, ...n }), b = c({ t: u, ...n });
+        Number.isFinite(h) && Number.isFinite(b) && l.push({ x: h, y: b });
+      } catch {
+      }
+    }
+    return l;
+  }
+  /** Compute 2D polar curve */
+  compute2DPolar(t, r, a, o) {
+    const n = 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 });
+        if (Number.isFinite(d)) {
+          const u = d * Math.cos(i), h = d * Math.sin(i);
+          s.push({ x: u, y: h });
+        }
+      } catch {
+      }
+    }
+    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++) {
+      const u = [], h = r.min + d * l;
+      for (let b = 0; b <= o; b++) {
+        const y = a.min + b * i;
+        try {
+          const g = s({ x: h, y, ...n });
+          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 });
+        }
+      }
+      c.push(u);
+    }
+    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}">`,
+      `<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">');
+      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}"/>`);
+      }
+      for (let u = Math.ceil(r.yRange.min); u <= r.yRange.max; u++) {
+        const h = i(u);
+        d.push(`<line x1="40" y1="${h}" x2="${a - 40}" y2="${h}"/>`);
+      }
+      d.push("</g>");
+    }
+    if (r.showAxes) {
+      d.push('<g stroke="#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>");
+    }
+    for (const u of t.filter((h) => h.visible))
+      if (u.type === "2d-function") {
+        const h = this.compute2DFunction(u.expression, r.xRange, u.resolution || 200);
+        if (h.length > 0) {
+          const b = h.map((y, g) => `${g === 0 ? "M" : "L"}${l(y.x)},${i(y.y)}`).join(" ");
+          d.push(
+            `<path d="${b}" fill="none" stroke="rgb(${u.color.r},${u.color.g},${u.color.b})" stroke-width="${u.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(`
+`);
+  }
+  /** Export as PNG (data URL) */
+  async exportPNG(t, r, a, o) {
+    const n = this.exportSVG(t, r, a, o);
+    return new Promise((s, c) => {
+      const l = new Image();
+      l.onload = () => {
+        const i = document.createElement("canvas");
+        i.width = a, i.height = o;
+        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);
+    });
+  }
+  generateId() {
+    return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
+  }
+}
+function createGraphService(e) {
+  return new GraphService(e);
+}
+const FUNCTION_PRESETS = [
+  // Basic
+  { name: "Linear", expression: "x", type: "2d-function", category: "basic" },
+  { name: "Quadratic", expression: "x^2", type: "2d-function", category: "basic" },
+  { name: "Cubic", expression: "x^3", type: "2d-function", category: "basic" },
+  { name: "Square root", expression: "sqrt(x)", type: "2d-function", category: "basic" },
+  { name: "Absolute", expression: "abs(x)", type: "2d-function", category: "basic" },
+  { name: "Reciprocal", expression: "1/x", type: "2d-function", category: "basic" },
+  // Trigonometric
+  { name: "Sine", expression: "sin(x)", type: "2d-function", category: "trigonometric" },
+  { name: "Cosine", expression: "cos(x)", type: "2d-function", category: "trigonometric" },
+  { name: "Tangent", expression: "tan(x)", type: "2d-function", category: "trigonometric" },
+  { name: "Sine wave", expression: "sin(2*x)", type: "2d-function", category: "trigonometric" },
+  {
+    name: "Damped oscillation",
+    expression: "exp(-x/5)*sin(x*3)",
+    type: "2d-function",
+    category: "trigonometric"
+  },
+  // Exponential/Logarithmic
+  { name: "Exponential", expression: "exp(x)", type: "2d-function", category: "exponential" },
+  { name: "Natural log", expression: "ln(x)", type: "2d-function", category: "exponential" },
+  { name: "Gaussian", expression: "exp(-x^2)", type: "2d-function", category: "exponential" },
+  { name: "Sigmoid", expression: "1/(1+exp(-x))", type: "2d-function", category: "exponential" },
+  // Parametric
+  {
+    name: "Circle",
+    expression: "cos(t)",
+    expressionY: "sin(t)",
+    type: "2d-parametric",
+    category: "parametric"
+  },
+  {
+    name: "Ellipse",
+    expression: "2*cos(t)",
+    expressionY: "sin(t)",
+    type: "2d-parametric",
+    category: "parametric"
+  },
+  {
+    name: "Lissajous",
+    expression: "sin(3*t)",
+    expressionY: "sin(2*t)",
+    type: "2d-parametric",
+    category: "parametric"
+  },
+  {
+    name: "Spiral",
+    expression: "t*cos(t)",
+    expressionY: "t*sin(t)",
+    type: "2d-parametric",
+    category: "parametric"
+  },
+  {
+    name: "Cardioid",
+    expression: "(1-cos(t))*cos(t)",
+    expressionY: "(1-cos(t))*sin(t)",
+    type: "2d-parametric",
+    category: "parametric"
+  },
+  {
+    name: "Rose curve",
+    expression: "cos(3*t)*cos(t)",
+    expressionY: "cos(3*t)*sin(t)",
+    type: "2d-parametric",
+    category: "parametric"
+  },
+  // Polar
+  { name: "Polar rose 3", expression: "cos(3*theta)", type: "2d-polar", category: "polar" },
+  { name: "Polar rose 5", expression: "cos(5*theta)", type: "2d-polar", category: "polar" },
+  { name: "Archimedean spiral", expression: "theta", type: "2d-polar", category: "polar" },
+  { name: "Logarithmic spiral", expression: "exp(theta/10)", type: "2d-polar", category: "polar" },
+  // 3D Surfaces
+  { name: "Paraboloid", expression: "x^2 + y^2", type: "3d-surface", category: "3d" },
+  { name: "Saddle", expression: "x^2 - y^2", type: "3d-surface", category: "3d" },
+  { name: "Ripple", expression: "sin(sqrt(x^2 + y^2))", type: "3d-surface", category: "3d" },
+  { name: "Torus slice", expression: "cos(x)*sin(y)", type: "3d-surface", category: "3d" },
+  {
+    name: "Peaks",
+    expression: "3*(1-x)^2*exp(-x^2-(y+1)^2) - 10*(x/5-x^3-y^5)*exp(-x^2-y^2) - 1/3*exp(-(x+1)^2-y^2)",
+    type: "3d-surface",
+    category: "3d"
+  }
+], GraphContext = createContext(null);
+function useGraph() {
+  const e = useContext(GraphContext);
+  if (!e)
+    throw new Error("useGraph must be used within GraphProvider");
+  return e;
+}
+const styles$2 = {
+  container: {
+    display: "flex",
+    height: "100%",
+    fontFamily: "'Inter', sans-serif",
+    fontSize: "14px"
+  },
+  sidebar: {
+    width: "280px",
+    borderRight: "1px solid #e0e0e0",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  },
+  plotList: {
+    flex: 1,
+    overflow: "auto",
+    padding: "8px"
+  },
+  main: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#fff"
+  },
+  canvas: {
+    flex: 1,
+    backgroundColor: "#fff"
+  },
+  toolbar: {
+    display: "flex",
+    gap: "8px",
+    padding: "8px",
+    borderBottom: "1px solid #e0e0e0",
+    alignItems: "center"
+  },
+  button: {
+    padding: "6px 12px",
+    backgroundColor: "#1976d2",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "13px"
+  },
+  input: {
+    padding: "6px 8px",
+    border: "1px solid #ddd",
+    borderRadius: "4px",
+    fontSize: "13px"
+  },
+  plotItem: {
+    padding: "8px",
+    marginBottom: "8px",
+    border: "1px solid #e0e0e0",
+    borderRadius: "4px",
+    backgroundColor: "#fafafa"
+  }
+};
+function NiceGraphPlotter({
+  service: e,
+  width: t = 800,
+  height: r = 600,
+  className: a,
+  style: o
+}) {
+  const [n, s] = useState([]), [c, l] = useState({
+    xRange: { min: -10, max: 10 },
+    yRange: { min: -10, max: 10 },
+    zRange: { min: -5, max: 5 },
+    showGrid: !0,
+    showAxes: !0,
+    showLabels: !0,
+    backgroundColor: { r: 255, g: 255, b: 255 },
+    cameraRotationX: 30,
+    cameraRotationY: 45,
+    cameraDistance: 5
+  }), [i, d] = useState({
+    isPlaying: !1,
+    parameter: "a",
+    currentValue: 0,
+    minValue: -5,
+    maxValue: 5,
+    speed: 1
+  }), u = useCallback(() => {
+    s(e.getPlots());
+  }, [e]), h = useCallback((x) => {
+    l((w) => ({ ...w, ...x }));
+  }, []), b = useCallback((x) => {
+    d((w) => ({ ...w, ...x }));
+  }, []), y = useCallback(
+    (x) => {
+      e.addPlot(x), u();
+    },
+    [e, u]
+  ), g = useCallback(
+    (x) => {
+      e.removePlot(x), u();
+    },
+    [e, u]
+  ), m = useCallback(
+    (x, w) => {
+      e.updatePlot(x, w), u();
+    },
+    [e, u]
+  ), p = {
+    service: e,
+    plots: n,
+    view: c,
+    setView: h,
+    addPlot: y,
+    removePlot: g,
+    updatePlot: m,
+    animation: i,
+    setAnimation: b,
+    refresh: u
+  };
+  return /* @__PURE__ */ jsx(GraphContext.Provider, { value: p, 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, {})
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles$2.main, children: [
+      /* @__PURE__ */ jsx(GraphToolbar, { width: t, height: r }),
+      /* @__PURE__ */ jsx(Canvas2D, { width: t, height: r })
+    ] })
+  ] }) });
+}
+function PlotControls() {
+  const { addPlot: e } = useGraph(), [t, r] = useState("sin(x)"), [a, o] = useState("2d-function"), [n, s] = useState("cos(x)"), c = () => {
+    e({
+      type: a,
+      expression: t,
+      expressionY: a === "2d-parametric" ? n : void 0,
+      color: {
+        r: Math.floor(Math.random() * 200),
+        g: Math.floor(Math.random() * 200),
+        b: Math.floor(Math.random() * 200)
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", borderBottom: "1px solid #e0e0e0" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: a,
+        onChange: (l) => o(l.target.value),
+        style: { ...styles$2.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__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: t,
+        onChange: (l) => r(l.target.value),
+        placeholder: a === "2d-parametric" ? "x(t) = ..." : "Expression...",
+        style: { ...styles$2.input, width: "100%" }
+      }
+    ) }),
+    a === "2d-parametric" && /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: n,
+        onChange: (l) => s(l.target.value),
+        placeholder: "y(t) = ...",
+        style: { ...styles$2.input, width: "100%" }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("button", { onClick: c, style: { ...styles$2.button, width: "100%" }, children: "+ Add Plot" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        onChange: (l) => {
+          const i = FUNCTION_PRESETS.find((d) => d.name === l.target.value);
+          i && e({
+            type: i.type,
+            expression: i.expression,
+            expressionY: i.expressionY,
+            label: i.name,
+            color: {
+              r: Math.floor(Math.random() * 200),
+              g: Math.floor(Math.random() * 200),
+              b: Math.floor(Math.random() * 200)
+            }
+          });
+        },
+        style: { ...styles$2.input, width: "100%", marginTop: "8px" },
+        value: "",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: !0, children: "Quick add preset..." }),
+          ["basic", "trigonometric", "exponential", "parametric", "polar", "3d"].map((l) => /* @__PURE__ */ jsx("optgroup", { label: l.charAt(0).toUpperCase() + l.slice(1), children: FUNCTION_PRESETS.filter((i) => i.category === l).map((i) => /* @__PURE__ */ jsxs("option", { value: i.name, children: [
+            i.name,
+            ": ",
+            i.expression
+          ] }, i.name)) }, l))
+        ]
+      }
+    )
+  ] });
+}
+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.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(
+          "input",
+          {
+            type: "checkbox",
+            checked: a.visible,
+            onChange: (o) => r(a.id, { visible: o.target.checked })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "16px",
+              height: "16px",
+              borderRadius: "3px",
+              backgroundColor: `rgb(${a.color.r},${a.color.g},${a.color.b})`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { flex: 1, fontWeight: 500 }, children: a.label || a.expression }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => t(a.id),
+            style: {
+              padding: "2px 6px",
+              backgroundColor: "#f44336",
+              color: "white",
+              border: "none",
+              borderRadius: "3px",
+              cursor: "pointer",
+              fontSize: "12px"
+            },
+            children: "×"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "#666", fontFamily: "monospace" }, children: a.type === "2d-parametric" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "x(t) = ",
+        a.expression,
+        /* @__PURE__ */ jsx("br", {}),
+        "y(t) = ",
+        a.expressionY
+      ] }) : a.expression })
+    ] }, a.id))
+  ] });
+}
+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");
+    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");
+    i.href = l, i.download = "graph.png", i.click();
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles$2.toolbar, children: [
+    /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
+      "X: [",
+      " ",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: o.xRange.min,
+          onChange: (l) => n({ xRange: { ...o.xRange, min: Number(l.target.value) } }),
+          style: { ...styles$2.input, width: "50px" }
+        }
+      ),
+      ",",
+      " ",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: o.xRange.max,
+          onChange: (l) => n({ xRange: { ...o.xRange, max: Number(l.target.value) } }),
+          style: { ...styles$2.input, width: "50px" }
+        }
+      ),
+      "]"
+    ] }),
+    /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
+      "Y: [",
+      " ",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: o.yRange.min,
+          onChange: (l) => n({ yRange: { ...o.yRange, min: Number(l.target.value) } }),
+          style: { ...styles$2.input, width: "50px" }
+        }
+      ),
+      ",",
+      " ",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: o.yRange.max,
+          onChange: (l) => n({ yRange: { ...o.yRange, max: Number(l.target.value) } }),
+          style: { ...styles$2.input, width: "50px" }
+        }
+      ),
+      "]"
+    ] }),
+    /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: o.showGrid,
+          onChange: (l) => n({ showGrid: l.target.checked })
+        }
+      ),
+      "Grid"
+    ] }),
+    /* @__PURE__ */ jsxs("label", { style: { fontSize: "12px" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: o.showAxes,
+          onChange: (l) => n({ 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" })
+  ] });
+}
+function Canvas2D({ width: e, height: t }) {
+  const r = useRef(null), { service: a, plots: o, view: n, 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++) {
+        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++) {
+        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;
+      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++)
+          p !== 0 && i.fillText(String(p), h(p), g + 15);
+        for (let p = Math.ceil(n.yRange.min); p <= n.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)) {
+      const m = `rgb(${g.color.r},${g.color.g},${g.color.b})`;
+      i.strokeStyle = m, i.lineWidth = g.lineWidth || 2;
+      let p = [];
+      switch (g.type) {
+        case "2d-function":
+          p = a.compute2DFunction(
+            g.expression,
+            n.xRange,
+            g.resolution || 200,
+            y
+          );
+          break;
+        case "2d-parametric":
+          p = a.compute2DParametric(
+            g.expression,
+            g.expressionY || "sin(t)",
+            g.parameterRange || { min: 0, max: 2 * Math.PI },
+            g.resolution || 200,
+            y
+          );
+          break;
+        case "2d-polar":
+          p = a.compute2DPolar(
+            g.expression,
+            g.parameterRange || { min: 0, max: 2 * Math.PI },
+            g.resolution || 200,
+            y
+          );
+          break;
+      }
+      if (p.length > 0) {
+        i.beginPath();
+        let x = !1;
+        for (const w of p) {
+          const k = h(w.x), f = b(w.y);
+          if (f < 0 || f > t) {
+            x = !1;
+            continue;
+          }
+          x ? i.lineTo(k, f) : (i.moveTo(k, f), x = !0);
+        }
+        i.stroke();
+      }
+    }
+  }, [o, n, s, a, e, t]), /* @__PURE__ */ jsx("canvas", { ref: r, width: e, height: t, style: styles$2.canvas });
+}
+const UNITS = [
+  // Length
+  { name: "Meter", symbol: "m", category: "Length", toBase: (e) => e, fromBase: (e) => e },
+  {
+    name: "Kilometer",
+    symbol: "km",
+    category: "Length",
+    toBase: (e) => e * 1e3,
+    fromBase: (e) => e / 1e3
+  },
+  {
+    name: "Centimeter",
+    symbol: "cm",
+    category: "Length",
+    toBase: (e) => e / 100,
+    fromBase: (e) => e * 100
+  },
+  {
+    name: "Millimeter",
+    symbol: "mm",
+    category: "Length",
+    toBase: (e) => e / 1e3,
+    fromBase: (e) => e * 1e3
+  },
+  {
+    name: "Mile",
+    symbol: "mi",
+    category: "Length",
+    toBase: (e) => e * 1609.344,
+    fromBase: (e) => e / 1609.344
+  },
+  {
+    name: "Yard",
+    symbol: "yd",
+    category: "Length",
+    toBase: (e) => e * 0.9144,
+    fromBase: (e) => e / 0.9144
+  },
+  {
+    name: "Foot",
+    symbol: "ft",
+    category: "Length",
+    toBase: (e) => e * 0.3048,
+    fromBase: (e) => e / 0.3048
+  },
+  {
+    name: "Inch",
+    symbol: "in",
+    category: "Length",
+    toBase: (e) => e * 0.0254,
+    fromBase: (e) => e / 0.0254
+  },
+  // Mass
+  { name: "Kilogram", symbol: "kg", category: "Mass", toBase: (e) => e, fromBase: (e) => e },
+  {
+    name: "Gram",
+    symbol: "g",
+    category: "Mass",
+    toBase: (e) => e / 1e3,
+    fromBase: (e) => e * 1e3
+  },
+  {
+    name: "Milligram",
+    symbol: "mg",
+    category: "Mass",
+    toBase: (e) => e / 1e6,
+    fromBase: (e) => e * 1e6
+  },
+  {
+    name: "Pound",
+    symbol: "lb",
+    category: "Mass",
+    toBase: (e) => e * 0.453592,
+    fromBase: (e) => e / 0.453592
+  },
+  {
+    name: "Ounce",
+    symbol: "oz",
+    category: "Mass",
+    toBase: (e) => e * 0.0283495,
+    fromBase: (e) => e / 0.0283495
+  },
+  {
+    name: "Ton",
+    symbol: "t",
+    category: "Mass",
+    toBase: (e) => e * 1e3,
+    fromBase: (e) => e / 1e3
+  },
+  // Temperature
+  { name: "Celsius", symbol: "°C", category: "Temperature", toBase: (e) => e, fromBase: (e) => e },
+  {
+    name: "Fahrenheit",
+    symbol: "°F",
+    category: "Temperature",
+    toBase: (e) => (e - 32) * 5 / 9,
+    fromBase: (e) => e * 9 / 5 + 32
+  },
+  {
+    name: "Kelvin",
+    symbol: "K",
+    category: "Temperature",
+    toBase: (e) => e - 273.15,
+    fromBase: (e) => e + 273.15
+  },
+  // Time
+  { name: "Second", symbol: "s", category: "Time", toBase: (e) => e, fromBase: (e) => e },
+  {
+    name: "Millisecond",
+    symbol: "ms",
+    category: "Time",
+    toBase: (e) => e / 1e3,
+    fromBase: (e) => e * 1e3
+  },
+  {
+    name: "Minute",
+    symbol: "min",
+    category: "Time",
+    toBase: (e) => e * 60,
+    fromBase: (e) => e / 60
+  },
+  {
+    name: "Hour",
+    symbol: "hr",
+    category: "Time",
+    toBase: (e) => e * 3600,
+    fromBase: (e) => e / 3600
+  },
+  {
+    name: "Day",
+    symbol: "d",
+    category: "Time",
+    toBase: (e) => e * 86400,
+    fromBase: (e) => e / 86400
+  },
+  {
+    name: "Week",
+    symbol: "wk",
+    category: "Time",
+    toBase: (e) => e * 604800,
+    fromBase: (e) => e / 604800
+  },
+  // Area
+  { name: "Square meter", symbol: "m²", category: "Area", toBase: (e) => e, fromBase: (e) => e },
+  {
+    name: "Square kilometer",
+    symbol: "km²",
+    category: "Area",
+    toBase: (e) => e * 1e6,
+    fromBase: (e) => e / 1e6
+  },
+  {
+    name: "Hectare",
+    symbol: "ha",
+    category: "Area",
+    toBase: (e) => e * 1e4,
+    fromBase: (e) => e / 1e4
+  },
+  {
+    name: "Acre",
+    symbol: "ac",
+    category: "Area",
+    toBase: (e) => e * 4046.86,
+    fromBase: (e) => e / 4046.86
+  },
+  {
+    name: "Square foot",
+    symbol: "ft²",
+    category: "Area",
+    toBase: (e) => e * 0.092903,
+    fromBase: (e) => e / 0.092903
+  },
+  // Volume
+  { name: "Liter", symbol: "L", category: "Volume", toBase: (e) => e, fromBase: (e) => e },
+  {
+    name: "Milliliter",
+    symbol: "mL",
+    category: "Volume",
+    toBase: (e) => e / 1e3,
+    fromBase: (e) => e * 1e3
+  },
+  {
+    name: "Cubic meter",
+    symbol: "m³",
+    category: "Volume",
+    toBase: (e) => e * 1e3,
+    fromBase: (e) => e / 1e3
+  },
+  {
+    name: "Gallon (US)",
+    symbol: "gal",
+    category: "Volume",
+    toBase: (e) => e * 3.78541,
+    fromBase: (e) => e / 3.78541
+  },
+  {
+    name: "Quart",
+    symbol: "qt",
+    category: "Volume",
+    toBase: (e) => e * 0.946353,
+    fromBase: (e) => e / 0.946353
+  },
+  {
+    name: "Pint",
+    symbol: "pt",
+    category: "Volume",
+    toBase: (e) => e * 0.473176,
+    fromBase: (e) => e / 0.473176
+  },
+  {
+    name: "Cup",
+    symbol: "cup",
+    category: "Volume",
+    toBase: (e) => e * 0.236588,
+    fromBase: (e) => e / 0.236588
+  },
+  // Speed
+  { name: "Meters/second", symbol: "m/s", category: "Speed", toBase: (e) => e, fromBase: (e) => e },
+  {
+    name: "Kilometers/hour",
+    symbol: "km/h",
+    category: "Speed",
+    toBase: (e) => e / 3.6,
+    fromBase: (e) => e * 3.6
+  },
+  {
+    name: "Miles/hour",
+    symbol: "mph",
+    category: "Speed",
+    toBase: (e) => e * 0.44704,
+    fromBase: (e) => e / 0.44704
+  },
+  {
+    name: "Knots",
+    symbol: "kn",
+    category: "Speed",
+    toBase: (e) => e * 0.514444,
+    fromBase: (e) => e / 0.514444
+  },
+  // Data
+  { name: "Byte", symbol: "B", category: "Data", toBase: (e) => e, fromBase: (e) => e },
+  {
+    name: "Kilobyte",
+    symbol: "KB",
+    category: "Data",
+    toBase: (e) => e * 1024,
+    fromBase: (e) => e / 1024
+  },
+  {
+    name: "Megabyte",
+    symbol: "MB",
+    category: "Data",
+    toBase: (e) => e * 1048576,
+    fromBase: (e) => e / 1048576
+  },
+  {
+    name: "Gigabyte",
+    symbol: "GB",
+    category: "Data",
+    toBase: (e) => e * 1073741824,
+    fromBase: (e) => e / 1073741824
+  },
+  {
+    name: "Terabyte",
+    symbol: "TB",
+    category: "Data",
+    toBase: (e) => e * 1099511627776,
+    fromBase: (e) => e / 1099511627776
+  },
+  { name: "Bit", symbol: "bit", category: "Data", toBase: (e) => e / 8, fromBase: (e) => e * 8 }
+], MatrixOps = {
+  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 };
+  },
+  identity(e) {
+    const t = this.create(e, e);
+    for (let r = 0; r < e; r++)
+      t.data[r][r] = 1;
+    return t;
+  },
+  add(e, t) {
+    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];
+    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];
+    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++) {
+        let n = 0;
+        for (let s = 0; s < e.cols; s++)
+          n += e.data[a][s] * t.data[s][o];
+        r.data[a][o] = n;
+      }
+    return r;
+  },
+  scalar(e, t) {
+    const r = this.create(e.rows, e.cols);
+    for (let a = 0; a < e.rows; a++)
+      for (let o = 0; o < e.cols; o++)
+        r.data[a][o] = e.data[a][o] * 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];
+    return t;
+  },
+  determinant(e) {
+    if (e.rows !== e.cols)
+      throw new Error("Determinant requires square matrix");
+    if (e.rows === 1)
+      return e.data[0][0];
+    if (e.rows === 2)
+      return e.data[0][0] * e.data[1][1] - e.data[0][1] * e.data[1][0];
+    let t = 0;
+    for (let r = 0; r < e.cols; r++)
+      t += Math.pow(-1, r) * e.data[0][r] * this.determinant(this.minor(e, 0, r));
+    return t;
+  },
+  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)
+        continue;
+      let s = 0;
+      for (let c = 0; c < e.cols; c++)
+        c !== r && (a.data[o][s] = e.data[n][c], s++);
+      o++;
+    }
+    return a;
+  },
+  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++)
+      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;
+      }
+    return this.scalar(a, 1 / t);
+  },
+  trace(e) {
+    if (e.rows !== e.cols)
+      throw new Error("Trace requires square matrix");
+    let t = 0;
+    for (let r = 0; r < e.rows; r++)
+      t += e.data[r][r];
+    return t;
+  },
+  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;
+    if (c < 0)
+      throw new Error("Complex eigenvalues not supported");
+    const l = Math.sqrt(c);
+    return [(n + l) / 2, (n - l) / 2];
+  },
+  toString(e, t = 4) {
+    return e.data.map((r) => "[ " + r.map((a) => a.toFixed(t).padStart(10)).join(" ") + " ]").join(`
+`);
+  }
+}, CalculusOps = {
+  /** Numerical derivative at a point */
+  derivative(e, t, r = 1e-7) {
+    return (e(t + r) - e(t - r)) / (2 * r);
+  },
+  /** Second derivative at a point */
+  secondDerivative(e, t, r = 1e-5) {
+    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;
+    let n = 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);
+    }
+    return o / 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 s = e(o);
+      if (Math.abs(s) < r)
+        return o;
+      const c = this.derivative(e, o);
+      if (c === 0)
+        throw new Error("Derivative is zero, Newton-Raphson failed");
+      o = o - s / c;
+    }
+    throw new Error("Newton-Raphson did not converge");
+  },
+  /** Symbolic differentiation (simple cases) */
+  symbolicDerivative(e) {
+    if (e = e.trim(), /^-?\d+\.?\d*$/.test(e))
+      return "0";
+    if (e === "x")
+      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 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}`;
+    }
+    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})`;
+  },
+  /** Symbolic integration (simple cases) */
+  symbolicIntegral(e) {
+    if (e = e.trim(), /^-?\d+\.?\d*$/.test(e))
+      return `${e}*x + C`;
+    if (e === "x")
+      return "x^2/2 + C";
+    const t = e.match(/^x\^(\d+)$/);
+    if (t) {
+      const r = parseInt(t[1], 10);
+      return `x^${r + 1}/${r + 1} + C`;
+    }
+    return e === "sin(x)" ? "-cos(x) + C" : e === "cos(x)" ? "sin(x) + C" : e === "e^x" || e === "exp(x)" ? "e^x + C" : e === "1/x" ? "ln|x| + C" : `∫(${e})dx + C`;
+  },
+  /** Solve quadratic equation ax² + bx + c = 0 */
+  solveQuadratic(e, t, r) {
+    const a = t * t - 4 * e * r;
+    if (a < 0)
+      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)];
+  }
+};
+class CalculatorService {
+  constructor(e = {}) {
+    M(this, "history", []);
+    M(this, "memory", 0);
+    M(this, "variables", /* @__PURE__ */ new Map());
+    M(this, "config");
+    this.config = {
+      precision: e.precision ?? 12,
+      angleUnit: e.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));
+    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}`);
+    }
+  }
+  /** Add to history */
+  addHistory(e, t, r) {
+    this.history.unshift({
+      id: Date.now().toString(36),
+      expression: e,
+      result: t,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      mode: r
+    }), this.history.length > 100 && this.history.pop();
+  }
+  /** Get history */
+  getHistory() {
+    return this.history;
+  }
+  /** Clear history */
+  clearHistory() {
+    this.history = [];
+  }
+  /** Memory operations */
+  memoryStore(e) {
+    this.memory = e;
+  }
+  memoryRecall() {
+    return this.memory;
+  }
+  memoryAdd(e) {
+    this.memory += e;
+  }
+  memoryClear() {
+    this.memory = 0;
+  }
+  /** Variable operations */
+  setVariable(e, t) {
+    this.variables.set(e, t);
+  }
+  getVariable(e) {
+    return this.variables.get(e);
+  }
+  /** 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))
+      throw new Error("Invalid number for base conversion");
+    return o.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)
+      throw new Error("Unknown unit");
+    if (a.category !== o.category)
+      throw new Error("Cannot convert between different unit categories");
+    const n = a.toBase(e);
+    return o.fromBase(n);
+  }
+  /** Get units by category */
+  getUnitsByCategory(e) {
+    return UNITS.filter((t) => t.category === e);
+  }
+  /** Get all unit categories */
+  getUnitCategories() {
+    return [...new Set(UNITS.map((e) => e.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();
+  }
+}
+function createCalculatorService(e) {
+  return new CalculatorService(e);
+}
+const CalculatorContext = createContext(null);
+function useCalculator() {
+  const e = useContext(CalculatorContext);
+  if (!e)
+    throw new Error("useCalculator must be used within CalculatorProvider");
+  return e;
+}
+const styles$1 = {
+  container: {
+    width: "400px",
+    fontFamily: "'Inter', sans-serif",
+    backgroundColor: "#1e1e1e",
+    borderRadius: "12px",
+    overflow: "hidden",
+    boxShadow: "0 4px 20px rgba(0,0,0,0.3)"
+  },
+  modeSelector: {
+    display: "flex",
+    backgroundColor: "#2d2d2d"
+  },
+  modeButton: {
+    flex: 1,
+    padding: "8px",
+    border: "none",
+    backgroundColor: "transparent",
+    color: "#888",
+    fontSize: "11px",
+    cursor: "pointer"
+  },
+  display: {
+    padding: "20px",
+    backgroundColor: "#252525",
+    minHeight: "80px"
+  },
+  displayText: {
+    color: "#fff",
+    fontSize: "32px",
+    fontFamily: "'JetBrains Mono', monospace",
+    textAlign: "right",
+    wordBreak: "break-all"
+  },
+  keypad: {
+    display: "grid",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    gap: "1px",
+    backgroundColor: "#333",
+    padding: "1px"
+  },
+  key: {
+    padding: "20px",
+    border: "none",
+    backgroundColor: "#3c3c3c",
+    color: "#fff",
+    fontSize: "18px",
+    cursor: "pointer",
+    transition: "background-color 0.1s"
+  },
+  keyOperator: {
+    backgroundColor: "#ff9f0a",
+    color: "#000"
+  },
+  keyFunction: {
+    backgroundColor: "#505050"
+  }
+};
+function NiceCalculator({
+  service: e,
+  className: t,
+  style: r
+}) {
+  const [a, o] = useState("0"), [n, 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]
+  ), h = useCallback(() => {
+    o("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);
+    } catch {
+      o("Error"), d(!0);
+    }
+  }, [a, n, e]), y = {
+    service: e,
+    display: a,
+    setDisplay: o,
+    mode: n,
+    setMode: s,
+    history: c,
+    calculate: b,
+    appendDigit: u,
+    clear: h
+  };
+  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, {})
+  ] }) });
+}
+function ModeSelector() {
+  const { mode: e, setMode: t } = useCalculator(), r = [
+    { id: "standard", label: "Standard" },
+    { id: "scientific", label: "Scientific" },
+    { id: "programmer", label: "Programmer" },
+    { id: "matrix", label: "Matrix" },
+    { id: "calculus", label: "Calculus" },
+    { id: "units", label: "Units" }
+  ];
+  return /* @__PURE__ */ jsx("div", { style: styles$1.modeSelector, children: r.map((a) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => t(a.id),
+      style: {
+        ...styles$1.modeButton,
+        backgroundColor: e === a.id ? "#1976d2" : "transparent",
+        color: e === a.id ? "#fff" : "#888"
+      },
+      children: a.label
+    },
+    a.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 StandardKeypad() {
+  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: o } = useCalculator(), n = [
+    { label: "AC", action: t, style: styles$1.keyFunction },
+    {
+      label: "±",
+      action: () => a(o.startsWith("-") ? o.slice(1) : "-" + o),
+      style: styles$1.keyFunction
+    },
+    { label: "%", action: () => e("/100"), style: styles$1.keyFunction },
+    { label: "÷", action: () => e("/"), style: styles$1.keyOperator },
+    { label: "7", action: () => e("7") },
+    { label: "8", action: () => e("8") },
+    { label: "9", action: () => e("9") },
+    { label: "×", action: () => e("*"), style: styles$1.keyOperator },
+    { label: "4", action: () => e("4") },
+    { label: "5", action: () => e("5") },
+    { label: "6", action: () => e("6") },
+    { label: "−", action: () => e("-"), style: styles$1.keyOperator },
+    { label: "1", action: () => e("1") },
+    { label: "2", action: () => e("2") },
+    { label: "3", action: () => e("3") },
+    { 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: 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)) });
+}
+function ScientificKeypad() {
+  const { appendDigit: e, clear: t, calculate: r, setDisplay: a, display: o } = useCalculator(), n = [
+    { label: "sin", action: () => e("sin(") },
+    { label: "cos", action: () => e("cos(") },
+    { label: "tan", action: () => e("tan(") },
+    { label: "ln", action: () => e("ln(") },
+    { label: "log", action: () => e("log10(") }
+  ], s = [
+    { label: "x²", action: () => e("^2") },
+    { label: "x³", action: () => e("^3") },
+    { label: "xʸ", action: () => e("^") },
+    { label: "√", action: () => e("sqrt(") },
+    { label: "eˣ", action: () => e("exp(") }
+  ], 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, ...s, ...c].map((l, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: l.action,
+        style: { ...styles$1.key, ...styles$1.keyFunction, padding: "12px" },
+        children: l.label
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx(StandardKeypad, {})
+  ] });
+}
+function ProgrammerKeypad() {
+  const { display: e, setDisplay: t, service: r } = useCalculator(), [a, o] = useState("DEC"), n = (c) => {
+    try {
+      const l = r.convertBase(e, a, c);
+      t(l), o(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(
+      "button",
+      {
+        onClick: () => n(c),
+        style: {
+          flex: 1,
+          padding: "8px",
+          border: "none",
+          borderRadius: "4px",
+          backgroundColor: a === c ? "#1976d2" : "#3c3c3c",
+          color: "#fff",
+          cursor: "pointer"
+        },
+        children: c
+      },
+      c
+    )) }),
+    s.length > 0 && /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(6, 1fr)" }, children: s.map((c) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => t(e === "0" ? c : e + c),
+        style: styles$1.key,
+        children: c
+      },
+      c
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: { ...styles$1.keypad, gridTemplateColumns: "repeat(4, 1fr)" }, children: [
+      "7",
+      "8",
+      "9",
+      "AND",
+      "4",
+      "5",
+      "6",
+      "OR",
+      "1",
+      "2",
+      "3",
+      "XOR",
+      "0",
+      "NOT",
+      "<<",
+      ">>"
+    ].map((c) => {
+      const l = ["AND", "OR", "XOR", "NOT", "<<", ">>"].includes(c);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => t(e === "0" ? c : e + c),
+          style: { ...styles$1.key, ...l ? styles$1.keyFunction : {} },
+          children: c
+        },
+        c
+      );
+    }) })
+  ] });
+}
+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 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: [
+    /* @__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(
+          MatrixInput,
+          {
+            matrix: e,
+            onChange: (l, i, d) => s(e, t, l, i, d)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: { color: "#888", marginBottom: "4px" }, children: "Matrix B" }),
+        /* @__PURE__ */ jsx(
+          MatrixInput,
+          {
+            matrix: r,
+            onChange: (l, i, d) => s(r, a, l, i, d)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: [
+      { label: "A + B", fn: () => MatrixOps.toString(MatrixOps.add(e, r)) },
+      { label: "A - B", fn: () => MatrixOps.toString(MatrixOps.subtract(e, r)) },
+      { label: "A × B", fn: () => MatrixOps.toString(MatrixOps.multiply(e, r)) },
+      { label: "det(A)", fn: () => MatrixOps.determinant(e).toFixed(4) },
+      { label: "Aᵀ", fn: () => MatrixOps.toString(MatrixOps.transpose(e)) },
+      { label: "A⁻¹", fn: () => MatrixOps.toString(MatrixOps.inverse(e)) }
+    ].map((l) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => {
+          try {
+            n(l.fn());
+          } catch (i) {
+            n(i.message);
+          }
+        },
+        style: {
+          padding: "8px 12px",
+          backgroundColor: "#1976d2",
+          color: "#fff",
+          border: "none",
+          borderRadius: "4px",
+          cursor: "pointer"
+        },
+        children: l.label
+      },
+      l.label
+    )) }),
+    o && /* @__PURE__ */ jsx("pre", { style: { color: "#fff", fontFamily: "monospace", whiteSpace: "pre-wrap" }, children: o })
+  ] });
+}
+function MatrixInput({
+  matrix: e,
+  onChange: t
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { display: "grid", gridTemplateColumns: `repeat(${e.cols}, 50px)`, gap: "4px" },
+      children: e.data.map(
+        (r, a) => r.map((o, n) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            value: o,
+            onChange: (s) => t(a, n, s.target.value),
+            style: {
+              width: "100%",
+              padding: "4px",
+              textAlign: "center",
+              backgroundColor: "#3c3c3c",
+              color: "#fff",
+              border: "1px solid #555",
+              borderRadius: "4px"
+            }
+          },
+          `${a}-${n}`
+        ))
+      )
+    }
+  );
+}
+function CalculusMode() {
+  const [e, t] = useState("x^2"), [r, a] = useState("");
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "#252525" }, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: e,
+        onChange: (o) => t(o.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",
+          borderRadius: "4px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => a(`d/dx(${e}) = ${CalculusOps.symbolicDerivative(e)}`),
+          style: {
+            padding: "8px 12px",
+            backgroundColor: "#4caf50",
+            color: "#fff",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer"
+          },
+          children: "Differentiate"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => a(`∫(${e})dx = ${CalculusOps.symbolicIntegral(e)}`),
+          style: {
+            padding: "8px 12px",
+            backgroundColor: "#2196f3",
+            color: "#fff",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer"
+          },
+          children: "Integrate"
+        }
+      )
+    ] }),
+    r && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          color: "#fff",
+          fontFamily: "monospace",
+          padding: "8px",
+          backgroundColor: "#1e1e1e",
+          borderRadius: "4px"
+        },
+        children: r
+      }
+    )
+  ] });
+}
+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 = () => {
+    try {
+      const y = e.convertUnits(parseFloat(t), a, n);
+      d(`${t} ${a} = ${e.format(y)} ${n}`);
+    } catch (y) {
+      d(y.message);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", backgroundColor: "#252525" }, children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        value: c,
+        onChange: (y) => {
+          l(y.target.value);
+          const g = e.getUnitsByCategory(y.target.value);
+          g.length >= 2 && (o(g[0].symbol), s(g[1].symbol));
+        },
+        style: {
+          width: "100%",
+          padding: "8px",
+          marginBottom: "12px",
+          backgroundColor: "#3c3c3c",
+          color: "#fff",
+          border: "1px solid #555",
+          borderRadius: "4px"
+        },
+        children: u.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          value: t,
+          onChange: (y) => r(y.target.value),
+          style: {
+            flex: 1,
+            padding: "8px",
+            backgroundColor: "#3c3c3c",
+            color: "#fff",
+            border: "1px solid #555",
+            borderRadius: "4px"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: a,
+          onChange: (y) => o(y.target.value),
+          style: {
+            padding: "8px",
+            backgroundColor: "#3c3c3c",
+            color: "#fff",
+            border: "1px solid #555",
+            borderRadius: "4px"
+          },
+          children: h.map((y) => /* @__PURE__ */ jsxs("option", { value: y.symbol, children: [
+            y.name,
+            " (",
+            y.symbol,
+            ")"
+          ] }, y.symbol))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { color: "#888" }, children: "→" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: n,
+          onChange: (y) => s(y.target.value),
+          style: {
+            flex: 1,
+            padding: "8px",
+            backgroundColor: "#3c3c3c",
+            color: "#fff",
+            border: "1px solid #555",
+            borderRadius: "4px"
+          },
+          children: h.map((y) => /* @__PURE__ */ jsxs("option", { value: y.symbol, children: [
+            y.name,
+            " (",
+            y.symbol,
+            ")"
+          ] }, y.symbol))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: b,
+        style: {
+          width: "100%",
+          padding: "12px",
+          backgroundColor: "#ff9f0a",
+          color: "#000",
+          border: "none",
+          borderRadius: "4px",
+          fontSize: "16px",
+          cursor: "pointer"
+        },
+        children: "Convert"
+      }
+    ),
+    i && /* @__PURE__ */ jsx("div", { style: { marginTop: "12px", color: "#fff", fontSize: "18px", textAlign: "center" }, children: i })
+  ] });
+}
+const GeoMath = {
+  /** Distance between two points */
+  distance(e, t) {
+    return Math.sqrt((t.x - e.x) ** 2 + (t.y - e.y) ** 2);
+  },
+  /** Midpoint of two points */
+  midpoint(e, t) {
+    return { x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 };
+  },
+  /** 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;
+  },
+  /** Angle in degrees */
+  angleDegrees(e, t, r) {
+    return this.angle(e, t, r) * 180 / Math.PI;
+  },
+  /** 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 };
+  },
+  /** 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)
+      return null;
+    const n = ((e.x - r.x) * (r.y - a.y) - (e.y - r.y) * (r.x - a.x)) / o;
+    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, 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;
+    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;
+  },
+  /** 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)
+      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;
+    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 }
+    ];
+  },
+  /** Perpendicular line through point */
+  perpendicularThrough(e, t, r) {
+    this.closestPointOnLine(e, t, r);
+    const a = t.x - e.x, o = t.y - e.y;
+    return {
+      p1: r,
+      p2: { x: r.x - o, y: r.y + a }
+    };
+  },
+  /** Parallel line through point */
+  parallelThrough(e, t, r) {
+    const a = t.x - e.x, o = t.y - e.y;
+    return {
+      p1: r,
+      p2: { x: r.x + a, y: r.y + o }
+    };
+  },
+  /** Angle bisector */
+  angleBisector(e, t, r) {
+    const a = Math.atan2(e.y - t.y, e.x - t.x), o = Math.atan2(r.y - t.y, r.x - t.x);
+    let n = (a + o) / 2;
+    return Math.abs(o - a) > Math.PI && (n += Math.PI), {
+      x: t.x + Math.cos(n),
+      y: t.y + Math.sin(n)
+    };
+  },
+  /** Reflect point over line */
+  reflect(e, t, r) {
+    const a = this.closestPointOnLine(t, r, e);
+    return {
+      x: 2 * a.x - e.x,
+      y: 2 * a.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, s = e.y - t.y;
+    return {
+      x: t.x + n * a - s * o,
+      y: t.y + n * o + s * a
+    };
+  },
+  /** Translate point */
+  translate(e, t, r) {
+    return { x: e.x + t, y: e.y + r };
+  },
+  /** Dilate point from center */
+  dilate(e, t, r) {
+    return {
+      x: t.x + r * (e.x - t.x),
+      y: t.y + r * (e.y - t.y)
+    };
+  },
+  /** Polygon area (shoelace formula) */
+  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;
+    }
+    return Math.abs(t) / 2;
+  },
+  /** Polygon perimeter */
+  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]);
+    }
+    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 };
+  },
+  /** 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;
+    return {
+      x: (o * e.x + n * t.x + a * r.x) / s,
+      y: (o * e.y + n * t.y + a * r.y) / s
+    };
+  },
+  /** Triangle centroid */
+  centroid(e, t, r) {
+    return {
+      x: (e.x + t.x + r.x) / 3,
+      y: (e.y + t.y + r.y) / 3
+    };
+  }
+};
+class GeometryService {
+  constructor() {
+    M(this, "elements", /* @__PURE__ */ new Map());
+    M(this, "nextLabel", 1);
+  }
+  /** Add element */
+  addElement(t) {
+    const r = this.generateId(), a = { ...t, id: r };
+    return this.elements.set(r, a), a;
+  }
+  /** Get element */
+  getElement(t) {
+    return this.elements.get(t);
+  }
+  /** Get point */
+  getPoint(t) {
+    const r = this.elements.get(t);
+    return (r == null ? void 0 : r.type) === "point" ? r : void 0;
+  }
+  /** Update element */
+  updateElement(t, r) {
+    const a = this.elements.get(t);
+    a && this.elements.set(t, { ...a, ...r, id: t, type: a.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);
+  }
+  /** Get all elements */
+  getAllElements() {
+    return Array.from(this.elements.values());
+  }
+  /** Get elements by type */
+  getElementsByType(t) {
+    return Array.from(this.elements.values()).filter((r) => r.type === t);
+  }
+  /** Clear all */
+  clear() {
+    this.elements.clear(), this.nextLabel = 1;
+  }
+  /** Create point */
+  createPoint(t, r, a) {
+    return this.addElement({
+      type: "point",
+      x: t,
+      y: r,
+      label: a ?? this.getNextLabel(),
+      color: { r: 0, g: 0, b: 0 },
+      visible: !0,
+      selected: !1,
+      locked: !1,
+      size: 6
+    });
+  }
+  /** Create segment */
+  createSegment(t, r) {
+    return this.addElement({
+      type: "segment",
+      point1Id: t,
+      point2Id: r,
+      label: void 0,
+      color: { r: 50, g: 50, b: 50 },
+      visible: !0,
+      selected: !1,
+      locked: !1,
+      width: 2,
+      dependencies: [t, r]
+    });
+  }
+  /** Create line */
+  createLine(t, r) {
+    return this.addElement({
+      type: "line",
+      point1Id: t,
+      point2Id: r,
+      label: void 0,
+      color: { r: 50, g: 50, b: 200 },
+      visible: !0,
+      selected: !1,
+      locked: !1,
+      width: 1,
+      dependencies: [t, r]
+    });
+  }
+  /** Create ray */
+  createRay(t, r) {
+    return this.addElement({
+      type: "ray",
+      originId: t,
+      throughId: r,
+      label: void 0,
+      color: { r: 50, g: 150, b: 50 },
+      visible: !0,
+      selected: !1,
+      locked: !1,
+      width: 1,
+      dependencies: [t, r]
+    });
+  }
+  /** Create circle */
+  createCircle(t, r) {
+    return this.addElement({
+      type: "circle",
+      centerId: t,
+      radius: r,
+      label: void 0,
+      color: { r: 200, g: 50, b: 50 },
+      visible: !0,
+      selected: !1,
+      locked: !1,
+      width: 2,
+      dependencies: [t]
+    });
+  }
+  /** Create polygon */
+  createPolygon(t) {
+    return this.addElement({
+      type: "polygon",
+      pointIds: t,
+      label: void 0,
+      color: { r: 100, g: 100, b: 200 },
+      visible: !0,
+      selected: !1,
+      locked: !1,
+      width: 2,
+      fill: { r: 100, g: 100, b: 200, a: 0.2 },
+      dependencies: t
+    });
+  }
+  /** Create midpoint */
+  createMidpoint(t, r) {
+    const a = this.getPoint(t), o = this.getPoint(r);
+    if (!a || !o)
+      return null;
+    const n = GeoMath.midpoint(a, o), s = this.createPoint(n.x, n.y);
+    return s.dependencies = [t, r], s.color = { r: 0, g: 150, b: 0 }, s;
+  }
+  /** Create perpendicular */
+  createPerpendicular(t, r, a) {
+    const o = this.getPoint(t), n = this.getPoint(r), s = this.getPoint(a);
+    if (!o || !n || !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);
+    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)
+      return null;
+    const c = GeoMath.parallelThrough(o, n, 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)
+      return [];
+    const n = [], s = (i) => {
+      if (i.type === "line" || i.type === "segment" || i.type === "ray") {
+        const d = i, u = this.getPoint(d.point1Id ?? d.originId), h = this.getPoint(d.point2Id ?? d.throughId);
+        if (u && h)
+          return [u, h];
+      }
+      return null;
+    }, c = s(a), l = s(o);
+    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);
+      }
+    }
+    if (a.type === "circle" && l) {
+      const i = a, d = this.getPoint(i.centerId);
+      if (d) {
+        const u = GeoMath.circleLineIntersection(d, i.radius, l[0], l[1]);
+        for (const h of u) {
+          const b = this.createPoint(h.x, h.y);
+          b.dependencies = [t, r], b.color = { r: 255, g: 0, b: 0 }, n.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 (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);
+        }
+      }
+    }
+    return n;
+  }
+  /** 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);
+        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);
+        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);
+        }
+        break;
+      }
+    }
+    return 0;
+  }
+  /** Export to SVG */
+  exportSVG(t, r, a) {
+    const o = [
+      `<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})"/>`
+    );
+    const n = (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">');
+      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}"/>`);
+      }
+      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}"/>`);
+      }
+      o.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>");
+    }
+    for (const s of this.getAllElements()) {
+      if (!s.visible)
+        continue;
+      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>`);
+          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(
+              `<line x1="${d.x}" y1="${d.y}" x2="${u.x}" y2="${u.y}" stroke="${c}" stroke-width="${s.width}"/>`
+            );
+          }
+          break;
+        }
+        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(
+              `<circle cx="${i.x}" cy="${i.y}" r="${d}" fill="${u}" stroke="${c}" stroke-width="${s.width}"/>`
+            );
+          }
+          break;
+        }
+        case "polygon": {
+          const l = s.pointIds.map((i) => this.getPoint(i)).filter(Boolean);
+          if (l.length > 0) {
+            const d = l.map((h) => 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(
+              `<path d="${d}" fill="${u}" stroke="${c}" stroke-width="${s.width}"/>`
+            );
+          }
+          break;
+        }
+      }
+    }
+    return o.push("</svg>"), o.join(`
+`);
+  }
+  generateId() {
+    return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
+  }
+  getNextLabel() {
+    const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", r = this.nextLabel - 1;
+    return this.nextLabel++, r < 26 ? t[r] : t[r % 26] + Math.floor(r / 26);
+  }
+}
+function createGeometryService() {
+  return new GeometryService();
+}
+const GeometryContext = createContext(null);
+function useGeometry() {
+  const e = useContext(GeometryContext);
+  if (!e)
+    throw new Error("useGeometry must be used within GeometryProvider");
+  return e;
+}
+const styles = {
+  container: {
+    display: "flex",
+    height: "100%",
+    fontFamily: "'Inter', sans-serif",
+    fontSize: "14px"
+  },
+  toolbar: {
+    width: "50px",
+    backgroundColor: "#f5f5f5",
+    borderRight: "1px solid #e0e0e0",
+    display: "flex",
+    flexDirection: "column",
+    padding: "8px 4px",
+    gap: "4px"
+  },
+  toolButton: {
+    width: "40px",
+    height: "40px",
+    border: "none",
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "18px"
+  },
+  main: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  },
+  canvas: {
+    flex: 1,
+    cursor: "crosshair"
+  },
+  statusBar: {
+    height: "30px",
+    backgroundColor: "#f5f5f5",
+    borderTop: "1px solid #e0e0e0",
+    padding: "0 12px",
+    display: "flex",
+    alignItems: "center",
+    fontSize: "12px",
+    color: "#666"
+  }
+};
+function NiceGeometry({
+  service: e,
+  width: t = 800,
+  height: r = 600,
+  className: a,
+  style: o
+}) {
+  const [n, s] = useState([]), [c, l] = useState("point"), [i, d] = useState([]), [u, h] = useState({
+    centerX: 0,
+    centerY: 0,
+    scale: 40,
+    showGrid: !0,
+    showAxes: !0,
+    gridSpacing: 1,
+    snapToGrid: !0,
+    snapToPoints: !0,
+    backgroundColor: { r: 255, g: 255, b: 255 }
+  }), b = useCallback(() => {
+    s(e.getAllElements());
+  }, [e]), y = useCallback((m) => {
+    h((p) => ({ ...p, ...m }));
+  }, []);
+  useEffect(() => {
+    b();
+  }, [b]);
+  const g = {
+    service: e,
+    elements: n,
+    tool: c,
+    setTool: l,
+    view: u,
+    setView: y,
+    selectedIds: i,
+    setSelectedIds: d,
+    refresh: b
+  };
+  return /* @__PURE__ */ jsx(GeometryContext.Provider, { value: g, 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 })
+    ] })
+  ] }) });
+}
+function Toolbar() {
+  const { tool: e, setTool: t } = useGeometry(), r = [
+    { id: "select", icon: "⬚", title: "Select" },
+    { id: "point", icon: "•", title: "Point" },
+    { id: "segment", icon: "—", title: "Segment" },
+    { id: "line", icon: "↔", title: "Line" },
+    { id: "ray", icon: "→", title: "Ray" },
+    { id: "circle", icon: "○", title: "Circle" },
+    { id: "polygon", icon: "△", title: "Polygon" },
+    { id: "perpendicular", icon: "⊥", title: "Perpendicular" },
+    { id: "parallel", icon: "∥", title: "Parallel" },
+    { id: "midpoint", icon: "⊙", title: "Midpoint" },
+    { id: "bisector", icon: "∠", title: "Angle Bisector" },
+    { id: "intersection", icon: "✕", title: "Intersection" },
+    { id: "reflect", icon: "⇄", title: "Reflect" },
+    { id: "rotate", icon: "↻", title: "Rotate" },
+    { id: "measure", icon: "📏", title: "Measure" }
+  ];
+  return /* @__PURE__ */ jsx("div", { style: styles.toolbar, children: r.map((a) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => t(a.id),
+      title: a.title,
+      style: {
+        ...styles.toolButton,
+        backgroundColor: e === a.id ? "#1976d2" : "transparent",
+        color: e === a.id ? "#fff" : "#333"
+      },
+      children: a.icon
+    },
+    a.id
+  )) });
+}
+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(
+    (m, p) => {
+      const x = (m - e / 2) / s.scale + s.centerX, w = -(p - t / 2) / s.scale + s.centerY;
+      return s.snapToGrid ? {
+        x: Math.round(x / s.gridSpacing) * s.gridSpacing,
+        y: Math.round(w / s.gridSpacing) * s.gridSpacing
+      } : { x, y: w };
+    },
+    [e, t, s]
+  ), b = useCallback(
+    (m, p) => ({
+      x: e / 2 + (m - s.centerX) * s.scale,
+      y: t / 2 - (p - s.centerY) * s.scale
+    }),
+    [e, t, s]
+  ), y = useCallback(
+    (m) => {
+      var w;
+      const p = (w = r.current) == null ? void 0 : w.getBoundingClientRect();
+      if (!p)
+        return;
+      const x = h(m.clientX - p.left, m.clientY - p.top);
+      switch (n) {
+        case "point": {
+          a.createPoint(x.x, x.y), i();
+          break;
+        }
+        case "segment":
+        case "line":
+        case "ray": {
+          const k = g(x);
+          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;
+            });
+          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;
+            }), i();
+          }
+          break;
+        }
+        case "circle": {
+          const k = g(x);
+          if (k)
+            u((f) => {
+              if (f.length === 0)
+                return [k.id];
+              const v = a.getPoint(f[0]);
+              if (v) {
+                const C = GeoMath.distance(v, x);
+                a.createCircle(f[0], C), i();
+              }
+              return [];
+            });
+          else if (d.length === 1) {
+            const f = a.getPoint(d[0]);
+            if (f) {
+              const v = GeoMath.distance(f, x);
+              a.createCircle(d[0], v), i(), u([]);
+            }
+          } else {
+            const f = a.createPoint(x.x, x.y);
+            u([f.id]), i();
+          }
+          break;
+        }
+        case "midpoint": {
+          const k = g(x);
+          k && u((f) => {
+            const v = [...f, k.id];
+            return v.length === 2 ? (a.createMidpoint(v[0], v[1]), i(), []) : v;
+          });
+          break;
+        }
+        case "select": {
+          const k = g(x);
+          l(k ? [k.id] : []);
+          break;
+        }
+      }
+    },
+    [n, a, i, h, d, l]
+  ), g = (m) => {
+    for (const x of o)
+      if (x.type === "point" && GeoMath.distance(x, m) < 0.5)
+        return x;
+  };
+  return useEffect(() => {
+    const m = r.current, p = m == null ? void 0 : m.getContext("2d");
+    if (!(!m || !p)) {
+      if (p.fillStyle = `rgb(${s.backgroundColor.r},${s.backgroundColor.g},${s.backgroundColor.b})`, p.fillRect(0, 0, e, t), s.showGrid) {
+        p.strokeStyle = "#e0e0e0", p.lineWidth = 0.5;
+        const x = s.gridSpacing * s.scale, w = (e / 2 - s.centerX * s.scale) % x, k = (t / 2 + s.centerY * s.scale) % x;
+        for (let f = w; f < e; f += x)
+          p.beginPath(), p.moveTo(f, 0), p.lineTo(f, t), p.stroke();
+        for (let f = k; f < t; f += x)
+          p.beginPath(), p.moveTo(0, f), p.lineTo(e, f), p.stroke();
+      }
+      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();
+      }
+      for (const x of o) {
+        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));
+            break;
+          }
+          case "segment": {
+            const f = a.getPoint(x.point1Id), v = a.getPoint(x.point2Id);
+            if (f && v) {
+              const C = b(f.x, f.y), S = b(v.x, v.y);
+              p.strokeStyle = w, p.lineWidth = x.width, p.beginPath(), p.moveTo(C.x, C.y), p.lineTo(S.x, S.y), p.stroke();
+            }
+            break;
+          }
+          case "line": {
+            const f = a.getPoint(x.point1Id), v = a.getPoint(x.point2Id);
+            if (f && v) {
+              const C = v.x - f.x, S = v.y - f.y, $ = -1e3, j = 1e3, P = b(f.x + $ * C, f.y + $ * S), B = b(f.x + j * C, f.y + j * S);
+              p.strokeStyle = w, p.lineWidth = x.width, p.beginPath(), p.moveTo(P.x, P.y), p.lineTo(B.x, B.y), p.stroke();
+            }
+            break;
+          }
+          case "circle": {
+            const f = a.getPoint(x.centerId);
+            if (f) {
+              const v = b(f.x, f.y), C = x.radius * s.scale;
+              p.beginPath(), p.arc(v.x, v.y, C, 0, 2 * Math.PI), x.fill && (p.fillStyle = `rgba(${x.fill.r},${x.fill.g},${x.fill.b},${x.fill.a ?? 0.2})`, p.fill()), p.strokeStyle = w, p.lineWidth = x.width, p.stroke();
+            }
+            break;
+          }
+          case "polygon": {
+            const f = x.pointIds.map((v) => a.getPoint(v)).filter(Boolean);
+            if (f.length > 0) {
+              p.beginPath();
+              const v = b(f[0].x, f[0].y);
+              p.moveTo(v.x, v.y);
+              for (let C = 1; C < f.length; C++) {
+                const S = b(f[C].x, f[C].y);
+                p.lineTo(S.x, S.y);
+              }
+              p.closePath(), x.fill && (p.fillStyle = `rgba(${x.fill.r},${x.fill.g},${x.fill.b},${x.fill.a ?? 0.2})`, p.fill()), p.strokeStyle = w, p.lineWidth = x.width, p.stroke();
+            }
+            break;
+          }
+        }
+      }
+      if (d.length > 0) {
+        p.fillStyle = "rgba(25, 118, 210, 0.3)";
+        for (const x of d) {
+          const w = a.getPoint(x);
+          if (w) {
+            const k = b(w.x, w.y);
+            p.beginPath(), p.arc(k.x, k.y, 12, 0, 2 * Math.PI), p.fill();
+          }
+        }
+      }
+    }
+  }, [o, s, e, t, c, d, a, b]), /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: r,
+      width: e,
+      height: t,
+      style: styles.canvas,
+      onClick: y
+    }
+  );
+}
+function StatusBar({ width: e, height: t }) {
+  const { tool: r, elements: a, view: o, service: n } = useGeometry(), [s, c] = useState(null), l = {
+    select: "Select",
+    point: "Point",
+    line: "Line",
+    ray: "Ray",
+    segment: "Segment",
+    circle: "Circle",
+    arc: "Arc",
+    polygon: "Polygon",
+    angle: "Angle",
+    perpendicular: "Perpendicular",
+    parallel: "Parallel",
+    bisector: "Angle Bisector",
+    midpoint: "Midpoint",
+    tangent: "Tangent",
+    intersection: "Intersection",
+    reflect: "Reflect",
+    rotate: "Rotate",
+    translate: "Translate",
+    dilate: "Dilate",
+    measure: "Measure",
+    text: "Text"
+  }, i = a.filter((d) => d.type === "point").length;
+  return /* @__PURE__ */ jsxs("div", { style: styles.statusBar, children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Tool: ",
+      l[r]
+    ] }),
+    /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Objects: ",
+      a.length
+    ] }),
+    /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Points: ",
+      i
+    ] }),
+    /* @__PURE__ */ jsx("span", { style: { margin: "0 16px" }, children: "|" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Scale: ",
+      o.scale.toFixed(1),
+      "x"
+    ] })
+  ] });
+}
+export {
+  CalculatorService,
+  CalculusOps,
+  EQUATION_TEMPLATES,
+  ExpressionParser,
+  FUNCTION_PRESETS,
+  GeoMath,
+  GeometryService,
+  GraphService,
+  MATH_SYMBOLS,
+  MathEditorService,
+  MatrixOps,
+  NiceCalculator,
+  NiceGeometry,
+  NiceGraphPlotter,
+  NiceMathEditor,
+  createCalculatorService,
+  createGeometryService,
+  createGraphService,
+  createMathEditorService,
+  getSymbolsByCategory,
+  recognizeHandwriting,
+  useCalculator,
+  useGeometry,
+  useGraph,
+  useMathEditor
+};