@expofp/renderer 1.2.1

package/dist/index.js

@@ -0,0 +1,3098 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Vector4, DoubleSide, MeshBasicMaterial, Texture, Quaternion, Group, PlaneGeometry, SRGBColorSpace, Vector2, BufferGeometry, LinearSRGBColorSpace, Mesh, Raycaster, Sphere, Box3, Spherical, PerspectiveCamera, Scene, Plane, Clock, WebGLRenderer } from "three";
+import { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
+import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
+import { LineMaterial, LineSegmentsGeometry } from "three/examples/jsm/Addons.js";
+import { MaxRectsPacker, Rectangle } from "maxrects-packer";
+import { converter, parse } from "culori";
+import CameraController from "camera-controls";
+import { EventManager, Rotate } from "mjolnir.js";
+import { DEG2RAD, RAD2DEG } from "three/src/math/MathUtils.js";
+function isObject(item) {
+  return !!item && typeof item === "object" && !Array.isArray(item);
+}
+function deepMerge(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+  if (source === void 0) {
+    return target;
+  }
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) {
+          Object.assign(target, { [key]: {} });
+        }
+        deepMerge(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return deepMerge(target, ...sources);
+}
+function getSquareTextureSize(capacity, pixelsPerInstance) {
+  return Math.max(pixelsPerInstance, Math.ceil(Math.sqrt(capacity / pixelsPerInstance)) * pixelsPerInstance);
+}
+function getSquareTextureInfo(arrayType, channels, pixelsPerInstance, capacity) {
+  if (channels === 3) {
+    console.warn('"channels" cannot be 3. Set to 4. More info: https://github.com/mrdoob/three.js/pull/23228');
+    channels = 4;
+  }
+  const size = getSquareTextureSize(capacity, pixelsPerInstance);
+  const array = new arrayType(size * size * channels);
+  const isFloat = arrayType.name.includes("Float");
+  const isUnsignedInt = arrayType.name.includes("Uint");
+  const type = isFloat ? FloatType : isUnsignedInt ? UnsignedIntType : IntType;
+  let format;
+  switch (channels) {
+    case 1:
+      format = isFloat ? RedFormat : RedIntegerFormat;
+      break;
+    case 2:
+      format = isFloat ? RGFormat : RGIntegerFormat;
+      break;
+    case 4:
+      format = isFloat ? RGBAFormat : RGBAIntegerFormat;
+      break;
+  }
+  return { array, size, type, format };
+}
+class SquareDataTexture extends DataTexture {
+  /**
+   * @param arrayType The constructor for the TypedArray.
+   * @param channels The number of channels in the texture.
+   * @param pixelsPerInstance The number of pixels required for each instance.
+   * @param capacity The total number of instances.
+   * @param uniformMap Optional map for handling uniform values.
+   * @param fetchInFragmentShader Optional flag that determines if uniform values should be fetched in the fragment shader instead of the vertex shader.
+   */
+  constructor(arrayType, channels, pixelsPerInstance, capacity, uniformMap, fetchInFragmentShader) {
+    if (channels === 3) channels = 4;
+    const { array, format, size, type } = getSquareTextureInfo(arrayType, channels, pixelsPerInstance, capacity);
+    super(array, size, size, format, type);
+    __publicField(this, "data");
+    __publicField(this, "channels");
+    __publicField(this, "pixelsPerInstance");
+    __publicField(this, "stride");
+    __publicField(this, "uniformMap");
+    __publicField(this, "fetchUniformsInFragmentShader");
+    __publicField(this, "uniformPrefix", "batch_");
+    this.data = array;
+    this.channels = channels;
+    this.pixelsPerInstance = pixelsPerInstance;
+    this.stride = pixelsPerInstance * channels;
+    this.uniformMap = uniformMap;
+    this.fetchUniformsInFragmentShader = fetchInFragmentShader;
+    this.needsUpdate = true;
+  }
+  /**
+   * Sets a uniform value at the specified instance ID in the texture.
+   * @param id The instance ID to set the uniform for.
+   * @param name The name of the uniform.
+   * @param value The value to set for the uniform.
+   */
+  setUniformAt(id, name, value) {
+    const schema = this.uniformMap.get(name);
+    if (!schema) {
+      console.warn(`SquareDataTexture.setUniformAt: uniform ${name} not found`);
+      return;
+    }
+    const { offset, size } = schema;
+    const stride = this.stride;
+    if (size === 1) {
+      this.data[id * stride + offset] = value;
+    } else {
+      value.toArray(this.data, id * stride + offset);
+    }
+  }
+  /**
+   * Retrieves a uniform value at the specified instance ID from the texture.
+   * @param id The instance ID to retrieve the uniform from.
+   * @param name The name of the uniform.
+   * @param target Optional target object to store the uniform value.
+   * @returns The uniform value for the specified instance.
+   */
+  getUniformAt(id, name, target) {
+    const schema = this.uniformMap.get(name);
+    if (!schema) {
+      console.warn(`SquareDataTexture.getUniformAt: uniform ${name} not found`);
+      return 0;
+    }
+    const { offset, size } = schema;
+    const stride = this.stride;
+    if (size === 1) {
+      return this.data[id * stride + offset];
+    }
+    return target.fromArray(this.data, id * stride + offset);
+  }
+  /** Mark the texture as needing an update. */
+  update() {
+    this.needsUpdate = true;
+  }
+  /**
+   * Generates the GLSL code for accessing the uniform data stored in the texture.
+   * @param textureName The name of the texture in the GLSL shader.
+   * @param indexName The name of the index in the GLSL shader.
+   * @param indexType The type of the index in the GLSL shader.
+   * @returns An object containing the GLSL code for the vertex and fragment shaders.
+   */
+  getUniformsGLSL(textureName, indexName, indexType) {
+    const vertex = this.getUniformsVertexGLSL(textureName, indexName, indexType);
+    const fragment = this.getUniformsFragmentGLSL(textureName, indexName, indexType);
+    return { vertex, fragment };
+  }
+  getUniformsVertexGLSL(textureName, indexName, indexType) {
+    if (this.fetchUniformsInFragmentShader) {
+      return (
+        /*glsl*/
+        `
+        flat varying ${indexType} ${this.uniformPrefix}${indexName};
+        void main() {
+          ${this.uniformPrefix}${indexName} = ${indexName};
+      `
+      );
+    }
+    const texelsFetch = this.texelsFetchGLSL(textureName, indexName);
+    const getFromTexels = this.getFromTexelsGLSL();
+    const { assignVarying, declareVarying } = this.getVarying();
+    return (
+      /*glsl*/
+      `
+      uniform highp sampler2D ${textureName};  
+      ${declareVarying}
+      void main() {
+      #ifdef USE_BATCHING
+        ${indexType} ${indexName} = ${indexType}(getIndirectIndex(gl_DrawID));
+      #endif
+        ${texelsFetch}
+        ${getFromTexels}
+        ${assignVarying}`
+    );
+  }
+  getUniformsFragmentGLSL(textureName, indexName, indexType) {
+    if (!this.fetchUniformsInFragmentShader) {
+      const { declareVarying, getVarying } = this.getVarying();
+      return (
+        /*glsl*/
+        `
+        ${declareVarying}
+        void main() {
+          ${getVarying}`
+      );
+    }
+    const texelsFetch = this.texelsFetchGLSL(textureName, `${this.uniformPrefix}${indexName}`);
+    const getFromTexels = this.getFromTexelsGLSL();
+    return (
+      /*glsl*/
+      `
+      uniform highp sampler2D ${textureName};  
+      flat varying ${indexType} ${this.uniformPrefix}${indexName};
+      void main() {
+        ${texelsFetch}
+        ${getFromTexels}`
+    );
+  }
+  texelsFetchGLSL(textureName, indexName) {
+    const pixelsPerInstance = this.pixelsPerInstance;
+    let texelsFetch = (
+      /*glsl*/
+      `
+      int size = textureSize(${textureName}, 0).x;
+      int j = int(${indexName}) * ${pixelsPerInstance};
+      int x = j % size;
+      int y = j / size;
+    `
+    );
+    for (let i = 0; i < pixelsPerInstance; i++) {
+      texelsFetch += /*glsl*/
+      `vec4 ${this.uniformPrefix}texel${i} = texelFetch(${textureName}, ivec2(x + ${i}, y), 0);
+`;
+    }
+    return texelsFetch;
+  }
+  getFromTexelsGLSL() {
+    const uniforms = this.uniformMap;
+    let getFromTexels = "";
+    for (const [name, { type, offset, size }] of uniforms) {
+      const tId = Math.floor(offset / this.channels);
+      if (type === "mat3") {
+        getFromTexels += /*glsl*/
+        `mat3 ${name} = mat3(${this.uniformPrefix}texel${tId}.rgb, vec3(${this.uniformPrefix}texel${tId}.a, ${this.uniformPrefix}texel${tId + 1}.rg), vec3(${this.uniformPrefix}texel${tId + 1}.ba, ${this.uniformPrefix}texel${tId + 2}.r));
+`;
+      } else if (type === "mat4") {
+        getFromTexels += /*glsl*/
+        `mat4 ${name} = mat4(${this.uniformPrefix}texel${tId}, ${this.uniformPrefix}texel${tId + 1}, ${this.uniformPrefix}texel${tId + 2}, ${this.uniformPrefix}texel${tId + 3});
+`;
+      } else {
+        const components = this.getUniformComponents(offset, size);
+        getFromTexels += /*glsl*/
+        `${type} ${name} = ${this.uniformPrefix}texel${tId}.${components};
+`;
+      }
+    }
+    return getFromTexels;
+  }
+  getVarying() {
+    const uniforms = this.uniformMap;
+    let declareVarying = "";
+    let assignVarying = "";
+    let getVarying = "";
+    for (const [name, { type }] of uniforms) {
+      declareVarying += /*glsl*/
+      `flat varying ${type} ${this.uniformPrefix}${name};
+`;
+      assignVarying += /*glsl*/
+      `${this.uniformPrefix}${name} = ${name};
+`;
+      getVarying += /*glsl*/
+      `${type} ${name} = ${this.uniformPrefix}${name};
+`;
+    }
+    return { declareVarying, assignVarying, getVarying };
+  }
+  getUniformComponents(offset, size) {
+    const startIndex = offset % this.channels;
+    let components = "";
+    for (let i = 0; i < size; i++) {
+      components += componentsArray[startIndex + i];
+    }
+    return components;
+  }
+}
+const componentsArray = ["r", "g", "b", "a"];
+const batchIdName = "batchId";
+class BatchedMesh extends BatchedMesh$1 {
+  /**
+   * @param instanceCount the max number of individual geometries planned to be added.
+   * @param vertexCount the max number of vertices to be used by all geometries.
+   * @param indexCount the max number of indices to be used by all geometries.
+   * @param material an instance of {@link Material}. Default is a new {@link MeshBasicMaterial}.
+   */
+  constructor(instanceCount, vertexCount, indexCount, material) {
+    super(instanceCount, vertexCount, indexCount, material);
+    __publicField(this, "uniformsTexture");
+    __publicField(this, "isMaterialPatched", false);
+    __publicField(this, "uniformSchema", {});
+    __publicField(this, "boundsNeedsUpdate", false);
+    // Multi_draw with index causes excessive memory consumption on renderer process
+    // TODO: Create issue in three.js repo
+    __publicField(this, "useMultiDraw", false);
+    __publicField(this, "useIndex", false);
+    __publicField(this, "batchCount", 0);
+    __publicField(this, "indexBuffer");
+    __publicField(this, "geometryById", /* @__PURE__ */ new Map());
+    __publicField(this, "mapGeometryToInstanceId", /* @__PURE__ */ new Map());
+    material.forceSinglePass = true;
+    addDim(this);
+    this.addEventListener("added", () => {
+      if (!this.useIndex && this.geometry.index !== null) {
+        this.geometry = this.geometry.toNonIndexed();
+        this.resizeToFitGeometry(this.geometry);
+      }
+    });
+  }
+  /**
+   * Appends uniform definitions to the current schema, and creates a new {@link SquareDataTexture} if needed.
+   * @param schema description of per-instance uniforms by shader stage (vertex/fragment)
+   */
+  addPerInstanceUniforms(schema) {
+    this.uniformSchema = deepMerge(this.uniformSchema, schema);
+    const parsedSchema = this.parseUniformSchema(this.uniformSchema);
+    if (this.uniformsTexture) this.uniformsTexture.dispose();
+    this.uniformsTexture = new SquareDataTexture(
+      Float32Array,
+      parsedSchema.channels,
+      parsedSchema.texelsPerInstance,
+      this.maxInstanceCount,
+      parsedSchema.uniformMap,
+      parsedSchema.fetchInFragmentShader
+    );
+  }
+  addGeometry(geometry, reservedVertexRange, reservedIndexRange) {
+    if (this.useMultiDraw) return super.addGeometry(geometry, reservedVertexRange, reservedIndexRange);
+    this.addBatchIdBuffer(geometry, this.instanceCount);
+    const geometryId = super.addGeometry(geometry, reservedVertexRange, reservedIndexRange);
+    this.geometryById.set(geometryId, geometry);
+    return geometryId;
+  }
+  addInstance(geometryId) {
+    if (this.useMultiDraw) return super.addInstance(geometryId);
+    if (this.mapGeometryToInstanceId.has(geometryId)) {
+      const geometry = this.geometryById.get(geometryId);
+      this.resizeToFitGeometry(geometry);
+      geometryId = this.addGeometry(geometry);
+    }
+    const instanceId = super.addInstance(geometryId);
+    this.mapGeometryToInstanceId.set(geometryId, instanceId);
+    return instanceId;
+  }
+  onBeforeRender(renderer, scene, camera, geometry, material, group) {
+    var _a;
+    if (!this.isMaterialPatched) this.patchMaterial(material);
+    (_a = this.uniformsTexture) == null ? void 0 : _a.update();
+    if (this.useMultiDraw) return super.onBeforeRender(renderer, scene, camera, geometry, material, group);
+    if (!this.indexBuffer) {
+      const vertexCount = geometry.getAttribute("position").count;
+      this.indexBuffer = new BufferAttribute(new Uint32Array(vertexCount), 1).setUsage(StreamDrawUsage);
+    }
+    super.onBeforeRender(renderer, scene, camera, geometry, material, group);
+    this.batchCount = this.updateIndexBuffer(geometry);
+    this._multiDrawCount = 0;
+  }
+  onAfterRender(renderer, scene, camera, geometry) {
+    var _a;
+    if (this.useMultiDraw) return;
+    const batchCount = this.batchCount;
+    const gl = renderer.getContext();
+    if (geometry.index == null) return console.warn("No index buffer", (_a = this.parent) == null ? void 0 : _a.name);
+    const type = this.getIndexType(gl, geometry.index);
+    gl.drawElements(gl.TRIANGLES, batchCount, type, 0);
+    renderer.info.update(batchCount, gl.TRIANGLES, 1);
+    geometry.setIndex(null);
+  }
+  /**
+   * Retrieves the value of a uniform at the specified instance ID.
+   * @param id instance ID
+   * @param name uniform name
+   * @param target Optional target object to store the uniform value
+   * @returns the uniform value
+   */
+  getUniformAt(id, name, target) {
+    if (!this.uniformsTexture) {
+      console.warn(`BatchedMesh.getUniformAt: uniforms texture not initialized`);
+      return 0;
+    }
+    return this.uniformsTexture.getUniformAt(id, name, target);
+  }
+  /**
+   * Sets the value of a uniform at the specified instance ID.
+   * @param instanceId instance ID
+   * @param name uniform name
+   * @param value uniform value
+   */
+  setUniformAt(instanceId, name, value) {
+    if (!this.uniformsTexture) {
+      console.warn(`BatchedMesh.setUniformAt: uniforms texture not initialized`);
+      return;
+    }
+    this.uniformsTexture.setUniformAt(instanceId, name, value);
+  }
+  updateMatrixWorld(force) {
+    super.updateMatrixWorld(force);
+    if (this.boundsNeedsUpdate) {
+      this.computeBoundingBox();
+      this.computeBoundingSphere();
+      this.boundsNeedsUpdate = false;
+    }
+  }
+  setMatrixAt(instanceId, matrix) {
+    super.setMatrixAt(instanceId, matrix);
+    this.boundsNeedsUpdate = true;
+    return this;
+  }
+  dispose() {
+    var _a;
+    this.geometry.setIndex(this.indexBuffer ?? null);
+    super.dispose();
+    this.uniformSchema = {};
+    (_a = this.uniformsTexture) == null ? void 0 : _a.dispose();
+    this.uniformsTexture = void 0;
+    this.indexBuffer = void 0;
+    this.geometryById.forEach((geometry) => geometry.dispose());
+    this.geometryById.clear();
+    this.mapGeometryToInstanceId.clear();
+    return this;
+  }
+  resizeToFitGeometry(geometry) {
+    var _a;
+    const vertexCount = geometry.attributes["position"].count;
+    const indexCount = ((_a = geometry.index) == null ? void 0 : _a.count) ?? 0;
+    this._maxVertexCount += vertexCount;
+    this._maxIndexCount += indexCount;
+    this.setGeometrySize(this._maxVertexCount, this._maxIndexCount);
+  }
+  updateIndexBuffer(geometry) {
+    const { _multiDrawStarts, _multiDrawCounts, _multiDrawCount } = this;
+    const indexBuffer = this.indexBuffer;
+    const indexArray = indexBuffer.array;
+    const batchIdBuffer = geometry.getAttribute(batchIdName);
+    const batchIdArray = batchIdBuffer.array;
+    const indirectArray = this._indirectTexture.image.data;
+    let indexCount = 0;
+    for (let i = 0; i < _multiDrawCount; i++) {
+      const start = _multiDrawStarts[i];
+      const count = _multiDrawCounts[i];
+      const batchId = batchIdArray[start];
+      indirectArray[batchId] = batchId;
+      for (let j = start; j < start + count; j++) {
+        indexArray[indexCount++] = j;
+      }
+    }
+    indexBuffer.needsUpdate = true;
+    geometry.setIndex(indexBuffer);
+    return indexCount;
+  }
+  addBatchIdBuffer(geometry, geometryId) {
+    const hasAttribute = geometry.hasAttribute(batchIdName);
+    const vertexCount = geometry.getAttribute("position").count;
+    const batchIdArray = hasAttribute ? geometry.getAttribute(batchIdName).array : new Int32Array(vertexCount);
+    for (let i = 0; i < vertexCount; i++) {
+      batchIdArray[i] = geometryId;
+    }
+    if (!hasAttribute) {
+      const batchIdBuffer = new BufferAttribute(batchIdArray, 1).setUsage(StreamDrawUsage);
+      geometry.setAttribute(batchIdName, batchIdBuffer);
+    }
+  }
+  patchMaterial(material) {
+    const onBeforeCompile = material.onBeforeCompile.bind(material);
+    const customProgramCacheKey = material.customProgramCacheKey.bind(material);
+    material.onBeforeCompile = (shader, renderer) => {
+      var _a;
+      onBeforeCompile(shader, renderer);
+      shader.defines ?? (shader.defines = {});
+      shader.defines["USE_BATCH_UNIFORMS"] = "";
+      shader.uniforms["uniformsTexture"] = { value: this.uniformsTexture };
+      const { vertex, fragment } = ((_a = this.uniformsTexture) == null ? void 0 : _a.getUniformsGLSL("uniformsTexture", "instanceId", "int")) ?? {
+        vertex: "",
+        fragment: ""
+      };
+      const patch = (
+        /*glsl*/
+        `
+          #ifdef gl_DrawID
+            #define _gl_DrawID ${batchIdName}
+          #else
+            #define gl_DrawID ${batchIdName}
+          #endif
+          in int ${batchIdName};          
+        `
+      );
+      const main = "void main() {";
+      if (!this.useMultiDraw) shader.vertexShader = shader.vertexShader.replace(main, `${patch}${main}`);
+      if (vertex) shader.vertexShader = shader.vertexShader.replace(main, vertex);
+      if (fragment) shader.fragmentShader = shader.fragmentShader.replace(main, fragment);
+    };
+    material.customProgramCacheKey = () => {
+      return `batch_${this.id}_${!!this.uniformsTexture}_${customProgramCacheKey()}`;
+    };
+    this.isMaterialPatched = true;
+  }
+  // Taken from https://github.com/agargaro/instanced-mesh/blob/master/src/core/feature/Uniforms.ts
+  parseUniformSchema(schema) {
+    let totalSize = 0;
+    const uniformMap = /* @__PURE__ */ new Map();
+    const uniforms = [];
+    const vertexSchema = schema.vertex ?? {};
+    const fragmentSchema = schema.fragment ?? {};
+    let fetchInFragmentShader = true;
+    for (const name in vertexSchema) {
+      const type = vertexSchema[name];
+      const size = this.getUniformSize(type);
+      totalSize += size;
+      uniforms.push({ name, type, size });
+      fetchInFragmentShader = false;
+    }
+    for (const name in fragmentSchema) {
+      if (!vertexSchema[name]) {
+        const type = fragmentSchema[name];
+        const size = this.getUniformSize(type);
+        totalSize += size;
+        uniforms.push({ name, type, size });
+      }
+    }
+    uniforms.sort((a, b) => b.size - a.size);
+    const tempOffset = [];
+    for (const { name, size, type } of uniforms) {
+      const offset = this.getUniformOffset(size, tempOffset);
+      uniformMap.set(name, { offset, size, type });
+    }
+    const pixelsPerInstance = Math.ceil(totalSize / 4);
+    const channels = Math.min(totalSize, 4);
+    return { channels, texelsPerInstance: pixelsPerInstance, uniformMap, fetchInFragmentShader };
+  }
+  getUniformOffset(size, tempOffset) {
+    if (size < 4) {
+      for (let i = 0; i < tempOffset.length; i++) {
+        if (tempOffset[i] + size <= 4) {
+          const offset2 = i * 4 + tempOffset[i];
+          tempOffset[i] += size;
+          return offset2;
+        }
+      }
+    }
+    const offset = tempOffset.length * 4;
+    for (; size > 0; size -= 4) {
+      tempOffset.push(size);
+    }
+    return offset;
+  }
+  getUniformSize(type) {
+    switch (type) {
+      case "float":
+        return 1;
+      case "vec2":
+        return 2;
+      case "vec3":
+        return 3;
+      case "vec4":
+        return 4;
+      case "mat3":
+        return 9;
+      case "mat4":
+        return 16;
+    }
+  }
+  getIndexType(gl, index) {
+    const array = index.array;
+    if (array instanceof Uint16Array) return gl.UNSIGNED_SHORT;
+    if (array instanceof Uint32Array) return gl.UNSIGNED_INT;
+    return gl.UNSIGNED_BYTE;
+  }
+}
+const floatsPerMember = 32;
+const tempColor = new Color();
+const defaultStrokeColor = 8421504;
+const tempMat4 = new Matrix4();
+const tempVec3a = new Vector3();
+const tempVec3b = new Vector3();
+const origin = new Vector3();
+const defaultOrient = "+x+y";
+class BatchedText extends BatchedText$1 {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super();
+    __publicField(this, "mapInstanceIdToText", /* @__PURE__ */ new Map());
+    __publicField(this, "textArray", []);
+    __publicField(this, "textureNeedsUpdate", false);
+  }
+  /** Number of texts in the batch */
+  get size() {
+    return this._members.size;
+  }
+  /** Base material before patching */
+  get baseMaterial() {
+    return this._baseMaterial;
+  }
+  /**
+   * Get the {@link Text} object by instance id
+   * @param instanceId Instance id
+   * @returns Text object
+   */
+  getText(instanceId) {
+    return this.mapInstanceIdToText.get(instanceId);
+  }
+  /**
+   * Set the visibility of the {@link Text} object by instance id.
+   * This is for interface compatibility with {@link BatchedMesh}.
+   * @param instanceId Instance id
+   * @param visible Visibility flag
+   */
+  setVisibleAt(instanceId, visible) {
+    const text = this.getText(instanceId);
+    text.visible = visible;
+  }
+  addText(text, instanceId) {
+    super.addText(text);
+    if (instanceId !== void 0) {
+      this.mapInstanceIdToText.set(instanceId, text);
+    }
+    this.textArray.push(text);
+  }
+  dispose() {
+    super.dispose();
+    this.dispatchEvent({ type: "dispose" });
+  }
+  _prepareForRender(material) {
+    var _a;
+    const isOutline = material.isTextOutlineMaterial;
+    material.uniforms.uTroikaIsOutline.value = isOutline;
+    let texture = this._dataTextures[isOutline ? "outline" : "main"];
+    const dataLength = Math.pow(2, Math.ceil(Math.log2(this._members.size * floatsPerMember)));
+    if (!texture || dataLength !== texture.image.data.length) {
+      if (texture) texture.dispose();
+      const width = Math.min(dataLength / 4, 1024);
+      texture = this._dataTextures[isOutline ? "outline" : "main"] = new DataTexture(
+        new Float32Array(dataLength),
+        width,
+        dataLength / 4 / width,
+        RGBAFormat,
+        FloatType
+      );
+    }
+    const texData = texture.image.data;
+    this.textureNeedsUpdate = false;
+    for (const text of this.textArray) {
+      const index = ((_a = this._members.get(text)) == null ? void 0 : _a.index) ?? -1;
+      const textRenderInfo = text.textRenderInfo;
+      if (index < 0 || !textRenderInfo) continue;
+      const startIndex = index * floatsPerMember;
+      if (!text.visible) {
+        for (let i = 0; i < 16; i++) {
+          this.setTexData(startIndex + i, 0, texData);
+        }
+        continue;
+      }
+      const matrix = text.matrix.elements;
+      for (let i = 0; i < 16; i++) {
+        this.setTexData(startIndex + i, matrix[i], texData);
+      }
+      text._prepareForRender(material);
+      const {
+        uTroikaTotalBounds,
+        uTroikaClipRect,
+        uTroikaPositionOffset,
+        uTroikaEdgeOffset,
+        uTroikaBlurRadius,
+        uTroikaStrokeWidth,
+        uTroikaStrokeColor,
+        uTroikaStrokeOpacity,
+        uTroikaFillOpacity,
+        uTroikaCurveRadius
+      } = material.uniforms;
+      for (let i = 0; i < 4; i++) {
+        this.setTexData(startIndex + 16 + i, uTroikaTotalBounds.value.getComponent(i), texData);
+      }
+      for (let i = 0; i < 4; i++) {
+        this.setTexData(startIndex + 20 + i, uTroikaClipRect.value.getComponent(i), texData);
+      }
+      let color = isOutline ? text.outlineColor || 0 : text.color;
+      color ?? (color = this.color);
+      color ?? (color = this.material.color);
+      color ?? (color = 16777215);
+      this.setTexData(startIndex + 24, tempColor.set(color).getHex(), texData);
+      this.setTexData(startIndex + 25, uTroikaFillOpacity.value, texData);
+      this.setTexData(startIndex + 26, uTroikaCurveRadius.value, texData);
+      if (isOutline) {
+        this.setTexData(startIndex + 28, uTroikaPositionOffset.value.x, texData);
+        this.setTexData(startIndex + 29, uTroikaPositionOffset.value.y, texData);
+        this.setTexData(startIndex + 30, uTroikaEdgeOffset.value, texData);
+        this.setTexData(startIndex + 31, uTroikaBlurRadius.value, texData);
+      } else {
+        this.setTexData(startIndex + 28, uTroikaStrokeWidth.value, texData);
+        this.setTexData(startIndex + 29, tempColor.set(uTroikaStrokeColor.value).getHex(), texData);
+        this.setTexData(startIndex + 30, uTroikaStrokeOpacity.value, texData);
+      }
+    }
+    texture.needsUpdate = this.textureNeedsUpdate;
+    material.setMatrixTexture(texture);
+  }
+  setTexData(index, value, texData) {
+    if (value !== texData[index]) {
+      texData[index] = value;
+      this.textureNeedsUpdate = true;
+    }
+  }
+}
+class Text extends Text$1 {
+  _prepareForRender(material) {
+    const isOutline = material.isTextOutlineMaterial;
+    const uniforms = material.uniforms;
+    const textInfo = this.textRenderInfo;
+    if (textInfo) {
+      const { sdfTexture, blockBounds } = textInfo;
+      const { width, height } = sdfTexture.image;
+      uniforms.uTroikaSDFTexture.value = sdfTexture;
+      uniforms.uTroikaSDFTextureSize.value.set(width, height);
+      uniforms.uTroikaSDFGlyphSize.value = textInfo.sdfGlyphSize;
+      uniforms.uTroikaSDFExponent.value = textInfo.sdfExponent;
+      uniforms.uTroikaTotalBounds.value.fromArray(blockBounds);
+      uniforms.uTroikaUseGlyphColors.value = !isOutline && !!textInfo.glyphColors;
+      let distanceOffset = 0;
+      let blurRadius = 0;
+      let strokeWidth = 0;
+      let fillOpacity;
+      let strokeOpacity = 1;
+      let strokeColor;
+      let offsetX = 0;
+      let offsetY = 0;
+      if (isOutline) {
+        const { outlineWidth, outlineOffsetX, outlineOffsetY, outlineBlur, outlineOpacity } = this;
+        distanceOffset = this._parsePercent(outlineWidth) || 0;
+        blurRadius = Math.max(0, this._parsePercent(outlineBlur) || 0);
+        fillOpacity = outlineOpacity;
+        offsetX = this._parsePercent(outlineOffsetX) || 0;
+        offsetY = this._parsePercent(outlineOffsetY) || 0;
+      } else {
+        strokeWidth = Math.max(0, this._parsePercent(this.strokeWidth) || 0);
+        if (strokeWidth) {
+          strokeColor = this.strokeColor;
+          uniforms.uTroikaStrokeColor.value.set(strokeColor ?? defaultStrokeColor);
+          strokeOpacity = this.strokeOpacity;
+          strokeOpacity ?? (strokeOpacity = 1);
+        }
+        fillOpacity = this.fillOpacity;
+      }
+      uniforms.uTroikaEdgeOffset.value = distanceOffset;
+      uniforms.uTroikaPositionOffset.value.set(offsetX, offsetY);
+      uniforms.uTroikaBlurRadius.value = blurRadius;
+      uniforms.uTroikaStrokeWidth.value = strokeWidth;
+      uniforms.uTroikaStrokeOpacity.value = strokeOpacity;
+      uniforms.uTroikaFillOpacity.value = fillOpacity ?? 1;
+      uniforms.uTroikaCurveRadius.value = this.curveRadius || 0;
+      const clipRect = this.clipRect;
+      if (clipRect && Array.isArray(clipRect) && clipRect.length === 4) {
+        uniforms.uTroikaClipRect.value.fromArray(clipRect);
+      } else {
+        const pad = (this.fontSize || 0.1) * 100;
+        uniforms.uTroikaClipRect.value.set(
+          blockBounds[0] - pad,
+          blockBounds[1] - pad,
+          blockBounds[2] + pad,
+          blockBounds[3] + pad
+        );
+      }
+      this.geometry.applyClipRect(uniforms.uTroikaClipRect.value);
+    }
+    uniforms.uTroikaSDFDebug.value = !!this.debugSDF;
+    material.polygonOffset = !!this.depthOffset;
+    material.polygonOffsetFactor = material.polygonOffsetUnits = this.depthOffset || 0;
+    const color = isOutline ? this.outlineColor || 0 : this.color;
+    if (color == null) {
+      delete material.color;
+    } else {
+      const colorObj = material.hasOwnProperty("color") ? material.color : material.color = new Color();
+      if (color !== colorObj._input || typeof color === "object") {
+        colorObj.set(colorObj._input = color);
+      }
+    }
+    let orient = this.orientation || defaultOrient;
+    if (orient !== material._orientation) {
+      const rotMat = uniforms.uTroikaOrient.value;
+      orient = orient.replace(/[^-+xyz]/g, "");
+      const match = orient !== defaultOrient && /^([-+])([xyz])([-+])([xyz])$/.exec(orient);
+      if (match) {
+        const [, hSign, hAxis, vSign, vAxis] = match;
+        tempVec3a.set(0, 0, 0)[hAxis] = hSign === "-" ? 1 : -1;
+        tempVec3b.set(0, 0, 0)[vAxis] = vSign === "-" ? -1 : 1;
+        tempMat4.lookAt(origin, tempVec3a.cross(tempVec3b), tempVec3b);
+        rotMat.setFromMatrix4(tempMat4);
+      } else {
+        rotMat.identity();
+      }
+      material._orientation = orient;
+    }
+  }
+}
+function setDimming(root, dim) {
+  root.userData["uDim"] = dim === void 0 ? void 0 : +dim;
+}
+function toggleInstanceDim(object, instanceId, dim) {
+  const value = dim === void 0 ? 0 : (+dim - 0.5) * 2;
+  if (object instanceof BatchedMesh) {
+    object.setUniformAt(instanceId, "skipDimInstance", value);
+    return;
+  }
+  const skipDimTexture = object.userData["skipDimTexture"];
+  if (skipDimTexture) {
+    const skipDimData = skipDimTexture.image.data;
+    skipDimData[instanceId] = value;
+    skipDimTexture.needsUpdate = true;
+  }
+}
+function addDimToMaterial(material) {
+  if (material.userData.hasDimShader) return;
+  const onBeforeCompile = material.onBeforeCompile.bind(material);
+  const onBeforeRender = material.onBeforeRender.bind(material);
+  material.onBeforeCompile = (shader, renderer) => {
+    onBeforeCompile(shader, renderer);
+    shader.uniforms["uDim"] = { value: material.userData.uDim ?? 0 };
+    shader.uniforms["skipDimTexture"] = { value: material.userData.skipDimTexture ?? null };
+    shader.vertexShader = shader.vertexShader.replace("void main() {", `${dimColorVertexDefs}
+void main() {`).replace(
+      "#include <fog_vertex>",
+      /*glsl*/
+      `
+            #include <fog_vertex>
+            setDimAmount();
+          `
+    ).concat(dimColorVertexImpl);
+    shader.fragmentShader = /*glsl*/
+    `        
+        ${dimColorFrag}
+        ${shader.fragmentShader}
+      `.replace(
+      "#include <colorspace_fragment>",
+      /*glsl*/
+      `
+          gl_FragColor = dimColor(gl_FragColor);          
+          #include <colorspace_fragment>
+        `
+    );
+    material.userData.shader = shader;
+  };
+  material.onBeforeRender = (renderer, scene, camera, geometry, object, group) => {
+    onBeforeRender(renderer, scene, camera, geometry, object, group);
+    const skipDimTexture = object.userData["skipDimTexture"];
+    let uDim = object.userData["uDim"];
+    if (uDim === void 0) {
+      for (const ancestor of traverseAncestorsGenerator(object)) {
+        if (ancestor.userData["uDim"] !== void 0) {
+          uDim = ancestor.userData["uDim"];
+          break;
+        }
+      }
+    }
+    const shader = material.userData.shader;
+    if (!shader) {
+      material.userData.uDim = uDim;
+      material.userData.skipDimTexture = object.userData["skipDimTexture"];
+      return;
+    }
+    shader.uniforms["uDim"].value = uDim ?? 0;
+    shader.uniforms["skipDimTexture"].value = skipDimTexture ?? null;
+  };
+  material.userData.hasDimShader = true;
+}
+function addDim(mesh) {
+  if (mesh instanceof BatchedMesh) mesh.addPerInstanceUniforms({ vertex: { skipDimInstance: "float" } });
+  if (mesh instanceof BatchedText) addSkipDimTexture(mesh);
+}
+function addSkipDimTexture(text) {
+  const count = text.size;
+  const size = Math.ceil(Math.sqrt(count));
+  const array = new Float32Array(size * size);
+  array.fill(0);
+  const texture = new DataTexture(array, size, size, RedFormat, FloatType);
+  texture.needsUpdate = true;
+  text.userData["skipDimTexture"] = texture;
+  text.addEventListener("dispose", () => texture.dispose());
+  return texture;
+}
+const dimColorVertexDefs = (
+  /*glsl*/
+  `
+  uniform float uDim;
+  out float dimAmount;
+#ifdef TROIKA_DERIVED_MATERIAL_1
+  uniform sampler2D skipDimTexture;
+#endif
+  void setDimAmount();
+`
+);
+const dimColorVertexImpl = (
+  /*glsl*/
+  `
+  void setDimAmount() {
+    float instanceDim = 0.;
+#ifdef USE_BATCHING
+    instanceDim = batch_skipDimInstance;
+#endif
+#ifdef TROIKA_DERIVED_MATERIAL_1
+    float indirectIndex = aTroikaTextBatchMemberIndex;
+    int size = textureSize(skipDimTexture, 0).x;
+		int i = int(indirectIndex);
+		int x = i % size;
+		int y = i / size;
+    instanceDim = texelFetch(skipDimTexture, ivec2(x, y), 0).r;
+#endif
+    dimAmount = instanceDim == 0. ? uDim : instanceDim / 2. + 0.5;
+  }
+`
+);
+const dimColorFrag = (
+  /*glsl*/
+  `
+  in float dimAmount;
+
+  const vec3 grayWeights = vec3(0.299, 0.587, 0.114);
+  const float darkenFactor = pow(2., 2.2); // Gamma corrected
+  
+  vec4 dimColor(vec4 col) {            
+    vec3 color = col.rgb / col.a;
+    vec3 gray = vec3(dot(grayWeights, color));    
+    vec3 m = mix(color, gray / darkenFactor, dimAmount);    
+    return vec4(m * col.a, col.a);
+  }`
+);
+const sharedParameters = {
+  side: DoubleSide,
+  transparent: true,
+  depthTest: false
+};
+class MaterialSystem {
+  constructor() {
+    __publicField(this, "backgroundMaterial");
+    __publicField(this, "viewport", new Vector4());
+  }
+  /**
+   * Creates a line material.
+   * @param params {@link LineMaterialParameters}
+   * @returns LineMaterial instance
+   */
+  createLineMaterial(params) {
+    const material = new LineMaterial({ ...sharedParameters, ...params });
+    material.onBeforeCompile = (shader) => {
+      shader.defines ?? (shader.defines = {});
+      shader.defines["USE_BATCHING_COLOR"] = "";
+      shader.vertexShader = shader.vertexShader.replace(
+        "#include <common>",
+        /*glsl*/
+        `
+              #include <common>
+              #include <batching_pars_vertex>
+            `
+      ).replace(
+        "void main() {",
+        `void main() {
+              #include <color_vertex>
+              #include <batching_vertex>
+            `
+      );
+    };
+    material.onBeforeRender = (renderer) => {
+      const uniforms = material.uniforms;
+      if (uniforms) {
+        renderer.getViewport(this.viewport);
+        uniforms["resolution"].value.set(this.viewport.z, this.viewport.w);
+      }
+    };
+    this.addPolygonOffset(material);
+    addDimToMaterial(material);
+    return material;
+  }
+  /**
+   * Creates a color material.
+   * @param partialParams {@link MaterialColorParams}
+   * @returns MeshBasicMaterial instance
+   */
+  createColorMaterial(partialParams = {}) {
+    const params = {
+      color: partialParams.color ?? 16777215,
+      opacity: partialParams.opacity ?? 1
+    };
+    const material = new MeshBasicMaterial({
+      ...sharedParameters,
+      color: params.color,
+      opacity: params.opacity
+    });
+    this.addPolygonOffset(material);
+    addDimToMaterial(material);
+    return material;
+  }
+  /**
+   * Creates a texture material.
+   * @param map {@link Texture}
+   * @param uvOffset whether to enable uv offset with per instance uniforms (for texture atlases)
+   * @returns MeshBasicMaterial instance
+   */
+  createTextureMaterial(map, uvOffset = false) {
+    const material = new MeshBasicMaterial({ ...sharedParameters, map });
+    if (uvOffset) {
+      material.onBeforeCompile = (shader) => {
+        shader.vertexShader = shader.vertexShader.replace(
+          "#include <uv_vertex>",
+          /*glsl*/
+          `
+              #include <uv_vertex>
+              vMapUv = uv * uvOffset.zw + uvOffset.xy;      
+            `
+        );
+      };
+    }
+    this.addPolygonOffset(material);
+    addDimToMaterial(material);
+    return material;
+  }
+  /**
+   * Creates a background material. Used for the background layer to support dimming the background.
+   * @param color background color in css format
+   * @returns MeshBasicMaterial instance
+   */
+  createBackgroundMaterial(color) {
+    if (!this.backgroundMaterial) {
+      this.backgroundMaterial = new MeshBasicMaterial({ ...sharedParameters, color: new Color(color) });
+      this.backgroundMaterial.onBeforeCompile = (shader) => {
+        shader.vertexShader = shader.vertexShader.replace(
+          "#include <project_vertex>",
+          /*glsl*/
+          `
+            gl_Position = vec4(transformed.xy, 1.0, 1.0);                        
+          `
+        );
+      };
+      this.addPolygonOffset(this.backgroundMaterial);
+      addDimToMaterial(this.backgroundMaterial);
+    }
+    return this.backgroundMaterial;
+  }
+  addPolygonOffset(material) {
+    return;
+  }
+}
+function isShapeDef(def) {
+  return def.shape !== void 0;
+}
+function isImageDef(def) {
+  return def.source !== void 0;
+}
+function isTextDef(def) {
+  return def.lines !== void 0;
+}
+function isLineDef(def) {
+  return def.points !== void 0;
+}
+function isLayerDef(def) {
+  return def.children !== void 0;
+}
+function isShapeLayer(layer) {
+  return layer.children[0] && isShapeDef(layer.children[0]);
+}
+function isImageLayer(layer) {
+  return layer.children[0] && isImageDef(layer.children[0]);
+}
+function isTextLayer(layer) {
+  return layer.children[0] && isTextDef(layer.children[0]);
+}
+function isLineLayer(layer) {
+  return layer.children[0] && isLineDef(layer.children[0]);
+}
+function isLayerLayer(layer) {
+  return layer.children[0] && isLayerDef(layer.children[0]);
+}
+const INTERACTIVE_LAYER = 1;
+function setInteractive(object, isInteractive) {
+  if (isInteractive) object.layers.enable(INTERACTIVE_LAYER);
+  else object.layers.disable(INTERACTIVE_LAYER);
+  object.children.forEach((child) => setInteractive(child, isInteractive));
+}
+function isVisible(object) {
+  if (!object.visible) return false;
+  return [...traverseAncestorsGenerator(object)].every((obj) => obj.visible);
+}
+function printTree(object, fullName = false) {
+  object.traverse((obj) => {
+    let s = "";
+    let obj2 = obj;
+    while (obj2 !== object) {
+      s = "|___ " + s;
+      obj2 = (obj2 == null ? void 0 : obj2.parent) ?? null;
+    }
+    const renderOrder = obj.isGroup ? "" : `, RO: ${obj.renderOrder}`;
+    const name = fullName ? obj.name : obj.name.split(":").at(-1);
+    console.log(`${s}${name}<${obj.type}>${renderOrder}`);
+  });
+}
+class RenderableSystem {
+  /**
+   * @param type readable name of the system's type for debugging
+   * @param renderer {@link Renderer}
+   */
+  constructor(type, renderer) {
+    __publicField(this, "mapDefToObject", /* @__PURE__ */ new Map());
+    __publicField(this, "mapObjectToDefs", /* @__PURE__ */ new Map());
+    this.type = type;
+    this.renderer = renderer;
+  }
+  /**
+   * Update a def with its current properties.
+   * This public method handles shared properties and delegates to the protected implementation.
+   * @param def object definition to update
+   */
+  updateDef(def) {
+    const mapping = this.getObjectInstanceByDef(def);
+    if (!mapping) return;
+    const { object: mesh, instanceIds } = mapping;
+    for (const instanceId of instanceIds) {
+      mesh.setVisibleAt(instanceId, !def.hidden);
+    }
+    if (def.hidden) return;
+    for (const instanceId of instanceIds) {
+      toggleInstanceDim(mesh, instanceId, def.dim);
+    }
+    this.updateDefImpl(def, mesh, instanceIds);
+  }
+  /**
+   * Update an existing collection with a new layer definition.
+   * This public method handles logging and delegates to the protected implementation.
+   * @param group {@link Group} containing the objects that layer maps to
+   * @param layerDef {@link TypedLayerDef} layer definition to update
+   */
+  updateLayer(group, layerDef) {
+    if (this.renderer.debugLog) console.log(`Updating ${this.type} layer ${layerDef.name}`, layerDef);
+    this.updateLayerImpl(group, layerDef);
+  }
+  /**
+   * Get the def that was intersected by a raycast.
+   * @param intersection - The intersection object containing the intersected object and batchId.
+   * @returns The def that was intersected, or undefined if the intersected object is not a ShapeDef.
+   */
+  getIntersectedDef(intersection) {
+    const mesh = intersection.object;
+    const batchId = intersection.batchId;
+    const shapeDef = this.getDefsByObject(mesh)[batchId];
+    return shapeDef;
+  }
+  /**
+   * Protected implementation method that subclasses can override.
+   * This ensures logging always happens even when the method is overridden.
+   * @param group {@link Group} containing the objects that layer maps to
+   * @param layerDef {@link TypedLayerDef} layer definition to update
+   */
+  updateLayerImpl(group, layerDef) {
+    this.disposeLayer(group);
+    group.add(...this.buildLayer(layerDef).children);
+  }
+  /**
+   * Dispose of all objects in a collection and clear the group.
+   * This provides common disposal logic that can be overridden if needed.
+   * Follows Three.js disposal best practices: https://threejs.org/manual/#en/how-to-dispose-of-objects
+   * @param group {@link Group} containing the objects that layer maps to
+   */
+  disposeLayer(group) {
+    for (const mesh of group.children) {
+      this.disposeObject(mesh);
+      this.unregisterObject(mesh);
+    }
+    group.clear();
+  }
+  /**
+   * Dispose of a single object following Three.js disposal best practices.
+   * Handles materials, textures, and geometries properly.
+   * @param object object to dispose
+   */
+  disposeObject(object) {
+    if ("dispose" in object && typeof object.dispose === "function") {
+      object.dispose();
+    }
+    if ("geometry" in object) {
+      const geometry = object.geometry;
+      geometry == null ? void 0 : geometry.dispose();
+    }
+    if ("material" in object) {
+      const material = object.material;
+      if (material) {
+        if (Array.isArray(material)) {
+          material.forEach((mat) => this.disposeMaterial(mat));
+        } else {
+          this.disposeMaterial(material);
+        }
+      }
+    }
+  }
+  /**
+   * Dispose of a material and all its textures following Three.js best practices.
+   * @param material {@link Material} to dispose
+   */
+  disposeMaterial(material) {
+    const textureProperties = [
+      "map",
+      "normalMap",
+      "emissiveMap",
+      "specularMap",
+      "roughnessMap",
+      "metalnessMap",
+      "alphaMap",
+      "envMap",
+      "lightMap",
+      "aoMap",
+      "displacementMap"
+    ];
+    for (const prop of textureProperties) {
+      const texture = material[prop];
+      if (texture && texture instanceof Texture) {
+        texture.dispose();
+      }
+    }
+    material.dispose();
+  }
+  /**
+   * Register a mapping between a def and an object/instance.
+   * @param def def to register
+   * @param object object to which the def is mapped
+   * @param instanceIds range of instance ids in the container that the def is mapped to
+   */
+  registerDefObject(def, object, instanceIds) {
+    const ids = Array.isArray(instanceIds) ? instanceIds : [instanceIds];
+    if (ids.length === 0) {
+      console.warn(`[RenderableSystem] Tried to register def with empty instanceIds:`, def);
+      return;
+    }
+    this.mapDefToObject.set(def, { object, instanceIds: ids });
+    if (!this.mapObjectToDefs.has(object)) {
+      this.mapObjectToDefs.set(object, []);
+    }
+    this.mapObjectToDefs.get(object).push(def);
+    this.updateDef(def);
+  }
+  /**
+   * Unregister a def and its associated object mapping.
+   * @param def def to unregister
+   */
+  unregisterDef(def) {
+    const mapping = this.mapDefToObject.get(def);
+    if (mapping) {
+      const { object } = mapping;
+      const defs = this.mapObjectToDefs.get(object);
+      if (defs) {
+        this.mapObjectToDefs.set(
+          object,
+          defs.filter((d) => d !== def)
+        );
+        if (this.mapObjectToDefs.get(object).length === 0) {
+          this.mapObjectToDefs.delete(object);
+        }
+      }
+      this.mapDefToObject.delete(def);
+    }
+  }
+  /**
+   * Unregister all defs associated with an object.
+   * @param object object to unregister
+   */
+  unregisterObject(object) {
+    const defs = this.mapObjectToDefs.get(object);
+    if (defs) {
+      for (const def of defs) {
+        this.mapDefToObject.delete(def);
+      }
+      this.mapObjectToDefs.delete(object);
+    }
+  }
+  /**
+   * Clear all mappings.
+   */
+  clearMappings() {
+    this.mapDefToObject.clear();
+    this.mapObjectToDefs.clear();
+  }
+  /**
+   * Lookup object/instance by def.
+   * @param def def to lookup
+   * @returns object and instance ids
+   */
+  getObjectInstanceByDef(def) {
+    const mapping = this.mapDefToObject.get(def);
+    if (!mapping) {
+      console.warn(`[RenderableSystem] No object mapping found for def:`, def);
+      return void 0;
+    }
+    return mapping;
+  }
+  /**
+   * Lookup defs by object.
+   * @param object object to lookup
+   * @returns Array of defs mapped to the object
+   */
+  getDefsByObject(object) {
+    return this.mapObjectToDefs.get(object) ?? [];
+  }
+  /**
+   * Get all objects currently handled by the system.
+   * @returns Array of container objects
+   */
+  getAllObjects() {
+    return Array.from(this.mapObjectToDefs.keys());
+  }
+}
+class ImageSystem extends RenderableSystem {
+  /**
+   * @param materialSystem {@link MaterialSystem}
+   * @param renderer {@link Renderer}
+   */
+  constructor(materialSystem, renderer) {
+    super("image", renderer);
+    /** Textures memory limit in megabytes */
+    __publicField(this, "memoryLimitMb");
+    __publicField(this, "packer");
+    __publicField(this, "position", new Vector3());
+    __publicField(this, "rotation", new Quaternion());
+    __publicField(this, "scale", new Vector3());
+    __publicField(this, "matrix", new Matrix4());
+    this.materialSystem = materialSystem;
+    const atlasTextureSize = renderer.context.capabilities.maxTextureSize;
+    console.log(`Max texture size: ${atlasTextureSize}`);
+    const padding = 1;
+    this.packer = new MaxRectsPacker(atlasTextureSize, atlasTextureSize, padding, { pot: false });
+  }
+  updateLayerImpl(group, layerDef) {
+    super.updateLayerImpl(group, layerDef);
+    if (this.memoryLimitMb) this.resizeTextures();
+  }
+  buildLayer(layer) {
+    var _a;
+    const group = new Group();
+    const images = layer.children;
+    const bins = this.packImages(images);
+    const uvOffset = new Vector4();
+    for (const bin of bins) {
+      const rectsWithDef = bin.rects.flatMap(
+        (rect) => rect.data.map((imageWithIndex) => ({
+          def: imageWithIndex.def,
+          rect,
+          originalIndex: imageWithIndex.originalIndex
+        }))
+      ).sort((a, b) => a.originalIndex - b.originalIndex);
+      const instanceCount = rectsWithDef.length;
+      const texture = createAtlas(bin);
+      const instanceMaterial = this.materialSystem.createTextureMaterial(texture, true);
+      const instanceGeometry = new PlaneGeometry();
+      const vertexCount = instanceGeometry.attributes["position"].count;
+      const indexCount = ((_a = instanceGeometry.index) == null ? void 0 : _a.count) ?? 0;
+      const batchedMesh = new BatchedMesh(instanceCount, vertexCount, indexCount, instanceMaterial);
+      batchedMesh.sortObjects = false;
+      batchedMesh.addPerInstanceUniforms({ vertex: { uvOffset: "vec4" } });
+      const geometryId = batchedMesh.addGeometry(instanceGeometry);
+      for (const { def, rect } of rectsWithDef) {
+        const instanceId = batchedMesh.addInstance(geometryId);
+        uvOffset.set(rect.x / bin.width, rect.y / bin.height, rect.width / bin.width, rect.height / bin.height);
+        batchedMesh.setUniformAt(instanceId, "uvOffset", uvOffset);
+        this.registerDefObject(def, batchedMesh, instanceId);
+      }
+      const nonResizable = rectsWithDef.some(({ def }) => def.source instanceof HTMLCanvasElement);
+      batchedMesh.userData["nonResizable"] = nonResizable;
+      group.add(batchedMesh);
+    }
+    return group;
+  }
+  /**
+   * Resize textures to fit the memory limit.
+   */
+  resizeTextures() {
+    var _a;
+    if (!this.memoryLimitMb) {
+      console.warn("Memory limit is not set, unable to resize textures.");
+      return;
+    }
+    console.log(`Resizing textures to fit memory limit: ${this.memoryLimitMb} MB`);
+    const texturesToResize = [];
+    let totalResizable = 0;
+    let totalNonResizable = 0;
+    for (const mesh of this.getAllObjects()) {
+      const texture = mesh.material.map;
+      const imageBytes = getTextureSizeBytes(texture);
+      const nonResizable = mesh.userData["nonResizable"];
+      if (nonResizable) {
+        totalNonResizable += imageBytes;
+      } else {
+        totalResizable += imageBytes;
+        texturesToResize.push(mesh);
+      }
+    }
+    const budget = this.memoryLimitMb * 1024 * 1024 - totalNonResizable;
+    if (budget < 0) {
+      console.warn("Memory limit is too low, unable to resize textures.");
+      return;
+    }
+    const resizeFactor = Math.sqrt(budget / totalResizable);
+    if (resizeFactor >= 1) {
+      console.log("Textures are already within the memory limit, no need to resize");
+      return;
+    }
+    console.log(`Resize factor: ${resizeFactor}`);
+    let newTotal = totalNonResizable;
+    for (const mesh of texturesToResize) {
+      const material = mesh.material;
+      const texture = material.map;
+      const resizedTexture = resizeTexture(texture, resizeFactor);
+      const textureDim = `${texture.image.width}x${texture.image.height}`;
+      const resizedDim = `${resizedTexture.image.width}x${resizedTexture.image.height}`;
+      console.log(`Resized atlas for ${mesh.name || ((_a = mesh.parent) == null ? void 0 : _a.name)}, from ${textureDim} to ${resizedDim}`);
+      newTotal += getTextureSizeBytes(resizedTexture);
+      material.map = resizedTexture;
+      material.needsUpdate = true;
+      texture.dispose();
+      mesh.userData["nonResizable"] = true;
+    }
+    console.log(`New memory usage after resizing: ${newTotal} bytes`);
+  }
+  updateDefImpl(imageDef, mesh, instanceIds) {
+    const bounds = imageDef.bounds;
+    this.position.set(bounds.center.x, bounds.center.y, 0);
+    if (imageDef.origin) {
+      const xFactor = 0.5 - imageDef.origin[0];
+      const yFactor = 0.5 - imageDef.origin[1];
+      this.position.x += bounds.size.width * xFactor;
+      this.position.y += bounds.size.height * yFactor;
+    }
+    this.scale.set(bounds.size.width, bounds.size.height, 1);
+    this.rotation.setFromAxisAngle(new Vector3(0, 0, 1), bounds.rotation);
+    this.matrix.compose(this.position, this.rotation, this.scale);
+    mesh.setMatrixAt(instanceIds[0], this.matrix);
+  }
+  packImages(images) {
+    this.packer.reset();
+    const rectangles = [];
+    const mapImageSourceToRect = /* @__PURE__ */ new Map();
+    for (let i = 0; i < images.length; i++) {
+      const image = images[i];
+      const imageWithIndex = { def: image, originalIndex: i };
+      const existingRect = mapImageSourceToRect.get(image.source);
+      if (!existingRect) {
+        const sourceWidth = image.source.width;
+        const sourceHeight = image.source.height;
+        const sourceArea = sourceWidth * sourceHeight;
+        const boundsWidth = image.bounds.size.width;
+        const boundsHeight = image.bounds.size.height;
+        const boundsArea = boundsWidth * boundsHeight;
+        const ratio = sourceArea / boundsArea;
+        if (ratio > 1e3) {
+          console.log(`Image bounds: ${boundsWidth}x${boundsHeight}`, `Image source: ${sourceWidth}x${sourceHeight}`);
+          console.warn(`Image bounds area is ${ratio.toFixed(2)} times smaller than the image.`);
+        }
+        const rect = new Rectangle(image.source.width, image.source.height);
+        rect.data = [imageWithIndex];
+        rectangles.push(rect);
+        mapImageSourceToRect.set(image.source, rect);
+      } else {
+        existingRect.data.push(imageWithIndex);
+      }
+    }
+    this.packer.addArray(rectangles);
+    this.packer.bins.forEach((bin) => console.log(`Bin: ${bin.width}x${bin.height}, ${bin.rects.length} rectangles`));
+    return this.packer.bins;
+  }
+}
+function createAtlas(bin) {
+  const t0 = performance.now();
+  const canvas = document.createElement("canvas");
+  canvas.width = bin.width;
+  canvas.height = bin.height;
+  const ctx = canvas.getContext("2d");
+  for (const rect of bin.rects) {
+    ctx.drawImage(rect.data[0].def.source, rect.x, rect.y, rect.width, rect.height);
+  }
+  const t1 = performance.now();
+  console.log(`Create atlas took ${(t1 - t0).toFixed(2)} milliseconds.`);
+  return createTexture(canvas);
+}
+function resizeTexture(texture, resizeFactor) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.floor(texture.image.width * resizeFactor);
+  canvas.height = Math.floor(texture.image.height * resizeFactor);
+  const ctx = canvas.getContext("2d");
+  ctx.drawImage(texture.image, 0, 0, canvas.width, canvas.height);
+  return createTexture(canvas);
+}
+function createTexture(source) {
+  const texture = new Texture(source);
+  texture.generateMipmaps = true;
+  texture.colorSpace = SRGBColorSpace;
+  texture.flipY = false;
+  texture.needsUpdate = true;
+  return texture;
+}
+function getTextureSizeBytes(texture) {
+  const imageBytes = texture.image.width * texture.image.height * 4 * (texture.generateMipmaps ? 1.33 : 1);
+  return Math.ceil(imageBytes);
+}
+class LineSystem extends RenderableSystem {
+  /**
+   * @param materialSystem {@link MaterialSystem}
+   * @param renderer {@link Renderer}
+   */
+  constructor(materialSystem, renderer) {
+    super("line", renderer);
+    __publicField(this, "lineColor", new Color());
+    this.materialSystem = materialSystem;
+  }
+  buildLayer(layer) {
+    var _a;
+    const group = new Group();
+    let vertexCount = 0;
+    let indexCount = 0;
+    const geometries = /* @__PURE__ */ new Map();
+    const lines = layer.children;
+    for (const line of lines) {
+      const lineGeometry = new LineSegmentsGeometry();
+      lineGeometry.setPositions(line.points.flatMap((pt) => [pt.x, pt.y, 0]));
+      geometries.set(line, this.deinterleaveGeometry(lineGeometry));
+      vertexCount += lineGeometry.attributes["position"].count;
+      indexCount += ((_a = lineGeometry.index) == null ? void 0 : _a.count) ?? 0;
+    }
+    const material = this.materialSystem.createLineMaterial({ color: "white" });
+    const batchedMesh = new BatchedMesh(lines.length, vertexCount, indexCount, material);
+    batchedMesh.addPerInstanceUniforms({ vertex: { linewidth: "float" } });
+    batchedMesh.setCustomSort((list) => list.sort((a, b) => a.z - b.z));
+    for (const [line, geometry] of geometries.entries()) {
+      const geometryId = batchedMesh.addGeometry(geometry);
+      const instanceId = batchedMesh.addInstance(geometryId);
+      this.registerDefObject(line, batchedMesh, instanceId);
+    }
+    group.add(batchedMesh);
+    return group;
+  }
+  updateDefImpl(lineDef, mesh, instanceIds) {
+    for (const instanceId of instanceIds) {
+      mesh.setColorAt(instanceId, this.lineColor.set(lineDef.color));
+      mesh.setUniformAt(instanceId, "linewidth", lineDef.width);
+    }
+  }
+  // This is a hack for BatchedMesh
+  deinterleaveGeometry(geometry) {
+    const instanceStart = geometry.getAttribute("instanceStart");
+    const instanceEnd = geometry.getAttribute("instanceEnd");
+    const positions = geometry.getAttribute("position");
+    const newInstanceStartBuffer = new Float32Array(geometry.instanceCount * positions.count * 3);
+    const newInstanceEndBuffer = new Float32Array(geometry.instanceCount * positions.count * 3);
+    const newInstanceStart = new BufferAttribute(newInstanceStartBuffer, 3);
+    const newInstanceEnd = new BufferAttribute(newInstanceEndBuffer, 3);
+    for (let i = 0; i < geometry.instanceCount; i++) {
+      for (let j = 0; j < positions.count; j++) {
+        for (let k = 0; k < 3; k++) {
+          const index = i * positions.count * 3 + j * 3 + k;
+          newInstanceStartBuffer[index] = instanceStart.getComponent(i, k);
+          newInstanceEndBuffer[index] = instanceEnd.getComponent(i, k);
+        }
+      }
+    }
+    geometry.setAttribute("instanceStart", newInstanceStart);
+    geometry.setAttribute("instanceEnd", newInstanceEnd);
+    return geometry;
+  }
+}
+function createVector2(vector2) {
+  return vector2 instanceof Vector2 ? vector2 : Array.isArray(vector2) ? new Vector2(vector2[0], vector2[1]) : new Vector2(vector2.x, vector2.y);
+}
+class Rect {
+  /**
+   * @param min Top left corner of the rectangle.
+   * @param max Bottom right corner of the rectangle.
+   * @param rotation Optional rotation of the rectangle. In radians, around center. Positive values rotate clockwise.
+   */
+  constructor(min, max, rotation) {
+    /** Top left corner of the rectangle. */
+    __publicField(this, "min");
+    /** Bottom right corner of the rectangle. */
+    __publicField(this, "max");
+    /** Optional rotation of the rectangle. In radians, around center. Positive values rotate clockwise. */
+    __publicField(this, "rotation");
+    __publicField(this, "_center");
+    __publicField(this, "_size");
+    this.min = createVector2(min);
+    this.max = createVector2(max);
+    this.rotation = rotation ?? 0;
+  }
+  /** Center of the rectangle. Read-only, calculated on demand. */
+  get center() {
+    this._center ?? (this._center = this.min.clone().add(this.max).multiplyScalar(0.5));
+    return this._center;
+  }
+  /** Size of the rectangle. Read-only, calculated on demand. */
+  get size() {
+    this._size ?? (this._size = this.max.clone().sub(this.min));
+    return this._size;
+  }
+  /**
+   * Creates a rectangle from an SVG rectangle element.
+   * @param rect {@link SVGRectElement} or {@link SVGImageElement}
+   * @param rotation Optional rotation of the rectangle. In radians, around center. Positive values rotate clockwise.
+   * @returns new {@link Rect} instance
+   */
+  static fromSvg(rect, rotation) {
+    const x = rect.x.baseVal.value;
+    const y = rect.y.baseVal.value;
+    const width = rect.width.baseVal.value;
+    const height = rect.height.baseVal.value;
+    return new Rect([x, y], [x + width, y + height], rotation);
+  }
+  /**
+   * Increases the size of the rectangle by the given amount. Padding is added to both sides of the rectangle.
+   * @param x Horizontal padding.
+   * @param y Vertical padding. If omitted, defaults to the same value as `x`.
+   * @returns this {@link Rect} instance
+   */
+  addPadding(x, y = x) {
+    this.min.add({ x, y });
+    this.max.sub({ x, y });
+    this._center = void 0;
+    this._size = void 0;
+    return this;
+  }
+}
+class Polygon {
+  /**
+   * @param vertices Array of polygon vertices.
+   * @param indices Array of polygon indices. Each index is a triplet of vertex indices forming a triangle.
+   */
+  constructor(vertices, indices) {
+    /** Array of polygon vertices. */
+    __publicField(this, "vertices");
+    /** Array of polygon indices. Each index is a triplet of vertex indices forming a triangle. */
+    __publicField(this, "indices");
+    this.vertices = vertices.map(createVector2);
+    this.indices = indices;
+  }
+  /**
+   * Converts a {@link Rect} to a {@link Polygon}.
+   * @param rect {@link Rect} instance
+   * @returns new {@link Polygon} instance
+   */
+  static fromRect(rect) {
+    const vertices = [
+      { x: rect.min.x, y: rect.min.y },
+      { x: rect.max.x, y: rect.min.y },
+      { x: rect.max.x, y: rect.max.y },
+      { x: rect.min.x, y: rect.max.y }
+    ];
+    const indices = [
+      [0, 1, 2],
+      [2, 3, 0]
+    ];
+    return new Polygon(vertices, indices);
+  }
+  /**
+   * Merges multiple polygons into a single one.
+   * @param polygons Array of {@link Polygon} instances
+   * @returns new {@link Polygon} instance
+   */
+  static merge(...polygons) {
+    let indexOffset = 0;
+    const vertices = [];
+    const indices = [];
+    for (const polygon of polygons) {
+      vertices.push(...polygon.vertices);
+      indices.push(...polygon.indices.map((index) => index.map((i) => i + indexOffset)));
+      indexOffset += polygon.vertices.length;
+    }
+    return new Polygon(vertices, indices);
+  }
+  /**
+   * Rotates all vertices of the polygon around the given center.
+   * @param rotation Rotation angle in radians. Positive values rotate clockwise.
+   * @param center Center of the rotation.
+   * @returns this {@link Polygon} instance
+   */
+  rotate(rotation, center) {
+    this.vertices.forEach((vertex) => {
+      vertex.rotateAround(center, rotation);
+    });
+    return this;
+  }
+}
+function groupBy(list, keyGetter) {
+  const map = /* @__PURE__ */ new Map();
+  list.forEach((item) => {
+    const key = keyGetter(item);
+    const collection = map.get(key);
+    if (!collection) {
+      map.set(key, [item]);
+    } else {
+      collection.push(item);
+    }
+  });
+  return map;
+}
+function partition(list, pred) {
+  const truthy = [];
+  const falsy = [];
+  for (const item of list) {
+    if (pred(item)) {
+      truthy.push(item);
+    } else {
+      falsy.push(item);
+    }
+  }
+  return [truthy, falsy];
+}
+class MeshSystem extends RenderableSystem {
+  /**
+   * @param materialSystem {@link MaterialSystem}
+   * @param renderer {@link Renderer}
+   */
+  constructor(materialSystem, renderer) {
+    super("mesh", renderer);
+    __publicField(this, "toRgbConverter", converter("rgb"));
+    __publicField(this, "meshColor", new Color());
+    this.materialSystem = materialSystem;
+  }
+  buildLayer(layer) {
+    const shapes = layer.children;
+    const mapShapeToNormColor = /* @__PURE__ */ new Map();
+    for (const shapeDef of shapes) {
+      const normColor = this.normalizeColor(shapeDef.color);
+      if (normColor !== void 0) mapShapeToNormColor.set(shapeDef, normColor);
+    }
+    const [opaqueShapes, transparentShapes] = partition(
+      shapes,
+      (shapeDef) => {
+        var _a;
+        return (((_a = mapShapeToNormColor.get(shapeDef)) == null ? void 0 : _a.alpha) ?? 1) === 1;
+      }
+    );
+    const transparentShapesGrouped = groupBy(transparentShapes, (shapeDef) => mapShapeToNormColor.get(shapeDef).alpha);
+    const group = new Group();
+    for (const [opacity, shapes2] of transparentShapesGrouped) {
+      const transparentMesh = this.buildBatchedMesh(shapes2, opacity);
+      transparentMesh.name = "transparent";
+      group.add(transparentMesh);
+    }
+    if (opaqueShapes.length) {
+      const opaqueMesh = this.buildBatchedMesh(opaqueShapes);
+      opaqueMesh.name = "opaque";
+      group.add(opaqueMesh);
+    }
+    return group;
+  }
+  updateDefImpl(shapeDef, mesh, instanceIds) {
+    const color = this.normalizeColor(shapeDef.color);
+    if (color === void 0) return;
+    for (const instanceId of instanceIds) {
+      mesh.setColorAt(instanceId, this.meshColor.setRGB(color.r, color.g, color.b, SRGBColorSpace));
+    }
+  }
+  buildBatchedMesh(shapes, opacity = 1) {
+    var _a, _b;
+    let vertexCount = 0;
+    let indexCount = 0;
+    let rectGeometry = void 0;
+    const shapeDefToGeometry = /* @__PURE__ */ new Map();
+    for (const shapeDef of shapes) {
+      if (shapeDef.shape instanceof Rect) {
+        if (!rectGeometry) {
+          rectGeometry = new PlaneGeometry(1, 1);
+          rectGeometry.deleteAttribute("normal");
+          rectGeometry.deleteAttribute("uv");
+        }
+        vertexCount += rectGeometry.getAttribute("position").count;
+        indexCount += ((_a = rectGeometry.index) == null ? void 0 : _a.count) ?? 0;
+      } else if (shapeDef.shape instanceof Polygon) {
+        const geometry = this.buildPolygonGeometry(shapeDef.shape);
+        shapeDefToGeometry.set(shapeDef, geometry);
+        vertexCount += geometry.getAttribute("position").count;
+        indexCount += ((_b = geometry.index) == null ? void 0 : _b.count) ?? 0;
+      }
+    }
+    const material = this.materialSystem.createColorMaterial({ opacity });
+    const batchedMesh = new BatchedMesh(shapes.length, vertexCount, indexCount, material);
+    batchedMesh.setCustomSort((list) => this.sortInstances(batchedMesh, list));
+    const position = new Vector3();
+    const rotation = new Quaternion();
+    const scale = new Vector3();
+    const matrix = new Matrix4();
+    for (const shapeDef of shapes) {
+      let instanceId = void 0;
+      if (shapeDef.shape instanceof Rect) {
+        const rectGeometryId = rectGeometry ? batchedMesh.addGeometry(rectGeometry) : void 0;
+        instanceId = batchedMesh.addInstance(rectGeometryId);
+        position.set(shapeDef.shape.center.x, shapeDef.shape.center.y, 0);
+        rotation.setFromAxisAngle(new Vector3(0, 0, 1), shapeDef.shape.rotation ?? 0);
+        scale.set(shapeDef.shape.size.x, shapeDef.shape.size.y, 1);
+        matrix.compose(position, rotation, scale);
+        batchedMesh.setMatrixAt(instanceId, matrix);
+      } else if (shapeDef.shape instanceof Polygon) {
+        const geometry = shapeDefToGeometry.get(shapeDef);
+        const polygonGeometryId = batchedMesh.addGeometry(geometry);
+        instanceId = batchedMesh.addInstance(polygonGeometryId);
+      }
+      if (instanceId === void 0) continue;
+      this.registerDefObject(shapeDef, batchedMesh, instanceId);
+    }
+    return batchedMesh;
+  }
+  normalizeColor(color) {
+    return typeof color === "string" ? this.toRgbConverter(parse(color)) : this.toRgbConverter(parse(`#${color.toString(16).padStart(6, "0")}`));
+  }
+  buildPolygonGeometry(polygon) {
+    const geometry = new BufferGeometry().setFromPoints(polygon.vertices).setIndex(polygon.indices.flat());
+    return geometry;
+  }
+  sortInstances(mesh, list) {
+    const shapeDefs = this.getDefsByObject(mesh);
+    list.sort((a, b) => {
+      const aDef = shapeDefs[a.index];
+      const bDef = shapeDefs[b.index];
+      const aDim = aDef.dim === false ? 1 : 0;
+      const bDim = bDef.dim === false ? 1 : 0;
+      return aDim - bDim;
+    });
+  }
+}
+class TextSystem extends RenderableSystem {
+  /**
+   * @param materialSystem {@link MaterialSystem}
+   * @param renderer {@link Renderer}
+   */
+  constructor(materialSystem, renderer) {
+    super("text", renderer);
+    __publicField(this, "initialTextScale", new Vector2(1, -1));
+    __publicField(this, "textColor", new Color());
+    __publicField(this, "pendingUpdates", /* @__PURE__ */ new Map());
+    __publicField(this, "alignmentOffset", new Vector2());
+    __publicField(this, "alignmentDirection", new Vector2());
+    __publicField(this, "localPosition", new Vector2());
+    __publicField(this, "worldPosition", new Vector2());
+    __publicField(this, "textScale", new Vector2());
+    __publicField(this, "localToMin", new Vector2());
+    __publicField(this, "localToMax", new Vector2());
+    this.materialSystem = materialSystem;
+  }
+  buildLayer(layer) {
+    const group = new Group();
+    const batchedText = this.buildBatchedText(layer);
+    batchedText.sync();
+    group.add(batchedText);
+    return group;
+  }
+  updateLayerImpl(group, layerDef) {
+    const pendingText = this.pendingUpdates.get(group);
+    if (pendingText) {
+      this.pendingUpdates.delete(group);
+      this.unregisterObject(pendingText);
+      group.remove(pendingText);
+      this.disposeObject(pendingText);
+    }
+    const currentText = group.children[0];
+    if (currentText) {
+      this.unregisterObject(currentText);
+    }
+    const newBatchedText = this.buildBatchedText(layerDef);
+    newBatchedText.visible = false;
+    this.pendingUpdates.set(group, newBatchedText);
+    newBatchedText.sync(() => {
+      const currentPendingText = this.pendingUpdates.get(group);
+      if (currentPendingText === newBatchedText) {
+        this.pendingUpdates.delete(group);
+        if (currentText && group.children.includes(currentText)) {
+          group.remove(currentText);
+          this.disposeObject(currentText);
+        }
+        newBatchedText.visible = true;
+      } else {
+        this.unregisterObject(newBatchedText);
+        group.remove(newBatchedText);
+        this.disposeObject(newBatchedText);
+      }
+    });
+    group.add(newBatchedText);
+  }
+  updateDefImpl(textDef, mesh, instanceIds) {
+    for (const [i, line] of textDef.lines.entries()) {
+      const text = mesh.getText(instanceIds[i]);
+      if (text) {
+        text.text = line.text;
+        text.color = this.textColor.set(line.color).getHex(LinearSRGBColorSpace);
+        text.font = line.fontUrl;
+        if (line.stroke) {
+          text.outlineColor = line.stroke.color;
+          text.outlineWidth = line.stroke.width / line.fontSize;
+        }
+      }
+    }
+    this.updateScale(textDef);
+  }
+  buildBatchedText(layer) {
+    const textDefs = layer.children;
+    const batchedText = new BatchedText();
+    batchedText.material = this.materialSystem.createColorMaterial();
+    const mappingData = [];
+    let instanceId = 0;
+    for (const textDef of textDefs) {
+      const instanceIds = [];
+      for (const _ of textDef.lines) {
+        const text = new Text();
+        text.fontSize = 1;
+        text.lineHeight = 1.1;
+        text.whiteSpace = "nowrap";
+        batchedText.addText(text, instanceId);
+        instanceIds.push(instanceId);
+        instanceId++;
+      }
+      mappingData.push({ textDef, instanceIds });
+    }
+    addDim(batchedText);
+    for (const { textDef, instanceIds } of mappingData) {
+      this.registerDefObject(textDef, batchedText, instanceIds);
+    }
+    batchedText.addEventListener("synccomplete", () => this.renderer.update());
+    return batchedText;
+  }
+  // TODO: Simplify
+  updateScale(textDef) {
+    const dpr = this.renderer.context.getPixelRatio();
+    const lines = this.getTextLines(textDef);
+    this.calculateStartInBoundsPosition(
+      textDef,
+      lines,
+      this.alignmentDirection,
+      this.alignmentOffset,
+      this.localPosition
+    );
+    for (const { text, fontSize, height, alignment } of lines) {
+      if (!fontSize || !height) {
+        text.visible = false;
+        continue;
+      }
+      text.visible = true;
+      setAnchorsAndAlignment(text, alignment);
+      this.worldPosition.copy(this.localPosition).rotateAround({ x: 0, y: 0 }, textDef.bounds.rotation).add(textDef.bounds.center);
+      this.textScale.copy(this.initialTextScale).multiplyScalar(fontSize * dpr);
+      text.scale.set(this.textScale.x, this.textScale.y, 1);
+      text.position.set(this.worldPosition.x, this.worldPosition.y, 0);
+      text.rotation.set(0, 0, textDef.bounds.rotation);
+      text.clipRect = this.calculateClipRect(
+        textDef,
+        this.localPosition,
+        this.textScale,
+        this.localToMin,
+        this.localToMax
+      );
+      this.localPosition.y += height * dpr;
+    }
+  }
+  getTextLines(textDef) {
+    const { object: mesh, instanceIds } = this.getObjectInstanceByDef(textDef);
+    const alignment = textDef.alignment;
+    const lines = instanceIds.map((instanceId, i) => {
+      const text = mesh.getText(instanceId);
+      const line = textDef.lines[i];
+      const fontSize = line.fontSize;
+      const height = fontSize ? text.text.split("\n").length * text.lineHeight * fontSize : 0;
+      return { text, fontSize, height, alignment };
+    });
+    if (alignment.vertical === "bottom") lines.reverse();
+    return lines;
+  }
+  calculateStartInBoundsPosition(textDef, lines, alignmentDirection, alignmentOffset, inBoundsPosition) {
+    const [w, h] = textDef.bounds.size;
+    const padding = textDef.padding;
+    const alignment = textDef.alignment;
+    alignmentDirection.set(...getAlignmentDirection(alignment));
+    inBoundsPosition.set(w / 2, h / 2);
+    if (alignment.vertical === "center") {
+      const totalTextHeight = lines.filter((l) => l.height !== void 0).reduce((acc, l) => acc + l.height, 0) * this.renderer.context.getPixelRatio();
+      alignmentOffset.set(0, -(textDef.bounds.size.y - totalTextHeight) / 2);
+      inBoundsPosition.add(alignmentOffset);
+    } else {
+      inBoundsPosition.sub({ x: padding[0], y: padding[1] });
+    }
+    inBoundsPosition.multiply(alignmentDirection);
+  }
+  calculateClipRect(textDef, inBoundsPosition, textScale, toMin, toMax) {
+    toMin.subVectors(textDef.bounds.min, textDef.bounds.center).multiply(this.initialTextScale).sub(inBoundsPosition).divide(textScale);
+    toMax.subVectors(textDef.bounds.max, textDef.bounds.center).multiply(this.initialTextScale).sub(inBoundsPosition).divide(textScale);
+    return [toMin.x, toMin.y, toMax.x, toMax.y];
+  }
+}
+function getAlignmentDirection(alignment) {
+  const horizontalFactors = {
+    left: -1,
+    center: 0,
+    right: 1
+  };
+  const verticalFactors = {
+    top: -1,
+    center: -1,
+    bottom: 1
+  };
+  return [horizontalFactors[alignment.horizontal], verticalFactors[alignment.vertical]];
+}
+function setAnchorsAndAlignment(text, alignment) {
+  text.anchorX = alignment.horizontal;
+  text.anchorY = alignment.vertical === "bottom" ? "bottom" : "top";
+  text.textAlign = alignment.text ?? alignment.horizontal;
+}
+class LayerSystem {
+  /**
+   * @param renderer {@link Renderer}
+   */
+  constructor(renderer) {
+    __publicField(this, "materialSystem");
+    __publicField(this, "meshSystem");
+    __publicField(this, "imageSystem");
+    __publicField(this, "textSystem");
+    __publicField(this, "lineSystem");
+    __publicField(this, "systems");
+    __publicField(this, "mapLayerDefsToObjects", /* @__PURE__ */ new Map());
+    __publicField(this, "mapLayerDefToParent", /* @__PURE__ */ new Map());
+    __publicField(this, "layerDefRenderOrder", []);
+    __publicField(this, "pendingDefs", /* @__PURE__ */ new Set());
+    __publicField(this, "useUpdateBuffering", false);
+    this.renderer = renderer;
+    this.materialSystem = new MaterialSystem();
+    this.meshSystem = new MeshSystem(this.materialSystem, this.renderer);
+    this.imageSystem = new ImageSystem(this.materialSystem, this.renderer);
+    this.textSystem = new TextSystem(this.materialSystem, this.renderer);
+    this.lineSystem = new LineSystem(this.materialSystem, this.renderer);
+    this.systems = [this.meshSystem, this.imageSystem, this.textSystem, this.lineSystem];
+  }
+  /**
+   * Get all defs that are intersected by the given raycast results.
+   * @param intersections {@link Intersection} array
+   * @returns Array of defs that are intersected
+   */
+  getIntersectedDefs(intersections) {
+    const defs = [];
+    for (const intersection of intersections.sort((a, b) => b.object.renderOrder - a.object.renderOrder)) {
+      for (const system of this.systems) {
+        const def = system.getIntersectedDef(intersection);
+        if (def) {
+          defs.push(def);
+          break;
+        }
+      }
+    }
+    return defs;
+  }
+  /**
+   * Update the given defs immediately, or queue them for update if update buffering is enabled.
+   * @param defs {@link RenderableDef} array
+   */
+  updateDefs(defs) {
+    for (const def of defs) {
+      if (this.useUpdateBuffering) this.pendingDefs.add(def);
+      else this.updateDef(def);
+    }
+  }
+  /**
+   * Drain the queued updates within a time budget.
+   * Returns true if any def was updated during this call.
+   * @param timeBudgetMs frame time budget to perform updates in milliseconds
+   * @returns true if any def was updated during this call
+   */
+  processPendingUpdates(timeBudgetMs = 5) {
+    if (!this.useUpdateBuffering) return false;
+    if (this.pendingDefs.size === 0) return false;
+    const startTime = performance.now();
+    let processed = 0;
+    while (this.pendingDefs.size && performance.now() - startTime < timeBudgetMs) {
+      const def = this.pendingDefs.values().next().value;
+      this.pendingDefs.delete(def);
+      this.updateDef(def);
+      processed++;
+    }
+    const took = performance.now() - startTime;
+    if (processed && this.renderer.debugLog) {
+      console.log(
+        `LayerSystem: processed ${processed} defs in ${took.toFixed(2)}ms, ${this.pendingDefs.size} remaining`
+      );
+    }
+    return processed > 0;
+  }
+  /**
+   * Build the scene graph from the given scene definition.
+   * @param sceneDef {@link SceneDef}
+   * @returns root {@link Group} of the scene graph
+   */
+  buildScene(sceneDef) {
+    this.initRenderOrder(sceneDef.rootLayer);
+    if (this.renderer.debugLog)
+      console.log(
+        "Render order",
+        this.layerDefRenderOrder.map((layer) => this.getFullLayerName(layer))
+      );
+    const rootGroup = new Group();
+    rootGroup.name = sceneDef.rootLayer.name;
+    this.mapLayerDefsToObjects.set(sceneDef.rootLayer, rootGroup);
+    if (sceneDef.background) rootGroup.add(this.createBackgroundLayer(sceneDef.background));
+    for (const child of sceneDef.rootLayer.children) {
+      rootGroup.add(this.buildLayer(child));
+    }
+    this.updateLayer(sceneDef.rootLayer, false);
+    if (this.renderer.debugLog) printTree(rootGroup);
+    if (sceneDef.memoryLimit) {
+      this.imageSystem.memoryLimitMb = sceneDef.memoryLimit;
+      this.imageSystem.resizeTextures();
+    }
+    return rootGroup;
+  }
+  updateDef(def) {
+    if (isShapeDef(def)) this.meshSystem.updateDef(def);
+    else if (isImageDef(def)) this.imageSystem.updateDef(def);
+    else if (isTextDef(def)) this.textSystem.updateDef(def);
+    else if (isLineDef(def)) this.lineSystem.updateDef(def);
+    else this.updateLayer(def, true);
+  }
+  updateLayer(layerDef, updateChildren) {
+    const layerObject = this.mapLayerDefsToObjects.get(layerDef);
+    if (!layerObject) return;
+    if (updateChildren) {
+      const group = layerObject;
+      if (isImageLayer(layerDef)) this.imageSystem.updateLayer(group, layerDef);
+      else if (isLineLayer(layerDef)) this.lineSystem.updateLayer(group, layerDef);
+      else if (isTextLayer(layerDef)) this.textSystem.updateLayer(group, layerDef);
+      else if (isShapeLayer(layerDef)) this.meshSystem.updateLayer(group, layerDef);
+      this.setLayerName(group, group.name);
+    }
+    layerObject.visible = !layerDef.hidden && layerDef.children.length > 0;
+    if (layerDef.interactive !== void 0) setInteractive(layerObject, layerDef.interactive);
+    setDimming(layerObject, layerDef.dim);
+    this.setRenderOrder(layerObject, layerDef);
+  }
+  buildLayer(layerDef, parentPrefix = "") {
+    const layerFullName = parentPrefix + layerDef.name;
+    console.log(`Building layer ${layerFullName}...`);
+    let layerObject;
+    if (isShapeLayer(layerDef)) layerObject = this.meshSystem.buildLayer(layerDef);
+    else if (isImageLayer(layerDef)) layerObject = this.imageSystem.buildLayer(layerDef);
+    else if (isTextLayer(layerDef)) layerObject = this.textSystem.buildLayer(layerDef);
+    else if (isLineLayer(layerDef)) layerObject = this.lineSystem.buildLayer(layerDef);
+    else {
+      layerObject = new Group();
+      layerDef.children.map((layer) => this.buildLayer(layer, parentPrefix + `${layerDef.name}:`)).forEach((g) => layerObject.add(g));
+    }
+    this.setLayerName(layerObject, layerFullName);
+    this.mapLayerDefsToObjects.set(layerDef, layerObject);
+    this.updateLayer(layerDef, false);
+    return layerObject;
+  }
+  setLayerName(object, layerFullName) {
+    object.name = layerFullName;
+    for (const child of object.children) {
+      if (child.isGroup) continue;
+      const childName = child.name ? `${layerFullName}:${child.name}` : layerFullName;
+      child.name = childName;
+    }
+  }
+  setRenderOrder(object, layer) {
+    const renderOrder = this.layerDefRenderOrder.indexOf(layer) + 1;
+    if (renderOrder == 0) return;
+    if (object.isGroup) {
+      object.children.forEach((child) => this.setRenderOrder(child, layer));
+      return;
+    }
+    object.renderOrder = renderOrder;
+  }
+  createBackgroundLayer(color) {
+    const backgroundGeometry = new PlaneGeometry(2, 2);
+    const backgroundMaterial = this.materialSystem.createBackgroundMaterial(color);
+    const backgroundMesh = new Mesh(backgroundGeometry, backgroundMaterial);
+    backgroundMesh.frustumCulled = false;
+    backgroundMesh.renderOrder = 0;
+    backgroundMesh.name = "background";
+    return backgroundMesh;
+  }
+  initRenderOrder(rootLayer) {
+    const stack = [rootLayer];
+    while (stack.length) {
+      const layer = stack.pop();
+      if (isLayerLayer(layer)) {
+        const children = [...layer.children];
+        children.reverse();
+        for (const child of children) {
+          this.mapLayerDefToParent.set(child, layer);
+          stack.push(child);
+        }
+      } else {
+        this.layerDefRenderOrder.push(layer);
+      }
+    }
+  }
+  getFullLayerName(layerDef) {
+    let fullName = layerDef.name;
+    let parent = this.mapLayerDefToParent.get(layerDef);
+    while (parent) {
+      fullName = parent.name + ":" + fullName;
+      parent = this.mapLayerDefToParent.get(parent);
+    }
+    return fullName;
+  }
+}
+const subsetOfTHREE = {
+  Vector2,
+  Vector3,
+  Vector4,
+  Quaternion,
+  Matrix4,
+  Spherical,
+  Box3,
+  Sphere,
+  Raycaster
+};
+CameraController.install({ THREE: subsetOfTHREE });
+class CameraSystem {
+  /**
+   * @param renderer {@link Renderer} instance
+   */
+  constructor(renderer) {
+    /** {@link CameraController} instance. Used to smoothly animate the camera. */
+    __publicField(this, "controller");
+    __publicField(this, "camera");
+    __publicField(this, "externalCamera");
+    __publicField(this, "zoomIdentityDistance");
+    __publicField(this, "zoomBounds");
+    this.renderer = renderer;
+    const [w, h] = renderer.size;
+    this.camera = new PerspectiveCamera(90, w / (h || 1));
+    this.camera.up.set(0, 0, -1);
+    this.zoomIdentityDistance = h / 2;
+    this.camera.position.y = this.zoomIdentityDistance;
+    this.controller = new CameraController(this.camera);
+    void this.controller.rotatePolarTo(0);
+  }
+  /** Current camera instance. */
+  get currentCamera() {
+    return this.externalCamera ?? this.camera;
+  }
+  /** Current camera zoom factor. */
+  get zoomFactor() {
+    return this.camera.position.z ? this.zoomIdentityDistance / this.camera.position.z : 1;
+  }
+  /**
+   * Initializes the camera with the given zoom bounds.
+   * @param zoomBounds [minZoom, maxZoom]
+   */
+  initCamera(zoomBounds) {
+    this.zoomBounds = zoomBounds;
+    this.updateCamera();
+  }
+  /** Updates the camera when the renderer size changes. */
+  updateCamera() {
+    if (!this.zoomBounds) return;
+    const [w, h] = this.renderer.size;
+    this.zoomIdentityDistance = -h / 2;
+    const maxDistance = Math.abs(this.zoomIdentityDistance / this.zoomBounds[0]);
+    const minDistance = Math.abs(this.zoomIdentityDistance / this.zoomBounds[1]);
+    this.camera.aspect = w / (h || 1);
+    this.camera.far = maxDistance + 1;
+    this.camera.near = minDistance - 1;
+    this.camera.updateProjectionMatrix();
+  }
+  /**
+   * Calculates the camera distance from the scene's plane for a given zoom factor.
+   * @param zoomFactor Zoom factor
+   * @returns Corresponding camera distance on the Z axis
+   */
+  zoomFactorToDistance(zoomFactor) {
+    return zoomFactor > 0 ? Math.abs(this.zoomIdentityDistance / zoomFactor) : this.zoomIdentityDistance;
+  }
+  syncController(minDistance, maxDistance, zoomFactor) {
+    if (this.renderer.debugLog) console.log("syncController", minDistance, maxDistance, zoomFactor);
+    this.controller.minDistance = minDistance;
+    this.controller.maxDistance = maxDistance;
+    void this.controller.setLookAt(
+      this.camera.position.x,
+      this.camera.position.y,
+      -this.zoomFactorToDistance(zoomFactor),
+      this.camera.position.x,
+      this.camera.position.y,
+      0,
+      false
+    );
+  }
+}
+class SceneSystem {
+  /**
+   * @param renderer {@link Renderer} instance
+   */
+  constructor(renderer) {
+    /** {@link Scene} instance */
+    __publicField(this, "scene");
+    /** World matrix - SVG → World transform */
+    __publicField(this, "worldMatrix", new Matrix4());
+    /** Inverse world matrix - World → SVG transform */
+    __publicField(this, "inverseWorldMatrix", new Matrix4());
+    __publicField(this, "translationMatrix", new Matrix4());
+    __publicField(this, "scaleMatrix", new Matrix4());
+    __publicField(this, "visibleRectOffsetMatrix", new Matrix4());
+    __publicField(this, "viewbox");
+    this.renderer = renderer;
+    this.scene = new Scene();
+    this.scene.matrixAutoUpdate = false;
+  }
+  /**
+   * Initializes the scene with the given SVG viewbox.
+   * @param viewbox {@link Rect} viewbox
+   */
+  initScene(viewbox) {
+    this.viewbox = viewbox;
+    this.updateScene();
+  }
+  /**
+   * Updates the scene transform when the renderer size changes.
+   */
+  updateScene() {
+    if (!this.viewbox) return;
+    const dpr = this.renderer.context.getPixelRatio();
+    const visibleRect = this.renderer.visibleRect;
+    const [viewBoxWidth, viewBoxHeight] = this.viewbox.size;
+    const [visibleRectWidth, visibleRectHeight] = (visibleRect == null ? void 0 : visibleRect.size.clone().multiplyScalar(dpr)) ?? this.renderer.size;
+    const scaleFactor = Math.min(visibleRectWidth / viewBoxWidth, visibleRectHeight / viewBoxHeight);
+    const [centerX, centerY] = this.viewbox.center;
+    this.translationMatrix.makeTranslation(-centerX, -centerY, 0);
+    this.scaleMatrix.makeScale(scaleFactor, scaleFactor, 1);
+    if (visibleRect) {
+      const visibleRectCenter = visibleRect.center.clone().multiplyScalar(dpr);
+      const canvasCenter = new Vector2(...this.renderer.size).multiplyScalar(0.5);
+      const offset = visibleRectCenter.sub(canvasCenter);
+      this.visibleRectOffsetMatrix.makeTranslation(offset.x, offset.y, 0);
+    }
+    this.composeMatrices();
+  }
+  composeMatrices() {
+    this.worldMatrix.copy(this.translationMatrix).premultiply(this.scaleMatrix);
+    if (this.renderer.visibleRect) this.worldMatrix.premultiply(this.visibleRectOffsetMatrix);
+    this.scene.matrix.copy(this.worldMatrix);
+    this.inverseWorldMatrix.copy(this.scene.matrix).invert();
+    this.scene.matrixWorldNeedsUpdate = true;
+  }
+}
+class ViewportSystem {
+  /**
+   * @param renderer {@link Renderer} instance
+   * @param eventSystem {@link EventSystem} instance
+   */
+  constructor(renderer, eventSystem) {
+    __publicField(this, "sceneSystem");
+    __publicField(this, "cameraSystem");
+    __publicField(this, "raycaster", new Raycaster());
+    __publicField(this, "intersectionPoint", new Vector3());
+    __publicField(this, "viewboxPlane", new Plane(new Vector3(0, 0, 1), 0));
+    __publicField(this, "pxToSvgScaleThreshold", 1e-3);
+    __publicField(this, "prevPxToSvgScale");
+    this.renderer = renderer;
+    this.eventSystem = eventSystem;
+    this.sceneSystem = new SceneSystem(renderer);
+    this.cameraSystem = new CameraSystem(renderer);
+    this.raycaster.layers.set(INTERACTIVE_LAYER);
+  }
+  /** {@link Scene} instance */
+  get scene() {
+    return this.sceneSystem.scene;
+  }
+  /** Current {@link Camera} instance */
+  get camera() {
+    return this.cameraSystem.currentCamera;
+  }
+  /** {@link CameraController} instance */
+  get cameraController() {
+    return this.cameraSystem.controller;
+  }
+  /**
+   * Initializes the viewport and zoom bounds with the given scene definition.
+   * @param sceneDef {@link SceneDef} scene definition
+   */
+  initViewport(sceneDef) {
+    this.sceneSystem.initScene(sceneDef.viewbox);
+    this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.width > 1e5 ? 100 : 35]);
+  }
+  /** Updates the viewport when the renderer size changes. */
+  updateViewport() {
+    this.cameraSystem.updateCamera();
+    this.sceneSystem.updateScene();
+  }
+  /**
+   * Recalculates the svg to pixel scale factor and emits the event if necessary.
+   */
+  updatePtScale() {
+    const scaleVector = new Vector3();
+    scaleVector.setFromMatrixScale(this.scene.matrix);
+    let scaleFactor;
+    if (scaleVector.z === 1) {
+      scaleFactor = scaleVector.x;
+    } else {
+      const perspectiveW = this.scene.matrix.elements[15];
+      const halfViewportWidth = this.renderer.size[0] / 2;
+      scaleFactor = halfViewportWidth * scaleVector.x / perspectiveW;
+    }
+    const denominator = scaleFactor * this.cameraSystem.zoomFactor;
+    const pxToSvgScale = 1 / denominator;
+    if (Math.abs(pxToSvgScale - (this.prevPxToSvgScale ?? 0)) < this.pxToSvgScaleThreshold) return;
+    if (this.renderer.debugLog) console.log("pxToSvgScale", +pxToSvgScale.toFixed(3));
+    this.eventSystem.emit("viewport:ptscale", pxToSvgScale);
+    this.prevPxToSvgScale = pxToSvgScale;
+  }
+  /**
+   * Gets the objects intersected by the raycaster.
+   * @param normalizedCoords raycast point in NDC (normalized device coordinates
+   * @returns Array of {@link Intersection} instances
+   */
+  getIntersectedObjects(normalizedCoords) {
+    const { scene, camera } = this;
+    this.raycaster.setFromCamera(normalizedCoords, camera);
+    const intersections = this.raycaster.intersectObject(scene, true).filter((i) => isVisible(i.object));
+    return intersections;
+  }
+  /**
+   * Converts a point from screen coordinates to the given coordinate space.
+   * @param space Space to convert to (either "svg" or "world")
+   * @param normalizedCoords Point in NDC (normalized device coordinates)
+   * @returns Point in the given space
+   */
+  screenTo(space, normalizedCoords) {
+    this.raycaster.setFromCamera(normalizedCoords, this.camera);
+    this.raycaster.ray.intersectPlane(this.viewboxPlane, this.intersectionPoint);
+    if (space === "svg") this.intersectionPoint.applyMatrix4(this.sceneSystem.inverseWorldMatrix);
+    return { x: this.intersectionPoint.x, y: this.intersectionPoint.y };
+  }
+}
+class EventSystem {
+  constructor() {
+    // Store handlers opaquely to keep implementation simple and avoid 'any'.
+    __publicField(this, "handlers", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Add an event listener for a specific event
+   * @param event - The event to listen for
+   * @param handler - The handler to call when the event is emitted
+   */
+  addEventListener(event, handler) {
+    let set = this.handlers.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.handlers.set(event, set);
+    }
+    set.add(handler);
+  }
+  /**
+   * Remove an event listener for a specific event
+   * @param event - The event to remove the listener for
+   * @param handler - The handler to remove
+   */
+  removeEventListener(event, handler) {
+    const set = this.handlers.get(event);
+    if (!set) return;
+    set.delete(handler);
+    if (set.size === 0) this.handlers.delete(event);
+  }
+  /**
+   * Check if there are any listeners for a specific event
+   * @param event - The event to check
+   * @returns true if there are listeners, false otherwise
+   */
+  hasListeners(event) {
+    const set = this.handlers.get(event);
+    return !!set && set.size > 0;
+  }
+  /**
+   * Emit an event with a specific payload
+   * @param event - The event to emit
+   * @param args - The payload to emit
+   */
+  emit(event, ...args) {
+    const set = this.handlers.get(event);
+    if (!set) return;
+    for (const fn of Array.from(set)) {
+      if (args.length === 0) {
+        fn();
+      } else {
+        fn(args[0]);
+      }
+    }
+  }
+  /**
+   * Clear all event listeners
+   */
+  clear() {
+    this.handlers.clear();
+  }
+}
+function asEventAPI(system) {
+  return {
+    addEventListener: system.addEventListener.bind(system),
+    removeEventListener: system.removeEventListener.bind(system),
+    hasListeners: system.hasListeners.bind(system),
+    clear: system.clear.bind(system)
+  };
+}
+function normalizeEventCoordinates(event, domElement, target) {
+  const { left, top } = domElement.getBoundingClientRect();
+  return canvasToNDC({ x: event.clientX - left, y: event.clientY - top }, domElement, target);
+}
+function canvasToNDC(coordinates, domElement, target) {
+  target = target ?? new Vector2();
+  const { width, height } = domElement.getBoundingClientRect();
+  const uv = [coordinates.x / width, coordinates.y / height];
+  target.set(uv[0] * 2 - 1, -uv[1] * 2 + 1);
+  return target;
+}
+class Handler {
+  /**
+   * @param controller The camera-controls instance for camera manipulation
+   * @param domElement The DOM element to attach event listeners to
+   * @param eventManager Shared Mjolnir EventManager for gesture recognition
+   */
+  constructor(controller, domElement, eventManager) {
+    /** Whether this handler is enabled */
+    __publicField(this, "enabled", false);
+    this.controller = controller;
+    this.domElement = domElement;
+    this.eventManager = eventManager;
+  }
+  /**
+   * Per-frame update for this handler.
+   * Called every frame in the render loop.
+   * Override if handler needs per-frame logic (e.g., smooth interpolation).
+   * @param delta Time elapsed since last frame in seconds
+   * @returns true if the handler made changes that require re-rendering
+   */
+  update(delta) {
+    return false;
+  }
+  /**
+   * Configure this handler with handler-specific options.
+   * Does NOT handle enabled state - use enable()/disable() for that.
+   * Subclasses should override to handle their specific options
+   * @param options Partial options to update (handler-specific, not including enabled flag)
+   */
+  configure(options) {
+  }
+  /**
+   * Enable this handler.
+   * Calls onEnable() hook for subclass-specific enabling logic
+   */
+  enable() {
+    if (!this.enabled) {
+      this.enabled = true;
+      this.onEnable();
+    }
+  }
+  /**
+   * Disable this handler.
+   * Calls onDisable() hook for subclass-specific disabling logic
+   */
+  disable() {
+    if (this.enabled) {
+      this.enabled = false;
+      this.onDisable();
+    }
+  }
+  /**
+   * Check if this handler is currently enabled
+   * @returns true if enabled, false otherwise
+   */
+  isEnabled() {
+    return this.enabled;
+  }
+}
+class PanHandler extends Handler {
+  reset() {
+    void this.controller.moveTo(0, 0, 0, true);
+  }
+  /**
+   * Enable pan gestures.
+   * Configures camera-controls to handle left-click drag and single-touch drag
+   */
+  onEnable() {
+    this.controller.mouseButtons.left = CameraController.ACTION.TRUCK;
+    this.controller.touches.one = CameraController.ACTION.TOUCH_TRUCK;
+  }
+  /**
+   * Disable pan gestures.
+   * Removes pan actions from camera-controls
+   */
+  onDisable() {
+    this.controller.mouseButtons.left = CameraController.ACTION.NONE;
+    this.controller.touches.one = CameraController.ACTION.NONE;
+  }
+  // FIXME: Add inertia
+}
+const ROTATION_THRESHOLD = 25;
+class RollHandler extends Handler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "rotating", false);
+    __publicField(this, "startVector");
+    __publicField(this, "vector");
+    __publicField(this, "minDiameter", 0);
+    __publicField(this, "startBearing", 0);
+    __publicField(this, "raycaster", new Raycaster());
+    __publicField(this, "pivotWorld", new Vector3());
+    __publicField(this, "tempVec2", new Vector2());
+    __publicField(this, "tempVec3", new Vector3());
+    __publicField(this, "onRotateStart", (event) => {
+      console.log("RollHandler: rotatestart", event);
+      if (!this.enabled) {
+        console.log("RollHandler: not enabled");
+        return;
+      }
+      const { pointers } = event;
+      console.log("RollHandler: pointers", pointers == null ? void 0 : pointers.length);
+      if (pointers.length !== 2) return;
+      const p0 = new Vector2(pointers[0].offsetX, pointers[0].offsetY);
+      const p1 = new Vector2(pointers[1].offsetX, pointers[1].offsetY);
+      this.startVector = this.vector = p0.clone().sub(p1);
+      this.minDiameter = p0.distanceTo(p1);
+      this.startBearing = 0;
+      this.rotating = false;
+      console.log("RollHandler: initialized rotation, diameter:", this.minDiameter);
+    });
+    __publicField(this, "onRotate", (event) => {
+      if (!this.enabled) return;
+      const { pointers, rotation } = event;
+      if (pointers.length !== 2 || !this.startVector) {
+        console.log("RollHandler: rotate ignored", pointers == null ? void 0 : pointers.length, !!this.startVector);
+        return;
+      }
+      const p0 = new Vector2(pointers[0].offsetX, pointers[0].offsetY);
+      const p1 = new Vector2(pointers[1].offsetX, pointers[1].offsetY);
+      this.vector = p0.clone().sub(p1);
+      if (!this.rotating && this.isBelowThreshold(this.vector)) {
+        console.log("RollHandler: below threshold");
+        return;
+      }
+      if (!this.rotating) {
+        this.rotating = true;
+        this.startBearing = rotation;
+        console.log("RollHandler: rotation started, bearing:", rotation);
+      }
+      const bearingDelta = -(rotation - this.startBearing);
+      this.startBearing = rotation;
+      if (Math.abs(bearingDelta) < 0.01) {
+        console.log("RollHandler: delta too small:", bearingDelta);
+        return;
+      }
+      console.log("RollHandler: rotating by", bearingDelta, "degrees");
+      const midpointPx = p0.clone().add(p1).multiplyScalar(0.5);
+      this.normalizeScreenCoords(midpointPx, this.tempVec2);
+      this.unprojectToWorldPlane(this.tempVec2, this.pivotWorld);
+      void this.controller.rotate(bearingDelta * DEG2RAD, 0, false);
+      this.projectWorldToScreen(this.pivotWorld, this.tempVec2);
+      const pivotNewPx = this.denormalizeScreenCoords(this.tempVec2, this.tempVec3);
+      const screenDeltaX = midpointPx.x - pivotNewPx.x;
+      const screenDeltaY = midpointPx.y - pivotNewPx.y;
+      const worldPan = this.screenDeltaToWorldDelta(screenDeltaX, screenDeltaY);
+      void this.controller.truck(worldPan.x, worldPan.y, false);
+    });
+    __publicField(this, "onRotateEnd", () => {
+      this.rotating = false;
+      this.startVector = void 0;
+      this.vector = void 0;
+      this.minDiameter = 0;
+    });
+  }
+  reset() {
+    void this.controller.rotateAzimuthTo(0, true);
+    this.rotating = false;
+    this.startVector = void 0;
+    this.vector = void 0;
+    this.minDiameter = 0;
+  }
+  /**
+   * Enable roll gestures.
+   * - Mobile: custom two-finger rotation with pivot compensation
+   */
+  onEnable() {
+    this.controller.maxAzimuthAngle = Infinity;
+    this.controller.minAzimuthAngle = -Infinity;
+    this.eventManager.on("rotatestart", this.onRotateStart);
+    this.eventManager.on("rotate", this.onRotate);
+    this.eventManager.on("rotateend", this.onRotateEnd);
+  }
+  /**
+   * Disable roll gestures.
+   * Restricts azimuth angle to zero and removes event listeners
+   */
+  onDisable() {
+    this.controller.maxAzimuthAngle = 0;
+    this.controller.minAzimuthAngle = 0;
+    this.eventManager.off("rotatestart", this.onRotateStart);
+    this.eventManager.off("rotate", this.onRotate);
+    this.eventManager.off("rotateend", this.onRotateEnd);
+    this.rotating = false;
+  }
+  /**
+   * Check if rotation is below threshold (Mapbox-style).
+   * Threshold is in pixels along circumference, scaled by touch circle diameter.
+   * @param vector Current vector between fingers
+   * @returns true if below threshold, false otherwise
+   */
+  isBelowThreshold(vector) {
+    this.minDiameter = Math.min(this.minDiameter, vector.length());
+    const circumference = Math.PI * this.minDiameter;
+    const thresholdDegrees = ROTATION_THRESHOLD / circumference * 360;
+    if (!this.startVector) return true;
+    const bearingDeltaSinceStart = this.getBearingDelta(vector, this.startVector);
+    return Math.abs(bearingDeltaSinceStart) < thresholdDegrees;
+  }
+  /**
+   * Get signed angle between two vectors in degrees
+   * @param a First vector
+   * @param b Second vector
+   * @returns Angle difference in degrees
+   */
+  getBearingDelta(a, b) {
+    return a.angle() - b.angle();
+  }
+  /**
+   * Normalize screen pixel coordinates to NDC [-1, 1]
+   * @param screenPos Screen position in pixels
+   * @param out Output vector for NDC coordinates
+   * @returns NDC coordinates
+   */
+  normalizeScreenCoords(screenPos, out) {
+    const canvas = this.domElement;
+    return out.set(screenPos.x / canvas.width * 2 - 1, -(screenPos.y / canvas.height) * 2 + 1);
+  }
+  /**
+   * Denormalize NDC coordinates to screen pixels
+   * @param ndc NDC coordinates [-1, 1]
+   * @param out Output vector for screen pixel coordinates
+   * @returns Screen pixel coordinates
+   */
+  denormalizeScreenCoords(ndc, out) {
+    const canvas = this.domElement;
+    return out.set((ndc.x + 1) * 0.5 * canvas.width, (1 - ndc.y) * 0.5 * canvas.height, 0);
+  }
+  /**
+   * Unproject screen NDC coordinates to world plane (Z=0)
+   * @param ndc NDC coordinates [-1, 1]
+   * @param out Output vector for world coordinates
+   * @returns World coordinates on Z=0 plane
+   */
+  unprojectToWorldPlane(ndc, out) {
+    const camera = this.controller.camera;
+    this.raycaster.setFromCamera(ndc, camera);
+    const ray = this.raycaster.ray;
+    const t = -ray.origin.z / ray.direction.z;
+    return out.copy(ray.origin).addScaledVector(ray.direction, t);
+  }
+  /**
+   * Project world point to screen NDC coordinates
+   * @param worldPos World position
+   * @param out Output vector for NDC coordinates
+   * @returns NDC coordinates
+   */
+  projectWorldToScreen(worldPos, out) {
+    const camera = this.controller.camera;
+    const projected = this.tempVec3.copy(worldPos).project(camera);
+    return out.set(projected.x, projected.y);
+  }
+  /**
+   * Convert screen-space pixel delta to world-space translation.
+   * For top-down view, this is a simple perspective calculation.
+   * @param deltaX Screen delta X in pixels
+   * @param deltaY Screen delta Y in pixels
+   * @returns World-space translation vector
+   */
+  screenDeltaToWorldDelta(deltaX, deltaY) {
+    const camera = this.controller.camera;
+    const canvas = this.domElement;
+    const distance = Math.abs(camera.position.z);
+    const fov = camera.getEffectiveFOV() * DEG2RAD;
+    const worldHeight = 2 * distance * Math.tan(fov / 2);
+    const worldWidth = worldHeight * camera.aspect;
+    return this.tempVec2.set(deltaX / canvas.width * worldWidth, -(deltaY / canvas.height) * worldHeight);
+  }
+}
+class InteractionsSystem {
+  /**
+   * @param renderer {@link Renderer} instance
+   * @param events {@link EventSystem} instance
+   * @param viewportSystem {@link ViewportSystem} instance
+   * @param layerSystem {@link LayerSystem} instance
+   */
+  constructor(renderer, events, viewportSystem, layerSystem) {
+    /** Gesture handlers for camera controls */
+    __publicField(this, "handlers");
+    __publicField(this, "handlerArray");
+    __publicField(this, "canvas");
+    __publicField(this, "mousePointer", new Vector2());
+    __publicField(this, "eventManager");
+    __publicField(this, "dragStart");
+    __publicField(this, "dragThreshold", 15);
+    __publicField(this, "isDragging", false);
+    this.renderer = renderer;
+    this.events = events;
+    this.viewportSystem = viewportSystem;
+    this.layerSystem = layerSystem;
+    this.canvas = renderer.canvas;
+    this.eventManager = new EventManager(this.canvas, {
+      recognizers: [[Rotate, { enable: true }]]
+    });
+    console.log("EventManager created with Rotate recognizer");
+    this.configureCameraControls();
+    this.attachCanvasListeners();
+    const controller = viewportSystem.cameraController;
+    this.handlers = {
+      pan: new PanHandler(controller, this.canvas, this.eventManager),
+      roll: new RollHandler(controller, this.canvas, this.eventManager, viewportSystem)
+    };
+    this.handlerArray = Object.values(this.handlers);
+    this.handlers.pan.enable();
+    this.handlers.roll.enable();
+  }
+  /**
+   * Update camera position and directions.
+   * This should be called in your tick loop every time, and returns true if re-rendering is needed.
+   * @param delta delta time in seconds
+   * @returns true if re-rendering is needed
+   */
+  updateControls(delta) {
+    let needsUpdate = this.viewportSystem.cameraController.update(delta);
+    if (needsUpdate) {
+      console.log(
+        // "azimuth angle",
+        // Math.round(this.viewportSystem.cameraController.azimuthAngle * RAD2DEG),
+        "polar angle",
+        Math.round(this.viewportSystem.cameraController.polarAngle * RAD2DEG),
+        "camera position",
+        this.viewportSystem.cameraController.camera.position.toArray().map(Math.round)
+      );
+    }
+    for (const handler of this.handlerArray) {
+      if (handler.isEnabled()) {
+        needsUpdate = handler.update(delta) || needsUpdate;
+      }
+    }
+    return needsUpdate;
+  }
+  configureCameraControls() {
+    const controller = this.viewportSystem.cameraController;
+    controller.draggingSmoothTime = 0;
+    controller.dollyToCursor = true;
+    controller.restThreshold = 1;
+    controller.maxAzimuthAngle = 0;
+    controller.minAzimuthAngle = 0;
+    controller.maxPolarAngle = 0;
+    controller.mouseButtons = {
+      left: CameraController.ACTION.NONE,
+      middle: CameraController.ACTION.NONE,
+      right: CameraController.ACTION.ROTATE,
+      wheel: CameraController.ACTION.NONE
+    };
+    controller.touches = {
+      one: CameraController.ACTION.NONE,
+      two: CameraController.ACTION.NONE,
+      // Disabled - handlers implement custom gestures
+      three: CameraController.ACTION.NONE
+    };
+    controller.connect(this.canvas);
+  }
+  attachCanvasListeners() {
+    this.canvas.addEventListener("pointerdown", (event) => {
+      this.isDragging = false;
+      this.dragStart = { x: event.offsetX, y: event.offsetY };
+    });
+    this.canvas.addEventListener("pointerup", (event) => {
+      if (!this.dragStart) return;
+      const dX = event.offsetX - this.dragStart.x;
+      const dY = event.offsetY - this.dragStart.y;
+      this.dragStart = void 0;
+      if (dX * dX + dY * dY > this.dragThreshold) this.isDragging = true;
+    });
+    const mouseEventsMap = {
+      mousemove: "pointer:move",
+      mouseout: "pointer:out",
+      click: "pointer:click"
+    };
+    const mouseEventKeys = Object.keys(mouseEventsMap);
+    mouseEventKeys.forEach((type) => {
+      this.canvas.addEventListener(type, (event) => {
+        const eventType = mouseEventsMap[type];
+        const isDragging = type === "click" && this.isDragging;
+        const hasListeners = this.events.hasListeners(eventType);
+        if (isDragging || !hasListeners) return;
+        normalizeEventCoordinates(event, this.canvas, this.mousePointer);
+        const intersections = this.viewportSystem.getIntersectedObjects(this.mousePointer);
+        const point = this.viewportSystem.screenTo("svg", this.mousePointer);
+        const defs = this.layerSystem.getIntersectedDefs(intersections);
+        this.events.emit(eventType, { event, point, defs });
+      });
+    });
+  }
+}
+class Renderer {
+  /**
+   * @param opts {@link RendererOptions}
+   */
+  constructor(opts) {
+    /** Whether to log debug information */
+    __publicField(this, "debugLog");
+    /** {@link HTMLCanvasElement} that this renderer is rendering to */
+    __publicField(this, "canvas");
+    __publicField(this, "ui");
+    __publicField(this, "clock");
+    __publicField(this, "renderer");
+    __publicField(this, "eventSystem");
+    __publicField(this, "layerSystem");
+    __publicField(this, "viewportSystem");
+    __publicField(this, "interactionsSystem");
+    //private navigationSystem: NavigationSystem;
+    __publicField(this, "memoryInfoExtension");
+    __publicField(this, "memoryInfo", "");
+    __publicField(this, "viewport");
+    __publicField(this, "needsRedraw", true);
+    __publicField(this, "isExternalMode", false);
+    var _a, _b;
+    const { canvas, gl, debugLog = false, ui } = opts;
+    this.canvas = canvas;
+    this.debugLog = debugLog;
+    this.ui = ui;
+    const rendererOptions = {
+      antialias: true,
+      context: gl,
+      canvas: this.canvas
+    };
+    this.clock = new Clock();
+    this.renderer = new WebGLRenderer(rendererOptions);
+    this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight, false);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.eventSystem = new EventSystem();
+    this.viewportSystem = new ViewportSystem(this, this.eventSystem);
+    this.layerSystem = new LayerSystem(this);
+    this.interactionsSystem = new InteractionsSystem(this, this.eventSystem, this.viewportSystem, this.layerSystem);
+    this.memoryInfoExtension = this.renderer.getContext().getExtension("GMAN_webgl_memory");
+    this.canvas.addEventListener("webglcontextlost", (e) => this.onContextLost(e), false);
+    this.canvas.addEventListener("webglcontextrestored", (e) => this.onContextRestored(e), false);
+    void ((_b = (_a = this.ui) == null ? void 0 : _a.stats) == null ? void 0 : _b.init(this.renderer.getContext()));
+  }
+  /**
+   * {@link NavigationAPI} instance for controlling the viewport
+   */
+  get controls() {
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      zoomBy: () => {
+      },
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      zoomTo: () => {
+      },
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      resetCamera: () => {
+      },
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      configure: () => {
+      },
+      handlers: this.interactionsSystem.handlers,
+      controller: this.viewportSystem.cameraController
+    };
+  }
+  /**
+   * {@link EventsAPI} instance for subscribing to internal events
+   */
+  get events() {
+    return asEventAPI(this.eventSystem);
+  }
+  /**
+   * Optional sub-rectangle of the viewport that is used for positioning scene's viewbox
+   */
+  get visibleRect() {
+    return this.viewport;
+  }
+  /**
+   * Optional sub-rectangle of the viewport that is used for positioning scene's viewbox
+   */
+  set visibleRect(rect) {
+    this.viewport = rect;
+    this.viewportSystem.updateViewport();
+    this.update();
+  }
+  /**
+   * Underlying {@link WebGLRenderer} instance
+   */
+  get context() {
+    return this.renderer;
+  }
+  /**
+   * Size of the canvas's drawing buffer in pixels (not to be confused with the client size in CSS pixels). Readonly.
+   * @internal
+   */
+  get size() {
+    return [this.canvas.width, this.canvas.height];
+  }
+  /**
+   * Sets the renderer to external mode, where parts of rendering process are not managed by the renderer (e.g. Mapbox GL JS).
+   * @param staticTransformMatrix static transform matrix to apply to the scene
+   */
+  // FIXME: Move to controls system
+  configureExternalMode(staticTransformMatrix) {
+  }
+  /**
+   * Update scene matrix from dynamic transform matrix.
+   * @param dynamicTransformMatrix dynamic transform matrix (changes every frame)
+   */
+  updateExternalTransformMatrix(dynamicTransformMatrix) {
+  }
+  /**
+   * Initialize the scene and start the rendering loop
+   * @param sceneDef {@link SceneDef} to render
+   * @param startLoop whether to start the rendering loop
+   */
+  start(sceneDef, startLoop = true) {
+    this.clock.start();
+    this.viewportSystem.initViewport(sceneDef);
+    this.viewportSystem.scene.add(this.layerSystem.buildScene(sceneDef));
+    if (startLoop) this.renderer.setAnimationLoop(() => this.render());
+  }
+  /**
+   * Update the given defs to make them reflect the current state
+   * @param defs {@link RenderableDef} array to update
+   */
+  update(...defs) {
+    this.layerSystem.updateDefs(defs);
+    this.needsRedraw = true;
+  }
+  // FIXME: Move to viewport system?
+  /**
+   * Converts coordinates from canvas space to SVG space.
+   * @param point point in canvas space (relative to the canvas's top left corner)
+   * @returns point in SVG space
+   */
+  screenToSvg(point) {
+    const vector2 = new Vector2(point.x, point.y);
+    canvasToNDC(vector2, this.canvas, vector2);
+    return this.viewportSystem.screenTo("svg", vector2);
+  }
+  /**
+   * Main rendering loop
+   */
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    (_b = (_a = this.ui) == null ? void 0 : _a.stats) == null ? void 0 : _b.begin();
+    if (this.isExternalMode) this.renderer.resetState();
+    else this.resizeCanvasToDisplaySize();
+    this.viewportSystem.updatePtScale();
+    const delta = this.clock.getDelta();
+    const hasDefsUpdated = this.layerSystem.processPendingUpdates();
+    const hasControlsUpdated = this.interactionsSystem.updateControls(delta);
+    const needsRedraw = this.needsRedraw || hasControlsUpdated || hasDefsUpdated || this.ui;
+    if (needsRedraw) {
+      this.renderer.render(this.viewportSystem.scene, this.viewportSystem.camera);
+      this.needsRedraw = false;
+    }
+    (_d = (_c = this.ui) == null ? void 0 : _c.stats) == null ? void 0 : _d.end();
+    (_f = (_e = this.ui) == null ? void 0 : _e.stats) == null ? void 0 : _f.update();
+    this.updateMemoryInfo();
+  }
+  // https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
+  resizeCanvasToDisplaySize() {
+    const dpr = window.devicePixelRatio;
+    const { width, height } = this.canvas.getBoundingClientRect();
+    const displayWidth = Math.floor(width * dpr);
+    const displayHeight = Math.floor(height * dpr);
+    if (this.canvas.width !== displayWidth || this.canvas.height !== displayHeight || this.renderer.getPixelRatio() !== dpr) {
+      if (this.debugLog) console.log("renderer resize", width, height, dpr);
+      this.renderer.setSize(width, height, false);
+      this.renderer.setPixelRatio(dpr);
+      this.viewportSystem.updateViewport();
+      this.update();
+    }
+  }
+  updateMemoryInfo() {
+    var _a;
+    if (this.memoryInfoExtension && ((_a = this.ui) == null ? void 0 : _a.memoryInfoPanel)) {
+      const memoryInfo = this.memoryInfoExtension.getMemoryInfo();
+      const memoryInfoContent = JSON.stringify(memoryInfo.memory, null, 2);
+      const elapsedTime = this.clock.getElapsedTime() * 1e3;
+      if (memoryInfoContent !== this.memoryInfo) {
+        const logMarker = `memoryInfo [${elapsedTime.toFixed(2)}ms since start]`;
+        if (this.debugLog) console.log(logMarker, memoryInfo);
+        this.memoryInfo = memoryInfoContent;
+      }
+      this.ui.memoryInfoPanel.textContent = JSON.stringify(memoryInfo, null, 2);
+    }
+  }
+  onContextLost(event) {
+    event.preventDefault();
+    console.log("webglcontextlost event", event);
+    this.renderer.setAnimationLoop(null);
+    this.clock.stop();
+    if (this.ui) setTimeout(() => this.renderer.forceContextRestore(), 0);
+  }
+  onContextRestored(event) {
+    event.preventDefault();
+    console.log("webglcontextrestored event", event);
+    this.renderer.setAnimationLoop(() => this.render());
+    this.clock.start();
+  }
+}
+export {
+  Polygon,
+  Rect,
+  Renderer,
+  createVector2,
+  isImageDef,
+  isImageLayer,
+  isLayerDef,
+  isLayerLayer,
+  isLineDef,
+  isLineLayer,
+  isShapeDef,
+  isShapeLayer,
+  isTextDef,
+  isTextLayer
+};