@talmolab/sleap-io.js 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,238 +1,20 @@
-// src/model/instance.ts
-var Track = class {
-  name;
-  constructor(name) {
-    this.name = name;
-  }
-};
-function pointsEmpty(length, names) {
-  const pts = [];
-  for (let i = 0; i < length; i += 1) {
-    pts.push({
-      xy: [Number.NaN, Number.NaN],
-      visible: false,
-      complete: false,
-      name: names?.[i]
-    });
-  }
-  return pts;
-}
-function predictedPointsEmpty(length, names) {
-  const pts = [];
-  for (let i = 0; i < length; i += 1) {
-    pts.push({
-      xy: [Number.NaN, Number.NaN],
-      visible: false,
-      complete: false,
-      score: Number.NaN,
-      name: names?.[i]
-    });
-  }
-  return pts;
-}
-function pointsFromArray(array, names) {
-  const pts = [];
-  for (let i = 0; i < array.length; i += 1) {
-    const row = array[i] ?? [Number.NaN, Number.NaN];
-    const visible = row.length > 2 ? Boolean(row[2]) : !Number.isNaN(row[0]);
-    const complete = row.length > 3 ? Boolean(row[3]) : false;
-    pts.push({ xy: [row[0] ?? Number.NaN, row[1] ?? Number.NaN], visible, complete, name: names?.[i] });
-  }
-  return pts;
-}
-function predictedPointsFromArray(array, names) {
-  const pts = [];
-  for (let i = 0; i < array.length; i += 1) {
-    const row = array[i] ?? [Number.NaN, Number.NaN, Number.NaN];
-    const visible = row.length > 3 ? Boolean(row[3]) : !Number.isNaN(row[0]);
-    const complete = row.length > 4 ? Boolean(row[4]) : false;
-    pts.push({
-      xy: [row[0] ?? Number.NaN, row[1] ?? Number.NaN],
-      score: row[2] ?? Number.NaN,
-      visible,
-      complete,
-      name: names?.[i]
-    });
-  }
-  return pts;
-}
-var Instance = class _Instance {
-  points;
-  skeleton;
-  track;
-  fromPredicted;
-  trackingScore;
-  constructor(options) {
-    this.skeleton = options.skeleton;
-    this.track = options.track ?? null;
-    this.fromPredicted = options.fromPredicted ?? null;
-    this.trackingScore = options.trackingScore ?? 0;
-    if (Array.isArray(options.points)) {
-      this.points = options.points;
-    } else {
-      this.points = pointsFromDict(options.points, options.skeleton);
-    }
-  }
-  static fromArray(points, skeleton) {
-    return new _Instance({ points: pointsFromArray(points, skeleton.nodeNames), skeleton });
-  }
-  static fromNumpy(options) {
-    return new _Instance({
-      points: pointsFromArray(options.pointsData, options.skeleton.nodeNames),
-      skeleton: options.skeleton,
-      track: options.track ?? null,
-      fromPredicted: options.fromPredicted ?? null,
-      trackingScore: options.trackingScore
-    });
-  }
-  static empty(options) {
-    return new _Instance({ points: pointsEmpty(options.skeleton.nodeNames.length, options.skeleton.nodeNames), skeleton: options.skeleton });
-  }
-  get length() {
-    return this.points.length;
-  }
-  get nVisible() {
-    return this.points.filter((point) => point.visible).length;
-  }
-  getPoint(target) {
-    if (typeof target === "number") {
-      if (target < 0 || target >= this.points.length) throw new Error("Point index out of range.");
-      return this.points[target];
-    }
-    if (typeof target === "string") {
-      const index2 = this.skeleton.index(target);
-      return this.points[index2];
-    }
-    const index = this.skeleton.index(target.name);
-    return this.points[index];
-  }
-  numpy(options) {
-    const invisibleAsNaN = options?.invisibleAsNaN ?? true;
-    return this.points.map((point) => {
-      if (invisibleAsNaN && !point.visible) {
-        return [Number.NaN, Number.NaN];
-      }
-      return [point.xy[0], point.xy[1]];
-    });
-  }
-  toString() {
-    const trackName = this.track ? `"${this.track.name}"` : "None";
-    return `Instance(points=${JSON.stringify(this.numpy({ invisibleAsNaN: false }))}, track=${trackName})`;
-  }
-  get isEmpty() {
-    return this.points.every((point) => !point.visible || Number.isNaN(point.xy[0]));
-  }
-  overlapsWith(other, iouThreshold = 0.1) {
-    const boxA = this.boundingBox();
-    const boxB = other.boundingBox();
-    if (!boxA || !boxB) return false;
-    const iou = intersectionOverUnion(boxA, boxB);
-    return iou >= iouThreshold;
-  }
-  boundingBox() {
-    const xs = [];
-    const ys = [];
-    for (const point of this.points) {
-      if (Number.isNaN(point.xy[0]) || Number.isNaN(point.xy[1])) continue;
-      xs.push(point.xy[0]);
-      ys.push(point.xy[1]);
-    }
-    if (!xs.length || !ys.length) return null;
-    const minX = Math.min(...xs);
-    const maxX = Math.max(...xs);
-    const minY = Math.min(...ys);
-    const maxY = Math.max(...ys);
-    return [minX, minY, maxX, maxY];
-  }
-};
-var PredictedInstance = class _PredictedInstance extends Instance {
-  score;
-  constructor(options) {
-    const { score = 0, ...rest } = options;
-    const pts = Array.isArray(rest.points) ? rest.points : predictedPointsFromDict(rest.points, rest.skeleton);
-    super({
-      points: pts,
-      skeleton: rest.skeleton,
-      track: rest.track,
-      trackingScore: rest.trackingScore
-    });
-    this.score = score;
-  }
-  static fromArray(points, skeleton, score) {
-    return new _PredictedInstance({
-      points: predictedPointsFromArray(points, skeleton.nodeNames),
-      skeleton,
-      score
-    });
-  }
-  static fromNumpy(options) {
-    return new _PredictedInstance({
-      points: predictedPointsFromArray(options.pointsData, options.skeleton.nodeNames),
-      skeleton: options.skeleton,
-      track: options.track ?? null,
-      score: options.score,
-      trackingScore: options.trackingScore
-    });
-  }
-  static empty(options) {
-    return new _PredictedInstance({ points: predictedPointsEmpty(options.skeleton.nodeNames.length, options.skeleton.nodeNames), skeleton: options.skeleton });
-  }
-  numpy(options) {
-    const invisibleAsNaN = options?.invisibleAsNaN ?? true;
-    return this.points.map((point) => {
-      const xy = invisibleAsNaN && !point.visible ? [Number.NaN, Number.NaN] : [point.xy[0], point.xy[1]];
-      if (options?.scores) {
-        return [xy[0], xy[1], point.score ?? 0];
-      }
-      return xy;
-    });
-  }
-  toString() {
-    const trackName = this.track ? `"${this.track.name}"` : "None";
-    return `PredictedInstance(points=${JSON.stringify(this.numpy({ invisibleAsNaN: false }))}, track=${trackName}, score=${this.score.toFixed(2)}, tracking_score=${this.trackingScore ?? "None"})`;
-  }
-};
-function pointsFromDict(pointsDict, skeleton) {
-  const points = pointsEmpty(skeleton.nodeNames.length, skeleton.nodeNames);
-  for (const [nodeName, data] of Object.entries(pointsDict)) {
-    const index = skeleton.index(nodeName);
-    points[index] = {
-      xy: [data[0] ?? Number.NaN, data[1] ?? Number.NaN],
-      visible: data.length > 2 ? Boolean(data[2]) : !Number.isNaN(data[0]),
-      complete: data.length > 3 ? Boolean(data[3]) : false,
-      name: nodeName
-    };
-  }
-  return points;
-}
-function predictedPointsFromDict(pointsDict, skeleton) {
-  const points = predictedPointsEmpty(skeleton.nodeNames.length, skeleton.nodeNames);
-  for (const [nodeName, data] of Object.entries(pointsDict)) {
-    const index = skeleton.index(nodeName);
-    points[index] = {
-      xy: [data[0] ?? Number.NaN, data[1] ?? Number.NaN],
-      score: data[2] ?? Number.NaN,
-      visible: data.length > 3 ? Boolean(data[3]) : !Number.isNaN(data[0]),
-      complete: data.length > 4 ? Boolean(data[4]) : false,
-      name: nodeName
-    };
-  }
-  return points;
-}
-function intersectionOverUnion(boxA, boxB) {
-  const [ax1, ay1, ax2, ay2] = boxA;
-  const [bx1, by1, bx2, by2] = boxB;
-  const interX1 = Math.max(ax1, bx1);
-  const interY1 = Math.max(ay1, by1);
-  const interX2 = Math.min(ax2, bx2);
-  const interY2 = Math.min(ay2, by2);
-  const interArea = Math.max(0, interX2 - interX1) * Math.max(0, interY2 - interY1);
-  const areaA = Math.max(0, ax2 - ax1) * Math.max(0, ay2 - ay1);
-  const areaB = Math.max(0, bx2 - bx1) * Math.max(0, by2 - by1);
-  const union = areaA + areaB - interArea;
-  if (union === 0) return 0;
-  return interArea / union;
-}
+import {
+  Edge,
+  Instance,
+  Node,
+  PredictedInstance,
+  Skeleton,
+  Symmetry,
+  Track,
+  parseJsonAttr,
+  parseSkeletons,
+  pointsEmpty,
+  pointsFromArray,
+  pointsFromDict,
+  predictedPointsEmpty,
+  predictedPointsFromArray,
+  predictedPointsFromDict
+} from "./chunk-CDU5QGU6.js";
 
 // src/model/labeled-frame.ts
 var LabeledFrame = class {
@@ -293,126 +75,6 @@ var LabeledFrame = class {
   }
 };
 
-// src/model/skeleton.ts
-var Node = class {
-  name;
-  constructor(name) {
-    this.name = name;
-  }
-};
-var Edge = class {
-  source;
-  destination;
-  constructor(source, destination) {
-    this.source = source;
-    this.destination = destination;
-  }
-  at(index) {
-    if (index === 0) return this.source;
-    if (index === 1) return this.destination;
-    throw new Error("Edge only has 2 nodes (source and destination).");
-  }
-};
-var Symmetry = class {
-  nodes;
-  constructor(nodes) {
-    const set = new Set(nodes);
-    if (set.size !== 2) {
-      throw new Error("Symmetry must contain exactly 2 nodes.");
-    }
-    this.nodes = set;
-  }
-  at(index) {
-    let i = 0;
-    for (const node of this.nodes) {
-      if (i === index) return node;
-      i += 1;
-    }
-    throw new Error("Symmetry index out of range.");
-  }
-};
-var Skeleton = class {
-  nodes;
-  edges;
-  symmetries;
-  name;
-  nameToNode;
-  nodeToIndex;
-  constructor(options) {
-    const resolved = Array.isArray(options) ? { nodes: options } : options;
-    this.nodes = resolved.nodes.map((node) => typeof node === "string" ? new Node(node) : node);
-    this.edges = [];
-    this.symmetries = [];
-    this.name = resolved.name;
-    this.nameToNode = /* @__PURE__ */ new Map();
-    this.nodeToIndex = /* @__PURE__ */ new Map();
-    this.rebuildCache();
-    if (resolved.edges) {
-      this.edges = resolved.edges.map((edge) => edge instanceof Edge ? edge : this.edgeFrom(edge));
-    }
-    if (resolved.symmetries) {
-      this.symmetries = resolved.symmetries.map(
-        (symmetry) => symmetry instanceof Symmetry ? symmetry : this.symmetryFrom(symmetry)
-      );
-    }
-  }
-  rebuildCache(nodes = this.nodes) {
-    this.nameToNode = new Map(nodes.map((node) => [node.name, node]));
-    this.nodeToIndex = new Map(nodes.map((node, index) => [node, index]));
-  }
-  get nodeNames() {
-    return this.nodes.map((node) => node.name);
-  }
-  index(node) {
-    if (typeof node === "number") return node;
-    if (typeof node === "string") {
-      const found = this.nameToNode.get(node);
-      if (!found) throw new Error(`Node '${node}' not found in skeleton.`);
-      return this.nodeToIndex.get(found) ?? -1;
-    }
-    const idx = this.nodeToIndex.get(node);
-    if (idx === void 0) throw new Error("Node not found in skeleton.");
-    return idx;
-  }
-  node(node) {
-    if (node instanceof Node) return node;
-    if (typeof node === "number") return this.nodes[node];
-    const found = this.nameToNode.get(node);
-    if (!found) throw new Error(`Node '${node}' not found in skeleton.`);
-    return found;
-  }
-  get edgeIndices() {
-    return this.edges.map((edge) => [this.index(edge.source), this.index(edge.destination)]);
-  }
-  get symmetryNames() {
-    return this.symmetries.map((symmetry) => {
-      const nodes = Array.from(symmetry.nodes).map((node) => node.name);
-      return [nodes[0], nodes[1]];
-    });
-  }
-  matches(other) {
-    if (this.nodeNames.length !== other.nodeNames.length) return false;
-    for (let i = 0; i < this.nodeNames.length; i += 1) {
-      if (this.nodeNames[i] !== other.nodeNames[i]) return false;
-    }
-    return true;
-  }
-  addEdge(source, destination) {
-    this.edges.push(new Edge(this.node(source), this.node(destination)));
-  }
-  addSymmetry(left, right) {
-    this.symmetries.push(new Symmetry([this.node(left), this.node(right)]));
-  }
-  edgeFrom(edge) {
-    const [source, destination] = edge;
-    return new Edge(this.node(source), this.node(destination));
-  }
-  symmetryFrom(symmetry) {
-    const [a, b] = symmetry;
-    return new Symmetry([this.node(a), this.node(b)]);
-  }
-};
-
 // src/model/video.ts
 var Video = class {
   filename;
@@ -1541,6 +1203,383 @@ var Mp4BoxVideoBackend = class {
   }
 };
 
+// src/codecs/slp/h5-worker.ts
+var H5_WORKER_CODE = `
+// h5wasm streaming worker
+// Uses createLazyFile for HTTP range request streaming
+
+let h5wasmModule = null;
+let FS = null;
+let currentFile = null;
+let mountPath = null;
+
+self.onmessage = async function(e) {
+  const { type, payload, id } = e.data;
+
+  try {
+    switch (type) {
+      case 'init':
+        await initH5Wasm(payload?.h5wasmUrl);
+        respond(id, { success: true });
+        break;
+
+      case 'openUrl':
+        const result = await openRemoteFile(payload.url, payload.filename);
+        respond(id, result);
+        break;
+
+      case 'getKeys':
+        const keys = getKeys(payload.path);
+        respond(id, { success: true, keys });
+        break;
+
+      case 'getAttr':
+        const attr = getAttr(payload.path, payload.name);
+        respond(id, { success: true, value: attr });
+        break;
+
+      case 'getAttrs':
+        const attrs = getAttrs(payload.path);
+        respond(id, { success: true, attrs });
+        break;
+
+      case 'getDatasetMeta':
+        const meta = getDatasetMeta(payload.path);
+        respond(id, { success: true, meta });
+        break;
+
+      case 'getDatasetValue':
+        const data = getDatasetValue(payload.path, payload.slice);
+        respond(id, { success: true, data }, data.transferables);
+        break;
+
+      case 'close':
+        closeFile();
+        respond(id, { success: true });
+        break;
+
+      default:
+        respond(id, { success: false, error: 'Unknown message type: ' + type });
+    }
+  } catch (error) {
+    respond(id, { success: false, error: error.message || String(error) });
+  }
+};
+
+function respond(id, data, transferables) {
+  if (transferables) {
+    self.postMessage({ id, ...data }, transferables);
+  } else {
+    self.postMessage({ id, ...data });
+  }
+}
+
+async function initH5Wasm(h5wasmUrl) {
+  if (h5wasmModule) return;
+
+  // Default to CDN if no URL provided
+  const url = h5wasmUrl || 'https://cdn.jsdelivr.net/npm/h5wasm@0.8.8/dist/iife/h5wasm.js';
+
+  // Import h5wasm IIFE
+  importScripts(url);
+
+  // Wait for module to be ready
+  const Module = await h5wasm.ready;
+  h5wasmModule = h5wasm;
+  FS = Module.FS;
+}
+
+async function openRemoteFile(url, filename = 'data.h5') {
+  if (!h5wasmModule) {
+    throw new Error('h5wasm not initialized');
+  }
+
+  // Close any existing file
+  closeFile();
+
+  // Create mount point
+  mountPath = '/remote-' + Date.now();
+  FS.mkdir(mountPath);
+
+  // Create lazy file - this enables range request streaming!
+  FS.createLazyFile(mountPath, filename, url, true, false);
+
+  // Open with h5wasm
+  const filePath = mountPath + '/' + filename;
+  currentFile = new h5wasm.File(filePath, 'r');
+
+  return {
+    success: true,
+    path: currentFile.path,
+    filename: currentFile.filename,
+    keys: currentFile.keys()
+  };
+}
+
+function getKeys(path) {
+  if (!currentFile) throw new Error('No file open');
+  const item = path === '/' || !path ? currentFile : currentFile.get(path);
+  if (!item) throw new Error('Path not found: ' + path);
+  return item.keys ? item.keys() : [];
+}
+
+function getAttr(path, name) {
+  if (!currentFile) throw new Error('No file open');
+  const item = path === '/' || !path ? currentFile : currentFile.get(path);
+  if (!item) throw new Error('Path not found: ' + path);
+  const attrs = item.attrs;
+  return attrs?.[name] || null;
+}
+
+function getAttrs(path) {
+  if (!currentFile) throw new Error('No file open');
+  const item = path === '/' || !path ? currentFile : currentFile.get(path);
+  if (!item) throw new Error('Path not found: ' + path);
+  return item.attrs || {};
+}
+
+function getDatasetMeta(path) {
+  if (!currentFile) throw new Error('No file open');
+  const dataset = currentFile.get(path);
+  if (!dataset) throw new Error('Dataset not found: ' + path);
+  return {
+    shape: dataset.shape,
+    dtype: dataset.dtype,
+    metadata: dataset.metadata
+  };
+}
+
+function getDatasetValue(path, slice) {
+  if (!currentFile) throw new Error('No file open');
+  const dataset = currentFile.get(path);
+  if (!dataset) throw new Error('Dataset not found: ' + path);
+
+  // Get value or slice
+  let value;
+  if (slice && Array.isArray(slice)) {
+    value = dataset.slice(slice);
+  } else {
+    value = dataset.value;
+  }
+
+  // Prepare for transfer
+  const transferables = [];
+  let transferValue = value;
+
+  if (ArrayBuffer.isView(value)) {
+    // TypedArray - transfer the underlying buffer
+    transferValue = {
+      type: 'typedarray',
+      dtype: value.constructor.name,
+      buffer: value.buffer,
+      byteOffset: value.byteOffset,
+      length: value.length
+    };
+    transferables.push(value.buffer);
+  } else if (value instanceof ArrayBuffer) {
+    transferValue = { type: 'arraybuffer', buffer: value };
+    transferables.push(value);
+  }
+
+  return {
+    value: transferValue,
+    shape: dataset.shape,
+    dtype: dataset.dtype,
+    transferables
+  };
+}
+
+function closeFile() {
+  if (currentFile) {
+    try { currentFile.close(); } catch (e) {}
+    currentFile = null;
+  }
+  if (mountPath && FS) {
+    try { FS.rmdir(mountPath); } catch (e) {}
+    mountPath = null;
+  }
+}
+`;
+function createH5Worker() {
+  const blob = new Blob([H5_WORKER_CODE], { type: "application/javascript" });
+  const url = URL.createObjectURL(blob);
+  const worker = new Worker(url);
+  worker.addEventListener(
+    "error",
+    () => {
+      URL.revokeObjectURL(url);
+    },
+    { once: true }
+  );
+  return worker;
+}
+
+// src/codecs/slp/h5-streaming.ts
+function reconstructValue(data) {
+  if (data && typeof data === "object" && "type" in data) {
+    const typed = data;
+    if (typed.type === "typedarray" && typed.buffer) {
+      const TypedArrayConstructor = getTypedArrayConstructor(typed.dtype || "Uint8Array");
+      return new TypedArrayConstructor(typed.buffer, typed.byteOffset || 0, typed.length);
+    }
+    if (typed.type === "arraybuffer" && typed.buffer) {
+      return typed.buffer;
+    }
+  }
+  return data;
+}
+function getTypedArrayConstructor(name) {
+  const constructors = {
+    Int8Array,
+    Uint8Array,
+    Uint8ClampedArray,
+    Int16Array,
+    Uint16Array,
+    Int32Array,
+    Uint32Array,
+    Float32Array,
+    Float64Array,
+    BigInt64Array,
+    BigUint64Array
+  };
+  return constructors[name] || Uint8Array;
+}
+var StreamingH5File = class {
+  worker;
+  messageId = 0;
+  pendingMessages = /* @__PURE__ */ new Map();
+  _keys = [];
+  _isOpen = false;
+  constructor() {
+    this.worker = createH5Worker();
+    this.worker.onmessage = this.handleMessage.bind(this);
+    this.worker.onerror = this.handleError.bind(this);
+  }
+  handleMessage(e) {
+    const { id, ...data } = e.data;
+    const pending = this.pendingMessages.get(id);
+    if (pending) {
+      this.pendingMessages.delete(id);
+      if (data.success) {
+        pending.resolve(e.data);
+      } else {
+        pending.reject(new Error(data.error || "Worker operation failed"));
+      }
+    }
+  }
+  handleError(e) {
+    console.error("[StreamingH5File] Worker error:", e.message);
+    for (const [id, pending] of this.pendingMessages) {
+      pending.reject(new Error(`Worker error: ${e.message}`));
+      this.pendingMessages.delete(id);
+    }
+  }
+  send(type, payload) {
+    return new Promise((resolve, reject) => {
+      const id = ++this.messageId;
+      this.pendingMessages.set(id, { resolve, reject });
+      this.worker.postMessage({ type, payload, id });
+    });
+  }
+  /**
+   * Initialize the h5wasm module in the worker.
+   */
+  async init(options) {
+    await this.send("init", { h5wasmUrl: options?.h5wasmUrl });
+  }
+  /**
+   * Open a remote HDF5 file for streaming access.
+   *
+   * @param url - URL to the HDF5 file (must support HTTP range requests)
+   * @param options - Optional settings
+   */
+  async open(url, options) {
+    await this.init(options);
+    const filename = options?.filenameHint || url.split("/").pop()?.split("?")[0] || "data.h5";
+    const result = await this.send("openUrl", { url, filename });
+    this._keys = result.keys || [];
+    this._isOpen = true;
+  }
+  /**
+   * Whether a file is currently open.
+   */
+  get isOpen() {
+    return this._isOpen;
+  }
+  /**
+   * Get the root-level keys in the file.
+   */
+  keys() {
+    return this._keys;
+  }
+  /**
+   * Get the keys (children) at a given path.
+   */
+  async getKeys(path) {
+    const result = await this.send("getKeys", { path });
+    return result.keys || [];
+  }
+  /**
+   * Get an attribute value.
+   */
+  async getAttr(path, name) {
+    const result = await this.send("getAttr", { path, name });
+    return result.value?.value ?? result.value;
+  }
+  /**
+   * Get all attributes at a path.
+   */
+  async getAttrs(path) {
+    const result = await this.send("getAttrs", { path });
+    return result.attrs || {};
+  }
+  /**
+   * Get dataset metadata (shape, dtype) without reading values.
+   */
+  async getDatasetMeta(path) {
+    const result = await this.send("getDatasetMeta", { path });
+    const meta = result.meta;
+    return meta;
+  }
+  /**
+   * Read a dataset's value.
+   *
+   * @param path - Path to the dataset
+   * @param slice - Optional slice specification (array of [start, end] pairs)
+   */
+  async getDatasetValue(path, slice) {
+    const result = await this.send("getDatasetValue", { path, slice });
+    const data = result.data;
+    return {
+      value: reconstructValue(data.value),
+      shape: data.shape,
+      dtype: data.dtype
+    };
+  }
+  /**
+   * Close the file and terminate the worker.
+   */
+  async close() {
+    if (this._isOpen) {
+      await this.send("close");
+      this._isOpen = false;
+    }
+    this.worker.terminate();
+    this._keys = [];
+  }
+};
+function isStreamingSupported() {
+  return typeof Worker !== "undefined" && typeof Blob !== "undefined" && typeof URL !== "undefined";
+}
+async function openStreamingH5(url, options) {
+  if (!isStreamingSupported()) {
+    throw new Error("Streaming HDF5 requires Web Worker support");
+  }
+  const file = new StreamingH5File();
+  await file.open(url, options);
+  return file;
+}
+
 // src/codecs/slp/h5.ts
 var isNode = typeof process !== "undefined" && !!process.versions?.node;
 var modulePromise = null;
@@ -1803,7 +1842,7 @@ async function readSlp(source, options) {
     const formatId = Number(metadataAttrs["format_id"]?.value ?? metadataAttrs["format_id"] ?? 1);
     const metadataJson = parseJsonAttr(metadataAttrs["json"]);
     const labelsPath = typeof source === "string" ? source : options?.h5?.filenameHint ?? "slp-data.slp";
-    const skeletons = readSkeletons(metadataJson);
+    const skeletons = parseSkeletons(metadataJson);
     const tracks = readTracks(file.get("tracks_json"));
     const videos = await readVideos(file.get("videos_json"), labelsPath, options?.openVideos ?? true, file);
     const suggestions = readSuggestions(file.get("suggestions_json"), videos);
@@ -1835,85 +1874,6 @@ async function readSlp(source, options) {
     close();
   }
 }
-function parseJsonAttr(attr) {
-  if (!attr) return null;
-  const value = attr.value ?? attr;
-  if (typeof value === "string") return JSON.parse(value);
-  if (value instanceof Uint8Array) return JSON.parse(textDecoder.decode(value));
-  if (value.buffer) return JSON.parse(textDecoder.decode(new Uint8Array(value.buffer)));
-  return JSON.parse(String(value));
-}
-function readSkeletons(metadataJson) {
-  if (!metadataJson) return [];
-  const nodeNames = (metadataJson.nodes ?? []).map((node) => node.name ?? node);
-  const skeletonEntries = metadataJson.skeletons ?? [];
-  const skeletons = [];
-  for (const entry of skeletonEntries) {
-    const edges = [];
-    const symmetries = [];
-    const typeCache = /* @__PURE__ */ new Map();
-    const typeState = { nextId: 1 };
-    const skeletonNodeIds = (entry.nodes ?? []).map((node) => Number(node.id ?? node));
-    const nodeOrder = skeletonNodeIds.length ? skeletonNodeIds : nodeNames.map((_, index) => index);
-    const nodes = nodeOrder.map((nodeId) => nodeNames[nodeId]).filter((name) => name !== void 0).map((name) => new Node(name));
-    const nodeIndexById = /* @__PURE__ */ new Map();
-    nodeOrder.forEach((nodeId, index) => {
-      nodeIndexById.set(Number(nodeId), index);
-    });
-    for (const link of entry.links ?? []) {
-      const source = Number(link.source);
-      const target = Number(link.target);
-      const edgeType = resolveEdgeType(link.type, typeCache, typeState);
-      if (edgeType === 2) {
-        symmetries.push([source, target]);
-      } else {
-        edges.push([source, target]);
-      }
-    }
-    const remapPair = (pair) => {
-      const sourceIndex = nodeIndexById.get(pair[0]);
-      const targetIndex = nodeIndexById.get(pair[1]);
-      if (sourceIndex === void 0 || targetIndex === void 0) return null;
-      return [sourceIndex, targetIndex];
-    };
-    const mappedEdges = edges.map(remapPair).filter((pair) => pair !== null);
-    const seenSymmetries = /* @__PURE__ */ new Set();
-    const mappedSymmetries = symmetries.map(remapPair).filter((pair) => pair !== null).filter(([a, b]) => {
-      const key = a < b ? `${a}-${b}` : `${b}-${a}`;
-      if (seenSymmetries.has(key)) return false;
-      seenSymmetries.add(key);
-      return true;
-    });
-    const skeleton = new Skeleton({
-      nodes,
-      edges: mappedEdges,
-      symmetries: mappedSymmetries,
-      name: entry.graph?.name ?? entry.name
-    });
-    skeletons.push(skeleton);
-  }
-  return skeletons;
-}
-function resolveEdgeType(edgeType, cache, state) {
-  if (!edgeType) return 1;
-  if (edgeType["py/reduce"]) {
-    const typeId = edgeType["py/reduce"][1]?.["py/tuple"]?.[0] ?? 1;
-    cache.set(state.nextId, typeId);
-    state.nextId += 1;
-    return typeId;
-  }
-  if (edgeType["py/tuple"]) {
-    const typeId = edgeType["py/tuple"][0] ?? 1;
-    cache.set(state.nextId, typeId);
-    state.nextId += 1;
-    return typeId;
-  }
-  if (edgeType["py/id"]) {
-    const pyId = edgeType["py/id"];
-    return cache.get(pyId) ?? pyId;
-  }
-  return 1;
-}
 function readTracks(dataset) {
   if (!dataset) return [];
   const values = dataset.value ?? [];
@@ -2653,41 +2613,827 @@ function encodeYamlSkeleton(skeletons) {
   });
   return YAML.stringify(payload);
 }
+
+// src/rendering/colors.ts
+var NAMED_COLORS = {
+  black: [0, 0, 0],
+  white: [255, 255, 255],
+  red: [255, 0, 0],
+  green: [0, 255, 0],
+  blue: [0, 0, 255],
+  yellow: [255, 255, 0],
+  cyan: [0, 255, 255],
+  magenta: [255, 0, 255],
+  gray: [128, 128, 128],
+  grey: [128, 128, 128],
+  orange: [255, 165, 0],
+  purple: [128, 0, 128],
+  pink: [255, 192, 203],
+  brown: [139, 69, 19]
+};
+var PALETTES = {
+  // MATLAB default colors
+  standard: [
+    [0, 114, 189],
+    [217, 83, 25],
+    [237, 177, 32],
+    [126, 47, 142],
+    [119, 172, 48],
+    [77, 190, 238],
+    [162, 20, 47]
+  ],
+  // Tableau 10
+  tableau10: [
+    [31, 119, 180],
+    [255, 127, 14],
+    [44, 160, 44],
+    [214, 39, 40],
+    [148, 103, 189],
+    [140, 86, 75],
+    [227, 119, 194],
+    [127, 127, 127],
+    [188, 189, 34],
+    [23, 190, 207]
+  ],
+  // High-contrast distinct colors (Glasbey-inspired, for many instances)
+  distinct: [
+    [230, 25, 75],
+    [60, 180, 75],
+    [255, 225, 25],
+    [67, 99, 216],
+    [245, 130, 49],
+    [145, 30, 180],
+    [66, 212, 244],
+    [240, 50, 230],
+    [191, 239, 69],
+    [250, 190, 212],
+    [70, 153, 144],
+    [220, 190, 255],
+    [154, 99, 36],
+    [255, 250, 200],
+    [128, 0, 0],
+    [170, 255, 195],
+    [128, 128, 0],
+    [255, 216, 177],
+    [0, 0, 117],
+    [169, 169, 169]
+  ],
+  // Viridis (10 samples)
+  viridis: [
+    [68, 1, 84],
+    [72, 40, 120],
+    [62, 74, 137],
+    [49, 104, 142],
+    [38, 130, 142],
+    [31, 158, 137],
+    [53, 183, 121],
+    [110, 206, 88],
+    [181, 222, 43],
+    [253, 231, 37]
+  ],
+  // Rainbow for node coloring
+  rainbow: [
+    [255, 0, 0],
+    [255, 127, 0],
+    [255, 255, 0],
+    [127, 255, 0],
+    [0, 255, 0],
+    [0, 255, 127],
+    [0, 255, 255],
+    [0, 127, 255],
+    [0, 0, 255],
+    [127, 0, 255],
+    [255, 0, 255],
+    [255, 0, 127]
+  ],
+  // Warm colors
+  warm: [
+    [255, 89, 94],
+    [255, 146, 76],
+    [255, 202, 58],
+    [255, 154, 0],
+    [255, 97, 56],
+    [255, 50, 50]
+  ],
+  // Cool colors
+  cool: [
+    [67, 170, 139],
+    [77, 144, 142],
+    [87, 117, 144],
+    [97, 90, 147],
+    [107, 63, 149],
+    [117, 36, 152]
+  ],
+  // Pastel colors
+  pastel: [
+    [255, 179, 186],
+    [255, 223, 186],
+    [255, 255, 186],
+    [186, 255, 201],
+    [186, 225, 255],
+    [219, 186, 255]
+  ],
+  // Seaborn-inspired
+  seaborn: [
+    [76, 114, 176],
+    [221, 132, 82],
+    [85, 168, 104],
+    [196, 78, 82],
+    [129, 114, 179],
+    [147, 120, 96],
+    [218, 139, 195],
+    [140, 140, 140],
+    [204, 185, 116],
+    [100, 181, 205]
+  ]
+};
+function getPalette(name, n) {
+  const palette = PALETTES[name];
+  if (!palette) {
+    throw new Error(`Unknown palette: ${name}`);
+  }
+  if (n <= palette.length) {
+    return palette.slice(0, n);
+  }
+  return Array.from({ length: n }, (_, i) => palette[i % palette.length]);
+}
+function resolveColor(color) {
+  if (Array.isArray(color)) {
+    if (color.length >= 3) {
+      return [color[0], color[1], color[2]];
+    }
+    throw new Error(`Invalid color array: ${color}`);
+  }
+  if (typeof color === "number") {
+    const v = Math.round(color);
+    return [v, v, v];
+  }
+  if (typeof color === "string") {
+    const s = color.trim().toLowerCase();
+    if (s in NAMED_COLORS) {
+      return NAMED_COLORS[s];
+    }
+    if (s.startsWith("#")) {
+      return hexToRgb(s);
+    }
+    const paletteMatch = s.match(/^(\w+)\[(\d+)\]$/);
+    if (paletteMatch) {
+      const [, paletteName, indexStr] = paletteMatch;
+      const palette = PALETTES[paletteName];
+      if (palette) {
+        const index = parseInt(indexStr, 10) % palette.length;
+        return palette[index];
+      }
+    }
+    const rgbMatch = s.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+    if (rgbMatch) {
+      return [
+        parseInt(rgbMatch[1], 10),
+        parseInt(rgbMatch[2], 10),
+        parseInt(rgbMatch[3], 10)
+      ];
+    }
+  }
+  throw new Error(`Cannot resolve color: ${color}`);
+}
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  if (h.length === 3) {
+    return [
+      parseInt(h[0] + h[0], 16),
+      parseInt(h[1] + h[1], 16),
+      parseInt(h[2] + h[2], 16)
+    ];
+  }
+  if (h.length === 6) {
+    return [
+      parseInt(h.slice(0, 2), 16),
+      parseInt(h.slice(2, 4), 16),
+      parseInt(h.slice(4, 6), 16)
+    ];
+  }
+  throw new Error(`Invalid hex color: ${hex}`);
+}
+function rgbToCSS(rgb, alpha = 1) {
+  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+}
+function determineColorScheme(scheme, hasTracks, isSingleImage) {
+  if (scheme !== "auto") {
+    return scheme;
+  }
+  if (hasTracks) {
+    return "track";
+  }
+  if (isSingleImage) {
+    return "instance";
+  }
+  return "node";
+}
+
+// src/rendering/shapes.ts
+function drawCircle(ctx, x, y, size, fillColor, edgeColor, edgeWidth = 1) {
+  ctx.beginPath();
+  ctx.arc(x, y, size, 0, Math.PI * 2);
+  ctx.fillStyle = fillColor;
+  ctx.fill();
+  if (edgeColor) {
+    ctx.strokeStyle = edgeColor;
+    ctx.lineWidth = edgeWidth;
+    ctx.stroke();
+  }
+}
+function drawSquare(ctx, x, y, size, fillColor, edgeColor, edgeWidth = 1) {
+  const half = size;
+  ctx.fillStyle = fillColor;
+  ctx.fillRect(x - half, y - half, half * 2, half * 2);
+  if (edgeColor) {
+    ctx.strokeStyle = edgeColor;
+    ctx.lineWidth = edgeWidth;
+    ctx.strokeRect(x - half, y - half, half * 2, half * 2);
+  }
+}
+function drawDiamond(ctx, x, y, size, fillColor, edgeColor, edgeWidth = 1) {
+  ctx.beginPath();
+  ctx.moveTo(x, y - size);
+  ctx.lineTo(x + size, y);
+  ctx.lineTo(x, y + size);
+  ctx.lineTo(x - size, y);
+  ctx.closePath();
+  ctx.fillStyle = fillColor;
+  ctx.fill();
+  if (edgeColor) {
+    ctx.strokeStyle = edgeColor;
+    ctx.lineWidth = edgeWidth;
+    ctx.stroke();
+  }
+}
+function drawTriangle(ctx, x, y, size, fillColor, edgeColor, edgeWidth = 1) {
+  const h = size * 0.866;
+  ctx.beginPath();
+  ctx.moveTo(x, y - size);
+  ctx.lineTo(x + size, y + h);
+  ctx.lineTo(x - size, y + h);
+  ctx.closePath();
+  ctx.fillStyle = fillColor;
+  ctx.fill();
+  if (edgeColor) {
+    ctx.strokeStyle = edgeColor;
+    ctx.lineWidth = edgeWidth;
+    ctx.stroke();
+  }
+}
+function drawCross(ctx, x, y, size, fillColor, _edgeColor, edgeWidth = 2) {
+  ctx.strokeStyle = fillColor;
+  ctx.lineWidth = edgeWidth;
+  ctx.lineCap = "round";
+  ctx.beginPath();
+  ctx.moveTo(x - size, y);
+  ctx.lineTo(x + size, y);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(x, y - size);
+  ctx.lineTo(x, y + size);
+  ctx.stroke();
+}
+var MARKER_FUNCTIONS = {
+  circle: drawCircle,
+  square: drawSquare,
+  diamond: drawDiamond,
+  triangle: drawTriangle,
+  cross: drawCross
+};
+function getMarkerFunction(shape) {
+  return MARKER_FUNCTIONS[shape];
+}
+
+// src/rendering/context.ts
+var RenderContext = class {
+  constructor(canvas, frameIdx, frameSize, instances, skeletonEdges, nodeNames, scale = 1, offset = [0, 0]) {
+    this.canvas = canvas;
+    this.frameIdx = frameIdx;
+    this.frameSize = frameSize;
+    this.instances = instances;
+    this.skeletonEdges = skeletonEdges;
+    this.nodeNames = nodeNames;
+    this.scale = scale;
+    this.offset = offset;
+  }
+  /**
+   * Transform world coordinates to canvas coordinates.
+   */
+  worldToCanvas(x, y) {
+    return [
+      (x - this.offset[0]) * this.scale,
+      (y - this.offset[1]) * this.scale
+    ];
+  }
+};
+var InstanceContext = class {
+  constructor(canvas, instanceIdx, points, skeletonEdges, nodeNames, trackIdx = null, trackName = null, confidence = null, scale = 1, offset = [0, 0]) {
+    this.canvas = canvas;
+    this.instanceIdx = instanceIdx;
+    this.points = points;
+    this.skeletonEdges = skeletonEdges;
+    this.nodeNames = nodeNames;
+    this.trackIdx = trackIdx;
+    this.trackName = trackName;
+    this.confidence = confidence;
+    this.scale = scale;
+    this.offset = offset;
+  }
+  /**
+   * Transform world coordinates to canvas coordinates.
+   */
+  worldToCanvas(x, y) {
+    return [
+      (x - this.offset[0]) * this.scale,
+      (y - this.offset[1]) * this.scale
+    ];
+  }
+  /**
+   * Get centroid of valid (non-NaN) points.
+   */
+  getCentroid() {
+    let sumX = 0, sumY = 0, count = 0;
+    for (const pt of this.points) {
+      const x = pt[0];
+      const y = pt[1];
+      if (!isNaN(x) && !isNaN(y)) {
+        sumX += x;
+        sumY += y;
+        count++;
+      }
+    }
+    if (count === 0) return null;
+    return [sumX / count, sumY / count];
+  }
+  /**
+   * Get bounding box of valid points.
+   * Returns [x1, y1, x2, y2] or null if no valid points.
+   */
+  getBbox() {
+    let minX = Infinity, minY = Infinity;
+    let maxX = -Infinity, maxY = -Infinity;
+    let hasValid = false;
+    for (const pt of this.points) {
+      const x = pt[0];
+      const y = pt[1];
+      if (!isNaN(x) && !isNaN(y)) {
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+        hasValid = true;
+      }
+    }
+    if (!hasValid) return null;
+    return [minX, minY, maxX, maxY];
+  }
+};
+
+// src/rendering/render.ts
+import { Canvas } from "skia-canvas";
+var DEFAULT_OPTIONS = {
+  colorBy: "auto",
+  palette: "standard",
+  markerShape: "circle",
+  markerSize: 4,
+  lineWidth: 2,
+  alpha: 1,
+  showNodes: true,
+  showEdges: true,
+  scale: 1,
+  background: "transparent"
+};
+var DEFAULT_COLOR = PALETTES.standard[0];
+async function renderImage(source, options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const { instances, skeleton, frameSize, frameIdx, tracks } = extractSourceData(source, opts);
+  if (instances.length === 0 && !opts.image) {
+    throw new Error(
+      "No instances to render and no background image provided"
+    );
+  }
+  const width = opts.image?.width ?? opts.width ?? frameSize[0];
+  const height = opts.image?.height ?? opts.height ?? frameSize[1];
+  if (!width || !height) {
+    throw new Error(
+      "Cannot determine frame size. Provide image, width/height options, or ensure source has frame data."
+    );
+  }
+  const scaledWidth = Math.round(width * opts.scale);
+  const scaledHeight = Math.round(height * opts.scale);
+  const canvas = new Canvas(scaledWidth, scaledHeight);
+  const ctx = canvas.getContext("2d");
+  if (opts.image) {
+    ctx.putImageData(opts.image, 0, 0);
+    if (opts.scale !== 1) {
+      const tempCanvas = new Canvas(opts.image.width, opts.image.height);
+      const tempCtx = tempCanvas.getContext("2d");
+      tempCtx.putImageData(opts.image, 0, 0);
+      ctx.clearRect(0, 0, scaledWidth, scaledHeight);
+      ctx.drawImage(tempCanvas, 0, 0, scaledWidth, scaledHeight);
+    }
+  } else if (opts.background !== "transparent") {
+    const bgColor = resolveColor(opts.background);
+    ctx.fillStyle = rgbToCSS(bgColor);
+    ctx.fillRect(0, 0, scaledWidth, scaledHeight);
+  }
+  const edgeInds = skeleton?.edgeIndices ?? [];
+  const nodeNames = skeleton?.nodeNames ?? [];
+  const hasTracks = instances.some((inst) => inst.track != null);
+  const colorScheme = determineColorScheme(opts.colorBy, hasTracks, true);
+  const colors = buildColorMap(
+    colorScheme,
+    instances,
+    nodeNames.length,
+    opts.palette,
+    tracks
+  );
+  const renderCtx = new RenderContext(
+    ctx,
+    frameIdx,
+    [width, height],
+    instances,
+    edgeInds,
+    nodeNames,
+    opts.scale,
+    [0, 0]
+  );
+  if (opts.preRenderCallback) {
+    opts.preRenderCallback(renderCtx);
+  }
+  const drawMarker = getMarkerFunction(opts.markerShape);
+  const scaledMarkerSize = opts.markerSize * opts.scale;
+  const scaledLineWidth = opts.lineWidth * opts.scale;
+  for (let instIdx = 0; instIdx < instances.length; instIdx++) {
+    const instance = instances[instIdx];
+    const points = getInstancePoints(instance);
+    const instanceColor = colors.instanceColors?.[instIdx] ?? colors.instanceColors?.[0] ?? DEFAULT_COLOR;
+    if (opts.showEdges) {
+      for (const [srcIdx, dstIdx] of edgeInds) {
+        const srcPt = points[srcIdx];
+        const dstPt = points[dstIdx];
+        if (!srcPt || !dstPt) continue;
+        const [x1, y1] = srcPt;
+        const [x2, y2] = dstPt;
+        if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2)) {
+          continue;
+        }
+        const edgeColor = colorScheme === "node" ? colors.nodeColors?.[dstIdx] ?? instanceColor : instanceColor;
+        ctx.strokeStyle = rgbToCSS(edgeColor, opts.alpha);
+        ctx.lineWidth = scaledLineWidth;
+        ctx.lineCap = "round";
+        ctx.beginPath();
+        ctx.moveTo(x1 * opts.scale, y1 * opts.scale);
+        ctx.lineTo(x2 * opts.scale, y2 * opts.scale);
+        ctx.stroke();
+      }
+    }
+    if (opts.showNodes) {
+      for (let nodeIdx = 0; nodeIdx < points.length; nodeIdx++) {
+        const pt = points[nodeIdx];
+        if (!pt) continue;
+        const [x, y] = pt;
+        if (isNaN(x) || isNaN(y)) {
+          continue;
+        }
+        const nodeColor = colorScheme === "node" ? colors.nodeColors?.[nodeIdx] ?? instanceColor : instanceColor;
+        drawMarker(
+          ctx,
+          x * opts.scale,
+          y * opts.scale,
+          scaledMarkerSize,
+          rgbToCSS(nodeColor, opts.alpha)
+        );
+      }
+    }
+    if (opts.perInstanceCallback) {
+      const trackIdx = instance.track ? tracks.indexOf(instance.track) : null;
+      const instCtx = new InstanceContext(
+        ctx,
+        instIdx,
+        points,
+        edgeInds,
+        nodeNames,
+        trackIdx !== -1 ? trackIdx : null,
+        instance.track?.name ?? null,
+        "score" in instance ? instance.score : null,
+        opts.scale,
+        [0, 0]
+      );
+      opts.perInstanceCallback(instCtx);
+    }
+  }
+  if (opts.postRenderCallback) {
+    opts.postRenderCallback(renderCtx);
+  }
+  return ctx.getImageData(0, 0, scaledWidth, scaledHeight);
+}
+function extractSourceData(source, options) {
+  if (Array.isArray(source)) {
+    const instances = source;
+    const skeleton2 = instances.length > 0 ? instances[0].skeleton : null;
+    const trackSet = /* @__PURE__ */ new Set();
+    for (const inst of instances) {
+      if (inst.track) trackSet.add(inst.track);
+    }
+    const tracks = Array.from(trackSet);
+    return {
+      instances,
+      skeleton: skeleton2,
+      frameSize: [options.width ?? 0, options.height ?? 0],
+      frameIdx: 0,
+      tracks
+    };
+  }
+  if ("instances" in source && "frameIdx" in source && !("labeledFrames" in source)) {
+    const frame = source;
+    const skeleton2 = frame.instances.length > 0 ? frame.instances[0].skeleton : null;
+    const trackSet = /* @__PURE__ */ new Set();
+    for (const inst of frame.instances) {
+      if (inst.track) trackSet.add(inst.track);
+    }
+    const tracks = Array.from(trackSet);
+    let frameSize2 = [options.width ?? 0, options.height ?? 0];
+    if (frame.video) {
+      const video = frame.video;
+      if ("width" in video && "height" in video) {
+        const w = video.width;
+        const h = video.height;
+        if (w && h) {
+          frameSize2 = [w, h];
+        }
+      }
+    }
+    return {
+      instances: frame.instances,
+      skeleton: skeleton2,
+      frameSize: frameSize2,
+      frameIdx: frame.frameIdx,
+      tracks
+    };
+  }
+  const labels = source;
+  if (labels.labeledFrames.length === 0) {
+    return {
+      instances: [],
+      skeleton: labels.skeletons?.[0] ?? null,
+      frameSize: [options.width ?? 0, options.height ?? 0],
+      frameIdx: 0,
+      tracks: labels.tracks ?? []
+    };
+  }
+  const firstFrame = labels.labeledFrames[0];
+  const skeleton = labels.skeletons?.[0] ?? (firstFrame.instances.length > 0 ? firstFrame.instances[0].skeleton : null);
+  let frameSize = [options.width ?? 0, options.height ?? 0];
+  if (firstFrame.video) {
+    const video = firstFrame.video;
+    if ("width" in video && "height" in video) {
+      const w = video.width;
+      const h = video.height;
+      if (w && h) {
+        frameSize = [w, h];
+      }
+    }
+  }
+  return {
+    instances: firstFrame.instances,
+    skeleton,
+    frameSize,
+    frameIdx: firstFrame.frameIdx,
+    tracks: labels.tracks ?? []
+  };
+}
+function getInstancePoints(instance) {
+  return instance.points.map((point) => [point.xy[0], point.xy[1]]);
+}
+function buildColorMap(scheme, instances, nNodes, paletteName, tracks) {
+  switch (scheme) {
+    case "instance":
+      return {
+        instanceColors: getPalette(
+          paletteName,
+          Math.max(1, instances.length)
+        )
+      };
+    case "track": {
+      const nTracks = Math.max(1, tracks.length);
+      const trackPalette = getPalette(paletteName, nTracks);
+      const instanceColors = instances.map((inst) => {
+        if (inst.track) {
+          const trackIdx = tracks.indexOf(inst.track);
+          if (trackIdx >= 0) {
+            return trackPalette[trackIdx % trackPalette.length];
+          }
+        }
+        return trackPalette[0];
+      });
+      return { instanceColors };
+    }
+    case "node":
+      return {
+        instanceColors: getPalette(paletteName, 1),
+        nodeColors: getPalette(paletteName, Math.max(1, nNodes))
+      };
+    default:
+      return {
+        instanceColors: getPalette(
+          paletteName,
+          Math.max(1, instances.length)
+        )
+      };
+  }
+}
+async function toPNG(imageData) {
+  const canvas = new Canvas(imageData.width, imageData.height);
+  const ctx = canvas.getContext("2d");
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toBuffer("png");
+}
+async function toJPEG(imageData, quality = 0.9) {
+  const canvas = new Canvas(imageData.width, imageData.height);
+  const ctx = canvas.getContext("2d");
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toBuffer("jpeg", { quality });
+}
+function toDataURL(imageData, format = "png") {
+  const canvas = new Canvas(imageData.width, imageData.height);
+  const ctx = canvas.getContext("2d");
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL(`image/${format}`);
+}
+async function saveImage(imageData, path) {
+  const canvas = new Canvas(imageData.width, imageData.height);
+  const ctx = canvas.getContext("2d");
+  ctx.putImageData(imageData, 0, 0);
+  await canvas.saveAs(path);
+}
+
+// src/rendering/video.ts
+import { spawn } from "child_process";
+async function checkFfmpeg() {
+  return new Promise((resolve) => {
+    const proc = spawn("ffmpeg", ["-version"]);
+    proc.on("error", () => resolve(false));
+    proc.on("close", (code) => resolve(code === 0));
+  });
+}
+async function renderVideo(source, outputPath, options = {}) {
+  const hasFfmpeg = await checkFfmpeg();
+  if (!hasFfmpeg) {
+    throw new Error(
+      "ffmpeg not found. Please install ffmpeg and ensure it is in your PATH.\nInstallation: https://ffmpeg.org/download.html"
+    );
+  }
+  const frames = Array.isArray(source) ? source : source.labeledFrames;
+  let selectedFrames = frames;
+  if (options.frameInds) {
+    selectedFrames = options.frameInds.map((i) => frames[i]).filter((f) => f !== void 0);
+  } else if (options.start !== void 0 || options.end !== void 0) {
+    const start = options.start ?? 0;
+    const end = options.end ?? frames.length;
+    selectedFrames = frames.slice(start, end);
+  }
+  if (selectedFrames.length === 0) {
+    throw new Error("No frames to render");
+  }
+  const firstImage = await renderImage(selectedFrames[0], options);
+  const width = firstImage.width;
+  const height = firstImage.height;
+  const fps = options.fps ?? 30;
+  const codec = options.codec ?? "libx264";
+  const crf = options.crf ?? 25;
+  const preset = options.preset ?? "superfast";
+  const ffmpegArgs = [
+    "-y",
+    // Overwrite output
+    "-f",
+    "rawvideo",
+    // Input format
+    "-pix_fmt",
+    "rgba",
+    // Input pixel format
+    "-s",
+    `${width}x${height}`,
+    // Frame size
+    "-r",
+    String(fps),
+    // Frame rate
+    "-i",
+    "pipe:0",
+    // Read from stdin
+    "-c:v",
+    codec,
+    // Video codec
+    "-pix_fmt",
+    "yuv420p"
+    // Output pixel format
+  ];
+  if (codec === "libx264") {
+    ffmpegArgs.push("-crf", String(crf), "-preset", preset);
+  }
+  ffmpegArgs.push(outputPath);
+  const ffmpeg = spawn("ffmpeg", ffmpegArgs, {
+    stdio: ["pipe", "pipe", "pipe"]
+  });
+  let ffmpegError = null;
+  ffmpeg.on("error", (err) => {
+    ffmpegError = err;
+  });
+  const total = selectedFrames.length;
+  for (let i = 0; i < selectedFrames.length; i++) {
+    if (ffmpegError) {
+      throw ffmpegError;
+    }
+    const frame = selectedFrames[i];
+    const imageData = await renderImage(frame, options);
+    const buffer = Buffer.from(imageData.data.buffer);
+    if (!ffmpeg.stdin) {
+      throw new Error("ffmpeg stdin not available");
+    }
+    const canWrite = ffmpeg.stdin.write(buffer);
+    if (!canWrite) {
+      await new Promise(
+        (resolve) => ffmpeg.stdin?.once("drain", resolve)
+      );
+    }
+    if (options.onProgress) {
+      options.onProgress(i + 1, total);
+    }
+  }
+  ffmpeg.stdin?.end();
+  return new Promise((resolve, reject) => {
+    ffmpeg.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`ffmpeg exited with code ${code}`));
+      }
+    });
+    ffmpeg.on("error", reject);
+  });
+}
 export {
   Camera,
   CameraGroup,
   Edge,
   FrameGroup,
   Instance,
+  InstanceContext,
   InstanceGroup,
   LabeledFrame,
   Labels,
   LabelsSet,
+  MARKER_FUNCTIONS,
   Mp4BoxVideoBackend,
+  NAMED_COLORS,
   Node,
+  PALETTES,
   PredictedInstance,
   RecordingSession,
+  RenderContext,
   Skeleton,
+  StreamingH5File,
   SuggestionFrame,
   Symmetry,
   Track,
   Video,
+  checkFfmpeg,
   decodeYamlSkeleton,
+  determineColorScheme,
+  drawCircle,
+  drawCross,
+  drawDiamond,
+  drawSquare,
+  drawTriangle,
   encodeYamlSkeleton,
   fromDict,
   fromNumpy,
+  getMarkerFunction,
+  getPalette,
+  isStreamingSupported,
   labelsFromNumpy,
   loadSlp,
   loadVideo,
   makeCameraFromDict,
+  openStreamingH5,
   pointsEmpty,
   pointsFromArray,
   pointsFromDict,
   predictedPointsEmpty,
   predictedPointsFromArray,
   predictedPointsFromDict,
+  renderImage,
+  renderVideo,
+  resolveColor,
+  rgbToCSS,
   rodriguesTransformation,
+  saveImage,
   saveSlp,
+  toDataURL,
   toDict,
-  toNumpy
+  toJPEG,
+  toNumpy,
+  toPNG
 };