feat(widgets): bundle mathjs and uPlot for graphing widgets

package.json

@@ -119,6 +119,7 @@
 		"katex": "0.18.4",
 		"linkedom": "0.18.13",
 		"lucide-react": "^1.31.0",
+		"mathjs": "^15.2.0",
 		"mermaid": "11.16.1",
 		"motion": "^13.1.0",
 		"nanoid": "^6.0.1",
@@ -144,6 +145,7 @@
 		"tw-animate-css": "^1.4.0",
 		"unified": "^11.0.5",
 		"unist-util-visit": "^5.1.0",
+		"uplot": "^1.6.32",
 		"y-indexeddb": "9.0.12",
 		"y-partyserver": "^2.2.0",
 		"y-protocols": "^1.0.7",

scripts/copy-widget-libs.mjs

@@ -1,42 +1,57 @@
 /*
- * Copies KaTeX's browser build into public/ so sandboxed widget iframes can
- * load it.
+ * Copies the browser builds of the widget libraries into public/ so sandboxed
+ * widget iframes can load them.
  *
  * Widgets run in an opaque-origin iframe under a strict CSP with no network
  * access, so they cannot pull anything from a CDN — the assets have to be
- * served from this app's own origin. KaTeX's stylesheet references its fonts
- * relatively (`url(fonts/...)`), so the whole directory is copied verbatim
- * rather than passed through the bundler.
+ * served from this app's own origin. Each build is copied verbatim rather than
+ * passed through the bundler, so relative asset references (KaTeX fonts, uPlot
+ * styles) keep working.
  *
- * Runs from `prepare`, which keeps the copy in lockstep with the installed
- * katex version. The output is generated, not committed.
+ * Runs from `prepare`, which keeps the copies in lockstep with the installed
+ * versions. The output is generated, not committed.
  */
 import { cp, mkdir, rm } from "node:fs/promises";
 import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const require = createRequire(import.meta.url);
-const katexDist = dirname(require.resolve("katex/dist/katex.min.js"));
-const outDir = join(
-	dirname(fileURLToPath(import.meta.url)),
-	"..",
-	"public",
-	"widget-libs",
-	"katex",
-);
+const widgetLibsDir = join(dirname(fileURLToPath(import.meta.url)), "..", "public", "widget-libs");
 
-await rm(outDir, { recursive: true, force: true });
-await mkdir(outDir, { recursive: true });
+// Each entry names a library, the directory its browser build sits in, and the
+// files to copy from there. All three are CSP-safe: none use eval or
+// new Function, so the frame needs no script-src 'unsafe-eval'.
+const libraries = [
+	{
+		name: "katex",
+		from: dirname(require.resolve("katex/dist/katex.min.js")),
+		// Chemistry (\ce) and units (\pu), matching what chat and documents import.
+		entries: ["katex.min.css", "katex.min.js", "fonts", "contrib/mhchem.min.js"],
+	},
+	{
+		// mathjs parses and evaluates the expressions a graphing widget plots.
+		name: "mathjs",
+		from: dirname(require.resolve("mathjs/lib/browser/math.js")),
+		entries: ["math.js", "math.js.LICENSE.txt"],
+	},
+	{
+		// uPlot draws the axes, grid, and lines a graphing widget would otherwise
+		// hand-roll in SVG.
+		name: "uplot",
+		from: dirname(require.resolve("uplot/dist/uPlot.iife.min.js")),
+		entries: ["uPlot.iife.min.js", "uPlot.min.css"],
+	},
+];
 
-for (const entry of [
-	"katex.min.css",
-	"katex.min.js",
-	"fonts",
-	// Chemistry (\ce) and units (\pu), matching what chat and documents import.
-	"contrib/mhchem.min.js",
-]) {
-	await cp(join(katexDist, entry), join(outDir, entry), { recursive: true });
-}
+for (const library of libraries) {
+	const outDir = join(widgetLibsDir, library.name);
+	await rm(outDir, { recursive: true, force: true });
+	await mkdir(outDir, { recursive: true });
+
+	for (const entry of library.entries) {
+		await cp(join(library.from, entry), join(outDir, entry), { recursive: true });
+	}
 
-console.log(`Copied KaTeX browser build to ${outDir}`);
+	console.log(`Copied ${library.name} browser build to ${outDir}`);
+}

src/features/workspaces/ai/skill-tools.ts

@@ -3,6 +3,7 @@ import { z } from "zod";
 
 import { defineAIThreadTool } from "#/features/workspaces/ai/ai-thread-tool";
 import widgetAuthoringCanvas from "#/features/workspaces/ai/skills/widget-authoring/references/canvas.md?raw";
+import widgetAuthoringGraphing from "#/features/workspaces/ai/skills/widget-authoring/references/graphing.md?raw";
 import widgetAuthoringStarter from "#/features/workspaces/ai/skills/widget-authoring/references/starter.md?raw";
 import widgetAuthoringSkill from "#/features/workspaces/ai/skills/widget-authoring/SKILL.md?raw";
 
@@ -19,6 +20,7 @@ import widgetAuthoringSkill from "#/features/workspaces/ai/skills/widget-authori
 const BUNDLED_SKILLS = {
 	"widget-authoring": parseSkillMarkdown(widgetAuthoringSkill, {
 		"references/canvas.md": widgetAuthoringCanvas,
+		"references/graphing.md": widgetAuthoringGraphing,
 		"references/starter.md": widgetAuthoringStarter,
 	}),
 } as const;

src/features/workspaces/ai/skills/widget-authoring/SKILL.md

@@ -37,8 +37,9 @@ Bundled references are included below; consult them when they apply:
 
 - For a new widget or a ground-up rebuild, follow `references/starter.md` before writing source.
 - For any `<canvas>` drawing, follow `references/canvas.md` before writing source.
+- For a function graph, follow `references/graphing.md` before writing source.
 
-Use the document tool's HTML math markup. The runtime renders matching math elements when they are added or changed. KaTeX is the only bundled library; create other diagrams and charts with inline SVG or canvas.
+Use the document tool's HTML math markup. The runtime renders matching math elements when they are added or changed. Three libraries are bundled: KaTeX for math markup, `math` (mathjs) to parse and evaluate expressions, and `uPlot` to plot function graphs with axes and a grid. Reference a library only when the widget needs it. Create other diagrams and charts with inline SVG or canvas.
 
 ## Edit