@kgdiff/viewer 0.0.0-stage → 0.2.0

package/src/pipeline.ts

@@ -0,0 +1,179 @@
+/**
+ * Load pipeline: sources → (parse) → diff → layout, or a precomputed report → diff + layout.
+ * Each step is announced through `onStep`, which the controller awaits so the loading state
+ * can paint between the (synchronous, CPU-bound) steps.
+ */
+import {
+  type DiffResult,
+  diffFromJSON,
+  type GraphInput,
+  type GraphMeta,
+  isKGraph,
+  type KGraph,
+  KgdiffError,
+} from '@kgdiff/core';
+import { type LayoutOptions, type LayoutResult, layoutFromJSON } from '@kgdiff/layout';
+import { loadCompute } from './compute-loader.js';
+import { translate } from './i18n.js';
+import type { GraphSource, LoadOptions, ReportPayload } from './index.js';
+import { sanitizeView } from './prefs.js';
+
+export type LoadStep = 'parse' | 'match' | 'layout' | 'scene';
+
+export interface LoadedDiff {
+  readonly diff: DiffResult;
+  readonly layout: LayoutResult;
+  /** Options to reuse when the layout is extended. */
+  readonly layoutOptions: LayoutOptions | undefined;
+  readonly names: { readonly before: string; readonly after: string };
+  readonly versions: { readonly before?: string; readonly after?: string };
+  readonly title?: string;
+  /** Initial view preferences from a report. */
+  readonly view?: ReportPayload['view'];
+}
+
+type TextSource = Extract<GraphSource, { readonly text: string }>;
+
+function isTextSource(source: GraphSource): source is TextSource {
+  return typeof (source as Partial<TextSource>).text === 'string';
+}
+
+function isGraphInput(value: unknown): value is GraphInput {
+  if (typeof value !== 'object' || value === null) return false;
+  const v = value as Partial<GraphInput>;
+  return Array.isArray(v.nodes) && (v.edges === undefined || Array.isArray(v.edges));
+}
+
+type Formats = typeof import('@kgdiff/formats');
+
+let formatsPromise: Promise<Formats> | null = null;
+
+/** Loaded lazily so the standalone bundle (reports) never pays for the parsers. */
+function loadFormats(): Promise<Formats> {
+  formatsPromise ??= import('@kgdiff/formats').catch((error: unknown) => {
+    formatsPromise = null;
+    throw new KgdiffError('invalid-input', translate('en', 'error.formats'), {
+      cause: error instanceof Error ? error.message : String(error),
+    });
+  });
+  return formatsPromise;
+}
+
+interface Resolved {
+  readonly graph: GraphInput | KGraph;
+  readonly meta: GraphMeta;
+  readonly filename?: string;
+}
+
+async function resolveSource(source: GraphSource, side: 'before' | 'after'): Promise<Resolved> {
+  if (typeof source !== 'object' || source === null) {
+    throw new KgdiffError(
+      'invalid-input',
+      `load(): \`${side}\` must be a GraphInput, a KGraph or { text, filename }.`,
+    );
+  }
+  if (isTextSource(source)) {
+    const { parseGraph } = await loadFormats();
+    const parsed = parseGraph(source.text, {
+      ...source.parse,
+      ...(source.filename !== undefined ? { filename: source.filename } : {}),
+    });
+    return {
+      graph: parsed.graph,
+      meta: parsed.graph.meta ?? {},
+      ...(source.filename !== undefined ? { filename: source.filename } : {}),
+    };
+  }
+  if (isKGraph(source)) return { graph: source, meta: source.meta };
+  if (isGraphInput(source)) return { graph: source, meta: source.meta ?? {} };
+  throw new KgdiffError(
+    'invalid-input',
+    `load(): \`${side}\` must be a GraphInput ({ nodes, edges }), a KGraph or { text, filename }.`,
+  );
+}
+
+function baseName(path: string): string {
+  const clean = path.split(/[?#]/)[0] ?? path;
+  return clean.slice(Math.max(clean.lastIndexOf('/'), clean.lastIndexOf('\\')) + 1) || path;
+}
+
+function str(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() !== '' ? value.trim() : undefined;
+}
+
+/** Display name of a version: explicit name, graph name, file name, else the side. */
+export function versionName(
+  meta: GraphMeta,
+  side: 'before' | 'after',
+  explicit?: string,
+  filename?: string,
+): string {
+  return (
+    str(explicit) ??
+    str(meta.name) ??
+    (filename ? baseName(filename) : undefined) ??
+    (str(meta.source) ? baseName(meta.source as string) : undefined) ??
+    side
+  );
+}
+
+export async function runLoad(
+  options: LoadOptions,
+  onStep: (step: LoadStep) => Promise<void>,
+): Promise<LoadedDiff> {
+  if (typeof options !== 'object' || options === null) {
+    throw new KgdiffError('invalid-input', 'load() expects { before, after, … }.');
+  }
+  const { before, after } = options;
+  if (before === undefined || after === undefined) {
+    throw new KgdiffError('invalid-input', 'load() needs both `before` and `after`.');
+  }
+  const computing = loadCompute();
+  if (isTextSource(before) || isTextSource(after)) await onStep('parse');
+  const b = await resolveSource(before, 'before');
+  const a = await resolveSource(after, 'after');
+  const compute = await computing;
+  await onStep('match');
+  const diff = compute.diff(b.graph, a.graph, options.diff);
+  await onStep('layout');
+  const layout = compute.layoutDiff(diff, options.layout);
+  const vb = str(diff.before.meta.version);
+  const va = str(diff.after.meta.version);
+  return {
+    diff,
+    layout,
+    layoutOptions: options.layout,
+    names: {
+      before: versionName(b.meta, 'before', options.names?.before, b.filename),
+      after: versionName(a.meta, 'after', options.names?.after, a.filename),
+    },
+    versions: { ...(vb ? { before: vb } : {}), ...(va ? { after: va } : {}) },
+    ...(str(options.title) ? { title: str(options.title) as string } : {}),
+  };
+}
+
+export async function readPayload(
+  payload: ReportPayload,
+  onStep: (step: LoadStep) => Promise<void>,
+): Promise<LoadedDiff> {
+  await onStep('match');
+  const diff = diffFromJSON(payload.diff);
+  await onStep('layout');
+  const layout = layoutFromJSON(payload.layout);
+  const vb = str(diff.before.meta.version);
+  const va = str(diff.after.meta.version);
+  const meta = payload.meta;
+  const view = sanitizeView(payload.view);
+  return {
+    diff,
+    layout,
+    layoutOptions: undefined,
+    names: {
+      before: versionName(diff.before.meta, 'before', meta?.before?.name),
+      after: versionName(diff.after.meta, 'after', meta?.after?.name),
+    },
+    versions: { ...(vb ? { before: vb } : {}), ...(va ? { after: va } : {}) },
+    ...(str(meta?.title) ? { title: str(meta?.title) as string } : {}),
+    ...(view ? { view } : {}),
+  };
+}

package/src/prefs.ts

@@ -0,0 +1,55 @@
+/**
+ * The one place viewer preferences are validated: attributes, properties and a report's `view`
+ * all go through these. Invalid values never reach the controller (they fall back, with a
+ * console warning for payloads, which come from files rather than code).
+ */
+import type { Locale } from '@kgdiff/core';
+import type { PaletteName } from '@kgdiff/scene';
+import { normalizeLocale } from './i18n.js';
+import type { ReportPayload, ThemePreference, ViewerMode } from './index.js';
+
+const MODES: readonly ViewerMode[] = ['overlay', 'swipe', 'replay', 'changes'];
+const THEMES: readonly ThemePreference[] = ['auto', 'light', 'dark'];
+const PALETTES: readonly PaletteName[] = ['default', 'colorblind'];
+
+export const THEME_PREFERENCES = THEMES;
+
+export function toMode(value: unknown): ViewerMode | null {
+  return MODES.includes(value as ViewerMode) ? (value as ViewerMode) : null;
+}
+
+export function toTheme(value: unknown): ThemePreference | null {
+  return THEMES.includes(value as ThemePreference) ? (value as ThemePreference) : null;
+}
+
+export function toPalette(value: unknown): PaletteName | null {
+  return PALETTES.includes(value as PaletteName) ? (value as PaletteName) : null;
+}
+
+export function toLocale(value: unknown): Locale | null {
+  return typeof value === 'string' ? normalizeLocale(value) : null;
+}
+
+type View = NonNullable<ReportPayload['view']>;
+
+/** Keep only the valid fields of a report's `view` (warning about the rest). */
+export function sanitizeView(view: unknown): View | undefined {
+  if (typeof view !== 'object' || view === null) return undefined;
+  const v = view as Record<string, unknown>;
+  const mode = toMode(v.mode);
+  const theme = toTheme(v.theme);
+  const palette = toPalette(v.palette);
+  const locale = toLocale(v.locale);
+  const dropped = (['mode', 'theme', 'palette', 'locale'] as const).filter(
+    (k) => v[k] !== undefined && { mode, theme, palette, locale }[k] === null,
+  );
+  if (dropped.length > 0 && typeof console !== 'undefined') {
+    console.warn(`[kgdiff] ignoring invalid report view preferences: ${dropped.join(', ')}`);
+  }
+  return {
+    ...(mode ? { mode } : {}),
+    ...(theme ? { theme } : {}),
+    ...(palette ? { palette } : {}),
+    ...(locale ? { locale } : {}),
+  };
+}

package/src/registry.ts

@@ -0,0 +1,2 @@
+/** Tag names `<kgdiff-viewer>` is registered under (lower case), for payload targeting. */
+export const viewerTags = new Set<string>();

package/src/renderer-port.ts

@@ -0,0 +1,31 @@
+/**
+ * The seam between the viewer and `@kgdiff/renderer`. The controller only talks to the
+ * `Renderer` / `Minimap` interfaces, and tests swap in a recording mock (there is no canvas in
+ * happy-dom) with `setRenderBackend`.
+ */
+import {
+  createMinimap,
+  createRenderer,
+  type Minimap,
+  type MinimapOptions,
+  type Renderer,
+  type RendererOptions,
+} from '@kgdiff/renderer';
+
+export interface RenderBackend {
+  createRenderer(container: HTMLElement, options: RendererOptions): Renderer;
+  createMinimap(container: HTMLElement, renderer: Renderer, options?: MinimapOptions): Minimap;
+}
+
+const defaultBackend: RenderBackend = { createRenderer, createMinimap };
+
+let backend: RenderBackend = defaultBackend;
+
+export function renderBackend(): RenderBackend {
+  return backend;
+}
+
+/** Replace the rendering backend (tests). `null` restores the canvas renderer. */
+export function setRenderBackend(next: RenderBackend | null): void {
+  backend = next ?? defaultBackend;
+}

package/src/replay.ts

@@ -0,0 +1,163 @@
+/**
+ * Replay clock: pure time arithmetic over a scene `Timeline` (no timers). The controller
+ * advances it from its animation-frame loop.
+ */
+import type { Timeline } from '@kgdiff/scene';
+
+export const SPEEDS = [0.5, 1, 2, 4] as const;
+export type ReplaySpeed = (typeof SPEEDS)[number];
+
+/** Times closer than this (ms) count as equal when stepping. */
+const EPS = 0.5;
+/** A frame gap longer than this (tab in background, debugger) advances at most this much. */
+export const MAX_FRAME_MS = 100;
+
+export class ReplayClock {
+  #time = 0;
+  #rate: ReplaySpeed = 1;
+  #running = false;
+  /** Sorted, distinct stop times for stepping (window or chapter ends). */
+  readonly #stops: readonly number[];
+  readonly #starts: Float64Array;
+
+  constructor(readonly timeline: Timeline) {
+    const ends =
+      timeline.mode === 'chapters'
+        ? timeline.chapters.map((c) => c.end)
+        : timeline.windows.map((w) => w.end);
+    this.#stops = [...new Set(ends)].sort((a, b) => a - b);
+    this.#starts = Float64Array.from(timeline.windows.map((w) => w.start)).sort();
+  }
+
+  get t(): number {
+    return this.#time;
+  }
+
+  get duration(): number {
+    return this.timeline.duration;
+  }
+
+  get speed(): ReplaySpeed {
+    return this.#rate;
+  }
+
+  get playing(): boolean {
+    return this.#running;
+  }
+
+  /** At the end and not playing. */
+  get finished(): boolean {
+    return !this.#running && this.duration > 0 && this.#time >= this.duration;
+  }
+
+  /** Normalized position in [0, 1]. */
+  get progress(): number {
+    return this.duration > 0 ? this.#time / this.duration : 0;
+  }
+
+  setSpeed(speed: number): void {
+    const s = SPEEDS.find((x) => x === speed);
+    if (s !== undefined) this.#rate = s;
+  }
+
+  /** Next speed in `SPEEDS`, wrapping around. */
+  cycleSpeed(): ReplaySpeed {
+    const i = SPEEDS.indexOf(this.#rate);
+    this.#rate = SPEEDS[(i + 1) % SPEEDS.length] as ReplaySpeed;
+    return this.#rate;
+  }
+
+  /** Start playing; a finished replay restarts from 0. No-op for an empty timeline. */
+  play(): void {
+    if (this.duration <= 0) return;
+    if (this.#time >= this.duration) this.#time = 0;
+    this.#running = true;
+  }
+
+  pause(): void {
+    this.#running = false;
+  }
+
+  seek(t: number): void {
+    this.#time = Number.isFinite(t) ? Math.min(this.duration, Math.max(0, t)) : 0;
+  }
+
+  /**
+   * Advance by a real-time delta (ms, capped at `MAX_FRAME_MS`) scaled by the speed. Stops at
+   * the end. Returns whether time moved.
+   */
+  advance(dt: number): boolean {
+    if (!this.#running || !(dt > 0)) return false;
+    const before = this.#time;
+    this.#time = Math.min(this.duration, this.#time + Math.min(dt, MAX_FRAME_MS) * this.#rate);
+    if (this.#time >= this.duration) this.#running = false;
+    return this.#time !== before;
+  }
+
+  /**
+   * Seek to the next (+1) / previous (−1) stop: the end of a hunk window (`hunks` timelines) or
+   * of a chapter (`chapters`). Backwards from the first stop goes to 0. Pauses playback.
+   */
+  step(direction: 1 | -1): void {
+    this.#running = false;
+    const t = this.#time;
+    if (direction > 0) {
+      const next = this.#stops.find((s) => s > t + EPS);
+      this.#time = next ?? this.duration;
+    } else {
+      let prev = 0;
+      for (const s of this.#stops) {
+        if (s < t - EPS) prev = s;
+        else break;
+      }
+      this.#time = prev;
+    }
+  }
+
+  /** End of hunk `h`'s window (where selecting it in the list seeks to), or null. */
+  windowEnd(h: number): number | null {
+    const w = this.timeline.windows.find((x) => x.hunk === h);
+    return w === undefined ? null : w.end;
+  }
+
+  /** Number of windows that have started (strictly before `t`): the `3` in `3 / 23`. */
+  position(t = this.#time): number {
+    let lo = 0;
+    let hi = this.#starts.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if ((this.#starts[mid] as number) < t) lo = mid + 1;
+      else hi = mid;
+    }
+    return lo;
+  }
+
+  get total(): number {
+    return this.timeline.windows.length;
+  }
+
+  /**
+   * What the camera follows at `t`: in `hunks` mode the hunk whose window contains `t` (the latest
+   * started), in `chapters` mode the chapter containing `t`. `-1` between windows.
+   */
+  activeTarget(t = this.#time): { readonly kind: 'hunk' | 'chapter'; readonly index: number } {
+    if (this.timeline.mode === 'chapters') {
+      const c = this.timeline.chapters.findIndex((x) => t >= x.start && t < x.end);
+      return { kind: 'chapter', index: c };
+    }
+    return { kind: 'hunk', index: this.activeHunk(t) };
+  }
+
+  /** The hunk whose window is playing at `t` (latest started), or -1. */
+  activeHunk(t = this.#time): number {
+    let best = -1;
+    let bestStart = Number.NEGATIVE_INFINITY;
+    for (const w of this.timeline.windows) {
+      if (t >= w.start && t < w.end && w.start >= bestStart) {
+        best = w.hunk;
+        bestStart = w.start;
+      }
+    }
+    return best;
+  }
+}

package/src/review-store.ts

@@ -0,0 +1,125 @@
+/**
+ * Review progress: which hunks were marked reviewed, persisted in `localStorage` per diff
+ * (`kgdiff:review:<base hash>→<target hash>`). Storage failures (private mode, quota, sandboxed
+ * iframes) never break the viewer: the state simply stays in memory.
+ */
+import type { ReviewState } from './index.js';
+
+export const STORAGE_PREFIX = 'kgdiff:review:';
+
+export type StorageLike = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
+
+export function reviewKey(baseHash: string, targetHash: string): string {
+  return `${STORAGE_PREFIX}${baseHash}→${targetHash}`;
+}
+
+/** `window.localStorage`, or null when unavailable / blocked. */
+export function defaultStorage(): StorageLike | null {
+  try {
+    return typeof localStorage !== 'undefined' ? localStorage : null;
+  } catch {
+    return null;
+  }
+}
+
+export class ReviewStore {
+  #reviewed: string[] = [];
+  #set = new Set<string>();
+  /** Ids from storage this diff does not have (another hunking version): kept, never shown. */
+  #foreign: string[] = [];
+  readonly #known: ReadonlySet<string>;
+  readonly #storage: StorageLike | null;
+  readonly #key: string | null;
+  readonly #valid: readonly string[];
+
+  /**
+   * @param key storage key (`reviewKey`), or null to keep the state in memory only.
+   * @param valid hunk ids of the current diff; stored ids it does not have are preserved.
+   */
+  constructor(storage: StorageLike | null, key: string | null, valid: readonly string[]) {
+    this.#storage = storage;
+    this.#key = key;
+    this.#valid = valid;
+    this.#known = new Set(valid);
+    this.#load();
+  }
+
+  #load(): void {
+    this.#reviewed = [];
+    this.#set = new Set();
+    this.#foreign = [];
+    for (const id of this.#read()) {
+      if (this.#set.has(id) || this.#foreign.includes(id)) continue;
+      if (this.#known.has(id)) {
+        this.#set.add(id);
+        this.#reviewed.push(id);
+      } else this.#foreign.push(id);
+    }
+  }
+
+  /**
+   * Re-read storage after a `storage` event for `key` (null: everything changed). Returns
+   * whether the visible state changed.
+   */
+  reload(key: string | null): boolean {
+    if (key !== null && key !== this.#key) return false;
+    const before = this.#reviewed.join('\n');
+    this.#load();
+    return this.#reviewed.join('\n') !== before;
+  }
+
+  has(id: string): boolean {
+    return this.#set.has(id);
+  }
+
+  get size(): number {
+    return this.#reviewed.length;
+  }
+
+  /** Returns true when the state changed. Unknown ids are ignored. */
+  setReviewed(id: string, reviewed: boolean): boolean {
+    if (reviewed === this.#set.has(id)) return false;
+    if (reviewed) {
+      if (!this.#known.has(id)) return false;
+      this.#set.add(id);
+      this.#reviewed.push(id);
+    } else {
+      this.#set.delete(id);
+      this.#reviewed.splice(this.#reviewed.indexOf(id), 1);
+    }
+    this.#write();
+    return true;
+  }
+
+  state(): ReviewState {
+    return { reviewed: [...this.#reviewed], total: this.#valid.length };
+  }
+
+  #read(): string[] {
+    if (!this.#storage || !this.#key) return [];
+    try {
+      const raw = this.#storage.getItem(this.#key);
+      if (!raw) return [];
+      const parsed: unknown = JSON.parse(raw);
+      const list = Array.isArray(parsed)
+        ? parsed
+        : typeof parsed === 'object' && parsed !== null && 'reviewed' in parsed
+          ? (parsed as { reviewed: unknown }).reviewed
+          : [];
+      return Array.isArray(list) ? list.filter((x): x is string => typeof x === 'string') : [];
+    } catch {
+      return [];
+    }
+  }
+
+  #write(): void {
+    if (!this.#storage || !this.#key) return;
+    try {
+      const all = [...this.#reviewed, ...this.#foreign];
+      if (all.length === 0) this.#storage.removeItem(this.#key);
+      else this.#storage.setItem(this.#key, JSON.stringify({ v: 1, reviewed: all }));
+    } catch {
+      // Quota exceeded or storage blocked: keep the in-memory state.
+    }
+  }
+}

package/src/search.ts

@@ -0,0 +1,113 @@
+/**
+ * Node search for the sidebar: fuzzy match over labels, aliases and ids of every union node
+ * (including nodes outside a `changes`-scoped layout).
+ *
+ * Scoring per candidate string (higher is better): exact 1000, prefix 800, word-start 600,
+ * substring 400 (earlier is better), then subsequence (gaps cost). Labels outrank aliases
+ * outrank ids; changed nodes win ties.
+ */
+import type { DiffResult, UnionNode } from '@kgdiff/core';
+
+export interface SearchHit {
+  readonly node: UnionNode;
+  readonly score: number;
+  /** The text that matched (label, alias or id). */
+  readonly matched: string;
+  readonly field: 'label' | 'alias' | 'id';
+}
+
+interface Entry {
+  readonly node: UnionNode;
+  readonly texts: readonly string[];
+  readonly folded: readonly string[];
+  readonly fields: readonly SearchHit['field'][];
+}
+
+export function fold(text: string): string {
+  return text.normalize('NFKC').toLowerCase();
+}
+
+const WORD_BREAK = /[\s_\-./:#|()[\]{}「」“”"'’,;]/;
+
+export function scoreText(query: string, text: string): number {
+  if (query === '') return 0;
+  if (text === query) return 1000;
+  if (text.startsWith(query)) return 800 - Math.min(100, text.length - query.length);
+  const at = text.indexOf(query);
+  if (at > 0) {
+    const wordStart = WORD_BREAK.test(text[at - 1] ?? '');
+    return (wordStart ? 600 : 400) - Math.min(150, at);
+  }
+  // Subsequence: every query character in order; contiguous runs and word starts score.
+  let score = 200;
+  let ti = 0;
+  let prev = -2;
+  for (const ch of query) {
+    const found = text.indexOf(ch, ti);
+    if (found < 0) return 0;
+    if (found !== prev + 1) score -= Math.min(20, found - ti + 2);
+    if (found === 0 || WORD_BREAK.test(text[found - 1] ?? '')) score += 6;
+    prev = found;
+    ti = found + 1;
+  }
+  return Math.max(1, score);
+}
+
+export class SearchIndex {
+  readonly #entries: Entry[];
+
+  constructor(diff: DiffResult) {
+    this.#entries = diff.nodes.map((node) => {
+      const texts: string[] = [node.label];
+      const fields: SearchHit['field'][] = ['label'];
+      const add = (text: string | undefined, field: SearchHit['field']): void => {
+        if (text && !texts.includes(text)) {
+          texts.push(text);
+          fields.push(field);
+        }
+      };
+      add(node.before?.label, 'label');
+      for (const a of node.after?.aliases ?? []) add(a, 'alias');
+      for (const a of node.before?.aliases ?? []) add(a, 'alias');
+      add(node.afterId, 'id');
+      add(node.beforeId, 'id');
+      add(node.id, 'id');
+      return { node, texts, folded: texts.map(fold), fields };
+    });
+  }
+
+  /** Best `limit` hits for `query` (trimmed, case- and width-insensitive). O(N · |text|). */
+  search(query: string, limit = 50): SearchHit[] {
+    const q = fold(query.trim());
+    if (q === '') return [];
+    const hits: SearchHit[] = [];
+    for (const e of this.#entries) {
+      let best = 0;
+      let bi = 0;
+      for (let i = 0; i < e.folded.length; i++) {
+        const field = e.fields[i];
+        const weight = field === 'label' ? 0 : field === 'alias' ? 40 : 60;
+        const s = scoreText(q, e.folded[i] as string);
+        if (s > 0 && s - weight > best) {
+          best = s - weight;
+          bi = i;
+        }
+      }
+      if (best > 0) {
+        hits.push({
+          node: e.node,
+          score: best + (e.node.status === 'unchanged' ? 0 : 1),
+          matched: e.texts[bi] as string,
+          field: e.fields[bi] as SearchHit['field'],
+        });
+      }
+    }
+    hits.sort(
+      (a, b) =>
+        b.score - a.score ||
+        a.node.label.length - b.node.label.length ||
+        (a.node.id < b.node.id ? -1 : a.node.id > b.node.id ? 1 : 0),
+    );
+    return hits.slice(0, limit);
+  }
+}

package/src/standalone-compute.ts

@@ -0,0 +1,8 @@
+/**
+ * Entry of the optional standalone add-on (`dist/standalone/kgdiff-viewer-compute.js`): makes
+ * the compute module (diff engine + force layout) available to the standalone viewer.
+ */
+import * as compute from './compute.js';
+import { COMPUTE_GLOBAL } from './compute-loader.js';
+
+(globalThis as Record<string, unknown>)[COMPUTE_GLOBAL] = compute;