@connected-web/terrain-editor 0.1.0

package/dist/index.js

@@ -0,0 +1,3213 @@
+// src/geometry.ts
+import * as THREE from "three";
+function getImageSize(img) {
+  if ("naturalWidth" in img) {
+    return {
+      width: img.naturalWidth || img.width,
+      height: img.naturalHeight || img.height
+    };
+  }
+  return {
+    width: img.width,
+    height: img.height
+  };
+}
+function createHeightSampler(texture) {
+  if (typeof document === "undefined") return null;
+  const image = texture.image;
+  if (!image) return null;
+  const { width, height } = getImageSize(image);
+  if (!width || !height) return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.drawImage(image, 0, 0, width, height);
+  const pixels = ctx.getImageData(0, 0, width, height).data;
+  const data = new Float32Array(width * height);
+  for (let i = 0; i < data.length; i += 1) {
+    data[i] = pixels[i * 4] / 255;
+  }
+  return { width, height, data };
+}
+function sampleHeightValue(sampler, u, v) {
+  const x = THREE.MathUtils.clamp(u, 0, 1) * (sampler.width - 1);
+  const y = (1 - THREE.MathUtils.clamp(v, 0, 1)) * (sampler.height - 1);
+  const x0 = Math.floor(x);
+  const x1 = Math.min(sampler.width - 1, Math.ceil(x));
+  const y0 = Math.floor(y);
+  const y1 = Math.min(sampler.height - 1, Math.ceil(y));
+  const tx = x - x0;
+  const ty = y - y0;
+  function idx(ix, iy) {
+    return sampler.data[iy * sampler.width + ix];
+  }
+  const a = idx(x0, y0);
+  const b = idx(x1, y0);
+  const c = idx(x0, y1);
+  const d = idx(x1, y1);
+  const ab = a + (b - a) * tx;
+  const cd = c + (d - c) * tx;
+  return ab + (cd - ab) * ty;
+}
+function applyHeightField(geometry, sampler, options) {
+  const { seaLevel, heightScale } = options;
+  const positions = geometry.attributes.position;
+  const uvs = geometry.attributes.uv;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (let i = 0; i < positions.count; i += 1) {
+    const u = uvs.getX(i);
+    const v = uvs.getY(i);
+    const sampled = sampleHeightValue(sampler, u, v);
+    const worldY = (sampled - seaLevel) * heightScale;
+    positions.setY(i, worldY);
+    minY = Math.min(minY, worldY);
+    maxY = Math.max(maxY, worldY);
+  }
+  positions.needsUpdate = true;
+  geometry.computeVertexNormals();
+  return { minY, maxY };
+}
+function collectBoundaryIndices(cols, rows) {
+  const indices = [];
+  for (let col = 0; col < cols; col += 1) indices.push((rows - 1) * cols + col);
+  for (let row = rows - 2; row >= 0; row -= 1) indices.push(row * cols + (cols - 1));
+  for (let col = cols - 2; col >= 0; col -= 1) indices.push(col);
+  for (let row = 1; row < rows - 1; row += 1) indices.push(row * cols);
+  return indices;
+}
+function buildRimMesh(geometry, floorY, material) {
+  const positions = geometry.attributes.position;
+  const cols = geometry.parameters.widthSegments + 1;
+  const rows = geometry.parameters.heightSegments + 1;
+  const ring = collectBoundaryIndices(cols, rows);
+  const rimPositions = [];
+  const rimNormals = [];
+  const rimIndices = [];
+  function getVertex(idx) {
+    return new THREE.Vector3(positions.getX(idx), positions.getY(idx), positions.getZ(idx));
+  }
+  for (let i = 0; i < ring.length; i += 1) {
+    const current = getVertex(ring[i]);
+    const next = getVertex(ring[(i + 1) % ring.length]);
+    const base = rimPositions.length / 3;
+    const verts = [
+      current,
+      next,
+      new THREE.Vector3(next.x, floorY, next.z),
+      new THREE.Vector3(current.x, floorY, current.z)
+    ];
+    verts.forEach((v) => rimPositions.push(v.x, v.y, v.z));
+    const edgeDir = new THREE.Vector3().subVectors(next, current);
+    const downDir = new THREE.Vector3().subVectors(
+      new THREE.Vector3(current.x, floorY, current.z),
+      current
+    );
+    const normal = new THREE.Vector3().crossVectors(edgeDir, downDir).normalize();
+    if (!Number.isFinite(normal.x)) normal.set(0, 1, 0);
+    for (let n = 0; n < 4; n += 1) {
+      rimNormals.push(normal.x, normal.y, normal.z);
+    }
+    rimIndices.push(base, base + 1, base + 2, base, base + 2, base + 3);
+  }
+  const rimGeometry = new THREE.BufferGeometry();
+  rimGeometry.setAttribute("position", new THREE.Float32BufferAttribute(rimPositions, 3));
+  rimGeometry.setAttribute("normal", new THREE.Float32BufferAttribute(rimNormals, 3));
+  rimGeometry.setIndex(rimIndices);
+  const rimMaterial = material || new THREE.MeshStandardMaterial({
+    color: 1315359,
+    roughness: 0.55,
+    metalness: 0.2,
+    side: THREE.DoubleSide
+  });
+  return new THREE.Mesh(rimGeometry, rimMaterial);
+}
+
+// src/terrainViewer.ts
+import * as THREE2 from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+// src/config/default-theme.config.json
+var default_theme_config_default = {
+  locationMarkers: {
+    sprite: {
+      fontFamily: '"DM Sans", sans-serif',
+      fontWeight: "600",
+      maxFontSize: 52,
+      minFontSize: 22,
+      paddingX: 20,
+      paddingY: 10,
+      borderRadius: 18,
+      states: {
+        default: {
+          textColor: "#ffffff",
+          backgroundColor: "rgba(8, 10, 18, 0.78)",
+          borderColor: "rgba(255, 255, 255, 0.35)",
+          borderThickness: 2,
+          opacity: 0.85
+        },
+        hover: {
+          backgroundColor: "rgba(8, 10, 18, 0.9)",
+          borderColor: "rgba(255, 255, 255, 0.6)",
+          opacity: 0.95
+        },
+        focus: {
+          textColor: "#111216",
+          backgroundColor: "rgba(255, 240, 218, 0.95)",
+          borderColor: "#f1d9a6",
+          borderThickness: 3,
+          opacity: 1
+        }
+      }
+    },
+    stem: {
+      shape: "cylinder",
+      radius: 0.015,
+      scale: 0.01,
+      states: {
+        default: {
+          color: "#d9c39c",
+          opacity: 0.75
+        },
+        hover: {
+          color: "#f6dfb5",
+          opacity: 0.95
+        },
+        focus: {
+          color: "#ffe7b5",
+          opacity: 1
+        }
+      }
+    }
+  }
+};
+
+// src/theme.ts
+var defaultTheme = default_theme_config_default;
+function getDefaultTerrainTheme() {
+  return clone(defaultTheme);
+}
+function resolveTerrainTheme(...overrides) {
+  const theme = getDefaultTerrainTheme();
+  overrides.forEach((candidate) => {
+    if (candidate) {
+      deepMerge(theme, candidate);
+    }
+  });
+  return theme;
+}
+function isObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function clone(value) {
+  if (Array.isArray(value)) {
+    return value.map((entry) => clone(entry));
+  }
+  if (isObject(value)) {
+    const result = {};
+    Object.entries(value).forEach(([key, entry]) => {
+      result[key] = clone(entry);
+    });
+    return result;
+  }
+  return value;
+}
+function deepMerge(target, source) {
+  if (!isObject(target) || !isObject(source)) {
+    return source;
+  }
+  Object.keys(source).forEach((key) => {
+    const typedKey = key;
+    const sourceValue = source[typedKey];
+    if (sourceValue === void 0) return;
+    const targetValue = target[key];
+    if (isObject(sourceValue)) {
+      const nextTarget = isObject(targetValue) ? targetValue : {};
+      target[key] = deepMerge(nextTarget, sourceValue);
+    } else if (Array.isArray(sourceValue)) {
+      ;
+      target[key] = sourceValue.map((entry) => clone(entry));
+    } else {
+      ;
+      target[key] = sourceValue;
+    }
+  });
+  return target;
+}
+
+// src/terrainViewer.ts
+var DEFAULT_MAP_WIDTH = 512;
+var DEFAULT_MAP_HEIGHT = 512;
+var DEFAULT_MAP_RATIO = DEFAULT_MAP_HEIGHT / DEFAULT_MAP_WIDTH;
+var DEFAULT_TERRAIN_WIDTH = 4.2;
+var DEFAULT_TERRAIN_DEPTH = DEFAULT_TERRAIN_WIDTH * DEFAULT_MAP_RATIO;
+var DEFAULT_SEGMENTS_X = 256;
+var MIN_TERRAIN_SEGMENTS = 64;
+var MAX_TERRAIN_SEGMENTS = 512;
+var EDGE_RIM = 0.25;
+var BASE_THICKNESS = 0.65;
+var SEA_LEVEL_DEFAULT = 0.28;
+var FLOOR_Y = -BASE_THICKNESS - 0.22;
+var HEIGHT_SCALE_DEFAULT = 0.3;
+var WATER_PERCENT_DEFAULT = 65;
+var WATER_MIN = -0.08;
+var WATER_MAX = 0.14;
+var WATER_INSET = 0.03;
+var DEFAULT_LAYER_ALPHA = {
+  water: 0.92,
+  rivers: 0.95,
+  cities: 1,
+  roads: 0.85
+};
+var DEFAULT_STEM_SCALE = 0.01;
+var MARKER_HEIGHT_RATIO = 0.11;
+var MARKER_HEIGHT_SCALE = 0.25;
+var MARKER_MIN_HEIGHT = 0.35;
+var MARKER_MAX_HEIGHT = 0.85;
+var MARKER_SPRITE_GAP = 0.08;
+var MARKER_LABEL_EXTRA_OFFSET = -0.08;
+var MARKER_SURFACE_OFFSET = 0;
+var BASE_FILL_COLOR = "#7b5c3a";
+var SPRITE_CANVAS_WIDTH = 240;
+var SPRITE_CANVAS_HEIGHT = 160;
+var ICON_TEXTURE_SIZE = 256;
+var ICON_CANVAS_MARGIN = 18;
+var ICON_SCALE_MULTIPLIER = 0.5;
+var ICON_ASSET_PATTERN = /\.(png|jpe?g|gif|webp|svg)$/i;
+function isAssetIconReference(value) {
+  if (!value) return false;
+  return value.includes("/") || ICON_ASSET_PATTERN.test(value);
+}
+function uvToWorld(u, v, sampler, heightScale, seaLevel, dimensions = {
+  width: DEFAULT_TERRAIN_WIDTH,
+  depth: DEFAULT_TERRAIN_DEPTH
+}) {
+  if (!sampler) return null;
+  const heightSample = sampleHeightValue(sampler, u, v);
+  const x = (u - 0.5) * dimensions.width;
+  const z = (v - 0.5) * dimensions.depth;
+  const y = (heightSample - seaLevel) * heightScale;
+  return new THREE2.Vector3(x, y, z);
+}
+function worldToPixel(point, dimensions, mapSize) {
+  const width = dimensions.width || 1;
+  const depth = dimensions.depth || 1;
+  const u = THREE2.MathUtils.clamp(point.x / width + 0.5, 0, 1);
+  const v = THREE2.MathUtils.clamp(point.z / depth + 0.5, 0, 1);
+  return {
+    x: u * mapSize.width,
+    y: v * mapSize.height
+  };
+}
+function easeInOut(t) {
+  return t * t * (3 - 2 * t);
+}
+async function loadLegendImage(file, resolveAssetUrl, cache) {
+  if (cache.has(file)) return cache.get(file);
+  const url = await Promise.resolve(resolveAssetUrl(file));
+  const image = await new Promise((resolve, reject) => {
+    const img = new Image();
+    img.decoding = "async";
+    img.src = url;
+    img.onload = () => resolve(img);
+    img.onerror = (event) => reject(new Error(`Failed to load ${file} (${url})`));
+  });
+  cache.set(file, image);
+  return image;
+}
+async function preprocessMask(file, resolveAssetUrl, imageCache, maskCache) {
+  if (maskCache.has(file)) return maskCache.get(file);
+  const img = await loadLegendImage(file, resolveAssetUrl, imageCache);
+  const canvas = document.createElement("canvas");
+  canvas.width = img.naturalWidth || img.width;
+  canvas.height = img.naturalHeight || img.height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return canvas;
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const alpha = Math.max(r, g, b);
+    data[i] = 255;
+    data[i + 1] = 255;
+    data[i + 2] = 255;
+    data[i + 3] = alpha;
+  }
+  ctx.putImageData(imageData, 0, 0);
+  maskCache.set(file, canvas);
+  return canvas;
+}
+function hexFromRgb(rgb) {
+  return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+}
+async function composeLegendTexture(legendData, resolveAssetUrl, imageCache, maskCache, layerState) {
+  if (typeof document === "undefined") return null;
+  const [width, height] = legendData.size;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctxRaw = canvas.getContext("2d");
+  if (!ctxRaw) return null;
+  const ctx = ctxRaw;
+  ctx.fillStyle = BASE_FILL_COLOR;
+  ctx.fillRect(0, 0, width, height);
+  const temp = document.createElement("canvas");
+  temp.width = width;
+  temp.height = height;
+  const tempCtxRaw = temp.getContext("2d");
+  if (!tempCtxRaw) return null;
+  const tempCtx = tempCtxRaw;
+  async function drawLayer(maskFile, color, alpha = 1) {
+    let maskImage = null;
+    try {
+      maskImage = await preprocessMask(maskFile, resolveAssetUrl, imageCache, maskCache);
+    } catch (err) {
+      console.warn("[WynnalTerrain] Unable to load mask", maskFile, err);
+      return;
+    }
+    tempCtx.globalCompositeOperation = "source-over";
+    tempCtx.globalAlpha = 1;
+    tempCtx.clearRect(0, 0, width, height);
+    tempCtx.fillStyle = hexFromRgb(color);
+    tempCtx.fillRect(0, 0, width, height);
+    tempCtx.globalAlpha = 1;
+    tempCtx.globalCompositeOperation = "destination-in";
+    tempCtx.drawImage(maskImage, 0, 0, width, height);
+    ctx.globalAlpha = alpha;
+    ctx.drawImage(temp, 0, 0, width, height);
+  }
+  const activeBiomes = layerState?.biomes ?? {};
+  for (const [name, biome] of Object.entries(legendData.biomes)) {
+    if (layerState && activeBiomes[name] === false) continue;
+    await drawLayer(biome.mask, biome.rgb);
+  }
+  const activeOverlays = layerState?.overlays ?? {};
+  for (const [name, overlay] of Object.entries(legendData.overlays)) {
+    if (layerState && activeOverlays[name] === false) continue;
+    const alpha = DEFAULT_LAYER_ALPHA[name] ?? 1;
+    await drawLayer(overlay.mask, overlay.rgb, alpha);
+  }
+  const texture = new THREE2.CanvasTexture(canvas);
+  texture.colorSpace = THREE2.SRGBColorSpace;
+  texture.anisotropy = 4;
+  return texture;
+}
+function drawRoundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+  ctx.lineTo(x + radius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+}
+function resolveStemState(stemTheme, state) {
+  const base = stemTheme.states.default;
+  const overrides = state === "default" ? {} : state === "hover" ? stemTheme.states.hover ?? {} : stemTheme.states.focus ?? {};
+  return {
+    ...base,
+    ...overrides
+  };
+}
+function createMarkerStemVisuals(stemTheme) {
+  return {
+    default: resolveStemState(stemTheme, "default"),
+    hover: resolveStemState(stemTheme, "hover"),
+    focus: resolveStemState(stemTheme, "focus")
+  };
+}
+function getStemSegments(shape) {
+  switch (shape) {
+    case "triangle":
+      return 3;
+    case "square":
+      return 4;
+    case "pentagon":
+      return 5;
+    case "hexagon":
+      return 6;
+    case "cylinder":
+    default:
+      return 8;
+  }
+}
+function createStemGeometry(shape, radius, height) {
+  const radialSegments = getStemSegments(shape);
+  return new THREE2.CylinderGeometry(radius, radius, height, radialSegments, 1, false);
+}
+function markerStateStylesEqual(a, b) {
+  return a.textColor === b.textColor && a.backgroundColor === b.backgroundColor && a.borderColor === b.borderColor && a.borderThickness === b.borderThickness && a.opacity === b.opacity;
+}
+function resolveSpriteState(spriteTheme, state) {
+  const base = spriteTheme.states.default;
+  const overrides = state === "default" ? {} : state === "hover" ? spriteTheme.states.hover ?? {} : spriteTheme.states.focus ?? {};
+  return {
+    ...base,
+    ...overrides
+  };
+}
+function createIconSpriteTexture(iconTexture, style, showBorder) {
+  const source = iconTexture.image;
+  if (!source) {
+    const fallback = iconTexture.clone();
+    fallback.needsUpdate = true;
+    return fallback;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = ICON_TEXTURE_SIZE;
+  canvas.height = ICON_TEXTURE_SIZE;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    const fallback = iconTexture.clone();
+    fallback.needsUpdate = true;
+    return fallback;
+  }
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.save();
+  if (showBorder) {
+    const borderRadius = 24;
+    const inset = 12;
+    ctx.fillStyle = style.backgroundColor;
+    drawRoundedRect(
+      ctx,
+      inset,
+      inset,
+      canvas.width - inset * 2,
+      canvas.height - inset * 2,
+      borderRadius
+    );
+    ctx.fill();
+    if (style.borderThickness > 0) {
+      ctx.strokeStyle = style.borderColor;
+      ctx.lineWidth = Math.max(1, style.borderThickness * 1.5);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+  const imageLike = source;
+  const rawWidth = imageLike?.naturalWidth ?? imageLike?.width ?? ICON_TEXTURE_SIZE;
+  const rawHeight = imageLike?.naturalHeight ?? imageLike?.height ?? ICON_TEXTURE_SIZE;
+  const aspect = rawWidth > 0 && rawHeight > 0 ? rawWidth / rawHeight : 1;
+  const margin = ICON_CANVAS_MARGIN + (showBorder ? 16 : 4);
+  const maxWidth = canvas.width - margin * 2;
+  const maxHeight = canvas.height - margin * 2;
+  let drawWidth = maxWidth;
+  let drawHeight = drawWidth / aspect;
+  if (drawHeight > maxHeight) {
+    drawHeight = maxHeight;
+    drawWidth = drawHeight * aspect;
+  }
+  const offsetX = (canvas.width - drawWidth) / 2;
+  const offsetY = (canvas.height - drawHeight) / 2;
+  ctx.drawImage(source, offsetX, offsetY, drawWidth, drawHeight);
+  const texture = new THREE2.CanvasTexture(canvas);
+  texture.colorSpace = THREE2.SRGBColorSpace;
+  return texture;
+}
+function createMarkerSpriteResource(label, spriteTheme, style, options) {
+  if (options?.iconTexture) {
+    const texture2 = createIconSpriteTexture(
+      options.iconTexture,
+      style,
+      options.showBorder ?? true
+    );
+    texture2.needsUpdate = true;
+    const material2 = new THREE2.SpriteMaterial({
+      map: texture2,
+      transparent: true,
+      depthWrite: false,
+      opacity: style.opacity
+    });
+    return { material: material2, texture: texture2 };
+  }
+  const text = (label || "?").trim().slice(0, 14);
+  const canvas = document.createElement("canvas");
+  canvas.width = SPRITE_CANVAS_WIDTH;
+  canvas.height = SPRITE_CANVAS_HEIGHT;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    let fontSize = spriteTheme.maxFontSize;
+    const minFontSize = spriteTheme.minFontSize;
+    ctx.font = `${spriteTheme.fontWeight} ${fontSize}px ${spriteTheme.fontFamily}`;
+    let metrics = ctx.measureText(text);
+    const maxBoxWidth = canvas.width - 12 - spriteTheme.paddingX * 2;
+    while (metrics.width > maxBoxWidth && fontSize > minFontSize) {
+      fontSize -= 2;
+      ctx.font = `${spriteTheme.fontWeight} ${fontSize}px ${spriteTheme.fontFamily}`;
+      metrics = ctx.measureText(text);
+    }
+    const boxWidth = Math.min(canvas.width - 12, metrics.width + spriteTheme.paddingX * 2);
+    const boxHeight = fontSize + spriteTheme.paddingY * 2;
+    const boxX = (canvas.width - boxWidth) / 2;
+    const boxY = (canvas.height - boxHeight) / 2;
+    if (options?.showBorder ?? true) {
+      ctx.fillStyle = style.backgroundColor;
+      drawRoundedRect(ctx, boxX, boxY, boxWidth, boxHeight, spriteTheme.borderRadius);
+      ctx.fill();
+      if (style.borderThickness > 0) {
+        ctx.strokeStyle = style.borderColor;
+        ctx.lineWidth = style.borderThickness;
+        ctx.stroke();
+      }
+    }
+    ctx.fillStyle = style.textColor;
+    ctx.fillText(text, canvas.width / 2, canvas.height / 2 + fontSize * 0.05);
+  }
+  const texture = new THREE2.CanvasTexture(canvas);
+  texture.colorSpace = THREE2.SRGBColorSpace;
+  const material = new THREE2.SpriteMaterial({
+    map: texture,
+    transparent: true,
+    depthWrite: false,
+    opacity: style.opacity
+  });
+  return { material, texture };
+}
+function createMarkerSpriteVisuals(label, spriteTheme, options) {
+  const defaultStyle = resolveSpriteState(spriteTheme, "default");
+  const hoverStyle = resolveSpriteState(spriteTheme, "hover");
+  const focusStyle = resolveSpriteState(spriteTheme, "focus");
+  const defaultResource = createMarkerSpriteResource(label, spriteTheme, defaultStyle, options);
+  const hoverResource = markerStateStylesEqual(defaultStyle, hoverStyle) ? defaultResource : createMarkerSpriteResource(label, spriteTheme, hoverStyle, options);
+  const focusResource = markerStateStylesEqual(defaultStyle, focusStyle) ? defaultResource : markerStateStylesEqual(hoverStyle, focusStyle) ? hoverResource : createMarkerSpriteResource(label, spriteTheme, focusStyle, options);
+  return {
+    default: defaultResource,
+    hover: hoverResource,
+    focus: focusResource
+  };
+}
+function createGradientTexture(renderer) {
+  if (typeof window === "undefined") return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = 2;
+  canvas.height = 2;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+  gradient.addColorStop(0, "#08152b");
+  gradient.addColorStop(1, "#010207");
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  const texture = new THREE2.CanvasTexture(canvas);
+  texture.colorSpace = THREE2.SRGBColorSpace;
+  texture.mapping = THREE2.EquirectangularReflectionMapping;
+  const pmrem = new THREE2.PMREMGenerator(renderer);
+  const envRenderTarget = pmrem.fromEquirectangular(texture);
+  pmrem.dispose();
+  return { background: texture, environment: envRenderTarget };
+}
+function createBaseSlice(width, depth) {
+  const geometry = new THREE2.BoxGeometry(width, BASE_THICKNESS, depth);
+  const material = new THREE2.MeshStandardMaterial({
+    color: 986904,
+    roughness: 0.85,
+    metalness: 0.12
+  });
+  const mesh = new THREE2.Mesh(geometry, material);
+  mesh.position.y = FLOOR_Y + BASE_THICKNESS / 2;
+  mesh.receiveShadow = true;
+  return {
+    mesh,
+    dispose: () => {
+      geometry.dispose();
+      material.dispose();
+    }
+  };
+}
+function createOceanMesh(heightMap, sampler, heightScale, waterHeight, seaLevel, oceanWidth, oceanDepth) {
+  const surfaceWidth = Math.max(0, oceanWidth - WATER_INSET);
+  const surfaceDepth = Math.max(0, oceanDepth - WATER_INSET);
+  const surfaceGeometry = new THREE2.PlaneGeometry(surfaceWidth, surfaceDepth, 1, 1);
+  surfaceGeometry.rotateX(-Math.PI / 2);
+  surfaceGeometry.translate(0, waterHeight, 0);
+  const uniforms = {
+    uHeightMap: { value: heightMap },
+    uSeaLevel: { value: seaLevel },
+    uHeightScale: { value: heightScale },
+    uWaterHeight: { value: waterHeight },
+    uLowColor: { value: new THREE2.Color("#1b3d4f") },
+    uHighColor: { value: new THREE2.Color("#4f99ac") },
+    uFoamColor: { value: new THREE2.Color("#dfeff4") },
+    uOpacity: { value: 0.9 }
+  };
+  const vertexShader = (
+    /* glsl */
+    `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `
+  );
+  const fragmentShader = (
+    /* glsl */
+    `
+    precision mediump float;
+    uniform sampler2D uHeightMap;
+    uniform float uSeaLevel;
+    uniform float uHeightScale;
+    uniform float uWaterHeight;
+    uniform vec3 uLowColor;
+    uniform vec3 uHighColor;
+    uniform vec3 uFoamColor;
+    uniform float uOpacity;
+    varying vec2 vUv;
+
+    void main() {
+      float heightSample = texture2D(uHeightMap, vUv).r;
+      float worldY = (heightSample - uSeaLevel) * uHeightScale;
+      float mask = clamp(smoothstep(0.08, -0.03, worldY - uWaterHeight), 0.0, 1.0);
+      if (mask <= 0.001) discard;
+      float foam = smoothstep(0.05, 0.0, abs(worldY - uWaterHeight));
+      vec3 color = mix(uLowColor, uHighColor, mask);
+      color = mix(color, uFoamColor, foam * 0.25);
+      gl_FragColor = vec4(color, mask * uOpacity);
+    }
+  `
+  );
+  const surfaceMaterial = new THREE2.ShaderMaterial({
+    uniforms,
+    vertexShader,
+    fragmentShader,
+    transparent: true,
+    depthWrite: false,
+    side: THREE2.DoubleSide
+  });
+  const waterRenderOrder = -10;
+  const surfaceMesh = new THREE2.Mesh(surfaceGeometry, surfaceMaterial);
+  surfaceMesh.receiveShadow = true;
+  surfaceMesh.renderOrder = waterRenderOrder;
+  const waterBottom = FLOOR_Y + BASE_THICKNESS;
+  const waterDepth = Math.max(0.01, waterHeight - waterBottom);
+  const volumeCenterY = waterBottom + waterDepth / 2;
+  const sideMaterial = new THREE2.MeshStandardMaterial({
+    color: "#1d415a",
+    transparent: true,
+    opacity: 0.4,
+    roughness: 0.55,
+    metalness: 0.1,
+    depthWrite: false,
+    side: THREE2.DoubleSide,
+    polygonOffset: true,
+    polygonOffsetFactor: -1,
+    polygonOffsetUnits: -1
+  });
+  const frontBackGeometry = new THREE2.PlaneGeometry(surfaceWidth, waterDepth);
+  const leftRightGeometry = new THREE2.PlaneGeometry(surfaceDepth, waterDepth);
+  const sideMeshes = [];
+  function addSide(mesh, position, rotation) {
+    mesh.position.copy(position);
+    if (rotation) {
+      mesh.rotation.copy(rotation);
+    }
+    mesh.renderOrder = waterRenderOrder;
+    sideMeshes.push(mesh);
+  }
+  addSide(
+    new THREE2.Mesh(frontBackGeometry, sideMaterial),
+    new THREE2.Vector3(0, volumeCenterY, surfaceDepth / 2)
+  );
+  addSide(
+    new THREE2.Mesh(frontBackGeometry, sideMaterial),
+    new THREE2.Vector3(0, volumeCenterY, -surfaceDepth / 2),
+    new THREE2.Euler(0, Math.PI, 0)
+  );
+  addSide(
+    new THREE2.Mesh(leftRightGeometry, sideMaterial),
+    new THREE2.Vector3(surfaceWidth / 2, volumeCenterY, 0),
+    new THREE2.Euler(0, -Math.PI / 2, 0)
+  );
+  addSide(
+    new THREE2.Mesh(leftRightGeometry, sideMaterial),
+    new THREE2.Vector3(-surfaceWidth / 2, volumeCenterY, 0),
+    new THREE2.Euler(0, Math.PI / 2, 0)
+  );
+  const group = new THREE2.Group();
+  group.add(surfaceMesh);
+  sideMeshes.forEach((mesh) => group.add(mesh));
+  return {
+    mesh: group,
+    dispose: () => {
+      surfaceGeometry.dispose();
+      surfaceMaterial.dispose();
+      frontBackGeometry.dispose();
+      leftRightGeometry.dispose();
+      sideMaterial.dispose();
+    }
+  };
+}
+async function initTerrainViewer(container, dataset, options = {}) {
+  if (typeof window === "undefined") {
+    let noop2 = function() {
+    };
+    var noop = noop2;
+    return {
+      destroy: noop2,
+      updateLayers: async () => {
+      },
+      setInteractiveMode: noop2,
+      updateLocations: noop2,
+      setFocusedLocation: noop2,
+      navigateTo: noop2,
+      setHoveredLocation: noop2,
+      setCameraOffset: noop2,
+      getViewState: () => ({ distance: 1, polar: Math.PI / 3, azimuth: 0 }),
+      onCameraMove: () => {
+      },
+      setTheme: () => {
+      },
+      setSeaLevel: () => {
+      },
+      invalidateIconTextures: () => {
+      },
+      invalidateLayerMasks: () => {
+      },
+      enableFrameCaptureMode: () => ({ fps: 30 }),
+      disableFrameCaptureMode: noop2,
+      captureFrame: (frameNumber) => ({ frameNumber, time: 0 })
+    };
+  }
+  const width = container.clientWidth || 720;
+  const height = container.clientHeight || 405;
+  const disposables = [];
+  let currentLifecycleState = "initializing";
+  function setLifecycleState(state) {
+    currentLifecycleState = state;
+    options.onLifecycleChange?.(state);
+  }
+  const legend = dataset.legend;
+  let themeOverrides = options.theme;
+  let resolvedTheme = resolveTerrainTheme(dataset.theme, themeOverrides);
+  let markerTheme = resolvedTheme.locationMarkers;
+  let seaLevel = legend.sea_level ?? SEA_LEVEL_DEFAULT;
+  const [rawLegendWidth, rawLegendHeight] = legend.size;
+  const safeLegendWidth = Math.max(1, rawLegendWidth || DEFAULT_MAP_WIDTH);
+  const safeLegendHeight = Math.max(1, rawLegendHeight || DEFAULT_MAP_HEIGHT);
+  const mapWidth = Math.max(1, safeLegendWidth);
+  const mapHeight = Math.max(1, safeLegendHeight);
+  const mapRatio = safeLegendWidth > 0 ? safeLegendHeight / safeLegendWidth : DEFAULT_MAP_RATIO;
+  const terrainWidth = DEFAULT_TERRAIN_WIDTH;
+  const terrainDepth = terrainWidth * mapRatio;
+  const desiredSegments = THREE2.MathUtils.clamp(
+    safeLegendWidth,
+    MIN_TERRAIN_SEGMENTS,
+    MAX_TERRAIN_SEGMENTS
+  );
+  const terrainSegmentsX = Math.max(DEFAULT_SEGMENTS_X, Math.round(desiredSegments));
+  const terrainSegmentsZ = Math.max(1, Math.round(terrainSegmentsX * mapRatio));
+  const terrainDimensions = { width: terrainWidth, depth: terrainDepth };
+  const terrainSpan = Math.min(terrainDimensions.width, terrainDimensions.depth);
+  function computeMarkerStemHeight() {
+    const scaledMin = MARKER_MIN_HEIGHT * MARKER_HEIGHT_SCALE;
+    const scaledMax = MARKER_MAX_HEIGHT * MARKER_HEIGHT_SCALE;
+    const rawHeight = terrainSpan * MARKER_HEIGHT_RATIO * MARKER_HEIGHT_SCALE;
+    return THREE2.MathUtils.clamp(rawHeight, scaledMin, scaledMax);
+  }
+  const markerStemHeight = computeMarkerStemHeight();
+  let terrainHeightRange = { min: FLOOR_Y, max: 0 };
+  const baseWidth = terrainWidth + EDGE_RIM * 2;
+  const baseDepth = terrainDepth + EDGE_RIM * 2;
+  function computeStemRadius(stemTheme) {
+    const rawStemScale = stemTheme.scale;
+    const stemScale = typeof rawStemScale === "number" && Number.isFinite(rawStemScale) ? Math.max(0, rawStemScale) : DEFAULT_STEM_SCALE;
+    const maxStemRadiusCandidate = Math.min(terrainWidth, terrainDepth) * stemScale;
+    return Number.isFinite(maxStemRadiusCandidate) ? Math.min(stemTheme.radius, Math.max(0, maxStemRadiusCandidate)) : stemTheme.radius;
+  }
+  let stemRadius = computeStemRadius(markerTheme.stem);
+  const layerImageCache = /* @__PURE__ */ new Map();
+  const maskCanvasCache = /* @__PURE__ */ new Map();
+  function invalidateLayerMaskCache(paths) {
+    if (!paths || paths.length === 0) {
+      layerImageCache.clear();
+      maskCanvasCache.clear();
+      return;
+    }
+    paths.forEach((path) => {
+      layerImageCache.delete(path);
+      maskCanvasCache.delete(path);
+    });
+  }
+  function pixelToUV(pixel) {
+    const u = THREE2.MathUtils.clamp(pixel.x, 0, mapWidth) / mapWidth;
+    const v = THREE2.MathUtils.clamp(pixel.y, 0, mapHeight) / mapHeight;
+    return { u, v };
+  }
+  function uvToPixel(u, v) {
+    const x = THREE2.MathUtils.clamp(u * safeLegendWidth, 0, safeLegendWidth);
+    const y = THREE2.MathUtils.clamp((1 - v) * safeLegendHeight, 0, safeLegendHeight);
+    return { x, y };
+  }
+  function pixelToWorld(pixel) {
+    if (!heightSampler) return null;
+    const { u, v } = pixelToUV(pixel);
+    return uvToWorld(u, v, heightSampler, currentHeightScale, seaLevel, terrainDimensions);
+  }
+  const heightScale = options.heightScale ?? HEIGHT_SCALE_DEFAULT;
+  let currentHeightScale = heightScale;
+  const waterPercent = THREE2.MathUtils.clamp(
+    options.waterLevelPercent ?? WATER_PERCENT_DEFAULT,
+    0,
+    100
+  );
+  const waterPercentNormalized = waterPercent / 100;
+  function computeWaterHeight() {
+    return THREE2.MathUtils.mapLinear(
+      waterPercentNormalized,
+      0,
+      1,
+      WATER_MIN * currentHeightScale,
+      WATER_MAX * currentHeightScale
+    );
+  }
+  let waterHeight = computeWaterHeight();
+  const scene = new THREE2.Scene();
+  const camera = new THREE2.PerspectiveCamera(43, width / height, 0.1, 100);
+  camera.position.set(-5.2, 3.5, 6);
+  const raycaster = new THREE2.Raycaster();
+  const pointer = new THREE2.Vector2();
+  const downAxis = new THREE2.Vector3(0, -1, 0);
+  const surfaceRaycaster = new THREE2.Raycaster();
+  const surfaceRayOrigin = new THREE2.Vector3();
+  let interactiveEnabled = options.interactive ?? false;
+  let heightSampler = null;
+  let currentLocations = options.locations ?? [];
+  let currentFocusId;
+  let viewportWidth = width;
+  let viewportHeight = height;
+  let viewOffsetPixels = 0;
+  const renderer = new THREE2.WebGLRenderer({ antialias: true, alpha: true });
+  renderer.toneMapping = THREE2.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.08;
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  const hostStyle = window.getComputedStyle(container);
+  if (hostStyle.position === "static") {
+    container.style.position = "relative";
+  }
+  renderer.domElement.style.width = "100%";
+  renderer.domElement.style.height = "100%";
+  renderer.domElement.style.display = "block";
+  renderer.domElement.style.position = "absolute";
+  renderer.domElement.style.top = "0";
+  renderer.domElement.style.right = "0";
+  renderer.domElement.style.bottom = "0";
+  renderer.domElement.style.left = "0";
+  renderer.setSize(width, height, false);
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE2.PCFSoftShadowMap;
+  container.appendChild(renderer.domElement);
+  disposables.push(() => {
+    renderer.dispose();
+    renderer.domElement.remove();
+  });
+  const sky = createGradientTexture(renderer);
+  if (sky) {
+    scene.background = sky.background;
+    scene.environment = sky.environment.texture;
+    disposables.push(() => {
+      scene.background = null;
+      scene.environment = null;
+      sky.environment.dispose();
+      sky.background.dispose();
+    });
+  }
+  const ambientLight = new THREE2.AmbientLight(16249056, 0.55);
+  const warmKey = new THREE2.DirectionalLight(16308395, 1.1);
+  warmKey.position.set(6, 7, 4);
+  warmKey.castShadow = true;
+  warmKey.shadow.mapSize.set(1024, 1024);
+  warmKey.shadow.camera.near = 1;
+  warmKey.shadow.camera.far = 18;
+  warmKey.shadow.camera.left = -6;
+  warmKey.shadow.camera.right = 6;
+  warmKey.shadow.camera.top = 6;
+  warmKey.shadow.camera.bottom = -6;
+  const coolFill = new THREE2.DirectionalLight(8238335, 0.4);
+  coolFill.position.set(-5, 3, -4);
+  scene.add(ambientLight, warmKey, coolFill);
+  const controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true;
+  controls.enablePan = false;
+  controls.maxPolarAngle = Math.PI / 2.2;
+  controls.minDistance = 0.5;
+  controls.maxDistance = 8.5;
+  controls.target.set(0, heightScale * 0.28, 0);
+  let lastTime = performance.now();
+  const markersGroup = new THREE2.Group();
+  scene.add(markersGroup);
+  markersGroup.renderOrder = 10;
+  const markerResources = [];
+  const markerMap = /* @__PURE__ */ new Map();
+  const markerInteractiveTargets = [];
+  let hoveredLocationId = null;
+  const cameraOffset = { target: 0, current: 0 };
+  let cameraTween = null;
+  let terrain = null;
+  function projectWorldToSurface(world) {
+    if (!world) return null;
+    if (!terrain) return world.clone();
+    const originY = (terrainHeightRange.max ?? 0) + 2;
+    surfaceRayOrigin.set(world.x, originY, world.z);
+    surfaceRaycaster.set(surfaceRayOrigin, downAxis);
+    const hit = surfaceRaycaster.intersectObject(terrain, true);
+    return hit[0]?.point.clone() ?? world.clone();
+  }
+  function startCameraTween(endPos, endTarget, duration = 650) {
+    cameraTween = {
+      startPos: camera.position.clone(),
+      endPos,
+      startTarget: controls.target.clone(),
+      endTarget,
+      start: performance.now(),
+      duration
+    };
+  }
+  const locationWorldCache = /* @__PURE__ */ new Map();
+  let markerGeneration = 0;
+  const placementIndicator = new THREE2.Mesh(
+    new THREE2.CylinderGeometry(0.04, 0.01, 0.7, 18),
+    new THREE2.MeshStandardMaterial({
+      color: 16735067,
+      transparent: true,
+      opacity: 0.8
+    })
+  );
+  placementIndicator.visible = false;
+  scene.add(placementIndicator);
+  disposables.push(() => {
+    placementIndicator.geometry.dispose();
+    placementIndicator.material.dispose();
+  });
+  const loader = new THREE2.TextureLoader();
+  const iconTextureCache = /* @__PURE__ */ new Map();
+  const iconTexturePromises = /* @__PURE__ */ new Map();
+  function invalidateIconCache(paths) {
+    if (!paths || paths.length === 0) {
+      iconTextureCache.forEach((texture) => texture.dispose());
+      iconTextureCache.clear();
+      iconTexturePromises.clear();
+      return;
+    }
+    paths.forEach((path) => {
+      const cached = iconTextureCache.get(path);
+      if (cached) {
+        cached.dispose();
+        iconTextureCache.delete(path);
+      }
+      iconTexturePromises.delete(path);
+    });
+  }
+  function clearMarkerResources() {
+    markerResources.splice(0).forEach(({ spriteMaterials, spriteTextures, stemMaterial, stemGeometry }) => {
+      spriteMaterials.forEach((material) => material.dispose());
+      spriteTextures.forEach((texture) => texture.dispose());
+      stemMaterial?.dispose();
+      stemGeometry?.dispose();
+    });
+    markersGroup.clear();
+    locationWorldCache.clear();
+    markerMap.clear();
+    markerInteractiveTargets.length = 0;
+  }
+  function loadIconTexture(iconPath) {
+    if (iconTextureCache.has(iconPath)) {
+      return Promise.resolve(iconTextureCache.get(iconPath));
+    }
+    if (iconTexturePromises.has(iconPath)) {
+      return iconTexturePromises.get(iconPath);
+    }
+    const pending = Promise.resolve(dataset.resolveAssetUrl(iconPath)).then(
+      (assetUrl) => new Promise((resolve) => {
+        loader.load(
+          assetUrl,
+          (texture) => {
+            texture.colorSpace = THREE2.SRGBColorSpace;
+            iconTextureCache.set(iconPath, texture);
+            resolve(texture);
+          },
+          void 0,
+          (error) => {
+            console.warn("[TerrainViewer] Failed to load icon asset", iconPath, error);
+            resolve(null);
+          }
+        );
+      })
+    ).finally(() => {
+      iconTexturePromises.delete(iconPath);
+    });
+    iconTexturePromises.set(iconPath, pending);
+    return pending;
+  }
+  function formatMarkerGlyph(location) {
+    const rawSource = location.icon && !isAssetIconReference(location.icon) ? location.icon : location.name ?? "";
+    const raw = (rawSource || "?").trim();
+    if (!raw) return "?";
+    const first = raw[0];
+    return /[a-zA-Z0-9]/.test(first) ? first.toUpperCase() : raw;
+  }
+  function updateMarkerVisuals() {
+    const distance = camera.position.distanceTo(controls.target);
+    const lerp = THREE2.MathUtils.lerp(controls.minDistance, controls.maxDistance, distance);
+    const baseScale = lerp / 80;
+    const zoomRange = controls.maxDistance - controls.minDistance;
+    const normalizedZoom = zoomRange > 0 ? THREE2.MathUtils.clamp((distance - controls.minDistance) / zoomRange, 0, 1) : 0;
+    const heightScaleFactor = THREE2.MathUtils.lerp(0.55, 1.1, normalizedZoom);
+    markerMap.forEach(({ sprite, stem, spriteVisuals, stemStates, iconScale, stemBaseHeight, spriteGap }, id) => {
+      const isFocused = currentFocusId === id;
+      const isHovered = hoveredLocationId === id;
+      const emphasis = isFocused ? 1.2 : isHovered ? 1.05 : 1;
+      const scaled = baseScale * (iconScale ?? 1) * emphasis;
+      sprite.scale.set(scaled, scaled, scaled);
+      const visualState = isFocused ? "focus" : isHovered ? "hover" : "default";
+      const nextVisual = spriteVisuals[visualState];
+      if (sprite.material !== nextVisual.material) {
+        sprite.material = nextVisual.material;
+      }
+      const stemMat = stem.material;
+      const stemState = stemStates[visualState];
+      stemMat.opacity = stemState.opacity;
+      stemMat.color.set(stemState.color);
+      const stemWidth = THREE2.MathUtils.clamp(baseScale * 6, 0.12, 0.6);
+      const stemScale = heightScaleFactor;
+      stem.scale.set(stemWidth, stemScale, stemWidth);
+      const currentStemHeight = stemBaseHeight * stemScale;
+      stem.position.y = currentStemHeight / 2;
+      const spriteBase = currentStemHeight + spriteGap + MARKER_LABEL_EXTRA_OFFSET;
+      const spriteHeight = scaled;
+      sprite.position.y = spriteBase + spriteHeight / 2;
+    });
+  }
+  function rebuildRimMesh() {
+    if (!rimMesh) return;
+    scene.remove(rimMesh);
+    rimMesh.geometry.dispose();
+    rimMesh = buildRimMesh(terrainGeometry, FLOOR_Y, rimMaterial);
+    rimMesh.receiveShadow = true;
+    scene.add(rimMesh);
+  }
+  function rebuildOceanMesh() {
+    if (!heightSampler) return;
+    if (ocean) {
+      scene.remove(ocean.mesh);
+      ocean.dispose();
+    }
+    waterHeight = computeWaterHeight();
+    ocean = createOceanMesh(
+      heightMap,
+      heightSampler,
+      currentHeightScale,
+      waterHeight,
+      seaLevel,
+      terrainWidth,
+      terrainDepth
+    );
+    scene.add(ocean.mesh);
+  }
+  function setLocationMarkers(locations, focusedId) {
+    currentLocations = locations;
+    currentFocusId = focusedId;
+    markerGeneration += 1;
+    const runId = markerGeneration;
+    clearMarkerResources();
+    if (!heightSampler || !locations.length) return;
+    const iconPromises = locations.map((location) => {
+      const iconPath = isAssetIconReference(location.icon) ? location.icon : null;
+      return iconPath ? loadIconTexture(iconPath) : Promise.resolve(null);
+    });
+    Promise.all(iconPromises).then((iconTextures) => {
+      if (markerGeneration !== runId) return;
+      locations.forEach((location, i) => {
+        const id = location.id ?? `${location.name ?? "loc"}-${i}`;
+        location.id = id;
+        const { u, v } = pixelToUV(location.pixel);
+        const world = uvToWorld(
+          u,
+          v,
+          heightSampler,
+          currentHeightScale,
+          seaLevel,
+          terrainDimensions
+        );
+        if (!world) return;
+        const surfacePoint = projectWorldToSurface(world);
+        if (!surfacePoint) return;
+        locationWorldCache.set(id, surfacePoint.clone());
+        location.world = { x: surfacePoint.x, y: surfacePoint.y, z: surfacePoint.z };
+        const glyph = formatMarkerGlyph(location);
+        const iconTexture = iconTextures[i] ?? void 0;
+        const spriteVisuals = createMarkerSpriteVisuals(glyph, markerTheme.sprite, {
+          iconTexture,
+          showBorder: location.showBorder !== false
+        });
+        const sprite = new THREE2.Sprite(spriteVisuals.default.material);
+        sprite.userData.locationId = location.id;
+        sprite.renderOrder = 10;
+        const stemHeight = markerStemHeight;
+        const spriteGap = MARKER_SPRITE_GAP;
+        const spriteBaseOffset = stemHeight + spriteGap;
+        const stemStates = createMarkerStemVisuals(markerTheme.stem);
+        const stemMaterial = new THREE2.MeshStandardMaterial({
+          color: stemStates.default.color,
+          transparent: true,
+          opacity: stemStates.default.opacity,
+          flatShading: markerTheme.stem.shape !== "cylinder"
+        });
+        const stemGeometry = createStemGeometry(markerTheme.stem.shape, stemRadius, stemHeight);
+        const stem = new THREE2.Mesh(stemGeometry, stemMaterial);
+        stem.renderOrder = 9;
+        stem.position.set(0, stemHeight / 2, 0);
+        sprite.position.set(0, spriteBaseOffset, 0);
+        stem.userData.locationId = location.id;
+        const container2 = new THREE2.Group();
+        container2.position.copy(surfacePoint);
+        container2.position.y += MARKER_SURFACE_OFFSET;
+        container2.userData.locationId = location.id;
+        container2.add(stem);
+        container2.add(sprite);
+        markersGroup.add(container2);
+        const iconScale = iconTexture ? ICON_SCALE_MULTIPLIER : 1;
+        markerMap.set(location.id, {
+          container: container2,
+          sprite,
+          stem,
+          spriteVisuals,
+          stemStates,
+          iconScale,
+          stemBaseHeight: stemHeight,
+          spriteGap
+        });
+        markerInteractiveTargets.push(sprite, stem);
+        const spriteMaterials = /* @__PURE__ */ new Set();
+        const spriteTextures = /* @__PURE__ */ new Set();
+        Object.values(spriteVisuals).forEach(({ material, texture }) => {
+          spriteMaterials.add(material);
+          spriteTextures.add(texture);
+        });
+        markerResources.push({
+          spriteMaterials,
+          spriteTextures,
+          stemMaterial,
+          stemGeometry: stem.geometry
+        });
+      });
+      if (markerGeneration === runId) {
+        updateMarkerVisuals();
+      }
+    }).catch((error) => console.error("[TerrainViewer] Failed to populate location markers", error));
+  }
+  function applyThemeUpdate(overrides) {
+    themeOverrides = overrides;
+    resolvedTheme = resolveTerrainTheme(dataset.theme, themeOverrides);
+    markerTheme = resolvedTheme.locationMarkers;
+    stemRadius = computeStemRadius(markerTheme.stem);
+    setLocationMarkers(currentLocations, currentFocusId);
+  }
+  function applySeaLevelUpdate(nextSeaLevel) {
+    if (!heightSampler) {
+      return;
+    }
+    seaLevel = nextSeaLevel;
+    legend.sea_level = nextSeaLevel;
+    dataset.legend.sea_level = nextSeaLevel;
+    const stats = applyHeightField(terrainGeometry, heightSampler, {
+      seaLevel,
+      heightScale: currentHeightScale
+    });
+    terrainHeightRange = { min: stats.minY, max: stats.maxY };
+    terrainGeometry.attributes.position.needsUpdate = true;
+    terrainGeometry.computeVertexNormals();
+    rebuildRimMesh();
+    rebuildOceanMesh();
+    setLocationMarkers(currentLocations, currentFocusId);
+  }
+  setLifecycleState("loading-textures");
+  const [heightMapSource, topoMapSource] = await Promise.all([
+    Promise.resolve(dataset.getHeightMapUrl()),
+    Promise.resolve(dataset.getTopologyMapUrl())
+  ]);
+  const [heightMap, topoTexture] = await Promise.all([
+    new Promise((resolve, reject) => {
+      loader.load(heightMapSource, resolve, void 0, reject);
+    }),
+    new Promise((resolve, reject) => {
+      loader.load(topoMapSource, resolve, void 0, reject);
+    })
+  ]);
+  heightMap.wrapS = heightMap.wrapT = THREE2.ClampToEdgeWrapping;
+  topoTexture.wrapS = topoTexture.wrapT = THREE2.ClampToEdgeWrapping;
+  topoTexture.anisotropy = Math.min(renderer.capabilities.getMaxAnisotropy(), 8);
+  setLifecycleState("building-geometry");
+  const sampler = createHeightSampler(heightMap);
+  if (!sampler) throw new Error("Unable to read heightmap data");
+  heightSampler = sampler;
+  const terrainGeometry = new THREE2.PlaneGeometry(
+    terrainWidth,
+    terrainDepth,
+    terrainSegmentsX,
+    terrainSegmentsZ
+  );
+  terrainGeometry.rotateX(-Math.PI / 2);
+  const heightStats = applyHeightField(terrainGeometry, sampler, { seaLevel, heightScale });
+  terrainHeightRange = { min: heightStats.minY, max: heightStats.maxY };
+  let legendTexture = await composeLegendTexture(
+    legend,
+    dataset.resolveAssetUrl,
+    layerImageCache,
+    maskCanvasCache,
+    options.layers
+  );
+  const terrainMaterial = new THREE2.MeshStandardMaterial({
+    map: legendTexture ?? topoTexture,
+    roughness: 0.6,
+    metalness: 0.18,
+    envMapIntensity: 0.45,
+    color: new THREE2.Color(16315885)
+  });
+  terrain = new THREE2.Mesh(terrainGeometry, terrainMaterial);
+  terrain.castShadow = true;
+  terrain.receiveShadow = true;
+  scene.add(terrain);
+  if (currentLocations.length) {
+    setLocationMarkers(currentLocations, currentFocusId);
+  }
+  const base = createBaseSlice(baseWidth, baseDepth);
+  scene.add(base.mesh);
+  const rimMaterial = new THREE2.MeshStandardMaterial({
+    color: 1315359,
+    roughness: 0.5,
+    metalness: 0.2,
+    side: THREE2.DoubleSide
+  });
+  let rimMesh = buildRimMesh(terrainGeometry, FLOOR_Y, rimMaterial);
+  rimMesh.receiveShadow = true;
+  scene.add(rimMesh);
+  const createOcean = () => createOceanMesh(
+    heightMap,
+    sampler,
+    heightScale,
+    waterHeight,
+    seaLevel,
+    terrainWidth,
+    terrainDepth
+  );
+  let ocean = createOcean();
+  scene.add(ocean.mesh);
+  disposables.push(() => {
+    terrainGeometry.dispose();
+    terrainMaterial.dispose();
+    base.dispose();
+    rimMesh.geometry.dispose();
+    rimMaterial.dispose();
+    ocean.dispose();
+    heightMap.dispose();
+    topoTexture.dispose();
+    legendTexture?.dispose();
+  });
+  disposables.push(() => {
+    iconTextureCache.forEach((texture) => texture.dispose());
+    iconTextureCache.clear();
+    iconTexturePromises.clear();
+  });
+  function applyViewOffset() {
+    if (Math.abs(viewOffsetPixels) < 0.5) {
+      if (camera.view?.enabled) {
+        camera.clearViewOffset();
+        camera.updateProjectionMatrix();
+      }
+      return;
+    }
+    const shiftPixels = Math.round(viewOffsetPixels);
+    camera.setViewOffset(
+      viewportWidth,
+      viewportHeight,
+      shiftPixels,
+      0,
+      viewportWidth,
+      viewportHeight
+    );
+    camera.updateProjectionMatrix();
+  }
+  let animationFrame = 0;
+  let frameCount = 0;
+  let firstRenderComplete = false;
+  const frameTimings = [];
+  const STABILITY_FRAME_COUNT = 10;
+  const STABILITY_THRESHOLD_MS = 50;
+  const STABILITY_TIMEOUT_MS = 2e3;
+  let stabilizingStartTime = null;
+  let frameCaptureMode = false;
+  let manualFrameTime = 0;
+  let frameCaptureStartTime = 0;
+  function animate() {
+    const now = frameCaptureMode ? manualFrameTime : performance.now();
+    const delta = frameCaptureMode ? 1 / captureFps : Math.min((now - lastTime) / 1e3, 0.15);
+    const frameDuration = now - lastTime;
+    lastTime = now;
+    if (cameraTween) {
+      const progress = Math.min((now - cameraTween.start) / cameraTween.duration, 1);
+      const eased = easeInOut(progress);
+      camera.position.copy(cameraTween.startPos).lerp(cameraTween.endPos, eased);
+      controls.target.copy(cameraTween.startTarget).lerp(cameraTween.endTarget, eased);
+      if (progress >= 1) cameraTween = null;
+    }
+    cameraOffset.current = THREE2.MathUtils.damp(
+      cameraOffset.current,
+      cameraOffset.target,
+      6,
+      delta
+    );
+    const shiftTarget = cameraOffset.current * viewportWidth * 0.5;
+    viewOffsetPixels = THREE2.MathUtils.damp(viewOffsetPixels, shiftTarget, 6, delta);
+    applyViewOffset();
+    controls.update();
+    updateMarkerVisuals();
+    renderer.render(scene, camera);
+    frameCount++;
+    if (!firstRenderComplete && frameCount === 1) {
+      setLifecycleState("first-render");
+      firstRenderComplete = true;
+    }
+    if (currentLifecycleState === "first-render" || currentLifecycleState === "stabilizing") {
+      frameTimings.push(frameDuration);
+      if (frameTimings.length > STABILITY_FRAME_COUNT) {
+        frameTimings.shift();
+      }
+      if (frameTimings.length === STABILITY_FRAME_COUNT) {
+        const avgFrameTime = frameTimings.reduce((a, b) => a + b, 0) / STABILITY_FRAME_COUNT;
+        if (avgFrameTime < STABILITY_THRESHOLD_MS) {
+          setLifecycleState("ready");
+          stabilizingStartTime = null;
+        } else if (currentLifecycleState === "first-render") {
+          setLifecycleState("stabilizing");
+          stabilizingStartTime = now;
+        }
+      }
+      if (currentLifecycleState === "stabilizing" && stabilizingStartTime !== null) {
+        const stabilizingDuration = now - stabilizingStartTime;
+        if (stabilizingDuration > STABILITY_TIMEOUT_MS) {
+          console.warn(`[terrainViewer] Framerate did not stabilize after ${STABILITY_TIMEOUT_MS}ms, forcing ready state`);
+          setLifecycleState("ready");
+          stabilizingStartTime = null;
+        }
+      }
+    }
+    if (!frameCaptureMode) {
+      animationFrame = window.requestAnimationFrame(animate);
+    }
+  }
+  animate();
+  options.onReady?.();
+  const resizeObserver = new ResizeObserver(() => {
+    const { clientWidth, clientHeight } = container;
+    if (!clientWidth || !clientHeight) return;
+    viewportWidth = clientWidth;
+    viewportHeight = clientHeight;
+    const shiftTarget = cameraOffset.current * viewportWidth * 0.5;
+    viewOffsetPixels = shiftTarget;
+    camera.aspect = clientWidth / clientHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(clientWidth, clientHeight, false);
+    applyViewOffset();
+  });
+  resizeObserver.observe(container);
+  function setPointerFromEvent(event) {
+    const rect = renderer.domElement.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width * 2 - 1;
+    const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    pointer.set(x, y);
+    raycaster.setFromCamera(pointer, camera);
+  }
+  function intersectTerrain() {
+    if (!terrain) return null;
+    const intersections = raycaster.intersectObject(terrain, true);
+    return intersections[0] ?? null;
+  }
+  function pickMarkerId() {
+    if (!markerInteractiveTargets.length) return null;
+    const intersections = raycaster.intersectObjects(markerInteractiveTargets, true);
+    const hit = intersections.find((entry) => entry.object.userData.locationId);
+    return hit?.object.userData.locationId || null;
+  }
+  function updateHoverState() {
+    const markerId = pickMarkerId();
+    if (markerId !== hoveredLocationId) {
+      hoveredLocationId = markerId;
+      options.onLocationHover?.(markerId);
+      updateMarkerVisuals();
+    }
+  }
+  function updatePlacementIndicator() {
+    if (!interactiveEnabled) {
+      placementIndicator.visible = false;
+      return;
+    }
+    const hit = intersectTerrain();
+    if (!hit) {
+      placementIndicator.visible = false;
+      return;
+    }
+    placementIndicator.visible = true;
+    placementIndicator.position.copy(hit.point).setY(hit.point.y + 0.2);
+  }
+  function handlePointerMove(event) {
+    setPointerFromEvent(event);
+    updateHoverState();
+    updatePlacementIndicator();
+  }
+  function handlePointerDown(event) {
+    if (event.button !== 0) return;
+    setPointerFromEvent(event);
+    if (interactiveEnabled && options.onLocationPick) {
+      const hit = intersectTerrain();
+      if (!hit || !hit.uv) return;
+      const u = hit.uv.x;
+      const v = hit.uv.y;
+      const pixel = uvToPixel(u, v);
+      options.onLocationPick?.({
+        pixel,
+        uv: { u, v },
+        world: { x: hit.point.x, y: hit.point.y, z: hit.point.z }
+      });
+      return;
+    }
+    const markerId = pickMarkerId();
+    if (markerId && options.onLocationClick) {
+      options.onLocationClick(markerId);
+    }
+  }
+  renderer.domElement.addEventListener("pointermove", handlePointerMove);
+  renderer.domElement.addEventListener("pointerdown", handlePointerDown);
+  function handleDoubleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setPointerFromEvent(event);
+    const hit = intersectTerrain();
+    if (!hit) return;
+    const worldPoint = hit.point.clone();
+    const pixel = hit.uv ? uvToPixel(hit.uv.x, hit.uv.y) : { x: worldPoint.x, y: worldPoint.z };
+    navigateToLocation({
+      pixel,
+      world: worldPoint
+    });
+  }
+  renderer.domElement.addEventListener("dblclick", handleDoubleClick);
+  disposables.push(
+    () => renderer.domElement.removeEventListener("pointerdown", handlePointerDown)
+  );
+  disposables.push(
+    () => renderer.domElement.removeEventListener("pointermove", handlePointerMove)
+  );
+  disposables.push(
+    () => renderer.domElement.removeEventListener("dblclick", handleDoubleClick)
+  );
+  function setInteractiveMode(enabled) {
+    interactiveEnabled = enabled;
+    if (enabled) {
+      renderer.domElement.classList.add("terrain-pointer-active");
+    } else {
+      renderer.domElement.classList.remove("terrain-pointer-active");
+      placementIndicator.visible = false;
+    }
+  }
+  async function updateLayers(state) {
+    try {
+      const newTexture = await composeLegendTexture(
+        legend,
+        dataset.resolveAssetUrl,
+        layerImageCache,
+        maskCanvasCache,
+        state
+      );
+      if (!newTexture) return;
+      legendTexture?.dispose();
+      legendTexture = newTexture;
+      terrainMaterial.map = newTexture;
+      terrainMaterial.needsUpdate = true;
+    } catch (err) {
+      console.error("Failed to update Wynnal layers", err);
+    }
+  }
+  if (options.layers) await updateLayers(options.layers);
+  if (options.locations?.length) setLocationMarkers(options.locations);
+  if (interactiveEnabled) setInteractiveMode(true);
+  if (options.cameraView) {
+    const fallbackPixel = {
+      x: options.cameraView.targetPixel?.x ?? mapWidth / 2,
+      y: options.cameraView.targetPixel?.y ?? mapHeight / 2
+    };
+    navigateToLocation({
+      pixel: fallbackPixel,
+      view: options.cameraView,
+      instant: true
+    });
+  }
+  function normalizeWorld(value) {
+    if (!value) return null;
+    if (value instanceof THREE2.Vector3) return value.clone();
+    return new THREE2.Vector3(value.x, value.y, value.z);
+  }
+  function navigateToLocation(payload) {
+    const { pixel, locationId, world: worldOverride, view, instant } = payload;
+    let world = normalizeWorld(worldOverride) || locationId && locationWorldCache.get(locationId)?.clone() || pixelToWorld(pixel);
+    world = projectWorldToSurface(world);
+    if (!world) return;
+    const distance = view?.distance ?? Math.max(camera.position.distanceTo(controls.target), 0.1);
+    const polar = view?.polar ?? controls.getPolarAngle();
+    const azimuth = view?.azimuth ?? controls.getAzimuthalAngle();
+    const spherical = new THREE2.Spherical(distance, polar, azimuth);
+    const orbitOffset = new THREE2.Vector3().setFromSpherical(spherical);
+    const baseTarget = world.clone();
+    const basePos = world.clone().add(orbitOffset);
+    const endTarget = baseTarget.clone();
+    const endPos = basePos.clone();
+    cameraOffset.current = cameraOffset.target;
+    const duration = instant ? 0 : 650;
+    startCameraTween(endPos, endTarget, duration);
+    if (locationId) currentFocusId = locationId;
+  }
+  let captureFps = 30;
+  return {
+    destroy: () => {
+      window.cancelAnimationFrame(animationFrame);
+      resizeObserver.disconnect();
+      controls.dispose();
+      disposables.forEach((dispose) => dispose());
+      dataset.cleanup?.();
+    },
+    updateLayers,
+    setInteractiveMode,
+    updateLocations: (locations, focusedId) => {
+      setLocationMarkers(locations, focusedId);
+    },
+    setFocusedLocation: (locationId) => {
+      const nextId = locationId ?? void 0;
+      if (currentFocusId === nextId) return;
+      currentFocusId = nextId;
+      updateMarkerVisuals();
+    },
+    navigateTo: navigateToLocation,
+    setHoveredLocation: (id) => {
+      hoveredLocationId = id;
+      updateMarkerVisuals();
+    },
+    setCameraOffset: (offset, focusId) => {
+      cameraOffset.target = THREE2.MathUtils.clamp(offset, -0.45, 0.45);
+      const targetId = focusId ?? currentFocusId;
+      if (targetId) {
+        const loc = currentLocations.find((item) => item.id === targetId);
+        if (loc) {
+          navigateToLocation({
+            pixel: loc.pixel,
+            locationId: targetId,
+            view: loc.view,
+            instant: true
+          });
+        }
+      }
+    },
+    onCameraMove: (callback) => {
+      const handler = () => {
+        const distance = Math.max(camera.position.distanceTo(controls.target), 0.1);
+        const targetPixel = worldToPixel(controls.target, terrainDimensions, {
+          width: mapWidth,
+          height: mapHeight
+        });
+        callback({
+          distance,
+          polar: controls.getPolarAngle(),
+          azimuth: controls.getAzimuthalAngle(),
+          targetPixel
+        });
+      };
+      controls.addEventListener("change", handler);
+      return () => {
+        controls.removeEventListener("change", handler);
+      };
+    },
+    getViewState: () => {
+      const distance = Math.max(camera.position.distanceTo(controls.target), 0.1);
+      const targetPixel = worldToPixel(controls.target, terrainDimensions, {
+        width: mapWidth,
+        height: mapHeight
+      });
+      return {
+        distance,
+        polar: controls.getPolarAngle(),
+        azimuth: controls.getAzimuthalAngle(),
+        targetPixel
+      };
+    },
+    setTheme: applyThemeUpdate,
+    setSeaLevel: applySeaLevelUpdate,
+    invalidateIconTextures: (paths) => {
+      invalidateIconCache(paths);
+      setLocationMarkers(currentLocations, currentFocusId);
+    },
+    invalidateLayerMasks: (paths) => {
+      invalidateLayerMaskCache(paths);
+    },
+    // Frame capture API for deterministic rendering
+    enableFrameCaptureMode: (fps = 30) => {
+      captureFps = fps;
+      frameCaptureMode = true;
+      frameCaptureStartTime = performance.now();
+      manualFrameTime = frameCaptureStartTime;
+      lastTime = frameCaptureStartTime;
+      return { fps };
+    },
+    disableFrameCaptureMode: () => {
+      frameCaptureMode = false;
+      animationFrame = window.requestAnimationFrame(animate);
+    },
+    captureFrame: (frameNumber, fps = 30) => {
+      if (!frameCaptureMode) {
+        throw new Error("Frame capture mode is not enabled. Call enableFrameCaptureMode() first.");
+      }
+      manualFrameTime = frameCaptureStartTime + frameNumber / fps * 1e3;
+      animate();
+      return { frameNumber, time: manualFrameTime };
+    }
+  };
+}
+
+// src/loadWynArchive.ts
+import JSZip from "jszip";
+function ensureFile(zip, path) {
+  const file = zip.file(path);
+  if (!file) {
+    throw new Error(`Missing required file in WYN archive: ${path}`);
+  }
+  return file;
+}
+function createObjectUrlResolver(zip) {
+  const cache = /* @__PURE__ */ new Map();
+  const allocated = /* @__PURE__ */ new Set();
+  function getUrl(path) {
+    if (cache.has(path)) return cache.get(path);
+    const file = zip.file(path);
+    if (!file) {
+      return Promise.reject(new Error(`Asset not found in WYN archive: ${path}`));
+    }
+    const promise = file.async("blob").then((blob) => {
+      const url = URL.createObjectURL(blob);
+      allocated.add(url);
+      return url;
+    });
+    cache.set(path, promise);
+    return promise;
+  }
+  function cleanup() {
+    allocated.forEach((url) => URL.revokeObjectURL(url));
+    allocated.clear();
+    cache.clear();
+  }
+  return { getUrl, cleanup };
+}
+function parseContentLength(header) {
+  if (!header) return void 0;
+  const parsed = Number(header);
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
+async function readResponseWithProgress(response, onProgress) {
+  if (!response.body || typeof response.body.getReader !== "function") {
+    const buffer = await response.arrayBuffer();
+    if (onProgress) {
+      const totalBytes2 = buffer.byteLength;
+      onProgress({ type: "network-download", loadedBytes: totalBytes2, totalBytes: totalBytes2 });
+    }
+    return buffer;
+  }
+  const reader = response.body.getReader();
+  const totalBytes = parseContentLength(response.headers.get("content-length"));
+  const chunks = [];
+  let loadedBytes = 0;
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    if (value) {
+      chunks.push(value);
+      loadedBytes += value.length;
+      onProgress?.({ type: "network-download", loadedBytes, totalBytes });
+    }
+  }
+  reader.releaseLock();
+  if (!chunks.length) {
+    onProgress?.({ type: "network-download", loadedBytes, totalBytes });
+  }
+  const merged = new Uint8Array(loadedBytes);
+  let offset = 0;
+  for (const chunk of chunks) {
+    merged.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return merged.buffer;
+}
+async function readFileWithProgress(file, onProgress) {
+  if (typeof FileReader === "undefined") {
+    const buffer = await file.arrayBuffer();
+    onProgress?.({ type: "file-read", loadedBytes: buffer.byteLength, totalBytes: buffer.byteLength });
+    return buffer;
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("error", () => {
+      reject(reader.error ?? new Error("Failed to read file."));
+    });
+    reader.addEventListener("abort", () => {
+      reject(new Error("File read aborted."));
+    });
+    reader.addEventListener("load", () => {
+      onProgress?.({ type: "file-read", loadedBytes: file.size, totalBytes: file.size });
+      resolve(reader.result);
+    });
+    if (onProgress) {
+      reader.addEventListener("progress", (event) => {
+        const totalBytes = event.lengthComputable ? event.total : file.size;
+        onProgress({
+          type: "file-read",
+          loadedBytes: event.loaded,
+          totalBytes
+        });
+      });
+    }
+    reader.readAsArrayBuffer(file);
+  });
+}
+function guessMimeType(path) {
+  const extension = path.split(".").pop()?.toLowerCase();
+  if (!extension) return void 0;
+  if (extension === "png") return "image/png";
+  if (extension === "jpg" || extension === "jpeg") return "image/jpeg";
+  if (extension === "webp") return "image/webp";
+  if (extension === "gif") return "image/gif";
+  if (extension === "json") return "application/json";
+  return void 0;
+}
+var SKIP_FILE_TABLE = /* @__PURE__ */ new Set(["legend.json", "locations.json", "theme.json", "metadata.json"]);
+async function extractProjectFiles(zip) {
+  const entries = [];
+  const fileEntries = Object.values(zip.files);
+  for (const entry of fileEntries) {
+    if (entry.dir) continue;
+    if (!entry.name) continue;
+    if (entry.name.startsWith("__MACOSX/")) continue;
+    if (SKIP_FILE_TABLE.has(entry.name)) continue;
+    const path = entry.name;
+    const data = await entry.async("arraybuffer");
+    entries.push({
+      path,
+      data,
+      type: guessMimeType(path),
+      lastModified: entry.date?.getTime(),
+      sourceFileName: path.split("/").pop()
+    });
+  }
+  return entries;
+}
+async function parseWynZip(zip, options = {}) {
+  const legendFile = ensureFile(zip, "legend.json");
+  const legendRaw = await legendFile.async("string");
+  const legend = JSON.parse(legendRaw);
+  const locationEntry = zip.file("locations.json");
+  let locations;
+  if (locationEntry) {
+    const contents = await locationEntry.async("string");
+    locations = JSON.parse(contents);
+  }
+  const themeEntry = zip.file("theme.json");
+  let themeOverrides;
+  if (themeEntry) {
+    const contents = await themeEntry.async("string");
+    themeOverrides = JSON.parse(contents);
+  }
+  const metadataEntry = zip.file("metadata.json");
+  let metadata;
+  if (metadataEntry) {
+    const contents = await metadataEntry.async("string");
+    metadata = JSON.parse(contents);
+  }
+  const { getUrl, cleanup } = createObjectUrlResolver(zip);
+  const heightMapPath = legend.heightmap;
+  const topologyPath = legend.topology ?? legend.heightmap;
+  const dataset = {
+    legend,
+    getHeightMapUrl: () => getUrl(heightMapPath),
+    getTopologyMapUrl: () => getUrl(topologyPath),
+    resolveAssetUrl: (path) => getUrl(path),
+    cleanup,
+    theme: themeOverrides
+  };
+  const files = options.includeFiles ? await extractProjectFiles(zip) : void 0;
+  return { dataset, legend, locations, files, metadata };
+}
+async function loadWynArchive(url, options = {}) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch WYN file (${response.status} ${response.statusText})`);
+  }
+  const arrayBuffer = await readResponseWithProgress(response, options.onProgress);
+  const zip = await JSZip.loadAsync(arrayBuffer);
+  return parseWynZip(zip, options);
+}
+async function loadWynArchiveFromArrayBuffer(data, options = {}) {
+  const zip = await JSZip.loadAsync(data);
+  return parseWynZip(zip, options);
+}
+async function loadWynArchiveFromFile(file, options = {}) {
+  const buffer = await readFileWithProgress(file, options.onProgress);
+  return loadWynArchiveFromArrayBuffer(buffer, options);
+}
+
+// src/viewerHost.ts
+var HOST_STYLE_ID = "ctw-viewer-host-style";
+var HOST_CSS = `
+.viewer-popout {
+  position: fixed;
+  inset: 0;
+  background: rgba(5, 7, 13, 0.85);
+  backdrop-filter: blur(6px);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  z-index: 999;
+}
+
+.viewer-popout.is-open {
+  display: flex;
+}
+
+.viewer-popout.is-fullscreen {
+  padding: 0;
+}
+
+.viewer-popout__chrome {
+  width: min(1200px, 100%);
+  height: min(90vh, 760px);
+  background: #05070d;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.viewer-popout.is-fullscreen .viewer-popout__chrome {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  border: none;
+}
+
+.viewer-popout__header {
+  padding: 1rem 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  font-family: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
+  color: #f6e7c3;
+}
+
+.viewer-popout__header .label {
+  margin: 0;
+  font-weight: 600;
+}
+
+.viewer-popout__header .hint {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #b8b2a3;
+}
+
+.viewer-popout__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.viewer-popout__slot {
+  flex: 1;
+  padding: 1rem;
+}
+
+.viewer-popout.is-fullscreen .viewer-popout__slot {
+  padding: 0;
+}
+
+.chip-button {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #f6e7c3;
+  border-radius: 999px;
+  padding: 0.45rem 1rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-family: inherit;
+}
+
+.chip-button:hover {
+  border-color: rgba(223, 195, 135, 0.7);
+}
+`;
+var noopHandle = {
+  openPopout: () => {
+  },
+  closePopout: () => {
+  },
+  toggleFullscreen: () => Promise.resolve(),
+  getMode: () => "embed",
+  destroy: () => {
+  }
+};
+function ensureHostStyles(doc) {
+  if (doc.getElementById(HOST_STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = HOST_STYLE_ID;
+  style.textContent = HOST_CSS;
+  doc.head.appendChild(style);
+}
+function createTerrainViewerHost(options) {
+  if (typeof window === "undefined") return noopHandle;
+  const { viewerElement, embedTarget } = options;
+  const doc = options.documentRoot ?? document;
+  if (!viewerElement || !embedTarget) return noopHandle;
+  ensureHostStyles(doc);
+  let mode = "embed";
+  let popoutOpen = false;
+  const overlay = doc.createElement("div");
+  overlay.className = "viewer-popout";
+  overlay.setAttribute("aria-hidden", "true");
+  const chrome = doc.createElement("div");
+  chrome.className = "viewer-popout__chrome";
+  overlay.appendChild(chrome);
+  const popoutSlot = doc.createElement("div");
+  popoutSlot.className = "viewer-popout__slot";
+  chrome.appendChild(popoutSlot);
+  doc.body.appendChild(overlay);
+  embedTarget.appendChild(viewerElement);
+  function syncOverlayState() {
+    overlay.classList.toggle("is-fullscreen", mode === "fullscreen");
+  }
+  function setMode(newMode) {
+    if (mode === newMode) return;
+    mode = newMode;
+    syncOverlayState();
+    options.onModeChange?.(mode);
+  }
+  function moveViewer(target) {
+    target.appendChild(viewerElement);
+  }
+  function openPopout() {
+    if (popoutOpen) return;
+    popoutOpen = true;
+    overlay.classList.add("is-open");
+    overlay.setAttribute("aria-hidden", "false");
+    moveViewer(popoutSlot);
+    setMode("popout");
+  }
+  function closePopout() {
+    if (!popoutOpen) return;
+    popoutOpen = false;
+    overlay.classList.remove("is-open");
+    overlay.setAttribute("aria-hidden", "true");
+    moveViewer(embedTarget);
+    if (doc.fullscreenElement === overlay) {
+      void doc.exitFullscreen();
+    }
+    setMode("embed");
+  }
+  async function toggleFullscreen() {
+    if (!popoutOpen) return;
+    if (doc.fullscreenElement === overlay) {
+      await doc.exitFullscreen();
+      setMode("popout");
+    } else {
+      await overlay.requestFullscreen();
+      setMode("fullscreen");
+    }
+  }
+  function handleOverlayClick(event) {
+    if (event.target === overlay) {
+      closePopout();
+    }
+  }
+  function handleFullscreenChange() {
+    if (!popoutOpen && doc.fullscreenElement === overlay) {
+      void doc.exitFullscreen();
+      return;
+    }
+    if (!doc.fullscreenElement && popoutOpen) {
+      setMode("popout");
+    } else if (doc.fullscreenElement === overlay) {
+      setMode("fullscreen");
+    }
+  }
+  overlay.addEventListener("click", handleOverlayClick);
+  doc.addEventListener("fullscreenchange", handleFullscreenChange);
+  syncOverlayState();
+  options.onModeChange?.(mode);
+  return {
+    openPopout,
+    closePopout,
+    toggleFullscreen,
+    getMode: () => mode,
+    destroy: () => {
+      doc.removeEventListener("fullscreenchange", handleFullscreenChange);
+      overlay.removeEventListener("click", handleOverlayClick);
+      closePopout();
+      overlay.remove();
+    }
+  };
+}
+
+// src/viewerOverlay.ts
+var STYLE_ID = "ctw-viewer-overlay-styles";
+var PROGRESS_VISIBILITY_DELAY_MS = 500;
+var PROGRESS_FADE_IN_DURATION_MS = 200;
+var PROGRESS_FADE_OUT_DURATION_MS = 500;
+var PROGRESS_CLEAR_DELAY_MS = PROGRESS_FADE_OUT_DURATION_MS;
+var PROGRESS_FADE_DURATION_VAR = "--ctw-viewer-progress-fade-duration";
+var OVERLAY_CSS = `
+.ctw-viewer-host {
+  position: relative;
+}
+
+.ctw-viewer-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0.75rem;
+  pointer-events: none;
+  font-family: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
+  color: #f6e7c3;
+  z-index: 10;
+}
+
+.ctw-viewer-overlay__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  column-gap: 0.75rem;
+  row-gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+.ctw-viewer-overlay__row--bottom {
+  margin-top: 0.5rem;
+}
+
+.ctw-viewer-overlay__slot {
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.ctw-viewer-overlay__slot--top-left,
+.ctw-viewer-overlay__slot--top-right,
+.ctw-viewer-overlay__slot--top-center,
+.ctw-viewer-overlay__slot--bottom-left,
+.ctw-viewer-overlay__slot--bottom-right,
+.ctw-viewer-overlay__slot--bottom-center {
+  justify-content: flex-start;
+  justify-self: flex-start;
+}
+
+.ctw-viewer-overlay__slot--top-right,
+.ctw-viewer-overlay__slot--bottom-right {
+  justify-content: flex-end;
+  justify-self: flex-end;
+}
+
+.ctw-viewer-overlay__slot--top-center,
+.ctw-viewer-overlay__slot--bottom-center {
+  justify-content: center;
+  justify-self: center;
+  text-align: center;
+}
+
+.ctw-viewer-overlay__center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  pointer-events: none;
+}
+
+.ctw-viewer-overlay__center > * {
+  pointer-events: auto;
+}
+
+.ctw-viewer-overlay__progress {
+  position: absolute;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  background: rgba(5, 7, 13, 0.85);
+  border: 1px solid rgba(223, 195, 135, 0.5);
+  border-radius: 12px;
+  padding: 0.65rem 0.85rem 0.8rem;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(${PROGRESS_FADE_DURATION_VAR}, 0.1s) ease;
+}
+
+.ctw-viewer-overlay__progress--visible {
+  opacity: 1;
+}
+
+.ctw-viewer-overlay__progress-label {
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(246, 231, 195, 0.9);
+  margin-bottom: 0.2rem;
+}
+
+.ctw-viewer-overlay__progress-value {
+  font-size: 0.78rem;
+  color: rgba(246, 231, 195, 0.75);
+  margin-bottom: 0.45rem;
+}
+
+.ctw-viewer-overlay__progress-bar {
+  position: relative;
+  height: 0.4rem;
+  border-radius: 999px;
+  background: rgba(246, 231, 195, 0.22);
+  overflow: hidden;
+}
+
+.ctw-viewer-overlay__progress-fill {
+  position: absolute;
+  inset: 0;
+  width: 0%;
+  background: linear-gradient(90deg, #f6e7c3 0%, #d7c289 100%);
+  border-radius: inherit;
+  transition: width 0.2s ease;
+}
+
+.ctw-viewer-overlay__progress-bar--indeterminate .ctw-viewer-overlay__progress-fill {
+  width: 40%;
+  animation: ctw-viewer-progress-indeterminate 0.9s linear infinite;
+}
+
+@keyframes ctw-viewer-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
+
+.ctw-viewer-overlay__status {
+  font-size: 0.85rem;
+  background: rgba(5, 7, 13, 0.6);
+  border: 1px solid rgba(223, 195, 135, 0.5);
+  border-radius: 999px;
+  padding: 0.35rem 0.9rem;
+  backdrop-filter: blur(6px);
+  line-height: 1.2rem;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: max(150px, 50%, 30vw);
+  text-overflow: ellipsis;
+  transition: opacity 0.45s ease, transform 0.45s ease;
+}
+
+.ctw-viewer-overlay__status--fade {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.ctw-viewer-overlay__buttons {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.ctw-viewer-overlay__label {
+  font-size: 0.85rem;
+  letter-spacing: 0.03em;
+  color: rgba(246, 231, 195, 0.85);
+}
+
+.ctw-chip-button {
+  background: rgba(5, 7, 13, 0.65);
+  border: 1px solid rgba(223, 195, 135, 0.5);
+  color: #f6e7c3;
+  border-radius: 999px;
+  padding: 0.4rem 0.95rem;
+  font-size: 0.82rem;
+  letter-spacing: 0.02em;
+  pointer-events: auto;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+  line-height: 1.2rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: max(100px, 20vw);
+}
+
+.ctw-chip-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.ctw-chip-button:not(:disabled):hover {
+  border-color: rgba(223, 195, 135, 0.85);
+}
+
+.ctw-drop-overlay {
+  position: absolute;
+  inset: 0;
+  border: 2px dashed rgba(223, 195, 135, 0.75);
+  border-radius: 16px;
+  background: rgba(5, 7, 13, 0.82);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  z-index: 9;
+}
+
+.ctw-viewer-host--dragging .ctw-drop-overlay {
+  display: flex;
+}
+`;
+function resolveViewerOverlayOptions(options = {}) {
+  return {
+    status: {
+      initialText: options.status?.initialText ?? "Loading\u2026"
+    },
+    selectFile: {
+      enabled: options.selectFile?.enabled ?? true,
+      label: options.selectFile?.label ?? "Load Map",
+      callback: options.selectFile?.callback
+    },
+    popout: {
+      enabled: options.popout?.enabled ?? true,
+      labelOpen: options.popout?.labelOpen ?? "Pop Out",
+      labelClose: options.popout?.labelClose ?? "Close",
+      onRequestOpen: options.popout?.onRequestOpen,
+      onRequestClose: options.popout?.onRequestClose
+    },
+    fullscreen: {
+      enabled: options.fullscreen?.enabled ?? true,
+      labelEnter: options.fullscreen?.labelEnter ?? "Full Screen",
+      labelExit: options.fullscreen?.labelExit ?? "Exit Full Screen",
+      onToggle: options.fullscreen?.onToggle,
+      displayInEmbed: options.fullscreen?.displayInEmbed ?? false
+    },
+    customButtons: options.customButtons ?? []
+  };
+}
+function formatBytes(bytes) {
+  if (bytes <= 0 || !Number.isFinite(bytes)) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / Math.pow(1024, exponent);
+  const rounded = value >= 10 ? value.toFixed(0) : value.toFixed(1);
+  return `${rounded} ${units[exponent]}`;
+}
+function ensureStyles(doc) {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = OVERLAY_CSS;
+  doc.head.appendChild(style);
+}
+function createViewerOverlay(target, optionsInput = {}) {
+  if (typeof window === "undefined") {
+    return {
+      setStatus: () => {
+      },
+      setStatusFade: () => {
+      },
+      setViewMode: () => {
+      },
+      setLoadingProgress: () => {
+      },
+      hideDropOverlay: () => {
+      },
+      openFileDialog: () => {
+      },
+      destroy: () => {
+      }
+    };
+  }
+  const options = resolveViewerOverlayOptions(optionsInput);
+  const doc = target.ownerDocument;
+  ensureStyles(doc);
+  target.classList.add("ctw-viewer-host");
+  const overlay = doc.createElement("div");
+  overlay.className = "ctw-viewer-overlay";
+  target.appendChild(overlay);
+  const createSlot = (position) => {
+    const slot = doc.createElement("div");
+    slot.className = `ctw-viewer-overlay__slot ctw-viewer-overlay__slot--${position}`;
+    return slot;
+  };
+  const topRow = doc.createElement("div");
+  topRow.className = "ctw-viewer-overlay__row ctw-viewer-overlay__row--top";
+  const topLeftSlot = createSlot("top-left");
+  const topCenterSlot = createSlot("top-center");
+  const topRightSlot = createSlot("top-right");
+  topRow.append(topLeftSlot, topCenterSlot, topRightSlot);
+  overlay.append(topRow);
+  const bottomRow = doc.createElement("div");
+  bottomRow.className = "ctw-viewer-overlay__row ctw-viewer-overlay__row--bottom";
+  const bottomLeftSlot = createSlot("bottom-left");
+  const bottomCenterSlot = createSlot("bottom-center");
+  const bottomRightSlot = createSlot("bottom-right");
+  bottomRow.append(bottomLeftSlot, bottomCenterSlot, bottomRightSlot);
+  const bottomLocations = /* @__PURE__ */ new Set([
+    "bottom-left",
+    "bottom-center",
+    "bottom-right"
+  ]);
+  let bottomRowMounted = false;
+  const centerSlot = doc.createElement("div");
+  centerSlot.className = "ctw-viewer-overlay__center";
+  let centerSlotMounted = false;
+  const progressPanel = doc.createElement("div");
+  progressPanel.className = "ctw-viewer-overlay__progress";
+  const progressLabel = doc.createElement("div");
+  progressLabel.className = "ctw-viewer-overlay__progress-label";
+  const progressValue = doc.createElement("div");
+  progressValue.className = "ctw-viewer-overlay__progress-value";
+  const progressBar = doc.createElement("div");
+  progressBar.className = "ctw-viewer-overlay__progress-bar";
+  const progressFill = doc.createElement("div");
+  progressFill.className = "ctw-viewer-overlay__progress-fill";
+  progressBar.append(progressFill);
+  progressPanel.append(progressLabel, progressValue, progressBar);
+  overlay.append(progressPanel);
+  const slotMap = {
+    "top-left": topLeftSlot,
+    "top-center": topCenterSlot,
+    "top-right": topRightSlot,
+    "bottom-left": bottomLeftSlot,
+    "bottom-center": bottomCenterSlot,
+    "bottom-right": bottomRightSlot
+  };
+  function appendToSlot(location, element) {
+    if (location === "center") {
+      if (!centerSlotMounted) {
+        overlay.append(centerSlot);
+        centerSlotMounted = true;
+      }
+      centerSlot.appendChild(element);
+      return;
+    }
+    if (bottomLocations.has(location) && !bottomRowMounted) {
+      overlay.insertBefore(bottomRow, progressPanel);
+      bottomRowMounted = true;
+    }
+    slotMap[location].appendChild(element);
+  }
+  const statusLabel = doc.createElement("div");
+  statusLabel.className = "ctw-viewer-overlay__status";
+  statusLabel.textContent = options.status.initialText;
+  appendToSlot("top-left", statusLabel);
+  function setStatusFade(fade) {
+    statusLabel.classList.toggle("ctw-viewer-overlay__status--fade", fade);
+  }
+  const buttonGroup = doc.createElement("div");
+  buttonGroup.className = "ctw-viewer-overlay__buttons";
+  appendToSlot("top-right", buttonGroup);
+  let fileInput = null;
+  let openFileDialogImpl = () => {
+  };
+  let dropOverlay = null;
+  let dragEnter = null;
+  let dragOver = null;
+  let dragLeave = null;
+  let drop = null;
+  let loadBtn = null;
+  if (options.selectFile.enabled) {
+    loadBtn = doc.createElement("button");
+    loadBtn.type = "button";
+    loadBtn.className = "ctw-chip-button";
+    loadBtn.textContent = options.selectFile.label;
+    const canHandleFiles = Boolean(options.selectFile.callback);
+    loadBtn.disabled = !canHandleFiles;
+    buttonGroup.appendChild(loadBtn);
+    if (canHandleFiles) {
+      fileInput = doc.createElement("input");
+      fileInput.type = "file";
+      fileInput.accept = ".wyn";
+      fileInput.style.display = "none";
+      target.appendChild(fileInput);
+      let handleFiles = (files) => {
+        const file = files?.item(0);
+        if (!file) return;
+        options.selectFile.callback?.(file);
+      };
+      const openDialog = () => fileInput?.click();
+      openFileDialogImpl = openDialog;
+      loadBtn.addEventListener("click", openDialog);
+      fileInput.addEventListener("change", () => {
+        void handleFiles(fileInput?.files ?? null);
+        if (fileInput) {
+          fileInput.value = "";
+        }
+      });
+      dropOverlay = doc.createElement("div");
+      dropOverlay.className = "ctw-drop-overlay";
+      dropOverlay.textContent = "Drop .wyn to load";
+      dropOverlay.style.display = "none";
+      target.appendChild(dropOverlay);
+      const prevent = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      const showOverlay = () => {
+        if (dropOverlay) dropOverlay.style.display = "flex";
+      };
+      const hideOverlay = () => {
+        if (dropOverlay) dropOverlay.style.display = "none";
+      };
+      const highlight = () => {
+        target.classList.add("ctw-viewer-host--dragging");
+        showOverlay();
+      };
+      const unhighlight = () => {
+        target.classList.remove("ctw-viewer-host--dragging");
+        hideOverlay();
+      };
+      handleFiles = async (files) => {
+        const file = files?.item(0);
+        if (!file) {
+          unhighlight();
+          return;
+        }
+        try {
+          await Promise.resolve(options.selectFile.callback?.(file));
+        } finally {
+          unhighlight();
+        }
+      };
+      dragEnter = (event) => {
+        prevent(event);
+        highlight();
+      };
+      dragOver = (event) => {
+        prevent(event);
+        highlight();
+      };
+      dragLeave = (event) => {
+        prevent(event);
+        const related = event.relatedTarget;
+        if (!related || !target.contains(related)) {
+          unhighlight();
+        }
+      };
+      drop = (event) => {
+        prevent(event);
+        unhighlight();
+        void handleFiles(event.dataTransfer?.files ?? null);
+      };
+      target.addEventListener("dragenter", dragEnter);
+      target.addEventListener("dragover", dragOver);
+      target.addEventListener("dragleave", dragLeave);
+      target.addEventListener("drop", drop);
+    }
+  }
+  let modeBtn = null;
+  if (options.popout.enabled) {
+    modeBtn = doc.createElement("button");
+    modeBtn.type = "button";
+    modeBtn.className = "ctw-chip-button";
+    modeBtn.textContent = options.popout.labelOpen;
+    buttonGroup.appendChild(modeBtn);
+    modeBtn.addEventListener("click", () => {
+      if (currentMode === "embed") {
+        options.popout.onRequestOpen?.();
+      } else {
+        options.popout.onRequestClose?.();
+      }
+    });
+  }
+  let fullscreenBtn = null;
+  if (options.fullscreen.enabled) {
+    fullscreenBtn = doc.createElement("button");
+    fullscreenBtn.type = "button";
+    fullscreenBtn.className = "ctw-chip-button";
+    fullscreenBtn.textContent = options.fullscreen.labelEnter;
+    buttonGroup.appendChild(fullscreenBtn);
+    fullscreenBtn.addEventListener("click", () => {
+      options.fullscreen.onToggle?.();
+    });
+  }
+  if (!buttonGroup.childElementCount) {
+    buttonGroup.remove();
+  }
+  options.customButtons.forEach((custom) => {
+    if (custom.callback) {
+      const button = doc.createElement("button");
+      button.type = "button";
+      button.className = "ctw-chip-button";
+      button.textContent = custom.label;
+      if (custom.description) {
+        button.title = custom.description;
+      }
+      button.addEventListener("click", () => custom.callback?.());
+      appendToSlot(custom.location, button);
+    } else {
+      const label = doc.createElement("span");
+      label.className = "ctw-viewer-overlay__label";
+      label.textContent = custom.label;
+      appendToSlot(custom.location, label);
+    }
+  });
+  let currentMode = "embed";
+  let currentLoading = null;
+  let progressVisible = false;
+  let progressTimer = null;
+  let progressClearTimer = null;
+  function resetProgressContent() {
+    progressLabel.textContent = "";
+    progressValue.textContent = "";
+    progressFill.style.width = "0%";
+    progressBar.classList.remove("ctw-viewer-overlay__progress-bar--indeterminate");
+  }
+  function cancelProgressContentReset() {
+    if (progressClearTimer) {
+      window.clearTimeout(progressClearTimer);
+      progressClearTimer = null;
+    }
+  }
+  function scheduleProgressContentReset() {
+    cancelProgressContentReset();
+    progressClearTimer = window.setTimeout(() => {
+      resetProgressContent();
+      progressClearTimer = null;
+    }, PROGRESS_CLEAR_DELAY_MS);
+  }
+  function setProgressFadeDuration(durationMs) {
+    progressPanel.style.setProperty(PROGRESS_FADE_DURATION_VAR, `${durationMs}ms`);
+  }
+  function showProgressPanel() {
+    if (progressVisible) return;
+    setProgressFadeDuration(PROGRESS_FADE_IN_DURATION_MS);
+    progressPanel.classList.add("ctw-viewer-overlay__progress--visible");
+    progressVisible = true;
+  }
+  function hideProgressPanel() {
+    if (progressTimer) {
+      window.clearTimeout(progressTimer);
+      progressTimer = null;
+    }
+    setProgressFadeDuration(PROGRESS_FADE_OUT_DURATION_MS);
+    progressPanel.classList.remove("ctw-viewer-overlay__progress--visible");
+    progressVisible = false;
+  }
+  function updateProgressPanel(state) {
+    currentLoading = state;
+    if (!state) {
+      hideProgressPanel();
+      scheduleProgressContentReset();
+      return;
+    }
+    cancelProgressContentReset();
+    progressLabel.textContent = state.label;
+    if (typeof state.totalBytes === "number" && state.totalBytes > 0) {
+      const percent = Math.min(state.loadedBytes / state.totalBytes, 1);
+      const percentText = `${Math.round(percent * 100)}%`;
+      progressValue.textContent = `${percentText} \u2014 ${formatBytes(state.loadedBytes)} / ${formatBytes(state.totalBytes)}`;
+      progressFill.style.width = `${percent * 100}%`;
+      progressBar.classList.remove("ctw-viewer-overlay__progress-bar--indeterminate");
+    } else {
+      progressValue.textContent = `${formatBytes(state.loadedBytes)}`;
+      progressFill.style.width = "40%";
+      progressBar.classList.add("ctw-viewer-overlay__progress-bar--indeterminate");
+    }
+    if (!progressVisible && !progressTimer) {
+      progressTimer = window.setTimeout(() => {
+        progressTimer = null;
+        if (!currentLoading) return;
+        showProgressPanel();
+      }, PROGRESS_VISIBILITY_DELAY_MS);
+    }
+  }
+  function applyMode(mode) {
+    currentMode = mode;
+    if (modeBtn) {
+      modeBtn.disabled = false;
+      modeBtn.textContent = mode === "embed" ? options.popout.labelOpen : options.popout.labelClose;
+    }
+    if (fullscreenBtn) {
+      const shouldShowFullscreen = options.fullscreen.displayInEmbed || mode !== "embed";
+      fullscreenBtn.hidden = !shouldShowFullscreen;
+      fullscreenBtn.textContent = mode === "fullscreen" ? options.fullscreen.labelExit : options.fullscreen.labelEnter;
+    }
+  }
+  applyMode("embed");
+  return {
+    setStatus(message) {
+      statusLabel.textContent = message;
+      setStatusFade(false);
+    },
+    setStatusFade,
+    setViewMode(mode) {
+      applyMode(mode);
+    },
+    setLoadingProgress(state) {
+      updateProgressPanel(state);
+    },
+    hideDropOverlay() {
+      if (dropOverlay) {
+        dropOverlay.style.display = "none";
+        target.classList.remove("ctw-viewer-host--dragging");
+      }
+    },
+    openFileDialog() {
+      openFileDialogImpl();
+    },
+    destroy() {
+      hideProgressPanel();
+      cancelProgressContentReset();
+      resetProgressContent();
+      if (dragEnter) {
+        target.removeEventListener("dragenter", dragEnter);
+      }
+      if (dragOver) {
+        target.removeEventListener("dragover", dragOver);
+      }
+      if (dragLeave) {
+        target.removeEventListener("dragleave", dragLeave);
+      }
+      if (drop) {
+        target.removeEventListener("drop", drop);
+      }
+      overlay.remove();
+      fileInput?.remove();
+      dropOverlay?.remove();
+      target.classList.remove("ctw-viewer-host", "ctw-viewer-host--dragging");
+    }
+  };
+}
+
+// src/editor/projectStore.ts
+var DEFAULT_METADATA = {
+  label: "Untitled terrain",
+  author: "",
+  source: "scratch"
+};
+function cloneEntry(entry) {
+  return {
+    ...entry,
+    data: entry.data.slice(0)
+  };
+}
+function createInternalState(initial) {
+  const files = /* @__PURE__ */ new Map();
+  initial?.files?.forEach((entry) => files.set(entry.path, cloneEntry(entry)));
+  return {
+    legend: initial?.legend,
+    locations: initial?.locations ? [...initial.locations] : void 0,
+    theme: initial?.theme,
+    metadata: { ...DEFAULT_METADATA, ...initial?.metadata },
+    files,
+    dirty: Boolean(initial?.dirty)
+  };
+}
+function createProjectStore(initial) {
+  const state = createInternalState(initial);
+  const listeners = /* @__PURE__ */ new Set();
+  function buildSnapshot() {
+    return {
+      legend: state.legend,
+      locations: state.locations ? [...state.locations] : void 0,
+      theme: state.theme,
+      metadata: { ...state.metadata },
+      files: Array.from(state.files.values()).map((entry) => ({ ...entry })),
+      dirty: state.dirty
+    };
+  }
+  function emit() {
+    const snapshot = buildSnapshot();
+    listeners.forEach((listener) => listener(snapshot));
+  }
+  function resetInternal() {
+    state.legend = void 0;
+    state.locations = void 0;
+    state.theme = void 0;
+    state.metadata = { ...DEFAULT_METADATA };
+    state.files.clear();
+    state.dirty = false;
+  }
+  function loadFromArchive(payload) {
+    state.legend = payload.legend;
+    state.locations = payload.locations ? [...payload.locations] : void 0;
+    state.theme = payload.theme;
+    state.metadata = {
+      ...DEFAULT_METADATA,
+      ...payload.metadata,
+      source: "archive"
+    };
+    state.files.clear();
+    payload.files?.forEach((entry) => {
+      state.files.set(entry.path, cloneEntry(entry));
+    });
+    state.dirty = false;
+    emit();
+  }
+  function upsertFile(entry) {
+    state.files.set(entry.path, cloneEntry(entry));
+    state.dirty = true;
+    emit();
+  }
+  function setLegend(legend) {
+    state.legend = legend;
+    state.dirty = true;
+    emit();
+  }
+  function setLocations(locations) {
+    state.locations = locations ? [...locations] : void 0;
+    state.dirty = true;
+    emit();
+  }
+  function setTheme(theme) {
+    state.theme = theme;
+    state.dirty = true;
+    emit();
+  }
+  function updateMetadata(metadata) {
+    state.metadata = { ...state.metadata, ...metadata };
+    state.dirty = true;
+    emit();
+  }
+  function removeFile(path) {
+    if (!state.files.has(path)) return;
+    state.files.delete(path);
+    state.dirty = true;
+    emit();
+  }
+  function reset() {
+    resetInternal();
+    emit();
+  }
+  function markPersisted() {
+    if (!state.dirty) return;
+    state.dirty = false;
+    emit();
+  }
+  function getSnapshot() {
+    return buildSnapshot();
+  }
+  function subscribe(listener) {
+    listeners.add(listener);
+    listener(buildSnapshot());
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+  return {
+    getSnapshot,
+    subscribe,
+    loadFromArchive,
+    setLegend,
+    setLocations,
+    setTheme,
+    updateMetadata,
+    upsertFile,
+    removeFile,
+    reset,
+    markPersisted
+  };
+}
+
+// src/editor/buildWynArchive.ts
+import JSZip2 from "jszip";
+function ensureLegend(project) {
+  if (!project.legend) {
+    throw new Error("Cannot build WYN archive without a legend.json payload.");
+  }
+}
+function stringify(payload, options) {
+  const indent = options.pretty ? 2 : void 0;
+  return JSON.stringify(payload, null, indent);
+}
+async function buildWynArchive(project, options = {}) {
+  ensureLegend(project);
+  const zip = new JSZip2();
+  zip.file("legend.json", stringify(project.legend, options));
+  if (project.locations?.length) {
+    zip.file("locations.json", stringify(project.locations, options));
+  }
+  if (project.theme) {
+    zip.file("theme.json", stringify(project.theme, options));
+  }
+  if (project.metadata) {
+    zip.file("metadata.json", stringify(project.metadata, options));
+  }
+  for (const file of project.files) {
+    zip.file(file.path, file.data, {
+      binary: true,
+      comment: file.sourceFileName ?? ""
+    });
+  }
+  return zip.generateAsync({ type: "blob" });
+}
+
+// src/editor/layerBrowser.ts
+function defaultLayerToggles() {
+  return { biomes: {}, overlays: {} };
+}
+function makeLayerId(kind, key) {
+  return `${kind}:${key}`;
+}
+function buildEntries(legend, visibility) {
+  if (!legend) return [];
+  const entries = [];
+  for (const [key, layer] of Object.entries(legend.biomes ?? {})) {
+    const id = makeLayerId("biome", key);
+    entries.push({
+      id,
+      kind: "biome",
+      label: layer.label ?? key,
+      mask: layer.mask,
+      color: layer.rgb,
+      visible: visibility.get(id) ?? true
+    });
+  }
+  for (const [key, layer] of Object.entries(legend.overlays ?? {})) {
+    const id = makeLayerId("overlay", key);
+    entries.push({
+      id,
+      kind: "overlay",
+      label: layer.label ?? key,
+      mask: layer.mask,
+      color: layer.rgb,
+      visible: visibility.get(id) ?? true
+    });
+  }
+  return entries;
+}
+function updateVisibilityFromLegend(legend, visibility) {
+  if (!legend) return;
+  for (const key of Object.keys(legend.biomes ?? {})) {
+    const id = makeLayerId("biome", key);
+    if (!visibility.has(id)) {
+      visibility.set(id, true);
+    }
+  }
+  for (const key of Object.keys(legend.overlays ?? {})) {
+    const id = makeLayerId("overlay", key);
+    if (!visibility.has(id)) {
+      visibility.set(id, true);
+    }
+  }
+}
+function createLayerBrowserStore(legend, initial) {
+  const visibility = /* @__PURE__ */ new Map();
+  if (initial?.biomes) {
+    for (const [key, value] of Object.entries(initial.biomes)) {
+      visibility.set(makeLayerId("biome", key), value);
+    }
+  }
+  if (initial?.overlays) {
+    for (const [key, value] of Object.entries(initial.overlays)) {
+      visibility.set(makeLayerId("overlay", key), value);
+    }
+  }
+  const state = {
+    legend,
+    entries: buildEntries(legend, visibility)
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  function emit() {
+    const snapshot = {
+      legend: state.legend,
+      entries: state.entries.map((entry) => ({ ...entry }))
+    };
+    listeners.forEach((listener) => listener(snapshot));
+  }
+  function setLegend(next) {
+    state.legend = next;
+    if (!state.legend) {
+      visibility.clear();
+      state.entries = [];
+      emit();
+      return;
+    }
+    updateVisibilityFromLegend(state.legend, visibility);
+    const nextEntries = buildEntries(state.legend, visibility);
+    const validIds = new Set(nextEntries.map((entry) => entry.id));
+    for (const key of Array.from(visibility.keys())) {
+      if (!validIds.has(key)) {
+        visibility.delete(key);
+      }
+    }
+    state.entries = nextEntries;
+    emit();
+  }
+  function setVisibility(id, visible) {
+    if (!state.entries.some((entry) => entry.id === id)) return;
+    visibility.set(id, visible);
+    state.entries = state.entries.map(
+      (entry) => entry.id === id ? { ...entry, visible } : entry
+    );
+    emit();
+  }
+  function toggleVisibility(id) {
+    const next = !(visibility.get(id) ?? true);
+    setVisibility(id, next);
+  }
+  function setAll(kind, visible) {
+    let mutated = false;
+    state.entries = state.entries.map((entry) => {
+      if (entry.kind !== kind) return entry;
+      mutated = true;
+      visibility.set(entry.id, visible);
+      return { ...entry, visible };
+    });
+    if (mutated) {
+      emit();
+    }
+  }
+  function getLayerToggles() {
+    const toggles = defaultLayerToggles();
+    if (!state.legend) return toggles;
+    for (const [key] of Object.entries(state.legend.biomes ?? {})) {
+      const id = makeLayerId("biome", key);
+      toggles.biomes[key] = visibility.get(id) ?? true;
+    }
+    for (const [key] of Object.entries(state.legend.overlays ?? {})) {
+      const id = makeLayerId("overlay", key);
+      toggles.overlays[key] = visibility.get(id) ?? true;
+    }
+    return toggles;
+  }
+  function getState() {
+    return {
+      legend: state.legend,
+      entries: state.entries.map((entry) => ({ ...entry }))
+    };
+  }
+  function subscribe(listener) {
+    listeners.add(listener);
+    listener(getState());
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+  return {
+    getState,
+    subscribe,
+    setLegend,
+    setVisibility,
+    toggleVisibility,
+    setAll,
+    getLayerToggles
+  };
+}
+
+// src/editor/maskToolkit.ts
+function createMask(width, height, fill = 0) {
+  const data = new Uint8ClampedArray(width * height);
+  if (fill !== 0) data.fill(fill);
+  return { width, height, data };
+}
+function cloneMask(mask) {
+  return {
+    width: mask.width,
+    height: mask.height,
+    data: new Uint8ClampedArray(mask.data)
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function buffersEqual(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+function createMaskEditor(options) {
+  const mask = options.initialMask ? cloneMask(options.initialMask) : createMask(options.width, options.height);
+  let dirty = false;
+  let cleanCheckpoint = new Uint8ClampedArray(mask.data);
+  const undoStack = [];
+  const redoStack = [];
+  const listeners = /* @__PURE__ */ new Set();
+  function snapshot() {
+    return new Uint8ClampedArray(mask.data);
+  }
+  function updateDirtyFlag() {
+    dirty = !buffersEqual(mask.data, cleanCheckpoint);
+  }
+  function emit() {
+    const state = {
+      width: mask.width,
+      height: mask.height,
+      dirty,
+      undoCount: undoStack.length,
+      redoCount: redoStack.length
+    };
+    listeners.forEach((listener) => listener(state));
+  }
+  function drawCircle(cx, cy, radius, delta) {
+    const minX = clamp(Math.floor(cx - radius), 0, mask.width - 1);
+    const maxX = clamp(Math.ceil(cx + radius), 0, mask.width - 1);
+    const minY = clamp(Math.floor(cy - radius), 0, mask.height - 1);
+    const maxY = clamp(Math.ceil(cy + radius), 0, mask.height - 1);
+    const radiusSquared = radius * radius;
+    for (let y = minY; y <= maxY; y += 1) {
+      for (let x = minX; x <= maxX; x += 1) {
+        const dx = x - cx;
+        const dy = y - cy;
+        if (dx * dx + dy * dy > radiusSquared) continue;
+        const index = y * mask.width + x;
+        const next = clamp(mask.data[index] + delta, 0, 255);
+        mask.data[index] = next;
+      }
+    }
+  }
+  function drawStroke(stroke) {
+    if (!stroke.points.length) return;
+    const mode = stroke.mode ?? "paint";
+    const radius = Math.max(1, stroke.radius);
+    const strength = clamp(stroke.strength ?? 1, 0, 1);
+    const delta = Math.round(strength * 255) * (mode === "erase" ? -1 : 1);
+    const points = stroke.points;
+    drawCircle(points[0].x, points[0].y, radius, delta);
+    for (let i = 1; i < points.length; i += 1) {
+      const start = points[i - 1];
+      const end = points[i];
+      const dx = end.x - start.x;
+      const dy = end.y - start.y;
+      const distance = Math.hypot(dx, dy);
+      const step = Math.max(1, Math.ceil(distance / Math.max(1, radius * 0.5)));
+      for (let s = 1; s <= step; s += 1) {
+        const t = s / step;
+        const x = start.x + dx * t;
+        const y = start.y + dy * t;
+        drawCircle(x, y, radius, delta);
+      }
+    }
+  }
+  function applyStroke(stroke) {
+    if (!stroke.points.length) return;
+    undoStack.push(snapshot());
+    redoStack.length = 0;
+    drawStroke(stroke);
+    updateDirtyFlag();
+    emit();
+  }
+  function clear() {
+    undoStack.push(snapshot());
+    redoStack.length = 0;
+    mask.data.fill(0);
+    updateDirtyFlag();
+    emit();
+  }
+  function undo() {
+    if (!undoStack.length) return;
+    redoStack.push(snapshot());
+    const previous = undoStack.pop();
+    if (!previous) return;
+    mask.data.set(previous);
+    updateDirtyFlag();
+    emit();
+  }
+  function redo() {
+    if (!redoStack.length) return;
+    undoStack.push(snapshot());
+    const next = redoStack.pop();
+    if (!next) return;
+    mask.data.set(next);
+    updateDirtyFlag();
+    emit();
+  }
+  function exportMask() {
+    return cloneMask(mask);
+  }
+  function loadMask(next) {
+    undoStack.length = 0;
+    redoStack.length = 0;
+    mask.width = next.width;
+    mask.height = next.height;
+    mask.data = new Uint8ClampedArray(next.data);
+    cleanCheckpoint = new Uint8ClampedArray(mask.data);
+    dirty = false;
+    emit();
+  }
+  function markClean() {
+    cleanCheckpoint = new Uint8ClampedArray(mask.data);
+    dirty = false;
+    emit();
+  }
+  function getState() {
+    return {
+      width: mask.width,
+      height: mask.height,
+      dirty,
+      undoCount: undoStack.length,
+      redoCount: redoStack.length
+    };
+  }
+  function subscribe(listener) {
+    listeners.add(listener);
+    listener(getState());
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+  return {
+    getState,
+    subscribe,
+    applyStroke,
+    clear,
+    undo,
+    redo,
+    exportMask,
+    loadMask,
+    markClean
+  };
+}
+export {
+  applyHeightField,
+  buildRimMesh,
+  buildWynArchive,
+  createHeightSampler,
+  createLayerBrowserStore,
+  createMaskEditor,
+  createProjectStore,
+  createTerrainViewerHost,
+  createViewerOverlay,
+  getDefaultTerrainTheme,
+  initTerrainViewer,
+  loadWynArchive,
+  loadWynArchiveFromArrayBuffer,
+  loadWynArchiveFromFile,
+  resolveTerrainTheme,
+  sampleHeightValue
+};