feat: add Calculator & Grapher tool

Adds a full-featured mathematical calculator and interactive function
grapher at /calculate. Powered by Math.js v15 with a HiDPI Canvas
renderer for the graph.

- Evaluates arbitrary math expressions (trig, log, complex, matrices,
  factorials, combinatorics, and more) with named variable scope
- Persists history (50 entries) and variables via localStorage
- 32 quick-insert buttons for constants and functions
- Interactive graph: pan (drag), zoom (scroll), crosshair tooltip
  showing cursor coords and f₁(x)…f₈(x) values simultaneously
- Up to 8 color-coded functions with inline color pickers and
  visibility toggles
- Discontinuity detection for functions like tan(x)
- Adaptive grid labels that rescale with zoom
- Responsive layout: 2/5–3/5 split on desktop, tabbed on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/calculate/GraphPanel.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { Plus, Eye, EyeOff, Trash2 } from 'lucide-react';
+import { useCalculateStore } from '@/lib/calculate/store';
+import { cn } from '@/lib/utils';
+import GraphCanvas from './GraphCanvas';
+
+export function GraphPanel() {
+  const {
+    graphFunctions,
+    variables,
+    addGraphFunction,
+    updateGraphFunction,
+    removeGraphFunction,
+  } = useCalculateStore();
+
+  return (
+    <div className="flex flex-col gap-3 h-full min-h-0">
+
+      {/* ── Function list ────────────────────────────────────── */}
+      <div className="glass rounded-xl p-3 shrink-0">
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+            Functions  <span className="text-muted-foreground/40 normal-case font-normal">— use x as variable</span>
+          </span>
+          <button
+            onClick={addGraphFunction}
+            disabled={graphFunctions.length >= 8}
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-primary transition-colors disabled:opacity-30"
+          >
+            <Plus className="w-3.5 h-3.5" /> Add
+          </button>
+        </div>
+
+        <div className="space-y-2">
+          {graphFunctions.map((fn, i) => (
+            <div key={fn.id} className="flex items-center gap-2">
+
+              {/* Color swatch / color picker */}
+              <div className="relative shrink-0 w-4 h-4">
+                <div
+                  className="w-4 h-4 rounded-full ring-1 ring-white/15 cursor-pointer"
+                  style={{ background: fn.color }}
+                />
+                <input
+                  type="color"
+                  value={fn.color}
+                  onChange={(e) => updateGraphFunction(fn.id, { color: e.target.value })}
+                  className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
+                  title="Change color"
+                />
+              </div>
+
+              {/* Index label */}
+              <span
+                className="text-xs font-mono shrink-0 w-6"
+                style={{ color: fn.visible ? fn.color : 'rgba(161,161,170,0.4)' }}
+              >
+                f{i + 1}
+              </span>
+
+              {/* Expression input */}
+              <input
+                value={fn.expression}
+                onChange={(e) => updateGraphFunction(fn.id, { expression: e.target.value })}
+                placeholder={i === 0 ? 'sin(x)' : i === 1 ? 'x^2 / 4' : 'f(x)…'}
+                className={cn(
+                  'flex-1 min-w-0 bg-transparent border border-border/35 rounded px-2 py-1',
+                  'text-sm font-mono outline-none transition-colors',
+                  'placeholder:text-muted-foreground/30',
+                  'focus:border-primary/50',
+                  !fn.visible && 'opacity-40'
+                )}
+              />
+
+              {/* Visibility toggle */}
+              <button
+                onClick={() => updateGraphFunction(fn.id, { visible: !fn.visible })}
+                className={cn(
+                  'shrink-0 transition-colors',
+                  fn.visible
+                    ? 'text-muted-foreground hover:text-foreground'
+                    : 'text-muted-foreground/25 hover:text-muted-foreground'
+                )}
+                title={fn.visible ? 'Hide' : 'Show'}
+              >
+                {fn.visible ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
+              </button>
+
+              {/* Delete */}
+              {graphFunctions.length > 1 && (
+                <button
+                  onClick={() => removeGraphFunction(fn.id)}
+                  className="shrink-0 text-muted-foreground/30 hover:text-destructive transition-colors"
+                  title="Remove"
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Canvas ───────────────────────────────────────────── */}
+      <div className="glass rounded-xl overflow-hidden flex-1 min-h-0">
+        <GraphCanvas functions={graphFunctions} variables={variables} />
+      </div>
+
+      {/* ── Hint bar ─────────────────────────────────────────── */}
+      <p className="text-[10px] text-muted-foreground/35 text-center shrink-0 pb-1">
+        Drag to pan &nbsp;·&nbsp; Scroll to zoom &nbsp;·&nbsp; Hover for coordinates
+      </p>
+
+    </div>
+  );
+}