interactive-markdown 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # Interactive Markdown (IVM)
 
-**Interactive Markdown** is a small browser **editor + renderer** for plain `.md` files that include live **vector graphics** driven by sliders, timers, and a safe expression language, plus a **graph editor** stored in the same fence.
+**Interactive Markdown** is a small browser **editor + renderer** for plain `.md` files that include live **vector graphics** driven by sliders, timers, and a safe expression language, plus **Cartesian XY plots** and a **graph editor** stored in the same fence.
 
 Write Markdown as usual. Add an `ivm` fenced block when you want interactive SVG or a directed graph you can edit in the preview. The format stays AI-friendly: readable text an agent can generate like normal Markdown.
 
@@ -15,6 +15,7 @@ License: **MIT** (see [LICENSE](LICENSE)).
 - Derived values with `@let` (agents should emit `@let`, not `@calc`)
 - SVG templates with `{{expr}}` bindings
 - Slim `@svg WxH` wrapper for compact markup
+- **XY plots**: `@plot`, `@axis`, and `@series` with live slider-driven curves
 - Visual **graph editor**: `@graph`, `@node`, and `@edge` (drag, connect, rename; edits write back into the fence)
 - Animated SVG: CSS `@keyframes`, SMIL, glow filters, and internal `<use>`
 - Whitelist expression evaluator (no `eval`)
@@ -43,7 +44,7 @@ npx serve .
 
 ## Graph editor tab
 
-The left pane has two tabs. **Source** is the markdown. **Graph editor** shows the same document with prose rendered as formatted text. Sliders, timers, text fields, toggles, formulas, shapes, and graphs stay as blocks. Select a block to edit its label, range, expression, or shape attributes. A shape attribute can be a number or `{{name}}`. The graph block is the canvas: drag, connect, and rename there. An animated graph marches dashes along each edge and sends a dot along the same path. Each change rewrites the source. The right pane is the rendered preview.
+The left pane has two tabs. **Source** is the markdown. **Graph editor** shows the same document with prose rendered as formatted text. Sliders, timers, text fields, toggles, formulas, shapes, XY plots, and graphs stay as blocks. Select a block to edit its label, range, expression, or shape attributes. A shape attribute can be a number or `{{name}}`. The graph block is the canvas: drag, connect, and rename there. An animated graph marches dashes along each edge and sends a dot along the same path. Each change rewrites the source. The right pane is the rendered preview.
 
 ## IVM dialect (quick reference)
 
@@ -75,6 +76,10 @@ Fence name: **`ivm`**. Long control names are canonical; short aliases are accep
 | `@ns name` | Share variable state across IVM blocks with the same name |
 | `@svg` | Everything after this line is full SVG markup |
 | `@svg WxH` | Same, but wrap non-root markup in `<svg viewBox="0 0 W H" xmlns=…>` |
+| `@plot [WxH] [grid\|nogrid]` | Cartesian XY plot (mutually exclusive with `@svg` / `@graph`) |
+| `@axis x\|y: min..max [step=S] ["Label"]` | Plot axis range and label |
+| `@series [id] …` / `y = expr` | Plot series (free var `x`) |
+| `@grid on\|off` | Plot grid toggle |
 | `@graph` | Start an editable directed graph. This is the first directive in that fence |
 | `@node id: "Label" x=N y=N kind=K` | Node. `kind` is `action` (default), `input`, `output`, or `decision` |
 | `@edge from -> to` | Directed edge. Add `from=top\|right\|bottom\|left` and `to=top\|right\|bottom\|left` to choose the sides. Defaults are `from=right` and `to=left` |
@@ -112,6 +117,32 @@ A fence that starts with `@graph` is a node-and-edge diagram. The preview is the
 ```
 ````
 
+
+### XY plot
+
+A fence that starts with `@plot` draws a Cartesian chart. Axes, grid, and series are declared in the dialect; the renderer builds the SVG. Sliders and `@let` work the same as in figure blocks. Free variable `x` is sampled across the X axis when evaluating each series. Do not mix `@svg` or `@graph` into the same fence.
+
+````markdown
+```ivm
+@plot
+@axis x: -10..10 step=2 "x"
+@axis y: 0..0.8 step=0.2 "density"
+@slider mu: -5..5 = 0 step=0.1 "μ (mean)"
+@slider sigma: 0.5..4 = 1.5 step=0.1 "σ (std dev)"
+@series density stroke=#6d28d9 fill=#7c3aed fillOpacity=0.25
+  y = (1/(sigma*sqrt(2*pi))) * exp(-0.5*((x-mu)/sigma)^2)
+```
+````
+
+| Line | Meaning |
+|------|---------|
+| `@plot [WxH] [grid\|nogrid]` | Start an XY plot (default size 480×320, grid on) |
+| `@axis x\|y: min..max [step=S] ["Label"]` | Axis range, tick step, and title |
+| `@series [id] [stroke=#…] [fill=#…] [fillOpacity=N] [width=N]` | Curve style; next line (or same line) `y = expr` |
+| `@grid on\|off` | Toggle the background grid |
+
+Defaults: grid **on**, fill opacity **0.25**, stroke `#6d28d9`, fill `#7c3aed`.
+
 ### Expressions (`{{…}}`)
 
 Placeholders use **double braces** only: `{{expr}}`.
@@ -151,6 +182,7 @@ Load from the toolbar **Examples…** menu, or open the files directly:
 - [`examples/circular-motion.md`](examples/circular-motion.md) — point on a circle with spin animation
 - [`examples/agent-loop.md`](examples/agent-loop.md) — agent loop drawn as an animated graph
 - [`examples/graph.md`](examples/graph.md) — directed graph you can edit in the preview
+- [`examples/normal-density.md`](examples/normal-density.md) — Gaussian density XY plot with μ/σ sliders
 
 ## Project layout
 
@@ -167,6 +199,7 @@ src/
   sanitize-svg.js   SVG sanitizer
   render.js         Controls + SVG binding
   graph-editor.js   Graph model and canvas editor
+  plot.js           Cartesian XY plot SVG builder
 styles/app.css
 examples/
 test/               Node smoke tests
@@ -178,7 +211,7 @@ test/               Node smoke tests
 npm test
 ```
 
-Smoke tests cover the expression engine, IVM parser, SVG sanitizer, renderer, Markdown pipeline, graph editor, and preview document builder (`linkedom` is used where a DOM is required).
+Smoke tests cover the expression engine, IVM parser, SVG sanitizer, renderer, Markdown pipeline, graph editor, XY plots, and preview document builder (`linkedom` is used where a DOM is required).
 
 ## License
 

package/examples/normal-density.md

@@ -0,0 +1,19 @@
+# Normal density
+
+A Cartesian **XY plot** of the Gaussian PDF. Drag **μ (mean)** and **σ (std dev)** — the curve recomputes live.
+
+```ivm
+@plot
+@axis x: -10..10 step=2 "x"
+@axis y: 0..0.8 step=0.2 "density"
+@slider mu: -5..5 = 0 step=0.1 "μ (mean)"
+@slider sigma: 0.5..4 = 1.5 step=0.1 "σ (std dev)"
+@series density stroke=#6d28d9 fill=#7c3aed fillOpacity=0.25
+  y = (1/(sigma*sqrt(2*pi))) * exp(-0.5*((x-mu)/sigma)^2)
+```
+
+## Tips
+
+- `@plot` builds axes, grid, and series — no hand-written SVG required.
+- Series expressions use free variable `x` plus any `@slider` / `@let` names.
+- Omit `nogrid` to keep the light gray grid (default on).

package/index.html

@@ -23,6 +23,7 @@
           <option value="circular-motion.md">circular-motion.md</option>
           <option value="agent-loop.md">agent-loop.md</option>
           <option value="graph.md">graph.md</option>
+          <option value="normal-density.md">normal-density.md</option>
         </select>
         <input id="file-input" type="file" accept=".md,text/markdown,text/plain" />
       </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "interactive-markdown",
-  "version": "0.2.0",
-  "description": "Interactive Markdown (IVM): plain .md with live SVG, a preview block builder, and an editable graph",
+  "version": "0.3.0",
+  "description": "Interactive Markdown (IVM): plain .md with live SVG, XY plots, a preview block builder, and an editable graph",
   "main": "./src/index.js",
   "directories": {
     "example": "examples",
@@ -9,14 +9,15 @@
   },
   "scripts": {
     "start": "serve .",
-    "test": "node test/smoke-expr.mjs && node test/smoke-parse-ivm.mjs && node test/smoke-sanitize-svg.mjs && node test/smoke-render.mjs && node test/smoke-markdown.mjs && node test/smoke-graph.mjs && node test/smoke-document.mjs",
+    "test": "node test/smoke-expr.mjs && node test/smoke-parse-ivm.mjs && node test/smoke-sanitize-svg.mjs && node test/smoke-render.mjs && node test/smoke-markdown.mjs && node test/smoke-graph.mjs && node test/smoke-plot.mjs && node test/smoke-document.mjs",
     "test:expr": "node test/smoke-expr.mjs",
     "test:parse": "node test/smoke-parse-ivm.mjs",
     "test:sanitize": "node test/smoke-sanitize-svg.mjs",
     "test:render": "node test/smoke-render.mjs",
     "test:markdown": "node test/smoke-markdown.mjs",
     "test:graph": "node test/smoke-graph.mjs",
-    "test:document": "node test/smoke-document.mjs"
+    "test:document": "node test/smoke-document.mjs",
+    "test:plot": "node test/smoke-plot.mjs"
   },
   "repository": {
     "type": "git",
@@ -49,7 +50,8 @@
     "./parse-ivm": "./src/parse-ivm.js",
     "./sanitize-svg": "./src/sanitize-svg.js",
     "./render": "./src/render.js",
-    "./markdown": "./src/markdown.js"
+    "./markdown": "./src/markdown.js",
+    "./plot": "./src/plot.js"
   },
   "files": [
     "src",

package/src/document-editor.js

@@ -14,6 +14,9 @@ import {
   updateBlock,
   updateControl,
   updateShape,
+  updatePlotAxis,
+  updatePlotSeries,
+  updatePlotMeta,
   NAME_RE,
 } from "./document.js";
 import { mountGraphEditor } from "./graph-editor.js";
@@ -50,6 +53,7 @@ const ADD_GROUPS = [
       ["shape", "Shape: line", "line"],
       ["shape", "Shape: path", "path"],
       ["shape", "Shape: text", "text"],
+      ["plot", "XY plot"],
       ["graph", "Graph"],
     ],
   },
@@ -124,7 +128,7 @@ export function mountDocumentEditor(container, source, options = {}) {
 
   const empty = docEl.createElement("p");
   empty.className = "im-doc-empty";
-  empty.textContent = "Drag from Add to place a heading, a control, a shape, or a graph.";
+  empty.textContent = "Drag from Add to place a heading, a control, a shape, a plot, or a graph.";
 
   const blocksEl = docEl.createElement("div");
   blocksEl.className = "im-doc-blocks";
@@ -185,12 +189,12 @@ export function mountDocumentEditor(container, source, options = {}) {
       prose = [];
     };
     for (const block of doc.blocks) {
-      if (block.type === "figure" || block.type === "graph") {
+      if (block.type === "figure" || block.type === "graph" || block.type === "plot") {
         flush();
         const el = renderBlock(block);
         el.dataset.at = String(index);
         el.dataset.atEnd = String(index + 1);
-        if (block.type === "figure") el.dataset.figureId = block.id;
+        if (block.type === "figure" || block.type === "plot") el.dataset.figureId = block.id;
         blocksEl.appendChild(el);
         index++;
       } else {
@@ -319,6 +323,62 @@ export function mountDocumentEditor(container, source, options = {}) {
       }
       return box;
     }
+    if (block.type === "plot") {
+      const ns = input("text", block.namespace || "");
+      ns.dataset.field = "namespace";
+      box.appendChild(field("Shared name", ns));
+      const grid = input("checkbox", "");
+      grid.checked = block.plot?.grid !== false;
+      grid.dataset.field = "plotGrid";
+      box.appendChild(field("Grid", grid));
+      for (const which of ["x", "y"]) {
+        const axis = block.plot?.[which] || {};
+        const group = docEl.createElement("fieldset");
+        group.className = "im-doc-sub";
+        const legend = docEl.createElement("legend");
+        legend.textContent = which.toUpperCase() + " axis";
+        group.appendChild(legend);
+        for (const [key, value, title] of [
+          ["min", axis.min, "Min"],
+          ["max", axis.max, "Max"],
+          ["step", axis.step, "Step"],
+          ["label", axis.label || "", "Label"],
+        ]) {
+          const el = input(key === "label" ? "text" : "number", value ?? "");
+          el.dataset.plotAxis = which;
+          el.dataset.field = key;
+          group.appendChild(field(title, el));
+        }
+        box.appendChild(group);
+      }
+      (block.plot?.series || []).forEach((series, index) => {
+        const group = docEl.createElement("fieldset");
+        group.className = "im-doc-sub";
+        const legend = docEl.createElement("legend");
+        legend.textContent = "Series" + (series.id ? ` ${series.id}` : "");
+        group.appendChild(legend);
+        const expr = textarea(series.expression || "", 3);
+        expr.dataset.plotSeries = String(index);
+        expr.dataset.field = "expression";
+        group.appendChild(field("y =", expr));
+        for (const [key, value, title] of [
+          ["stroke", series.stroke || "", "Stroke"],
+          ["fill", series.fill || "", "Fill"],
+          ["fillOpacity", series.fillOpacity ?? 0.25, "Fill opacity"],
+          ["width", series.width ?? 2.25, "Width"],
+        ]) {
+          const el = input(key === "stroke" || key === "fill" ? "text" : "number", value);
+          el.dataset.plotSeries = String(index);
+          el.dataset.field = key;
+          group.appendChild(field(title, el));
+        }
+        box.appendChild(group);
+      });
+      (block.controls || []).forEach((control, index) => {
+        box.appendChild(renderControl(control, index));
+      });
+      return box;
+    }
     if (block.type === "figure") {
       const ns = input("text", block.namespace || "");
       ns.dataset.field = "namespace";
@@ -511,7 +571,7 @@ export function mountDocumentEditor(container, source, options = {}) {
   function refreshFigure(id) {
     const block = doc.blocks.find((b) => b.id === id);
     const host = blocksEl.querySelector(`.im-doc-block[data-id="${id}"] .im-doc-live-host`);
-    if (!block || block.type !== "figure" || !host) return;
+    if (!block || (block.type !== "figure" && block.type !== "plot") || !host) return;
     const prev = mounts.get(id);
     if (prev) {
       prev.destroy();
@@ -729,6 +789,15 @@ export function mountDocumentEditor(container, source, options = {}) {
       commit();
       return;
     }
+    if (feature === "plot") {
+      const at = placement && !placement.figureId ? placement.at : undefined;
+      const result = insertFeature(doc, "plot", { at });
+      doc = result.doc;
+      selectedId = result.focusId || selectedId;
+      paint();
+      commit();
+      return;
+    }
     if (feature === "shape" && !shapeType) shapeType = "rect";
     /** @type {string | undefined} */
     let figureId;
@@ -739,7 +808,7 @@ export function mountDocumentEditor(container, source, options = {}) {
       at = figureId ? undefined : placement.at;
     } else {
       const selected = doc.blocks.find((b) => b.id === selectedId);
-      figureId = selected && selected.type === "figure" ? selected.id : undefined;
+      figureId = selected && (selected.type === "figure" || selected.type === "plot") ? selected.id : undefined;
     }
     const result = insertFeature(doc, feature, { figureId, shapeType, at });
     doc = result.doc;
@@ -864,6 +933,42 @@ export function mountDocumentEditor(container, source, options = {}) {
       commit();
       return;
     }
+    if (fieldName === "plotGrid") {
+      doc = { blocks: updatePlotMeta(doc, id, { grid: !!el.checked }).blocks };
+      refreshFigure(id);
+      commit();
+      return;
+    }
+    if (el.dataset.plotAxis) {
+      const which = el.dataset.plotAxis;
+      const patch = {};
+      if (fieldName === "label") patch.label = el.value;
+      else {
+        const n = Number(el.value);
+        if (!Number.isFinite(n)) return;
+        if (fieldName === "step" && n <= 0) return;
+        patch[fieldName] = n;
+      }
+      doc = { blocks: updatePlotAxis(doc, id, which, patch).blocks };
+      refreshFigure(id);
+      commit();
+      return;
+    }
+    if (el.dataset.plotSeries != null) {
+      const index = Number(el.dataset.plotSeries);
+      const patch = {};
+      if (fieldName === "expression" || fieldName === "stroke" || fieldName === "fill") {
+        patch[fieldName] = el.value;
+      } else {
+        const n = Number(el.value);
+        if (!Number.isFinite(n)) return;
+        patch[fieldName] = n;
+      }
+      doc = { blocks: updatePlotSeries(doc, id, index, patch).blocks };
+      refreshFigure(id);
+      commit();
+      return;
+    }
     if (fieldName === "viewBox") {
       doc = { blocks: updateBlock(doc, id, { viewBox: el.value }).blocks };
       refreshFigure(id);
@@ -938,6 +1043,7 @@ function kindLabel(block) {
   if (block.type === "bullets") return "Bullets";
   if (block.type === "markdown") return "Markdown";
   if (block.type === "graph") return "Graph";
+  if (block.type === "plot") return "XY plot";
   if (block.type === "figure" && block.customSvg) return "Animated figure";
   if (block.type === "figure") return "Figure";
   return "Block";

package/src/document.js

@@ -5,6 +5,7 @@
 
 import { parseIvm, splitIvmFences } from "./parse-ivm.js";
 import { quoteGraphLabel, serializeGraph } from "./graph-editor.js";
+import { normalizePlot, serializePlotLines } from "./plot.js";
 
 /** @typedef {'rect'|'circle'|'ellipse'|'line'|'path'|'text'} ShapeType */
 /** @typedef {{ type: ShapeType, attrs: Record<string, string> }} Shape */
@@ -76,6 +77,26 @@ export function serializeDocument(blocks) {
 export function serializeFigure(block) {
   if (!block) return "\n";
   if (block.type === "graph") return serializeGraph(block.model || { nodes: [], edges: [] });
+  if (block.type === "plot") {
+    const rebuilt = [];
+    if (block.namespace) rebuilt.push(`@ns ${block.namespace}`);
+    const plotLines = serializePlotLines(normalizePlot(block.plot || {}));
+    const preamble = [];
+    const series = [];
+    let sawSeries = false;
+    for (const line of plotLines) {
+      if (/^@series\b/i.test(line)) sawSeries = true;
+      if (sawSeries) series.push(line);
+      else preamble.push(line);
+    }
+    rebuilt.push(...preamble);
+    for (const control of block.controls || []) {
+      const line = serializeControl(control);
+      if (line) rebuilt.push(line);
+    }
+    rebuilt.push(...series);
+    return rebuilt.join("\n").replace(/\s*$/, "\n");
+  }
   if (block.type !== "figure") return "\n";
   const lines = [];
   if (block.namespace) lines.push(`@ns ${block.namespace}`);
@@ -133,6 +154,8 @@ export function insertFeature(doc, feature, options = {}) {
       fig.shapes = [shape];
       place(fig);
     }
+  } else if (feature === "plot") {
+    place(emptyPlot());
   } else if (feature === "slider" || feature === "timer" || feature === "input" || feature === "toggle" || feature === "formula") {
     const kind = feature === "formula" ? "let" : feature;
     const control = defaultControl(kind, nextControlName(blocks, CONTROL_PREFIX[kind]));
@@ -198,7 +221,7 @@ export function updateControl(doc, blockId, index, patch) {
   return {
     blocks: (doc?.blocks || []).map((b) => {
       const copy = cloneBlock(b);
-      if (copy.id === blockId && copy.type === "figure" && copy.controls[index]) {
+      if (copy.id === blockId && (copy.type === "figure" || copy.type === "plot") && copy.controls[index]) {
         copy.controls[index] = cloneControl({ ...copy.controls[index], ...patch });
       }
       return copy;
@@ -216,7 +239,7 @@ export function removeControl(doc, blockId, index) {
   return {
     blocks: (doc?.blocks || []).map((b) => {
       const copy = cloneBlock(b);
-      if (copy.id === blockId && copy.type === "figure") {
+      if (copy.id === blockId && (copy.type === "figure" || copy.type === "plot")) {
         copy.controls = copy.controls.filter((_, i) => i !== index);
       }
       return copy;
@@ -264,6 +287,64 @@ export function removeShape(doc, blockId, index) {
   };
 }
 
+
+/**
+ * @param {{ blocks?: object[] }} doc
+ * @param {string} blockId
+ * @param {"x"|"y"} which
+ * @param {object} patch
+ * @returns {{ blocks: object[] }}
+ */
+export function updatePlotAxis(doc, blockId, which, patch) {
+  return {
+    blocks: (doc?.blocks || []).map((b) => {
+      const copy = cloneBlock(b);
+      if (copy.id === blockId && copy.type === "plot" && copy.plot) {
+        const axis = { ...(copy.plot[which] || {}), ...patch };
+        copy.plot = { ...copy.plot, [which]: axis };
+      }
+      return copy;
+    }),
+  };
+}
+
+/**
+ * @param {{ blocks?: object[] }} doc
+ * @param {string} blockId
+ * @param {number} index
+ * @param {object} patch
+ * @returns {{ blocks: object[] }}
+ */
+export function updatePlotSeries(doc, blockId, index, patch) {
+  return {
+    blocks: (doc?.blocks || []).map((b) => {
+      const copy = cloneBlock(b);
+      if (copy.id === blockId && copy.type === "plot" && copy.plot?.series?.[index]) {
+        copy.plot.series[index] = { ...copy.plot.series[index], ...patch };
+      }
+      return copy;
+    }),
+  };
+}
+
+/**
+ * @param {{ blocks?: object[] }} doc
+ * @param {string} blockId
+ * @param {object} patch
+ * @returns {{ blocks: object[] }}
+ */
+export function updatePlotMeta(doc, blockId, patch) {
+  return {
+    blocks: (doc?.blocks || []).map((b) => {
+      const copy = cloneBlock(b);
+      if (copy.id === blockId && copy.type === "plot" && copy.plot) {
+        copy.plot = { ...copy.plot, ...patch };
+      }
+      return copy;
+    }),
+  };
+}
+
 export { NAME_RE };
 
 function emptyFigure() {
@@ -278,13 +359,57 @@ function emptyFigure() {
   };
 }
 
+function emptyPlot() {
+  return {
+    id: nid(),
+    type: "plot",
+    namespace: null,
+    controls: [
+      { kind: "slider", name: "mu", range: [-5, 5], step: 0.1, default: 0, label: "μ (mean)" },
+      { kind: "slider", name: "sigma", range: [0.5, 4], step: 0.1, default: 1.5, label: "σ (std dev)" },
+    ],
+    plot: {
+      width: 480,
+      height: 320,
+      grid: true,
+      x: { min: -10, max: 10, step: 2, label: "x" },
+      y: { min: 0, max: 0.8, step: 0.2, label: "density" },
+      series: [
+        {
+          id: "density",
+          expression: "(1/(sigma*sqrt(2*pi))) * exp(-0.5*((x-mu)/sigma)^2)",
+          stroke: "#6d28d9",
+          fill: "#7c3aed",
+          fillOpacity: 0.25,
+        },
+      ],
+    },
+  };
+}
+
+/**
+ * @param {object | null | undefined} plot
+ */
+function copyPlotModel(plot) {
+  const model = normalizePlot(plot || {});
+  return {
+    width: model.width,
+    height: model.height,
+    grid: model.grid,
+    samples: model.samples,
+    x: { ...model.x },
+    y: { ...model.y },
+    series: model.series.map((s) => ({ ...s })),
+  };
+}
+
 /**
  * @param {object[]} blocks
  * @param {string} [id]
  */
 function findFigure(blocks, id) {
   if (!id) return null;
-  const block = blocks.find((b) => b.id === id && b.type === "figure");
+  const block = blocks.find((b) => b.id === id && (b.type === "figure" || b.type === "plot"));
   return block || null;
 }
 
@@ -295,7 +420,7 @@ function findFigure(blocks, id) {
 function nextControlName(blocks, prefix) {
   const used = new Set();
   for (const block of blocks) {
-    if (block.type !== "figure") continue;
+    if (block.type !== "figure" && block.type !== "plot") continue;
     for (const control of block.controls || []) {
       if (control.name) used.add(control.name);
     }
@@ -407,6 +532,15 @@ function blockFromIvm(body) {
       model: copyGraphModel(parsed.graph),
     };
   }
+  if (parsed.plot) {
+    return {
+      id: nid(),
+      type: "plot",
+      namespace: parsed.namespace,
+      controls: parsed.controls.map(cloneControl),
+      plot: copyPlotModel(parsed.plot),
+    };
+  }
   const raw = parsed.templateSvg;
   const template = wrapSlimSvg(raw, parsed.svgWidth, parsed.svgHeight);
   const shapes = template ? tryParseShapes(template) : [];
@@ -515,10 +649,7 @@ function serializeBlock(block) {
     return (block.items || []).map((item) => `- ${item}`).join("\n");
   }
   if (block.type === "markdown") return String(block.text ?? "");
-  if (block.type === "graph") {
-    return "```ivm\n" + serializeFigure(block).replace(/\s*$/, "\n") + "```";
-  }
-  if (block.type === "figure") {
+  if (block.type === "graph" || block.type === "figure" || block.type === "plot") {
     return "```ivm\n" + serializeFigure(block).replace(/\s*$/, "\n") + "```";
   }
   return "";
@@ -622,6 +753,13 @@ function cloneBlock(block) {
   if (block.type === "graph") {
     return { ...block, model: copyGraphModel(block.model) };
   }
+  if (block.type === "plot") {
+    return {
+      ...block,
+      controls: (block.controls || []).map(cloneControl),
+      plot: copyPlotModel(block.plot),
+    };
+  }
   if (block.type === "figure") {
     return {
       ...block,

package/src/index.js

@@ -6,3 +6,4 @@ export { parseIvm, splitIvmFences } from "./parse-ivm.js";
 export { sanitizeSvg } from "./sanitize-svg.js";
 export { mountIvm, resetNamespaces } from "./render.js";
 export { renderDocument } from "./markdown.js";
+export { buildPlotSvg, normalizePlot } from "./plot.js";

package/src/parse-ivm.js

@@ -12,6 +12,11 @@
  *   @calc         name = expression   (alias of @let; prefer @let in docs/generators)
  *   @svg [WxH]
  *   …markup…   (remainder of fence; use {{expr}} in attrs/text)
+ *   @plot [WxH] [grid|nogrid]
+ *   @axis x|y: min..max [step=S] ["Label"]
+ *   @series [id] [stroke=#hex] [fill=#hex] [fillOpacity=N] [width=N]
+ *     y = expression   (free var `x` + controls/@let)
+ *   @grid on|off
  *   @graph
  *   @animate [path=ortho|straight|curve] [quantity=N] [direction=forward|reverse] [speed=seconds]
  *   @node id: "Label" x=N y=N [kind=action|input|output|decision]
@@ -19,6 +24,7 @@
  *
  * Defaults: step=1, timer loop=true, speed=30. Omitted "Label" → UI shows name.
  * `@svg 200x80` stores width/height so the renderer can wrap non-root markup.
+ * `@plot` builds a Cartesian chart (mutually exclusive with `@svg` / `@graph`).
  */
 
 /**
@@ -40,6 +46,23 @@
  * @typedef {{ from: string, to: string, fromSide?: GraphSide, toSide?: GraphSide }} GraphEdge
  * @typedef {{ path: string, quantity: number, direction: string, speed: number }} GraphMotion
  * @typedef {{ nodes: GraphNode[], edges: GraphEdge[], animated?: boolean, motion?: GraphMotion }} GraphModel
+ * @typedef {{ min: number, max: number, step?: number, label?: string }} PlotAxis
+ * @typedef {{
+ *   id?: string,
+ *   expression: string,
+ *   stroke?: string,
+ *   fill?: string,
+ *   fillOpacity?: number,
+ *   width?: number,
+ * }} PlotSeries
+ * @typedef {{
+ *   width: number|null,
+ *   height: number|null,
+ *   grid: boolean,
+ *   x: PlotAxis|null,
+ *   y: PlotAxis|null,
+ *   series: PlotSeries[],
+ * }} PlotModel
  * @typedef {{
  *   namespace: string|null,
  *   controls: Control[],
@@ -47,6 +70,7 @@
  *   svgWidth: number|null,
  *   svgHeight: number|null,
  *   graph: GraphModel|null,
+ *   plot: PlotModel|null,
  *   errors: string[],
  * }} IvmBlock
  */
@@ -184,6 +208,8 @@ export function parseIvm(body) {
   let svgHeight = null;
   /** @type {GraphModel | null} */
   let graph = null;
+  /** @type {PlotModel | null} */
+  let plot = null;
 
   const lines = String(body).replace(/\r\n/g, "\n").split("\n");
   let i = 0;
@@ -196,9 +222,160 @@ export function parseIvm(body) {
       continue;
     }
 
+    // @plot [WxH] [grid|nogrid]
+    if (/^@plot\b/i.test(line)) {
+      if (plot) {
+        errors.push("Duplicate @plot");
+        i++;
+        continue;
+      }
+      if (graph) {
+        errors.push("@plot cannot mix with @graph");
+        i++;
+        continue;
+      }
+      if (templateSvg) {
+        errors.push("@plot cannot mix with @svg");
+        i++;
+        continue;
+      }
+      plot = { width: null, height: null, grid: true, x: null, y: null, series: [] };
+      const rest = line.replace(/^@plot\b/i, "").trim();
+      if (rest) {
+        const size = rest.match(/^(\d+(?:\.\d+)?)\s*[xX×]\s*(\d+(?:\.\d+)?)\b/);
+        let flags = rest;
+        if (size) {
+          plot.width = Number(size[1]);
+          plot.height = Number(size[2]);
+          flags = rest.slice(size[0].length).trim();
+        }
+        if (/\bnogrid\b/i.test(flags)) plot.grid = false;
+        else if (/\bgrid\b/i.test(flags)) plot.grid = true;
+        const leftover = flags.replace(/\b(nogrid|grid)\b/gi, "").trim();
+        if (leftover) errors.push(`@plot: unknown ${leftover}`);
+      }
+      i++;
+      continue;
+    }
+
+    // @grid on|off
+    if (/^@grid\b/i.test(line)) {
+      if (!plot) {
+        errors.push("@grid is only valid after @plot");
+        i++;
+        continue;
+      }
+      const rest = line.replace(/^@grid\b/i, "").trim().toLowerCase();
+      if (rest === "off" || rest === "false" || rest === "0" || rest === "nogrid") plot.grid = false;
+      else if (rest === "on" || rest === "true" || rest === "1" || rest === "grid" || rest === "") plot.grid = true;
+      else errors.push(`@grid: expected on|off, got ${rest}`);
+      i++;
+      continue;
+    }
+
+    // @axis x|y: min..max [step=S] ["Label"]
+    {
+      const m = line.match(/^@axis\s+([xy])\s*:\s*(.+)$/i);
+      if (m) {
+        if (!plot) {
+          errors.push(`@axis ${m[1]}: only valid after @plot`);
+          i++;
+          continue;
+        }
+        const which = m[1].toLowerCase();
+        const [rest, label] = takeLabel(m[2]);
+        const rm = rest.match(
+          /^(-?[0-9]*\.?[0-9]+)\.\.(-?[0-9]*\.?[0-9]+)\s*(.*)$/
+        );
+        if (!rm) {
+          errors.push(`@axis ${which}: expected min..max [step=S]`);
+          i++;
+          continue;
+        }
+        const min = Number(rm[1]);
+        const max = Number(rm[2]);
+        const flags = parseFlags(rm[3] || "");
+        const step = flags.step !== undefined ? Number(flags.step) : undefined;
+        /** @type {PlotAxis} */
+        const axis = {
+          min: Number.isFinite(min) ? min : 0,
+          max: Number.isFinite(max) ? max : 1,
+        };
+        if (step !== undefined && Number.isFinite(step) && step > 0) axis.step = step;
+        if (label || flags.label) axis.label = label || flags.label;
+        if (which === "x") {
+          if (plot.x) errors.push("Duplicate @axis x");
+          plot.x = axis;
+        } else {
+          if (plot.y) errors.push("Duplicate @axis y");
+          plot.y = axis;
+        }
+        i++;
+        continue;
+      }
+    }
+
+    // @series [id] [flags] [y = expr]  — expression may continue on the next indented line
+    if (/^@series\b/i.test(line)) {
+      if (!plot) {
+        errors.push("@series is only valid after @plot");
+        i++;
+        continue;
+      }
+      const rest = line.replace(/^@series\b/i, "").trim();
+      /** @type {PlotSeries} */
+      const series = { expression: "" };
+      // Optional leading id (not a key=value and not y=)
+      let tail = rest;
+      const idMatch = tail.match(/^([A-Za-z_][A-Za-z0-9_]*)\b/);
+      if (idMatch && !/^(stroke|fill|fillOpacity|width|y)$/i.test(idMatch[1])) {
+        series.id = idMatch[1];
+        tail = tail.slice(idMatch[0].length).trim();
+      }
+      // Inline y = expr?
+      const yInline = tail.match(/\by\s*=\s*(.+)$/i);
+      if (yInline) {
+        series.expression = yInline[1].trim();
+        tail = tail.slice(0, yInline.index).trim();
+      }
+      const flags = parseFlags(tail);
+      if (flags.stroke) series.stroke = flags.stroke;
+      if (flags.fill) series.fill = flags.fill;
+      if (flags.fillOpacity !== undefined) {
+        const n = Number(flags.fillOpacity);
+        if (Number.isFinite(n)) series.fillOpacity = n;
+      }
+      if (flags.width !== undefined) {
+        const n = Number(flags.width);
+        if (Number.isFinite(n)) series.width = n;
+      }
+      // Continuation: next non-empty line starting with y = or indented
+      if (!series.expression) {
+        let j = i + 1;
+        while (j < lines.length) {
+          const next = lines[j];
+          if (!next.trim() || next.trim().startsWith("#")) {
+            j++;
+            continue;
+          }
+          const cont = next.match(/^\s+y\s*=\s*(.+)$/i) || next.match(/^y\s*=\s*(.+)$/i);
+          if (cont) {
+            series.expression = cont[1].trim();
+            i = j;
+          }
+          break;
+        }
+      }
+      if (!series.expression) errors.push("@series: expected y = expression");
+      else plot.series.push(series);
+      i++;
+      continue;
+    }
+
     // @graph — following @node / @edge lines are an editable graph
     if (/^@graph$/i.test(line)) {
-      if (graph) errors.push("Duplicate @graph");
+      if (plot) errors.push("@graph cannot mix with @plot");
+      else if (graph) errors.push("Duplicate @graph");
       else graph = { nodes: [], edges: [] };
       i++;
       continue;
@@ -321,6 +498,11 @@ export function parseIvm(body) {
 
     // @svg [WxH] — remainder of fence is SVG markup
     if (/^@svg\b/i.test(line)) {
+      if (plot) {
+        errors.push("@svg cannot mix with @plot");
+        i++;
+        continue;
+      }
       const after = line.replace(/^@svg\b/i, "").trim();
       const size = after.match(/^(\d+(?:\.\d+)?)\s*[xX×]\s*(\d+(?:\.\d+)?)\s*$/);
       if (size) {
@@ -447,7 +629,7 @@ export function parseIvm(body) {
     i++;
   }
 
-  return { namespace, controls, templateSvg, svgWidth, svgHeight, graph, errors };
+  return { namespace, controls, templateSvg, svgWidth, svgHeight, graph, plot, errors };
 }
 
 /**

package/src/plot.js

@@ -0,0 +1,401 @@
+/**
+ * Cartesian XY plot renderer for Interactive Markdown.
+ * Builds an SVG matching a clean academic density-curve look:
+ * white background, light gray grid, axes with ticks + labels,
+ * optional stroke path and soft fill under the curve.
+ */
+
+import { evaluate } from "./expr.js";
+
+const DEFAULT_WIDTH = 480;
+const DEFAULT_HEIGHT = 320;
+const MARGIN = { top: 24, right: 28, bottom: 48, left: 64 };
+const DEFAULT_SAMPLES = 240;
+const DEFAULT_STROKE = "#6d28d9";
+const DEFAULT_FILL = "#7c3aed";
+const DEFAULT_FILL_OPACITY = 0.25;
+const DEFAULT_STROKE_WIDTH = 2.25;
+const AXIS_COLOR = "#4b5563";
+const GRID_COLOR = "#e5e7eb";
+const TICK_COLOR = "#6b7280";
+const LABEL_COLOR = "#374151";
+
+/**
+ * @typedef {{ min: number, max: number, step?: number, label?: string }} PlotAxis
+ * @typedef {{
+ *   id?: string,
+ *   expression: string,
+ *   stroke?: string,
+ *   fill?: string,
+ *   fillOpacity?: number,
+ *   width?: number,
+ * }} PlotSeries
+ * @typedef {{
+ *   width?: number,
+ *   height?: number,
+ *   grid?: boolean,
+ *   samples?: number,
+ *   x: PlotAxis,
+ *   y: PlotAxis,
+ *   series: PlotSeries[],
+ * }} PlotModel
+ */
+
+/**
+ * @param {Partial<PlotModel> | null | undefined} plot
+ * @returns {PlotModel}
+ */
+export function normalizePlot(plot) {
+  const x = plot?.x || { min: -10, max: 10, step: 2, label: "x" };
+  const y = plot?.y || { min: 0, max: 1, step: 0.2, label: "y" };
+  return {
+    width: positiveOr(plot?.width, DEFAULT_WIDTH),
+    height: positiveOr(plot?.height, DEFAULT_HEIGHT),
+    grid: plot?.grid !== false,
+    samples: Math.max(32, Math.min(2000, Math.round(finiteOr(plot?.samples, DEFAULT_SAMPLES)))),
+    x: normalizeAxis(x, "x"),
+    y: normalizeAxis(y, "y"),
+    series: (plot?.series || []).map(normalizeSeries).filter((s) => s.expression),
+  };
+}
+
+/**
+ * @param {Partial<PlotAxis>} axis
+ * @param {string} fallbackLabel
+ * @returns {PlotAxis}
+ */
+function normalizeAxis(axis, fallbackLabel) {
+  let min = Number(axis?.min);
+  let max = Number(axis?.max);
+  if (!Number.isFinite(min)) min = fallbackLabel === "y" ? 0 : -10;
+  if (!Number.isFinite(max)) max = fallbackLabel === "y" ? 1 : 10;
+  if (min === max) max = min + 1;
+  if (min > max) {
+    const t = min;
+    min = max;
+    max = t;
+  }
+  let step = axis?.step !== undefined ? Number(axis.step) : autoStep(min, max);
+  if (!Number.isFinite(step) || step <= 0) step = autoStep(min, max);
+  return {
+    min,
+    max,
+    step,
+    label: axis?.label != null && String(axis.label).length ? String(axis.label) : fallbackLabel,
+  };
+}
+
+/**
+ * @param {Partial<PlotSeries>} series
+ * @returns {PlotSeries}
+ */
+function normalizeSeries(series) {
+  const fillOpacity = Number(series?.fillOpacity);
+  const width = Number(series?.width);
+  return {
+    id: series?.id,
+    expression: String(series?.expression || "").trim(),
+    stroke: series?.stroke || DEFAULT_STROKE,
+    fill: series?.fill || DEFAULT_FILL,
+    fillOpacity: Number.isFinite(fillOpacity) ? clamp(fillOpacity, 0, 1) : DEFAULT_FILL_OPACITY,
+    width: Number.isFinite(width) && width > 0 ? width : DEFAULT_STROKE_WIDTH,
+  };
+}
+
+/**
+ * Build SVG markup for a plot against the current variable environment.
+ * Free variable `x` is sampled across the X axis; other names come from env.
+ * @param {Partial<PlotModel>} plot
+ * @param {Record<string, unknown>} env
+ * @returns {string}
+ */
+export function buildPlotSvg(plot, env = {}) {
+  const model = normalizePlot(plot);
+  const W = model.width;
+  const H = model.height;
+  const m = MARGIN;
+  const plotW = Math.max(10, W - m.left - m.right);
+  const plotH = Math.max(10, H - m.top - m.bottom);
+
+  const xToPx = (x) => m.left + ((x - model.x.min) / (model.x.max - model.x.min)) * plotW;
+  const yToPx = (y) => m.top + plotH - ((y - model.y.min) / (model.y.max - model.y.min)) * plotH;
+
+  const parts = [];
+  parts.push(
+    `<svg viewBox="0 0 ${fmt(W)} ${fmt(H)}" width="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="plot">`
+  );
+  parts.push(`  <rect width="${fmt(W)}" height="${fmt(H)}" fill="#ffffff"/>`);
+
+  // Clip series to the plot frame
+  parts.push(`  <defs>`);
+  parts.push(
+    `    <clipPath id="im-plot-clip"><rect x="${fmt(m.left)}" y="${fmt(m.top)}" width="${fmt(plotW)}" height="${fmt(plotH)}"/></clipPath>`
+  );
+  parts.push(`  </defs>`);
+
+  if (model.grid) {
+    parts.push(`  <g class="im-plot-grid" stroke="${GRID_COLOR}" stroke-width="1" shape-rendering="crispEdges">`);
+    for (const tx of ticks(model.x.min, model.x.max, model.x.step)) {
+      const px = xToPx(tx);
+      parts.push(`    <line x1="${fmt(px)}" y1="${fmt(m.top)}" x2="${fmt(px)}" y2="${fmt(m.top + plotH)}"/>`);
+    }
+    for (const ty of ticks(model.y.min, model.y.max, model.y.step)) {
+      const py = yToPx(ty);
+      parts.push(`    <line x1="${fmt(m.left)}" y1="${fmt(py)}" x2="${fmt(m.left + plotW)}" y2="${fmt(py)}"/>`);
+    }
+    parts.push(`  </g>`);
+  }
+
+  // Series under axes so axes stay crisp on top
+  parts.push(`  <g class="im-plot-series" clip-path="url(#im-plot-clip)">`);
+  for (const series of model.series) {
+    const points = sampleSeries(series.expression, model, env);
+    if (points.length < 2) continue;
+    const lineD = pathFromPoints(points, xToPx, yToPx);
+    if (series.fill && series.fillOpacity > 0) {
+      const baseY = clamp(model.y.min, model.y.min, model.y.max);
+      const first = points[0];
+      const last = points[points.length - 1];
+      const areaD =
+        lineD +
+        ` L ${fmt(xToPx(last.x))} ${fmt(yToPx(baseY))}` +
+        ` L ${fmt(xToPx(first.x))} ${fmt(yToPx(baseY))} Z`;
+      parts.push(
+        `    <path d="${areaD}" fill="${escapeAttr(series.fill)}" fill-opacity="${fmt(series.fillOpacity)}" stroke="none"/>`
+      );
+    }
+    parts.push(
+      `    <path d="${lineD}" fill="none" stroke="${escapeAttr(series.stroke)}" stroke-width="${fmt(series.width)}" stroke-linejoin="round" stroke-linecap="round"/>`
+    );
+  }
+  parts.push(`  </g>`);
+
+  // Axes sit on the bottom and left of the plot frame (matplotlib-style spines)
+  const axisY = m.top + plotH;
+  const axisX = m.left;
+
+  parts.push(`  <g class="im-plot-axes" stroke="${AXIS_COLOR}" stroke-width="1.25" fill="none" shape-rendering="crispEdges">`);
+  parts.push(`    <line x1="${fmt(m.left)}" y1="${fmt(axisY)}" x2="${fmt(m.left + plotW)}" y2="${fmt(axisY)}"/>`);
+  parts.push(`    <line x1="${fmt(axisX)}" y1="${fmt(m.top)}" x2="${fmt(axisX)}" y2="${fmt(m.top + plotH)}"/>`);
+  parts.push(`  </g>`);
+
+  // Ticks + numeric labels
+  parts.push(
+    `  <g class="im-plot-ticks" font-family="system-ui, -apple-system, Segoe UI, sans-serif" font-size="11" fill="${TICK_COLOR}">`
+  );
+  for (const tx of ticks(model.x.min, model.x.max, model.x.step)) {
+    const px = xToPx(tx);
+    parts.push(
+      `    <line x1="${fmt(px)}" y1="${fmt(axisY)}" x2="${fmt(px)}" y2="${fmt(axisY + 5)}" stroke="${AXIS_COLOR}" stroke-width="1"/>`
+    );
+    parts.push(
+      `    <text x="${fmt(px)}" y="${fmt(axisY + 18)}" text-anchor="middle">${escapeText(formatTick(tx))}</text>`
+    );
+  }
+  for (const ty of ticks(model.y.min, model.y.max, model.y.step)) {
+    const py = yToPx(ty);
+    parts.push(
+      `    <line x1="${fmt(axisX - 5)}" y1="${fmt(py)}" x2="${fmt(axisX)}" y2="${fmt(py)}" stroke="${AXIS_COLOR}" stroke-width="1"/>`
+    );
+    parts.push(
+      `    <text x="${fmt(axisX - 8)}" y="${fmt(py + 3.5)}" text-anchor="end">${escapeText(formatTick(ty))}</text>`
+    );
+  }
+  parts.push(`  </g>`);
+
+  // Axis titles
+  parts.push(
+    `  <g class="im-plot-labels" font-family="system-ui, -apple-system, Segoe UI, sans-serif" font-size="13" font-weight="600" fill="${LABEL_COLOR}">`
+  );
+  parts.push(
+    `    <text x="${fmt(m.left + plotW / 2)}" y="${fmt(H - 12)}" text-anchor="middle">${escapeText(model.x.label)}</text>`
+  );
+  const yLabelX = 16;
+  const yLabelY = m.top + plotH / 2;
+  parts.push(
+    `    <text x="${fmt(yLabelX)}" y="${fmt(yLabelY)}" text-anchor="middle" transform="rotate(-90 ${fmt(yLabelX)} ${fmt(yLabelY)})">${escapeText(model.y.label)}</text>`
+  );
+  parts.push(`  </g>`);
+
+  parts.push(`</svg>`);
+  return parts.join("\n");
+}
+
+/**
+ * @param {string} expression
+ * @param {PlotModel} model
+ * @param {Record<string, unknown>} env
+ * @returns {{ x: number, y: number }[]}
+ */
+function sampleSeries(expression, model, env) {
+  const n = model.samples;
+  const span = model.x.max - model.x.min;
+  /** @type {{ x: number, y: number }[]} */
+  const points = [];
+  for (let i = 0; i <= n; i++) {
+    const x = model.x.min + (span * i) / n;
+    /** @type {Record<string, unknown>} */
+    const local = Object.create(null);
+    Object.assign(local, env);
+    local.x = x;
+    try {
+      const y = Number(evaluate(expression, local));
+      if (!Number.isFinite(y)) continue;
+      points.push({ x, y });
+    } catch (_) {
+      // skip bad samples; keep the rest of the curve
+    }
+  }
+  return points;
+}
+
+/**
+ * @param {{ x: number, y: number }[]} points
+ * @param {(x: number) => number} xToPx
+ * @param {(y: number) => number} yToPx
+ */
+function pathFromPoints(points, xToPx, yToPx) {
+  let d = "";
+  for (let i = 0; i < points.length; i++) {
+    const cmd = i === 0 ? "M" : "L";
+    d += `${cmd}${fmt(xToPx(points[i].x))} ${fmt(yToPx(points[i].y))}`;
+    if (i < points.length - 1) d += " ";
+  }
+  return d;
+}
+
+/**
+ * @param {number} min
+ * @param {number} max
+ * @param {number} step
+ * @returns {number[]}
+ */
+export function ticks(min, max, step) {
+  const out = [];
+  if (!Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(step) || step <= 0) return out;
+  const start = Math.ceil((min - 1e-12) / step) * step;
+  for (let v = start; v <= max + 1e-9; v += step) {
+    const rounded = Math.round(v / step) * step;
+    const clamped = Math.abs(rounded) < step * 1e-9 ? 0 : rounded;
+    if (clamped < min - 1e-9 || clamped > max + 1e-9) continue;
+    out.push(clamped);
+    if (out.length > 200) break;
+  }
+  if (!out.length || out[0] > min + 1e-9) out.unshift(min);
+  if (out[out.length - 1] < max - 1e-9) out.push(max);
+  return out;
+}
+
+function autoStep(min, max) {
+  const span = Math.abs(max - min) || 1;
+  const rough = span / 8;
+  const pow = Math.pow(10, Math.floor(Math.log10(rough)));
+  const err = rough / pow;
+  let nice = 1;
+  if (err >= 5) nice = 5;
+  else if (err >= 2) nice = 2;
+  return nice * pow;
+}
+
+function formatTick(n) {
+  if (!Number.isFinite(n)) return "";
+  if (Math.abs(n) < 1e-12) return "0";
+  const abs = Math.abs(n);
+  if (abs >= 1000 || (abs > 0 && abs < 0.001)) return String(Number(n.toPrecision(4)));
+  const rounded = Math.round(n * 1e6) / 1e6;
+  return String(rounded);
+}
+
+function finiteOr(value, fallback) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+/** Positive finite size, else fallback. Rejects null/undefined/0/NaN (Number(null)===0). */
+function positiveOr(value, fallback) {
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : fallback;
+}
+
+/**
+ * @param {number} width
+ * @param {number} height
+ */
+function plotSizeSuffix(width, height) {
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return "";
+  if (width === DEFAULT_WIDTH && height === DEFAULT_HEIGHT) return "";
+  return ` ${fmt(width)}x${fmt(height)}`;
+}
+
+function clamp(n, lo, hi) {
+  return Math.min(hi, Math.max(lo, n));
+}
+
+function fmt(n) {
+  if (!Number.isFinite(n)) return "0";
+  const rounded = Math.round(n * 1000) / 1000;
+  return String(rounded);
+}
+
+function escapeAttr(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+
+function escapeText(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;");
+}
+
+/**
+ * Serialize a plot model (+ optional controls already handled by caller) to fence lines.
+ * @param {Partial<PlotModel>} plot
+ * @returns {string[]}
+ */
+export function serializePlotLines(plot) {
+  const model = normalizePlot(plot);
+  /** @type {string[]} */
+  const lines = [];
+  // Only emit WxH when both are positive finite and differ from defaults.
+  // Missing / 0 / NaN sizes normalize to defaults and stay as bare @plot (never 0x0).
+  const size = plotSizeSuffix(model.width, model.height);
+  const gridFlag = model.grid === false ? " nogrid" : "";
+  lines.push(`@plot${size}${gridFlag}`);
+  lines.push(serializeAxis("x", model.x));
+  lines.push(serializeAxis("y", model.y));
+  for (const series of model.series) {
+    let head = "@series";
+    if (series.id) head += ` ${series.id}`;
+    head += ` stroke=${series.stroke}`;
+    if (series.fillOpacity > 0) {
+      head += ` fill=${series.fill}`;
+      head += ` fillOpacity=${fmt(series.fillOpacity)}`;
+    }
+    if (series.width !== DEFAULT_STROKE_WIDTH) head += ` width=${fmt(series.width)}`;
+    lines.push(head);
+    lines.push(`  y = ${series.expression}`);
+  }
+  return lines;
+}
+
+/**
+ * @param {"x"|"y"} which
+ * @param {PlotAxis} axis
+ */
+function serializeAxis(which, axis) {
+  let line = `@axis ${which}: ${fmt(axis.min)}..${fmt(axis.max)}`;
+  if (axis.step != null) line += ` step=${fmt(axis.step)}`;
+  if (axis.label) line += ` ${quoteLabel(axis.label)}`;
+  return line;
+}
+
+function quoteLabel(label) {
+  return `"${String(label).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+}
+
+export {
+  DEFAULT_WIDTH,
+  DEFAULT_HEIGHT,
+  DEFAULT_STROKE,
+  DEFAULT_FILL,
+  DEFAULT_FILL_OPACITY,
+  DEFAULT_STROKE_WIDTH,
+};

package/src/render.js

@@ -6,6 +6,7 @@ import { evaluate, substitute } from "./expr.js";
 import { parseIvm } from "./parse-ivm.js";
 import { sanitizeSvg } from "./sanitize-svg.js";
 import { mountGraphEditor, serializeGraph } from "./graph-editor.js";
+import { buildPlotSvg, normalizePlot } from "./plot.js";
 
 /** @type {Map<string, Record<string, unknown>>} */
 const namespaces = new Map();
@@ -65,6 +66,8 @@ export function mountIvm(container, fenceBody, options = {}) {
     };
   }
 
+  if (parsed.plot) container.classList.add("im-ivm-plot");
+
   const nsState = getNamespaceState(parsed.namespace);
   /** @type {Record<string, unknown>} */
   const local = Object.create(null);
@@ -183,6 +186,21 @@ export function mountIvm(container, fenceBody, options = {}) {
       el.textContent =
         typeof v === "number" ? String(Math.round(v * 1000) / 1000) : String(v ?? "");
     }
+    if (parsed.plot) {
+      const model = normalizePlot({
+        width: parsed.plot.width ?? undefined,
+        height: parsed.plot.height ?? undefined,
+        grid: parsed.plot.grid,
+        x: parsed.plot.x || undefined,
+        y: parsed.plot.y || undefined,
+        series: parsed.plot.series || [],
+      });
+      const filled = buildPlotSvg(model, env);
+      if (filled === lastFilled) return;
+      lastFilled = filled;
+      paintSvg(sanitizeSvg(filled));
+      return;
+    }
     if (!parsed.templateSvg) {
       if (lastFilled !== "") {
         lastFilled = "";

package/styles/app.css

@@ -385,6 +385,18 @@ body {
   overflow: hidden;
 }
 
+/* XY plots: white chart card, no dark SVG stage */
+.im-ivm-plot .im-svg-host {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  padding: 0.35rem;
+}
+
+.im-ivm-plot {
+  max-width: 640px;
+}
+
+
 .im-errors {
   white-space: pre-wrap;
   color: var(--danger);