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>
This commit is contained in:
2026-02-28 20:44:53 +01:00
parent aa890a0d55
commit 9efa783ca3
11 changed files with 1249 additions and 1 deletions

View File

@@ -66,3 +66,15 @@ export const QRCodeIcon = (props: React.SVGProps<SVGSVGElement>) => (
<line x1="18" y1="14" x2="18" y2="17" strokeWidth={2} />
</svg>
);
export const CalculateIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
{/* Y-axis */}
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 20V4" />
{/* X-axis */}
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 20h16" />
{/* Smooth curve resembling sin/cos */}
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M4 14c1.5-3 3-7 5-5s2 8 4 6 3-6 5-5" />
</svg>
);