@openvidstudio/mcp-server 0.1.0 → 1.4.0

package/templates/default/openvidstudio-stem/src/TreeViz.tsx

@@ -0,0 +1,241 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { E, tween } from "@openvidstudio/core";
+import { SUBJECT_ACCENT, VOID, bodyStack, displayStack, type Subject } from "./designSystem";
+import { lineWeight } from "./graph";
+import { Spark } from "./Spark";
+import { walk, type Point } from "./paths";
+
+export type Traversal = "inorder" | "preorder" | "postorder" | "level";
+
+export interface TreeVizProps {
+  /** Inserted in this order into a binary search tree (smaller to the left, larger to the right). A repeated value is skipped. */
+  values: number[];
+  /** Composition frame the first insert starts. Default 0. */
+  at?: number;
+  /** Frames each insert takes (a walked insert takes its walk as well). Default 24. */
+  insertAt?: number;
+  /** A Spark walks from the root to the place of this value as it is inserted. Default: the last value. */
+  walkValue?: number;
+  /** Turn the walking Spark off. Default true. */
+  spark?: boolean;
+  /** Frames the Spark takes for one hop down the tree, and how long it rests on each node. Default 14 and 8. */
+  walkHop?: number;
+  walkHold?: number;
+  /** Light the nodes in this order, one every `hop` frames, and list the visited values under the tree. */
+  traversal?: Traversal;
+  /** Composition frame the first node lights. Default: 20 frames after the last insert. */
+  traverseAt?: number;
+  /** Frames between one node lighting and the next. Default 18. */
+  hop?: number;
+  /** Mark the node with this value (a ring). */
+  highlight?: number;
+  /** Picks the accent. Default "cs". */
+  subject?: Subject;
+}
+
+export interface TreeNodeLayout {
+  value: number;
+  /** Position in the insertion order, 0 is the root. */
+  order: number;
+  parent: number | null;
+  side: "left" | "right" | null;
+  depth: number;
+  /** Centre in composition pixels. */
+  x: number;
+  y: number;
+  /** Composition frame the node (and its edge) starts to appear. */
+  appearFrame: number;
+}
+
+export interface TreeLayout {
+  nodes: TreeNodeLayout[];
+  radius: number;
+  /** Values in visit order for each traversal. */
+  orders: Record<Traversal, number[]>;
+  /** Centres from the root to the walked value's place, or empty. */
+  walkPoints: Point[];
+  walkValue: number | null;
+  /** Frame offset, from the walked insert's start, at which the Spark arrives and the node appears. */
+  walkFrames: number;
+  /** Composition frame the last node has appeared. */
+  insertsEnd: number;
+  traverseAt: number;
+}
+
+interface Bst {
+  value: number;
+  left: Bst | null;
+  right: Bst | null;
+}
+
+/**
+ * The tree for `values` and where it is drawn: a tidy layered layout (x is the in-order rank, y the
+ * depth, so a left child is always left of its parent and a right child right of it, each one level
+ * lower), sized from the frame. Also the visit order of every traversal and the timeline of inserts.
+ * Pure, so a test can check the picture against numbers it works out itself.
+ */
+export function treeLayout(values: number[], opts: { width: number; height: number; at?: number; insertAt?: number; walkValue?: number; spark?: boolean; walkHop?: number; walkHold?: number; traverseAt?: number }): TreeLayout {
+  const { width, height } = opts;
+  const at = opts.at ?? 0;
+  const insertAt = opts.insertAt ?? 24;
+  const minSide = Math.min(width, height);
+  let root: Bst | null = null;
+  const meta = new Map<number, { order: number; parent: number | null; side: "left" | "right" | null; depth: number }>();
+  const inserted: number[] = [];
+  for (const v of values) {
+    if (meta.has(v)) continue;
+    const node: Bst = { value: v, left: null, right: null };
+    if (!root) {
+      root = node;
+      meta.set(v, { order: inserted.length, parent: null, side: null, depth: 0 });
+    } else {
+      let cur = root;
+      let depth = 0;
+      for (;;) {
+        depth++;
+        const side = v < cur.value ? "left" : "right";
+        const next: Bst | null = cur[side];
+        if (next) cur = next;
+        else {
+          cur[side] = node;
+          meta.set(v, { order: inserted.length, parent: cur.value, side, depth });
+          break;
+        }
+      }
+    }
+    inserted.push(v);
+  }
+  const inorder: number[] = [];
+  const preorder: number[] = [];
+  const postorder: number[] = [];
+  const level: number[] = [];
+  const visit = (n: Bst | null) => {
+    if (!n) return;
+    preorder.push(n.value);
+    visit(n.left);
+    inorder.push(n.value);
+    visit(n.right);
+    postorder.push(n.value);
+  };
+  visit(root);
+  const queue: Bst[] = root ? [root] : [];
+  for (let i = 0; i < queue.length; i++) {
+    level.push(queue[i].value);
+    if (queue[i].left) queue.push(queue[i].left as Bst);
+    if (queue[i].right) queue.push(queue[i].right as Bst);
+  }
+  const count = inserted.length;
+  const maxDepth = Math.max(0, ...Array.from(meta.values()).map((m) => m.depth));
+  const portrait = height > width;
+  const left = width * 0.1;
+  const right = width * 0.9;
+  const top = height * (portrait ? 0.2 : 0.16);
+  const bottom = height * (portrait ? 0.56 : 0.6);
+  const gapX = count > 1 ? (right - left) / (count - 1) : 0;
+  const radius = Math.max(minSide * 0.034, Math.min(minSide * 0.055, gapX * 0.42));
+  const gapY = maxDepth > 0 ? Math.min(minSide * 0.16, (bottom - top) / maxDepth) : 0;
+  const x0 = count > 1 ? left : width / 2;
+  const centre = (v: number): Point => {
+    const m = meta.get(v) as { depth: number };
+    return { x: x0 + inorder.indexOf(v) * gapX, y: top + radius + m.depth * gapY };
+  };
+  // The Spark's walk: from the root to the parent, then on to the place the new node will sit.
+  const walkValue = opts.spark === false || count === 0 ? null : inserted.includes(opts.walkValue ?? inserted[count - 1]) ? (opts.walkValue ?? inserted[count - 1]) : null;
+  const walkPoints: Point[] = [];
+  if (walkValue !== null) {
+    const chain: number[] = [];
+    for (let v: number | null = walkValue; v !== null; v = (meta.get(v) as { parent: number | null }).parent) chain.unshift(v);
+    for (const v of chain) walkPoints.push(centre(v));
+  }
+  const step = (opts.walkHop ?? 14) + (opts.walkHold ?? 8);
+  const walkFrames = walkPoints.length > 1 ? (walkPoints.length - 1) * step : 0;
+  let cursor = at;
+  const nodes: TreeNodeLayout[] = inserted.map((v) => {
+    const m = meta.get(v) as { order: number; parent: number | null; side: "left" | "right" | null; depth: number };
+    const walked = v === walkValue;
+    const appearFrame = cursor + (walked ? walkFrames : 0);
+    cursor = appearFrame + insertAt;
+    const c = centre(v);
+    return { value: v, order: m.order, parent: m.parent, side: m.side, depth: m.depth, x: c.x, y: c.y, appearFrame };
+  });
+  return { nodes, radius, orders: { inorder, preorder, postorder, level }, walkPoints, walkValue, walkFrames, insertsEnd: cursor, traverseAt: opts.traverseAt ?? cursor + 20 };
+}
+
+const TRAVERSAL_NAME: Record<Traversal, string> = { inorder: "in-order", preorder: "pre-order", postorder: "post-order", level: "level order" };
+const APPEAR_FRAMES = 10;
+
+/**
+ * A binary search tree built one insert at a time, with its traversals. The component builds the
+ * BST from `values` itself, in order, and lays it out from the frame size (`treeLayout`). Each node
+ * arrives with its edge, a Spark can walk from the root to its place, and a traversal lights the
+ * nodes in visit order, listing the visited values under the tree. At most one thing glows: the
+ * Spark. A pure function of the frame.
+ */
+export const TreeViz: React.FC<TreeVizProps> = ({ values, at = 0, insertAt = 24, walkValue, spark = true, walkHop = 14, walkHold = 8, traversal, traverseAt, hop = 18, highlight, subject = "cs" }) => {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const weight = lineWeight(width, height);
+  const accent = SUBJECT_ACCENT[subject].accent;
+  const layout = treeLayout(values, { width, height, at, insertAt, walkValue, spark, walkHop, walkHold, traverseAt });
+  if (frame < at) return null;
+  const { nodes, radius } = layout;
+  const byValue = new Map(nodes.map((n) => [n.value, n]));
+  const fontPx = Math.round(radius * 0.9);
+  const labelPx = Math.round(Math.min(width, height) * 0.03);
+  const visitOrder = traversal ? layout.orders[traversal] : [];
+  const lit = (v: number): number => (traversal ? visitOrder.indexOf(v) : -1);
+  const litAt = (k: number) => layout.traverseAt + k * hop;
+  const visited = visitOrder.filter((_, k) => frame >= litAt(k));
+  const current = visited.length - 1;
+  const portrait = height > width;
+  const listY = Math.round(height * (portrait ? 0.66 : 0.74));
+  const itemPx = Math.round(Math.min(width, height) * 0.04);
+  const itemGap = Math.min(itemPx * 2.4, (width * 0.84) / Math.max(1, visitOrder.length));
+  const listLeft = width / 2 - (visitOrder.length * itemGap) / 2;
+  const walked = layout.walkValue === null ? null : byValue.get(layout.walkValue);
+  const walkStart = walked ? walked.appearFrame - layout.walkFrames : 0;
+  const showSpark = walked !== null && layout.walkFrames > 0 && frame >= walkStart && frame < (walked?.appearFrame ?? 0) + APPEAR_FRAMES;
+  return (
+    <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} data-ovs-treeviz="" data-ovs-traversal={traversal ?? ""}>
+      <svg width={width} height={height} style={{ position: "absolute", left: 0, top: 0 }}>
+        {nodes.map((n) => {
+          if (frame < n.appearFrame || n.parent === null) return null;
+          const p = byValue.get(n.parent) as TreeNodeLayout;
+          const k = tween(frame, [n.appearFrame, n.appearFrame + APPEAR_FRAMES], [0, 1], E.cinematic);
+          const dx = n.x - p.x;
+          const dy = n.y - p.y;
+          const d = Math.hypot(dx, dy);
+          const ux = dx / d;
+          const uy = dy / d;
+          const a = { x: p.x + ux * radius, y: p.y + uy * radius };
+          const b = { x: n.x - ux * radius, y: n.y - uy * radius };
+          return <line key={`e${n.value}`} data-ovs-edge={`${n.parent}-${n.value}`} x1={a.x} y1={a.y} x2={a.x + (b.x - a.x) * k} y2={a.y + (b.y - a.y) * k} stroke={VOID.textDim} strokeWidth={weight} />;
+        })}
+        {nodes.map((n) => {
+          if (frame < n.appearFrame) return null;
+          const k = tween(frame, [n.appearFrame, n.appearFrame + APPEAR_FRAMES], [0, 1], E.cinematic);
+          const idx = lit(n.value);
+          const on = idx >= 0 && frame >= litAt(idx);
+          const isCurrent = on && idx === current;
+          return (
+            <g key={n.value} data-ovs-node={n.value} data-ovs-x={n.x} data-ovs-y={n.y} data-ovs-r={radius} data-ovs-depth={n.depth} data-ovs-lit={on ? "true" : "false"} opacity={k < 1 ? k : undefined}>
+              <circle cx={n.x} cy={n.y} r={radius} fill={isCurrent ? accent : on ? accent : VOID.panel} fillOpacity={isCurrent ? 1 : on ? 0.35 : 1} stroke={on ? accent : VOID.textDim} strokeWidth={weight} />
+              {highlight === n.value && <circle data-ovs-highlight={n.value} cx={n.x} cy={n.y} r={radius + weight * 2.5} fill="none" stroke={accent} strokeWidth={weight} strokeDasharray={`${weight * 2.5} ${weight * 2}`} />}
+              <text x={n.x} y={n.y + fontPx * 0.35} textAnchor="middle" fontSize={fontPx} fill={isCurrent ? VOID.base : VOID.text} fontFamily={displayStack()} fontWeight={600}>{n.value}</text>
+            </g>
+          );
+        })}
+        {traversal && visited.length > 0 && (
+          <g data-ovs-visited-list="">
+            <text x={width / 2} y={listY - itemPx * 1.4} textAnchor="middle" fontSize={labelPx} fill={VOID.textDim} fontFamily={bodyStack()}>{TRAVERSAL_NAME[traversal]}</text>
+            {visited.map((v, k) => (
+              <text key={v} data-ovs-visited={v} data-ovs-visit-index={k} x={listLeft + (k + 0.5) * itemGap} y={listY} textAnchor="middle" fontSize={itemPx} fill={k === current ? accent : VOID.text} fontFamily={displayStack()} fontWeight={600}>{v}</text>
+            ))}
+          </g>
+        )}
+      </svg>
+      {showSpark && <Spark path={walk(layout.walkPoints, { hop: walkHop, hold: walkHold })} at={walkStart} trail={14} color={accent} size={Math.max(4, Math.round(radius * 0.22))} />}
+    </div>
+  );
+};

package/templates/default/openvidstudio-stem/src/VectorField.tsx

@@ -0,0 +1,231 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { E, tween } from "@openvidstudio/core";
+import { SUBJECT_ACCENT } from "./designSystem";
+import { lineWeight, useAxes, type AxesGeometry, type Box } from "./graph";
+import type { Point } from "./paths";
+
+export interface VectorFieldProps {
+  /** The field: a graph point to the vector there, `[fx, fy]`, y up. Return `[0, 0]` where it is undefined. */
+  field: (x: number, y: number) => [number, number];
+  /** Where the field is drawn, graph units. Used when the field is not inside an <Axes>. Default [-1, 1]. */
+  xRange?: [number, number];
+  yRange?: [number, number];
+  /** Where it is drawn, composition px, when not inside an <Axes> (inside one, the Axes' box is used). Default: a box sized to the frame. */
+  box?: Box;
+  /** Arrows per row and column. `rows` default: as many as keep the cells square. Default 7 columns. */
+  grid?: { columns: number; rows?: number };
+  /**
+   * Pixels per unit of field magnitude. An arrow is exactly `|f| * scale` px from tail to tip (no
+   * caps, no normalising, unless `normalize` or `maxLength` is given). Default: the longest arrow on the grid is 80% of a cell.
+   */
+  scale?: number;
+  /** Draw every arrow this many px long, direction only. Arrow length then no longer says anything about |f|. */
+  normalize?: number;
+  /** Cap arrows at this many px. A capped arrow is shorter than `|f| * scale`. */
+  maxLength?: number;
+  /** Also trace field lines (streamlines) from the seeds, drawn on after the arrows. Default false. */
+  fieldLines?: boolean;
+  /** Where field lines start, in graph units. Each is traced both ways. Default: every other grid point. */
+  seeds?: [number, number][];
+  /** Colour of the arrows. Default the physics accent. */
+  color?: string;
+  /** Colour of the field lines. Default the physics ember. */
+  lineColor?: string;
+  /** Composition frame the arrows start to grow. Default 0. */
+  at?: number;
+  /** Frames the field lines take to draw on, after the arrows. Default 45. */
+  lineDuration?: number;
+}
+
+/** Frames the arrows take to grow to full length. */
+export const FIELD_ARROW_FRAMES = 20;
+
+function defaultBox(width: number, height: number): Box {
+  const x = Math.round(width * 0.14);
+  return height > width
+    ? { x, y: Math.round(height * 0.3), width: width - 2 * x, height: Math.round(width * 0.78) }
+    : { x, y: Math.round(height * 0.14), width: width - 2 * x, height: Math.round(height * 0.66) };
+}
+
+function ownGeometry(box: Box, xRange: [number, number], yRange: [number, number], weight: number, accent: string): AxesGeometry {
+  const xs = xRange[1] - xRange[0];
+  const ys = yRange[1] - yRange[0];
+  return {
+    box,
+    xRange,
+    yRange,
+    weight,
+    accent,
+    toScreen: (x, y) => ({ x: box.x + ((x - xRange[0]) / xs) * box.width, y: box.y + box.height - ((y - yRange[0]) / ys) * box.height }),
+    toWorld: (px, py) => ({ x: xRange[0] + ((px - box.x) / box.width) * xs, y: yRange[0] + ((box.y + box.height - py) / box.height) * ys }),
+  };
+}
+
+export interface VectorFieldGrid {
+  /** Graph coordinates of the grid point. */
+  world: Point;
+  /** Where the arrow's tail is, composition px. */
+  screen: Point;
+  /** Arrow length at full growth, px. */
+  length: number;
+  /** Unit direction on screen (x right, y down). */
+  dir: Point;
+}
+
+/** The grid points, and the arrow drawn at each. Cell centres, so the grid never sits on an axis edge. */
+export function vectorFieldGrid(g: AxesGeometry, props: Pick<VectorFieldProps, "field" | "grid" | "scale" | "normalize" | "maxLength">): { cells: VectorFieldGrid[]; scale: number } {
+  const columns = Math.max(1, Math.round(props.grid?.columns ?? 7));
+  const cellW = g.box.width / columns;
+  const rows = Math.max(1, Math.round(props.grid?.rows ?? g.box.height / cellW));
+  const cellH = g.box.height / rows;
+  const raw: { world: Point; screen: Point; mag: number; dir: Point }[] = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < columns; c++) {
+      const screen = { x: g.box.x + (c + 0.5) * cellW, y: g.box.y + (r + 0.5) * cellH };
+      const world = g.toWorld(screen.x, screen.y);
+      const [fx, fy] = props.field(world.x, world.y);
+      const mag = Math.hypot(fx, fy);
+      raw.push({ world, screen, mag: Number.isFinite(mag) ? mag : 0, dir: mag > 0 && Number.isFinite(mag) ? { x: fx / mag, y: -fy / mag } : { x: 0, y: 0 } });
+    }
+  }
+  const biggest = Math.max(1e-12, ...raw.map((a) => a.mag));
+  const scale = props.scale ?? (0.8 * Math.min(cellW, cellH)) / biggest;
+  const cells = raw.map((a) => {
+    let length = props.normalize !== undefined ? (a.mag > 0 ? props.normalize : 0) : a.mag * scale;
+    if (props.maxLength !== undefined) length = Math.min(length, props.maxLength);
+    return { world: a.world, screen: a.screen, length, dir: a.dir };
+  });
+  return { cells, scale };
+}
+
+/** One streamline through a seed (graph coordinates), as composition px points that run along the field. */
+export function traceFieldLine(g: AxesGeometry, field: VectorFieldProps["field"], seed: [number, number], step: number, maxSteps = 500): Point[] {
+  const b = g.box;
+  const inside = (p: Point) => p.x >= b.x && p.x <= b.x + b.width && p.y >= b.y && p.y <= b.y + b.height;
+  const dirAt = (p: Point): Point | null => {
+    const w = g.toWorld(p.x, p.y);
+    const [fx, fy] = field(w.x, w.y);
+    const m = Math.hypot(fx, fy);
+    if (!(m > 1e-12) || !Number.isFinite(m)) return null;
+    return { x: fx / m, y: -fy / m };
+  };
+  const walk = (start: Point, sign: number): Point[] => {
+    const out: Point[] = [];
+    let p = start;
+    let prev: Point | null = null;
+    for (let i = 0; i < maxSteps; i++) {
+      const k1 = dirAt(p);
+      if (!k1) break;
+      const at = (q: Point, k: Point, h: number): Point => ({ x: q.x + sign * k.x * h, y: q.y + sign * k.y * h });
+      const k2 = dirAt(at(p, k1, step / 2));
+      const k3 = k2 && dirAt(at(p, k2, step / 2));
+      const k4 = k3 && dirAt(at(p, k3, step));
+      if (!k2 || !k3 || !k4) break;
+      const d = { x: (k1.x + 2 * k2.x + 2 * k3.x + k4.x) / 6, y: (k1.y + 2 * k2.y + 2 * k3.y + k4.y) / 6 };
+      // A turn of more than 90 degrees in one step means the line ran into a source, sink or zero.
+      if (prev && d.x * prev.x + d.y * prev.y < 0) break;
+      prev = d;
+      const next = { x: p.x + sign * d.x * step, y: p.y + sign * d.y * step };
+      if (!inside(next)) break;
+      // Stepping over a source or a sink would turn the line round: stop short of it.
+      const dn = dirAt(next);
+      if (dn && dn.x * d.x + dn.y * d.y < 0) break;
+      out.push(next);
+      p = next;
+      // A closed line (an orbit) stops when it comes back to where it began.
+      if (i > 10 && Math.hypot(p.x - start.x, p.y - start.y) < step * 0.75) break;
+    }
+    return out;
+  };
+  const s = g.toScreen(seed[0], seed[1]);
+  if (!inside(s)) return [];
+  const back = walk(s, -1).reverse();
+  const fwd = walk(s, 1);
+  return [...back, s, ...fwd];
+}
+
+const Arrow: React.FC<{ from: Point; dir: Point; length: number; color: string; weight: number; dataset: Record<string, string> }> = ({ from, dir, length, color, weight, dataset }) => {
+  if (length <= 0) return null;
+  const head = Math.min(weight * 5, length * 0.6);
+  const tip = { x: from.x + dir.x * length, y: from.y + dir.y * length };
+  const base = { x: from.x + dir.x * (length - head), y: from.y + dir.y * (length - head) };
+  const half = head * 0.55;
+  const left = { x: base.x - dir.y * half, y: base.y + dir.x * half };
+  const right = { x: base.x + dir.y * half, y: base.y - dir.x * half };
+  return (
+    <g {...dataset}>
+      <line x1={from.x} y1={from.y} x2={base.x} y2={base.y} stroke={color} strokeWidth={weight} />
+      <polygon points={`${tip.x},${tip.y} ${left.x},${left.y} ${right.x},${right.y}`} fill={color} />
+    </g>
+  );
+};
+
+/**
+ * Arrows on a grid for a vector field, the picture an electric or gravitational field lesson draws. Inside
+ * an <Axes> it uses that mapping; on its own it takes a `box` and ranges. Each arrow starts at its grid
+ * point and is exactly `|f| * scale` px long unless `normalize` or `maxLength` says otherwise. With
+ * `fieldLines`, streamlines are traced from the seeds by integrating the field (deterministic) and drawn
+ * on after the arrows. Arrows and lines follow the field's direction in px: (fx, -fy), whatever the axes' scales. A pure function of the frame.
+ */
+export const VectorField: React.FC<VectorFieldProps> = (props) => {
+  const { field, xRange = [-1, 1], yRange = [-1, 1], box, fieldLines = false, seeds, color, lineColor, at = 0, lineDuration = 45 } = props;
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  let inAxes: AxesGeometry | null = null;
+  try {
+    inAxes = useAxes();
+  } catch {
+    inAxes = null;
+  }
+  const weight = lineWeight(width, height);
+  const tone = SUBJECT_ACCENT.physics;
+  const g = inAxes ?? ownGeometry(box ?? defaultBox(width, height), xRange, yRange, weight, tone.accent);
+  const { cells } = vectorFieldGrid(g, props);
+  const grow = tween(frame, [at, at + FIELD_ARROW_FRAMES], [0, 1], E.cinematic);
+  const lineP = fieldLines ? tween(frame, [at + FIELD_ARROW_FRAMES, at + FIELD_ARROW_FRAMES + lineDuration], [0, 1], E.sine) : 0;
+
+  const columns = Math.max(1, Math.round(props.grid?.columns ?? 7));
+  const seedList: [number, number][] =
+    seeds ?? cells.filter((_, i) => Math.floor(i / columns) % 2 === 0 && (i % columns) % 2 === 0).map((c) => [c.world.x, c.world.y] as [number, number]);
+  const step = Math.max(2, Math.min(g.box.width, g.box.height) / 120);
+  const lines = fieldLines && lineP > 0 ? seedList.map((s) => traceFieldLine(g, field, s, step)).filter((l) => l.length >= 2) : [];
+  const partial = (pts: Point[]): Point[] => {
+    const m = lineP * (pts.length - 1);
+    const full = Math.floor(m);
+    const out = pts.slice(0, full + 1);
+    if (full < pts.length - 1 && m > full) {
+      const a = pts[full];
+      const b = pts[full + 1];
+      out.push({ x: a.x + (b.x - a.x) * (m - full), y: a.y + (b.y - a.y) * (m - full) });
+    }
+    return out;
+  };
+  const arrowColor = color ?? tone.accent;
+  const streamColor = lineColor ?? tone.accentAlt;
+
+  return (
+    <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} data-ovs-vectorfield="">
+      <svg width={width} height={height} style={{ position: "absolute", left: 0, top: 0 }}>
+        {lines.map((pts, i) => {
+          const shown = partial(pts);
+          return (
+            <path
+              key={i}
+              data-ovs-fieldline=""
+              d={shown.map((p, j) => `${j === 0 ? "M" : "L"}${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(" ")}
+              fill="none"
+              stroke={streamColor}
+              strokeWidth={weight * 1.2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          );
+        })}
+        {cells.map((c, i) => (
+          <Arrow key={i} from={c.screen} dir={c.dir} length={c.length * grow} color={arrowColor} weight={weight * 1.6} dataset={{ "data-ovs-arrow": "", "data-ovs-gx": String(c.world.x), "data-ovs-gy": String(c.world.y) }} />
+        ))}
+      </svg>
+    </div>
+  );
+};