interactive-markdown 0.1.0 → 0.2.0

package/src/markdown.js

@@ -23,7 +23,7 @@ function resolveMarked(override) {
  * Render full Interactive Markdown into a preview element.
  * @param {HTMLElement} previewEl
  * @param {string} source
- * @param {{ marked?: { parse: (md: string) => string } }} [options]
+ * @param {{ marked?: { parse: (md: string) => string }, onGraphChange?: (fenceIndex: number, body: string) => void }} [options]
  * @returns {{ destroy: () => void }}
  */
 export function renderDocument(previewEl, source, options = {}) {
@@ -40,6 +40,7 @@ export function renderDocument(previewEl, source, options = {}) {
     marked.setOptions({ gfm: true, breaks: false });
   }
 
+  let ivmIndex = 0;
   for (const seg of segments) {
     if (seg.type === "text") {
       if (!seg.content.trim()) continue;
@@ -48,10 +49,17 @@ export function renderDocument(previewEl, source, options = {}) {
       wrap.innerHTML = marked.parse(seg.content);
       previewEl.appendChild(wrap);
     } else if (seg.type === "ivm") {
+      const fenceIndex = ivmIndex++;
       const host = doc.createElement("div");
       host.className = "im-ivm-host";
       previewEl.appendChild(host);
-      mounts.push(mountIvm(host, seg.content));
+      mounts.push(
+        mountIvm(host, seg.content, {
+          onGraphChange(body) {
+            options.onGraphChange?.(fenceIndex, body);
+          },
+        })
+      );
     }
   }
 

package/src/parse-ivm.js

@@ -2,16 +2,23 @@
  * Parse ```ivm fence body into controls + SVG template.
  * Interactive Markdown (IVM) dialect.
  *
- * Line forms:
+ * Line forms (long names are canonical; short aliases also parse):
  *   @ns name
- *   @slider name: min..max = default step=S "Label"
- *   @timer  name: min..max = default speed=N step=S loop|noloop "Label"
- *   @input  name: "default" "Label"
- *   @toggle name: true|false "Label"
- *   @let    name = expression
- *   @calc   name = expression   (alias of @let)
- *   @svg
- *   <svg>...</svg>   (remainder of fence; use {{expr}} in attrs/text)
+ *   @slider | @s  name: min..max = default [step=S] [deg|rad] ["Label"]
+ *   @timer  | @t  name: min..max = default [speed=N] [step=S] [loop|noloop] [deg|rad] ["Label"]
+ *   @input  | @i  name: "default" ["Label"]
+ *   @toggle | @b  name: true|false ["Label"]
+ *   @let    | @l  name = expression
+ *   @calc         name = expression   (alias of @let; prefer @let in docs/generators)
+ *   @svg [WxH]
+ *   …markup…   (remainder of fence; use {{expr}} in attrs/text)
+ *   @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]
+ *   @edge from -> to [from=right|left|top|bottom] [to=left|right|top|bottom]
+ *
+ * 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.
  */
 
 /**
@@ -26,15 +33,103 @@
  *   loop?: boolean,
  *   label?: string,
  *   expression?: string,
+ *   units?: 'deg'|'rad',
  * }} Control
+ * @typedef {"left"|"right"|"top"|"bottom"} GraphSide
+ * @typedef {{ id: string, label: string, x: number, y: number, kind: string }} GraphNode
+ * @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 {{
  *   namespace: string|null,
  *   controls: Control[],
  *   templateSvg: string|null,
+ *   svgWidth: number|null,
+ *   svgHeight: number|null,
+ *   graph: GraphModel|null,
  *   errors: string[],
  * }} IvmBlock
  */
 
+const NODE_KINDS = new Set(["action", "input", "output", "decision"]);
+
+const KIND_ALIASES = Object.freeze({
+  s: "slider",
+  slider: "slider",
+  t: "timer",
+  timer: "timer",
+  i: "input",
+  input: "input",
+  b: "toggle",
+  toggle: "toggle",
+  l: "let",
+  let: "let",
+  calc: "let",
+});
+
+/**
+ * @param {string} line
+ * @param {string[]} errors
+ * @returns {GraphMotion}
+ */
+function readAnimate(line, errors) {
+  /** @type {GraphMotion} */
+  const motion = { path: "ortho", quantity: 1, direction: "forward", speed: 2.8 };
+  const rest = line.replace(/^@animate\b/i, "").trim();
+  if (!rest) return motion;
+  for (const part of rest.split(/\s+/)) {
+    const flag = part.match(/^(path|quantity|direction|speed)=(\S+)$/i);
+    if (!flag) {
+      errors.push(`@animate: unknown ${part}`);
+      continue;
+    }
+    const key = flag[1].toLowerCase();
+    const raw = flag[2];
+    const value = raw.toLowerCase();
+    if (key === "path") {
+      if (value !== "ortho" && value !== "straight" && value !== "curve") {
+        errors.push(`@animate: unknown path ${raw}`);
+      } else motion.path = value;
+    } else if (key === "quantity") {
+      const n = Number(value);
+      if (!Number.isInteger(n) || n < 1 || n > 12) errors.push("@animate: quantity must be 1..12");
+      else motion.quantity = n;
+    } else if (key === "direction") {
+      if (value !== "forward" && value !== "reverse") errors.push(`@animate: unknown direction ${raw}`);
+      else motion.direction = value;
+    } else if (key === "speed") {
+      const n = Number(raw);
+      if (!Number.isFinite(n) || n < 0.2 || n > 30) errors.push("@animate: speed must be seconds from 0.2 to 30");
+      else motion.speed = Math.round(n * 10) / 10;
+    }
+  }
+  return motion;
+}
+
+/**
+ * Read a leading "quoted" or 'quoted' string. Supports backslash escapes.
+ * @param {string} s
+ * @returns {{ value: string, rest: string } | null}
+ */
+function parseQuotedPrefix(s) {
+  const str = String(s).trimStart();
+  const quote = str[0];
+  if (quote !== '"' && quote !== "'") return null;
+  let value = "";
+  let i = 1;
+  while (i < str.length) {
+    if (str[i] === "\\" && i + 1 < str.length) {
+      value += str[i + 1];
+      i += 2;
+      continue;
+    }
+    if (str[i] === quote) return { value, rest: str.slice(i + 1).trim() };
+    value += str[i];
+    i++;
+  }
+  return null;
+}
+
 function unquote(s) {
   if (s == null) return s;
   const t = String(s).trim();
@@ -60,6 +155,8 @@ function parseFlags(rest) {
   }
   if (/\bnoloop\b/i.test(rest)) out.loop = "false";
   else if (/\bloop\b/i.test(rest) && out.loop === undefined) out.loop = "true";
+  if (/\bdeg\b/i.test(rest)) out.units = "deg";
+  else if (/\brad\b/i.test(rest)) out.units = "rad";
   return out;
 }
 
@@ -81,6 +178,12 @@ export function parseIvm(body) {
   const controls = [];
   let namespace = null;
   let templateSvg = null;
+  /** @type {number|null} */
+  let svgWidth = null;
+  /** @type {number|null} */
+  let svgHeight = null;
+  /** @type {GraphModel | null} */
+  let graph = null;
 
   const lines = String(body).replace(/\r\n/g, "\n").split("\n");
   let i = 0;
@@ -93,11 +196,148 @@ export function parseIvm(body) {
       continue;
     }
 
-    // @svg — remainder of fence is SVG markup
+    // @graph — following @node / @edge lines are an editable graph
+    if (/^@graph$/i.test(line)) {
+      if (graph) errors.push("Duplicate @graph");
+      else graph = { nodes: [], edges: [] };
+      i++;
+      continue;
+    }
+    if (/^@graph\b/i.test(line)) {
+      errors.push("@graph takes no arguments");
+      i++;
+      continue;
+    }
+
+    // @node id: "Label" x=N y=N kind=action
+    {
+      const m = line.match(/^@node\s+([A-Za-z_][A-Za-z0-9_]*)\s*:\s*([\s\S]+)$/i);
+      if (m) {
+        const id = m[1];
+        if (!graph) {
+          errors.push(`@node ${id}: only valid after @graph`);
+          i++;
+          continue;
+        }
+        const quoted = parseQuotedPrefix(m[2]);
+        if (!quoted) {
+          errors.push(`@node ${id}: expected "Label" x=N y=N`);
+          i++;
+          continue;
+        }
+        if (graph.nodes.some((n) => n.id === id)) {
+          errors.push(`@node ${id}: duplicate id`);
+          i++;
+          continue;
+        }
+        const flags = parseFlags(quoted.rest);
+        const x = flags.x !== undefined ? Number(flags.x) : 48;
+        const y = flags.y !== undefined ? Number(flags.y) : 48;
+        const rawKind = flags.kind !== undefined ? String(flags.kind).toLowerCase() : "action";
+        if (!NODE_KINDS.has(rawKind)) {
+          errors.push(`@node ${id}: unknown kind ${flags.kind}`);
+        }
+        graph.nodes.push({
+          id,
+          label: quoted.value,
+          x: Number.isFinite(x) ? x : 48,
+          y: Number.isFinite(y) ? y : 48,
+          kind: NODE_KINDS.has(rawKind) ? rawKind : "action",
+        });
+        i++;
+        continue;
+      }
+    }
+
+    // @edge from -> to [from=side] [to=side]
+    {
+      const m = line.match(
+        /^@edge\s+([A-Za-z_][A-Za-z0-9_]*)\s*->\s*([A-Za-z_][A-Za-z0-9_]*)(?:\s+([^\s].*))?$/i
+      );
+      if (m) {
+        const from = m[1];
+        const to = m[2];
+        if (!graph) {
+          errors.push(`@edge ${from} -> ${to}: only valid after @graph`);
+          i++;
+          continue;
+        }
+        if (from === to) {
+          errors.push(`@edge ${from} -> ${to}: a node cannot connect to itself`);
+          i++;
+          continue;
+        }
+        if (!graph.nodes.some((n) => n.id === from) || !graph.nodes.some((n) => n.id === to)) {
+          errors.push(`@edge ${from} -> ${to}: unknown node`);
+          i++;
+          continue;
+        }
+        if (graph.edges.some((e) => e.from === from && e.to === to)) {
+          errors.push(`@edge ${from} -> ${to}: duplicate edge`);
+          i++;
+          continue;
+        }
+        /** @type {GraphEdge} */
+        const edge = { from, to };
+        const tail = (m[3] || "").trim();
+        let sideError = false;
+        if (tail) {
+          for (const part of tail.split(/\s+/)) {
+            const flag = part.match(/^(from|to)=(left|right|top|bottom)$/i);
+            if (!flag) {
+              errors.push(`@edge ${from} -> ${to}: unknown ${part}`);
+              sideError = true;
+              continue;
+            }
+            const side = /** @type {GraphSide} */ (flag[2].toLowerCase());
+            if (flag[1].toLowerCase() === "from") edge.fromSide = side;
+            else edge.toSide = side;
+          }
+        }
+        if (edge.fromSide === "right") delete edge.fromSide;
+        if (edge.toSide === "left") delete edge.toSide;
+        if (!sideError) graph.edges.push(edge);
+        i++;
+        continue;
+      }
+    }
+
+    if (/^@animate\b/i.test(line)) {
+      if (!graph) errors.push("@animate is only valid after @graph");
+      else if (graph.animated) errors.push("Duplicate @animate");
+      else {
+        graph.animated = true;
+        graph.motion = readAnimate(line, errors);
+      }
+      i++;
+      continue;
+    }
+
+    if (graph) {
+      errors.push(`Not allowed inside @graph: ${line}`);
+      i++;
+      continue;
+    }
+
+    // @svg [WxH] — remainder of fence is SVG markup
     if (/^@svg\b/i.test(line)) {
-      const after = line.replace(/^@svg\b/i, "");
+      const after = line.replace(/^@svg\b/i, "").trim();
+      const size = after.match(/^(\d+(?:\.\d+)?)\s*[xX×]\s*(\d+(?:\.\d+)?)\s*$/);
+      if (size) {
+        svgWidth = Number(size[1]);
+        svgHeight = Number(size[2]);
+      } else if (after) {
+        // Inline markup on the same line (legacy): treat as template start
+        const parts = [after];
+        i++;
+        while (i < lines.length) {
+          parts.push(lines[i]);
+          i++;
+        }
+        templateSvg = parts.join("\n").replace(/^\n+/, "").replace(/\n+$/, "\n");
+        break;
+      }
       const parts = [];
-      if (after.trim()) parts.push(after.trim());
       i++;
       while (i < lines.length) {
         parts.push(lines[i]);
@@ -117,27 +357,28 @@ export function parseIvm(body) {
       }
     }
 
-    // @let / @calc name = expression
+    // @let / @l / @calc name = expression
     {
-      const m = line.match(/^@(?:let|calc)\s+([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.+)$/i);
+      const m = line.match(/^@(let|l|calc)\s+([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.+)$/i);
       if (m) {
-        controls.push({ kind: "let", name: m[1], expression: m[2].trim() });
+        controls.push({ kind: "let", name: m[2], expression: m[3].trim() });
         i++;
         continue;
       }
     }
 
-    // @slider name: min..max = default step=S "Label"
+    // @slider|@s|@timer|@t name: min..max = default …
     {
-      const m = line.match(/^@slider\s+([A-Za-z_][A-Za-z0-9_]*)\s*:\s*(.+)$/i);
+      const m = line.match(/^@(slider|s|timer|t)\s+([A-Za-z_][A-Za-z0-9_]*)\s*:\s*(.+)$/i);
       if (m) {
-        const name = m[1];
-        const [rest, label] = takeLabel(m[2]);
+        const kind = KIND_ALIASES[m[1].toLowerCase()];
+        const name = m[2];
+        const [rest, label] = takeLabel(m[3]);
         const rm = rest.match(
           /^(-?[0-9]*\.?[0-9]+)\.\.(-?[0-9]*\.?[0-9]+)\s*(?:=\s*(-?[0-9]*\.?[0-9]+))?\s*(.*)$/
         );
         if (!rm) {
-          errors.push(`@slider ${name}: expected min..max [= default]`);
+          errors.push(`@${kind} ${name}: expected min..max [= default]`);
           i++;
           continue;
         }
@@ -145,77 +386,57 @@ export function parseIvm(body) {
         const def = rm[3] !== undefined ? Number(rm[3]) : range[0];
         const flags = parseFlags(rm[4] || "");
         const step = flags.step !== undefined ? Number(flags.step) : 1;
-        controls.push({
-          kind: "slider",
+        /** @type {Control} */
+        const ctrl = {
+          kind,
           name,
           range,
           step: Number.isFinite(step) ? step : 1,
           default: Number.isFinite(def) ? def : range[0],
-          label: label || flags.label,
-        });
+          label: label || flags.label || undefined,
+        };
+        if (flags.units === "deg" || flags.units === "rad") {
+          ctrl.units = /** @type {'deg'|'rad'} */ (flags.units);
+        }
+        if (kind === "timer") {
+          const speed = flags.speed !== undefined ? Number(flags.speed) : 30;
+          ctrl.speed = Number.isFinite(speed) && speed > 0 ? speed : 30;
+          ctrl.loop = flags.loop === undefined ? true : parseBool(flags.loop, true);
+        }
+        controls.push(ctrl);
         i++;
         continue;
       }
     }
 
-    // @timer name: min..max = default speed=N step=S loop|noloop "Label"
+    // @input|@i name: "default" "Label"
     {
-      const m = line.match(/^@timer\s+([A-Za-z_][A-Za-z0-9_]*)\s*:\s*(.+)$/i);
+      const m = line.match(/^@(input|i)\s+([A-Za-z_][A-Za-z0-9_]*)\s*[:=]\s*(.+)$/i);
       if (m) {
-        const name = m[1];
-        const [rest, label] = takeLabel(m[2]);
-        const rm = rest.match(
-          /^(-?[0-9]*\.?[0-9]+)\.\.(-?[0-9]*\.?[0-9]+)\s*(?:=\s*(-?[0-9]*\.?[0-9]+))?\s*(.*)$/
-        );
-        if (!rm) {
-          errors.push(`@timer ${name}: expected min..max [= default]`);
-          i++;
-          continue;
-        }
-        const range = /** @type {[number, number]} */ ([Number(rm[1]), Number(rm[2])]);
-        const def = rm[3] !== undefined ? Number(rm[3]) : range[0];
-        const flags = parseFlags(rm[4] || "");
-        const step = flags.step !== undefined ? Number(flags.step) : 1;
-        const speed = flags.speed !== undefined ? Number(flags.speed) : 30;
-        const loop = flags.loop === undefined ? true : parseBool(flags.loop, true);
+        const name = m[2];
+        const [rest, label] = takeLabel(m[3]);
         controls.push({
-          kind: "timer",
+          kind: "input",
           name,
-          range,
-          step: Number.isFinite(step) ? step : 1,
-          default: Number.isFinite(def) ? def : range[0],
-          speed: Number.isFinite(speed) && speed > 0 ? speed : 30,
-          loop,
-          label: label || flags.label,
+          default: unquote(rest) ?? "",
+          label: label || undefined,
         });
         i++;
         continue;
       }
     }
 
-    // @input name: "default" "Label"
+    // @toggle|@b name: true|false "Label"
     {
-      const m = line.match(/^@input\s+([A-Za-z_][A-Za-z0-9_]*)\s*[:=]\s*(.+)$/i);
+      const m = line.match(/^@(toggle|b)\s+([A-Za-z_][A-Za-z0-9_]*)\s*[:=]\s*(.+)$/i);
       if (m) {
-        const name = m[1];
-        const [rest, label] = takeLabel(m[2]);
-        controls.push({ kind: "input", name, default: unquote(rest) ?? "", label });
-        i++;
-        continue;
-      }
-    }
-
-    // @toggle name: true|false "Label"
-    {
-      const m = line.match(/^@toggle\s+([A-Za-z_][A-Za-z0-9_]*)\s*[:=]\s*(.+)$/i);
-      if (m) {
-        const name = m[1];
-        const [rest, label] = takeLabel(m[2]);
+        const name = m[2];
+        const [rest, label] = takeLabel(m[3]);
         controls.push({
           kind: "toggle",
           name,
           default: parseBool(rest, false),
-          label,
+          label: label || undefined,
         });
         i++;
         continue;
@@ -226,7 +447,25 @@ export function parseIvm(body) {
     i++;
   }
 
-  return { namespace, controls, templateSvg, errors };
+  return { namespace, controls, templateSvg, svgWidth, svgHeight, graph, errors };
+}
+
+/**
+ * Replace the Nth ```ivm fence (0-based) with a new interior.
+ * Indexes are computed from the current source, so earlier edits stay consistent.
+ * @param {string} source
+ * @param {number} fenceIndex
+ * @param {string} body
+ * @returns {string}
+ */
+export function replaceIvmFence(source, fenceIndex, body) {
+  const src = String(source).replace(/\r\n/g, "\n");
+  const ivm = splitIvmFences(src).filter((s) => s.type === "ivm");
+  const seg = ivm[fenceIndex];
+  if (!seg) return src;
+  const interior = String(body).replace(/\s*$/, "\n");
+  const next = "```ivm\n" + interior + "```";
+  return src.slice(0, seg.start) + next + src.slice(seg.end);
 }
 
 /**

package/src/render.js

@@ -5,6 +5,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";
 
 /** @type {Map<string, Record<string, unknown>>} */
 const namespaces = new Map();
@@ -28,9 +29,10 @@ export function resetNamespaces() {
  * Mount one ```ivm fence body into a container element.
  * @param {HTMLElement} container
  * @param {string} fenceBody
+ * @param {{ onGraphChange?: (body: string) => void }} [options]
  * @returns {{ destroy: () => void, getState: () => Record<string, unknown> }}
  */
-export function mountIvm(container, fenceBody) {
+export function mountIvm(container, fenceBody, options = {}) {
   const parsed = parseIvm(fenceBody);
   const doc = container.ownerDocument || globalThis.document;
   container.classList.add("im-ivm");
@@ -43,6 +45,26 @@ export function mountIvm(container, fenceBody) {
     container.appendChild(err);
   }
 
+  if (parsed.graph) {
+    container.classList.add("im-ivm-graph");
+    const graphHost = doc.createElement("div");
+    container.appendChild(graphHost);
+    const mounted = mountGraphEditor(graphHost, parsed.graph, {
+      onChange(model) {
+        options.onGraphChange?.(serializeGraph(model));
+      },
+    });
+    return {
+      destroy() {
+        mounted.destroy();
+        container.innerHTML = "";
+      },
+      getState() {
+        return { graph: mounted.getModel() };
+      },
+    };
+  }
+
   const nsState = getNamespaceState(parsed.namespace);
   /** @type {Record<string, unknown>} */
   const local = Object.create(null);
@@ -58,13 +80,14 @@ export function mountIvm(container, fenceBody) {
     if (parsed.namespace) nsState[c.name] = val;
   }
 
+  const hasControls = parsed.controls.some((c) => c.kind !== "let" && c.name != null);
+  if (!hasControls) container.classList.add("im-ivm-static");
+
   const controlsEl = doc.createElement("div");
   controlsEl.className = "im-controls";
-  container.appendChild(controlsEl);
 
   const svgHost = doc.createElement("div");
   svgHost.className = "im-svg-host";
-  container.appendChild(svgHost);
 
   /** @type {Array<() => void>} */
   const cleanups = [];
@@ -92,6 +115,67 @@ export function mountIvm(container, fenceBody) {
     return env;
   }
 
+  function wrapSvgTemplate(markup) {
+    const src = String(markup ?? "").trim();
+    if (!src) return src;
+    const w = parsed.svgWidth;
+    const h = parsed.svgHeight;
+    if (w == null || h == null || !Number.isFinite(w) || !Number.isFinite(h)) {
+      return src;
+    }
+    // Already a root <svg> — leave author markup alone
+    if (/^<svg\b/i.test(src)) return src;
+    return (
+      `<svg viewBox="0 0 ${w} ${h}" xmlns="http://www.w3.org/2000/svg">\n` +
+      src +
+      `\n</svg>`
+    );
+  }
+
+  /** Skip DOM writes when the substituted source is unchanged so CSS and SMIL keep running. */
+  let lastFilled = null;
+
+  /**
+   * Mount markup in a shadow root so <style> in the figure cannot restyle the editor.
+   * transform on the host makes position:fixed a local containing block.
+   * @param {string} markup
+   */
+  function paintSvg(markup) {
+    let shadow = svgHost.shadowRoot;
+    if (!shadow && typeof svgHost.attachShadow === "function") {
+      try {
+        shadow = svgHost.attachShadow({ mode: "open" });
+      } catch (_) {
+        shadow = null;
+      }
+    }
+    const target = shadow || svgHost;
+    const doc = svgHost.ownerDocument || globalThis.document;
+    target.innerHTML = "";
+    if (!markup) return;
+
+    // Scope figure CSS to this widget. transform makes position:fixed local.
+    if (shadow && doc?.createElement) {
+      const frame = doc.createElement("style");
+      frame.textContent =
+        ":host{display:block;overflow:hidden;transform:translate(0)}" +
+        "svg{display:block;max-width:100%;height:auto;margin:0 auto}" +
+        "@media (prefers-reduced-motion:reduce){:host *{animation:none!important}}";
+      target.appendChild(frame);
+    }
+
+    // Parse as XML and adopt the node. innerHTML would lowercase camelCase
+    // SVG tags (radialGradient, feGaussianBlur, animateMotion) and drop them.
+    const Parser = globalThis.DOMParser;
+    if (!Parser) return;
+    const parsed = new Parser().parseFromString(markup, "image/svg+xml");
+    const root = parsed.documentElement;
+    const rootName = String(root?.localName || root?.tagName || "").toLowerCase();
+    if (!root || rootName === "parsererror" || rootName !== "svg") return;
+    const node = typeof doc.importNode === "function" ? doc.importNode(root, true) : root;
+    target.appendChild(node);
+  }
+
   function rebind() {
     const env = buildEnv();
     for (const [name, el] of valueLabels) {
@@ -100,11 +184,16 @@ export function mountIvm(container, fenceBody) {
         typeof v === "number" ? String(Math.round(v * 1000) / 1000) : String(v ?? "");
     }
     if (!parsed.templateSvg) {
-      svgHost.innerHTML = "";
+      if (lastFilled !== "") {
+        lastFilled = "";
+        paintSvg("");
+      }
       return;
     }
-    const filled = substitute(parsed.templateSvg, env);
-    svgHost.innerHTML = sanitizeSvg(filled);
+    const filled = substitute(wrapSvgTemplate(parsed.templateSvg), env);
+    if (filled === lastFilled) return;
+    lastFilled = filled;
+    paintSvg(sanitizeSvg(filled));
   }
 
   function setVar(name, value) {
@@ -239,6 +328,9 @@ export function mountIvm(container, fenceBody) {
     }
   }
 
+  if (hasControls) container.appendChild(controlsEl);
+  container.appendChild(svgHost);
+
   rebind();
 
   return {