calc.js

/* ============================================================
   Charts — a simple Desmos-style graphing calculator.
   Type expressions on the left; they graph instantly on the right.

   Supported input:
     y = 2x + 3        function of x  (also "f(x) = ..." or just "x^2")
     x = 4             vertical line
     (2, 3)            a point (draggable when both numbers are literal)
     a = 1             a slider variable usable in other expressions
   Functions: sin cos tan asin acos atan sqrt abs ln log exp
              floor ceil round min max   ·   constants: pi (π), e
   ============================================================ */

(function () {
  'use strict';

  var $ = function (id) { return document.getElementById(id); };

  /* ================= THEMES ================= */

  var THEME_MAP = {
    'dark-plus': 'vscode-dark-plus', 'light-plus': 'vscode-light-plus',
    'quiet-light': 'quiet-light', 'solarized-light': 'solarized-light',
    'abyss': 'abyss', 'kimbie-dark': 'kimbie-dark', 'monokai': 'monokai',
    'monokai-dimmed': 'monokai-dimmed', 'red': 'red', 'solarized-dark': 'solarized-dark',
    'tomorrow-night-blue': 'tomorrow-night-blue', 'high-contrast': 'high-contrast',
    'one-dark-pro': 'one-dark-pro', 'dracula-official': 'dracula-official',
    'ayu-light': 'ayu-light', 'ayu-mirage': 'ayu-mirage', 'ayu-dark': 'ayu-dark',
    'material-darker': 'material-darker', 'material-lighter': 'material-lighter',
    'material-palenight': 'material-palenight', 'material-ocean': 'material-ocean',
    'material-deep-ocean': 'material-deep-ocean', 'nord': 'nord',
    'winter-is-coming': 'winter-is-coming', 'snazzy-light': 'snazzy-light',
    'bluloco-light': 'bluloco-light', 'palenight': 'palenight',
    'tokyo-night-dark': 'tokyo-night-dark', 'tokyo-night-light': 'tokyo-night-light',
    'tokyo-night-storm': 'tokyo-night-storm', 'shades-of-purple': 'shades-of-purple',
    'gruvbox-dark': 'gruvbox-dark', 'gruvbox-light': 'gruvbox-light',
    'catppuccin-latte': 'catppuccin-latte', 'catppuccin-frappe': 'catppuccin-frappe',
    'catppuccin-macchiato': 'catppuccin-macchiato', 'catppuccin-mocha': 'catppuccin-mocha',
    'atom-one-dark': 'atom-one-dark', 'atom-one-light': 'atom-one-light',
    'slack': 'slack', 'hackr-io': 'hackr-io', 'linear': 'linear'
  };

  var colors = {};

  function readColors() {
    var cs = getComputedStyle(document.body);
    var v = function (n) { return cs.getPropertyValue(n).trim(); };
    colors = {
      bg: v('--canvas-bg') || '#1e1e1e',
      gridMinor: v('--grid-minor') || 'rgba(255,255,255,0.10)',
      gridMajor: v('--grid-major') || 'rgba(255,255,255,0.25)',
      axis: v('--axis') || '#569cd6',
      muted: v('--muted') || '#9aa3b2',
      text: v('--text') || '#d4d4d4',
      hudBg: v('--hud-bg') || 'rgba(0,0,0,0.7)',
      hudText: v('--hud-text') || '#e6e6e6'
    };
  }

  function applyTheme(key) {
    var cls = 'theme-' + (THEME_MAP[key] || key);
    Array.prototype.slice.call(document.body.classList).forEach(function (c) {
      if (c.indexOf('theme-') === 0) document.body.classList.remove(c);
    });
    document.body.classList.add(cls);
    try { localStorage.setItem('themeKey', key); } catch (e) {}
    readColors();
    requestDraw();
  }

  /* ================= EXPRESSION PARSER ================= */

  var MATHF = {
    sin: Math.sin, cos: Math.cos, tan: Math.tan,
    asin: Math.asin, acos: Math.acos, atan: Math.atan,
    sec: function (v) { return 1 / Math.cos(v); },
    csc: function (v) { return 1 / Math.sin(v); },
    cot: function (v) { return Math.cos(v) / Math.sin(v); },
    sinh: Math.sinh, cosh: Math.cosh, tanh: Math.tanh,
    sqrt: Math.sqrt, abs: Math.abs, ln: Math.log, log: Math.log10,
    exp: Math.exp, floor: Math.floor, ceil: Math.ceil, round: Math.round,
    min: Math.min, max: Math.max
  };
  var FUNC_KEYS = Object.keys(MATHF).sort(function (a, b) { return b.length - a.length; });
  var TOKENS = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ'; // one placeholder char per function
  var TOKEN_OF = {};
  FUNC_KEYS.forEach(function (k, i) { TOKEN_OF[k] = TOKENS[i]; });

  /* ---- proper math notation: x^2 ⇄ x², * ⇄ ·, <= ⇄ ≤ ---- */

  var SUP = { '0': '⁰', '1': '¹', '2': '²', '3': '³', '4': '⁴', '5': '⁵', '6': '⁶', '7': '⁷', '8': '⁸', '9': '⁹', '-': '⁻' };
  var SUB = { '0': '₀', '1': '₁', '2': '₂', '3': '₃', '4': '₄', '5': '₅', '6': '₆', '7': '₇', '8': '₈', '9': '₉' };
  var SUP_REV = {}, SUB_REV = {};
  Object.keys(SUP).forEach(function (k) { SUP_REV[SUP[k]] = k; });
  Object.keys(SUB).forEach(function (k) { SUB_REV[SUB[k]] = k; });

  function toSup(str) {
    return String(str).split('').map(function (c) { return SUP[c] || c; }).join('');
  }
  function toSub(str) {
    return String(str).split('').map(function (c) { return SUB[c] || c; }).join('');
  }
  function replaceLoop(s, re, fn) {
    var guard = 0;
    while (re.test(s) && guard++ < 64) s = s.replace(re, fn);
    return s;
  }

  // Display form: x² exponents, ¹⁄₂ fractions, · for times, ≤ ≥ for <= >=
  function prettifyMath(t) {
    var s = String(t);
    s = s.replace(/\*\*/g, '^');
    s = s.replace(/<=/g, '≤').replace(/>=/g, '≥');
    s = s.replace(/\^\((-?\d+)\)/g, function (_, d) { return toSup(d); });
    s = s.replace(/\^(-?\d+)/g, function (_, d) { return toSup(d); });
    // whole-number fractions become proper vulgar fractions: 1/2 -> ¹⁄₂
    s = s.replace(/(?<![.\d])(\d+)\/(\d+)(?![.\d])/g, function (_, a, b) { return toSup(a) + '⁄' + toSub(b); });
    s = s.replace(/\*/g, '·');
    // digits typed right after a superscript / fraction continue it
    s = replaceLoop(s, /([⁰¹²³⁴⁵⁶⁷⁸⁹⁻])(\d)/, function (_, a, b) { return a + SUP[b]; });
    s = replaceLoop(s, /⁄(\d)/, function (_, b) { return '⁄' + SUB[b]; });
    s = replaceLoop(s, /([₀₁₂₃₄₅₆₇₈₉])(\d)/, function (_, a, b) { return a + SUB[b]; });
    return s;
  }

  /* ---- MathQuill: real typeset math editing (stacked fractions etc.) ---- */

  var MQ = (typeof MathQuill !== 'undefined') ? MathQuill.getInterface(2) : null;
  var MQ_OPNAMES = 'sin cos tan sec csc cot asin acos atan sinh cosh tanh ln log exp floor ceil round min max abs';

  // MathQuill latex -> our plain parseable text
  function latexToPlain(L) {
    var s = String(L);
    s = s.replace(/\\left/g, '').replace(/\\right/g, '');
    s = s.replace(/\\operatorname\{([a-z]+)\}/g, '$1');
    s = s.replace(/\\arcsin/g, 'asin').replace(/\\arccos/g, 'acos').replace(/\\arctan/g, 'atan');
    s = s.replace(/\\(sinh|cosh|tanh|sin|cos|tan|sec|csc|cot|ln|log|exp|min|max)/g, '$1');
    s = s.replace(/\\cdot/g, '*').replace(/\\times/g, '*').replace(/\\div/g, '/');
    s = s.replace(/\\le(?![a-z])/g, '<=').replace(/\\ge(?![a-z])/g, '>=');
    s = s.replace(/\\pi/g, 'π');
    s = s.replace(/\\ /g, '').replace(/\s+/g, '');
    var guard = 0;
    while (/\\frac\{[^{}]*\}\{[^{}]*\}/.test(s) && guard++ < 60) {
      s = s.replace(/\\frac\{([^{}]*)\}\{([^{}]*)\}/, '(($1)/($2))');
    }
    while (/\\sqrt\{[^{}]*\}/.test(s) && guard++ < 90) {
      s = s.replace(/\\sqrt\{([^{}]*)\}/, 'sqrt($1)');
    }
    while (/\^\{[^{}]*\}/.test(s) && guard++ < 120) {
      s = s.replace(/\^\{([^{}]*)\}/, '^($1)');
    }
    s = s.replace(/_\{([^{}]*)\}/g, '_$1');
    s = s.replace(/[{}]/g, '');
    return s;
  }

  // our plain text -> latex for displaying in a MathQuill field
  function plainToLatex(p) {
    var s = unprettifyMath(String(p)).replace(/\s+/g, '');
    s = s.replace(/\((\d+(?:\.\d+)?)\/(\d+(?:\.\d+)?)\)/g, '\\frac{$1}{$2}');
    s = s.replace(/(?<![.\d)])(\d+)\/(\d+)(?![.\d])/g, '\\frac{$1}{$2}');
    s = s.replace(/\^\(([^()]*)\)/g, '^{$1}');
    s = s.replace(/\^(-?\d+(?:\.\d+)?)/g, '^{$1}');
    s = s.replace(/\*/g, '\\cdot ');
    s = s.replace(/<=/g, '\\le ').replace(/>=/g, '\\ge ');
    s = s.replace(/π/g, '\\pi ');
    s = s.replace(/\bsqrt\(([^()]*)\)/g, '\\sqrt{$1}');
    s = s.replace(/\b(asin|acos|atan|floor|ceil|round|abs)\b/g, '\\operatorname{$1}');
    s = s.replace(/\b(sinh|cosh|tanh|sin|cos|tan|sec|csc|cot|ln|log|exp|min|max)\b/g, '\\$1 ');
    return s;
  }

  // Machine form for the parser
  function unprettifyMath(t) {
    var s = String(t);
    s = s.replace(/·/g, '*').replace(/≤/g, '<=').replace(/≥/g, '>=');
    // fractions first: ¹⁄₂ -> (1/2)
    s = s.replace(/([⁰¹²³⁴⁵⁶⁷⁸⁹]+)⁄([₀₁₂₃₄₅₆₇₈₉]+)/g, function (_, a, b) {
      var num = a.split('').map(function (c) { return SUP_REV[c] || ''; }).join('');
      var den = b.split('').map(function (c) { return SUB_REV[c] || ''; }).join('');
      return '(' + num + '/' + den + ')';
    });
    s = s.replace(/⁄/g, '/');
    s = s.replace(/[₀₁₂₃₄₅₆₇₈₉]+/g, function (run) {
      return run.split('').map(function (c) { return SUB_REV[c] || ''; }).join('');
    });
    s = s.replace(/[⁰¹²³⁴⁵⁶⁷⁸⁹⁻]+/g, function (run) {
      var norm = run.split('').map(function (c) { return SUP_REV[c] || ''; }).join('');
      return '^(' + norm + ')';
    });
    return s;
  }

  // Compile a math expression (right-hand side) into a JS function (x, V) -> number.
  // Returns { fn, fnXY, uses, usesX }. With allowY, y is a second variable (fnXY).
  function compileExpr(src, allowY) {
    var s = unprettifyMath(String(src)).toLowerCase()
      .replace(/−/g, '-').replace(/×/g, '*').replace(/÷/g, '/')
      .replace(/π/g, '@').replace(/pi/g, '@')
      .replace(/\*\*/g, '^')
      .replace(/\s+/g, '');
    if (!s) throw new Error('Nothing to graph yet');

    // |...| means absolute value
    var pguard = 0;
    while (s.indexOf('|') !== -1 && pguard++ < 12) {
      var ns = s.replace(/\|([^|]*)\|/, 'abs($1)');
      if (ns === s) break;
      s = ns;
    }
    if (s.indexOf('|') !== -1) throw new Error('Mismatched absolute-value bars |…|');

    FUNC_KEYS.forEach(function (k) { s = s.split(k).join(TOKEN_OF[k]); });

    if (!/^[\d.a-z@Α-Ω+\-*/^(),]*$/.test(s)) {
      throw new Error('Unsupported symbol — you can use numbers, letters, + − · ÷ ^ ( ) | |, and < > ≤ ≥ for inequalities. The ⌨ button shows everything available.');
    }
    if (/[Α-Ω](?!\()/.test(s)) {
      throw new Error('Write functions with parentheses, e.g. sin(x)');
    }
    if (!allowY && /y/.test(s)) throw new Error('y can’t go in this part — use x here');

    // implicit multiplication: 2x, 2(, )x, )2, )(, x2, xx, x(, @x ...
    s = s.replace(/(\d)(?=[a-z@Α-Ω(])/g, '$1*');
    s = s.replace(/(\))(?=[\d.a-z@Α-Ω(])/g, ')*');
    s = s.replace(/([a-z@])(?=[\d.a-z@Α-Ω(])/g, '$1*');

    var uses = {};
    var usesX = false;
    (s.match(/[a-z]/g) || []).forEach(function (c) {
      if (c === 'x') { usesX = true; return; }
      if (c !== 'e' && c !== 'y') uses[c] = true;
    });

    s = s.replace(/\^/g, '**');
    // single pass: variables -> x / yv stay, e -> Math.E, others -> V.<letter>
    s = s.replace(/[a-z]/g, function (c) {
      if (c === 'x') return 'x';
      if (c === 'y') return 'Y';
      if (c === 'e') return 'Math.E';
      return '(V.' + c + ')';
    });
    var i;
    for (i = 0; i < FUNC_KEYS.length; i++) {
      s = s.split(TOKENS[i]).join('M.' + FUNC_KEYS[i]);
    }
    s = s.replace(/@/g, 'Math.PI');

    var fn, fnXY;
    try {
      /* eslint-disable no-new-func */
      var raw = new Function('x', 'Y', 'V', 'M', '"use strict"; return (' + s + ');');
      raw(0, 0, {}, MATHF);
      fn = function (x, V) { return raw(x, 0, V, MATHF); };
      fnXY = function (x, y, V) { return raw(x, y, V, MATHF); };
    } catch (err) {
      throw new Error('Can’t read this — check the help (?) for examples');
    }
    return { fn: fn, fnXY: fnXY, uses: Object.keys(uses), usesX: usesX };
  }

  // Parse one full row of input into a typed object.
  function parseRow(text) {
    var t = String(text).trim();
    if (!t) return { type: 'empty' };
    var s = unprettifyMath(t).toLowerCase().replace(/−/g, '-').replace(/\s+/g, '');

    // still mid-typing? — stay quiet instead of showing an error:
    //  · ends in an operator, or is a lone "y"
    //  · has an empty box somewhere: () from a fraction/exponent being filled in
    //  · has more ( than ) so far
    //  · ends in a function name whose parentheses aren't typed yet
    if (/[+\-*/^(<>=,·⁄|]$/.test(s) || s === 'y') return { type: 'empty' };
    if (s.indexOf('()') > -1) return { type: 'empty' };
    var depth = 0, di;
    for (di = 0; di < s.length; di++) {
      if (s.charAt(di) === '(') depth++;
      else if (s.charAt(di) === ')') depth--;
    }
    if (depth > 0) return { type: 'empty' };
    if (/(asin|acos|atan|sinh|cosh|tanh|sqrt|floor|ceil|round|sin|cos|tan|sec|csc|cot|abs|exp|min|max|ln|log)$/.test(s)) {
      return { type: 'empty' };
    }

    // inequalities:  y < f(x)  |  y >= f(x)  |  x < 4 ...
    var FLIP = { '<': '>', '>': '<', '<=': '>=', '>=': '<=' };
    var mi = /^y(<=|>=|<|>)(.+)$/.exec(s);
    if (mi) {
      var ci = compileExpr(mi[2]);
      return { type: 'ineq', axis: 'y', op: mi[1], fn: ci.fn, uses: ci.uses };
    }
    mi = /^(.+)(<=|>=|<|>)y$/.exec(s);
    if (mi) {
      var cir = compileExpr(mi[1]);
      return { type: 'ineq', axis: 'y', op: FLIP[mi[2]], fn: cir.fn, uses: cir.uses };
    }
    mi = /^x(<=|>=|<|>)(.+)$/.exec(s);
    if (mi) {
      var cxi = compileExpr(mi[2]);
      if (cxi.usesX) throw new Error('Use a number, like x < 4');
      return { type: 'ineq', axis: 'x', op: mi[1], fx: cxi.fn, uses: cxi.uses };
    }
    mi = /^(.+)(<=|>=|<|>)x$/.exec(s);
    if (mi) {
      var cxr = compileExpr(mi[1]);
      if (cxr.usesX) throw new Error('Use a number, like 4 > x');
      return { type: 'ineq', axis: 'x', op: FLIP[mi[2]], fx: cxr.fn, uses: cxr.uses };
    }

    // slider:  a = 1.5   (single letter, not x/y/e, literal number)
    var m = /^([a-df-wz])=(-?\d+(?:\.\d+)?)$/.exec(s);
    if (m) return { type: 'slider', name: m[1], value: parseFloat(m[2]) };

    // point:  ( expr , expr )
    if (s.charAt(0) === '(' && s.charAt(s.length - 1) === ')') {
      var inner = s.slice(1, -1);
      var depth = 0, splitAt = -1, i;
      for (i = 0; i < inner.length; i++) {
        var ch = inner.charAt(i);
        if (ch === '(') depth++;
        else if (ch === ')') depth--;
        else if (ch === ',' && depth === 0) { splitAt = i; break; }
      }
      if (splitAt > -1) {
        var leftS = inner.slice(0, splitAt), rightS = inner.slice(splitAt + 1);
        if (!leftS || !rightS) return { type: 'empty' }; // point still being typed
        var cx = compileExpr(leftS);
        var cy = compileExpr(rightS);
        if (cx.usesX || cy.usesX) {
          throw new Error('Points need numbers, like (2, 3)');
        }
        var lit = /^\((-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)\)$/.exec(s);
        return {
          type: 'point', fx: cx.fn, fy: cy.fn,
          uses: cx.uses.concat(cy.uses),
          literal: lit ? { x: parseFloat(lit[1]), y: parseFloat(lit[2]) } : null
        };
      }
    }

    // vertical line:  x = expr
    m = /^x=(.+)$/.exec(s);
    if (m) {
      var cv = compileExpr(m[1]);
      if (cv.usesX) throw new Error('Use a number, like x = 4');
      return { type: 'vertical', fx: cv.fn, uses: cv.uses };
    }

    // general implicit forms: "x + y = 4", "2y = x", "3 = x", "x + y < 4" ...
    // (anything with one comparison that we can solve for y, or for x)
    if (!/^[a-df-wz]\(x\)=/.test(s)) {
      var om = /(<=|>=|<|>|=)/.exec(s);
      if (om) {
        var op0 = om[1];
        var oi = s.indexOf(op0);
        var Ls = s.slice(0, oi), Rs = s.slice(oi + op0.length);
        if (Ls && Rs && !/[<>=]/.test(Ls) && !/[<>=]/.test(Rs)) {
          if (/y/.test(s)) {
            var Lc = compileExpr(Ls, true), Rc = compileExpr(Rs, true);
            var g = function (x, y, V) { return Lc.fnXY(x, y, V) - Rc.fnXY(x, y, V); };
            // must be linear in y:  g = A(x) + B(x)·y
            var lok = true, ti, tx = [0.3, 1.7];
            for (ti = 0; ti < tx.length; ti++) {
              var A0 = g(tx[ti], 0, {}), B0 = g(tx[ti], 1, {}) - A0, B1 = g(tx[ti], 2, {}) - g(tx[ti], 1, {});
              if (isFinite(B0) && isFinite(B1) && Math.abs(B0 - B1) > 1e-9 * (1 + Math.abs(B0))) { lok = false; break; }
            }
            if (!lok) throw new Error('I can only solve equations that are linear in y — try writing it as “y = …”');
            var solveY = function (x, V) {
              var A = g(x, 0, V);
              var B = g(x, 1, V) - A;
              var r = -A / B;
              return isFinite(r) ? r : NaN;
            };
            var usesU = Lc.uses.slice();
            Rc.uses.forEach(function (u) { if (usesU.indexOf(u) === -1) usesU.push(u); });
            if (op0 === '=') return { type: 'fn', fn: solveY, uses: usesU };
            var Bs = g(0.37, 1, {}) - g(0.37, 0, {});
            var opY = (isFinite(Bs) && Bs < 0) ? FLIP[op0] : op0;
            return { type: 'ineq', axis: 'y', op: opY, fn: solveY, uses: usesU };
          }
          if (/x/.test(s)) {
            var Lc2 = compileExpr(Ls, true), Rc2 = compileExpr(Rs, true);
            var g2 = function (x, V) { return Lc2.fnXY(x, 0, V) - Rc2.fnXY(x, 0, V); };
            var c0 = g2(0, {}), a0 = g2(1, {}) - c0;
            var linX = !isFinite(c0) || !isFinite(a0) ||
              Math.abs(g2(2.3, {}) - (c0 + 2.3 * a0)) < 1e-9 * (1 + Math.abs(c0));
            if (linX && (!isFinite(a0) || Math.abs(a0) > 1e-12)) {
              var solveX = function (_, V) {
                var cc = g2(0, V), aa = g2(1, V) - cc;
                var r = -cc / aa;
                return isFinite(r) ? r : NaN;
              };
              var usesU2 = Lc2.uses.slice();
              Rc2.uses.forEach(function (u) { if (usesU2.indexOf(u) === -1) usesU2.push(u); });
              if (op0 === '=') return { type: 'vertical', fx: solveX, uses: usesU2 };
              var opX = (isFinite(a0) && a0 < 0) ? FLIP[op0] : op0;
              return { type: 'ineq', axis: 'x', op: opX, fx: solveX, uses: usesU2 };
            }
          }
        }
      }
    }

    // bare expression that still mentions y (probably mid-thought) — stay quiet
    if (s.indexOf('=') === -1 && /y/.test(s)) return { type: 'empty' };

    // function of x:  y = expr   |   f(x) = expr   |   bare expr
    var rhs = null;
    m = /^y=(.+)$/.exec(s);
    if (m) rhs = m[1];
    if (rhs === null) {
      m = /^[a-df-wz]\(x\)=(.+)$/.exec(s);
      if (m) rhs = m[1];
    }
    if (rhs === null) {
      if (s.indexOf('=') > -1) {
        throw new Error('Try one of:  y = 2x + 3,  y < 2x + 3,  x = 4,  (2, 3),  a = 1');
      }
      rhs = s;
    }
    var cf = compileExpr(rhs);
    return { type: 'fn', fn: cf.fn, uses: cf.uses };
  }

  /* ============== SHAPE DETECTION (draggable lines & parabolas) ============== */

  // If a "y = ..." expression is numerically linear or quadratic (and uses no
  // sliders), we expose Khan-Academy-style drag handles for it.
  function detectShape(e) {
    e.shape = null;
    if (!e.parsed || e.parsed.type !== 'fn') return;
    if (e.parsed.uses && e.parsed.uses.length) return;
    var f = e.parsed.fn, V = {};
    var y0, y1, y2, y3;
    try { y0 = f(0, V); y1 = f(1, V); y2 = f(2, V); y3 = f(3, V); } catch (err) { return; }
    if (![y0, y1, y2, y3].every(isFinite)) return;
    var d1 = y1 - y0, d2 = y2 - y1, d3 = y3 - y2;
    var s1 = d2 - d1, s2 = d3 - d2;
    var probes = [-2.7, 5.3, -11.4];
    var i, tv;
    if (Math.abs(s1) < 1e-9 && Math.abs(s2) < 1e-9) {
      var m = d1, b = y0;
      for (i = 0; i < probes.length; i++) {
        try { tv = f(probes[i], V); } catch (err) { return; }
        if (!isFinite(tv) || Math.abs(tv - (m * probes[i] + b)) > 1e-6 * (1 + Math.abs(tv))) return;
      }
      e.shape = { kind: 'linear', m: m, b: b };
      return;
    }
    if (Math.abs(s1 - s2) < 1e-9 && Math.abs(s1) > 1e-12) {
      var qa = s1 / 2, qb = d1 - qa, qc = y0;
      for (i = 0; i < probes.length; i++) {
        try { tv = f(probes[i], V); } catch (err) { return; }
        var pred = qa * probes[i] * probes[i] + qb * probes[i] + qc;
        if (!isFinite(tv) || Math.abs(tv - pred) > 1e-6 * (1 + Math.abs(tv))) return;
      }
      e.shape = {
        kind: 'quad', a: qa, b: qb, c: qc,
        h: -qb / (2 * qa), k: qc - (qb * qb) / (4 * qa)
      };
    }
  }

  /* ---- rebuild expression text from dragged coefficients ---- */

  function fmtCoef(v) {
    var r = Math.round(v * 100) / 100;
    if (Object.is(r, -0)) r = 0;
    return String(r);
  }

  function buildLineText(m, b) {
    var mr = Math.round(m * 100) / 100;
    var br = Math.round(b * 100) / 100;
    if (mr === 0) return 'y = ' + fmtCoef(br);
    var mt = mr === 1 ? 'x' : (mr === -1 ? '-x' : fmtCoef(mr) + 'x');
    var s = 'y = ' + mt;
    if (br > 0) s += ' + ' + fmtCoef(br);
    else if (br < 0) s += ' - ' + fmtCoef(-br);
    return s;
  }

  function nonZeroCoef(a, fallbackSign) {
    var r = Math.round(a * 100) / 100;
    if (r === 0) r = 0.01 * (fallbackSign < 0 ? -1 : 1);
    return r;
  }

  function buildQuadStdText(a, b, c) {
    var ar = nonZeroCoef(a, a);
    var br = Math.round(b * 100) / 100;
    var cr = Math.round(c * 100) / 100;
    var at = ar === 1 ? 'x^2' : (ar === -1 ? '-x^2' : fmtCoef(ar) + 'x^2');
    var s = 'y = ' + at;
    if (br > 0) s += ' + ' + (br === 1 ? 'x' : fmtCoef(br) + 'x');
    else if (br < 0) s += ' - ' + (br === -1 ? 'x' : fmtCoef(-br) + 'x');
    if (cr > 0) s += ' + ' + fmtCoef(cr);
    else if (cr < 0) s += ' - ' + fmtCoef(-cr);
    return s;
  }

  function buildQuadVertexText(a, h, k) {
    var ar = nonZeroCoef(a, a);
    var hr = Math.round(h * 100) / 100;
    var kr = Math.round(k * 100) / 100;
    var inner = hr === 0 ? 'x^2'
      : '(x ' + (hr > 0 ? '- ' + fmtCoef(hr) : '+ ' + fmtCoef(-hr)) + ')^2';
    var prefix = ar === 1 ? '' : (ar === -1 ? '-' : fmtCoef(ar));
    var s = 'y = ' + prefix + inner;
    if (kr > 0) s += ' + ' + fmtCoef(kr);
    else if (kr < 0) s += ' - ' + fmtCoef(-kr);
    return s;
  }

  /* ================= STATE ================= */

  var PALETTE = ['#c74440', '#2d70b3', '#388c46', '#6042a6', '#fa7e19', '#d13d8f'];
  var STORAGE_KEY = 'charts.calc.v1';

  var exprs = [];        // {id, text, color, visible, parsed, error, els, shape}
  var nextId = 1;
  var view = { cx: 0, cy: 0, ppu: 50 };
  var focusedId = null;

  /* snap-to-grid step for dragging (0 = free) */
  var snapStep = 0;
  try { snapStep = parseFloat(localStorage.getItem('charts.snap') || '0') || 0; } catch (e) {}

  function snapRound(v) {
    if (snapStep > 0) return Math.round(v / snapStep) * snapStep;
    return Math.round(v * 100) / 100;
  }

  function nextColor() {
    return PALETTE[(exprs.length) % PALETTE.length];
  }

  function save() {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify({
        exprs: exprs.map(function (e) { return { text: e.text, color: e.color, visible: e.visible }; }),
        view: view
      }));
    } catch (e) {}
  }

  function sliderVars() {
    var V = {};
    exprs.forEach(function (e) {
      if (e.visible && e.parsed && e.parsed.type === 'slider') V[e.parsed.name] = e.parsed.value;
    });
    return V;
  }

  /* ================= EXPRESSION LIST UI ================= */

  var listEl = $('exprList');
  var PLACEHOLDERS = ['y = x²', '(1, 2)', 'y = sin(x)', 'y < 2x + 1', 'a = 2'];
  var lastFocusedExpr = null;

  function makeExpr(text) {
    return { id: nextId++, text: String(text || ''), color: nextColor(), visible: true, parsed: null, error: null, els: null, mq: null, muteEdit: false };
  }

  function reparse(e) {
    e.error = null;
    try {
      e.parsed = parseRow(e.text);
    } catch (err) {
      e.parsed = null;
      e.error = err.message;
    }
    detectShape(e);
  }

  /* ---- MathQuill field plumbing ---- */

  // Push plain text into a row's math field without triggering its edit handler.
  function setFieldText(e, plain) {
    e.text = String(plain);
    if (e.mq) {
      e.muteEdit = true;
      try { e.mq.latex(plainToLatex(e.text)); } catch (err) {}
      e.muteEdit = false;
    }
    syncHint(e);
  }

  function syncHint(e) {
    if (!e.els || !e.els.hint) return;
    e.els.hint.style.display = e.text.trim() === '' ? '' : 'none';
  }

  function beginEdit(e) {
    if (!e || !e.mq) return;
    e.mq.focus();
    try { e.mq.moveToRightEnd(); } catch (err) {}
  }

  function buildRow(e) {
    var row = document.createElement('div');
    row.className = 'expr-row';

    var gutter = document.createElement('div');
    gutter.className = 'row-gutter';
    var num = document.createElement('span');
    num.className = 'row-num';
    var dot = document.createElement('button');
    dot.className = 'vis-dot';
    dot.title = 'Change color or hide this line';
    gutter.appendChild(num);
    gutter.appendChild(dot);

    var main = document.createElement('div');
    main.className = 'row-main';
    var mspan = document.createElement('span');
    mspan.className = 'expr-mq';
    var hint = document.createElement('span');
    hint.className = 'mq-hint';
    var extra = document.createElement('div');
    extra.className = 'row-extra';
    main.appendChild(hint);
    main.appendChild(mspan);
    main.appendChild(extra);

    var del = document.createElement('button');
    del.className = 'row-del';
    del.textContent = '✕';
    del.title = 'Remove this line';

    row.appendChild(gutter);
    row.appendChild(main);
    row.appendChild(del);

    e.els = { row: row, num: num, dot: dot, mspan: mspan, hint: hint, extra: extra };

    var idxOf = function () { return exprs.indexOf(e); };

    if (MQ) {
      e.mq = MQ.MathField(mspan, {
        spaceBehavesLikeTab: false,
        restrictMismatchedBrackets: true,
        autoCommands: 'pi sqrt',
        autoOperatorNames: MQ_OPNAMES,
        handlers: {
          edit: function () {
            if (e.muteEdit) return;
            e.text = latexToPlain(e.mq.latex());
            syncHint(e);
            reparse(e);
            refreshAllExtras();
            save();
            requestDraw();
            scheduleLineAnim(e);
          },
          enter: function () { addExpr('', idxOf() + 1, true); },
          upOutOf: function () { var i = idxOf(); if (i > 0) beginEdit(exprs[i - 1]); },
          downOutOf: function () { var i = idxOf(); if (i < exprs.length - 1) beginEdit(exprs[i + 1]); },
          deleteOutOf: function () {
            if (e.text.trim() === '' && exprs.length > 1) {
              var i = idxOf();
              removeExpr(e);
              var prev = exprs[Math.max(0, i - 1)];
              if (prev) beginEdit(prev);
            }
          }
        }
      });
      setFieldText(e, e.text);
    }

    mspan.addEventListener('focusin', function () {
      focusedId = e.id;
      lastFocusedExpr = e;
      exprs.forEach(function (x) { if (x !== e && x.els) x.els.row.classList.remove('focused'); });
      row.classList.add('focused');
      requestDraw();
    });
    mspan.addEventListener('focusout', function () {
      if (focusedId === e.id) focusedId = null;
      row.classList.remove('focused');
      requestDraw();
    });
    dot.addEventListener('click', function (ev) {
      ev.stopPropagation();
      openColorPop(e, dot);
    });
    del.addEventListener('click', function () { removeExpr(e); });

    return row;
  }

  function syncRow(e) {
    if (!e.els) return;
    e.els.dot.style.setProperty('--c', e.color);
    e.els.dot.classList.toggle('hidden-expr', !e.visible);
    var idx = exprs.indexOf(e);
    e.els.num.textContent = String(idx + 1);
    if (e.els.hint) e.els.hint.textContent = PLACEHOLDERS[idx % PLACEHOLDERS.length];
    syncHint(e);
  }

  function refreshExtras(e) {
    if (!e.els) return;
    var extra = e.els.extra;
    extra.innerHTML = '';

    if (e.error && e.text.trim() !== '') {
      var err = document.createElement('div');
      err.className = 'row-error';
      err.textContent = e.error;
      extra.appendChild(err);
      return;
    }
    if (!e.parsed) return;

    if (e.parsed.type === 'slider') {
      var wrap = document.createElement('div');
      wrap.className = 'slider-wrap';
      wrap.style.setProperty('--c', e.color);
      var v = e.parsed.value;
      var lo = Math.min(-10, -Math.abs(v) * 2);
      var hi = Math.max(10, Math.abs(v) * 2);
      var slider = document.createElement('input');
      slider.type = 'range';
      slider.min = String(lo);
      slider.max = String(hi);
      slider.step = '0.1';
      slider.value = String(v);
      var loLab = document.createElement('span');
      loLab.className = 'slider-bound';
      loLab.textContent = String(lo);
      var hiLab = document.createElement('span');
      hiLab.className = 'slider-bound';
      hiLab.textContent = String(hi);
      slider.addEventListener('input', function () {
        var val = parseFloat(slider.value);
        e.parsed.value = val;
        setFieldText(e, e.parsed.name + ' = ' + (Math.round(val * 10) / 10));
        save();
        requestDraw();
      });
      wrap.appendChild(loLab);
      wrap.appendChild(slider);
      wrap.appendChild(hiLab);
      extra.appendChild(wrap);
      return;
    }

    // Offer to create sliders for unknown letters (like Desmos does)
    var defined = sliderVars();
    var missing = (e.parsed.uses || []).filter(function (u) { return !(u in defined); });
    missing.forEach(function (name) {
      var chip = document.createElement('button');
      chip.className = 'chip-btn';
      chip.innerHTML = 'Add a slider for <strong>' + name + '</strong>';
      chip.addEventListener('click', function () {
        addExpr(name + ' = 1', exprs.indexOf(e), false);
      });
      extra.appendChild(chip);
    });
  }

  function refreshAllExtras() {
    exprs.forEach(refreshExtras);
  }

  function renumber() {
    exprs.forEach(syncRow);
  }

  function addExpr(text, atIndex, focus) {
    var e = makeExpr(text);
    reparse(e);
    var row = buildRow(e);
    if (atIndex === undefined || atIndex === null || atIndex >= exprs.length) {
      exprs.push(e);
      listEl.appendChild(row);
    } else {
      exprs.splice(atIndex, 0, e);
      listEl.insertBefore(row, listEl.children[atIndex]);
    }
    renumber();
    refreshAllExtras();
    save();
    requestDraw();
    if (focus) beginEdit(e);
    return e;
  }

  /* ---- per-line style popover: palette, custom color, hide/show ---- */

  var colorPop = document.createElement('div');
  colorPop.className = 'color-pop';
  colorPop.hidden = true;
  document.body.appendChild(colorPop);
  var colorPopTarget = null;

  function closeColorPop() {
    colorPop.hidden = true;
    colorPopTarget = null;
  }

  function toHexColor(c) {
    if (/^#[0-9a-f]{6}$/i.test(c)) return c;
    var cx2 = document.createElement('canvas').getContext('2d');
    cx2.fillStyle = c;
    return cx2.fillStyle;
  }

  function applyExprStyle(e) {
    syncRow(e);
    refreshExtras(e);
    save();
    requestDraw();
  }

  function openColorPop(e, anchor, force) {
    if (!force && colorPopTarget === e && !colorPop.hidden) { closeColorPop(); return; }
    colorPopTarget = e;
    colorPop.innerHTML = '';

    var sw = document.createElement('div');
    sw.className = 'cp-swatches';
    PALETTE.forEach(function (c) {
      var b = document.createElement('button');
      b.className = 'cp-swatch' + (c.toLowerCase() === String(e.color).toLowerCase() ? ' sel' : '');
      b.style.background = c;
      b.title = c;
      b.addEventListener('click', function () {
        e.color = c;
        applyExprStyle(e);
        openColorPop(e, anchor, true);
      });
      sw.appendChild(b);
    });
    colorPop.appendChild(sw);

    var row = document.createElement('div');
    row.className = 'cp-row';
    var lab = document.createElement('label');
    lab.className = 'cp-custom';
    lab.textContent = 'Custom ';
    var inp = document.createElement('input');
    inp.type = 'color';
    inp.value = toHexColor(e.color);
    inp.addEventListener('input', function () {
      e.color = inp.value;
      applyExprStyle(e);
    });
    lab.appendChild(inp);
    row.appendChild(lab);

    var vis = document.createElement('button');
    vis.className = 'cp-vis';
    vis.textContent = e.visible ? 'Hide' : 'Show';
    vis.addEventListener('click', function () {
      e.visible = !e.visible;
      vis.textContent = e.visible ? 'Hide' : 'Show';
      applyExprStyle(e);
    });
    row.appendChild(vis);
    colorPop.appendChild(row);

    colorPop.hidden = false;
    var r = anchor.getBoundingClientRect();
    colorPop.style.top = Math.min(window.innerHeight - colorPop.offsetHeight - 8, r.bottom + 6) + 'px';
    colorPop.style.left = Math.max(8, Math.min(window.innerWidth - colorPop.offsetWidth - 8, r.left - 8)) + 'px';
  }

  document.addEventListener('mousedown', function (ev) {
    if (colorPop.hidden) return;
    if (colorPop.contains(ev.target)) return;
    if (ev.target.classList && ev.target.classList.contains('vis-dot')) return;
    closeColorPop();
  });
  document.addEventListener('keydown', function (ev) {
    if (ev.key === 'Escape') closeColorPop();
  });

  function removeExpr(e) {
    var idx = exprs.indexOf(e);
    if (idx === -1) return;
    exprs.splice(idx, 1);
    if (e.els) e.els.row.remove();
    if (exprs.length === 0) addExpr('', null, false);
    renumber();
    refreshAllExtras();
    save();
    requestDraw();
  }

  /* ================= CANVAS ================= */

  var canvas = $('canvas');
  var ctx = canvas.getContext('2d');
  var graphEl = $('graph');
  var W = 0, H = 0;

  function resize() {
    var dpr = window.devicePixelRatio || 1;
    W = graphEl.clientWidth;
    H = graphEl.clientHeight;
    canvas.width = Math.round(W * dpr);
    canvas.height = Math.round(H * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    requestDraw();
  }

  function sx(wx) { return W / 2 + (wx - view.cx) * view.ppu; }
  function sy(wy) { return H / 2 - (wy - view.cy) * view.ppu; }
  function wx(px) { return view.cx + (px - W / 2) / view.ppu; }
  function wy(py) { return view.cy - (py - H / 2) / view.ppu; }

  var drawQueued = false;
  function requestDraw() {
    if (drawQueued) return;
    drawQueued = true;
    requestAnimationFrame(function () { drawQueued = false; draw(); });
  }

  /* Learn-mode integration (see learn.js). While active, the calculator's
     expressions are hidden and canvas input is offered to the delegate first. */
  var learnActive = false;
  var learnDrawFn = null;
  var learnDelegate = null;

  function intNiceStep(minStep) {
    // smallest "nice" whole number (1, 2, 5, 10, 20, 50, ...) >= minStep
    var p = 1;
    for (var guard = 0; guard < 20; guard++) {
      var c = [1, 2, 5];
      for (var i = 0; i < 3; i++) {
        if (c[i] * p >= minStep - 1e-9) return c[i] * p;
      }
      p *= 10;
    }
    return p;
  }

  // Grid squares are always whole units — zooming in never subdivides them.
  // Zoomed far out, squares grow to nice whole-number sizes (2, 5, 10, ...).
  function gridSteps() {
    var ppu = view.ppu;
    if (ppu >= 8) {
      return { minor: 1, major: 5, label: (ppu >= 35 ? 1 : 5) };
    }
    var m = intNiceStep(8 / ppu);
    return { minor: m, major: m * 5, label: m * 5 };
  }

  function fmtTick(v, step) {
    if (Math.abs(v) < step / 1e6) return '0';
    if (Math.abs(v) >= 1e9 || Math.abs(v) < 1e-6) return v.toExponential(1);
    var dec = Math.max(0, -Math.floor(Math.log10(step)));
    return String(parseFloat(v.toFixed(dec + 1)));
  }

  function fmtNum(v) {
    if (!isFinite(v)) return '—';
    var a = Math.abs(v);
    if (a !== 0 && (a >= 1e6 || a < 1e-4)) return v.toExponential(3);
    return String(parseFloat(v.toPrecision(5)));
  }

  function drawGrid() {
    var st = gridSteps();
    var minor = st.minor, major = st.major, labelStep = st.label;

    var x0 = wx(0), x1 = wx(W), y0 = wy(H), y1 = wy(0);
    var v;

    // minor grid
    if (minor * view.ppu >= 8) {
      ctx.strokeStyle = colors.gridMinor;
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (v = Math.ceil(x0 / minor) * minor; v <= x1; v += minor) {
        var px = Math.round(sx(v)) + 0.5;
        ctx.moveTo(px, 0); ctx.lineTo(px, H);
      }
      for (v = Math.ceil(y0 / minor) * minor; v <= y1; v += minor) {
        var py = Math.round(sy(v)) + 0.5;
        ctx.moveTo(0, py); ctx.lineTo(W, py);
      }
      ctx.stroke();
    }

    // major grid
    ctx.strokeStyle = colors.gridMajor;
    ctx.lineWidth = 1;
    ctx.beginPath();
    for (v = Math.ceil(x0 / major) * major; v <= x1; v += major) {
      var mx = Math.round(sx(v)) + 0.5;
      ctx.moveTo(mx, 0); ctx.lineTo(mx, H);
    }
    for (v = Math.ceil(y0 / major) * major; v <= y1; v += major) {
      var my = Math.round(sy(v)) + 0.5;
      ctx.moveTo(0, my); ctx.lineTo(W, my);
    }
    ctx.stroke();

    // axes
    var ax = sx(0), ay = sy(0);
    ctx.strokeStyle = colors.axis;
    ctx.lineWidth = 1.6;
    ctx.beginPath();
    if (ax >= -2 && ax <= W + 2) { ctx.moveTo(ax, 0); ctx.lineTo(ax, H); }
    if (ay >= -2 && ay <= H + 2) { ctx.moveTo(0, ay); ctx.lineTo(W, ay); }
    ctx.stroke();

    // tick labels (pinned to the edge when the axis is off-screen, like Desmos)
    ctx.font = '11px "IBM Plex Mono", monospace';
    ctx.lineWidth = 3;
    ctx.strokeStyle = colors.bg;
    ctx.fillStyle = colors.muted;

    var labelY = Math.max(6, Math.min(H - 18, ay + 7));
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    for (v = Math.ceil(x0 / labelStep) * labelStep; v <= x1; v += labelStep) {
      if (Math.abs(v) < labelStep / 1e6) continue;
      var t = fmtTick(v, labelStep);
      var lx = sx(v);
      ctx.strokeText(t, lx, labelY);
      ctx.fillText(t, lx, labelY);
    }

    ctx.textBaseline = 'middle';
    var pinLeft = ax < 10, pinRight = ax > W - 10;
    for (v = Math.ceil(y0 / labelStep) * labelStep; v <= y1; v += labelStep) {
      if (Math.abs(v) < labelStep / 1e6) continue;
      var ty = fmtTick(v, labelStep);
      var ly = sy(v);
      if (pinLeft) { ctx.textAlign = 'left'; ctx.strokeText(ty, 8, ly); ctx.fillText(ty, 8, ly); }
      else if (pinRight) { ctx.textAlign = 'right'; ctx.strokeText(ty, W - 8, ly); ctx.fillText(ty, W - 8, ly); }
      else { ctx.textAlign = 'right'; ctx.strokeText(ty, ax - 7, ly); ctx.fillText(ty, ax - 7, ly); }
    }

    // origin "0"
    if (ax > 14 && ax < W - 6 && ay > 6 && ay < H - 14) {
      ctx.textAlign = 'right';
      ctx.textBaseline = 'top';
      ctx.strokeText('0', ax - 5, ay + 5);
      ctx.fillText('0', ax - 5, ay + 5);
    }

    // axis letters at the end of each axis line
    ctx.font = 'italic 14px "IBM Plex Mono", monospace';
    ctx.fillStyle = colors.text;
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    var xLabY = Math.max(18, Math.min(H - 6, ay - 7));
    ctx.strokeText('x', W - 6, xLabY);
    ctx.fillText('x', W - 6, xLabY);
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    var yLabX = Math.max(6, Math.min(W - 16, ax + 8));
    ctx.strokeText('y', yLabX, 6);
    ctx.fillText('y', yLabX, 6);
  }

  function drawFn(e, V, highlight) {
    var f = e.parsed.fn;
    ctx.strokeStyle = e.color;
    ctx.lineWidth = highlight ? 3.6 : 2.4;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.beginPath();
    var started = false;
    var prevPy = 0;   // unclamped screen y of previous sample
    var prevYw = 0;   // world y of previous sample
    var lim = H * 4;
    var step = 1;
    for (var px = -2; px <= W + 2; px += step) {
      var yv;
      try { yv = f(wx(px), V); } catch (err) { yv = NaN; }
      if (!isFinite(yv)) { started = false; continue; }
      var pyv = sy(yv);
      if (started && Math.abs(pyv - prevPy) > H * 1.5) {
        // Big jump: either a genuine discontinuity (tan/sec/csc asymptote) or
        // just a very steep continuous stretch. Sample the midpoint — if it
        // lies between the neighbours the curve is continuous, keep drawing.
        var ym;
        try { ym = f(wx(px - step / 2), V); } catch (err) { ym = NaN; }
        var lo = Math.min(prevYw, yv), hi = Math.max(prevYw, yv);
        if (!isFinite(ym) || ym < lo || ym > hi) started = false; // discontinuity
      }
      var pyc = pyv < -lim ? -lim : (pyv > H + lim ? H + lim : pyv);
      if (!started) { ctx.moveTo(px, pyc); started = true; }
      else ctx.lineTo(px, pyc);
      prevPy = pyv;
      prevYw = yv;
    }
    ctx.stroke();
  }

  function drawVertical(e, V, highlight) {
    var xv;
    try { xv = e.parsed.fx(0, V); } catch (err) { return; }
    if (!isFinite(xv)) return;
    var px = sx(xv);
    if (px < -4 || px > W + 4) return;
    ctx.strokeStyle = e.color;
    ctx.lineWidth = highlight ? 3.6 : 2.4;
    ctx.beginPath();
    ctx.moveTo(px, 0);
    ctx.lineTo(px, H);
    ctx.stroke();
  }

  // Shaded inequality region: y < f(x), y >= f(x), x < k, ...
  function drawInequality(e, V, highlight) {
    var op = e.parsed.op;
    var strict = (op === '<' || op === '>');
    var above = (op === '>' || op === '>=');
    ctx.save();
    if (e.parsed.axis === 'x') {
      var xv;
      try { xv = e.parsed.fx(0, V); } catch (err) { ctx.restore(); return; }
      if (!isFinite(xv)) { ctx.restore(); return; }
      var px = sx(xv);
      ctx.globalAlpha = 0.13;
      ctx.fillStyle = e.color;
      if (above) ctx.fillRect(Math.max(0, px), 0, Math.max(0, W - Math.max(0, px)), H);
      else ctx.fillRect(0, 0, Math.max(0, Math.min(W, px)), H);
      ctx.globalAlpha = 1;
      if (px >= -4 && px <= W + 4) {
        ctx.strokeStyle = e.color;
        ctx.lineWidth = highlight ? 3.6 : 2.4;
        ctx.setLineDash(strict ? [7, 6] : []);
        ctx.beginPath();
        ctx.moveTo(px, 0);
        ctx.lineTo(px, H);
        ctx.stroke();
      }
      ctx.restore();
      return;
    }
    // y-inequality: fill between the curve and the top/bottom edge
    var f = e.parsed.fn;
    var lim = H * 4;
    var edgeY = above ? -20 : H + 20;
    ctx.globalAlpha = 0.13;
    ctx.fillStyle = e.color;
    var seg = [];
    var flushSeg = function () {
      if (seg.length < 2) { seg = []; return; }
      ctx.beginPath();
      ctx.moveTo(seg[0][0], seg[0][1]);
      for (var i = 1; i < seg.length; i++) ctx.lineTo(seg[i][0], seg[i][1]);
      ctx.lineTo(seg[seg.length - 1][0], edgeY);
      ctx.lineTo(seg[0][0], edgeY);
      ctx.closePath();
      ctx.fill();
      seg = [];
    };
    for (var px2 = -2; px2 <= W + 2; px2 += 2) {
      var yv;
      try { yv = f(wx(px2), V); } catch (err) { yv = NaN; }
      if (!isFinite(yv)) { flushSeg(); continue; }
      var py = sy(yv);
      if (py < -lim) py = -lim;
      if (py > H + lim) py = H + lim;
      seg.push([px2, py]);
    }
    flushSeg();
    ctx.globalAlpha = 1;
    // boundary curve (dashed when strict)
    ctx.setLineDash(strict ? [7, 6] : []);
    drawFn(e, V, highlight);
    ctx.restore();
  }

  function drawPoint(e, V, highlight, hovered) {
    var pxv, pyv;
    try { pxv = e.parsed.fx(0, V); pyv = e.parsed.fy(0, V); } catch (err) { return; }
    if (!isFinite(pxv) || !isFinite(pyv)) return;
    var px = sx(pxv), py = sy(pyv);
    if (px < -20 || px > W + 20 || py < -20 || py > H + 20) return;
    ctx.fillStyle = e.color;
    ctx.beginPath();
    ctx.arc(px, py, highlight || hovered ? 7 : 5.5, 0, Math.PI * 2);
    ctx.fill();
    if (hovered) {
      ctx.strokeStyle = e.color;
      ctx.lineWidth = 1.6;
      ctx.beginPath();
      ctx.arc(px, py, 11, 0, Math.PI * 2);
      ctx.stroke();
      drawTip(px, py, '(' + fmtNum(pxv) + ', ' + fmtNum(pyv) + ')');
    }
  }

  function drawTip(px, py, label) {
    ctx.font = '12px "IBM Plex Mono", monospace';
    var w = ctx.measureText(label).width + 14;
    var h = 22;
    var bx = px + 12, by = py - h - 12;
    if (bx + w > W - 4) bx = px - w - 12;
    if (by < 4) by = py + 12;
    ctx.fillStyle = colors.hudBg;
    ctx.beginPath();
    if (ctx.roundRect) ctx.roundRect(bx, by, w, h, 6);
    else ctx.rect(bx, by, w, h);
    ctx.fill();
    ctx.fillStyle = colors.hudText;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText(label, bx + 7, by + h / 2 + 0.5);
  }

  /* ---------- draggable shape handles (lines & parabolas) ---------- */

  function ensureLineHandles(e) {
    var xLeft = wx(0), xRight = wx(W);
    var span = xRight - xLeft;
    var bad = e.hx1 === undefined || e.hx2 === undefined || !isFinite(e.hx1) || !isFinite(e.hx2) ||
      (Math.max(e.hx1, e.hx2) < xLeft + span * 0.02) || (Math.min(e.hx1, e.hx2) > xRight - span * 0.02);
    if (!bad) return;
    var a = view.cx - span * 0.18, b = view.cx + span * 0.18;
    if (span > 3) { a = Math.round(a); b = Math.round(b); }
    if (a === b) b = a + span * 0.2;
    e.hx1 = a;
    e.hx2 = b;
  }

  // Returns drag-handle world coordinates for an interactive expression, or null.
  function handlePoints(e) {
    if (!e.visible || e.error || !e.parsed || !e.shape) return null;
    if (e.parsed.type !== 'fn') return null;
    var f = e.parsed.fn, V = {};
    try {
      if (e.shape.kind === 'linear') {
        ensureLineHandles(e);
        return [
          { which: 'p1', wx: e.hx1, wy: f(e.hx1, V) },
          { which: 'p2', wx: e.hx2, wy: f(e.hx2, V) }
        ];
      }
      if (e.hdx === undefined || !isFinite(e.hdx) || e.hdx === 0) e.hdx = 1;
      var cx2 = e.shape.h + e.hdx;
      return [
        { which: 'vertex', wx: e.shape.h, wy: e.shape.k },
        { which: 'curve', wx: cx2, wy: f(cx2, V) }
      ];
    } catch (err) { return null; }
  }

  // Rise-over-run triangle between a line's two drag handles, with labels.
  function drawSlopeTri(e, hps) {
    var a = hps[0], b = hps[1];
    var L = a.wx <= b.wx ? a : b;
    var R = a.wx <= b.wx ? b : a;
    var run = Math.round((R.wx - L.wx) * 100) / 100;
    var rise = Math.round((R.wy - L.wy) * 100) / 100;
    if (run === 0 || rise === 0) return;
    var x1 = sx(L.wx), y1 = sy(L.wy), x2 = sx(R.wx), y2 = sy(R.wy);
    if (!isFinite(y1) || !isFinite(y2)) return;
    if (Math.hypot(x2 - x1, y2 - y1) < 56) return; // too small to annotate

    ctx.save();
    ctx.strokeStyle = e.color;
    ctx.globalAlpha = 0.55;
    ctx.lineWidth = 1.6;
    ctx.setLineDash([5, 4]);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y1); // run leg
    ctx.lineTo(x2, y2); // rise leg
    ctx.stroke();
    ctx.setLineDash([]);
    ctx.globalAlpha = 1;

    ctx.font = '600 11px "IBM Plex Mono", monospace';
    ctx.lineWidth = 3;
    ctx.strokeStyle = colors.bg;
    ctx.fillStyle = e.color;

    var runLab = 'run ' + (Object.is(run, -0) ? 0 : run);
    var riseLab = 'rise ' + (Object.is(rise, -0) ? 0 : rise);
    // run label: centered on the horizontal leg, outside the triangle
    ctx.textAlign = 'center';
    ctx.textBaseline = (y2 < y1) ? 'top' : 'bottom';
    var runY = (y2 < y1) ? y1 + 5 : y1 - 5;
    ctx.strokeText(runLab, (x1 + x2) / 2, runY);
    ctx.fillText(runLab, (x1 + x2) / 2, runY);
    // rise label: beside the vertical leg
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.strokeText(riseLab, x2 + 7, (y1 + y2) / 2);
    ctx.fillText(riseLab, x2 + 7, (y1 + y2) / 2);
    ctx.restore();
  }

  /* ---------- rise-over-run animation (plays when a line is plotted) ---------- */

  var rrAnim = null; // {x0, y0, rise, run, reps, start, stepMs, color}

  function drawArrowSeg(x1, y1, x2, y2, color, t) {
    var ex = x1 + (x2 - x1) * t, ey = y1 + (y2 - y1) * t;
    ctx.save();
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(ex, ey);
    ctx.stroke();
    if (t > 0.15) {
      var ang = Math.atan2(ey - y1, ex - x1);
      ctx.beginPath();
      ctx.moveTo(ex, ey);
      ctx.lineTo(ex - 9 * Math.cos(ang - 0.45), ey - 9 * Math.sin(ang - 0.45));
      ctx.lineTo(ex - 9 * Math.cos(ang + 0.45), ey - 9 * Math.sin(ang + 0.45));
      ctx.closePath();
      ctx.fill();
    }
    ctx.restore();
  }

  function animLabel(text, px, py, color, align, baseline) {
    ctx.save();
    ctx.font = '600 12px "IBM Plex Mono", monospace';
    ctx.textAlign = align || 'left';
    ctx.textBaseline = baseline || 'middle';
    ctx.lineWidth = 4;
    ctx.strokeStyle = colors.bg;
    ctx.strokeText(text, px, py);
    ctx.fillStyle = color;
    ctx.fillText(text, px, py);
    ctx.restore();
  }

  function playRiseRun(e) {
    if (!e || !e.visible || !e.shape || e.shape.kind !== 'linear' || e.shape.m === 0) return;
    var m = e.shape.m, b = e.shape.b;
    var run = 1, rise = m;
    if (!Number.isInteger(m) && Math.abs(m * 2 - Math.round(m * 2)) < 1e-9) { run = 2; rise = m * 2; }
    // start at the y-intercept when it's on screen, otherwise at the left handle
    var x0 = 0;
    var ix = sx(0), iy = sy(b);
    if (ix < 30 || ix > W - 120 || iy < 30 || iy > H - 30) {
      ensureLineHandles(e);
      x0 = Math.min(e.hx1, e.hx2);
    }
    rrAnim = {
      x0: x0, y0: m * x0 + b, rise: rise, run: run,
      reps: 2, start: performance.now(), stepMs: 750, color: e.color
    };
    tickRR();
  }

  function tickRR() {
    if (!rrAnim) return;
    requestDraw();
    var total = rrAnim.stepMs * 2 * rrAnim.reps + 500;
    if (performance.now() - rrAnim.start < total) requestAnimationFrame(tickRR);
    else { rrAnim = null; requestDraw(); }
  }

  function drawRRAnim() {
    if (!rrAnim) return;
    var el = performance.now() - rrAnim.start;
    var rr = Math.round(rrAnim.rise * 100) / 100;
    var rn = Math.round(rrAnim.run * 100) / 100;
    for (var rep = 0; rep < rrAnim.reps; rep++) {
      var bx = rrAnim.x0 + rrAnim.run * rep;
      var by = rrAnim.y0 + rrAnim.rise * rep;
      var p0x = sx(bx), p0y = sy(by);
      var p1x = sx(bx), p1y = sy(by + rrAnim.rise);
      var p2x = sx(bx + rrAnim.run), p2y = p1y;
      var tRise = Math.max(0, Math.min(1, (el - rep * 2 * rrAnim.stepMs) / rrAnim.stepMs));
      var tRun = Math.max(0, Math.min(1, (el - rep * 2 * rrAnim.stepMs - rrAnim.stepMs) / rrAnim.stepMs));
      if (tRise > 0) {
        drawArrowSeg(p0x, p0y, p1x, p1y, rrAnim.color, tRise);
        if (tRise >= 1) animLabel((rr > 0 ? 'up ' + rr : 'down ' + Math.abs(rr)), p0x - 9, (p0y + p1y) / 2, rrAnim.color, 'right');
      }
      if (tRun > 0) {
        drawArrowSeg(p1x, p1y, p2x, p2y, rrAnim.color, tRun);
        if (tRun >= 1) animLabel('across ' + rn, (p1x + p2x) / 2, p1y - 14, rrAnim.color, 'center');
      }
    }
  }

  // Debounced: play the animation once a typed line "settles" as a new linear equation.
  function scheduleLineAnim(e) {
    if (e.animTimer) { clearTimeout(e.animTimer); e.animTimer = null; }
    if (!e.shape || e.shape.kind !== 'linear' || e.shape.m === 0 || !e.visible) return;
    var sig = e.shape.m + '|' + e.shape.b;
    if (e.lastAnimSig === sig) return;
    e.animTimer = setTimeout(function () {
      e.animTimer = null;
      if (exprs.indexOf(e) === -1 || !e.visible || !e.shape || e.shape.kind !== 'linear' || e.shape.m === 0) return;
      var s2 = e.shape.m + '|' + e.shape.b;
      if (e.lastAnimSig === s2) return;
      e.lastAnimSig = s2;
      playRiseRun(e);
    }, 650);
  }

  function drawHandles(e) {
    var hps = handlePoints(e);
    if (!hps) return;
    // slope triangle only while this line is being adjusted (handle hovered or dragged)
    var adjusting = (dragShape && dragShape.e === e) || (hoverHandle && hoverHandle.e === e);
    if (adjusting && e.shape && e.shape.kind === 'linear' && hps.length === 2) drawSlopeTri(e, hps);
    hps.forEach(function (hp) {
      var px = sx(hp.wx), py = sy(hp.wy);
      if (!isFinite(px) || !isFinite(py)) return;
      if (px < -30 || px > W + 30 || py < -30 || py > H + 30) return;
      var active =
        (hoverHandle && hoverHandle.e === e && hoverHandle.which === hp.which) ||
        (dragShape && dragShape.e === e && dragShape.which === hp.which);
      ctx.beginPath();
      ctx.fillStyle = colors.bg;
      ctx.strokeStyle = e.color;
      ctx.lineWidth = 2.6;
      ctx.arc(px, py, active ? 8 : 6, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();
      if (hp.which === 'vertex') {
        ctx.beginPath();
        ctx.fillStyle = e.color;
        ctx.arc(px, py, 2.6, 0, Math.PI * 2);
        ctx.fill();
      }
      if (active) drawTip(px, py, '(' + fmtNum(hp.wx) + ', ' + fmtNum(hp.wy) + ')');
    });
  }

  function shapeHandleAt(mx, my) {
    var found = null, best = 14;
    exprs.forEach(function (e) {
      var hps = handlePoints(e);
      if (!hps) return;
      hps.forEach(function (hp) {
        var d = Math.hypot(sx(hp.wx) - mx, sy(hp.wy) - my);
        if (d < best) { best = d; found = { e: e, which: hp.which }; }
      });
    });
    return found;
  }

  function highlightRow(e) {
    exprs.forEach(function (x) { if (x.els) x.els.row.classList.remove('focused'); });
    if (e && e.els) {
      e.els.row.classList.add('focused');
      focusedId = e.id;
      e.els.row.scrollIntoView({ block: 'nearest' });
    }
  }

  function setExprText(e, text) {
    setFieldText(e, text);
    reparse(e);
    requestDraw();
  }

  function startShapeDrag(hit) {
    var e = hit.e;
    var ds = { e: e, which: hit.which, kind: e.shape.kind };
    var f = e.parsed.fn;
    if (ds.kind === 'linear') {
      var ox = hit.which === 'p1' ? e.hx2 : e.hx1;
      ds.other = { x: ox, y: f(ox, {}) };
    } else {
      ds.a = e.shape.a;
      ds.h = e.shape.h;
      ds.k = e.shape.k;
      ds.vertexForm = /\(x/.test(e.text);
    }
    highlightRow(e);
    return ds;
  }

  function applyShapeDrag(ds, mx, my) {
    var wxv = snapRound(wx(mx));
    var wyv = snapRound(wy(my));
    var e = ds.e;
    if (ds.kind === 'linear') {
      if (Math.abs(wxv - ds.other.x) < 1e-9) return; // would be vertical
      var m = (wyv - ds.other.y) / (wxv - ds.other.x);
      var b = wyv - m * wxv;
      if (ds.which === 'p1') e.hx1 = wxv; else e.hx2 = wxv;
      setExprText(e, buildLineText(m, b));
    } else if (ds.which === 'vertex') {
      ds.h = wxv;
      ds.k = wyv;
      setExprText(e, ds.vertexForm
        ? buildQuadVertexText(ds.a, wxv, wyv)
        : (function () { var b2 = -2 * ds.a * wxv, c2 = ds.a * wxv * wxv + wyv; return buildQuadStdText(ds.a, b2, c2); })());
    } else { // curvature handle
      if (Math.abs(wxv - ds.h) < 1e-9 || Math.abs(wyv - ds.k) < 1e-12) return;
      var a2 = (wyv - ds.k) / Math.pow(wxv - ds.h, 2);
      ds.a = a2;
      e.hdx = wxv - ds.h;
      setExprText(e, ds.vertexForm
        ? buildQuadVertexText(a2, ds.h, ds.k)
        : (function () { var b3 = -2 * a2 * ds.h, c3 = a2 * ds.h * ds.h + ds.k; return buildQuadStdText(a2, b3, c3); })());
    }
  }

  /* hover / trace state */
  var mouse = { x: 0, y: 0, over: false };
  var trace = null;        // {color, px, py, wx, wy}
  var hoverPointId = null; // expr id of hovered point
  var hoverHandle = null;  // {e, which}
  var dragPoint = null;    // expr being dragged
  var dragShape = null;    // active shape-handle drag state
  var dragTrace = null;    // {e} — sliding the trace dot along a curve
  var panning = false;

  // Nearest function curve (or vertical line) under the cursor, within threshold px.
  function curveAt(mx, my) {
    var V = sliderVars();
    var best = 18, found = null;
    exprs.forEach(function (e) {
      if (!e.visible || !e.parsed || e.error) return;
      if (e.parsed.type === 'fn') {
        var yv;
        try { yv = e.parsed.fn(wx(mx), V); } catch (err) { return; }
        if (!isFinite(yv)) return;
        var d = Math.abs(sy(yv) - my);
        if (d < best) { best = d; found = e; }
      } else if (e.parsed.type === 'vertical') {
        var xv;
        try { xv = e.parsed.fx(0, V); } catch (err) { return; }
        if (!isFinite(xv)) return;
        var d2 = Math.abs(sx(xv) - mx);
        if (d2 < best) { best = d2; found = e; }
      }
    });
    return found;
  }

  /* ---- points of interest: intersections, x-axis crossings, y-intercept ---- */

  // Find zeros of h(x) on the visible range by sign-change scan + bisection.
  function scanZeros(h, xl, xr, cb) {
    var steps = Math.max(64, Math.min(400, Math.floor(W / 4) || 200));
    var dx = (xr - xl) / steps;
    var px = xl, pv;
    try { pv = h(px); } catch (err) { pv = NaN; }
    for (var i = 1; i <= steps; i++) {
      var x = xl + i * dx, v;
      try { v = h(x); } catch (err) { v = NaN; }
      if (isFinite(pv) && isFinite(v) && pv * v <= 0 && !(pv === 0 && v === 0)) {
        var a = px, bnd = x, fa = pv;
        for (var k = 0; k < 45; k++) {
          var mid = (a + bnd) / 2, fm;
          try { fm = h(mid); } catch (err) { fm = NaN; }
          if (!isFinite(fm)) break;
          if (fa * fm <= 0) bnd = mid; else { a = mid; fa = fm; }
        }
        var root = (a + bnd) / 2, hv;
        try { hv = h(root); } catch (err) { hv = NaN; }
        // reject asymptote sign flips (tan, sec, ...): value must really be ~0
        if (isFinite(hv) && Math.abs(hv) < 1e-3) cb(root);
      }
      px = x; pv = v;
    }
  }

  // Interesting world-points on curve e within the current view.
  function poisFor(e, V) {
    var out = [];
    if (!e.parsed || e.parsed.type !== 'fn') return out;
    var f = e.parsed.fn;
    var xl = wx(-10), xr = wx(W + 10);
    var y0;
    try { y0 = f(0, V); } catch (err) { y0 = NaN; }
    if (0 >= xl && 0 <= xr && isFinite(y0)) out.push({ x: 0, y: y0 });
    scanZeros(function (x) { return f(x, V); }, xl, xr, function (x) { out.push({ x: x, y: 0 }); });
    exprs.forEach(function (o) {
      if (o === e || !o.visible || !o.parsed || o.error) return;
      if (o.parsed.type === 'fn') {
        var g = o.parsed.fn;
        scanZeros(function (x) { return f(x, V) - g(x, V); }, xl, xr, function (x) {
          var yv; try { yv = f(x, V); } catch (err) { yv = NaN; }
          if (isFinite(yv)) out.push({ x: x, y: yv });
        });
      } else if (o.parsed.type === 'vertical') {
        var xv2; try { xv2 = o.parsed.fx(0, V); } catch (err) { xv2 = NaN; }
        if (isFinite(xv2) && xv2 >= xl && xv2 <= xr) {
          var yv2; try { yv2 = f(xv2, V); } catch (err) { yv2 = NaN; }
          if (isFinite(yv2)) out.push({ x: xv2, y: yv2 });
        }
      }
    });
    return out;
  }

  // If the cursor is near an interesting point of e, return it (world coords).
  function poiSnap(e, mx, my, V) {
    var best = null, bd = 15;
    poisFor(e, V).forEach(function (p) {
      var d = Math.hypot(sx(p.x) - mx, sy(p.y) - my);
      if (d < bd) { bd = d; best = p; }
    });
    return best;
  }

  // Move the trace dot along expression e to the cursor position (snap-aware).
  function updateDragTrace(e, mx, my) {
    var V = sliderVars();
    if (e.parsed.type === 'vertical') {
      var xv;
      try { xv = e.parsed.fx(0, V); } catch (err) { return; }
      var wyv = snapStep > 0 ? snapRound(wy(my)) : wy(my);
      // snap to where visible curves cross this vertical line (and the x-axis)
      var cands = [0];
      exprs.forEach(function (o) {
        if (o === e || !o.visible || !o.parsed || o.error || o.parsed.type !== 'fn') return;
        var yv3; try { yv3 = o.parsed.fn(xv, V); } catch (err) { yv3 = NaN; }
        if (isFinite(yv3)) cands.push(yv3);
      });
      var snapped = false;
      cands.forEach(function (cy2) {
        if (Math.abs(sy(cy2) - my) < 13) { wyv = cy2; snapped = true; }
      });
      trace = { color: e.color, px: sx(xv), py: sy(wyv), wx: xv, wy: wyv, snapped: snapped };
    } else {
      var poi = poiSnap(e, mx, my, V);
      if (poi) {
        trace = { color: e.color, px: sx(poi.x), py: sy(poi.y), wx: poi.x, wy: poi.y, snapped: true };
      } else {
        var wxv = snapStep > 0 ? snapRound(wx(mx)) : wx(mx);
        var yv;
        try { yv = e.parsed.fn(wxv, V); } catch (err) { return; }
        if (!isFinite(yv)) return;
        trace = { color: e.color, px: sx(wxv), py: sy(yv), wx: wxv, wy: yv };
      }
    }
    requestDraw();
  }

  function computeHover() {
    if (learnActive) { trace = null; hoverPointId = null; hoverHandle = null; return; }
    if (dragTrace) return; // trace is being driven by the drag
    trace = null;
    hoverPointId = null;
    hoverHandle = null;
    if (!mouse.over || panning || dragPoint || dragShape) return;
    var hh = shapeHandleAt(mouse.x, mouse.y);
    if (hh) { hoverHandle = hh; return; }
    var V = sliderVars();
    var best = 26;
    var traceExpr = null;
    exprs.forEach(function (e) {
      if (!e.visible || !e.parsed) return;
      if (e.parsed.type === 'fn') {
        var mwx = wx(mouse.x);
        var yv;
        try { yv = e.parsed.fn(mwx, V); } catch (err) { return; }
        if (!isFinite(yv)) return;
        var pyv = sy(yv);
        var d = Math.abs(pyv - mouse.y);
        if (d < best) {
          best = d;
          traceExpr = e;
          trace = { color: e.color, px: mouse.x, py: pyv, wx: mwx, wy: yv };
        }
      } else if (e.parsed.type === 'point') {
        var pxv, pyv2;
        try { pxv = e.parsed.fx(0, V); pyv2 = e.parsed.fy(0, V); } catch (err) { return; }
        var d2 = Math.hypot(sx(pxv) - mouse.x, sy(pyv2) - mouse.y);
        if (d2 < 15) { hoverPointId = e.id; trace = null; traceExpr = null; }
      }
    });
    // magnet onto intersections / intercepts when hovering near one
    if (trace && traceExpr) {
      var poi = poiSnap(traceExpr, mouse.x, mouse.y, V);
      if (poi) {
        trace = { color: traceExpr.color, px: sx(poi.x), py: sy(poi.y), wx: poi.x, wy: poi.y, snapped: true };
      }
    }
  }

  function draw() {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = colors.bg;
    ctx.fillRect(0, 0, W, H);
    drawGrid();

    if (learnActive) {
      if (learnDrawFn) { try { learnDrawFn(ctx); } catch (err) {} }
      return;
    }

    var V = sliderVars();
    // shaded regions first, so curves and points stay crisp on top
    exprs.forEach(function (e) {
      if (!e.visible || !e.parsed || e.error) return;
      if (e.parsed.type === 'ineq') drawInequality(e, V, e.id === focusedId);
    });
    exprs.forEach(function (e) {
      if (!e.visible || !e.parsed || e.error) return;
      var hl = e.id === focusedId;
      if (e.parsed.type === 'fn') drawFn(e, V, hl);
      else if (e.parsed.type === 'vertical') drawVertical(e, V, hl);
      else if (e.parsed.type === 'point') drawPoint(e, V, hl, e.id === hoverPointId || (dragPoint && dragPoint.id === e.id));
    });

    // drag handles on top of curves
    exprs.forEach(function (e) { drawHandles(e); });
    drawRRAnim();

    if (trace) {
      ctx.fillStyle = colors.bg;
      ctx.strokeStyle = trace.color;
      ctx.lineWidth = 2.4;
      ctx.beginPath();
      ctx.arc(trace.px, trace.py, trace.snapped ? 6 : 4.6, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();
      if (trace.snapped) {
        ctx.beginPath();
        ctx.arc(trace.px, trace.py, 11, 0, Math.PI * 2);
        ctx.stroke();
      }
      drawTip(trace.px, trace.py, '(' + fmtNum(trace.wx) + ', ' + fmtNum(trace.wy) + ')');
    }

    canvas.classList.toggle('pt-hover', (!!hoverPointId || !!hoverHandle) && !dragPoint && !dragShape);
  }

  /* ================= CANVAS INTERACTION ================= */

  function zoomAt(px, py, factor) {
    var beforeX = wx(px), beforeY = wy(py);
    view.ppu = Math.max(1e-6, Math.min(300, view.ppu * factor));
    view.cx += beforeX - wx(px);
    view.cy += beforeY - wy(py);
    save();
    requestDraw();
  }

  function literalPointAt(px, py) {
    var V = sliderVars();
    var found = null;
    exprs.forEach(function (e) {
      if (!e.visible || !e.parsed || e.parsed.type !== 'point' || !e.parsed.literal) return;
      var d = Math.hypot(sx(e.parsed.literal.x) - px, sy(e.parsed.literal.y) - py);
      if (d < 14) found = e;
    });
    return found;
  }

  function setPointFromDrag(e, mx, my) {
    var nx = snapRound(wx(mx));
    var ny = snapRound(wy(my));
    nx = parseFloat(nx.toFixed(4));
    ny = parseFloat(ny.toFixed(4));
    setFieldText(e, '(' + nx + ', ' + ny + ')');
    reparse(e);
    save();
    requestDraw();
  }

  var lastPan = null;

  canvas.addEventListener('mousedown', function (ev) {
    if (ev.button !== 0) return;
    var r = canvas.getBoundingClientRect();
    var mx = ev.clientX - r.left, my = ev.clientY - r.top;
    if (learnActive) {
      if (learnDelegate && learnDelegate.down && learnDelegate.down(mx, my)) return;
      panning = true;
      canvas.classList.add('panning');
      lastPan = { x: ev.clientX, y: ev.clientY };
      return;
    }
    var sh = shapeHandleAt(mx, my);
    if (sh) { dragShape = startShapeDrag(sh); return; }
    var pt = literalPointAt(mx, my);
    if (pt) { dragPoint = pt; highlightRow(pt); return; }
    var cv = curveAt(mx, my);
    if (cv) {
      // slide the coordinate dot along the curve instead of panning
      dragTrace = { e: cv };
      highlightRow(cv);
      updateDragTrace(cv, mx, my);
      return;
    }
    panning = true;
    trace = null;
    hoverPointId = null;
    hoverHandle = null;
    canvas.classList.add('panning');
    lastPan = { x: ev.clientX, y: ev.clientY };
  });

  window.addEventListener('mousemove', function (ev) {
    var r = canvas.getBoundingClientRect();
    mouse.x = ev.clientX - r.left;
    mouse.y = ev.clientY - r.top;
    mouse.over = mouse.x >= 0 && mouse.x <= W && mouse.y >= 0 && mouse.y <= H;
    if (learnActive) {
      if (learnDelegate && learnDelegate.move && learnDelegate.move(mouse.x, mouse.y)) return;
      if (panning && lastPan) {
        view.cx -= (ev.clientX - lastPan.x) / view.ppu;
        view.cy += (ev.clientY - lastPan.y) / view.ppu;
        lastPan = { x: ev.clientX, y: ev.clientY };
        requestDraw();
      }
      return;
    }
    if (dragShape) { applyShapeDrag(dragShape, mouse.x, mouse.y); return; }
    if (dragPoint) { setPointFromDrag(dragPoint, mouse.x, mouse.y); return; }
    if (dragTrace) { updateDragTrace(dragTrace.e, mouse.x, mouse.y); return; }
    if (panning && lastPan) {
      view.cx -= (ev.clientX - lastPan.x) / view.ppu;
      view.cy += (ev.clientY - lastPan.y) / view.ppu;
      lastPan = { x: ev.clientX, y: ev.clientY };
      requestDraw();
      return;
    }
    computeHover();
    requestDraw();
  });

  window.addEventListener('mouseup', function () {
    if (learnActive && learnDelegate && learnDelegate.up) learnDelegate.up();
    if (panning || dragPoint || dragShape) save();
    panning = false;
    dragPoint = null;
    dragShape = null;
    dragTrace = null;
    canvas.classList.remove('panning');
    computeHover();
    requestDraw();
  });

  canvas.addEventListener('mouseleave', function () {
    mouse.over = false;
    trace = null;
    hoverPointId = null;
    requestDraw();
  });

  canvas.addEventListener('wheel', function (ev) {
    ev.preventDefault();
    var r = canvas.getBoundingClientRect();
    var factor = Math.pow(1.0015, -ev.deltaY);
    zoomAt(ev.clientX - r.left, ev.clientY - r.top, factor);
  }, { passive: false });

  canvas.addEventListener('dblclick', function (ev) {
    var r = canvas.getBoundingClientRect();
    zoomAt(ev.clientX - r.left, ev.clientY - r.top, 1.6);
  });

  /* touch: 1 finger pans (or drags a point), 2 fingers pinch-zoom */
  var touchState = null;

  canvas.addEventListener('touchstart', function (ev) {
    ev.preventDefault();
    var r = canvas.getBoundingClientRect();
    if (ev.touches.length === 1) {
      var t = ev.touches[0];
      var mx = t.clientX - r.left, my = t.clientY - r.top;
      if (learnActive) {
        if (learnDelegate && learnDelegate.down && learnDelegate.down(mx, my)) {
          touchState = { mode: 'learn' };
          return;
        }
        touchState = { mode: 'pan', x: t.clientX, y: t.clientY };
        return;
      }
      var sh = shapeHandleAt(mx, my);
      if (sh) { touchState = { mode: 'shape', drag: startShapeDrag(sh) }; return; }
      var pt = literalPointAt(mx, my);
      if (pt) { touchState = { mode: 'point', expr: pt }; return; }
      var cv = curveAt(mx, my);
      if (cv) {
        touchState = { mode: 'trace', expr: cv };
        highlightRow(cv);
        updateDragTrace(cv, mx, my);
        return;
      }
      trace = null;
      touchState = { mode: 'pan', x: t.clientX, y: t.clientY };
    } else if (ev.touches.length >= 2) {
      var a = ev.touches[0], b = ev.touches[1];
      touchState = {
        mode: 'pinch',
        dist: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
        cx: (a.clientX + b.clientX) / 2 - r.left,
        cy: (a.clientY + b.clientY) / 2 - r.top
      };
    }
  }, { passive: false });

  canvas.addEventListener('touchmove', function (ev) {
    ev.preventDefault();
    if (!touchState) return;
    var r = canvas.getBoundingClientRect();
    if (touchState.mode === 'learn' && ev.touches.length === 1) {
      var tl = ev.touches[0];
      if (learnDelegate && learnDelegate.move) learnDelegate.move(tl.clientX - r.left, tl.clientY - r.top);
    } else if (touchState.mode === 'shape' && ev.touches.length === 1) {
      var ts = ev.touches[0];
      applyShapeDrag(touchState.drag, ts.clientX - r.left, ts.clientY - r.top);
    } else if (touchState.mode === 'trace' && ev.touches.length === 1) {
      var tt = ev.touches[0];
      updateDragTrace(touchState.expr, tt.clientX - r.left, tt.clientY - r.top);
    } else if (touchState.mode === 'point' && ev.touches.length === 1) {
      var t = ev.touches[0];
      setPointFromDrag(touchState.expr, t.clientX - r.left, t.clientY - r.top);
    } else if (touchState.mode === 'pan' && ev.touches.length === 1) {
      var t1 = ev.touches[0];
      view.cx -= (t1.clientX - touchState.x) / view.ppu;
      view.cy += (t1.clientY - touchState.y) / view.ppu;
      touchState.x = t1.clientX;
      touchState.y = t1.clientY;
      requestDraw();
    } else if (touchState.mode === 'pinch' && ev.touches.length >= 2) {
      var a = ev.touches[0], b = ev.touches[1];
      var nd = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
      if (touchState.dist > 0) zoomAt(touchState.cx, touchState.cy, nd / touchState.dist);
      touchState.dist = nd;
    }
  }, { passive: false });

  canvas.addEventListener('touchend', function () {
    if (touchState && touchState.mode === 'learn' && learnDelegate && learnDelegate.up) learnDelegate.up();
    if (touchState && touchState.mode === 'trace') trace = null; // no hover on touch
    touchState = null;
    save();
    requestDraw();
  });

  /* graph buttons */
  $('zoomInBtn').addEventListener('click', function () { zoomAt(W / 2, H / 2, 1.4); });
  $('zoomOutBtn').addEventListener('click', function () { zoomAt(W / 2, H / 2, 1 / 1.4); });
  $('homeBtn').addEventListener('click', function () {
    view = { cx: 0, cy: 0, ppu: 50 };
    save();
    requestDraw();
  });

  /* ================= PANEL / HELP WIRING ================= */

  $('addExprBtn').addEventListener('click', function () { addExpr('', null, true); });
  $('panelPad').addEventListener('click', function () {
    var last = exprs[exprs.length - 1];
    if (last && last.text.trim() === '') beginEdit(last);
    else addExpr('', null, true);
  });

  var helpPop = $('helpPop');
  $('helpBtn').addEventListener('click', function () { helpPop.hidden = !helpPop.hidden; });
  $('helpClose').addEventListener('click', function () { helpPop.hidden = true; });
  document.addEventListener('keydown', function (ev) {
    if (ev.key === 'Escape') helpPop.hidden = true;
  });
  helpPop.querySelectorAll('.ex').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var last = exprs[exprs.length - 1];
      if (last && last.text.trim() === '') {
        setExprText(last, btn.getAttribute('data-ex'));
        renumber();
        refreshAllExtras();
        save();
      } else {
        addExpr(btn.getAttribute('data-ex'), null, false);
      }
    });
  });

  /* ---- snap control ---- */
  var snapSeg = $('snapSeg');
  function refreshSnapUI() {
    snapSeg.querySelectorAll('button[data-snap]').forEach(function (b) {
      b.classList.toggle('active', parseFloat(b.getAttribute('data-snap')) === snapStep);
    });
  }
  snapSeg.addEventListener('click', function (ev) {
    var b = ev.target.closest('button[data-snap]');
    if (!b) return;
    snapStep = parseFloat(b.getAttribute('data-snap')) || 0;
    try { localStorage.setItem('charts.snap', String(snapStep)); } catch (e) {}
    refreshSnapUI();
  });
  refreshSnapUI();

  /* ---- math keyboard (⌨): symbols + functions ---- */
  var kbdPop = $('kbdPop');
  var kbdBtn = $('kbdBtn');

  function insertTarget() {
    var t = (lastFocusedExpr && exprs.indexOf(lastFocusedExpr) > -1)
      ? lastFocusedExpr : exprs[exprs.length - 1];
    if (!t) t = addExpr('', null, false);
    return t;
  }

  // Keys drive the MathQuill field directly, so / builds a live stacked
  // fraction and ^ a live exponent, exactly like typing.
  function insertRaw(ins) {
    var target = insertTarget();
    if (!target.mq) return;
    var mq = target.mq;
    mq.focus();
    if (ins === '<=') mq.write('\\le');
    else if (ins === '>=') mq.write('\\ge');
    else if (ins === '()') mq.typedText('(');
    else if (ins === '||') mq.typedText('|');
    else if (ins === 'sqrt()') mq.typedText('sqrt');
    else if (ins === 'π') mq.typedText('pi');
    else mq.typedText(ins);
    mq.focus();
  }

  function insertFunctionKey(name) {
    var target = insertTarget();
    if (!target.mq) return;
    var mq = target.mq;
    mq.focus();
    var wasEmpty = target.text.trim() === '';
    if (wasEmpty) mq.typedText('y=');
    mq.typedText(name);
    mq.typedText('(');
    if (wasEmpty) {
      mq.typedText('x');
      mq.keystroke('Right');
    }
    mq.focus();
  }

  if (kbdBtn && kbdPop) {
    kbdBtn.addEventListener('click', function () {
      if (kbdPop.hidden) {
        var r = kbdBtn.getBoundingClientRect();
        kbdPop.style.top = (r.bottom + 6) + 'px';
        kbdPop.style.left = Math.max(8, r.left) + 'px';
        kbdPop.hidden = false;
      } else {
        kbdPop.hidden = true;
      }
    });
    kbdPop.querySelectorAll('button[data-fn], button[data-ins]').forEach(function (b) {
      b.addEventListener('mousedown', function (ev) { ev.preventDefault(); }); // keep input caret
      b.addEventListener('click', function () {
        var fn = b.getAttribute('data-fn');
        if (fn) insertFunctionKey(fn);
        else insertRaw(b.getAttribute('data-ins'), parseInt(b.getAttribute('data-back') || '0', 10));
      });
    });
    document.addEventListener('mousedown', function (ev) {
      if (!kbdPop.hidden && !kbdPop.contains(ev.target) && ev.target !== kbdBtn && !kbdBtn.contains(ev.target)) {
        kbdPop.hidden = true;
      }
    });
    document.addEventListener('keydown', function (ev) {
      if (ev.key === 'Escape') kbdPop.hidden = true;
    });
  }

  /* ---- sketch button: drop a draggable line onto the graph ---- */
  var sketchBtn = $('sketchBtn');
  if (sketchBtn) {
    sketchBtn.addEventListener('click', function () {
      // a line with slope 1 passing near the center of the current view
      var b = Math.round(view.cy - view.cx);
      var e = addExpr(buildLineText(1, b), null, false);
      e.hx1 = Math.round(view.cx - 3);
      e.hx2 = Math.round(view.cx + 3);
      highlightRow(e);
      e.lastAnimSig = e.shape ? (e.shape.m + '|' + e.shape.b) : '';
      playRiseRun(e);
      requestDraw();
    });
  }

  var themeSelect = $('themeSelect');
  themeSelect.addEventListener('change', function () { applyTheme(themeSelect.value); });

  /* ================= PUBLIC API (used by learn.js) ================= */

  window.Charts = {
    setLearnMode: function (active, drawFn, delegate) {
      learnActive = !!active;
      learnDrawFn = drawFn || null;
      learnDelegate = delegate || null;
      trace = null;
      hoverPointId = null;
      hoverHandle = null;
      dragTrace = null;
      dragShape = null;
      dragPoint = null;
      document.body.classList.toggle('learn-mode', learnActive);
      resize();
      requestDraw();
    },
    redraw: requestDraw,
    view: function () { return { cx: view.cx, cy: view.cy, ppu: view.ppu }; },
    setView: function (v) {
      view = { cx: v.cx, cy: v.cy, ppu: v.ppu };
      requestDraw();
    },
    toScreen: function (wxv, wyv) { return { x: sx(wxv), y: sy(wyv) }; },
    toWorld: function (px, py) { return { x: wx(px), y: wy(py) }; },
    size: function () { return { w: W, h: H }; },
    colors: function () { return colors; },
    snap: function () { return snapStep; },
    fmt: fmtNum,
    setCursor: function (c) { canvas.style.cursor = c || ''; },
    // current expression texts (used by tests/tooling)
    texts: function () { return exprs.map(function (e) { return e.text; }); },
    // Parse "y = ..." style text; return {m, b} if it is a straight line, else null.
    linearOf: function (text) {
      try {
        var p = parseRow(text);
        if (!p || p.type !== 'fn' || (p.uses && p.uses.length)) return null;
        var y0 = p.fn(0, {}), y1 = p.fn(1, {}), y7 = p.fn(7.3, {});
        if (![y0, y1, y7].every(isFinite)) return null;
        var m = y1 - y0;
        if (Math.abs(y7 - (y0 + 7.3 * m)) > 1e-6 * (1 + Math.abs(y7))) return null;
        return { m: m, b: y0 };
      } catch (err) { return null; }
    }
  };

  /* ================= INIT ================= */

  function init() {
    var savedTheme = 'dark-plus';
    try { savedTheme = localStorage.getItem('themeKey') || 'dark-plus'; } catch (e) {}
    if (!THEME_MAP[savedTheme]) savedTheme = 'dark-plus';
    themeSelect.value = savedTheme;
    applyTheme(savedTheme);

    var saved = null;
    try { saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'); } catch (e) {}
    if (saved && saved.exprs && saved.exprs.length) {
      saved.exprs.forEach(function (se) {
        var e = addExpr(se.text || '', null, false);
        if (se.color) e.color = se.color;
        if (se.visible === false) e.visible = false;
        syncRow(e);
      });
      if (saved.view && isFinite(saved.view.ppu) && saved.view.ppu > 0) view = saved.view;
      refreshAllExtras();
    } else {
      addExpr('y = x^2', null, false);
      addExpr('', null, false);
    }

    if (typeof ResizeObserver !== 'undefined') {
      new ResizeObserver(resize).observe(graphEl);
    }
    window.addEventListener('resize', resize);
    resize();
  }

  init();
})();