Plugins in data/plugins are loaded at startup and can add a tab with a read-only node board, and the demo plugin shows every asset as a node (#113)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/editor/graph/graphView.ts

@@ -0,0 +1,40 @@
+import type { Graphics } from 'pixi.js';
+import { clamp, drawGrid } from '../../ui';
+import type { Point } from '../framing';
+
+/**
+ * What every surface that shows nodes shares with the graph editor: how far it zooms, how the grid
+ * is drawn and how the wheel zooms about the pointer. The graph editor and a plugin's node board
+ * look and move the same because they both come through here.
+ */
+
+/** Spacing of the background grid – and, with snapping on, of the positions a drag can leave. */
+export const GRID_STEP = 24;
+export const ZOOM_LIMITS = { min: 0.25, max: 2.5 };
+/** Breathing room around the framed nodes, so they do not touch the edge. */
+export const FIT_MARGIN = 24;
+/** Below this on-screen spacing the grid is noise rather than orientation, so it is dropped. */
+const MIN_GRID_STEP = 8;
+
+export interface GraphView {
+  /** Where the graph origin sits on screen. */
+  pan: Point;
+  /** Screen pixels per graph unit. */
+  zoom: number;
+}
+
+/** The view after zooming by `factor` about a screen point, which keeps the graph point under it. */
+export function zoomedAbout(view: GraphView, at: Point, factor: number): GraphView {
+  const zoom = clamp(view.zoom * factor, ZOOM_LIMITS.min, ZOOM_LIMITS.max);
+  const graphX = (at.x - view.pan.x) / view.zoom;
+  const graphY = (at.y - view.pan.y) / view.zoom;
+  return { pan: { x: at.x - graphX * zoom, y: at.y - graphY * zoom }, zoom };
+}
+
+export function drawGraphGrid(g: Graphics, view: GraphView, w: number, h: number): void {
+  g.clear();
+  const step = GRID_STEP * view.zoom;
+  if (step < MIN_GRID_STEP) return;
+  // `pan` is where the graph origin sits on screen, but no axis lines: it marks nothing.
+  drawGrid(g, { originX: view.pan.x, originY: view.pan.y, step, w, h, alpha: 0.04 });
+}