@industry-theme/repository-composition-panels 0.2.57 → 0.2.59

package/dist/{index-72-eqzyq.js → index-L48T6UlC.js}

@@ -6715,18 +6715,18 @@ function ZoomEvent(type2, {
     _: { value: dispatch2 }
   });
 }
-function Transform(k2, x2, y2) {
+function Transform$1(k2, x2, y2) {
   this.k = k2;
   this.x = x2;
   this.y = y2;
 }
-Transform.prototype = {
-  constructor: Transform,
+Transform$1.prototype = {
+  constructor: Transform$1,
   scale: function(k2) {
-    return k2 === 1 ? this : new Transform(this.k * k2, this.x, this.y);
+    return k2 === 1 ? this : new Transform$1(this.k * k2, this.x, this.y);
   },
   translate: function(x2, y2) {
-    return x2 === 0 & y2 === 0 ? this : new Transform(this.k, this.x + this.k * x2, this.y + this.k * y2);
+    return x2 === 0 & y2 === 0 ? this : new Transform$1(this.k, this.x + this.k * x2, this.y + this.k * y2);
   },
   apply: function(point) {
     return [point[0] * this.k + this.x, point[1] * this.k + this.y];
@@ -6756,8 +6756,8 @@ Transform.prototype = {
     return "translate(" + this.x + "," + this.y + ") scale(" + this.k + ")";
   }
 };
-var identity$1 = new Transform(1, 0, 0);
-transform.prototype = Transform.prototype;
+var identity$1 = new Transform$1(1, 0, 0);
+transform.prototype = Transform$1.prototype;
 function transform(node) {
   while (!node.__zoom) if (!(node = node.parentNode)) return identity$1;
   return node.__zoom;
@@ -6847,11 +6847,11 @@ function zoom() {
   };
   function scale(transform2, k2) {
     k2 = Math.max(scaleExtent[0], Math.min(scaleExtent[1], k2));
-    return k2 === transform2.k ? transform2 : new Transform(k2, transform2.x, transform2.y);
+    return k2 === transform2.k ? transform2 : new Transform$1(k2, transform2.x, transform2.y);
   }
   function translate(transform2, p0, p1) {
     var x2 = p0[0] - p1[0] * transform2.k, y2 = p0[1] - p1[1] * transform2.k;
-    return x2 === transform2.x && y2 === transform2.y ? transform2 : new Transform(transform2.k, x2, y2);
+    return x2 === transform2.x && y2 === transform2.y ? transform2 : new Transform$1(transform2.k, x2, y2);
   }
   function centroid(extent2) {
     return [(+extent2[0][0] + +extent2[1][0]) / 2, (+extent2[0][1] + +extent2[1][1]) / 2];
@@ -6867,7 +6867,7 @@ function zoom() {
         if (t2 === 1) t2 = b2;
         else {
           var l2 = i2(t2), k2 = w2 / l2[2];
-          t2 = new Transform(k2, p2[0] - l2[0] * k2, p2[1] - l2[1] * k2);
+          t2 = new Transform$1(k2, p2[0] - l2[0] * k2, p2[1] - l2[1] * k2);
         }
         g2.zoom(null, t2);
       };
@@ -60179,7 +60179,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-BaiHieOj.js");
+    await import("./browserAll-BG2Mm9Lt.js");
   }
 };
 const webworkerExt = {
@@ -60190,7 +60190,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-Ccu7Tp4h.js");
+    await import("./webworkerAll-MEZKzuuk.js");
   }
 };
 class ObservablePoint {
@@ -71179,19 +71179,19 @@ class Shader extends EventEmitter {
     this._ownedBindGroups = [];
     this._destroyed = false;
     let {
-      gpuProgram,
-      glProgram,
+      gpuProgram: gpuProgram2,
+      glProgram: glProgram2,
       groups,
       resources,
       compatibleRenderers,
       groupMap
     } = options;
-    this.gpuProgram = gpuProgram;
-    this.glProgram = glProgram;
+    this.gpuProgram = gpuProgram2;
+    this.glProgram = glProgram2;
     if (compatibleRenderers === void 0) {
       compatibleRenderers = 0;
-      if (gpuProgram) compatibleRenderers |= RendererType.WEBGPU;
-      if (glProgram) compatibleRenderers |= RendererType.WEBGL;
+      if (gpuProgram2) compatibleRenderers |= RendererType.WEBGPU;
+      if (glProgram2) compatibleRenderers |= RendererType.WEBGL;
     }
     this.compatibleRenderers = compatibleRenderers;
     const nameHash = {};
@@ -71200,9 +71200,9 @@ class Shader extends EventEmitter {
     }
     if (resources && groups) {
       throw new Error("[Shader] Cannot have both resources and groups");
-    } else if (!gpuProgram && groups && !groupMap) {
+    } else if (!gpuProgram2 && groups && !groupMap) {
       throw new Error("[Shader] No group map or WebGPU shader provided - consider using resources instead.");
-    } else if (!gpuProgram && groups && groupMap) {
+    } else if (!gpuProgram2 && groups && groupMap) {
       for (const i2 in groupMap) {
         for (const j2 in groupMap[i2]) {
           const uniformName = groupMap[i2][j2];
@@ -71213,8 +71213,8 @@ class Shader extends EventEmitter {
           };
         }
       }
-    } else if (gpuProgram && groups && !groupMap) {
-      const groupData = gpuProgram.structsAndGroups.groups;
+    } else if (gpuProgram2 && groups && !groupMap) {
+      const groupData = gpuProgram2.structsAndGroups.groups;
       groupMap = {};
       groupData.forEach((data) => {
         groupMap[data.group] = groupMap[data.group] || {};
@@ -71224,8 +71224,8 @@ class Shader extends EventEmitter {
     } else if (resources) {
       groups = {};
       groupMap = {};
-      if (gpuProgram) {
-        const groupData = gpuProgram.structsAndGroups.groups;
+      if (gpuProgram2) {
+        const groupData = gpuProgram2.structsAndGroups.groups;
         groupData.forEach((data) => {
           groupMap[data.group] = groupMap[data.group] || {};
           groupMap[data.group][data.binding] = data.name;
@@ -71323,17 +71323,17 @@ class Shader extends EventEmitter {
   }
   static from(options) {
     const { gpu, gl, ...rest } = options;
-    let gpuProgram;
-    let glProgram;
+    let gpuProgram2;
+    let glProgram2;
     if (gpu) {
-      gpuProgram = GpuProgram.from(gpu);
+      gpuProgram2 = GpuProgram.from(gpu);
     }
     if (gl) {
-      glProgram = GlProgram.from(gl);
+      glProgram2 = GlProgram.from(gl);
     }
     return new Shader({
-      gpuProgram,
-      glProgram,
+      gpuProgram: gpuProgram2,
+      glProgram: glProgram2,
       ...rest
     });
   }
@@ -72433,19 +72433,19 @@ async function autoDetectRenderer(options) {
   for (let i2 = 0; i2 < preferredOrder.length; i2++) {
     const rendererType = preferredOrder[i2];
     if (rendererType === "webgpu" && await isWebGPUSupported()) {
-      const { WebGPURenderer } = await import("./WebGPURenderer-BMMCBjut.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-D2GRpSb3.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-BKhoAof0.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-CsAZzI7W.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-D2eDumWy.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-2yEMbusr.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -75554,7 +75554,7 @@ function getBatchSamplersUniformGroup(maxTextures) {
 }
 class DefaultShader extends Shader {
   constructor(maxTextures) {
-    const glProgram = compileHighShaderGlProgram({
+    const glProgram2 = compileHighShaderGlProgram({
       name: "batch",
       bits: [
         colorBitGl,
@@ -75562,7 +75562,7 @@ class DefaultShader extends Shader {
         roundPixelsBitGl
       ]
     });
-    const gpuProgram = compileHighShaderGpuProgram({
+    const gpuProgram2 = compileHighShaderGpuProgram({
       name: "batch",
       bits: [
         colorBit,
@@ -75571,8 +75571,8 @@ class DefaultShader extends Shader {
       ]
     });
     super({
-      glProgram,
-      gpuProgram,
+      glProgram: glProgram2,
+      gpuProgram: gpuProgram2,
       resources: {
         batchSamplers: getBatchSamplersUniformGroup(maxTextures)
       }
@@ -80961,6 +80961,1646 @@ class Graphics extends ViewContainer {
     return this._callContextMethod("star", args);
   }
 }
+const _MeshGeometry = class _MeshGeometry2 extends Geometry {
+  constructor(...args) {
+    let options = args[0] ?? {};
+    if (options instanceof Float32Array) {
+      deprecation(v8_0_0, "use new MeshGeometry({ positions, uvs, indices }) instead");
+      options = {
+        positions: options,
+        uvs: args[1],
+        indices: args[2]
+      };
+    }
+    options = { ..._MeshGeometry2.defaultOptions, ...options };
+    const positions = options.positions || new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
+    let uvs = options.uvs;
+    if (!uvs) {
+      if (options.positions) {
+        uvs = new Float32Array(positions.length);
+      } else {
+        uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
+      }
+    }
+    const indices = options.indices || new Uint32Array([0, 1, 2, 0, 2, 3]);
+    const shrinkToFit = options.shrinkBuffersToFit;
+    const positionBuffer = new Buffer({
+      data: positions,
+      label: "attribute-mesh-positions",
+      shrinkToFit,
+      usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
+    });
+    const uvBuffer = new Buffer({
+      data: uvs,
+      label: "attribute-mesh-uvs",
+      shrinkToFit,
+      usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
+    });
+    const indexBuffer = new Buffer({
+      data: indices,
+      label: "index-mesh-buffer",
+      shrinkToFit,
+      usage: BufferUsage.INDEX | BufferUsage.COPY_DST
+    });
+    super({
+      attributes: {
+        aPosition: {
+          buffer: positionBuffer,
+          format: "float32x2",
+          stride: 2 * 4,
+          offset: 0
+        },
+        aUV: {
+          buffer: uvBuffer,
+          format: "float32x2",
+          stride: 2 * 4,
+          offset: 0
+        }
+      },
+      indexBuffer,
+      topology: options.topology
+    });
+    this.batchMode = "auto";
+  }
+  /** The positions of the mesh. */
+  get positions() {
+    return this.attributes.aPosition.buffer.data;
+  }
+  /**
+   * Set the positions of the mesh.
+   * When setting the positions, its important that the uvs array is at least as long as the positions array.
+   * otherwise the geometry will not be valid.
+   * @param {Float32Array} value - The positions of the mesh.
+   */
+  set positions(value) {
+    this.attributes.aPosition.buffer.data = value;
+  }
+  /** The UVs of the mesh. */
+  get uvs() {
+    return this.attributes.aUV.buffer.data;
+  }
+  /**
+   * Set the UVs of the mesh.
+   * Its important that the uvs array you set is at least as long as the positions array.
+   * otherwise the geometry will not be valid.
+   * @param {Float32Array} value - The UVs of the mesh.
+   */
+  set uvs(value) {
+    this.attributes.aUV.buffer.data = value;
+  }
+  /** The indices of the mesh. */
+  get indices() {
+    return this.indexBuffer.data;
+  }
+  set indices(value) {
+    this.indexBuffer.data = value;
+  }
+};
+_MeshGeometry.defaultOptions = {
+  topology: "triangle-list",
+  shrinkBuffersToFit: false
+};
+let MeshGeometry = _MeshGeometry;
+class BatchableMesh {
+  constructor() {
+    this.batcherName = "default";
+    this.packAsQuad = false;
+    this.indexOffset = 0;
+    this.attributeOffset = 0;
+    this.roundPixels = 0;
+    this._batcher = null;
+    this._batch = null;
+    this._textureMatrixUpdateId = -1;
+    this._uvUpdateId = -1;
+  }
+  get blendMode() {
+    return this.renderable.groupBlendMode;
+  }
+  get topology() {
+    return this._topology || this.geometry.topology;
+  }
+  set topology(value) {
+    this._topology = value;
+  }
+  reset() {
+    this.renderable = null;
+    this.texture = null;
+    this._batcher = null;
+    this._batch = null;
+    this.geometry = null;
+    this._uvUpdateId = -1;
+    this._textureMatrixUpdateId = -1;
+  }
+  /**
+   * Sets the texture for the batchable mesh.
+   * As it does so, it resets the texture matrix update ID.
+   * this is to ensure that the texture matrix is recalculated when the uvs are referenced
+   * @param value - The texture to set.
+   */
+  setTexture(value) {
+    if (this.texture === value) return;
+    this.texture = value;
+    this._textureMatrixUpdateId = -1;
+  }
+  get uvs() {
+    const geometry = this.geometry;
+    const uvBuffer = geometry.getBuffer("aUV");
+    const uvs = uvBuffer.data;
+    let transformedUvs = uvs;
+    const textureMatrix = this.texture.textureMatrix;
+    if (!textureMatrix.isSimple) {
+      transformedUvs = this._transformedUvs;
+      if (this._textureMatrixUpdateId !== textureMatrix._updateID || this._uvUpdateId !== uvBuffer._updateID) {
+        if (!transformedUvs || transformedUvs.length < uvs.length) {
+          transformedUvs = this._transformedUvs = new Float32Array(uvs.length);
+        }
+        this._textureMatrixUpdateId = textureMatrix._updateID;
+        this._uvUpdateId = uvBuffer._updateID;
+        textureMatrix.multiplyUvs(uvs, transformedUvs);
+      }
+    }
+    return transformedUvs;
+  }
+  get positions() {
+    return this.geometry.positions;
+  }
+  get indices() {
+    return this.geometry.indices;
+  }
+  get color() {
+    return this.renderable.groupColorAlpha;
+  }
+  get groupTransform() {
+    return this.renderable.groupTransform;
+  }
+  get attributeSize() {
+    return this.geometry.positions.length / 2;
+  }
+  get indexSize() {
+    return this.geometry.indices.length;
+  }
+}
+class Transform {
+  /**
+   * @param options - Options for the transform.
+   * @param options.matrix - The matrix to use.
+   * @param options.observer - The observer to use.
+   */
+  constructor({ matrix, observer } = {}) {
+    this.dirty = true;
+    this._matrix = matrix ?? new Matrix();
+    this.observer = observer;
+    this.position = new ObservablePoint(this, 0, 0);
+    this.scale = new ObservablePoint(this, 1, 1);
+    this.pivot = new ObservablePoint(this, 0, 0);
+    this.skew = new ObservablePoint(this, 0, 0);
+    this._rotation = 0;
+    this._cx = 1;
+    this._sx = 0;
+    this._cy = 0;
+    this._sy = 1;
+  }
+  /**
+   * The transformation matrix computed from the transform's properties.
+   * Combines position, scale, rotation, skew, and pivot into a single matrix.
+   * @example
+   * ```ts
+   * // Get current matrix
+   * const matrix = transform.matrix;
+   * console.log(matrix.toString());
+   * ```
+   * @readonly
+   * @see {@link Matrix} For matrix operations
+   * @see {@link Transform.setFromMatrix} For setting transform from matrix
+   */
+  get matrix() {
+    const lt2 = this._matrix;
+    if (!this.dirty) return lt2;
+    lt2.a = this._cx * this.scale.x;
+    lt2.b = this._sx * this.scale.x;
+    lt2.c = this._cy * this.scale.y;
+    lt2.d = this._sy * this.scale.y;
+    lt2.tx = this.position.x - (this.pivot.x * lt2.a + this.pivot.y * lt2.c);
+    lt2.ty = this.position.y - (this.pivot.x * lt2.b + this.pivot.y * lt2.d);
+    this.dirty = false;
+    return lt2;
+  }
+  /**
+   * Called when a value changes.
+   * @param point
+   * @internal
+   */
+  _onUpdate(point) {
+    var _a;
+    this.dirty = true;
+    if (point === this.skew) {
+      this.updateSkew();
+    }
+    (_a = this.observer) == null ? void 0 : _a._onUpdate(this);
+  }
+  /** Called when the skew or the rotation changes. */
+  updateSkew() {
+    this._cx = Math.cos(this._rotation + this.skew.y);
+    this._sx = Math.sin(this._rotation + this.skew.y);
+    this._cy = -Math.sin(this._rotation - this.skew.x);
+    this._sy = Math.cos(this._rotation - this.skew.x);
+    this.dirty = true;
+  }
+  toString() {
+    return `[pixi.js/math:Transform position=(${this.position.x}, ${this.position.y}) rotation=${this.rotation} scale=(${this.scale.x}, ${this.scale.y}) skew=(${this.skew.x}, ${this.skew.y}) ]`;
+  }
+  /**
+   * Decomposes a matrix and sets the transforms properties based on it.
+   * @example
+   * ```ts
+   * // Basic matrix decomposition
+   * const transform = new Transform();
+   * const matrix = new Matrix()
+   *     .translate(100, 100)
+   *     .rotate(Math.PI / 4)
+   *     .scale(2, 2);
+   *
+   * transform.setFromMatrix(matrix);
+   * console.log(transform.position.x); // 100
+   * console.log(transform.rotation); // ~0.785 (π/4)
+   * ```
+   * @param matrix - The matrix to decompose
+   * @see {@link Matrix#decompose} For the decomposition logic
+   * @see {@link Transform#matrix} For getting the current matrix
+   */
+  setFromMatrix(matrix) {
+    matrix.decompose(this);
+    this.dirty = true;
+  }
+  /**
+   * The rotation of the object in radians.
+   * @example
+   * ```ts
+   * // Basic rotation
+   * transform.rotation = Math.PI / 4; // 45 degrees
+   *
+   * // Rotate around pivot point
+   * transform.pivot.set(50, 50);
+   * transform.rotation = Math.PI; // 180 degrees around pivot
+   *
+   * // Animate rotation
+   * app.ticker.add(() => {
+   *     transform.rotation += 0.1;
+   * });
+   * ```
+   * @see {@link Transform#pivot} For rotation point
+   * @see {@link Transform#skew} For skew effects
+   */
+  get rotation() {
+    return this._rotation;
+  }
+  set rotation(value) {
+    if (this._rotation !== value) {
+      this._rotation = value;
+      this._onUpdate(this.skew);
+    }
+  }
+}
+let canUseNewCanvasBlendModesValue;
+function createColoredCanvas(color2) {
+  const canvas = DOMAdapter.get().createCanvas(6, 1);
+  const context2 = canvas.getContext("2d");
+  context2.fillStyle = color2;
+  context2.fillRect(0, 0, 6, 1);
+  return canvas;
+}
+function canUseNewCanvasBlendModes() {
+  if (canUseNewCanvasBlendModesValue !== void 0) {
+    return canUseNewCanvasBlendModesValue;
+  }
+  try {
+    const magenta = createColoredCanvas("#ff00ff");
+    const yellow = createColoredCanvas("#ffff00");
+    const canvas = DOMAdapter.get().createCanvas(6, 1);
+    const context2 = canvas.getContext("2d");
+    context2.globalCompositeOperation = "multiply";
+    context2.drawImage(magenta, 0, 0);
+    context2.drawImage(yellow, 2, 0);
+    const imageData = context2.getImageData(2, 0, 1, 1);
+    if (!imageData) {
+      canUseNewCanvasBlendModesValue = false;
+    } else {
+      const data = imageData.data;
+      canUseNewCanvasBlendModesValue = data[0] === 255 && data[1] === 0 && data[2] === 0;
+    }
+  } catch (_error) {
+    canUseNewCanvasBlendModesValue = false;
+  }
+  return canUseNewCanvasBlendModesValue;
+}
+const canvasUtils = {
+  canvas: null,
+  convertTintToImage: false,
+  cacheStepsPerColorChannel: 8,
+  canUseMultiply: canUseNewCanvasBlendModes(),
+  tintMethod: null,
+  _canvasSourceCache: /* @__PURE__ */ new WeakMap(),
+  _unpremultipliedCache: /* @__PURE__ */ new WeakMap(),
+  getCanvasSource: (texture) => {
+    const source = texture.source;
+    const resource = source == null ? void 0 : source.resource;
+    if (!resource) {
+      return null;
+    }
+    const isPMA = source.alphaMode === "premultiplied-alpha";
+    const resourceWidth = source.resourceWidth ?? source.pixelWidth;
+    const resourceHeight = source.resourceHeight ?? source.pixelHeight;
+    const needsResize = resourceWidth !== source.pixelWidth || resourceHeight !== source.pixelHeight;
+    if (isPMA) {
+      if (resource instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && resource instanceof OffscreenCanvas) {
+        if (!needsResize) {
+          return resource;
+        }
+      }
+      const cached = canvasUtils._unpremultipliedCache.get(source);
+      if ((cached == null ? void 0 : cached.resourceId) === source._resourceId) {
+        return cached.canvas;
+      }
+    }
+    if (resource instanceof Uint8Array || resource instanceof Uint8ClampedArray || resource instanceof Int8Array || resource instanceof Uint16Array || resource instanceof Int16Array || resource instanceof Uint32Array || resource instanceof Int32Array || resource instanceof Float32Array || resource instanceof ArrayBuffer) {
+      const cached = canvasUtils._canvasSourceCache.get(source);
+      if ((cached == null ? void 0 : cached.resourceId) === source._resourceId) {
+        return cached.canvas;
+      }
+      const canvas = DOMAdapter.get().createCanvas(source.pixelWidth, source.pixelHeight);
+      const context2 = canvas.getContext("2d");
+      const imageData = context2.createImageData(source.pixelWidth, source.pixelHeight);
+      const data = imageData.data;
+      const bytes = resource instanceof ArrayBuffer ? new Uint8Array(resource) : new Uint8Array(resource.buffer, resource.byteOffset, resource.byteLength);
+      if (source.format === "bgra8unorm") {
+        for (let i2 = 0; i2 < data.length && i2 + 3 < bytes.length; i2 += 4) {
+          data[i2] = bytes[i2 + 2];
+          data[i2 + 1] = bytes[i2 + 1];
+          data[i2 + 2] = bytes[i2];
+          data[i2 + 3] = bytes[i2 + 3];
+        }
+      } else {
+        data.set(bytes.subarray(0, data.length));
+      }
+      context2.putImageData(imageData, 0, 0);
+      canvasUtils._canvasSourceCache.set(source, { canvas, resourceId: source._resourceId });
+      return canvas;
+    }
+    if (isPMA) {
+      const canvas = DOMAdapter.get().createCanvas(source.pixelWidth, source.pixelHeight);
+      const context2 = canvas.getContext("2d", { willReadFrequently: true });
+      canvas.width = source.pixelWidth;
+      canvas.height = source.pixelHeight;
+      context2.drawImage(resource, 0, 0);
+      const imageData = context2.getImageData(0, 0, canvas.width, canvas.height);
+      const data = imageData.data;
+      for (let i2 = 0; i2 < data.length; i2 += 4) {
+        const a2 = data[i2 + 3];
+        if (a2 > 0) {
+          const alphaInv = 255 / a2;
+          data[i2] = Math.min(255, data[i2] * alphaInv + 0.5);
+          data[i2 + 1] = Math.min(255, data[i2 + 1] * alphaInv + 0.5);
+          data[i2 + 2] = Math.min(255, data[i2 + 2] * alphaInv + 0.5);
+        }
+      }
+      context2.putImageData(imageData, 0, 0);
+      canvasUtils._unpremultipliedCache.set(source, { canvas, resourceId: source._resourceId });
+      return canvas;
+    }
+    if (needsResize) {
+      const cached = canvasUtils._canvasSourceCache.get(source);
+      if ((cached == null ? void 0 : cached.resourceId) === source._resourceId) {
+        return cached.canvas;
+      }
+      const canvas = DOMAdapter.get().createCanvas(source.pixelWidth, source.pixelHeight);
+      const context2 = canvas.getContext("2d");
+      canvas.width = source.pixelWidth;
+      canvas.height = source.pixelHeight;
+      context2.drawImage(resource, 0, 0);
+      canvasUtils._canvasSourceCache.set(source, { canvas, resourceId: source._resourceId });
+      return canvas;
+    }
+    return resource;
+  },
+  getTintedCanvas: (sprite, color2) => {
+    const texture = sprite.texture;
+    const stringColor = Color.shared.setValue(color2).toHex();
+    const cache = texture.tintCache || (texture.tintCache = {});
+    const cachedCanvas = cache[stringColor];
+    const resourceId = texture.source._resourceId;
+    if ((cachedCanvas == null ? void 0 : cachedCanvas.tintId) === resourceId) {
+      return cachedCanvas;
+    }
+    const canvas = cachedCanvas && "getContext" in cachedCanvas ? cachedCanvas : DOMAdapter.get().createCanvas();
+    canvasUtils.tintMethod(texture, color2, canvas);
+    canvas.tintId = resourceId;
+    {
+      cache[stringColor] = canvas;
+    }
+    return cache[stringColor];
+  },
+  getTintedPattern: (texture, color2) => {
+    const stringColor = Color.shared.setValue(color2).toHex();
+    const cache = texture.patternCache || (texture.patternCache = {});
+    const resourceId = texture.source._resourceId;
+    let pattern = cache[stringColor];
+    if ((pattern == null ? void 0 : pattern.tintId) === resourceId) {
+      return pattern;
+    }
+    if (!canvasUtils.canvas) {
+      canvasUtils.canvas = DOMAdapter.get().createCanvas();
+    }
+    canvasUtils.tintMethod(texture, color2, canvasUtils.canvas);
+    const context2 = canvasUtils.canvas.getContext("2d");
+    pattern = context2.createPattern(canvasUtils.canvas, "repeat");
+    pattern.tintId = resourceId;
+    cache[stringColor] = pattern;
+    return pattern;
+  },
+  /**
+   * Applies a transform to a CanvasPattern.
+   * @param pattern - The pattern to apply the transform to.
+   * @param matrix - The matrix to apply.
+   * @param matrix.a
+   * @param matrix.b
+   * @param matrix.c
+   * @param matrix.d
+   * @param matrix.tx
+   * @param matrix.ty
+   * @param invert
+   */
+  applyPatternTransform: (pattern, matrix, invert = true) => {
+    if (!matrix) return;
+    const patternAny = pattern;
+    if (!patternAny.setTransform) return;
+    const DOMMatrixCtor = globalThis.DOMMatrix;
+    if (!DOMMatrixCtor) return;
+    const domMatrix = new DOMMatrixCtor([matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty]);
+    patternAny.setTransform(invert ? domMatrix.inverse() : domMatrix);
+  },
+  tintWithMultiply: (texture, color2, canvas) => {
+    const context2 = canvas.getContext("2d");
+    const crop = texture.frame.clone();
+    const resolution = texture.source._resolution ?? texture.source.resolution ?? 1;
+    const rotate = texture.rotate;
+    crop.x *= resolution;
+    crop.y *= resolution;
+    crop.width *= resolution;
+    crop.height *= resolution;
+    const isVertical = groupD8.isVertical(rotate);
+    const outWidth = isVertical ? crop.height : crop.width;
+    const outHeight = isVertical ? crop.width : crop.height;
+    canvas.width = Math.ceil(outWidth);
+    canvas.height = Math.ceil(outHeight);
+    context2.save();
+    context2.fillStyle = Color.shared.setValue(color2).toHex();
+    context2.fillRect(0, 0, outWidth, outHeight);
+    context2.globalCompositeOperation = "multiply";
+    const source = canvasUtils.getCanvasSource(texture);
+    if (!source) {
+      context2.restore();
+      return;
+    }
+    if (rotate) {
+      canvasUtils._applyInverseRotation(context2, rotate, crop.width, crop.height);
+    }
+    context2.drawImage(
+      source,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      crop.width,
+      crop.height
+    );
+    context2.globalCompositeOperation = "destination-atop";
+    context2.drawImage(
+      source,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      crop.width,
+      crop.height
+    );
+    context2.restore();
+  },
+  tintWithOverlay: (texture, color2, canvas) => {
+    const context2 = canvas.getContext("2d");
+    const crop = texture.frame.clone();
+    const resolution = texture.source._resolution ?? texture.source.resolution ?? 1;
+    const rotate = texture.rotate;
+    crop.x *= resolution;
+    crop.y *= resolution;
+    crop.width *= resolution;
+    crop.height *= resolution;
+    const isVertical = groupD8.isVertical(rotate);
+    const outWidth = isVertical ? crop.height : crop.width;
+    const outHeight = isVertical ? crop.width : crop.height;
+    canvas.width = Math.ceil(outWidth);
+    canvas.height = Math.ceil(outHeight);
+    context2.save();
+    context2.globalCompositeOperation = "copy";
+    context2.fillStyle = Color.shared.setValue(color2).toHex();
+    context2.fillRect(0, 0, outWidth, outHeight);
+    context2.globalCompositeOperation = "destination-atop";
+    const source = canvasUtils.getCanvasSource(texture);
+    if (!source) {
+      context2.restore();
+      return;
+    }
+    if (rotate) {
+      canvasUtils._applyInverseRotation(context2, rotate, crop.width, crop.height);
+    }
+    context2.drawImage(
+      source,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      crop.width,
+      crop.height
+    );
+    context2.restore();
+  },
+  tintWithPerPixel: (texture, color2, canvas) => {
+    const context2 = canvas.getContext("2d");
+    const crop = texture.frame.clone();
+    const resolution = texture.source._resolution ?? texture.source.resolution ?? 1;
+    const rotate = texture.rotate;
+    crop.x *= resolution;
+    crop.y *= resolution;
+    crop.width *= resolution;
+    crop.height *= resolution;
+    const isVertical = groupD8.isVertical(rotate);
+    const outWidth = isVertical ? crop.height : crop.width;
+    const outHeight = isVertical ? crop.width : crop.height;
+    canvas.width = Math.ceil(outWidth);
+    canvas.height = Math.ceil(outHeight);
+    context2.save();
+    context2.globalCompositeOperation = "copy";
+    const source = canvasUtils.getCanvasSource(texture);
+    if (!source) {
+      context2.restore();
+      return;
+    }
+    if (rotate) {
+      canvasUtils._applyInverseRotation(context2, rotate, crop.width, crop.height);
+    }
+    context2.drawImage(
+      source,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      crop.width,
+      crop.height
+    );
+    context2.restore();
+    const r2 = color2 >> 16 & 255;
+    const g2 = color2 >> 8 & 255;
+    const b2 = color2 & 255;
+    const imageData = context2.getImageData(0, 0, outWidth, outHeight);
+    const data = imageData.data;
+    for (let i2 = 0; i2 < data.length; i2 += 4) {
+      data[i2] = data[i2] * r2 / 255;
+      data[i2 + 1] = data[i2 + 1] * g2 / 255;
+      data[i2 + 2] = data[i2 + 2] * b2 / 255;
+    }
+    context2.putImageData(imageData, 0, 0);
+  },
+  /**
+   * Applies inverse rotation transform to context for texture packer rotation compensation.
+   * Supports all 16 groupD8 symmetries (rotations and reflections).
+   * @param context - Canvas 2D context
+   * @param rotate - The groupD8 rotation value
+   * @param srcWidth - Source crop width (before rotation)
+   * @param srcHeight - Source crop height (before rotation)
+   */
+  _applyInverseRotation: (context2, rotate, srcWidth, srcHeight) => {
+    const inv = groupD8.inv(rotate);
+    const a2 = groupD8.uX(inv);
+    const b2 = groupD8.uY(inv);
+    const c2 = groupD8.vX(inv);
+    const d2 = groupD8.vY(inv);
+    const tx = -Math.min(0, a2 * srcWidth, c2 * srcHeight, a2 * srcWidth + c2 * srcHeight);
+    const ty = -Math.min(0, b2 * srcWidth, d2 * srcHeight, b2 * srcWidth + d2 * srcHeight);
+    context2.transform(a2, b2, c2, d2, tx, ty);
+  }
+};
+canvasUtils.tintMethod = canvasUtils.canUseMultiply ? canvasUtils.tintWithMultiply : canvasUtils.tintWithPerPixel;
+const worldMatrix = new Matrix();
+const patternMatrix = new Matrix();
+const patternRect = [new Point(), new Point(), new Point(), new Point()];
+class CanvasTilingSpritePipe {
+  constructor(renderer) {
+    this._renderer = renderer;
+  }
+  validateRenderable(_renderable) {
+    return false;
+  }
+  addRenderable(tilingSprite, instructionSet) {
+    this._renderer.renderPipes.batch.break(instructionSet);
+    instructionSet.add(tilingSprite);
+  }
+  updateRenderable(_tilingSprite) {
+  }
+  execute(tilingSprite) {
+    var _a, _b;
+    const renderer = this._renderer;
+    const contextSystem = renderer.canvasContext;
+    const context2 = contextSystem.activeContext;
+    context2.save();
+    contextSystem.setBlendMode(tilingSprite.groupBlendMode);
+    const globalColor = ((_a = renderer.globalUniforms.globalUniformData) == null ? void 0 : _a.worldColor) ?? 4294967295;
+    const groupColorAlpha = tilingSprite.groupColorAlpha;
+    const globalAlpha = (globalColor >>> 24 & 255) / 255;
+    const groupAlphaValue = (groupColorAlpha >>> 24 & 255) / 255;
+    const filterAlpha = ((_b = renderer.filter) == null ? void 0 : _b.alphaMultiplier) ?? 1;
+    const alpha = globalAlpha * groupAlphaValue * filterAlpha;
+    if (alpha <= 0) {
+      context2.restore();
+      return;
+    }
+    context2.globalAlpha = alpha;
+    const globalTint = globalColor & 16777215;
+    const groupTintBGR = groupColorAlpha & 16777215;
+    const tint = bgr2rgb(multiplyHexColors(groupTintBGR, globalTint));
+    const texture = tilingSprite.texture;
+    const pattern = canvasUtils.getTintedPattern(texture, tint);
+    const width = tilingSprite.width;
+    const height = tilingSprite.height;
+    const transform2 = tilingSprite.groupTransform;
+    const resolution = texture.source._resolution ?? texture.source.resolution ?? 1;
+    patternMatrix.copyFrom(tilingSprite._tileTransform.matrix);
+    if (!tilingSprite.applyAnchorToTexture) {
+      patternMatrix.translate(-tilingSprite.anchor.x * width, -tilingSprite.anchor.y * height);
+    }
+    patternMatrix.scale(1 / resolution, 1 / resolution);
+    worldMatrix.identity();
+    worldMatrix.prepend(patternMatrix);
+    worldMatrix.prepend(transform2);
+    const roundPixels = renderer._roundPixels | tilingSprite._roundPixels;
+    contextSystem.setContextTransform(worldMatrix, roundPixels === 1);
+    context2.fillStyle = pattern;
+    const lx = tilingSprite.anchor.x * -width;
+    const ly = tilingSprite.anchor.y * -height;
+    patternRect[0].set(lx, ly);
+    patternRect[1].set(lx + width, ly);
+    patternRect[2].set(lx + width, ly + height);
+    patternRect[3].set(lx, ly + height);
+    for (let i2 = 0; i2 < 4; i2++) {
+      patternMatrix.applyInverse(patternRect[i2], patternRect[i2]);
+    }
+    context2.beginPath();
+    context2.moveTo(patternRect[0].x, patternRect[0].y);
+    for (let i2 = 1; i2 < 4; i2++) {
+      context2.lineTo(patternRect[i2].x, patternRect[i2].y);
+    }
+    context2.closePath();
+    context2.fill();
+    context2.restore();
+  }
+  destroy() {
+    this._renderer = null;
+  }
+}
+CanvasTilingSpritePipe.extension = {
+  type: [
+    ExtensionType.CanvasPipes
+  ],
+  name: "tilingSprite"
+};
+const localUniformBit = {
+  name: "local-uniform-bit",
+  vertex: {
+    header: (
+      /* wgsl */
+      `
+
+            struct LocalUniforms {
+                uTransformMatrix:mat3x3<f32>,
+                uColor:vec4<f32>,
+                uRound:f32,
+            }
+
+            @group(1) @binding(0) var<uniform> localUniforms : LocalUniforms;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+            vColor *= localUniforms.uColor;
+            modelMatrix *= localUniforms.uTransformMatrix;
+        `
+    ),
+    end: (
+      /* wgsl */
+      `
+            if(localUniforms.uRound == 1)
+            {
+                vPosition = vec4(roundPixels(vPosition.xy, globalUniforms.uResolution), vPosition.zw);
+            }
+        `
+    )
+  }
+};
+const localUniformBitGroup2 = {
+  ...localUniformBit,
+  vertex: {
+    ...localUniformBit.vertex,
+    // replace the group!
+    header: localUniformBit.vertex.header.replace("group(1)", "group(2)")
+  }
+};
+const localUniformBitGl = {
+  name: "local-uniform-bit",
+  vertex: {
+    header: (
+      /* glsl */
+      `
+
+            uniform mat3 uTransformMatrix;
+            uniform vec4 uColor;
+            uniform float uRound;
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+            vColor *= uColor;
+            modelMatrix = uTransformMatrix;
+        `
+    ),
+    end: (
+      /* glsl */
+      `
+            if(uRound == 1.)
+            {
+                gl_Position.xy = roundPixels(gl_Position.xy, uResolution);
+            }
+        `
+    )
+  }
+};
+const tilingBit = {
+  name: "tiling-bit",
+  vertex: {
+    header: (
+      /* wgsl */
+      `
+            struct TilingUniforms {
+                uMapCoord:mat3x3<f32>,
+                uClampFrame:vec4<f32>,
+                uClampOffset:vec2<f32>,
+                uTextureTransform:mat3x3<f32>,
+                uSizeAnchor:vec4<f32>
+            };
+
+            @group(2) @binding(0) var<uniform> tilingUniforms: TilingUniforms;
+            @group(2) @binding(1) var uTexture: texture_2d<f32>;
+            @group(2) @binding(2) var uSampler: sampler;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+            uv = (tilingUniforms.uTextureTransform * vec3(uv, 1.0)).xy;
+
+            position = (position - tilingUniforms.uSizeAnchor.zw) * tilingUniforms.uSizeAnchor.xy;
+        `
+    )
+  },
+  fragment: {
+    header: (
+      /* wgsl */
+      `
+            struct TilingUniforms {
+                uMapCoord:mat3x3<f32>,
+                uClampFrame:vec4<f32>,
+                uClampOffset:vec2<f32>,
+                uTextureTransform:mat3x3<f32>,
+                uSizeAnchor:vec4<f32>
+            };
+
+            @group(2) @binding(0) var<uniform> tilingUniforms: TilingUniforms;
+            @group(2) @binding(1) var uTexture: texture_2d<f32>;
+            @group(2) @binding(2) var uSampler: sampler;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+
+            var coord = vUV + ceil(tilingUniforms.uClampOffset - vUV);
+            coord = (tilingUniforms.uMapCoord * vec3(coord, 1.0)).xy;
+            var unclamped = coord;
+            coord = clamp(coord, tilingUniforms.uClampFrame.xy, tilingUniforms.uClampFrame.zw);
+
+            var bias = 0.;
+
+            if(unclamped.x == coord.x && unclamped.y == coord.y)
+            {
+                bias = -32.;
+            }
+
+            outColor = textureSampleBias(uTexture, uSampler, coord, bias);
+        `
+    )
+  }
+};
+const tilingBitGl = {
+  name: "tiling-bit",
+  vertex: {
+    header: (
+      /* glsl */
+      `
+            uniform mat3 uTextureTransform;
+            uniform vec4 uSizeAnchor;
+
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+            uv = (uTextureTransform * vec3(aUV, 1.0)).xy;
+
+            position = (position - uSizeAnchor.zw) * uSizeAnchor.xy;
+        `
+    )
+  },
+  fragment: {
+    header: (
+      /* glsl */
+      `
+            uniform sampler2D uTexture;
+            uniform mat3 uMapCoord;
+            uniform vec4 uClampFrame;
+            uniform vec2 uClampOffset;
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+
+        vec2 coord = vUV + ceil(uClampOffset - vUV);
+        coord = (uMapCoord * vec3(coord, 1.0)).xy;
+        vec2 unclamped = coord;
+        coord = clamp(coord, uClampFrame.xy, uClampFrame.zw);
+
+        outColor = texture(uTexture, coord, unclamped == coord ? 0.0 : -32.0);// lod-bias very negative to force lod 0
+
+        `
+    )
+  }
+};
+let gpuProgram;
+let glProgram;
+class TilingSpriteShader extends Shader {
+  constructor() {
+    gpuProgram ?? (gpuProgram = compileHighShaderGpuProgram({
+      name: "tiling-sprite-shader",
+      bits: [
+        localUniformBit,
+        tilingBit,
+        roundPixelsBit
+      ]
+    }));
+    glProgram ?? (glProgram = compileHighShaderGlProgram({
+      name: "tiling-sprite-shader",
+      bits: [
+        localUniformBitGl,
+        tilingBitGl,
+        roundPixelsBitGl
+      ]
+    }));
+    const tilingUniforms = new UniformGroup({
+      uMapCoord: { value: new Matrix(), type: "mat3x3<f32>" },
+      uClampFrame: { value: new Float32Array([0, 0, 1, 1]), type: "vec4<f32>" },
+      uClampOffset: { value: new Float32Array([0, 0]), type: "vec2<f32>" },
+      uTextureTransform: { value: new Matrix(), type: "mat3x3<f32>" },
+      uSizeAnchor: { value: new Float32Array([100, 100, 0.5, 0.5]), type: "vec4<f32>" }
+    });
+    super({
+      glProgram,
+      gpuProgram,
+      resources: {
+        localUniforms: new UniformGroup({
+          uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
+          uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
+          uRound: { value: 0, type: "f32" }
+        }),
+        tilingUniforms,
+        uTexture: Texture.EMPTY.source,
+        uSampler: Texture.EMPTY.source.style
+      }
+    });
+  }
+  updateUniforms(width, height, matrix, anchorX, anchorY, texture) {
+    const tilingUniforms = this.resources.tilingUniforms;
+    const textureWidth = texture.width;
+    const textureHeight = texture.height;
+    const textureMatrix = texture.textureMatrix;
+    const uTextureTransform = tilingUniforms.uniforms.uTextureTransform;
+    uTextureTransform.set(
+      matrix.a * textureWidth / width,
+      matrix.b * textureWidth / height,
+      matrix.c * textureHeight / width,
+      matrix.d * textureHeight / height,
+      matrix.tx / width,
+      matrix.ty / height
+    );
+    uTextureTransform.invert();
+    tilingUniforms.uniforms.uMapCoord = textureMatrix.mapCoord;
+    tilingUniforms.uniforms.uClampFrame = textureMatrix.uClampFrame;
+    tilingUniforms.uniforms.uClampOffset = textureMatrix.uClampOffset;
+    tilingUniforms.uniforms.uTextureTransform = uTextureTransform;
+    tilingUniforms.uniforms.uSizeAnchor[0] = width;
+    tilingUniforms.uniforms.uSizeAnchor[1] = height;
+    tilingUniforms.uniforms.uSizeAnchor[2] = anchorX;
+    tilingUniforms.uniforms.uSizeAnchor[3] = anchorY;
+    if (texture) {
+      this.resources.uTexture = texture.source;
+      this.resources.uSampler = texture.source.style;
+    }
+  }
+}
+class QuadGeometry extends MeshGeometry {
+  constructor() {
+    super({
+      positions: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
+      uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
+      indices: new Uint32Array([0, 1, 2, 0, 2, 3])
+    });
+  }
+}
+function setPositions(tilingSprite, positions) {
+  const anchorX = tilingSprite.anchor.x;
+  const anchorY = tilingSprite.anchor.y;
+  positions[0] = -anchorX * tilingSprite.width;
+  positions[1] = -anchorY * tilingSprite.height;
+  positions[2] = (1 - anchorX) * tilingSprite.width;
+  positions[3] = -anchorY * tilingSprite.height;
+  positions[4] = (1 - anchorX) * tilingSprite.width;
+  positions[5] = (1 - anchorY) * tilingSprite.height;
+  positions[6] = -anchorX * tilingSprite.width;
+  positions[7] = (1 - anchorY) * tilingSprite.height;
+}
+function applyMatrix(array2, stride, offset, matrix) {
+  let index2 = 0;
+  const size = array2.length / stride;
+  const a2 = matrix.a;
+  const b2 = matrix.b;
+  const c2 = matrix.c;
+  const d2 = matrix.d;
+  const tx = matrix.tx;
+  const ty = matrix.ty;
+  offset *= stride;
+  while (index2 < size) {
+    const x2 = array2[offset];
+    const y2 = array2[offset + 1];
+    array2[offset] = a2 * x2 + c2 * y2 + tx;
+    array2[offset + 1] = b2 * x2 + d2 * y2 + ty;
+    offset += stride;
+    index2++;
+  }
+}
+function setUvs(tilingSprite, uvs) {
+  const texture = tilingSprite.texture;
+  const width = texture.frame.width;
+  const height = texture.frame.height;
+  let anchorX = 0;
+  let anchorY = 0;
+  if (tilingSprite.applyAnchorToTexture) {
+    anchorX = tilingSprite.anchor.x;
+    anchorY = tilingSprite.anchor.y;
+  }
+  uvs[0] = uvs[6] = -anchorX;
+  uvs[2] = uvs[4] = 1 - anchorX;
+  uvs[1] = uvs[3] = -anchorY;
+  uvs[5] = uvs[7] = 1 - anchorY;
+  const textureMatrix = Matrix.shared;
+  textureMatrix.copyFrom(tilingSprite._tileTransform.matrix);
+  textureMatrix.tx /= tilingSprite.width;
+  textureMatrix.ty /= tilingSprite.height;
+  textureMatrix.invert();
+  textureMatrix.scale(tilingSprite.width / width, tilingSprite.height / height);
+  applyMatrix(uvs, 2, 0, textureMatrix);
+}
+const sharedQuad = new QuadGeometry();
+class TilingSpriteGpuData {
+  constructor() {
+    this.canBatch = true;
+    this.geometry = new MeshGeometry({
+      indices: sharedQuad.indices.slice(),
+      positions: sharedQuad.positions.slice(),
+      uvs: sharedQuad.uvs.slice()
+    });
+  }
+  destroy() {
+    var _a;
+    this.geometry.destroy();
+    (_a = this.shader) == null ? void 0 : _a.destroy();
+  }
+}
+class TilingSpritePipe {
+  constructor(renderer) {
+    this._state = State.default2d;
+    this._renderer = renderer;
+    this._managedTilingSprites = new GCManagedHash({ renderer, type: "renderable", name: "tilingSprite" });
+  }
+  validateRenderable(renderable) {
+    const tilingSpriteData = this._getTilingSpriteData(renderable);
+    const couldBatch = tilingSpriteData.canBatch;
+    this._updateCanBatch(renderable);
+    const canBatch = tilingSpriteData.canBatch;
+    if (canBatch && canBatch === couldBatch) {
+      const { batchableMesh } = tilingSpriteData;
+      return !batchableMesh._batcher.checkAndUpdateTexture(
+        batchableMesh,
+        renderable.texture
+      );
+    }
+    return couldBatch !== canBatch;
+  }
+  addRenderable(tilingSprite, instructionSet) {
+    const batcher = this._renderer.renderPipes.batch;
+    this._updateCanBatch(tilingSprite);
+    const tilingSpriteData = this._getTilingSpriteData(tilingSprite);
+    const { geometry, canBatch } = tilingSpriteData;
+    if (canBatch) {
+      tilingSpriteData.batchableMesh || (tilingSpriteData.batchableMesh = new BatchableMesh());
+      const batchableMesh = tilingSpriteData.batchableMesh;
+      if (tilingSprite.didViewUpdate) {
+        this._updateBatchableMesh(tilingSprite);
+        batchableMesh.geometry = geometry;
+        batchableMesh.renderable = tilingSprite;
+        batchableMesh.transform = tilingSprite.groupTransform;
+        batchableMesh.setTexture(tilingSprite._texture);
+      }
+      batchableMesh.roundPixels = this._renderer._roundPixels | tilingSprite._roundPixels;
+      batcher.addToBatch(batchableMesh, instructionSet);
+    } else {
+      batcher.break(instructionSet);
+      tilingSpriteData.shader || (tilingSpriteData.shader = new TilingSpriteShader());
+      this.updateRenderable(tilingSprite);
+      instructionSet.add(tilingSprite);
+    }
+  }
+  execute(tilingSprite) {
+    const renderer = this._renderer;
+    const { shader } = this._getTilingSpriteData(tilingSprite);
+    shader.groups[0] = renderer.globalUniforms.bindGroup;
+    const localUniforms = shader.resources.localUniforms.uniforms;
+    localUniforms.uTransformMatrix = tilingSprite.groupTransform;
+    localUniforms.uRound = renderer._roundPixels | tilingSprite._roundPixels;
+    color32BitToUniform(
+      tilingSprite.groupColorAlpha,
+      localUniforms.uColor,
+      0
+    );
+    this._state.blendMode = getAdjustedBlendModeBlend(tilingSprite.groupBlendMode, tilingSprite.texture._source);
+    renderer.encoder.draw({
+      geometry: sharedQuad,
+      shader,
+      state: this._state
+    });
+  }
+  updateRenderable(tilingSprite) {
+    const tilingSpriteData = this._getTilingSpriteData(tilingSprite);
+    const { canBatch } = tilingSpriteData;
+    if (canBatch) {
+      const { batchableMesh } = tilingSpriteData;
+      if (tilingSprite.didViewUpdate) this._updateBatchableMesh(tilingSprite);
+      batchableMesh._batcher.updateElement(batchableMesh);
+    } else if (tilingSprite.didViewUpdate) {
+      const { shader } = tilingSpriteData;
+      shader.updateUniforms(
+        tilingSprite.width,
+        tilingSprite.height,
+        tilingSprite._tileTransform.matrix,
+        tilingSprite.anchor.x,
+        tilingSprite.anchor.y,
+        tilingSprite.texture
+      );
+    }
+  }
+  _getTilingSpriteData(renderable) {
+    return renderable._gpuData[this._renderer.uid] || this._initTilingSpriteData(renderable);
+  }
+  _initTilingSpriteData(tilingSprite) {
+    const gpuData = new TilingSpriteGpuData();
+    gpuData.renderable = tilingSprite;
+    tilingSprite._gpuData[this._renderer.uid] = gpuData;
+    this._managedTilingSprites.add(tilingSprite);
+    return gpuData;
+  }
+  _updateBatchableMesh(tilingSprite) {
+    const renderableData = this._getTilingSpriteData(tilingSprite);
+    const { geometry } = renderableData;
+    const style2 = tilingSprite.texture.source.style;
+    if (style2.addressMode !== "repeat") {
+      style2.addressMode = "repeat";
+      style2.update();
+    }
+    setUvs(tilingSprite, geometry.uvs);
+    setPositions(tilingSprite, geometry.positions);
+  }
+  destroy() {
+    this._managedTilingSprites.destroy();
+    this._renderer = null;
+  }
+  _updateCanBatch(tilingSprite) {
+    const renderableData = this._getTilingSpriteData(tilingSprite);
+    const texture = tilingSprite.texture;
+    let _nonPowOf2wrapping = true;
+    if (this._renderer.type === RendererType.WEBGL) {
+      _nonPowOf2wrapping = this._renderer.context.supports.nonPowOf2wrapping;
+    }
+    renderableData.canBatch = texture.textureMatrix.isSimple && (_nonPowOf2wrapping || texture.source.isPowerOfTwo);
+    return renderableData.canBatch;
+  }
+}
+TilingSpritePipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes
+  ],
+  name: "tilingSprite"
+};
+extensions.add(CanvasTilingSpritePipe);
+extensions.add(TilingSpritePipe);
+const _TilingSprite = class _TilingSprite2 extends ViewContainer {
+  constructor(...args) {
+    let options = args[0] || {};
+    if (options instanceof Texture) {
+      options = { texture: options };
+    }
+    if (args.length > 1) {
+      deprecation(v8_0_0, "use new TilingSprite({ texture, width:100, height:100 }) instead");
+      options.width = args[1];
+      options.height = args[2];
+    }
+    options = { ..._TilingSprite2.defaultOptions, ...options };
+    const {
+      texture,
+      anchor,
+      tilePosition,
+      tileScale,
+      tileRotation,
+      width,
+      height,
+      applyAnchorToTexture,
+      roundPixels,
+      ...rest
+    } = options ?? {};
+    super({
+      label: "TilingSprite",
+      ...rest
+    });
+    this.renderPipeId = "tilingSprite";
+    this.batched = true;
+    this.allowChildren = false;
+    this._anchor = new ObservablePoint(
+      {
+        _onUpdate: () => {
+          this.onViewUpdate();
+        }
+      }
+    );
+    this.applyAnchorToTexture = applyAnchorToTexture;
+    this.texture = texture;
+    this._width = width ?? texture.width;
+    this._height = height ?? texture.height;
+    this._tileTransform = new Transform({
+      observer: {
+        _onUpdate: () => this.onViewUpdate()
+      }
+    });
+    if (anchor) this.anchor = anchor;
+    this.tilePosition = tilePosition;
+    this.tileScale = tileScale;
+    this.tileRotation = tileRotation;
+    this.roundPixels = roundPixels ?? false;
+  }
+  /**
+   * Creates a new tiling sprite based on a source texture or image path.
+   * This is a convenience method that automatically creates and manages textures.
+   * @example
+   * ```ts
+   * // Create a new tiling sprite from an image path
+   * const pattern = TilingSprite.from('pattern.png');
+   * pattern.width = 300; // Set the width of the tiling area
+   * pattern.height = 200; // Set the height of the tiling area
+   *
+   * // Create from options
+   * const texture = Texture.from('pattern.png');
+   * const pattern = TilingSprite.from(texture, {
+   *     width: 300,
+   *     height: 200,
+   *     tileScale: { x: 0.5, y: 0.5 }
+   * });
+   * ```
+   * @param source - The source to create the sprite from. Can be a path to an image or a texture
+   * @param options - Additional options for the tiling sprite
+   * @returns A new tiling sprite based on the source
+   * @see {@link Texture.from} For texture creation details
+   * @see {@link Assets} For asset loading and management
+   */
+  static from(source, options = {}) {
+    if (typeof source === "string") {
+      return new _TilingSprite2({
+        texture: Cache.get(source),
+        ...options
+      });
+    }
+    return new _TilingSprite2({
+      texture: source,
+      ...options
+    });
+  }
+  /**
+   * @see {@link TilingSpriteOptions.applyAnchorToTexture}
+   * @deprecated since 8.0.0
+   * @advanced
+   */
+  get uvRespectAnchor() {
+    deprecation(v8_0_0, "uvRespectAnchor is deprecated, please use applyAnchorToTexture instead");
+    return this.applyAnchorToTexture;
+  }
+  /** @advanced */
+  set uvRespectAnchor(value) {
+    deprecation(v8_0_0, "uvRespectAnchor is deprecated, please use applyAnchorToTexture instead");
+    this.applyAnchorToTexture = value;
+  }
+  /**
+   * Changes frame clamping in corresponding textureMatrix
+   * Change to -0.5 to add a pixel to the edge, recommended for transparent trimmed textures in atlas
+   * @default 0.5
+   * @type {number}
+   * @advanced
+   */
+  get clampMargin() {
+    return this._texture.textureMatrix.clampMargin;
+  }
+  /** @advanced */
+  set clampMargin(value) {
+    this._texture.textureMatrix.clampMargin = value;
+  }
+  /**
+   * The anchor sets the origin point of the sprite. The default value is taken from the {@link Texture}
+   * and passed to the constructor.
+   *
+   * - The default is `(0,0)`, this means the sprite's origin is the top left.
+   * - Setting the anchor to `(0.5,0.5)` means the sprite's origin is centered.
+   * - Setting the anchor to `(1,1)` would mean the sprite's origin point will be the bottom right corner.
+   *
+   * If you pass only single parameter, it will set both x and y to the same value as shown in the example below.
+   * @example
+   * ```ts
+   * // Center the anchor point
+   * sprite.anchor = 0.5; // Sets both x and y to 0.5
+   * sprite.position.set(400, 300); // Sprite will be centered at this position
+   *
+   * // Set specific x/y anchor points
+   * sprite.anchor = {
+   *     x: 1, // Right edge
+   *     y: 0  // Top edge
+   * };
+   *
+   * // Using individual coordinates
+   * sprite.anchor.set(0.5, 1); // Center-bottom
+   *
+   * // For rotation around center
+   * sprite.anchor.set(0.5);
+   * sprite.rotation = Math.PI / 4; // 45 degrees around center
+   *
+   * // For scaling from center
+   * sprite.anchor.set(0.5);
+   * sprite.scale.set(2); // Scales from center point
+   * ```
+   */
+  get anchor() {
+    return this._anchor;
+  }
+  set anchor(value) {
+    typeof value === "number" ? this._anchor.set(value) : this._anchor.copyFrom(value);
+  }
+  /**
+   * The offset of the tiling texture.
+   * Used to scroll or position the repeated pattern.
+   * @example
+   * ```ts
+   * // Offset the tiling pattern by 100 pixels in both x and y directions
+   * tilingSprite.tilePosition = { x: 100, y: 100 };
+   * ```
+   * @default {x: 0, y: 0}
+   */
+  get tilePosition() {
+    return this._tileTransform.position;
+  }
+  set tilePosition(value) {
+    this._tileTransform.position.copyFrom(value);
+  }
+  /**
+   * Scale of the tiling texture.
+   * Affects the size of each repeated instance of the texture.
+   * @example
+   * ```ts
+   * // Scale the texture by 1.5 in both x and y directions
+   * tilingSprite.tileScale = { x: 1.5, y: 1.5 };
+   * ```
+   * @default {x: 1, y: 1}
+   */
+  get tileScale() {
+    return this._tileTransform.scale;
+  }
+  set tileScale(value) {
+    typeof value === "number" ? this._tileTransform.scale.set(value) : this._tileTransform.scale.copyFrom(value);
+  }
+  set tileRotation(value) {
+    this._tileTransform.rotation = value;
+  }
+  /**
+   * Rotation of the tiling texture in radians.
+   * This controls the rotation applied to the texture before tiling.
+   * @example
+   * ```ts
+   * // Rotate the texture by 45 degrees (in radians)
+   * tilingSprite.tileRotation = Math.PI / 4; // 45 degrees
+   * ```
+   * @default 0
+   */
+  get tileRotation() {
+    return this._tileTransform.rotation;
+  }
+  /**
+   * The transform object that controls the tiling texture's position, scale, and rotation.
+   * This transform is independent of the sprite's own transform properties.
+   * @example
+   * ```ts
+   * // Access transform properties directly
+   * sprite.tileTransform.position.set(100, 50);
+   * sprite.tileTransform.scale.set(2);
+   * sprite.tileTransform.rotation = Math.PI / 4;
+   *
+   * // Create smooth scrolling animation
+   * app.ticker.add(() => {
+   *     sprite.tileTransform.position.x += 1;
+   *     sprite.tileTransform.rotation += 0.01;
+   * });
+   *
+   * // Reset transform
+   * sprite.tileTransform.position.set(0);
+   * sprite.tileTransform.scale.set(1);
+   * sprite.tileTransform.rotation = 0;
+   * ```
+   * @returns {Transform} The transform object for the tiling texture
+   * @see {@link Transform} For transform operations
+   * @see {@link TilingSprite#tilePosition} For position control
+   * @see {@link TilingSprite#tileScale} For scale control
+   * @see {@link TilingSprite#tileRotation} For rotation control
+   * @advanced
+   */
+  get tileTransform() {
+    return this._tileTransform;
+  }
+  set texture(value) {
+    value || (value = Texture.EMPTY);
+    const currentTexture = this._texture;
+    if (currentTexture === value) return;
+    if (currentTexture && currentTexture.dynamic) currentTexture.off("update", this.onViewUpdate, this);
+    if (value.dynamic) value.on("update", this.onViewUpdate, this);
+    this._texture = value;
+    this.onViewUpdate();
+  }
+  /**
+   * The texture to use for tiling.
+   * This is the image that will be repeated across the sprite.
+   * @example
+   * ```ts
+   * // Use a texture from the asset cache
+   * tilingSprite.texture = Texture.from('assets/pattern.png');
+   * ```
+   * @default Texture.WHITE
+   */
+  get texture() {
+    return this._texture;
+  }
+  /**
+   * The width of the tiling area. This defines how wide the area is that the texture will be tiled across.
+   * @example
+   * ```ts
+   * // Create a tiling sprite
+   * const sprite = new TilingSprite({
+   *     texture: Texture.from('pattern.png'),
+   *     width: 500,
+   *     height: 300
+   * });
+   *
+   * // Adjust width dynamically
+   * sprite.width = 800; // Expands tiling area
+   *
+   * // Update on resize
+   * window.addEventListener('resize', () => {
+   *     sprite.width = app.screen.width;
+   * });
+   * ```
+   * @see {@link TilingSprite#setSize} For setting both width and height efficiently
+   * @see {@link TilingSprite#height} For setting height
+   */
+  set width(value) {
+    this._width = value;
+    this.onViewUpdate();
+  }
+  get width() {
+    return this._width;
+  }
+  set height(value) {
+    this._height = value;
+    this.onViewUpdate();
+  }
+  /**
+   * The height of the tiling area. This defines how tall the area is that the texture will be tiled across.
+   * @example
+   * ```ts
+   * // Create a tiling sprite
+   * const sprite = new TilingSprite({
+   *     texture: Texture.from('pattern.png'),
+   *     width: 500,
+   *     height: 300
+   * });
+   *
+   * // Adjust width dynamically
+   * sprite.height = 800; // Expands tiling area
+   *
+   * // Update on resize
+   * window.addEventListener('resize', () => {
+   *     sprite.height = app.screen.height;
+   * });
+   * ```
+   * @see {@link TilingSprite#setSize} For setting both width and height efficiently
+   * @see {@link TilingSprite#width} For setting width
+   */
+  get height() {
+    return this._height;
+  }
+  /**
+   * Sets the size of the TilingSprite to the specified width and height.
+   * This is faster than setting width and height separately as it only triggers one update.
+   * @example
+   * ```ts
+   * // Set specific dimensions
+   * sprite.setSize(300, 200); // Width: 300, Height: 200
+   *
+   * // Set uniform size (square)
+   * sprite.setSize(400); // Width: 400, Height: 400
+   *
+   * // Set size using object
+   * sprite.setSize({
+   *     width: 500,
+   *     height: 300
+   * });
+   * ```
+   * @param value - This can be either a number for uniform sizing or a Size object with width/height properties
+   * @param height - The height to set. Defaults to the value of `width` if not provided
+   * @see {@link TilingSprite#width} For setting width only
+   * @see {@link TilingSprite#height} For setting height only
+   */
+  setSize(value, height) {
+    if (typeof value === "object") {
+      height = value.height ?? value.width;
+      value = value.width;
+    }
+    this._width = value;
+    this._height = height ?? value;
+    this.onViewUpdate();
+  }
+  /**
+   * Retrieves the size of the TilingSprite as a {@link Size} object.
+   * This method is more efficient than getting width and height separately as it only allocates one object.
+   * @example
+   * ```ts
+   * // Get basic size
+   * const size = sprite.getSize();
+   * console.log(`Size: ${size.width}x${size.height}`);
+   *
+   * // Reuse existing size object
+   * const reuseSize = { width: 0, height: 0 };
+   * sprite.getSize(reuseSize);
+   * ```
+   * @param out - Optional object to store the size in, to avoid allocating a new object
+   * @returns The size of the TilingSprite
+   * @see {@link TilingSprite#width} For getting just the width
+   * @see {@link TilingSprite#height} For getting just the height
+   * @see {@link TilingSprite#setSize} For setting both width and height efficiently
+   */
+  getSize(out2) {
+    out2 || (out2 = {});
+    out2.width = this._width;
+    out2.height = this._height;
+    return out2;
+  }
+  /** @private */
+  updateBounds() {
+    const bounds = this._bounds;
+    const anchor = this._anchor;
+    const width = this._width;
+    const height = this._height;
+    bounds.minX = -anchor._x * width;
+    bounds.maxX = bounds.minX + width;
+    bounds.minY = -anchor._y * height;
+    bounds.maxY = bounds.minY + height;
+  }
+  /**
+   * Checks if the object contains the given point in local coordinates.
+   * Takes into account the anchor offset when determining boundaries.
+   * @example
+   * ```ts
+   * // Create a tiling sprite
+   * const sprite = new TilingSprite({
+   *     texture: Texture.from('pattern.png'),
+   *     width: 200,
+   *     height: 100,
+   *     anchor: 0.5 // Center anchor
+   * });
+   *
+   * // Basic point check
+   * const contains = sprite.containsPoint({ x: 50, y: 25 });
+   * console.log('Point is inside:', contains);
+   *
+   * // Check with different anchors
+   * sprite.anchor.set(0); // Top-left anchor
+   * console.log('Contains point:', sprite.containsPoint({ x: 150, y: 75 }));
+   * ```
+   * @param point - The point to check in local coordinates
+   * @returns True if the point is within the sprite's bounds
+   * @see {@link TilingSprite#toLocal} For converting global coordinates to local
+   * @see {@link TilingSprite#anchor} For understanding boundary calculations
+   */
+  containsPoint(point) {
+    const width = this._width;
+    const height = this._height;
+    const x1 = -width * this._anchor._x;
+    let y1 = 0;
+    if (point.x >= x1 && point.x <= x1 + width) {
+      y1 = -height * this._anchor._y;
+      if (point.y >= y1 && point.y <= y1 + height) return true;
+    }
+    return false;
+  }
+  /**
+   * Destroys this sprite renderable and optionally its texture.
+   * @param options - Options parameter. A boolean will act as if all options
+   *  have been set to that value
+   * @example
+   * tilingSprite.destroy();
+   * tilingSprite.destroy(true);
+   * tilingSprite.destroy({ texture: true, textureSource: true });
+   */
+  destroy(options = false) {
+    super.destroy(options);
+    this._anchor = null;
+    this._tileTransform = null;
+    this._bounds = null;
+    const destroyTexture = typeof options === "boolean" ? options : options == null ? void 0 : options.texture;
+    if (destroyTexture) {
+      const destroyTextureSource = typeof options === "boolean" ? options : options == null ? void 0 : options.textureSource;
+      this._texture.destroy(destroyTextureSource);
+    }
+    this._texture = null;
+  }
+};
+_TilingSprite.defaultOptions = {
+  /** The texture to use for the sprite. */
+  texture: Texture.EMPTY,
+  /** The anchor point of the sprite */
+  anchor: { x: 0, y: 0 },
+  /** The offset of the image that is being tiled. */
+  tilePosition: { x: 0, y: 0 },
+  /** Scaling of the image that is being tiled. */
+  tileScale: { x: 1, y: 1 },
+  /** The rotation of the image that is being tiled. */
+  tileRotation: 0,
+  /**
+   * Flags whether the tiling pattern should originate from the origin instead of the top-left corner in
+   * local space.
+   *
+   * This will make the texture coordinates assigned to each vertex dependent on the value of the anchor. Without
+   * this, the top-left corner always gets the (0, 0) texture coordinate.
+   * @default false
+   */
+  applyAnchorToTexture: false
+};
+let TilingSprite = _TilingSprite;
 class AbstractText extends ViewContainer {
   constructor(options, styleClass) {
     const { text, resolution, style: style2, anchor, width, height, roundPixels, ...rest } = options;
@@ -84393,7 +86033,7 @@ function layoutNodes(nodes) {
   });
   return positions;
 }
-function generateTerrain(width, height, nodes, paths) {
+function generateTerrain(width, height, nodes, paths, verticalBridgeXPositions = [], horizontalBridgeYPositions = []) {
   const tiles = [];
   for (let y2 = 0; y2 < height; y2++) {
     for (let x2 = 0; x2 < width; x2++) {
@@ -84406,6 +86046,36 @@ function generateTerrain(width, height, nodes, paths) {
       });
     }
   }
+  for (const bridgeX of verticalBridgeXPositions) {
+    const bridgeStartX = bridgeX - 1;
+    const bridgeEndX = bridgeX + 1;
+    for (let y2 = 0; y2 < height; y2++) {
+      for (let x2 = bridgeStartX; x2 <= bridgeEndX; x2++) {
+        if (x2 >= 0 && x2 < width) {
+          const tileIndex = y2 * width + x2;
+          if (tileIndex >= 0 && tileIndex < tiles.length) {
+            tiles[tileIndex].type = "water";
+            tiles[tileIndex].biome = "water";
+          }
+        }
+      }
+    }
+  }
+  for (const bridgeY of horizontalBridgeYPositions) {
+    const bridgeStartY = bridgeY - 1;
+    const bridgeEndY = bridgeY + 1;
+    for (let x2 = 0; x2 < width; x2++) {
+      for (let y2 = bridgeStartY; y2 <= bridgeEndY; y2++) {
+        if (y2 >= 0 && y2 < height) {
+          const tileIndex = y2 * width + x2;
+          if (tileIndex >= 0 && tileIndex < tiles.length) {
+            tiles[tileIndex].type = "water";
+            tiles[tileIndex].biome = "water";
+          }
+        }
+      }
+    }
+  }
   for (const path2 of paths) {
     for (const point of path2.points) {
       const x2 = Math.round(point.gridX);
@@ -84520,10 +86190,15 @@ function nodesToOverworldMap(nodes, options = {}) {
     minY = Math.min(minY, node.gridY);
     maxY = Math.max(maxY, node.gridY + node.size);
   });
-  const mapWidth = Math.ceil(maxX - minX) + mapPadding * 2;
-  const mapHeight = Math.ceil(maxY - minY) + mapPadding * 2;
-  const offsetX = mapPadding - minX;
-  const offsetY = mapPadding - minY;
+  const calculatedWidth = Math.ceil(maxX - minX) + mapPadding * 2;
+  const calculatedHeight = Math.ceil(maxY - minY) + mapPadding * 2;
+  const squareSize = Math.ceil(Math.max(calculatedWidth, calculatedHeight));
+  const mapWidth = squareSize;
+  const mapHeight = squareSize;
+  const extraHorizontalSpace = Math.floor((squareSize - calculatedWidth) / 2);
+  const extraVerticalSpace = Math.floor((squareSize - calculatedHeight) / 2);
+  const offsetX = mapPadding + extraHorizontalSpace - minX;
+  const offsetY = mapPadding + extraVerticalSpace - minY;
   locationNodes.forEach((node) => {
     node.gridX += offsetX;
     node.gridY += offsetY;
@@ -84608,23 +86283,48 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
     };
   }
   const REGION_SPACING = 5;
+  const regionMaps = nodeGroups.map((group) => nodesToOverworldMap(group, options));
+  const maxRegionSize = Math.max(...regionMaps.map((rm) => Math.max(rm.width, rm.height)));
+  const REGION_SIZE = Math.ceil(maxRegionSize);
+  const regionLayout = options.regionLayout || {
+    columns: nodeGroups.length,
+    rows: 1,
+    fillDirection: "row-major"
+  };
   const allNodes = [];
   const allPaths = [];
   const regions = [];
-  let currentX = 0;
-  let maxHeight = 0;
-  nodeGroups.forEach((group, index2) => {
-    const regionMap = nodesToOverworldMap(group, options);
+  const horizontalBridges = [];
+  const verticalBridges = [];
+  const gridPositions = [];
+  const fillDirection = regionLayout.fillDirection || "row-major";
+  for (let i2 = 0; i2 < regionMaps.length; i2++) {
+    if (fillDirection === "row-major") {
+      const row = Math.floor(i2 / regionLayout.columns);
+      const col = i2 % regionLayout.columns;
+      gridPositions.push({ row, col });
+    } else {
+      const col = Math.floor(i2 / regionLayout.rows);
+      const row = i2 % regionLayout.rows;
+      gridPositions.push({ row, col });
+    }
+  }
+  regionMaps.forEach((regionMap, index2) => {
+    const gridPos = gridPositions[index2];
+    const regionX = gridPos.col * (REGION_SIZE + REGION_SPACING);
+    const regionY = gridPos.row * (REGION_SIZE + REGION_SPACING);
+    const xOffset = regionX + Math.floor((REGION_SIZE - regionMap.width) / 2);
+    const yOffset = regionY + Math.floor((REGION_SIZE - regionMap.height) / 2);
     const offsetNodes = regionMap.nodes.map((node) => ({
       ...node,
-      gridX: node.gridX + currentX,
-      gridY: node.gridY
+      gridX: node.gridX + xOffset,
+      gridY: node.gridY + yOffset
     }));
     const offsetPaths = regionMap.paths.map((path2) => ({
       ...path2,
       points: path2.points.map((point) => ({
-        gridX: point.gridX + currentX,
-        gridY: point.gridY
+        gridX: point.gridX + xOffset,
+        gridY: point.gridY + yOffset
       }))
     }));
     allNodes.push(...offsetNodes);
@@ -84633,22 +86333,39 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
       id: `region-${index2}`,
       name: `Region ${index2 + 1}`,
       description: `Contains ${offsetNodes.length} nodes`,
+      gridPosition: gridPos,
       bounds: {
-        x: currentX,
-        y: 0,
-        width: regionMap.width,
-        height: regionMap.height
+        x: regionX,
+        y: regionY,
+        width: REGION_SIZE,
+        height: REGION_SIZE
       },
-      centerX: currentX + regionMap.width / 2,
-      centerY: regionMap.height / 2,
+      centerX: regionX + REGION_SIZE / 2,
+      centerY: regionY + REGION_SIZE / 2,
       nodeIds: offsetNodes.map((n2) => n2.id)
     });
-    maxHeight = Math.max(maxHeight, regionMap.height);
-    currentX += regionMap.width + REGION_SPACING;
+    if (gridPos.col < regionLayout.columns - 1) {
+      const nextRegionExists = gridPositions.some(
+        (p2) => p2.row === gridPos.row && p2.col === gridPos.col + 1
+      );
+      if (nextRegionExists) {
+        const bridgeX = regionX + REGION_SIZE + Math.floor(REGION_SPACING / 2);
+        horizontalBridges.push(bridgeX);
+      }
+    }
+    if (gridPos.row < regionLayout.rows - 1) {
+      const belowRegionExists = gridPositions.some(
+        (p2) => p2.row === gridPos.row + 1 && p2.col === gridPos.col
+      );
+      if (belowRegionExists) {
+        const bridgeY = regionY + REGION_SIZE + Math.floor(REGION_SPACING / 2);
+        verticalBridges.push(bridgeY);
+      }
+    }
   });
-  const totalWidth = currentX - REGION_SPACING;
-  const totalHeight = maxHeight;
-  const tiles = generateTerrain(totalWidth, totalHeight, allNodes, allPaths);
+  const totalWidth = regionLayout.columns * REGION_SIZE + (regionLayout.columns - 1) * REGION_SPACING;
+  const totalHeight = regionLayout.rows * REGION_SIZE + (regionLayout.rows - 1) * REGION_SPACING;
+  const tiles = generateTerrain(totalWidth, totalHeight, allNodes, allPaths, horizontalBridges, verticalBridges);
   return {
     width: totalWidth,
     height: totalHeight,
@@ -84758,7 +86475,8 @@ function packagesToUnifiedOverworldMap(packages, options = {}) {
   );
   const map2 = nodesToUnifiedOverworldMap(genericNodes, {
     includeDevDependencies: options.includeDevDependencies,
-    mapPadding: options.mapPadding
+    mapPadding: options.mapPadding,
+    regionLayout: options.regionLayout
   });
   return {
     ...map2,
@@ -84848,6 +86566,28 @@ function createCanvas(width, height) {
   canvas.height = height;
   return canvas;
 }
+function generateGrassBackgroundTile() {
+  const size = 32;
+  const canvas = createCanvas(size, size);
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#3d5a27";
+  ctx.fillRect(0, 0, size, size);
+  const bladeColor = "#4a6b2f";
+  const darkBladeColor = "#2f4520";
+  for (let i2 = 0; i2 < 20; i2++) {
+    const x2 = Math.floor(Math.random() * size);
+    const y2 = Math.floor(Math.random() * size);
+    ctx.fillStyle = Math.random() > 0.5 ? bladeColor : darkBladeColor;
+    ctx.fillRect(x2, y2, 1, 1);
+  }
+  for (let i2 = 0; i2 < 8; i2++) {
+    const x2 = Math.floor(Math.random() * size);
+    const y2 = Math.floor(Math.random() * (size - 1));
+    ctx.fillStyle = bladeColor;
+    ctx.fillRect(x2, y2, 1, 2);
+  }
+  return canvas;
+}
 function generateGrassTile(theme = "grass") {
   const canvas = createCanvas(ISO_TILE_WIDTH, ISO_TILE_HEIGHT);
   const ctx = canvas.getContext("2d");
@@ -84883,6 +86623,33 @@ function generatePathTile() {
   ctx.fillRect(ISO_TILE_WIDTH / 2 - 12, ISO_TILE_HEIGHT / 2 + 4, 6, 3);
   return canvas;
 }
+function generateBridgeTile() {
+  const canvas = createCanvas(ISO_TILE_WIDTH, ISO_TILE_HEIGHT);
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#92400e";
+  ctx.beginPath();
+  ctx.moveTo(ISO_TILE_WIDTH / 2, 0);
+  ctx.lineTo(ISO_TILE_WIDTH, ISO_TILE_HEIGHT / 2);
+  ctx.lineTo(ISO_TILE_WIDTH / 2, ISO_TILE_HEIGHT);
+  ctx.lineTo(0, ISO_TILE_HEIGHT / 2);
+  ctx.closePath();
+  ctx.fill();
+  ctx.strokeStyle = "#78350f";
+  ctx.lineWidth = 2;
+  const plankY = [ISO_TILE_HEIGHT * 0.25, ISO_TILE_HEIGHT * 0.5, ISO_TILE_HEIGHT * 0.75];
+  for (const y2 of plankY) {
+    const widthAtY = y2 <= ISO_TILE_HEIGHT / 2 ? y2 / (ISO_TILE_HEIGHT / 2) * (ISO_TILE_WIDTH / 2) : (ISO_TILE_HEIGHT - y2) / (ISO_TILE_HEIGHT / 2) * (ISO_TILE_WIDTH / 2);
+    ctx.beginPath();
+    ctx.moveTo(ISO_TILE_WIDTH / 2 - widthAtY, y2);
+    ctx.lineTo(ISO_TILE_WIDTH / 2 + widthAtY, y2);
+    ctx.stroke();
+  }
+  ctx.fillStyle = "#a16207";
+  ctx.fillRect(ISO_TILE_WIDTH / 2 - 3, ISO_TILE_HEIGHT / 2 - 1, 6, 2);
+  ctx.fillRect(ISO_TILE_WIDTH / 2 + 10, ISO_TILE_HEIGHT / 2 + 3, 4, 2);
+  ctx.fillRect(ISO_TILE_WIDTH / 2 - 14, ISO_TILE_HEIGHT / 2 + 3, 4, 2);
+  return canvas;
+}
 function generateLocationSprite(type2, theme, size = 2) {
   const width = ISO_TILE_WIDTH * size;
   const height = ISO_TILE_HEIGHT * size + 64;
@@ -85141,10 +86908,12 @@ function generateDecorativeSprite(type2) {
 }
 function generateSpriteAtlas() {
   const atlas = {};
+  atlas["bg-grass"] = generateGrassBackgroundTile();
   for (const biome of Object.keys(BIOME_COLORS)) {
     atlas[`tile-grass-${biome}`] = generateGrassTile(biome);
   }
   atlas["tile-path"] = generatePathTile();
+  atlas["tile-bridge"] = generateBridgeTile();
   const locationTypes = ["castle", "fortress", "tower", "house", "pipe", "git-repo", "monorepo"];
   const themes = ["grass", "desert", "water", "volcano", "ice"];
   for (const type2 of locationTypes) {
@@ -85163,8 +86932,9 @@ const OverworldMapPanelContent = ({
   packages,
   includeDevDependencies = true,
   includePeerDependencies = false,
-  width = 800,
-  height = 600,
+  regionLayout,
+  width,
+  height,
   isLoading = false
 }) => {
   const canvasRef = useRef(null);
@@ -85172,29 +86942,35 @@ const OverworldMapPanelContent = ({
   const worldContainerRef = useRef(null);
   const scaleRef = useRef(1);
   const [isRendering, setIsRendering] = useState(true);
+  const dimensionsRef = useRef({ width: width || 800, height: height || 600 });
   const [currentRegionIndex, setCurrentRegionIndex] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
   const animationRef = useRef(null);
   const hasInitializedCamera = useRef(false);
+  const skipNextAnimation = useRef(false);
   const mapData = useMemo(() => {
     return packagesToUnifiedOverworldMap(packages, {
       includeDevDependencies,
-      includePeerDependencies
+      includePeerDependencies,
+      regionLayout
     });
-  }, [packages, includeDevDependencies, includePeerDependencies]);
+  }, [packages, includeDevDependencies, includePeerDependencies, regionLayout]);
   const currentRegion = mapData.regions[currentRegionIndex] || mapData.regions[0];
   useEffect(() => {
     if (!canvasRef.current) return;
     let app;
     let cleanup = false;
     const initPixi = async () => {
-      var _a;
+      var _a, _b, _c;
+      const containerWidth = ((_a = canvasRef.current) == null ? void 0 : _a.clientWidth) || width || 800;
+      const containerHeight = ((_b = canvasRef.current) == null ? void 0 : _b.clientHeight) || height || 600;
+      dimensionsRef.current = { width: containerWidth, height: containerHeight };
       app = new Application();
       await app.init({
-        width,
-        height,
-        backgroundColor: 8900331,
-        // Sky blue
+        width: containerWidth,
+        height: containerHeight,
+        backgroundColor: 4020775,
+        // Dark grass green (matches background texture)
         antialias: false
         // Pixel-perfect rendering
       });
@@ -85202,7 +86978,7 @@ const OverworldMapPanelContent = ({
         app.destroy(true);
         return;
       }
-      (_a = canvasRef.current) == null ? void 0 : _a.appendChild(app.canvas);
+      (_c = canvasRef.current) == null ? void 0 : _c.appendChild(app.canvas);
       appRef.current = app;
       const atlas = generateSpriteAtlas();
       const textures = {};
@@ -85212,6 +86988,37 @@ const OverworldMapPanelContent = ({
       const worldContainer = new Container();
       app.stage.addChild(worldContainer);
       worldContainerRef.current = worldContainer;
+      const bgTexture = textures["bg-grass"];
+      if (bgTexture) {
+        const backgroundTiling = new TilingSprite({
+          texture: bgTexture,
+          width: mapData.width * ISO_TILE_WIDTH * 2,
+          // Make background larger than map
+          height: mapData.height * ISO_TILE_HEIGHT * 2
+        });
+        backgroundTiling.x = -(mapData.width * ISO_TILE_WIDTH * 2) / 4;
+        backgroundTiling.y = -(mapData.height * ISO_TILE_HEIGHT * 2) / 4;
+        worldContainer.addChild(backgroundTiling);
+      }
+      const updateCurrentRegion = () => {
+        if (mapData.regions.length <= 1) return;
+        const viewportCenterX = dimensionsRef.current.width / 2;
+        const viewportCenterY = dimensionsRef.current.height / 2;
+        const worldX = viewportCenterX - worldContainer.x;
+        const worldY = viewportCenterY - worldContainer.y;
+        const gridPos = screenToGrid(worldX, worldY);
+        for (let i2 = 0; i2 < mapData.regions.length; i2++) {
+          const region = mapData.regions[i2];
+          const { x: x2, y: y2, width: width2, height: height2 } = region.bounds;
+          if (gridPos.gridX >= x2 && gridPos.gridX < x2 + width2 && gridPos.gridY >= y2 && gridPos.gridY < y2 + height2) {
+            if (currentRegionIndex !== i2) {
+              skipNextAnimation.current = true;
+              setCurrentRegionIndex(i2);
+            }
+            return;
+          }
+        }
+      };
       let isDragging = false;
       let dragStart = { x: 0, y: 0 };
       let worldStart = { x: 0, y: 0 };
@@ -85230,6 +87037,7 @@ const OverworldMapPanelContent = ({
           const dy = event.globalY - dragStart.y;
           worldContainer.x = worldStart.x + dx;
           worldContainer.y = worldStart.y + dy;
+          updateCurrentRegion();
         }
       });
       app.stage.on("pointerup", () => {
@@ -85254,6 +87062,21 @@ const OverworldMapPanelContent = ({
           tileContainer.addChild(sprite);
         }
       }
+      const bridgeContainer = new Container();
+      worldContainer.addChild(bridgeContainer);
+      for (const tile of mapData.tiles) {
+        if (tile.type === "water") {
+          const { screenX, screenY } = gridToScreen(tile.x, tile.y);
+          const bridgeTexture = textures["tile-bridge"];
+          if (bridgeTexture) {
+            const bridgeSprite = new Sprite(bridgeTexture);
+            bridgeSprite.x = screenX;
+            bridgeSprite.y = screenY;
+            bridgeSprite.anchor.set(0.5, 0.5);
+            bridgeContainer.addChild(bridgeSprite);
+          }
+        }
+      }
       const pathContainer = new Container();
       worldContainer.addChild(pathContainer);
       const pathGraphics = [];
@@ -85377,10 +87200,10 @@ const OverworldMapPanelContent = ({
           const sprite = new Sprite(texture);
           const MAX_SPRITE_SIZE = 256;
           if (sprite.width > MAX_SPRITE_SIZE || sprite.height > MAX_SPRITE_SIZE) {
-            const scaleX2 = MAX_SPRITE_SIZE / sprite.width;
-            const scaleY2 = MAX_SPRITE_SIZE / sprite.height;
-            const scale2 = Math.min(scaleX2, scaleY2);
-            sprite.scale.set(scale2, scale2);
+            const scaleX = MAX_SPRITE_SIZE / sprite.width;
+            const scaleY = MAX_SPRITE_SIZE / sprite.height;
+            const scale = Math.min(scaleX, scaleY);
+            sprite.scale.set(scale, scale);
           }
           sprite.x = screenX;
           sprite.y = screenY;
@@ -85503,27 +87326,30 @@ const OverworldMapPanelContent = ({
           });
         }
       }
-      let maxRegionWidth = 0;
-      let maxRegionHeight = 0;
-      for (const region of mapData.regions) {
-        const topLeft = gridToScreen(region.bounds.x, region.bounds.y);
-        const bottomRight = gridToScreen(
-          region.bounds.x + region.bounds.width,
-          region.bounds.y + region.bounds.height
-        );
-        const regionWidth = Math.abs(bottomRight.screenX - topLeft.screenX);
-        const regionHeight = Math.abs(bottomRight.screenY - topLeft.screenY);
-        maxRegionWidth = Math.max(maxRegionWidth, regionWidth);
-        maxRegionHeight = Math.max(maxRegionHeight, regionHeight);
-      }
-      const padding = 40;
-      const availableWidth = width - padding * 2;
-      const availableHeight = height - padding * 2;
-      const scaleX = availableWidth / maxRegionWidth;
-      const scaleY = availableHeight / maxRegionHeight;
-      const scale = Math.min(scaleX, scaleY, 1);
-      worldContainer.scale.set(scale, scale);
-      scaleRef.current = scale;
+      const updateScale = () => {
+        let maxRegionWidth = 0;
+        let maxRegionHeight = 0;
+        for (const region of mapData.regions) {
+          const topLeft = gridToScreen(region.bounds.x, region.bounds.y);
+          const bottomRight = gridToScreen(
+            region.bounds.x + region.bounds.width,
+            region.bounds.y + region.bounds.height
+          );
+          const regionWidth = Math.abs(bottomRight.screenX - topLeft.screenX);
+          const regionHeight = Math.abs(bottomRight.screenY - topLeft.screenY);
+          maxRegionWidth = Math.max(maxRegionWidth, regionWidth);
+          maxRegionHeight = Math.max(maxRegionHeight, regionHeight);
+        }
+        const padding = 40;
+        const availableWidth = dimensionsRef.current.width - padding * 2;
+        const availableHeight = dimensionsRef.current.height - padding * 2;
+        const scaleX = availableWidth / maxRegionWidth;
+        const scaleY = availableHeight / maxRegionHeight;
+        const scale = Math.min(scaleX, scaleY, 1);
+        worldContainer.scale.set(scale, scale);
+        scaleRef.current = scale;
+      };
+      updateScale();
       const easeOutCubic = (t2) => {
         return 1 - Math.pow(1 - t2, 3);
       };
@@ -85542,9 +87368,50 @@ const OverworldMapPanelContent = ({
       });
       setIsRendering(false);
     };
-    initPixi();
+    let resizeObserver = null;
+    const initAndSetupResize = async () => {
+      await initPixi();
+      if (canvasRef.current && appRef.current) {
+        resizeObserver = new ResizeObserver((entries) => {
+          if (!appRef.current || !worldContainerRef.current) return;
+          for (const entry of entries) {
+            const { width: newWidth, height: newHeight } = entry.contentRect;
+            dimensionsRef.current = { width: newWidth, height: newHeight };
+            appRef.current.renderer.resize(newWidth, newHeight);
+            const worldContainer = worldContainerRef.current;
+            let maxRegionWidth = 0;
+            let maxRegionHeight = 0;
+            for (const region of mapData.regions) {
+              const topLeft = gridToScreen(region.bounds.x, region.bounds.y);
+              const bottomRight = gridToScreen(
+                region.bounds.x + region.bounds.width,
+                region.bounds.y + region.bounds.height
+              );
+              const regionWidth = Math.abs(bottomRight.screenX - topLeft.screenX);
+              const regionHeight = Math.abs(bottomRight.screenY - topLeft.screenY);
+              maxRegionWidth = Math.max(maxRegionWidth, regionWidth);
+              maxRegionHeight = Math.max(maxRegionHeight, regionHeight);
+            }
+            const padding = 40;
+            const availableWidth = dimensionsRef.current.width - padding * 2;
+            const availableHeight = dimensionsRef.current.height - padding * 2;
+            const scaleX = availableWidth / maxRegionWidth;
+            const scaleY = availableHeight / maxRegionHeight;
+            const scale = Math.min(scaleX, scaleY, 1);
+            worldContainer.scale.set(scale, scale);
+            scaleRef.current = scale;
+            appRef.current.stage.hitArea = appRef.current.screen;
+          }
+        });
+        resizeObserver.observe(canvasRef.current);
+      }
+    };
+    initAndSetupResize();
     return () => {
       cleanup = true;
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
       if (appRef.current) {
         appRef.current.destroy(true);
         appRef.current = null;
@@ -85552,20 +87419,24 @@ const OverworldMapPanelContent = ({
       worldContainerRef.current = null;
       animationRef.current = null;
     };
-  }, [mapData, width, height]);
+  }, [mapData]);
   useEffect(() => {
     if (!worldContainerRef.current || !currentRegion || isRendering) return;
     const regionCenter = gridToScreen(currentRegion.centerX, currentRegion.centerY);
     const worldContainer = worldContainerRef.current;
     const scale = scaleRef.current;
-    const targetX = width / 2 - regionCenter.screenX * scale;
-    const targetY = height / 2 - regionCenter.screenY * scale;
+    const targetX = dimensionsRef.current.width / 2 - regionCenter.screenX * scale;
+    const targetY = dimensionsRef.current.height / 2 - regionCenter.screenY * scale;
     if (!hasInitializedCamera.current) {
       worldContainer.x = targetX;
       worldContainer.y = targetY;
       hasInitializedCamera.current = true;
       return;
     }
+    if (skipNextAnimation.current) {
+      skipNextAnimation.current = false;
+      return;
+    }
     setIsAnimating(true);
     animationRef.current = {
       startTime: performance.now(),
@@ -85574,14 +87445,14 @@ const OverworldMapPanelContent = ({
       targetX,
       targetY
     };
-  }, [currentRegionIndex, currentRegion, width, height, isRendering]);
+  }, [currentRegionIndex, currentRegion, isRendering]);
   if (packages.length === 0) {
     return /* @__PURE__ */ jsx(
       "div",
       {
         style: {
-          width,
-          height,
+          width: "100%",
+          height: "100%",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -85592,7 +87463,7 @@ const OverworldMapPanelContent = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden" }, children: [
     (isLoading || isRendering) && /* @__PURE__ */ jsx(
       "div",
       {
@@ -85600,8 +87471,8 @@ const OverworldMapPanelContent = ({
           position: "absolute",
           top: 0,
           left: 0,
-          width,
-          height,
+          width: "100%",
+          height: "100%",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -85618,10 +87489,11 @@ const OverworldMapPanelContent = ({
       {
         ref: canvasRef,
         style: {
-          width,
-          height,
+          width: "100%",
+          height: "100%",
           imageRendering: "pixelated",
-          border: "2px solid #1f2937"
+          border: "2px solid #1f2937",
+          boxSizing: "border-box"
         }
       }
     ),
@@ -85697,33 +87569,6 @@ const OverworldMapPanelContent = ({
         ]
       }
     ),
-    mapData.regions.length === 1 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 8,
-          left: 8,
-          padding: "8px 12px",
-          backgroundColor: "rgba(0, 0, 0, 0.7)",
-          color: "#ffffff",
-          fontFamily: "monospace",
-          fontSize: 12,
-          borderRadius: 4,
-          pointerEvents: "none"
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            "Packages: ",
-            mapData.nodes.length
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            "Dependencies: ",
-            mapData.paths.length
-          ] })
-        ]
-      }
-    ),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -85744,44 +87589,11 @@ const OverworldMapPanelContent = ({
     )
   ] });
 };
-const OverworldMapPanelPreview = () => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#87ceeb",
-        fontFamily: "monospace",
-        fontSize: 14,
-        color: "#ffffff"
-      },
-      children: "8-bit Overworld Map"
-    }
-  );
-};
-const OverworldMapPanel = ({ context: context2 }) => {
-  var _a;
-  const packagesSlice = context2.getSlice("packages");
-  const packages = ((_a = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a.packages) ?? [];
-  const isLoading = (packagesSlice == null ? void 0 : packagesSlice.loading) || false;
-  return /* @__PURE__ */ jsx(
-    OverworldMapPanelContent,
-    {
-      packages,
-      isLoading,
-      includeDevDependencies: true,
-      includePeerDependencies: false
-    }
-  );
-};
 const GitProjectsMapPanelContent = ({
   projects,
-  width = 800,
-  height = 600,
+  regionLayout,
+  width,
+  height,
   isLoading = false
 }) => {
   const packages = useMemo(() => {
@@ -85814,8 +87626,8 @@ const GitProjectsMapPanelContent = ({
       "div",
       {
         style: {
-          width,
-          height,
+          width: "100%",
+          height: "100%",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -85830,6 +87642,7 @@ const GitProjectsMapPanelContent = ({
     OverworldMapPanelContent,
     {
       packages,
+      regionLayout,
       width,
       height,
       isLoading,
@@ -85838,167 +87651,14 @@ const GitProjectsMapPanelContent = ({
     }
   );
 };
-const GitProjectsMapPanelPreview = () => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#87ceeb",
-        fontFamily: "monospace",
-        fontSize: 14,
-        color: "#ffffff"
-      },
-      children: "Git Projects Map"
-    }
-  );
-};
-const GitProjectsMapPanel = ({ context: context2 }) => {
-  const projects = useMemo(() => {
-    return [
-      {
-        id: "web-ade",
-        name: "Web ADE",
-        path: "/projects/web-ade",
-        category: "frontend",
-        importance: 90,
-        isRoot: true,
-        dependencies: ["shared-ui", "api-client"]
-      },
-      {
-        id: "shared-ui",
-        name: "Shared UI",
-        path: "/projects/shared-ui",
-        category: "library",
-        importance: 70,
-        dependencies: []
-      },
-      {
-        id: "api-client",
-        name: "API Client",
-        path: "/projects/api-client",
-        category: "library",
-        importance: 80,
-        dependencies: ["shared-types"]
-      },
-      {
-        id: "shared-types",
-        name: "Shared Types",
-        path: "/projects/shared-types",
-        category: "library",
-        importance: 60,
-        dependencies: []
-      },
-      {
-        id: "backend-api",
-        name: "Backend API",
-        path: "/projects/backend-api",
-        category: "backend",
-        importance: 95,
-        isRoot: true,
-        dependencies: ["database", "shared-types"]
-      },
-      {
-        id: "database",
-        name: "Database",
-        path: "/projects/database",
-        category: "backend",
-        importance: 85,
-        dependencies: []
-      },
-      {
-        id: "cli-tool",
-        name: "CLI Tool",
-        path: "/projects/cli-tool",
-        category: "tool",
-        importance: 65,
-        dependencies: ["api-client"]
-      },
-      {
-        id: "docs-site",
-        name: "Documentation",
-        path: "/projects/docs-site",
-        category: "frontend",
-        importance: 50,
-        dependencies: []
-      },
-      {
-        id: "mobile-app",
-        name: "Mobile App",
-        path: "/projects/mobile-app",
-        category: "frontend",
-        importance: 85,
-        dependencies: ["api-client", "shared-ui"]
-      },
-      {
-        id: "auth-service",
-        name: "Auth Service",
-        path: "/projects/auth-service",
-        category: "backend",
-        importance: 90,
-        dependencies: ["database"]
-      },
-      {
-        id: "notification-service",
-        name: "Notifications",
-        path: "/projects/notification-service",
-        category: "backend",
-        importance: 70,
-        dependencies: ["database", "shared-types"]
-      },
-      {
-        id: "analytics",
-        name: "Analytics",
-        path: "/projects/analytics",
-        category: "backend",
-        importance: 75,
-        dependencies: ["database"]
-      },
-      {
-        id: "testing-utils",
-        name: "Testing Utils",
-        path: "/projects/testing-utils",
-        category: "tool",
-        importance: 60,
-        dependencies: []
-      },
-      {
-        id: "design-system",
-        name: "Design System",
-        path: "/projects/design-system",
-        category: "library",
-        importance: 80,
-        dependencies: []
-      },
-      {
-        id: "admin-panel",
-        name: "Admin Panel",
-        path: "/projects/admin-panel",
-        category: "frontend",
-        importance: 75,
-        dependencies: ["api-client", "shared-ui", "design-system"]
-      }
-    ];
-  }, []);
-  return /* @__PURE__ */ jsx(
-    GitProjectsMapPanelContent,
-    {
-      projects,
-      isLoading: false
-    }
-  );
-};
 const CollectionMapPanelContent = ({
   collection,
   memberships,
   repositories,
   dependencies = {},
-  width = 800,
-  height = 600,
+  regionLayout,
+  width,
+  height,
   isLoading = false,
   onProjectMoved
 }) => {
@@ -86008,10 +87668,16 @@ const CollectionMapPanelContent = ({
     );
     return collectionMemberships.map((membership) => {
       var _a, _b, _c;
-      const repo = repositories.find((r2) => r2.name === membership.repositoryId);
-      if (!repo) return null;
+      const repo = repositories.find((r2) => {
+        var _a2;
+        const repoId = ((_a2 = r2.github) == null ? void 0 : _a2.id) || r2.name;
+        return repoId === membership.repositoryId;
+      });
+      if (!repo) {
+        return null;
+      }
       let category;
-      if (((_a = repo.provider) == null ? void 0 : _a.type) === "github") {
+      if (((_a = repo.provider) == null ? void 0 : _a.type) === "github" || repo.github) {
         category = "git-repo";
       } else {
         category = repo.theme || "git-repo";
@@ -86030,7 +87696,7 @@ const CollectionMapPanelContent = ({
       return project;
     }).filter((p2) => p2 !== null);
   }, [collection.id, memberships, repositories, dependencies]);
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width, height }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden" }, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -86058,6 +87724,7 @@ const CollectionMapPanelContent = ({
       GitProjectsMapPanelContent,
       {
         projects,
+        regionLayout,
         width,
         height,
         isLoading
@@ -86102,7 +87769,7 @@ const CollectionMapPanel = ({ context: context2 }) => {
   );
   const dependencies = {};
   const isLoading = collectionsLoading || repositoriesLoading;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
     CollectionMapPanelContent,
     {
       collection: selectedCollection,
@@ -86111,7 +87778,7 @@ const CollectionMapPanel = ({ context: context2 }) => {
       dependencies,
       isLoading
     }
-  );
+  ) });
 };
 const getCoverageColor = (percentage) => {
   if (percentage >= 80) return "#22c55e";
@@ -86987,45 +88654,6 @@ const panels = [
       console.log("Dependency Graph Panel unmounting");
     }
   },
-  {
-    metadata: {
-      id: "industry-theme.overworld-map",
-      name: "Overworld Map",
-      icon: "Map",
-      version: "0.1.0",
-      author: "Industry Theme",
-      description: "8-bit Mario-style overworld map for package dependencies",
-      slices: ["packages"]
-    },
-    component: OverworldMapPanel,
-    onMount: async (context2) => {
-      console.log("Overworld Map Panel mounted");
-      if (context2.hasSlice("packages") && !context2.isSliceLoading("packages")) {
-        await context2.refresh("repository", "packages");
-      }
-    },
-    onUnmount: async (_context) => {
-      console.log("Overworld Map Panel unmounting");
-    }
-  },
-  {
-    metadata: {
-      id: "industry-theme.git-projects-map",
-      name: "Git Projects Map",
-      icon: "Map",
-      version: "0.1.0",
-      author: "Industry Theme",
-      description: "Visualize multiple git projects as regions on an 8-bit overworld map",
-      slices: []
-    },
-    component: GitProjectsMapPanel,
-    onMount: async (context2) => {
-      console.log("Git Projects Map Panel mounted");
-    },
-    onUnmount: async (_context) => {
-      console.log("Git Projects Map Panel unmounting");
-    }
-  },
   {
     metadata: {
       id: "industry-theme.collection-map",
@@ -87076,7 +88704,7 @@ const onPackageUnload = async () => {
   console.log("Repository Composition Panels package unloading");
 };
 export {
-  BigPool as $,
+  roundPixelsBit as $,
   AbstractRenderer as A,
   BindGroup as B,
   Color as C,
@@ -87084,90 +88712,91 @@ export {
   ExtensionType as E,
   FillGradient as F,
   GpuProgram as G,
-  Container as H,
-  getTextureBatchBindGroup as I,
-  GCManagedHash as J,
-  fastCopy as K,
-  createIdFromString as L,
+  UPDATE_PRIORITY as H,
+  removeItems as I,
+  Container as J,
+  getTextureBatchBindGroup as K,
+  GCManagedHash as L,
   Matrix as M,
-  CLEAR as N,
-  TextureSource as O,
+  fastCopy as N,
+  createIdFromString as O,
   Point as P,
-  CanvasPool as Q,
+  CLEAR as Q,
   RendererType as R,
   Shader as S,
   TexturePool as T,
   UniformGroup as U,
-  compileHighShaderGpuProgram as V,
-  colorBit as W,
-  generateTextureBatchBit as X,
-  roundPixelsBit as Y,
-  TextureMatrix as Z,
-  DefaultBatcher as _,
+  TextureSource as V,
+  CanvasPool as W,
+  compileHighShaderGpuProgram as X,
+  colorBit as Y,
+  generateTextureBatchBit as Z,
+  localUniformBitGroup2 as _,
   State as a,
-  getGlobalBounds as a0,
-  FilterEffect as a1,
-  Sprite as a2,
-  BatchableSprite as a3,
-  RenderGroup as a4,
-  multiplyColors as a5,
-  UPDATE_VISIBLE as a6,
-  UPDATE_COLOR as a7,
-  UPDATE_BLEND as a8,
-  TextureStyle as a9,
-  SearchPanelPreview as aA,
-  DependencyGraphPanel as aB,
-  DependencyGraphPanelContent as aC,
-  DependencyGraphPanelPreview as aD,
-  dependencyTreeToCanvas as aE,
-  applyForceLayout as aF,
-  applySugiyamaLayout as aG,
-  OverworldMapPanel as aH,
-  OverworldMapPanelContent as aI,
-  OverworldMapPanelPreview as aJ,
-  packagesToOverworldMap as aK,
-  packagesToUnifiedOverworldMap as aL,
-  packagesToOverworldMapCollection as aM,
-  nodesToOverworldMap as aN,
-  nodesToUnifiedOverworldMap as aO,
-  nodesToOverworldMapCollection as aP,
-  gridToScreen as aQ,
-  screenToGrid as aR,
-  MAX_NODES_PER_MAP as aS,
-  TelemetryCoveragePanel as aT,
-  TelemetryCoveragePanelContent as aU,
-  TelemetryCoveragePanelPreview as aV,
-  GitProjectsMapPanel as aW,
-  GitProjectsMapPanelContent as aX,
-  GitProjectsMapPanelPreview as aY,
-  CollectionMapPanel as aZ,
-  CollectionMapPanelContent as a_,
-  Rectangle as aa,
-  getLocalBounds as ab,
-  color32BitToUniform as ac,
-  VERSION as ad,
-  deprecation as ae,
-  GlobalResourceRegistry as af,
-  v8_0_0 as ag,
-  RendererInitHook as ah,
-  SystemRunner as ai,
-  checkMaxIfStatementsInShader as aj,
-  compileHighShaderGlProgram as ak,
-  colorBitGl as al,
-  generateTextureBatchBitGl as am,
-  roundPixelsBitGl as an,
-  getBatchSamplersUniformGroup as ao,
-  panels as ap,
-  onPackageLoad as aq,
-  onPackageUnload as ar,
-  GitChangesPanel as as,
-  GitChangesPanelContent as at,
-  GitChangesPanelPreview as au,
-  PackageCompositionPanel as av,
-  PackageCompositionPanelContent as aw,
-  PackageCompositionPanelPreview as ax,
-  SearchPanel as ay,
-  SearchPanelContent as az,
+  CollectionMapPanelContent as a$,
+  localUniformBit as a0,
+  TextureMatrix as a1,
+  DefaultBatcher as a2,
+  BigPool as a3,
+  getGlobalBounds as a4,
+  FilterEffect as a5,
+  Sprite as a6,
+  BatchableSprite as a7,
+  RenderGroup as a8,
+  multiplyColors as a9,
+  PackageCompositionPanel as aA,
+  PackageCompositionPanelContent as aB,
+  PackageCompositionPanelPreview as aC,
+  SearchPanel as aD,
+  SearchPanelContent as aE,
+  SearchPanelPreview as aF,
+  DependencyGraphPanel as aG,
+  DependencyGraphPanelContent as aH,
+  DependencyGraphPanelPreview as aI,
+  dependencyTreeToCanvas as aJ,
+  applyForceLayout as aK,
+  applySugiyamaLayout as aL,
+  OverworldMapPanelContent as aM,
+  packagesToOverworldMap as aN,
+  packagesToUnifiedOverworldMap as aO,
+  packagesToOverworldMapCollection as aP,
+  nodesToOverworldMap as aQ,
+  nodesToUnifiedOverworldMap as aR,
+  nodesToOverworldMapCollection as aS,
+  gridToScreen as aT,
+  screenToGrid as aU,
+  MAX_NODES_PER_MAP as aV,
+  TelemetryCoveragePanel as aW,
+  TelemetryCoveragePanelContent as aX,
+  TelemetryCoveragePanelPreview as aY,
+  GitProjectsMapPanelContent as aZ,
+  CollectionMapPanel as a_,
+  UPDATE_VISIBLE as aa,
+  UPDATE_COLOR as ab,
+  UPDATE_BLEND as ac,
+  TextureStyle as ad,
+  Rectangle as ae,
+  getLocalBounds as af,
+  color32BitToUniform as ag,
+  VERSION as ah,
+  deprecation as ai,
+  GlobalResourceRegistry as aj,
+  v8_0_0 as ak,
+  RendererInitHook as al,
+  SystemRunner as am,
+  checkMaxIfStatementsInShader as an,
+  compileHighShaderGlProgram as ao,
+  colorBitGl as ap,
+  generateTextureBatchBitGl as aq,
+  localUniformBitGl as ar,
+  roundPixelsBitGl as as,
+  getBatchSamplersUniformGroup as at,
+  panels as au,
+  onPackageLoad as av,
+  onPackageUnload as aw,
+  GitChangesPanel as ax,
+  GitChangesPanelContent as ay,
+  GitChangesPanelPreview as az,
   GlProgram as b,
   Texture as c,
   Geometry as d,
@@ -87179,19 +88808,19 @@ export {
   BufferUsage as j,
   EventEmitter as k,
   uid as l,
-  groupD8 as m,
-  bgr2rgb as n,
-  multiplyHexColors as o,
-  Graphics as p,
-  generateTextureMatrix as q,
-  buildLine as r,
-  shapeBuilders as s,
-  FillPattern as t,
+  canvasUtils as m,
+  groupD8 as n,
+  bgr2rgb as o,
+  multiplyHexColors as p,
+  Graphics as q,
+  canUseNewCanvasBlendModes as r,
+  generateTextureMatrix as s,
+  shapeBuilders as t,
   unsafeEvalSupported as u,
-  CanvasSource as v,
+  buildLine as v,
   warn as w,
-  Ticker as x,
-  UPDATE_PRIORITY as y,
-  removeItems as z
+  FillPattern as x,
+  CanvasSource as y,
+  Ticker as z
 };
-//# sourceMappingURL=index-72-eqzyq.js.map
+//# sourceMappingURL=index-L48T6UlC.js.map