interactive-markdown 0.0.0-stage → 0.1.1

package/src/parse-ivm.js

@@ -0,0 +1,269 @@
+/**
+ * Parse ```ivm fence body into controls + SVG template.
+ * Interactive Markdown (IVM) dialect.
+ *
+ * Line forms:
+ *   @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)
+ */
+
+/**
+ * @typedef {'slider'|'timer'|'input'|'toggle'|'let'} ControlKind
+ * @typedef {{
+ *   kind: ControlKind,
+ *   name?: string,
+ *   range?: [number, number],
+ *   step?: number,
+ *   default?: unknown,
+ *   speed?: number,
+ *   loop?: boolean,
+ *   label?: string,
+ *   expression?: string,
+ * }} Control
+ * @typedef {{
+ *   namespace: string|null,
+ *   controls: Control[],
+ *   templateSvg: string|null,
+ *   errors: string[],
+ * }} IvmBlock
+ */
+
+function unquote(s) {
+  if (s == null) return s;
+  const t = String(s).trim();
+  const m = t.match(/^"(.*)"$/) || t.match(/^'(.*)'$/);
+  return m ? m[1] : t;
+}
+
+/** @returns {[string, string|undefined]} */
+function takeLabel(rest) {
+  const m = rest.match(/\s+"([^"]*)"\s*$/) || rest.match(/\s+'([^']*)'\s*$/);
+  if (!m) return [rest.trim(), undefined];
+  return [rest.slice(0, m.index).trim(), m[1]];
+}
+
+/** @param {string} rest */
+function parseFlags(rest) {
+  /** @type {Record<string, string>} */
+  const out = {};
+  const re = /([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+))/g;
+  let m;
+  while ((m = re.exec(rest))) {
+    out[m[1]] = m[2] !== undefined ? m[2] : m[3] !== undefined ? m[3] : m[4];
+  }
+  if (/\bnoloop\b/i.test(rest)) out.loop = "false";
+  else if (/\bloop\b/i.test(rest) && out.loop === undefined) out.loop = "true";
+  return out;
+}
+
+function parseBool(raw, fallback = false) {
+  if (raw === undefined || raw === null || raw === "") return fallback;
+  const s = String(raw).trim().toLowerCase();
+  if (s === "true" || s === "yes" || s === "1") return true;
+  if (s === "false" || s === "no" || s === "0") return false;
+  return fallback;
+}
+
+/**
+ * @param {string} body  fence interior (no ```ivm wrapper)
+ * @returns {IvmBlock}
+ */
+export function parseIvm(body) {
+  const errors = [];
+  /** @type {Control[]} */
+  const controls = [];
+  let namespace = null;
+  let templateSvg = null;
+
+  const lines = String(body).replace(/\r\n/g, "\n").split("\n");
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i].trim();
+
+    if (!line || line.startsWith("#")) {
+      i++;
+      continue;
+    }
+
+    // @svg — remainder of fence is SVG markup
+    if (/^@svg\b/i.test(line)) {
+      const after = line.replace(/^@svg\b/i, "");
+      const parts = [];
+      if (after.trim()) parts.push(after.trim());
+      i++;
+      while (i < lines.length) {
+        parts.push(lines[i]);
+        i++;
+      }
+      templateSvg = parts.join("\n").replace(/^\n+/, "").replace(/\n+$/, "\n");
+      break;
+    }
+
+    // @ns NAME
+    {
+      const m = line.match(/^@ns\s+([A-Za-z_][A-Za-z0-9_]*)$/i);
+      if (m) {
+        namespace = m[1];
+        i++;
+        continue;
+      }
+    }
+
+    // @let / @calc name = expression
+    {
+      const m = line.match(/^@(?:let|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() });
+        i++;
+        continue;
+      }
+    }
+
+    // @slider name: min..max = default step=S "Label"
+    {
+      const m = line.match(/^@slider\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(`@slider ${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;
+        controls.push({
+          kind: "slider",
+          name,
+          range,
+          step: Number.isFinite(step) ? step : 1,
+          default: Number.isFinite(def) ? def : range[0],
+          label: label || flags.label,
+        });
+        i++;
+        continue;
+      }
+    }
+
+    // @timer name: min..max = default speed=N step=S loop|noloop "Label"
+    {
+      const m = line.match(/^@timer\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);
+        controls.push({
+          kind: "timer",
+          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,
+        });
+        i++;
+        continue;
+      }
+    }
+
+    // @input name: "default" "Label"
+    {
+      const m = line.match(/^@input\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]);
+        controls.push({
+          kind: "toggle",
+          name,
+          default: parseBool(rest, false),
+          label,
+        });
+        i++;
+        continue;
+      }
+    }
+
+    errors.push(`Unrecognized line: ${line}`);
+    i++;
+  }
+
+  return { namespace, controls, templateSvg, errors };
+}
+
+/**
+ * Split markdown into text and ```ivm fence segments.
+ * @param {string} markdown
+ * @returns {{ type: 'text'|'ivm', content: string, start: number, end: number }[]}
+ */
+export function splitIvmFences(markdown) {
+  const src = String(markdown).replace(/\r\n/g, "\n");
+  /** @type {{ type: 'text'|'ivm', content: string, start: number, end: number }[]} */
+  const segments = [];
+  const re = /^```ivm[ \t]*\n([\s\S]*?)^```[ \t]*$/gm;
+  let last = 0;
+  let m;
+  while ((m = re.exec(src))) {
+    if (m.index > last) {
+      const content = src.slice(last, m.index);
+      if (content.trim().length) {
+        segments.push({ type: "text", content, start: last, end: m.index });
+      }
+    }
+    segments.push({
+      type: "ivm",
+      content: m[1],
+      start: m.index,
+      end: m.index + m[0].length,
+    });
+    last = m.index + m[0].length;
+  }
+  if (last < src.length) {
+    const content = src.slice(last);
+    if (content.trim().length) {
+      segments.push({ type: "text", content, start: last, end: src.length });
+    }
+  }
+  if (segments.length === 0) {
+    segments.push({ type: "text", content: src, start: 0, end: src.length });
+  }
+  return segments;
+}

package/src/render.js

@@ -0,0 +1,253 @@
+/**
+ * Mount IVM controls and bind SVG templates to live state.
+ */
+
+import { evaluate, substitute } from "./expr.js";
+import { parseIvm } from "./parse-ivm.js";
+import { sanitizeSvg } from "./sanitize-svg.js";
+
+/** @type {Map<string, Record<string, unknown>>} */
+const namespaces = new Map();
+
+/**
+ * @param {string|null} ns
+ * @returns {Record<string, unknown>}
+ */
+function getNamespaceState(ns) {
+  if (!ns) return {};
+  if (!namespaces.has(ns)) namespaces.set(ns, {});
+  return /** @type {Record<string, unknown>} */ (namespaces.get(ns));
+}
+
+/** Clear shared `@ns` state (call before re-rendering a whole document). */
+export function resetNamespaces() {
+  namespaces.clear();
+}
+
+/**
+ * Mount one ```ivm fence body into a container element.
+ * @param {HTMLElement} container
+ * @param {string} fenceBody
+ * @returns {{ destroy: () => void, getState: () => Record<string, unknown> }}
+ */
+export function mountIvm(container, fenceBody) {
+  const parsed = parseIvm(fenceBody);
+  const doc = container.ownerDocument || globalThis.document;
+  container.classList.add("im-ivm");
+  container.innerHTML = "";
+
+  if (parsed.errors.length) {
+    const err = doc.createElement("div");
+    err.className = "im-errors";
+    err.textContent = parsed.errors.join("\n");
+    container.appendChild(err);
+  }
+
+  const nsState = getNamespaceState(parsed.namespace);
+  /** @type {Record<string, unknown>} */
+  const local = Object.create(null);
+
+  for (const c of parsed.controls) {
+    if (c.kind === "let" || c.name == null) continue;
+    const existing =
+      parsed.namespace && Object.prototype.hasOwnProperty.call(nsState, c.name)
+        ? nsState[c.name]
+        : undefined;
+    const val = existing !== undefined ? existing : c.default;
+    local[c.name] = val;
+    if (parsed.namespace) nsState[c.name] = val;
+  }
+
+  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 = [];
+  /** @type {Map<string, HTMLElement>} */
+  const valueLabels = new Map();
+
+  function buildEnv() {
+    /** @type {Record<string, unknown>} */
+    const env = Object.create(null);
+    if (parsed.namespace) Object.assign(env, nsState);
+    Object.assign(env, local);
+
+    for (const c of parsed.controls) {
+      if (c.kind !== "let" || !c.name || !c.expression) continue;
+      try {
+        const v = evaluate(c.expression, env);
+        env[c.name] = v;
+        local[c.name] = v;
+        if (parsed.namespace) nsState[c.name] = v;
+      } catch (err) {
+        console.warn("[ivm @let]", c.name, /** @type {Error} */ (err).message);
+        env[c.name] = NaN;
+      }
+    }
+    return env;
+  }
+
+  function rebind() {
+    const env = buildEnv();
+    for (const [name, el] of valueLabels) {
+      const v = env[name];
+      el.textContent =
+        typeof v === "number" ? String(Math.round(v * 1000) / 1000) : String(v ?? "");
+    }
+    if (!parsed.templateSvg) {
+      svgHost.innerHTML = "";
+      return;
+    }
+    const filled = substitute(parsed.templateSvg, env);
+    svgHost.innerHTML = sanitizeSvg(filled);
+  }
+
+  function setVar(name, value) {
+    local[name] = value;
+    if (parsed.namespace) nsState[name] = value;
+    rebind();
+  }
+
+  for (const c of parsed.controls) {
+    if (c.kind === "let" || c.name == null) continue;
+
+    if (c.kind === "slider" || c.kind === "timer") {
+      const row = doc.createElement("div");
+      row.className = "im-control im-slider-row";
+
+      const label = doc.createElement("label");
+      label.className = "im-label";
+      const title = doc.createElement("span");
+      title.className = "im-label-text";
+      title.textContent = c.label || c.name || "";
+      label.appendChild(title);
+
+      const valSpan = doc.createElement("span");
+      valSpan.className = "im-value";
+      valueLabels.set(c.name, valSpan);
+      label.appendChild(valSpan);
+
+      const input = doc.createElement("input");
+      input.type = "range";
+      input.min = String(c.range?.[0] ?? 0);
+      input.max = String(c.range?.[1] ?? 100);
+      input.step = String(c.step ?? 1);
+      input.value = String(local[c.name] ?? c.default ?? 0);
+      input.dataset.var = c.name;
+      input.setAttribute("aria-label", c.label || c.name || "slider");
+
+      input.addEventListener("input", () => {
+        setVar(c.name, Number(input.value));
+      });
+
+      row.appendChild(label);
+      row.appendChild(input);
+
+      if (c.kind === "timer") {
+        const btn = doc.createElement("button");
+        btn.type = "button";
+        btn.className = "im-timer-btn";
+        btn.dataset.timer = c.name;
+        let playing = false;
+        let raf = 0;
+        let lastTs = 0;
+        const speed = c.speed || 30;
+        const step = c.step ?? 1;
+        const [lo, hi] = c.range || [0, 100];
+        const loop = c.loop !== false;
+        const rafFn = globalThis.requestAnimationFrame?.bind(globalThis);
+        const cafFn = globalThis.cancelAnimationFrame?.bind(globalThis);
+
+        const setPlaying = (p) => {
+          playing = p;
+          btn.textContent = playing ? "Pause" : "Play";
+          btn.setAttribute("aria-pressed", playing ? "true" : "false");
+          if (playing) {
+            lastTs = globalThis.performance?.now?.() ?? Date.now();
+            if (rafFn) raf = rafFn(tick);
+          } else if (raf && cafFn) {
+            cafFn(raf);
+            raf = 0;
+          }
+        };
+
+        function tick(ts) {
+          if (!playing) return;
+          const now = ts ?? (globalThis.performance?.now?.() ?? Date.now());
+          const dt = (now - lastTs) / 1000;
+          lastTs = now;
+          let next = Number(local[c.name]) + step * speed * dt;
+          if (next > hi) {
+            const span = hi - lo || 1;
+            next = loop ? lo + ((next - lo) % span) : hi;
+            if (!loop) setPlaying(false);
+          }
+          if (next < lo) next = lo;
+          local[c.name] = next;
+          if (parsed.namespace) nsState[c.name] = next;
+          input.value = String(next);
+          rebind();
+          if (playing && rafFn) raf = rafFn(tick);
+        }
+
+        btn.textContent = "Play";
+        btn.addEventListener("click", () => setPlaying(!playing));
+        row.appendChild(btn);
+
+        cleanups.push(() => {
+          playing = false;
+          if (raf && cafFn) cafFn(raf);
+        });
+      }
+
+      controlsEl.appendChild(row);
+    } else if (c.kind === "input") {
+      const row = doc.createElement("div");
+      row.className = "im-control im-input-row";
+      const label = doc.createElement("label");
+      label.className = "im-label";
+      label.textContent = c.label || c.name || "";
+      const input = doc.createElement("input");
+      input.type = "text";
+      input.value = String(local[c.name] ?? "");
+      input.dataset.var = c.name;
+      input.addEventListener("input", () => setVar(c.name, input.value));
+      row.appendChild(label);
+      row.appendChild(input);
+      controlsEl.appendChild(row);
+    } else if (c.kind === "toggle") {
+      const row = doc.createElement("div");
+      row.className = "im-control im-toggle-row";
+      const label = doc.createElement("label");
+      label.className = "im-label im-toggle-label";
+      const input = doc.createElement("input");
+      input.type = "checkbox";
+      input.checked = Boolean(local[c.name]);
+      input.dataset.var = c.name;
+      input.addEventListener("change", () => setVar(c.name, input.checked));
+      const span = doc.createElement("span");
+      span.textContent = c.label || c.name || "";
+      label.appendChild(input);
+      label.appendChild(span);
+      row.appendChild(label);
+      controlsEl.appendChild(row);
+    }
+  }
+
+  rebind();
+
+  return {
+    destroy() {
+      for (const fn of cleanups) fn();
+      container.innerHTML = "";
+    },
+    getState() {
+      return { ...buildEnv() };
+    },
+  };
+}