gds-lens 0.1.0

package/dist/web/gds-lens.js

@@ -0,0 +1,4705 @@
+(() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __esm = (fn, res, err) => function __init() {
+    if (err) throw err[0];
+    try {
+      return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+    } catch (e) {
+      throw err = [e], e;
+    }
+  };
+  var __export = (target2, all) => {
+    for (var name in all)
+      __defProp(target2, name, { get: all[name], enumerable: true });
+  };
+
+  // src/mount-target.js
+  function setMountTarget(element) {
+    target = element;
+  }
+  function takeMountTarget() {
+    const element = target;
+    target = null;
+    return element;
+  }
+  var target;
+  var init_mount_target = __esm({
+    "src/mount-target.js"() {
+      target = null;
+    }
+  });
+
+  // src/cell-search.js
+  function rankCellMatches(cells, query) {
+    const needle = String(query).trim().toLowerCase();
+    if (!needle) return [];
+    const exact = [];
+    const prefix = [];
+    const rest = [];
+    for (let i = 0; i < cells.length; i++) {
+      const name = cells[i] && typeof cells[i].name === "string" ? cells[i].name : "";
+      const at = name.toLowerCase().indexOf(needle);
+      if (at < 0) continue;
+      if (name.length === needle.length) exact.push(i);
+      else if (at === 0) prefix.push(i);
+      else rest.push(i);
+    }
+    return exact.concat(prefix, rest);
+  }
+  function cellPathToTarget(cells, roots, target2, maxDepth) {
+    if (!cells || !cells[target2]) return null;
+    const limit = maxDepth > 0 ? maxDepth : 1;
+    const failed = /* @__PURE__ */ new Set();
+    const path = [];
+    function walk(index, depth) {
+      path.push(index);
+      if (index === target2) return true;
+      if (depth + 1 < limit && !failed.has(index)) {
+        const refs = cells[index] && cells[index].refs || [];
+        for (const ref of refs) {
+          if (!cells[ref.cell]) continue;
+          if (walk(ref.cell, depth + 1)) return true;
+        }
+      }
+      path.pop();
+      failed.add(index);
+      return false;
+    }
+    for (const root of roots || []) {
+      if (!cells[root]) continue;
+      if (walk(root, 0)) return path;
+      path.length = 0;
+    }
+    return null;
+  }
+  var init_cell_search = __esm({
+    "src/cell-search.js"() {
+    }
+  });
+
+  // src/marker-parsers.js
+  function sniffMarkerFormat(text) {
+    if (typeof text !== "string" || text.length === 0) return null;
+    let t = text;
+    if (t.charCodeAt(0) === 65279) t = t.slice(1);
+    t = t.replace(/^\s+/, "");
+    if (t.startsWith("<")) {
+      return t.slice(0, 2048).includes("<report-database") ? "lyrdb" : null;
+    }
+    const head = [];
+    for (const raw of t.slice(0, 8192).split("\n")) {
+      const line = raw.replace(/\r$/, "").trim();
+      if (line === "" || line.startsWith("//")) continue;
+      head.push(line);
+      if (head.length === 3) break;
+    }
+    const header = /^(\S+)\s+(\d+(?:\.\d+)?(?:[eE][-+]?\d+)?)$/.exec(head[0] || "");
+    if (!header) return null;
+    const resolution = parseFloat(header[2]);
+    if (!(resolution >= 1e-3 && resolution <= 1e6)) return null;
+    if (head.length < 3) return "drc";
+    return /^\d+\s+\d+\s+\d+(\s|$)/.test(head[2]) ? "drc" : null;
+  }
+  function parsePointList(text) {
+    const cleaned = text.trim().replace(/^\(/, "").replace(/\)$/, "").trim();
+    if (cleaned === "") return new Float64Array(0);
+    const parts = cleaned.split(";");
+    const pts = new Float64Array(parts.length * 2);
+    for (let i = 0; i < parts.length; i++) {
+      const xy = parts[i].split(",");
+      if (xy.length !== 2) throw new Error(`bad point "${parts[i].trim()}"`);
+      const x = parseFloat(xy[0]);
+      const y = parseFloat(xy[1]);
+      if (!isFinite(x) || !isFinite(y)) throw new Error(`bad point "${parts[i].trim()}"`);
+      pts[i * 2] = x;
+      pts[i * 2 + 1] = y;
+    }
+    return pts;
+  }
+  function parseLyrdbValue(raw, item, unknownTypes) {
+    const text = raw.replace(/\s+/g, " ").trim();
+    if (text === "") return "";
+    const m = /^([A-Za-z_][A-Za-z0-9_-]*)\s*:\s*([\s\S]*)$/.exec(text);
+    if (!m) return text;
+    const type = m[1].toLowerCase();
+    const body = m[2].trim();
+    try {
+      if (type === "box") {
+        const p = parsePointList(body);
+        if (p.length !== 4) throw new Error("box needs 2 points");
+        const l = Math.min(p[0], p[2]);
+        const r = Math.max(p[0], p[2]);
+        const b = Math.min(p[1], p[3]);
+        const t = Math.max(p[1], p[3]);
+        item.polygons.push(Float64Array.from([l, b, r, b, r, t, l, t]));
+        return "";
+      }
+      if (type === "polygon") {
+        const inner = body.replace(/^\(/, "").replace(/\)$/, "");
+        for (const ringText of inner.split("/")) {
+          const ring = parsePointList(ringText);
+          if (ring.length >= 6) item.polygons.push(ring);
+        }
+        return "";
+      }
+      if (type === "edge") {
+        const p = parsePointList(body);
+        if (p.length !== 4) throw new Error("edge needs 2 points");
+        item.edges.push(p[0], p[1], p[2], p[3]);
+        return "";
+      }
+      if (type === "edge-pair") {
+        const mm = /\(([^)]*)\)\s*[/|]\s*\(([^)]*)\)/.exec(body);
+        if (!mm) throw new Error("malformed edge-pair");
+        for (const part of [mm[1], mm[2]]) {
+          const p = parsePointList(part);
+          if (p.length !== 4) throw new Error("edge-pair edge needs 2 points");
+          item.edges.push(p[0], p[1], p[2], p[3]);
+        }
+        return "";
+      }
+    } catch {
+      return text;
+    }
+    unknownTypes.add(type);
+    return text;
+  }
+  function computeItemBBox(item) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    const eat = (arr) => {
+      for (let i = 0; i + 1 < arr.length; i += 2) {
+        if (arr[i] < minX) minX = arr[i];
+        if (arr[i] > maxX) maxX = arr[i];
+        if (arr[i + 1] < minY) minY = arr[i + 1];
+        if (arr[i + 1] > maxY) maxY = arr[i + 1];
+      }
+    };
+    for (const ring of item.polygons) eat(ring);
+    eat(item.edges);
+    if (minX > maxX) return null;
+    return { minX, minY, maxX, maxY };
+  }
+  function finalizeModel(model) {
+    let id = 0;
+    for (const cat of model.categories) {
+      for (const item of cat.items) {
+        item.id = id++;
+        if (!(item.edges instanceof Float64Array)) item.edges = Float64Array.from(item.edges);
+      }
+    }
+    return model;
+  }
+  function parseLyrdb(text, domParserCtor) {
+    const doc = new domParserCtor().parseFromString(text, "text/xml");
+    const root = doc && doc.documentElement;
+    if (!root || root.nodeName !== "report-database") {
+      throw new Error("not a .lyrdb report database (no <report-database> root)");
+    }
+    const childElements = (node, name) => {
+      const out = [];
+      for (let c = node.firstChild; c; c = c.nextSibling) {
+        if (c.nodeType === 1 && c.nodeName === name) out.push(c);
+      }
+      return out;
+    };
+    const childText = (node, name) => {
+      const els2 = childElements(node, name);
+      return els2.length ? els2[0].textContent || "" : null;
+    };
+    const topCell = (childText(root, "top-cell") || "").trim();
+    const warnings = [];
+    const model = { topCell, warnings, categories: [] };
+    const catByPath = /* @__PURE__ */ new Map();
+    const ensureCategory = (path, description) => {
+      let cat = catByPath.get(path);
+      if (!cat) {
+        cat = { name: path, description: description || "", items: [] };
+        catByPath.set(path, cat);
+        model.categories.push(cat);
+      } else if (description && !cat.description) {
+        cat.description = description;
+      }
+      return cat;
+    };
+    const walkCategories = (categoriesEl, prefix) => {
+      for (const catEl of childElements(categoriesEl, "category")) {
+        const name = (childText(catEl, "name") || "").trim();
+        if (!name) continue;
+        const path = prefix ? prefix + "." + name : name;
+        ensureCategory(path, (childText(catEl, "description") || "").trim());
+        for (const sub of childElements(catEl, "categories")) walkCategories(sub, path);
+      }
+    };
+    for (const catsEl of childElements(root, "categories")) walkCategories(catsEl, "");
+    let nonTopCount = 0;
+    const unknownTypes = /* @__PURE__ */ new Set();
+    for (const itemsEl of childElements(root, "items")) {
+      for (const itemEl of childElements(itemsEl, "item")) {
+        let catRef = (childText(itemEl, "category") || "").trim().replace(/^'+|'+$/g, "");
+        if (!catRef) catRef = "(uncategorized)";
+        const cat = ensureCategory(catRef, "");
+        const item = { id: -1, label: String(cat.items.length + 1), note: "", polygons: [], edges: [], bbox: null };
+        const notes = [];
+        const cellRef = (childText(itemEl, "cell") || "").trim();
+        if (cellRef) {
+          const baseCell = cellRef.split(":")[0];
+          if (topCell && baseCell !== topCell || cellRef.includes(":")) {
+            nonTopCount++;
+            notes.push("cell " + cellRef);
+          }
+        }
+        const mult = parseInt((childText(itemEl, "multiplicity") || "").trim(), 10);
+        if (mult > 1) notes.push("\xD7" + mult);
+        for (const valuesEl of childElements(itemEl, "values")) {
+          for (const valueEl of childElements(valuesEl, "value")) {
+            const note = parseLyrdbValue(valueEl.textContent || "", item, unknownTypes);
+            if (note) notes.push(note);
+          }
+        }
+        item.note = notes.join(" \xB7 ");
+        item.bbox = computeItemBBox(item);
+        cat.items.push(item);
+      }
+    }
+    if (nonTopCount > 0) {
+      warnings.push(nonTopCount + " marker(s) reference non-top cells; positions may be wrong");
+    }
+    if (unknownTypes.size > 0) {
+      warnings.push("values of unsupported type shown as text only: " + Array.from(unknownTypes).join(", "));
+    }
+    return finalizeModel(model);
+  }
+  function parseDrcAscii(text) {
+    if (text.charCodeAt(0) === 65279) text = text.slice(1);
+    const lines = text.split(/\r?\n/);
+    const warnings = [];
+    const model = { topCell: "", warnings, categories: [] };
+    let i = 0;
+    const peek = () => {
+      while (i < lines.length) {
+        const t = lines[i].trim();
+        if (t !== "" && !t.startsWith("//")) return lines[i];
+        i++;
+      }
+      return null;
+    };
+    const take = () => {
+      const line = peek();
+      if (line !== null) i++;
+      return line;
+    };
+    const headerLine = peek();
+    const header = /^(\S+)\s+(\d+(?:\.\d+)?(?:[eE][-+]?\d+)?)$/.exec((headerLine || "").trim());
+    if (!header) throw new Error("not a ASCII DRC results database (bad header line)");
+    model.topCell = header[1];
+    const resolution = parseFloat(header[2]);
+    if (!(resolution >= 1e-3 && resolution <= 1e6)) throw new Error("bad precision in ASCII DRC header");
+    i++;
+    const countsRe = /^(\d+)\s+(\d+)(?:\s+(\d+))?(?:\s+\S.*)?$/;
+    const recordRe = /^([pePE])\s+(\d+)\s+(\d+)\s*(\S.*)?$/;
+    const numberRe = /^-?\d+(?:\.\d+)?(?:[eE][-+]?\d+)?$/;
+    const waiverRe = /^WE(\d+)\s*(.*)$/;
+    const cnRe = /^CN\s+(\S+)((?:\s+[cC])?)((?:\s+-?\d+){6})?\s*$/;
+    const propRe = /^([A-Za-z_]\w*)\s+(-?\d+(?:\.\d+)?(?:[eE][-+]?\d+)?)\s*$/;
+    const lineNumbers = (line) => {
+      const parts = line.trim().split(/\s+/);
+      for (const p of parts) if (!numberRe.test(p)) return null;
+      return parts;
+    };
+    let unsupportedProps = 0;
+    let cellRefCount = 0;
+    let strayCoords = 0;
+    let pendingName = null;
+    while (true) {
+      let name = pendingName;
+      pendingName = null;
+      if (name === null) {
+        const line = take();
+        if (line === null) break;
+        name = line;
+      }
+      if (lineNumbers(name.trim())) {
+        strayCoords++;
+        continue;
+      }
+      name = name.trim().replace(/\.$/, "");
+      const cat = { name, description: "", items: [] };
+      model.categories.push(cat);
+      let resultCount = null;
+      let descCount = 0;
+      const next = peek();
+      const counts = next !== null && !recordRe.test(next.trim()) ? countsRe.exec(next.trim()) : null;
+      if (counts) {
+        i++;
+        resultCount = parseInt(counts[1], 10);
+        descCount = counts[3] === void 0 ? 0 : parseInt(counts[3], 10);
+      } else if (next !== null && !recordRe.test(next.trim())) {
+        warnings.push(`${name}: no counts line after the check name`);
+      }
+      const waivers = /* @__PURE__ */ new Map();
+      const descParts = [];
+      for (let d = 0; d < descCount; d++) {
+        const line = take();
+        if (line === null) {
+          warnings.push(`${name}: file ended inside the description block`);
+          break;
+        }
+        const trimmed = line.trim();
+        if (recordRe.test(trimmed)) {
+          i--;
+          warnings.push(`${name}: description count ${descCount} overruns the results`);
+          break;
+        }
+        const we = waiverRe.exec(trimmed);
+        if (we) {
+          const n = parseInt(we[1], 10);
+          if (!waivers.has(n)) waivers.set(n, []);
+          else waivers.get(n).push(we[2]);
+          continue;
+        }
+        descParts.push(trimmed.startsWith('"') ? trimmed.replace(/^"/, "").replace(/"$/, "") : line.replace(/\s+$/, ""));
+      }
+      cat.description = descParts.join("\n");
+      let cellName = "";
+      let xf = null;
+      let shape = 0;
+      while (resultCount === null || shape < resultCount) {
+        const line = take();
+        if (line === null) {
+          if (resultCount !== null && shape < resultCount) {
+            warnings.push(`${name}: file ended after ${shape} of ${resultCount} result(s)`);
+          }
+          break;
+        }
+        const rec = recordRe.exec(line.trim());
+        if (!rec) {
+          if (lineNumbers(line.trim())) {
+            strayCoords++;
+            continue;
+          }
+          if (resultCount !== null && shape < resultCount) {
+            warnings.push(`${name}: results ended after ${shape} of ${resultCount}; continuing with the next check`);
+          }
+          pendingName = line;
+          break;
+        }
+        const kind = rec[1].toLowerCase();
+        const ordinal = rec[2];
+        const count = parseInt(rec[3], 10);
+        const item = {
+          id: -1,
+          label: `${kind} ${ordinal}`,
+          note: "",
+          polygons: [],
+          edges: [],
+          bbox: null,
+          waived: false
+        };
+        const notes = [];
+        if (rec[4]) notes.push(rec[4].trim());
+        while (true) {
+          const propLine = peek();
+          if (propLine === null) break;
+          const trimmed = propLine.trim();
+          if (lineNumbers(trimmed) || recordRe.test(trimmed)) break;
+          const cn = cnRe.exec(trimmed);
+          if (cn) {
+            i++;
+            cellName = cn[1];
+            const m = cn[3] ? cn[3].trim().split(/\s+/).map(Number) : [1, 0, 0, 1, 0, 0];
+            xf = cn[2].trim() === "" ? null : { m11: m[0], m21: m[1], m12: m[2], m22: m[3], tx: m[4], ty: m[5] };
+            continue;
+          }
+          const prop = propRe.exec(trimmed);
+          if (prop) {
+            i++;
+            notes.push(`${prop[1]}=${prop[2]}`);
+            continue;
+          }
+          if (/^[A-Za-z_]/.test(trimmed)) {
+            i++;
+            unsupportedProps++;
+            continue;
+          }
+          break;
+        }
+        if (cellName && cellName !== model.topCell) {
+          cellRefCount++;
+          notes.push("cell " + cellName);
+        }
+        const wanted = kind === "p" ? count * 2 : count * 4;
+        const nums = [];
+        while (nums.length < wanted) {
+          const vline = peek();
+          if (vline === null) break;
+          const parts = lineNumbers(vline.trim());
+          if (!parts) break;
+          i++;
+          for (const p of parts) nums.push(parseFloat(p));
+        }
+        if (nums.length < wanted) {
+          warnings.push(
+            `${name} ${kind} ${ordinal}: ${nums.length / 2} of ${kind === "p" ? count : count * 2} point(s) present`
+          );
+        }
+        const mapX = xf ? (x, y) => (xf.m11 * x + xf.m12 * y + xf.tx) / resolution : (x) => x / resolution;
+        const mapY = xf ? (x, y) => (xf.m21 * x + xf.m22 * y + xf.ty) / resolution : (x, y) => y / resolution;
+        if (kind === "p") {
+          const usable = Math.floor(nums.length / 2) * 2;
+          if (usable >= 6) {
+            const ring = new Float64Array(usable);
+            for (let k = 0; k < usable; k += 2) {
+              ring[k] = mapX(nums[k], nums[k + 1]);
+              ring[k + 1] = mapY(nums[k], nums[k + 1]);
+            }
+            item.polygons.push(ring);
+          }
+        } else {
+          const usable = Math.floor(nums.length / 4) * 4;
+          for (let k = 0; k < usable; k += 2) {
+            item.edges.push(mapX(nums[k], nums[k + 1]), mapY(nums[k], nums[k + 1]));
+          }
+        }
+        const waiver = waivers.get(shape);
+        if (waiver) {
+          item.waived = true;
+          notes.push(waiver.length ? "waived: " + waiver.join(" ") : "waived");
+        }
+        item.note = notes.join(" \xB7 ");
+        item.bbox = computeItemBBox(item);
+        cat.items.push(item);
+        shape++;
+      }
+    }
+    if (cellRefCount > 0) {
+      warnings.push(cellRefCount + " marker(s) placed in cells other than " + model.topCell);
+    }
+    if (unsupportedProps > 0) {
+      warnings.push(unsupportedProps + " unsupported per-result property record(s) ignored");
+    }
+    if (strayCoords > 0) {
+      warnings.push(strayCoords + " coordinate line(s) past the declared point counts ignored");
+    }
+    return finalizeModel(model);
+  }
+  function parseMarkerFile(text, domParserCtor) {
+    const format = sniffMarkerFormat(text);
+    if (format === "lyrdb") return parseLyrdb(text, domParserCtor);
+    if (format === "drc") return parseDrcAscii(text);
+    throw new Error("Unrecognized marker file format (expected .lyrdb XML or ASCII DRC results)");
+  }
+  function flattenMarkerModel(model) {
+    const categories = [];
+    let itemCount = 0;
+    let ringCount = 0;
+    let ringVertCount = 0;
+    let edgeSegCount = 0;
+    for (const cat of model.categories) {
+      categories.push({ itemStart: itemCount, itemCount: cat.items.length });
+      for (const item of cat.items) {
+        itemCount++;
+        for (const ring2 of item.polygons) {
+          ringCount++;
+          ringVertCount += ring2.length / 2;
+        }
+        edgeSegCount += Math.floor(item.edges.length / 4);
+      }
+    }
+    const itemCategory = new Int32Array(itemCount);
+    const itemBBoxes = new Float32Array(itemCount * 4);
+    const polyVerts = new Float32Array(ringVertCount * 2);
+    const polyVertCounts = new Uint32Array(ringCount);
+    const polyItemIds = new Uint32Array(ringCount);
+    const edgeVerts = new Float32Array(edgeSegCount * 4);
+    const edgeItemIds = new Uint32Array(edgeSegCount);
+    let ring = 0;
+    let vert = 0;
+    let seg = 0;
+    model.categories.forEach((cat, ci) => {
+      for (const item of cat.items) {
+        itemCategory[item.id] = ci;
+        const bb = item.bbox;
+        itemBBoxes.set(bb ? [bb.minX, bb.minY, bb.maxX, bb.maxY] : [0, 0, -1, -1], item.id * 4);
+        for (const r of item.polygons) {
+          polyVerts.set(r, vert * 2);
+          polyVertCounts[ring] = r.length / 2;
+          polyItemIds[ring] = item.id;
+          vert += r.length / 2;
+          ring++;
+        }
+        const segs = Math.floor(item.edges.length / 4);
+        edgeVerts.set(item.edges.subarray(0, segs * 4), seg * 4);
+        for (let k = 0; k < segs; k++) edgeItemIds[seg + k] = item.id;
+        seg += segs;
+      }
+    });
+    return { categories, itemCategory, itemBBoxes, polyVerts, polyVertCounts, polyItemIds, edgeVerts, edgeItemIds };
+  }
+  var init_marker_parsers = __esm({
+    "src/marker-parsers.js"() {
+      "use strict";
+    }
+  });
+
+  // src/load-errors.js
+  function describeLoadFailure(err, prefix) {
+    const text = err && err.message ? err.message : String(err);
+    if (OOM_PATTERN.test(text)) return `${OOM_MESSAGE}
+
+(${text})`;
+    return prefix ? `${prefix}: ${text}` : text;
+  }
+  function describeDecodeFailure(result) {
+    if (!result || result.ok) return "";
+    if (result.reason === "too-large") {
+      const gb = (result.limit / (1024 * 1024 * 1024)).toFixed(1);
+      const claimed = result.storedSize ? ` The file's own trailer claims ${(result.storedSize / (1024 * 1024)).toFixed(0)} MB uncompressed.` : "";
+      return `This compressed layout is too large to expand.
+
+Expanding stopped at the ${gb} GB limit.${claimed} The viewer parses layouts in a 32-bit WebAssembly module, so the expanded file and the geometry built from it both have to fit in one 4 GB address space. An uncompressed copy of the same design will not help; a design that reuses cells rather than flattening them will.`;
+    }
+    return `This layout looks gzipped, but the compressed data could not be read.
+
+Usually a truncated or half-written file -- a copy that was interrupted, or a download that stopped early. (${result.detail})`;
+  }
+  var OOM_PATTERN, OOM_MESSAGE;
+  var init_load_errors = __esm({
+    "src/load-errors.js"() {
+      OOM_PATTERN = /memory access out of bounds|Cannot enlarge memory|Aborted\(|out of memory|Array buffer allocation failed|Invalid (typed )?array length/i;
+      OOM_MESSAGE = "Out of memory: this layout is too large to open.\n\nThe viewer parses layouts in a 32-bit WebAssembly module, so the whole flattened design has to fit in 4 GB. Layouts that reuse cells (arrays and repeated placements) go much further than fully flattened ones, because a repeated cell is drawn as GPU instances instead of being copied for every placement.";
+    }
+  });
+
+  // src/layout-bytes.js
+  function looksGzipped(bytes) {
+    return !!bytes && bytes.length >= 2 && bytes[0] === GZIP_ID1 && bytes[1] === GZIP_ID2;
+  }
+  function gzipStoredSize(bytes) {
+    if (!bytes || bytes.length < GZIP_MIN_BYTES) return null;
+    const end = bytes.length;
+    return bytes[end - 4] + bytes[end - 3] * 256 + bytes[end - 2] * 65536 + bytes[end - 1] * 16777216;
+  }
+  async function gunzip(bytes, cap) {
+    const stream = new DecompressionStream("gzip");
+    const writer = stream.writable.getWriter();
+    const pump = writer.write(bytes).then(() => writer.close()).catch(() => {
+    });
+    const reader = stream.readable.getReader();
+    const chunks = [];
+    let total = 0;
+    for (; ; ) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      total += value.byteLength;
+      if (total > cap) {
+        await reader.cancel();
+        await pump;
+        const err = new Error(`expands past the ${cap} byte limit`);
+        err.tooLarge = true;
+        throw err;
+      }
+      chunks.push(value);
+    }
+    await pump;
+    if (chunks.length === 1) return chunks[0];
+    const out = new Uint8Array(total);
+    let at = 0;
+    for (const chunk of chunks) {
+      out.set(chunk, at);
+      at += chunk.byteLength;
+    }
+    return out;
+  }
+  async function decodeLayoutBytes(bytes, maxBytes) {
+    if (!looksGzipped(bytes)) return { ok: true, bytes, gzipped: false, storedSize: null };
+    const storedSize = gzipStoredSize(bytes);
+    const cap = Number.isFinite(maxBytes) ? maxBytes : Infinity;
+    try {
+      return { ok: true, bytes: await gunzip(bytes, cap), gzipped: true, storedSize };
+    } catch (err) {
+      return {
+        ok: false,
+        reason: err && err.tooLarge ? "too-large" : "corrupt",
+        storedSize,
+        // Reported back rather than left for the caller to remember: it is
+        // the one number a "too large" message needs, and the caller that
+        // passed it is not always the one wording the failure.
+        limit: cap,
+        detail: err && err.message ? err.message : String(err)
+      };
+    }
+  }
+  var GZIP_ID1, GZIP_ID2, GZIP_MIN_BYTES;
+  var init_layout_bytes = __esm({
+    "src/layout-bytes.js"() {
+      "use strict";
+      GZIP_ID1 = 31;
+      GZIP_ID2 = 139;
+      GZIP_MIN_BYTES = 18;
+    }
+  });
+
+  // src/engine-source.js
+  function loadGdstkFactory() {
+    return Promise.resolve(globalThis.createGdstkModule);
+  }
+  var workerBundle;
+  var init_engine_source = __esm({
+    "src/engine-source.js"() {
+      workerBundle = null;
+    }
+  });
+
+  // src/viewer-shell.html
+  var viewer_shell_default;
+  var init_viewer_shell = __esm({
+    "src/viewer-shell.html"() {
+      viewer_shell_default = `<!-- lil-gui mounts its panel here rather than at document.body, so the
+     whole control surface lives inside the shadow root. -->
+<div id="guiHost"></div>
+    <div id="loadingOverlay" role="status" aria-live="polite">
+        <div id="loadingBarTrack"><div id="loadingBarFill"></div></div>
+        <div id="loadingPhase">Loading layout...</div>
+        <div id="loadingPercent"></div>
+    </div>
+    <!-- role="alert" rather than a polite live region: this replaces the
+         view entirely, so it is the only thing left to read. -->
+    <div id="loadError" role="alert"></div>
+    <div id="reloadProgress" class="hidden" role="status" aria-live="polite">
+        <div id="reloadBarTrack"><div id="reloadBarFill"></div></div>
+        <div id="reloadLabel">Reloading...</div>
+    </div>
+    <div id="staleBanner" class="hidden" role="status">
+        <span id="staleText">A newer version of this file is on disk.</span>
+        <button id="staleReloadBtn" type="button">Reload</button>
+        <button id="staleAlwaysBtn" type="button" class="secondary"
+                title="Reload now, and automatically whenever this file changes from now on">Always</button>
+        <button id="staleDismiss" type="button" class="icon-only"
+                aria-label="Dismiss until the next change"
+                title="Dismiss until the next change">\u2715</button>
+    </div>
+    <!-- tabindex so the keyboard handlers in viewer.js are reachable without
+         a pointer; labelled because a bare <canvas> announces nothing. -->
+    <canvas id="glCanvas" tabindex="0" role="img"
+            aria-label="Layout view. Drag to pan, scroll to zoom."></canvas>
+
+    <!-- Cell hierarchy: rows are built by renderHierarchy in viewer.js from
+         the tree parseGdsToLayers hands back, lazily as branches open. -->
+    <div id="hierarchyPanel" class="hidden">
+        <div id="hierarchyHeader">
+            <span id="hierarchyTitle">Hierarchy</span>
+            <span id="hierarchyCount"></span>
+            <button id="hierarchyHide" type="button" class="icon-only"
+                aria-label="Hide the hierarchy tree"
+                title="Hide the hierarchy tree (H)">\u2715</button>
+        </div>
+        <!-- Find (see the search block in viewer.js): one box over two
+             haystacks, the design's cell names and its own TEXT labels.
+             Results take the tree's place while a query is up.
+
+             Collapsed by default, and folded away behind one row rather than
+             sitting open above the tree: the panel is here to browse the
+             hierarchy, and two more rows of chrome over it are two fewer rows
+             of the thing being browsed. "/" opens it and lands in the box, so
+             the fold costs nothing to whoever is actually searching. -->
+        <div id="hierarchyFind">
+            <button id="hierarchyFindToggle" type="button"
+                 aria-expanded="false" aria-controls="hierarchySearch"
+                 title="Find a cell by name, or a label by its text (/)">
+                <span id="hierarchyFindTwisty">\u25B8</span>
+                <span id="hierarchyFindLabel">Find</span>
+                <span id="hierarchySearchCount"></span>
+            </button>
+            <div id="hierarchySearch" class="hidden">
+                <input id="hierarchySearchInput" type="text" placeholder="cell name"
+                       spellcheck="false" autocomplete="off"
+                       title="Find a cell by name, or a label by its text (/ focuses this box)">
+                <div id="hierarchyScope">
+                    <button id="hierarchyScopeCells" type="button" aria-pressed="true"
+                            title="Search the design's cell names">Cells</button>
+                    <button id="hierarchyScopeLabels" type="button" aria-pressed="false"
+                            title="Search the layout's own TEXT labels">Labels</button>
+                </div>
+            </div>
+        </div>
+        <div id="hierarchyTree" role="tree" aria-label="Cell hierarchy"></div>
+        <div id="hierarchyResults" class="hidden" role="listbox" aria-label="Search results"></div>
+    </div>
+    <button id="hierarchyShowBtn" type="button" class="hidden"
+            aria-expanded="false" aria-controls="hierarchyPanel"
+            title="Show the design's cell hierarchy (H)">Hierarchy</button>
+
+    <div id="debugPanel" class="hidden">
+        <div id="debugPanelHeader">
+            <span>Debug tools</span>
+            <button id="debugCopyBtn" type="button">Copy log</button>
+        </div>
+        <div id="debugBody">
+            <!-- Engine readout, written from renderer.cpp (set_inner_html("ui", ...)). -->
+            <div id="ui"></div>
+            <div id="debugLog"></div>
+        </div>
+    </div>
+    <button id="debugToggleBtn" type="button"
+            aria-expanded="false" aria-controls="debugPanel">Debug tools</button>
+
+    <div id="viewReadout">
+        <div id="copyToast" class="hidden" role="status" aria-live="polite"></div>
+        <div id="scaleContainer">
+            <div id="scaleLabel">0 \u03BCm</div>
+            <div id="scaleBar" style="width: 100px;"></div>
+        </div>
+        <div id="coordReadout" class="hidden"></div>
+    </div>
+
+    <div id="measureLabels"></div>
+
+    <div id="canvasMenu" class="hidden" role="menu">
+        <button id="canvasMenuCopy" type="button" role="menuitem">
+            <span>Copy coordinate</span><span class="menu-value"></span>
+        </button>
+    </div>
+`;
+    }
+  });
+
+  // src/viewer.css
+  var viewer_default;
+  var init_viewer = __esm({
+    "src/viewer.css"() {
+      viewer_default = `        /* ---- Theme tokens ----
+           Every color in this file comes from here, because the viewer follows
+           the embedder's light/dark theme and each one needs a counterpart.
+           Dark is the default: it's what the page paints as before any script
+           runs, and it's the far more common editor theme.
+
+           The light values ride on a single .theme-light class, which viewer.js's
+           theme block sets: it asks the host which theme is current and falls
+           back to the OS preference when the host has no opinion (see
+           applyTheme there). An embedder can also just set the class itself.
+           The canvas is not covered by any of this -- what the renderer draws is
+           themed in renderer.cpp (see setTheme). */
+        :host {
+            --bg: #0c0c0d;
+            --fg: #ffffff;            /* ink over the canvas: scale bar, ruler readout */
+            --fg-dim: #a5a5a5;
+            --fg-faint: #808080;
+            --surface: #2a2a2c;       /* small chrome fills: bar tracks, buttons */
+            --surface-fg: #dddddd;
+            --scrim: rgba(0, 0, 0, 0.88);         /* debug panel, over the canvas */
+            --label-scrim: rgba(0, 0, 0, 0.75);   /* ruler readout, over geometry */
+            --chip-scrim: rgba(12, 12, 13, 0.85); /* reload chip, over geometry */
+            --border: #333333;
+            --border-strong: #555555;
+            --accent: #4a9eff;
+            --accent-fg: #06121f;     /* text on an --accent fill */
+            --accent-text: #cfe6ff;   /* --accent as text, on --chip-scrim */
+            --accent-border: #2a3f57;
+            --danger: #ff4d4d;
+            --danger-dim: #ff9a9a;
+            --select-bg: #5a1f1f;     /* selected marker's row */
+            --select-fg: #ffd9d9;
+            --error-bg: #2a1416;
+            --error-border: #7a2b2b;
+            --error-fg: #ffd9d9;
+            --warn-bg: #4a3410;       /* "newer version on disk" banner */
+            --warn-border: #7a5a1c;
+            --warn-border-strong: #a37a26;
+            --warn-fg: #ffe9c2;
+            --warn-fg-dim: #e5cfa4;
+            --warn-btn-fg: #fff6e5;
+            --log-fg: #7fff7f;
+            --log-err: #ff7f7f;
+            /* lil-gui's own palette (mapped onto its variable names below). */
+            --panel-bg: #1f1f1f;
+            --panel-fg: #ebebeb;
+            --panel-title-bg: #111111;
+            --panel-widget: #424242;
+            --panel-widget-hover: #4f4f4f;
+            --panel-widget-focus: #595959;
+        }
+        :host(.theme-light) {
+            --bg: #fafafb;
+            --fg: #17171a;
+            --fg-dim: #56565c;
+            --fg-faint: #6b6b73;      /* matches the dark side's contrast, not its lightness */
+            --surface: #e4e4e8;
+            --surface-fg: #2c2c2e;
+            --scrim: rgba(250, 250, 251, 0.93);
+            --label-scrim: rgba(255, 255, 255, 0.85);
+            --chip-scrim: rgba(255, 255, 255, 0.9);
+            --border: #d2d2d8;
+            --border-strong: #b4b4bc;
+            --accent: #1f6fd0;
+            --accent-fg: #ffffff;
+            --accent-text: #14538f;
+            --accent-border: #a8c8e8;
+            --danger: #b3261e;
+            --danger-dim: #d0574e;
+            --select-bg: #ffdcdc;
+            --select-fg: #7a1f1f;
+            --error-bg: #fdeceb;
+            --error-border: #dda3a0;
+            --error-fg: #7d201c;
+            --warn-bg: #fdf3d8;
+            --warn-border: #e0c07a;
+            --warn-border-strong: #c9a153;
+            --warn-fg: #5c431a;
+            --warn-fg-dim: #7d6231;
+            --warn-btn-fg: #3f2d0e;
+            --log-fg: #157f2a;
+            --log-err: #b3261e;
+            --panel-bg: #f4f4f6;
+            --panel-fg: #2c2c2e;
+            --panel-title-bg: #e4e4e8;
+            --panel-widget: #d8d8de;
+            --panel-widget-hover: #c8c8d0;
+            --panel-widget-focus: #babac2;
+        }
+        /* lil-gui's palette is its own set of custom properties, so the panel
+           themes by re-pointing those at the --panel-* tokens above rather
+           than by restyling any of its rows. Mapped here on .lil-gui rather
+           than on :root because lil-gui's own .lil-gui rule sets them, and a
+           rule matching the element itself beats an inherited value. (Source
+           order settles the tie: lil-gui inserts its stylesheet *before* the
+           first <style> already in <head> -- i.e. this one -- specifically so
+           page styles outrank its defaults.) */
+        .lil-gui {
+            --background-color: var(--panel-bg);
+            --text-color: var(--panel-fg);
+            --title-background-color: var(--panel-title-bg);
+            --title-text-color: var(--panel-fg);
+            --widget-color: var(--panel-widget);
+            --hover-color: var(--panel-widget-hover);
+            --focus-color: var(--panel-widget-focus);
+            --number-color: var(--accent);
+        }
+        /* A custom element is display:inline by default and would collapse to
+           zero height. The host owns the box; everything inside positions
+           against it rather than against the page. */
+        :host { display: block; position: relative; width: 100%; height: 100%; overflow: hidden;
+                background: var(--bg); user-select: none; color: var(--fg); }
+        canvas { width: 100%; height: 100%; display: block; }
+        /* The engine readout (polygon/label counts + the per-frame #renderStats
+           span, both written from renderer.cpp). It lives inside #debugPanel
+           rather than floating over the canvas on its own: it's debug-only
+           either way, and two separate debug surfaces meant the same command
+           lit up two different corners of the screen. */
+        #ui { width: 320px; flex: none; overflow-y: auto; padding: 6px 8px; border-right: 1px solid var(--border);
+              color: var(--fg-dim); font-family: monospace; font-size: 11px; line-height: 1.5; user-select: text; }
+        /* The debug entry point is hidden until the "GDSLens: Toggle Debug
+           Tools" command adds .debug to <body>. */
+        #debugToggleBtn { display: none; }
+        :host(.debug) #debugToggleBtn { display: block; }
+        /* Bottom-right stack of view readouts: the scale bar, with the
+           pointer's world coordinate under it. One anchored column rather than
+           two separately positioned boxes, so the coordinate row -- whose width
+           varies with the number in it -- can't drift into or away from the bar
+           above it. */
+        #viewReadout { position: absolute; bottom: 20px; right: 20px; z-index: 10; pointer-events: none;
+                       display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
+        #scaleContainer { font-family: monospace; font-size: 11px; color: var(--fg); text-align: center; }
+        /* Pointer coordinate, rewritten by update_coord_readout (renderer.cpp)
+           on every move and every camera change; .hidden while the pointer is
+           off the canvas. Unlike the scale bar it's a run of text over
+           arbitrary geometry, so it carries the same scrim the ruler label
+           does rather than relying on an outline. */
+        #coordReadout { font-family: monospace; font-size: 11px; color: var(--fg); background: var(--label-scrim);
+                        border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 6px;
+                        white-space: nowrap; }
+        #coordReadout.hidden { display: none; }
+        /* Confirmation that the canvas menu's Copy coordinate reached the
+           clipboard (see the contextmenu handler in viewer.js). Same scrim as
+           the readout it answers for. It sits first in the column on purpose:
+           #viewReadout is anchored by its bottom edge, so a line appearing at
+           the top leaves the scale bar and the coordinate exactly where they
+           were -- one added at the bottom would shove both up mid-read. */
+        #copyToast { font-family: monospace; font-size: 11px; color: var(--fg); background: var(--label-scrim);
+                     border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 6px;
+                     white-space: nowrap; }
+        #copyToast.hidden { display: none; }
+        /* Right-click menu on the canvas (see the contextmenu handler in
+           viewer.js). VS Code's own webview menu is suppressed for it -- the
+           preload bails out of showing one when the page has already called
+           preventDefault -- so this has to look like a menu on its own. It
+           borrows the panel's palette rather than the readouts' scrim: it sits
+           over the layout but it's chrome, not an annotation of what's under
+           it. Above the debug panel (z 41), since a menu is the most recent
+           thing the user asked for. */
+        #canvasMenu { position: absolute; z-index: 50; min-width: 190px; padding: 4px;
+                      background: var(--panel-bg); color: var(--panel-fg);
+                      border: 1px solid var(--border-strong); border-radius: 4px;
+                      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
+        #canvasMenu.hidden { display: none; }
+        #canvasMenu button { display: flex; align-items: baseline; gap: 14px; width: 100%;
+                             background: none; border: 0; border-radius: 3px; padding: 4px 8px;
+                             font-family: inherit; font-size: 12px; color: inherit;
+                             text-align: left; white-space: nowrap; cursor: pointer; }
+        #canvasMenu button:hover, #canvasMenu button:focus { background: var(--accent); color: var(--accent-fg); outline: none; }
+        /* The coordinate itself, shown in the readout's monospace so it reads as
+           the value being copied rather than as a menu shortcut. */
+        #canvasMenu .menu-value { margin-left: auto; font-family: monospace; font-size: 11px; color: var(--fg-dim); }
+        #canvasMenu button:hover .menu-value, #canvasMenu button:focus .menu-value { color: inherit; }
+        /* The bar is drawn in the ink color over an outline of the background,
+           so it stays readable whichever of the two it happens to sit on top of
+           (it floats over the geometry, not over a panel). */
+        #scaleBar { height: 4px; background: var(--fg); border: 1px solid var(--bg); margin-top: 4px; }
+        /* Ruler readouts: one .measure-label per ruler, created and
+           repositioned to its measurement's midpoint on every redraw by
+           update_measure_labels (renderer.cpp). The translate lifts each one
+           just above its line so it doesn't cover what's being measured.
+           #measureLabels is a plain (unpositioned) container, so the labels
+           inside it still position against the page the way the single one
+           used to. */
+        #measureLabels .measure-label { position: absolute; transform: translate(-50%, -130%); font-family: monospace; font-size: 11px; color: var(--fg); background: var(--label-scrim); border: 1px solid var(--border-strong); border-radius: 3px; padding: 3px 7px; text-align: center; line-height: 1.4; white-space: nowrap; z-index: 15; pointer-events: none; }
+        /* lil-gui floats its own panel only when it appends to document.body,
+           by adding .lil-auto-place (position:fixed, right:15px, z 1001). We
+           pass a container instead so the panel lives inside the shadow root,
+           which skips that class entirely -- so without this the panel is a
+           plain block in normal flow, spanning the full width and pushing the
+           canvas down. Positioning it here also fixes two things lil-gui's own
+           rule got wrong for a component: absolute rather than fixed, so the
+           panel stays inside the component's box instead of pinning itself to
+           the viewport when embedded in a page; and z-index below the loading
+           overlay (30) and debug panel (40) rather than lil-gui's 1001. */
+        #guiHost { position: absolute; top: 0; right: 15px; max-height: 100%; z-index: 20; display: flex; }
+        #guiHost > .lil-gui.lil-root { max-height: 100%; }
+        /* Checkbox rows (layer list + top-level toggles): lil-gui gives the
+           label a 45% min-width and no overflow handling, so a long name like
+           "250/74 \u2013 SIN_WG_S" would push into the checkbox column. Widen the
+           label (the checkbox needs nowhere near half the row) and cut it
+           character-level with an ellipsis. */
+        .lil-gui .lil-controller.lil-boolean > .lil-name { min-width: 78%; width: 78%; overflow: hidden; text-overflow: ellipsis; }
+        /* ---- Layer rows (see addLayerRow in viewer.js) ----
+           A layer row carries two more things than the plain boolean above: its
+           shape count and a solo button, both appended after lil-gui's own
+           name/widget pair. .lil-controller is already a flex row, so they only
+           need flex:none to sit at the right edge; the name gives up the width
+           they take (this rule follows the 78% one above deliberately -- same
+           specificity, so source order decides). */
+        .lil-gui .lil-controller.layer-row > .lil-name { min-width: 58%; width: 58%; }
+        .lil-gui .lil-controller.layer-row .layer-count { flex: none; padding-left: 4px;
+                                                          color: var(--fg-faint); font-size: 10px; }
+        .lil-gui .lil-controller.layer-row .layer-solo { flex: none; width: 16px; text-align: center;
+                                                         margin-left: 4px; border-radius: 2px;
+                                                         color: var(--fg-faint); font-size: 10px; cursor: pointer; }
+        .lil-gui .lil-controller.layer-row .layer-solo:hover { color: var(--fg); background: var(--panel-widget-hover); }
+        /* The soloed layer's own row, so it's clear which of the hidden
+           hundred is the one still on screen. */
+        .lil-gui .lil-controller.layer-row.layer-soloed .layer-solo { color: var(--accent-fg); background: var(--accent); }
+        /* Filter box at the top of the Layers folder. lil-gui styles the inputs
+           belonging to its own controllers; this one is hand-built, so it
+           borrows the same widget fill. */
+        .lil-gui .lil-controller.layer-filter-row input { width: 100%; box-sizing: border-box;
+                                                          font-family: inherit; font-size: var(--input-font-size);
+                                                          background: var(--panel-widget); color: var(--panel-fg);
+                                                          border: none; border-radius: var(--widget-border-radius);
+                                                          height: var(--widget-height); padding: 0 6px; }
+        .lil-gui .lil-controller.layer-filter-row input:focus { background: var(--panel-widget-focus); outline: none; }
+        /* Interaction-mode row (Pan | Measure), hand-built in viewer.js since
+           lil-gui has no segmented-control type. Because the row carries
+           lil-gui's own classes, its button theming (widget color, radius,
+           height, :hover/:active) already applies -- all that's left is
+           splitting the widget in two and filling in the selected mode. The
+           name column is narrower than lil-gui's 45% default to leave both
+           buttons a readable width. */
+        .lil-gui .lil-controller.mode-row .lil-name { min-width: 30%; }
+        .lil-gui .lil-controller.mode-row .mode-widget { gap: 4px; }
+        .lil-gui .lil-controller.mode-row .mode-widget button { flex: 1; }
+        /* :hover/:active spelled out too -- lil-gui's own button:hover rule
+           outranks a bare .mode-active, which would grey out the selected
+           mode as soon as the pointer crossed it. */
+        .lil-gui .lil-controller.mode-row .mode-widget button.mode-active,
+        .lil-gui .lil-controller.mode-row .mode-widget button.mode-active:hover,
+        .lil-gui .lil-controller.mode-row .mode-widget button.mode-active:active { background: var(--accent); color: var(--accent-fg); font-weight: bold; }
+        /* Loaded-.lyp chip: the row shows the filename with an \u2715 on the right
+           (injected by setLypChip in viewer.js) to unload it. */
+        .lil-gui .lil-controller.lyp-loaded { position: relative; }
+        .lil-gui .lil-controller.lyp-loaded .lil-name { padding-right: 22px; }
+        .lil-gui .lil-controller.lyp-loaded .lyp-unload { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--danger-dim); cursor: pointer; font-size: 12px; z-index: 5; }
+        .lil-gui .lil-controller.lyp-loaded .lyp-unload:hover { color: var(--danger); }
+        /* Saved-view rows (see renderNamedViews in viewer.js): a full-width
+           button that restores the view, with an \u2715 on the right that deletes
+           it -- the same shape as the loaded-file chips above, and the same
+           reason for spelling it out separately (lil-gui has no row that
+           carries a second action). */
+        .lil-gui .lil-controller.view-row { position: relative; }
+        .lil-gui .lil-controller.view-row .lil-name { padding-right: 22px; }
+        .lil-gui .lil-controller.view-row .view-delete { position: absolute; right: 8px; top: 50%;
+                                                         transform: translateY(-50%); color: var(--danger-dim);
+                                                         cursor: pointer; font-size: 12px; z-index: 5; }
+        .lil-gui .lil-controller.view-row .view-delete:hover { color: var(--danger); }
+        /* Marker browser (see renderMarkerBrowser in viewer.js): the selected
+           violation's row, and the disabled "\u2026 N more" overflow row. The row
+           is a full-width <button> in lil-gui, so tint the button itself
+           (!important also beats lil-gui's :hover/:active backgrounds). */
+        .lil-gui .lil-controller.marker-selected button { background: var(--select-bg) !important; }
+        .lil-gui .lil-controller.marker-selected .lil-name { color: var(--select-fg); }
+        .lil-gui .lil-controller.marker-more-row { opacity: 0.55; pointer-events: none; }
+        /* ---- Hierarchy tree (see renderHierarchy in viewer.js) ----
+           The design's cell tree, down the left edge. Like the lil-gui panel
+           on the right it floats over the canvas rather than taking width
+           from it: the canvas stays the full window, so nothing about the
+           renderer's sizing, hit-testing or camera has to know this panel
+           exists. It outranks both progress UIs (z 25/26) so a reload doesn't
+           draw its hairline bar across the tree, but stays under the
+           full-screen loading overlay (z 30) and the debug panel (z 40). */
+        #hierarchyPanel { position: absolute; top: 0; left: 0; bottom: 0; width: 260px; z-index: 27;
+                          box-sizing: border-box; display: flex; flex-direction: column;
+                          background: var(--scrim); border-right: 1px solid var(--border);
+                          font-family: monospace; font-size: 11px; color: var(--surface-fg); }
+        #hierarchyPanel.hidden { display: none; }
+        #hierarchyHeader { display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 8px;
+                           color: var(--fg-dim); border-bottom: 1px solid var(--border); }
+        #hierarchyTitle { flex: 1; }
+        #hierarchyCount { color: var(--fg-faint); }
+        /* Same icon-only treatment as #staleDismiss: a real button, styled
+           back down to the bare glyph it was before. */
+        #hierarchyHide { background: none; border: 0; font: inherit; color: inherit;
+                         cursor: pointer; opacity: 0.7; padding: 0 2px; }
+        #hierarchyHide:hover { opacity: 1; }
+        #hierarchyTree { flex: 1; overflow: auto; padding: 4px 0 8px; }
+        /* One row per node. The whole row frames its cell on click, so it's
+           the click target; only the left indent varies with depth (set
+           inline, since it's per-row). */
+        .hier-row { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 0;
+                    white-space: nowrap; cursor: pointer; }
+        .hier-row:hover { background: var(--surface); }
+        .hier-row.hier-selected, .hier-row.hier-selected:hover { background: var(--accent); color: var(--accent-fg); }
+        /* A cell with no geometry anywhere under it -- there's nothing to
+           frame, so the row only selects. */
+        .hier-row.hier-boxless { opacity: 0.55; cursor: default; }
+        .hier-twisty { flex: none; width: 12px; text-align: center; color: var(--fg-faint); }
+        /* flex + min-width:0 is what lets a long cell name actually truncate:
+           a flex item's default min-width is its content, and a cell name is
+           one unbreakable word, so without this the row grows and the panel
+           scrolls sideways instead. Taking the leftover width also pins the
+           placement count to the right edge. */
+        .hier-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+        /* Placement count ("\xD764"), shown only when the cell is placed more
+           than once by its parent. */
+        .hier-count { flex: none; color: var(--fg-faint); }
+        .hier-row.hier-selected .hier-twisty, .hier-row.hier-selected .hier-count { color: var(--accent-fg); }
+        .hier-children.hidden { display: none; }
+        /* ---- Find (see the search block in viewer.js) ----
+           Sits between the header and the tree: it's a way into the same
+           panel, not a second panel. One row while it's closed, which is how
+           it starts -- see the markup below for why -- opening to the box and
+           the scope pair. The pair gets its own row rather than sharing one
+           with the input: at 260px a field narrowed by two buttons is too
+           small to read a cell name in. */
+        #hierarchyFind { flex: none; border-bottom: 1px solid var(--border); }
+        /* The closed row. Styled like a tree row rather than like the panel
+           header, because that's what it is: something you click to open. */
+        #hierarchyFindToggle { display: flex; align-items: center; gap: 4px; padding: 3px 8px;
+                               color: var(--fg-dim); cursor: pointer; white-space: nowrap;
+                               /* A <button> now, for keyboard and screen readers: reset the
+                                  chrome and let it fill the row as the div did. */
+                               width: 100%; background: none; border: 0; font: inherit;
+                               text-align: left; }
+        #hierarchyFindToggle:hover { background: var(--surface); color: var(--fg); }
+        #hierarchyFindTwisty { flex: none; width: 12px; text-align: center; color: var(--fg-faint); }
+        #hierarchyFindLabel { flex: none; }
+        #hierarchySearch { padding: 0 8px 6px; display: flex; flex-direction: column; gap: 5px; }
+        #hierarchySearch.hidden { display: none; }
+        /* user-select is off for the page as a whole (dragging the canvas would
+           otherwise select the chrome over it), and that inherits into a text
+           field -- where it costs you selecting what you typed, and makes the
+           select() behind the "/" shortcut a no-op. */
+        #hierarchySearchInput { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 11px;
+                                background: var(--surface); color: var(--surface-fg);
+                                border: 1px solid var(--border-strong); border-radius: 3px;
+                                padding: 3px 6px; user-select: text; }
+        #hierarchySearchInput:focus { outline: none; border-color: var(--accent); }
+        #hierarchyScope { display: flex; gap: 4px; }
+        #hierarchyScope button { font-family: inherit; font-size: 10px; background: var(--surface);
+                                 color: var(--fg-dim); border: 1px solid var(--border-strong);
+                                 border-radius: 3px; padding: 1px 8px; cursor: pointer; }
+        #hierarchyScope button:hover { color: var(--fg); }
+        #hierarchyScope button.scope-active, #hierarchyScope button.scope-active:hover {
+            background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: bold; }
+        /* A design too large for a cell tree has no cell names on this side at
+           all (see the omitted case in renderHierarchy), so Cells has nothing
+           to search -- the button says so rather than returning nothing. */
+        #hierarchyScope button:disabled { opacity: 0.4; cursor: default; }
+        /* On the toggle row rather than beside the scope pair: it's the result
+           of the search, so it belongs next to the thing you'd click to get
+           back to it. Empty whenever the fold is closed, since closing clears
+           the query. */
+        #hierarchySearchCount { flex: 1; text-align: right; color: var(--fg-faint); overflow: hidden;
+                                text-overflow: ellipsis; }
+        /* Results replace the tree rather than stacking under it, so the panel
+           shows one list at a time; clearing the box brings the tree back with
+           its open branches untouched. */
+        #hierarchyResults { flex: 1; overflow: auto; padding: 4px 0 8px; }
+        #hierarchyResults.hidden, #hierarchyTree.hidden { display: none; }
+        /* A result row is the tree's row with the indent and twisty dropped and
+           a right-hand detail added (a cell's shape count, a label's layer). */
+        .find-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 8px;
+                    white-space: nowrap; cursor: pointer; }
+        .find-row:hover { background: var(--surface); }
+        .find-row.find-active, .find-row.find-active:hover { background: var(--accent); color: var(--accent-fg); }
+        .find-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+        .find-meta { flex: none; color: var(--fg-faint); font-size: 10px; }
+        .find-row.find-active .find-meta { color: var(--accent-fg); }
+        /* A cell no top cell reaches (a reference cycle, or one the tree's own
+           caps left out) has no path to open down to, so its row only says so. */
+        .find-row.find-unreachable { opacity: 0.55; cursor: default; }
+        #hierarchyResults .find-note { padding: 6px 10px; color: var(--fg-faint); white-space: normal; line-height: 1.5; }
+        /* Stand-in for a tree: no cells to show, or too many to describe. */
+        #hierarchyTree .hier-note { padding: 6px 10px; color: var(--fg-faint); white-space: normal; line-height: 1.5; }
+        /* Reopens the panel after it's been hidden; sits where the panel's own
+           header was. Hidden while the panel is open, and while there's no
+           tree to reopen (viewer.js adds .hidden for that). */
+        #hierarchyShowBtn { position: absolute; top: 8px; left: 8px; z-index: 27; font-family: monospace;
+                            font-size: 10px; background: var(--surface); color: var(--fg-dim);
+                            border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 8px;
+                            cursor: pointer; opacity: 0.6; }
+        #hierarchyShowBtn:hover { opacity: 1; }
+        #hierarchyShowBtn.hidden, :host(.hierarchy-open) #hierarchyShowBtn { display: none; }
+        /* Everything else anchored to the left edge starts after whichever of
+           the two is on screen -- the panel, or just the button that reopens
+           it (.hierarchy-available). The open rule comes second so it wins
+           when both classes are set. */
+        :host(.hierarchy-available) #staleBanner { left: 88px; }
+        :host(.hierarchy-open) #staleBanner { left: 268px; }
+        :host(.hierarchy-open) #debugToggleBtn { left: 268px; }
+        /* "Newer version on disk" header (see the fileChanged handler in
+           viewer.js). Sits above the lil-gui panel (z 20) but below the
+           loading overlay (z 30), since it's hidden while a load runs
+           anyway. */
+        /* Stops short of the right edge so it doesn't cover the lil-gui panel
+           (260px wide, top-right) that it outranks on z-index. */
+        #staleBanner { position: absolute; top: 0; left: 0; right: 276px; box-sizing: border-box; z-index: 25;
+                       display: flex; align-items: center; gap: 12px; padding: 7px 12px;
+                       font-family: monospace; font-size: 12px; color: var(--warn-fg);
+                       background: var(--warn-bg); border-bottom: 1px solid var(--warn-border); }
+        #staleBanner.hidden { display: none; }
+        #staleText { flex: 1; }
+        #staleBanner button { font-family: monospace; font-size: 11px; background: var(--warn-border); color: var(--warn-btn-fg);
+                              border: 1px solid var(--warn-border-strong); border-radius: 3px; padding: 3px 12px; cursor: pointer; }
+        #staleBanner button:hover { background: var(--warn-border-strong); }
+        /* Secondary next to Reload: same action plus a persisted setting, so it
+           reads as the quieter of the two. */
+        #staleBanner button.secondary { background: transparent; border-color: transparent;
+                                        color: var(--warn-fg-dim); padding: 3px 6px; }
+        #staleBanner button.secondary:hover { background: transparent; color: var(--warn-btn-fg); text-decoration: underline; }
+        /* An icon-only control: a real <button> for keyboard and screen
+           readers, styled back down to bare text. The reset is explicit
+           because #staleBanner button above is more specific than an id on its
+           own and would otherwise give this the Reload button's chrome. */
+        #staleBanner button#staleDismiss { background: none; border: 0; border-radius: 0;
+                                           font: inherit; color: inherit; cursor: pointer;
+                                           opacity: 0.7; padding: 0 2px; }
+        #staleBanner button#staleDismiss:hover { background: none; opacity: 1; }
+        #loadingOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-family: monospace; color: var(--fg-dim); background: var(--bg); z-index: 30; }
+        #loadingOverlay.hidden { display: none; }
+        #loadingBarTrack { width: 320px; height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden; }
+        #loadingBarFill { width: 0%; height: 100%; background: var(--accent); transition: width 0.15s ease-out; }
+        #loadingPhase { font-size: 12px; }
+        #loadingPercent { font-size: 11px; color: var(--fg-faint); }
+        /* The reload flavour of the same progress (see beginProgress in
+           viewer.js): a hairline bar along the top edge plus a small chip,
+           over a viewport that keeps showing the geometry already loaded.
+           Restoring the camera across a reload is pointless if the view is
+           blacked out while it happens. pointer-events stay off so a drag
+           that starts under the chip still pans the canvas. */
+        #reloadProgress { position: absolute; top: 0; left: 0; right: 0; z-index: 26; pointer-events: none; }
+        #reloadProgress.hidden { display: none; }
+        #reloadBarTrack { height: 2px; background: var(--surface); }
+        #reloadBarFill { width: 0%; height: 100%; background: var(--accent); transition: width 0.15s ease-out; }
+        #reloadLabel { display: inline-block; margin: 6px 0 0 10px; padding: 3px 8px; font-family: monospace;
+                       font-size: 11px; color: var(--accent-text); background: var(--chip-scrim);
+                       border: 1px solid var(--accent-border); border-radius: 3px; }
+        /* Load failures. This is deliberately NOT part of the debug tools:
+           #ui above is display:none unless the debug command is run, so an
+           error written only there is invisible to a normal user. Empty means
+           no error, so setting/clearing the text is all it takes to show or
+           hide the panel. */
+        #loadError { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 520px; z-index: 35; padding: 16px 20px; background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 5px; font-family: monospace; font-size: 12px; line-height: 1.55; color: var(--error-fg); white-space: pre-line; user-select: text; }
+        #loadError:empty { display: none; }
+        #debugPanel { position: absolute; bottom: 0; left: 0; width: 100%; max-height: 240px; z-index: 40; background: var(--scrim); border-top: 1px solid var(--border); display: flex; flex-direction: column; }
+        #debugPanel.hidden { display: none; }
+        #debugPanelHeader { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; font-family: monospace; font-size: 11px; color: var(--fg-dim); border-bottom: 1px solid var(--border); }
+        #debugPanelHeader button { font-family: monospace; font-size: 10px; background: var(--surface); color: var(--surface-fg); border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 8px; cursor: pointer; }
+        /* Readout beside the log rather than above it: the panel is capped at
+           240px tall, and stacking them would leave the log a few lines. */
+        #debugBody { display: flex; flex: 1; min-height: 0; }
+        #debugLog { flex: 1; overflow-y: auto; padding: 6px 8px; font-family: monospace; font-size: 10px; color: var(--log-fg); white-space: pre-wrap; word-break: break-all; user-select: text; }
+        #debugLog .err { color: var(--log-err); }
+        #debugToggleBtn { position: absolute; bottom: 8px; left: 8px; z-index: 41; font-family: monospace; font-size: 10px; background: var(--surface); color: var(--fg-dim); border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 8px; cursor: pointer; opacity: 0.6; }
+        #debugToggleBtn:hover { opacity: 1; }
+
+        /* The progress bars are the only motion in the viewer. Someone who has
+           asked the OS for less of it still needs the bar to show progress --
+           so it still moves, it just stops easing there. */
+        @media (prefers-reduced-motion: reduce) {
+            #loadingBarFill, #reloadBarFill { transition: none; }
+        }
+`;
+    }
+  });
+
+  // node_modules/lil-gui/dist/lil-gui.esm.js
+  function normalizeColorString(string) {
+    let match, result;
+    if (match = string.match(/(#|0x)?([a-f0-9]{6})/i)) {
+      result = match[2];
+    } else if (match = string.match(/rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\)/)) {
+      result = parseInt(match[1]).toString(16).padStart(2, 0) + parseInt(match[2]).toString(16).padStart(2, 0) + parseInt(match[3]).toString(16).padStart(2, 0);
+    } else if (match = string.match(/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i)) {
+      result = match[1] + match[1] + match[2] + match[2] + match[3] + match[3];
+    }
+    if (result) {
+      return "#" + result;
+    }
+    return false;
+  }
+  function getColorFormat(value) {
+    return FORMATS.find((format) => format.match(value));
+  }
+  function _injectStyles(cssContent) {
+    const injected = document.createElement("style");
+    injected.innerHTML = cssContent;
+    const before = document.querySelector("head link[rel=stylesheet], head style");
+    if (before) {
+      document.head.insertBefore(injected, before);
+    } else {
+      document.head.appendChild(injected);
+    }
+  }
+  var Controller, BooleanController, STRING, INT, ARRAY, OBJECT, FORMATS, ColorController, FunctionController, NumberController, OptionController, StringController, stylesheet, stylesInjected, GUI;
+  var init_lil_gui_esm = __esm({
+    "node_modules/lil-gui/dist/lil-gui.esm.js"() {
+      Controller = class _Controller {
+        constructor(parent, object, property, className, elementType = "div") {
+          this.parent = parent;
+          this.object = object;
+          this.property = property;
+          this._disabled = false;
+          this._hidden = false;
+          this.initialValue = this.getValue();
+          this.domElement = document.createElement(elementType);
+          this.domElement.classList.add("lil-controller");
+          this.domElement.classList.add(className);
+          this.$name = document.createElement("div");
+          this.$name.classList.add("lil-name");
+          _Controller.nextNameID = _Controller.nextNameID || 0;
+          this.$name.id = `lil-gui-name-${++_Controller.nextNameID}`;
+          this.$widget = document.createElement("div");
+          this.$widget.classList.add("lil-widget");
+          this.$disable = this.$widget;
+          this.domElement.appendChild(this.$name);
+          this.domElement.appendChild(this.$widget);
+          this.domElement.addEventListener("keydown", (e) => e.stopPropagation());
+          this.domElement.addEventListener("keyup", (e) => e.stopPropagation());
+          this.parent.children.push(this);
+          this.parent.controllers.push(this);
+          this.parent.$children.appendChild(this.domElement);
+          this._listenCallback = this._listenCallback.bind(this);
+          this.name(property);
+        }
+        /**
+         * Sets the name of the controller and its label in the GUI.
+         * @param {string} name
+         * @returns {this}
+         */
+        name(name) {
+          this._name = name;
+          this.$name.textContent = name;
+          return this;
+        }
+        /**
+         * Pass a function to be called whenever the value is modified by this controller.
+         * The function receives the new value as its first parameter. The value of `this` will be the
+         * controller.
+         *
+         * For function controllers, the `onChange` callback will be fired on click, after the function
+         * executes.
+         * @param {Function} callback
+         * @returns {this}
+         * @example
+         * const controller = gui.add( object, 'property' );
+         *
+         * controller.onChange( function( v ) {
+         * 	console.log( 'The value is now ' + v );
+         * 	console.assert( this === controller );
+         * } );
+         */
+        onChange(callback) {
+          this._onChange = callback;
+          return this;
+        }
+        /**
+         * Calls the onChange methods of this controller and its parent GUI.
+         * @protected
+         */
+        _callOnChange() {
+          this.parent._callOnChange(this);
+          if (this._onChange !== void 0) {
+            this._onChange.call(this, this.getValue());
+          }
+          this._changed = true;
+        }
+        /**
+         * Pass a function to be called after this controller has been modified and loses focus.
+         * @param {Function} callback
+         * @returns {this}
+         * @example
+         * const controller = gui.add( object, 'property' );
+         *
+         * controller.onFinishChange( function( v ) {
+         * 	console.log( 'Changes complete: ' + v );
+         * 	console.assert( this === controller );
+         * } );
+         */
+        onFinishChange(callback) {
+          this._onFinishChange = callback;
+          return this;
+        }
+        /**
+         * Should be called by Controller when its widgets lose focus.
+         * @protected
+         */
+        _callOnFinishChange() {
+          if (this._changed) {
+            this.parent._callOnFinishChange(this);
+            if (this._onFinishChange !== void 0) {
+              this._onFinishChange.call(this, this.getValue());
+            }
+          }
+          this._changed = false;
+        }
+        /**
+         * Sets the controller back to its initial value.
+         * @returns {this}
+         */
+        reset() {
+          this.setValue(this.initialValue);
+          this._callOnFinishChange();
+          return this;
+        }
+        /**
+         * Enables this controller.
+         * @param {boolean} enabled
+         * @returns {this}
+         * @example
+         * controller.enable();
+         * controller.enable( false ); // disable
+         * controller.enable( controller._disabled ); // toggle
+         */
+        enable(enabled = true) {
+          return this.disable(!enabled);
+        }
+        /**
+         * Disables this controller.
+         * @param {boolean} disabled
+         * @returns {this}
+         * @example
+         * controller.disable();
+         * controller.disable( false ); // enable
+         * controller.disable( !controller._disabled ); // toggle
+         */
+        disable(disabled = true) {
+          if (disabled === this._disabled) return this;
+          this._disabled = disabled;
+          this.domElement.classList.toggle("lil-disabled", disabled);
+          this.$disable.toggleAttribute("disabled", disabled);
+          return this;
+        }
+        /**
+         * Shows the Controller after it's been hidden.
+         * @param {boolean} show
+         * @returns {this}
+         * @example
+         * controller.show();
+         * controller.show( false ); // hide
+         * controller.show( controller._hidden ); // toggle
+         */
+        show(show = true) {
+          this._hidden = !show;
+          this.domElement.style.display = this._hidden ? "none" : "";
+          return this;
+        }
+        /**
+         * Hides the Controller.
+         * @returns {this}
+         */
+        hide() {
+          return this.show(false);
+        }
+        /**
+         * Changes this controller into a dropdown of options.
+         *
+         * Calling this method on an option controller will simply update the options. However, if this
+         * controller was not already an option controller, old references to this controller are
+         * destroyed, and a new controller is added to the end of the GUI.
+         * @example
+         * // safe usage
+         *
+         * gui.add( obj, 'prop1' ).options( [ 'a', 'b', 'c' ] );
+         * gui.add( obj, 'prop2' ).options( { Big: 10, Small: 1 } );
+         * gui.add( obj, 'prop3' );
+         *
+         * // danger
+         *
+         * const ctrl1 = gui.add( obj, 'prop1' );
+         * gui.add( obj, 'prop2' );
+         *
+         * // calling options out of order adds a new controller to the end...
+         * const ctrl2 = ctrl1.options( [ 'a', 'b', 'c' ] );
+         *
+         * // ...and ctrl1 now references a controller that doesn't exist
+         * assert( ctrl2 !== ctrl1 )
+         * @param {object|Array} options
+         * @returns {Controller}
+         */
+        options(options) {
+          const controller = this.parent.add(this.object, this.property, options);
+          controller.name(this._name);
+          this.destroy();
+          return controller;
+        }
+        /**
+         * Sets the minimum value. Only works on number controllers.
+         * @param {number} min
+         * @returns {this}
+         */
+        min(min) {
+          return this;
+        }
+        /**
+         * Sets the maximum value. Only works on number controllers.
+         * @param {number} max
+         * @returns {this}
+         */
+        max(max) {
+          return this;
+        }
+        /**
+         * Values set by this controller will be rounded to multiples of `step`. Only works on number
+         * controllers.
+         * @param {number} step
+         * @returns {this}
+         */
+        step(step) {
+          return this;
+        }
+        /**
+         * Rounds the displayed value to a fixed number of decimals, without affecting the actual value
+         * like `step()`. Only works on number controllers.
+         * @example
+         * gui.add( object, 'property' ).listen().decimals( 4 );
+         * @param {number} decimals
+         * @returns {this}
+         */
+        decimals(decimals) {
+          return this;
+        }
+        /**
+         * Calls `updateDisplay()` every animation frame. Pass `false` to stop listening.
+         * @param {boolean} listen
+         * @returns {this}
+         */
+        listen(listen = true) {
+          this._listening = listen;
+          if (this._listenCallbackID !== void 0) {
+            cancelAnimationFrame(this._listenCallbackID);
+            this._listenCallbackID = void 0;
+          }
+          if (this._listening) {
+            this._listenCallback();
+          }
+          return this;
+        }
+        _listenCallback() {
+          this._listenCallbackID = requestAnimationFrame(this._listenCallback);
+          const curValue = this.save();
+          if (curValue !== this._listenPrevValue) {
+            this.updateDisplay();
+          }
+          this._listenPrevValue = curValue;
+        }
+        /**
+         * Returns `object[ property ]`.
+         * @returns {any}
+         */
+        getValue() {
+          return this.object[this.property];
+        }
+        /**
+         * Sets the value of `object[ property ]`, invokes any `onChange` handlers and updates the display.
+         * @param {any} value
+         * @returns {this}
+         */
+        setValue(value) {
+          if (this.getValue() !== value) {
+            this.object[this.property] = value;
+            this._callOnChange();
+            this.updateDisplay();
+          }
+          return this;
+        }
+        /**
+         * Updates the display to keep it in sync with the current value. Useful for updating your
+         * controllers when their values have been modified outside of the GUI.
+         * @returns {this}
+         */
+        updateDisplay() {
+          return this;
+        }
+        load(value) {
+          this.setValue(value);
+          this._callOnFinishChange();
+          return this;
+        }
+        save() {
+          return this.getValue();
+        }
+        /**
+         * Destroys this controller and removes it from the parent GUI.
+         */
+        destroy() {
+          this.listen(false);
+          this.parent.children.splice(this.parent.children.indexOf(this), 1);
+          this.parent.controllers.splice(this.parent.controllers.indexOf(this), 1);
+          this.parent.$children.removeChild(this.domElement);
+        }
+      };
+      BooleanController = class extends Controller {
+        constructor(parent, object, property) {
+          super(parent, object, property, "lil-boolean", "label");
+          this.$input = document.createElement("input");
+          this.$input.setAttribute("type", "checkbox");
+          this.$input.setAttribute("aria-labelledby", this.$name.id);
+          this.$widget.appendChild(this.$input);
+          this.$input.addEventListener("change", () => {
+            this.setValue(this.$input.checked);
+            this._callOnFinishChange();
+          });
+          this.$disable = this.$input;
+          this.updateDisplay();
+        }
+        updateDisplay() {
+          this.$input.checked = this.getValue();
+          return this;
+        }
+      };
+      STRING = {
+        isPrimitive: true,
+        match: (v) => typeof v === "string",
+        fromHexString: normalizeColorString,
+        toHexString: normalizeColorString
+      };
+      INT = {
+        isPrimitive: true,
+        match: (v) => typeof v === "number",
+        fromHexString: (string) => parseInt(string.substring(1), 16),
+        toHexString: (value) => "#" + value.toString(16).padStart(6, 0)
+      };
+      ARRAY = {
+        isPrimitive: false,
+        match: (v) => Array.isArray(v) || ArrayBuffer.isView(v),
+        fromHexString(string, target2, rgbScale = 1) {
+          const int = INT.fromHexString(string);
+          target2[0] = (int >> 16 & 255) / 255 * rgbScale;
+          target2[1] = (int >> 8 & 255) / 255 * rgbScale;
+          target2[2] = (int & 255) / 255 * rgbScale;
+        },
+        toHexString([r, g, b], rgbScale = 1) {
+          rgbScale = 255 / rgbScale;
+          const int = r * rgbScale << 16 ^ g * rgbScale << 8 ^ b * rgbScale << 0;
+          return INT.toHexString(int);
+        }
+      };
+      OBJECT = {
+        isPrimitive: false,
+        match: (v) => Object(v) === v,
+        fromHexString(string, target2, rgbScale = 1) {
+          const int = INT.fromHexString(string);
+          target2.r = (int >> 16 & 255) / 255 * rgbScale;
+          target2.g = (int >> 8 & 255) / 255 * rgbScale;
+          target2.b = (int & 255) / 255 * rgbScale;
+        },
+        toHexString({ r, g, b }, rgbScale = 1) {
+          rgbScale = 255 / rgbScale;
+          const int = r * rgbScale << 16 ^ g * rgbScale << 8 ^ b * rgbScale << 0;
+          return INT.toHexString(int);
+        }
+      };
+      FORMATS = [STRING, INT, ARRAY, OBJECT];
+      ColorController = class extends Controller {
+        constructor(parent, object, property, rgbScale) {
+          super(parent, object, property, "lil-color");
+          this.$input = document.createElement("input");
+          this.$input.setAttribute("type", "color");
+          this.$input.setAttribute("tabindex", -1);
+          this.$input.setAttribute("aria-labelledby", this.$name.id);
+          this.$text = document.createElement("input");
+          this.$text.setAttribute("type", "text");
+          this.$text.setAttribute("spellcheck", "false");
+          this.$text.setAttribute("aria-labelledby", this.$name.id);
+          this.$display = document.createElement("div");
+          this.$display.classList.add("lil-display");
+          this.$display.appendChild(this.$input);
+          this.$widget.appendChild(this.$display);
+          this.$widget.appendChild(this.$text);
+          this._format = getColorFormat(this.initialValue);
+          this._rgbScale = rgbScale;
+          this._initialValueHexString = this.save();
+          this._textFocused = false;
+          this.$input.addEventListener("input", () => {
+            this._setValueFromHexString(this.$input.value);
+          });
+          this.$input.addEventListener("blur", () => {
+            this._callOnFinishChange();
+          });
+          this.$text.addEventListener("input", () => {
+            const tryParse = normalizeColorString(this.$text.value);
+            if (tryParse) {
+              this._setValueFromHexString(tryParse);
+            }
+          });
+          this.$text.addEventListener("focus", () => {
+            this._textFocused = true;
+            this.$text.select();
+          });
+          this.$text.addEventListener("blur", () => {
+            this._textFocused = false;
+            this.updateDisplay();
+            this._callOnFinishChange();
+          });
+          this.$disable = this.$text;
+          this.updateDisplay();
+        }
+        reset() {
+          this._setValueFromHexString(this._initialValueHexString);
+          return this;
+        }
+        _setValueFromHexString(value) {
+          if (this._format.isPrimitive) {
+            const newValue = this._format.fromHexString(value);
+            this.setValue(newValue);
+          } else {
+            this._format.fromHexString(value, this.getValue(), this._rgbScale);
+            this._callOnChange();
+            this.updateDisplay();
+          }
+        }
+        save() {
+          return this._format.toHexString(this.getValue(), this._rgbScale);
+        }
+        load(value) {
+          this._setValueFromHexString(value);
+          this._callOnFinishChange();
+          return this;
+        }
+        updateDisplay() {
+          this.$input.value = this._format.toHexString(this.getValue(), this._rgbScale);
+          if (!this._textFocused) {
+            this.$text.value = this.$input.value.substring(1);
+          }
+          this.$display.style.backgroundColor = this.$input.value;
+          return this;
+        }
+      };
+      FunctionController = class extends Controller {
+        constructor(parent, object, property) {
+          super(parent, object, property, "lil-function");
+          this.$button = document.createElement("button");
+          this.$button.appendChild(this.$name);
+          this.$widget.appendChild(this.$button);
+          this.$button.addEventListener("click", (e) => {
+            e.preventDefault();
+            this.getValue().call(this.object);
+            this._callOnChange();
+          });
+          this.$button.addEventListener("touchstart", () => {
+          }, { passive: true });
+          this.$disable = this.$button;
+        }
+      };
+      NumberController = class extends Controller {
+        constructor(parent, object, property, min, max, step) {
+          super(parent, object, property, "lil-number");
+          this._initInput();
+          this.min(min);
+          this.max(max);
+          const stepExplicit = step !== void 0;
+          this.step(stepExplicit ? step : this._getImplicitStep(), stepExplicit);
+          this.updateDisplay();
+        }
+        decimals(decimals) {
+          this._decimals = decimals;
+          this.updateDisplay();
+          return this;
+        }
+        min(min) {
+          this._min = min;
+          this._onUpdateMinMax();
+          return this;
+        }
+        max(max) {
+          this._max = max;
+          this._onUpdateMinMax();
+          return this;
+        }
+        step(step, explicit = true) {
+          this._step = step;
+          this._stepExplicit = explicit;
+          return this;
+        }
+        updateDisplay() {
+          const value = this.getValue();
+          if (this._hasSlider) {
+            let percent = (value - this._min) / (this._max - this._min);
+            percent = Math.max(0, Math.min(percent, 1));
+            this.$fill.style.width = percent * 100 + "%";
+          }
+          if (!this._inputFocused) {
+            this.$input.value = this._decimals === void 0 ? value : value.toFixed(this._decimals);
+          }
+          return this;
+        }
+        _initInput() {
+          this.$input = document.createElement("input");
+          this.$input.setAttribute("type", "text");
+          this.$input.setAttribute("aria-labelledby", this.$name.id);
+          const isTouch = window.matchMedia("(pointer: coarse)").matches;
+          if (isTouch) {
+            this.$input.setAttribute("type", "number");
+            this.$input.setAttribute("step", "any");
+          }
+          this.$widget.appendChild(this.$input);
+          this.$disable = this.$input;
+          const onInput = () => {
+            let value = parseFloat(this.$input.value);
+            if (isNaN(value)) return;
+            if (this._stepExplicit) {
+              value = this._snap(value);
+            }
+            this.setValue(this._clamp(value));
+          };
+          const increment = (delta) => {
+            const value = parseFloat(this.$input.value);
+            if (isNaN(value)) return;
+            this._snapClampSetValue(value + delta);
+            this.$input.value = this.getValue();
+          };
+          const onKeyDown = (e) => {
+            if (e.key === "Enter") {
+              this.$input.blur();
+            }
+            if (e.code === "ArrowUp") {
+              e.preventDefault();
+              increment(this._step * this._arrowKeyMultiplier(e));
+            }
+            if (e.code === "ArrowDown") {
+              e.preventDefault();
+              increment(this._step * this._arrowKeyMultiplier(e) * -1);
+            }
+          };
+          const onWheel = (e) => {
+            if (this._inputFocused) {
+              e.preventDefault();
+              increment(this._step * this._normalizeMouseWheel(e));
+            }
+          };
+          let testingForVerticalDrag = false, initClientX, initClientY, prevClientY, initValue, dragDelta;
+          const DRAG_THRESH = 5;
+          const onMouseDown = (e) => {
+            initClientX = e.clientX;
+            initClientY = prevClientY = e.clientY;
+            testingForVerticalDrag = true;
+            initValue = this.getValue();
+            dragDelta = 0;
+            window.addEventListener("mousemove", onMouseMove);
+            window.addEventListener("mouseup", onMouseUp);
+          };
+          const onMouseMove = (e) => {
+            if (testingForVerticalDrag) {
+              const dx = e.clientX - initClientX;
+              const dy = e.clientY - initClientY;
+              if (Math.abs(dy) > DRAG_THRESH) {
+                e.preventDefault();
+                this.$input.blur();
+                testingForVerticalDrag = false;
+                this._setDraggingStyle(true, "vertical");
+              } else if (Math.abs(dx) > DRAG_THRESH) {
+                onMouseUp();
+              }
+            }
+            if (!testingForVerticalDrag) {
+              const dy = e.clientY - prevClientY;
+              dragDelta -= dy * this._step * this._arrowKeyMultiplier(e);
+              if (initValue + dragDelta > this._max) {
+                dragDelta = this._max - initValue;
+              } else if (initValue + dragDelta < this._min) {
+                dragDelta = this._min - initValue;
+              }
+              this._snapClampSetValue(initValue + dragDelta);
+            }
+            prevClientY = e.clientY;
+          };
+          const onMouseUp = () => {
+            this._setDraggingStyle(false, "vertical");
+            this._callOnFinishChange();
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+          };
+          const onFocus = () => {
+            this._inputFocused = true;
+          };
+          const onBlur = () => {
+            this._inputFocused = false;
+            this.updateDisplay();
+            this._callOnFinishChange();
+          };
+          this.$input.addEventListener("input", onInput);
+          this.$input.addEventListener("keydown", onKeyDown);
+          this.$input.addEventListener("wheel", onWheel, { passive: false });
+          this.$input.addEventListener("mousedown", onMouseDown);
+          this.$input.addEventListener("focus", onFocus);
+          this.$input.addEventListener("blur", onBlur);
+        }
+        _initSlider() {
+          this._hasSlider = true;
+          this.$slider = document.createElement("div");
+          this.$slider.classList.add("lil-slider");
+          this.$fill = document.createElement("div");
+          this.$fill.classList.add("lil-fill");
+          this.$slider.appendChild(this.$fill);
+          this.$widget.insertBefore(this.$slider, this.$input);
+          this.domElement.classList.add("lil-has-slider");
+          const map = (v, a, b, c, d) => {
+            return (v - a) / (b - a) * (d - c) + c;
+          };
+          const setValueFromX = (clientX) => {
+            const rect = this.$slider.getBoundingClientRect();
+            let value = map(clientX, rect.left, rect.right, this._min, this._max);
+            this._snapClampSetValue(value);
+          };
+          const mouseDown = (e) => {
+            this._setDraggingStyle(true);
+            setValueFromX(e.clientX);
+            window.addEventListener("mousemove", mouseMove);
+            window.addEventListener("mouseup", mouseUp);
+          };
+          const mouseMove = (e) => {
+            setValueFromX(e.clientX);
+          };
+          const mouseUp = () => {
+            this._callOnFinishChange();
+            this._setDraggingStyle(false);
+            window.removeEventListener("mousemove", mouseMove);
+            window.removeEventListener("mouseup", mouseUp);
+          };
+          let testingForScroll = false, prevClientX, prevClientY;
+          const beginTouchDrag = (e) => {
+            e.preventDefault();
+            this._setDraggingStyle(true);
+            setValueFromX(e.touches[0].clientX);
+            testingForScroll = false;
+          };
+          const onTouchStart = (e) => {
+            if (e.touches.length > 1) return;
+            if (this._hasScrollBar) {
+              prevClientX = e.touches[0].clientX;
+              prevClientY = e.touches[0].clientY;
+              testingForScroll = true;
+            } else {
+              beginTouchDrag(e);
+            }
+            window.addEventListener("touchmove", onTouchMove, { passive: false });
+            window.addEventListener("touchend", onTouchEnd);
+          };
+          const onTouchMove = (e) => {
+            if (testingForScroll) {
+              const dx = e.touches[0].clientX - prevClientX;
+              const dy = e.touches[0].clientY - prevClientY;
+              if (Math.abs(dx) > Math.abs(dy)) {
+                beginTouchDrag(e);
+              } else {
+                window.removeEventListener("touchmove", onTouchMove);
+                window.removeEventListener("touchend", onTouchEnd);
+              }
+            } else {
+              e.preventDefault();
+              setValueFromX(e.touches[0].clientX);
+            }
+          };
+          const onTouchEnd = () => {
+            this._callOnFinishChange();
+            this._setDraggingStyle(false);
+            window.removeEventListener("touchmove", onTouchMove);
+            window.removeEventListener("touchend", onTouchEnd);
+          };
+          const callOnFinishChange = this._callOnFinishChange.bind(this);
+          const WHEEL_DEBOUNCE_TIME = 400;
+          let wheelFinishChangeTimeout;
+          const onWheel = (e) => {
+            const isVertical = Math.abs(e.deltaX) < Math.abs(e.deltaY);
+            if (isVertical && this._hasScrollBar) return;
+            e.preventDefault();
+            const delta = this._normalizeMouseWheel(e) * this._step;
+            this._snapClampSetValue(this.getValue() + delta);
+            this.$input.value = this.getValue();
+            clearTimeout(wheelFinishChangeTimeout);
+            wheelFinishChangeTimeout = setTimeout(callOnFinishChange, WHEEL_DEBOUNCE_TIME);
+          };
+          this.$slider.addEventListener("mousedown", mouseDown);
+          this.$slider.addEventListener("touchstart", onTouchStart, { passive: false });
+          this.$slider.addEventListener("wheel", onWheel, { passive: false });
+        }
+        _setDraggingStyle(active, axis = "horizontal") {
+          if (this.$slider) {
+            this.$slider.classList.toggle("lil-active", active);
+          }
+          document.body.classList.toggle("lil-dragging", active);
+          document.body.classList.toggle(`lil-${axis}`, active);
+        }
+        _getImplicitStep() {
+          if (this._hasMin && this._hasMax) {
+            return (this._max - this._min) / 1e3;
+          }
+          return 0.1;
+        }
+        _onUpdateMinMax() {
+          if (!this._hasSlider && this._hasMin && this._hasMax) {
+            if (!this._stepExplicit) {
+              this.step(this._getImplicitStep(), false);
+            }
+            this._initSlider();
+            this.updateDisplay();
+          }
+        }
+        _normalizeMouseWheel(e) {
+          let { deltaX, deltaY } = e;
+          if (Math.floor(e.deltaY) !== e.deltaY && e.wheelDelta) {
+            deltaX = 0;
+            deltaY = -e.wheelDelta / 120;
+            deltaY *= this._stepExplicit ? 1 : 10;
+          }
+          const wheel = deltaX + -deltaY;
+          return wheel;
+        }
+        _arrowKeyMultiplier(e) {
+          let mult = this._stepExplicit ? 1 : 10;
+          if (e.shiftKey) {
+            mult *= 10;
+          } else if (e.altKey) {
+            mult /= 10;
+          }
+          return mult;
+        }
+        _snap(value) {
+          let offset = 0;
+          if (this._hasMin) {
+            offset = this._min;
+          } else if (this._hasMax) {
+            offset = this._max;
+          }
+          value -= offset;
+          value = Math.round(value / this._step) * this._step;
+          value += offset;
+          value = parseFloat(value.toPrecision(15));
+          return value;
+        }
+        _clamp(value) {
+          if (value < this._min) value = this._min;
+          if (value > this._max) value = this._max;
+          return value;
+        }
+        _snapClampSetValue(value) {
+          this.setValue(this._clamp(this._snap(value)));
+        }
+        get _hasScrollBar() {
+          const root = this.parent.root.$children;
+          return root.scrollHeight > root.clientHeight;
+        }
+        get _hasMin() {
+          return this._min !== void 0;
+        }
+        get _hasMax() {
+          return this._max !== void 0;
+        }
+      };
+      OptionController = class extends Controller {
+        constructor(parent, object, property, options) {
+          super(parent, object, property, "lil-option");
+          this.$select = document.createElement("select");
+          this.$select.setAttribute("aria-labelledby", this.$name.id);
+          this.$display = document.createElement("div");
+          this.$display.classList.add("lil-display");
+          this.$select.addEventListener("change", () => {
+            this.setValue(this._values[this.$select.selectedIndex]);
+            this._callOnFinishChange();
+          });
+          this.$select.addEventListener("focus", () => {
+            this.$display.classList.add("lil-focus");
+          });
+          this.$select.addEventListener("blur", () => {
+            this.$display.classList.remove("lil-focus");
+          });
+          this.$widget.appendChild(this.$select);
+          this.$widget.appendChild(this.$display);
+          this.$disable = this.$select;
+          this.options(options);
+        }
+        options(options) {
+          this._values = Array.isArray(options) ? options : Object.values(options);
+          this._names = Array.isArray(options) ? options : Object.keys(options);
+          this.$select.replaceChildren();
+          this._names.forEach((name) => {
+            const $option = document.createElement("option");
+            $option.textContent = name;
+            this.$select.appendChild($option);
+          });
+          this.updateDisplay();
+          return this;
+        }
+        updateDisplay() {
+          const value = this.getValue();
+          const index = this._values.indexOf(value);
+          this.$select.selectedIndex = index;
+          this.$display.textContent = index === -1 ? value : this._names[index];
+          return this;
+        }
+      };
+      StringController = class extends Controller {
+        constructor(parent, object, property) {
+          super(parent, object, property, "lil-string");
+          this.$input = document.createElement("input");
+          this.$input.setAttribute("type", "text");
+          this.$input.setAttribute("spellcheck", "false");
+          this.$input.setAttribute("aria-labelledby", this.$name.id);
+          this.$input.addEventListener("input", () => {
+            this.setValue(this.$input.value);
+          });
+          this.$input.addEventListener("keydown", (e) => {
+            if (e.code === "Enter") {
+              this.$input.blur();
+            }
+          });
+          this.$input.addEventListener("blur", () => {
+            this._callOnFinishChange();
+          });
+          this.$widget.appendChild(this.$input);
+          this.$disable = this.$input;
+          this.updateDisplay();
+        }
+        updateDisplay() {
+          this.$input.value = this.getValue();
+          return this;
+        }
+      };
+      stylesheet = `.lil-gui {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: 1;
+  font-weight: normal;
+  font-style: normal;
+  text-align: left;
+  color: var(--text-color);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  --background-color: #1f1f1f;
+  --text-color: #ebebeb;
+  --title-background-color: #111111;
+  --title-text-color: #ebebeb;
+  --widget-color: #424242;
+  --hover-color: #4f4f4f;
+  --focus-color: #595959;
+  --number-color: #2cc9ff;
+  --string-color: #a2db3c;
+  --font-size: 11px;
+  --input-font-size: 11px;
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+  --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;
+  --padding: 4px;
+  --spacing: 4px;
+  --widget-height: 20px;
+  --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);
+  --name-width: 45%;
+  --slider-knob-width: 2px;
+  --slider-input-width: 27%;
+  --color-input-width: 27%;
+  --slider-input-min-width: 45px;
+  --color-input-min-width: 45px;
+  --folder-indent: 7px;
+  --widget-padding: 0 0 0 3px;
+  --widget-border-radius: 2px;
+  --checkbox-size: calc(0.75 * var(--widget-height));
+  --scrollbar-width: 5px;
+}
+.lil-gui, .lil-gui * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+.lil-gui.lil-root {
+  width: var(--width, 245px);
+  display: flex;
+  flex-direction: column;
+  background: var(--background-color);
+}
+.lil-gui.lil-root > .lil-title {
+  background: var(--title-background-color);
+  color: var(--title-text-color);
+}
+.lil-gui.lil-root > .lil-children {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.lil-gui.lil-root > .lil-children::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+  background: var(--background-color);
+}
+.lil-gui.lil-root > .lil-children::-webkit-scrollbar-thumb {
+  border-radius: var(--scrollbar-width);
+  background: var(--focus-color);
+}
+@media (pointer: coarse) {
+  .lil-gui.lil-allow-touch-styles, .lil-gui.lil-allow-touch-styles .lil-gui {
+    --widget-height: 28px;
+    --padding: 6px;
+    --spacing: 6px;
+    --font-size: 13px;
+    --input-font-size: 16px;
+    --folder-indent: 10px;
+    --scrollbar-width: 7px;
+    --slider-input-min-width: 50px;
+    --color-input-min-width: 65px;
+  }
+}
+.lil-gui.lil-force-touch-styles, .lil-gui.lil-force-touch-styles .lil-gui {
+  --widget-height: 28px;
+  --padding: 6px;
+  --spacing: 6px;
+  --font-size: 13px;
+  --input-font-size: 16px;
+  --folder-indent: 10px;
+  --scrollbar-width: 7px;
+  --slider-input-min-width: 50px;
+  --color-input-min-width: 65px;
+}
+.lil-gui.lil-auto-place, .lil-gui.autoPlace {
+  max-height: 100%;
+  position: fixed;
+  top: 0;
+  right: 15px;
+  z-index: 1001;
+}
+
+.lil-controller {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--padding);
+  margin: var(--spacing) 0;
+}
+.lil-controller.lil-disabled {
+  opacity: 0.5;
+}
+.lil-controller.lil-disabled, .lil-controller.lil-disabled * {
+  pointer-events: none !important;
+}
+.lil-controller > .lil-name {
+  min-width: var(--name-width);
+  flex-shrink: 0;
+  white-space: pre;
+  padding-right: var(--spacing);
+  line-height: var(--widget-height);
+}
+.lil-controller .lil-widget {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--widget-height);
+}
+.lil-controller.lil-string input {
+  color: var(--string-color);
+}
+.lil-controller.lil-boolean {
+  cursor: pointer;
+}
+.lil-controller.lil-color .lil-display {
+  width: 100%;
+  height: var(--widget-height);
+  border-radius: var(--widget-border-radius);
+  position: relative;
+}
+@media (hover: hover) {
+  .lil-controller.lil-color .lil-display:hover:before {
+    content: " ";
+    display: block;
+    position: absolute;
+    border-radius: var(--widget-border-radius);
+    border: 1px solid #fff9;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+.lil-controller.lil-color input[type=color] {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.lil-controller.lil-color input[type=text] {
+  margin-left: var(--spacing);
+  font-family: var(--font-family-mono);
+  min-width: var(--color-input-min-width);
+  width: var(--color-input-width);
+  flex-shrink: 0;
+}
+.lil-controller.lil-option select {
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  max-width: 100%;
+}
+.lil-controller.lil-option .lil-display {
+  position: relative;
+  pointer-events: none;
+  border-radius: var(--widget-border-radius);
+  height: var(--widget-height);
+  line-height: var(--widget-height);
+  max-width: 100%;
+  overflow: hidden;
+  word-break: break-all;
+  padding-left: 0.55em;
+  padding-right: 1.75em;
+  background: var(--widget-color);
+}
+@media (hover: hover) {
+  .lil-controller.lil-option .lil-display.lil-focus {
+    background: var(--focus-color);
+  }
+}
+.lil-controller.lil-option .lil-display.lil-active {
+  background: var(--focus-color);
+}
+.lil-controller.lil-option .lil-display:after {
+  font-family: "lil-gui";
+  content: "\u2195";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding-right: 0.375em;
+}
+.lil-controller.lil-option .lil-widget,
+.lil-controller.lil-option select {
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .lil-controller.lil-option .lil-widget:hover .lil-display {
+    background: var(--hover-color);
+  }
+}
+.lil-controller.lil-number input {
+  color: var(--number-color);
+}
+.lil-controller.lil-number.lil-has-slider input {
+  margin-left: var(--spacing);
+  width: var(--slider-input-width);
+  min-width: var(--slider-input-min-width);
+  flex-shrink: 0;
+}
+.lil-controller.lil-number .lil-slider {
+  width: 100%;
+  height: var(--widget-height);
+  background: var(--widget-color);
+  border-radius: var(--widget-border-radius);
+  padding-right: var(--slider-knob-width);
+  overflow: hidden;
+  cursor: ew-resize;
+  touch-action: pan-y;
+}
+@media (hover: hover) {
+  .lil-controller.lil-number .lil-slider:hover {
+    background: var(--hover-color);
+  }
+}
+.lil-controller.lil-number .lil-slider.lil-active {
+  background: var(--focus-color);
+}
+.lil-controller.lil-number .lil-slider.lil-active .lil-fill {
+  opacity: 0.95;
+}
+.lil-controller.lil-number .lil-fill {
+  height: 100%;
+  border-right: var(--slider-knob-width) solid var(--number-color);
+  box-sizing: content-box;
+}
+
+.lil-dragging .lil-gui {
+  --hover-color: var(--widget-color);
+}
+.lil-dragging * {
+  cursor: ew-resize !important;
+}
+.lil-dragging.lil-vertical * {
+  cursor: ns-resize !important;
+}
+
+.lil-gui .lil-title {
+  height: var(--title-height);
+  font-weight: 600;
+  padding: 0 var(--padding);
+  width: 100%;
+  text-align: left;
+  background: none;
+  text-decoration-skip: objects;
+}
+.lil-gui .lil-title:before {
+  font-family: "lil-gui";
+  content: "\u25BE";
+  padding-right: 2px;
+  display: inline-block;
+}
+.lil-gui .lil-title:active {
+  background: var(--title-background-color);
+  opacity: 0.75;
+}
+@media (hover: hover) {
+  body:not(.lil-dragging) .lil-gui .lil-title:hover {
+    background: var(--title-background-color);
+    opacity: 0.85;
+  }
+  .lil-gui .lil-title:focus {
+    text-decoration: underline var(--focus-color);
+  }
+}
+.lil-gui.lil-root > .lil-title:focus {
+  text-decoration: none !important;
+}
+.lil-gui.lil-closed > .lil-title:before {
+  content: "\u25B8";
+}
+.lil-gui.lil-closed > .lil-children {
+  transform: translateY(-7px);
+  opacity: 0;
+}
+.lil-gui.lil-closed:not(.lil-transition) > .lil-children {
+  display: none;
+}
+.lil-gui.lil-transition > .lil-children {
+  transition-duration: 300ms;
+  transition-property: height, opacity, transform;
+  transition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
+  overflow: hidden;
+  pointer-events: none;
+}
+.lil-gui .lil-children:empty:before {
+  content: "Empty";
+  padding: 0 var(--padding);
+  margin: var(--spacing) 0;
+  display: block;
+  height: var(--widget-height);
+  font-style: italic;
+  line-height: var(--widget-height);
+  opacity: 0.5;
+}
+.lil-gui.lil-root > .lil-children > .lil-gui > .lil-title {
+  border: 0 solid var(--widget-color);
+  border-width: 1px 0;
+  transition: border-color 300ms;
+}
+.lil-gui.lil-root > .lil-children > .lil-gui.lil-closed > .lil-title {
+  border-bottom-color: transparent;
+}
+.lil-gui + .lil-controller {
+  border-top: 1px solid var(--widget-color);
+  margin-top: 0;
+  padding-top: var(--spacing);
+}
+.lil-gui .lil-gui .lil-gui > .lil-title {
+  border: none;
+}
+.lil-gui .lil-gui .lil-gui > .lil-children {
+  border: none;
+  margin-left: var(--folder-indent);
+  border-left: 2px solid var(--widget-color);
+}
+.lil-gui .lil-gui .lil-controller {
+  border: none;
+}
+
+.lil-gui label, .lil-gui input, .lil-gui button {
+  -webkit-tap-highlight-color: transparent;
+}
+.lil-gui input {
+  border: 0;
+  outline: none;
+  font-family: var(--font-family);
+  font-size: var(--input-font-size);
+  border-radius: var(--widget-border-radius);
+  height: var(--widget-height);
+  background: var(--widget-color);
+  color: var(--text-color);
+  width: 100%;
+}
+@media (hover: hover) {
+  .lil-gui input:hover {
+    background: var(--hover-color);
+  }
+  .lil-gui input:active {
+    background: var(--focus-color);
+  }
+}
+.lil-gui input:disabled {
+  opacity: 1;
+}
+.lil-gui input[type=text],
+.lil-gui input[type=number] {
+  padding: var(--widget-padding);
+  -moz-appearance: textfield;
+}
+.lil-gui input[type=text]:focus,
+.lil-gui input[type=number]:focus {
+  background: var(--focus-color);
+}
+.lil-gui input[type=checkbox] {
+  appearance: none;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border-radius: var(--widget-border-radius);
+  text-align: center;
+  cursor: pointer;
+}
+.lil-gui input[type=checkbox]:checked:before {
+  font-family: "lil-gui";
+  content: "\u2713";
+  font-size: var(--checkbox-size);
+  line-height: var(--checkbox-size);
+}
+@media (hover: hover) {
+  .lil-gui input[type=checkbox]:focus {
+    box-shadow: inset 0 0 0 1px var(--focus-color);
+  }
+}
+.lil-gui button {
+  outline: none;
+  cursor: pointer;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--text-color);
+  width: 100%;
+  border: none;
+}
+.lil-gui .lil-controller button {
+  height: var(--widget-height);
+  text-transform: none;
+  background: var(--widget-color);
+  border-radius: var(--widget-border-radius);
+}
+@media (hover: hover) {
+  .lil-gui .lil-controller button:hover {
+    background: var(--hover-color);
+  }
+  .lil-gui .lil-controller button:focus {
+    box-shadow: inset 0 0 0 1px var(--focus-color);
+  }
+}
+.lil-gui .lil-controller button:active {
+  background: var(--focus-color);
+}
+
+@font-face {
+  font-family: "lil-gui";
+  src: url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAALkAAsAAAAABtQAAAKVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqBBIEbATYCJAMUCwwABCAFhAoHgQQbHAbIDiUFEYVARAAAYQTVWNmz9MxhEgodq49wYRUFKE8GWNiUBxI2LBRaVnc51U83Gmhs0Q7JXWMiz5eteLwrKwuxHO8VFxUX9UpZBs6pa5ABRwHA+t3UxUnH20EvVknRerzQgX6xC/GH6ZUvTcAjAv122dF28OTqCXrPuyaDER30YBA1xnkVutDDo4oCi71Ca7rrV9xS8dZHbPHefsuwIyCpmT7j+MnjAH5X3984UZoFFuJ0yiZ4XEJFxjagEBeqs+e1iyK8Xf/nOuwF+vVK0ur765+vf7txotUi0m3N0m/84RGSrBCNrh8Ee5GjODjF4gnWP+dJrH/Lk9k4oT6d+gr6g/wssA2j64JJGP6cmx554vUZnpZfn6ZfX2bMwPPrlANsB86/DiHjhl0OP+c87+gaJo/gY084s3HoYL/ZkWHTRfBXvvoHnnkHvngKun4KBE/ede7tvq3/vQOxDXB1/fdNz6XbPdcr0Vhpojj9dG+owuSKFsslCi1tgEjirjXdwMiov2EioadxmqTHUCIwo8NgQaeIasAi0fTYSPTbSmwbMOFduyh9wvBrESGY0MtgRjtgQR8Q1bRPohn2UoCRZf9wyYANMXFeJTysqAe0I4mrherOekFdKMrYvJjLvOIUM9SuwYB5DVZUwwVjJJOaUnZCmcEkIZZrKqNvRGRMvmFZsmhP4VMKCSXBhSqUBxgMS7h0cZvEd71AWkEhGWaeMFcNnpqyJkyXgYL7PQ1MoSq0wDAkRtJIijkZSmqYTiSImfLiSWXIZwhRh3Rug2X0kk1Dgj+Iu43u5p98ghopcpSo0Uyc8SnjlYX59WUeaMoDqmVD2TOWD9a4pCRAzf2ECgwGcrHjPOWY9bNxq/OL3I/QjwEAAAA=") format("woff2");
+}`;
+      stylesInjected = false;
+      GUI = class _GUI {
+        /**
+         * Creates a panel that holds controllers.
+         * @example
+         * new GUI();
+         * new GUI( { container: document.getElementById( 'custom' ) } );
+         *
+         * @param {object} [options]
+         * @param {boolean} [options.autoPlace=true]
+         * Adds the GUI to `document.body` and fixes it to the top right of the page.
+         *
+         * @param {Node} [options.container]
+         * Adds the GUI to this DOM element. Overrides `autoPlace`.
+         *
+         * @param {number} [options.width=245]
+         * Width of the GUI in pixels, usually set when name labels become too long. Note that you can make
+         * name labels wider in CSS with `.lil‑gui { ‑‑name‑width: 55% }`.
+         *
+         * @param {string} [options.title=Controls]
+         * Name to display in the title bar.
+         *
+         * @param {boolean} [options.closeFolders=false]
+         * Pass `true` to close all folders in this GUI by default.
+         *
+         * @param {boolean} [options.injectStyles=true]
+         * Injects the default stylesheet into the page if this is the first GUI.
+         * Pass `false` to use your own stylesheet.
+         *
+         * @param {number} [options.touchStyles=true]
+         * Makes controllers larger on touch devices. Pass `false` to disable touch styles.
+         *
+         * @param {GUI} [options.parent]
+         * Adds this GUI as a child in another GUI. Usually this is done for you by `addFolder()`.
+         */
+        constructor({
+          parent,
+          autoPlace = parent === void 0,
+          container,
+          width,
+          title = "Controls",
+          closeFolders = false,
+          injectStyles = true,
+          touchStyles = true
+        } = {}) {
+          this.parent = parent;
+          this.root = parent ? parent.root : this;
+          this.children = [];
+          this.controllers = [];
+          this.folders = [];
+          this._closed = false;
+          this._hidden = false;
+          this.domElement = document.createElement("div");
+          this.domElement.classList.add("lil-gui");
+          this.$title = document.createElement("button");
+          this.$title.classList.add("lil-title");
+          this.$title.setAttribute("aria-expanded", true);
+          this.$title.addEventListener("click", () => this.openAnimated(this._closed));
+          this.$title.addEventListener("touchstart", () => {
+          }, { passive: true });
+          this.$children = document.createElement("div");
+          this.$children.classList.add("lil-children");
+          this.domElement.appendChild(this.$title);
+          this.domElement.appendChild(this.$children);
+          this.title(title);
+          if (this.parent) {
+            this.parent.children.push(this);
+            this.parent.folders.push(this);
+            this.parent.$children.appendChild(this.domElement);
+            return;
+          }
+          this.domElement.classList.add("lil-root");
+          if (touchStyles) {
+            this.domElement.classList.add("lil-allow-touch-styles");
+          }
+          if (!stylesInjected && injectStyles) {
+            _injectStyles(stylesheet);
+            stylesInjected = true;
+          }
+          if (container) {
+            container.appendChild(this.domElement);
+          } else if (autoPlace) {
+            this.domElement.classList.add("lil-auto-place", "autoPlace");
+            document.body.appendChild(this.domElement);
+          }
+          if (width) {
+            this.domElement.style.setProperty("--width", width + "px");
+          }
+          this._closeFolders = closeFolders;
+        }
+        /**
+         * Adds a controller to the GUI, inferring controller type using the `typeof` operator.
+         * @example
+         * gui.add( object, 'property' );
+         * gui.add( object, 'number', 0, 100, 1 );
+         * gui.add( object, 'options', [ 1, 2, 3 ] );
+         *
+         * @param {object} object The object the controller will modify.
+         * @param {string} property Name of the property to control.
+         * @param {number|object|Array} [$1] Minimum value for number controllers, or the set of
+         * selectable values for a dropdown.
+         * @param {number} [max] Maximum value for number controllers.
+         * @param {number} [step] Step value for number controllers.
+         * @returns {Controller}
+         */
+        add(object, property, $1, max, step) {
+          if (Object($1) === $1) {
+            return new OptionController(this, object, property, $1);
+          }
+          const initialValue = object[property];
+          switch (typeof initialValue) {
+            case "number":
+              return new NumberController(this, object, property, $1, max, step);
+            case "boolean":
+              return new BooleanController(this, object, property);
+            case "string":
+              return new StringController(this, object, property);
+            case "function":
+              return new FunctionController(this, object, property);
+          }
+          console.error(`gui.add failed
+	property:`, property, `
+	object:`, object, `
+	value:`, initialValue);
+        }
+        /**
+         * Adds a color controller to the GUI.
+         * @example
+         * params = {
+         * 	cssColor: '#ff00ff',
+         * 	rgbColor: { r: 0, g: 0.2, b: 0.4 },
+         * 	customRange: [ 0, 127, 255 ],
+         * };
+         *
+         * gui.addColor( params, 'cssColor' );
+         * gui.addColor( params, 'rgbColor' );
+         * gui.addColor( params, 'customRange', 255 );
+         *
+         * @param {object} object The object the controller will modify.
+         * @param {string} property Name of the property to control.
+         * @param {number} rgbScale Maximum value for a color channel when using an RGB color. You may
+         * need to set this to 255 if your colors are too bright.
+         * @returns {Controller}
+         */
+        addColor(object, property, rgbScale = 1) {
+          return new ColorController(this, object, property, rgbScale);
+        }
+        /**
+         * Adds a folder to the GUI, which is just another GUI. This method returns
+         * the nested GUI so you can add controllers to it.
+         * @example
+         * const folder = gui.addFolder( 'Position' );
+         * folder.add( position, 'x' );
+         * folder.add( position, 'y' );
+         * folder.add( position, 'z' );
+         *
+         * @param {string} title Name to display in the folder's title bar.
+         * @returns {GUI}
+         */
+        addFolder(title) {
+          const folder = new _GUI({ parent: this, title });
+          if (this.root._closeFolders) folder.close();
+          return folder;
+        }
+        /**
+         * Recalls values that were saved with `gui.save()`.
+         * @param {object} obj
+         * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+         * @returns {this}
+         */
+        load(obj, recursive = true) {
+          if (obj.controllers) {
+            this.controllers.forEach((c) => {
+              if (c instanceof FunctionController) return;
+              if (c._name in obj.controllers) {
+                c.load(obj.controllers[c._name]);
+              }
+            });
+          }
+          if (recursive && obj.folders) {
+            this.folders.forEach((f) => {
+              if (f._title in obj.folders) {
+                f.load(obj.folders[f._title]);
+              }
+            });
+          }
+          return this;
+        }
+        /**
+         * Returns an object mapping controller names to values. The object can be passed to `gui.load()` to
+         * recall these values.
+         * @example
+         * {
+         * 	controllers: {
+         * 		prop1: 1,
+         * 		prop2: 'value',
+         * 		...
+         * 	},
+         * 	folders: {
+         * 		folderName1: { controllers, folders },
+         * 		folderName2: { controllers, folders }
+         * 		...
+         * 	}
+         * }
+         *
+         * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+         * @returns {object}
+         */
+        save(recursive = true) {
+          const obj = {
+            controllers: {},
+            folders: {}
+          };
+          this.controllers.forEach((c) => {
+            if (c instanceof FunctionController) return;
+            if (c._name in obj.controllers) {
+              throw new Error(`Cannot save GUI with duplicate property "${c._name}"`);
+            }
+            obj.controllers[c._name] = c.save();
+          });
+          if (recursive) {
+            this.folders.forEach((f) => {
+              if (f._title in obj.folders) {
+                throw new Error(`Cannot save GUI with duplicate folder "${f._title}"`);
+              }
+              obj.folders[f._title] = f.save();
+            });
+          }
+          return obj;
+        }
+        /**
+         * Opens a GUI or folder. GUI and folders are open by default.
+         * @param {boolean} open Pass false to close.
+         * @returns {this}
+         * @example
+         * gui.open(); // open
+         * gui.open( false ); // close
+         * gui.open( gui._closed ); // toggle
+         */
+        open(open = true) {
+          this._setClosed(!open);
+          this.$title.setAttribute("aria-expanded", !this._closed);
+          this.domElement.classList.toggle("lil-closed", this._closed);
+          return this;
+        }
+        /**
+         * Closes the GUI.
+         * @returns {this}
+         */
+        close() {
+          return this.open(false);
+        }
+        _setClosed(closed) {
+          if (this._closed === closed) return;
+          this._closed = closed;
+          this._callOnOpenClose(this);
+        }
+        /**
+         * Shows the GUI after it's been hidden.
+         * @param {boolean} show
+         * @returns {this}
+         * @example
+         * gui.show();
+         * gui.show( false ); // hide
+         * gui.show( gui._hidden ); // toggle
+         */
+        show(show = true) {
+          this._hidden = !show;
+          this.domElement.style.display = this._hidden ? "none" : "";
+          return this;
+        }
+        /**
+         * Hides the GUI.
+         * @returns {this}
+         */
+        hide() {
+          return this.show(false);
+        }
+        openAnimated(open = true) {
+          this._setClosed(!open);
+          this.$title.setAttribute("aria-expanded", !this._closed);
+          requestAnimationFrame(() => {
+            const initialHeight = this.$children.clientHeight;
+            this.$children.style.height = initialHeight + "px";
+            this.domElement.classList.add("lil-transition");
+            const onTransitionEnd = (e) => {
+              if (e.target !== this.$children) return;
+              this.$children.style.height = "";
+              this.domElement.classList.remove("lil-transition");
+              this.$children.removeEventListener("transitionend", onTransitionEnd);
+            };
+            this.$children.addEventListener("transitionend", onTransitionEnd);
+            const targetHeight = !open ? 0 : this.$children.scrollHeight;
+            this.domElement.classList.toggle("lil-closed", !open);
+            requestAnimationFrame(() => {
+              this.$children.style.height = targetHeight + "px";
+            });
+          });
+          return this;
+        }
+        /**
+         * Change the title of this GUI.
+         * @param {string} title
+         * @returns {this}
+         */
+        title(title) {
+          this._title = title;
+          this.$title.textContent = title;
+          return this;
+        }
+        /**
+         * Resets all controllers to their initial values.
+         * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+         * @returns {this}
+         */
+        reset(recursive = true) {
+          const controllers = recursive ? this.controllersRecursive() : this.controllers;
+          controllers.forEach((c) => c.reset());
+          return this;
+        }
+        /**
+         * Pass a function to be called whenever a controller in this GUI changes.
+         * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+         * @returns {this}
+         * @example
+         * gui.onChange( event => {
+         * 	event.object     // object that was modified
+         * 	event.property   // string, name of property
+         * 	event.value      // new value of controller
+         * 	event.controller // controller that was modified
+         * } );
+         */
+        onChange(callback) {
+          this._onChange = callback;
+          return this;
+        }
+        _callOnChange(controller) {
+          if (this.parent) {
+            this.parent._callOnChange(controller);
+          }
+          if (this._onChange !== void 0) {
+            this._onChange.call(this, {
+              object: controller.object,
+              property: controller.property,
+              value: controller.getValue(),
+              controller
+            });
+          }
+        }
+        /**
+         * Pass a function to be called whenever a controller in this GUI has finished changing.
+         * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+         * @returns {this}
+         * @example
+         * gui.onFinishChange( event => {
+         * 	event.object     // object that was modified
+         * 	event.property   // string, name of property
+         * 	event.value      // new value of controller
+         * 	event.controller // controller that was modified
+         * } );
+         */
+        onFinishChange(callback) {
+          this._onFinishChange = callback;
+          return this;
+        }
+        _callOnFinishChange(controller) {
+          if (this.parent) {
+            this.parent._callOnFinishChange(controller);
+          }
+          if (this._onFinishChange !== void 0) {
+            this._onFinishChange.call(this, {
+              object: controller.object,
+              property: controller.property,
+              value: controller.getValue(),
+              controller
+            });
+          }
+        }
+        /**
+         * Pass a function to be called when this GUI or its descendants are opened or closed.
+         * @param {function(GUI)} callback
+         * @returns {this}
+         * @example
+         * gui.onOpenClose( changedGUI => {
+         * 	console.log( changedGUI._closed );
+         * } );
+         */
+        onOpenClose(callback) {
+          this._onOpenClose = callback;
+          return this;
+        }
+        _callOnOpenClose(changedGUI) {
+          if (this.parent) {
+            this.parent._callOnOpenClose(changedGUI);
+          }
+          if (this._onOpenClose !== void 0) {
+            this._onOpenClose.call(this, changedGUI);
+          }
+        }
+        /**
+         * Destroys all DOM elements and event listeners associated with this GUI.
+         */
+        destroy() {
+          if (this.parent) {
+            this.parent.children.splice(this.parent.children.indexOf(this), 1);
+            this.parent.folders.splice(this.parent.folders.indexOf(this), 1);
+          }
+          if (this.domElement.parentElement) {
+            this.domElement.parentElement.removeChild(this.domElement);
+          }
+          Array.from(this.children).forEach((c) => c.destroy());
+        }
+        /**
+         * Returns an array of controllers contained by this GUI and its descendents.
+         * @returns {Controller[]}
+         */
+        controllersRecursive() {
+          let controllers = Array.from(this.controllers);
+          this.folders.forEach((f) => {
+            controllers = controllers.concat(f.controllersRecursive());
+          });
+          return controllers;
+        }
+        /**
+         * Returns an array of folders contained by this GUI and its descendents.
+         * @returns {GUI[]}
+         */
+        foldersRecursive() {
+          let folders = Array.from(this.folders);
+          this.folders.forEach((f) => {
+            folders = folders.concat(f.foldersRecursive());
+          });
+          return folders;
+        }
+      };
+    }
+  });
+
+  // node_modules/lil-gui/dist/lil-gui.css
+  var lil_gui_default;
+  var init_lil_gui = __esm({
+    "node_modules/lil-gui/dist/lil-gui.css"() {
+      lil_gui_default = '.lil-gui {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: 1;\n  font-weight: normal;\n  font-style: normal;\n  text-align: left;\n  color: var(--text-color);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: manipulation;\n  --background-color: #1f1f1f;\n  --text-color: #ebebeb;\n  --title-background-color: #111111;\n  --title-text-color: #ebebeb;\n  --widget-color: #424242;\n  --hover-color: #4f4f4f;\n  --focus-color: #595959;\n  --number-color: #2cc9ff;\n  --string-color: #a2db3c;\n  --font-size: 11px;\n  --input-font-size: 11px;\n  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;\n  --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;\n  --padding: 4px;\n  --spacing: 4px;\n  --widget-height: 20px;\n  --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);\n  --name-width: 45%;\n  --slider-knob-width: 2px;\n  --slider-input-width: 27%;\n  --color-input-width: 27%;\n  --slider-input-min-width: 45px;\n  --color-input-min-width: 45px;\n  --folder-indent: 7px;\n  --widget-padding: 0 0 0 3px;\n  --widget-border-radius: 2px;\n  --checkbox-size: calc(0.75 * var(--widget-height));\n  --scrollbar-width: 5px;\n}\n.lil-gui, .lil-gui * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.lil-gui.lil-root {\n  width: var(--width, 245px);\n  display: flex;\n  flex-direction: column;\n  background: var(--background-color);\n}\n.lil-gui.lil-root > .lil-title {\n  background: var(--title-background-color);\n  color: var(--title-text-color);\n}\n.lil-gui.lil-root > .lil-children {\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.lil-gui.lil-root > .lil-children::-webkit-scrollbar {\n  width: var(--scrollbar-width);\n  height: var(--scrollbar-width);\n  background: var(--background-color);\n}\n.lil-gui.lil-root > .lil-children::-webkit-scrollbar-thumb {\n  border-radius: var(--scrollbar-width);\n  background: var(--focus-color);\n}\n@media (pointer: coarse) {\n  .lil-gui.lil-allow-touch-styles, .lil-gui.lil-allow-touch-styles .lil-gui {\n    --widget-height: 28px;\n    --padding: 6px;\n    --spacing: 6px;\n    --font-size: 13px;\n    --input-font-size: 16px;\n    --folder-indent: 10px;\n    --scrollbar-width: 7px;\n    --slider-input-min-width: 50px;\n    --color-input-min-width: 65px;\n  }\n}\n.lil-gui.lil-force-touch-styles, .lil-gui.lil-force-touch-styles .lil-gui {\n  --widget-height: 28px;\n  --padding: 6px;\n  --spacing: 6px;\n  --font-size: 13px;\n  --input-font-size: 16px;\n  --folder-indent: 10px;\n  --scrollbar-width: 7px;\n  --slider-input-min-width: 50px;\n  --color-input-min-width: 65px;\n}\n.lil-gui.lil-auto-place, .lil-gui.autoPlace {\n  max-height: 100%;\n  position: fixed;\n  top: 0;\n  right: 15px;\n  z-index: 1001;\n}\n\n.lil-controller {\n  display: flex;\n  align-items: center;\n  padding: 0 var(--padding);\n  margin: var(--spacing) 0;\n}\n.lil-controller.lil-disabled {\n  opacity: 0.5;\n}\n.lil-controller.lil-disabled, .lil-controller.lil-disabled * {\n  pointer-events: none !important;\n}\n.lil-controller > .lil-name {\n  min-width: var(--name-width);\n  flex-shrink: 0;\n  white-space: pre;\n  padding-right: var(--spacing);\n  line-height: var(--widget-height);\n}\n.lil-controller .lil-widget {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: var(--widget-height);\n}\n.lil-controller.lil-string input {\n  color: var(--string-color);\n}\n.lil-controller.lil-boolean {\n  cursor: pointer;\n}\n.lil-controller.lil-color .lil-display {\n  width: 100%;\n  height: var(--widget-height);\n  border-radius: var(--widget-border-radius);\n  position: relative;\n}\n@media (hover: hover) {\n  .lil-controller.lil-color .lil-display:hover:before {\n    content: " ";\n    display: block;\n    position: absolute;\n    border-radius: var(--widget-border-radius);\n    border: 1px solid #fff9;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n.lil-controller.lil-color input[type=color] {\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.lil-controller.lil-color input[type=text] {\n  margin-left: var(--spacing);\n  font-family: var(--font-family-mono);\n  min-width: var(--color-input-min-width);\n  width: var(--color-input-width);\n  flex-shrink: 0;\n}\n.lil-controller.lil-option select {\n  opacity: 0;\n  position: absolute;\n  width: 100%;\n  max-width: 100%;\n}\n.lil-controller.lil-option .lil-display {\n  position: relative;\n  pointer-events: none;\n  border-radius: var(--widget-border-radius);\n  height: var(--widget-height);\n  line-height: var(--widget-height);\n  max-width: 100%;\n  overflow: hidden;\n  word-break: break-all;\n  padding-left: 0.55em;\n  padding-right: 1.75em;\n  background: var(--widget-color);\n}\n@media (hover: hover) {\n  .lil-controller.lil-option .lil-display.lil-focus {\n    background: var(--focus-color);\n  }\n}\n.lil-controller.lil-option .lil-display.lil-active {\n  background: var(--focus-color);\n}\n.lil-controller.lil-option .lil-display:after {\n  font-family: "lil-gui";\n  content: "\u2195";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding-right: 0.375em;\n}\n.lil-controller.lil-option .lil-widget,\n.lil-controller.lil-option select {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .lil-controller.lil-option .lil-widget:hover .lil-display {\n    background: var(--hover-color);\n  }\n}\n.lil-controller.lil-number input {\n  color: var(--number-color);\n}\n.lil-controller.lil-number.lil-has-slider input {\n  margin-left: var(--spacing);\n  width: var(--slider-input-width);\n  min-width: var(--slider-input-min-width);\n  flex-shrink: 0;\n}\n.lil-controller.lil-number .lil-slider {\n  width: 100%;\n  height: var(--widget-height);\n  background: var(--widget-color);\n  border-radius: var(--widget-border-radius);\n  padding-right: var(--slider-knob-width);\n  overflow: hidden;\n  cursor: ew-resize;\n  touch-action: pan-y;\n}\n@media (hover: hover) {\n  .lil-controller.lil-number .lil-slider:hover {\n    background: var(--hover-color);\n  }\n}\n.lil-controller.lil-number .lil-slider.lil-active {\n  background: var(--focus-color);\n}\n.lil-controller.lil-number .lil-slider.lil-active .lil-fill {\n  opacity: 0.95;\n}\n.lil-controller.lil-number .lil-fill {\n  height: 100%;\n  border-right: var(--slider-knob-width) solid var(--number-color);\n  box-sizing: content-box;\n}\n\n.lil-dragging .lil-gui {\n  --hover-color: var(--widget-color);\n}\n.lil-dragging * {\n  cursor: ew-resize !important;\n}\n.lil-dragging.lil-vertical * {\n  cursor: ns-resize !important;\n}\n\n.lil-gui .lil-title {\n  height: var(--title-height);\n  font-weight: 600;\n  padding: 0 var(--padding);\n  width: 100%;\n  text-align: left;\n  background: none;\n  text-decoration-skip: objects;\n}\n.lil-gui .lil-title:before {\n  font-family: "lil-gui";\n  content: "\u25BE";\n  padding-right: 2px;\n  display: inline-block;\n}\n.lil-gui .lil-title:active {\n  background: var(--title-background-color);\n  opacity: 0.75;\n}\n@media (hover: hover) {\n  body:not(.lil-dragging) .lil-gui .lil-title:hover {\n    background: var(--title-background-color);\n    opacity: 0.85;\n  }\n  .lil-gui .lil-title:focus {\n    text-decoration: underline var(--focus-color);\n  }\n}\n.lil-gui.lil-root > .lil-title:focus {\n  text-decoration: none !important;\n}\n.lil-gui.lil-closed > .lil-title:before {\n  content: "\u25B8";\n}\n.lil-gui.lil-closed > .lil-children {\n  transform: translateY(-7px);\n  opacity: 0;\n}\n.lil-gui.lil-closed:not(.lil-transition) > .lil-children {\n  display: none;\n}\n.lil-gui.lil-transition > .lil-children {\n  transition-duration: 300ms;\n  transition-property: height, opacity, transform;\n  transition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);\n  overflow: hidden;\n  pointer-events: none;\n}\n.lil-gui .lil-children:empty:before {\n  content: "Empty";\n  padding: 0 var(--padding);\n  margin: var(--spacing) 0;\n  display: block;\n  height: var(--widget-height);\n  font-style: italic;\n  line-height: var(--widget-height);\n  opacity: 0.5;\n}\n.lil-gui.lil-root > .lil-children > .lil-gui > .lil-title {\n  border: 0 solid var(--widget-color);\n  border-width: 1px 0;\n  transition: border-color 300ms;\n}\n.lil-gui.lil-root > .lil-children > .lil-gui.lil-closed > .lil-title {\n  border-bottom-color: transparent;\n}\n.lil-gui + .lil-controller {\n  border-top: 1px solid var(--widget-color);\n  margin-top: 0;\n  padding-top: var(--spacing);\n}\n.lil-gui .lil-gui .lil-gui > .lil-title {\n  border: none;\n}\n.lil-gui .lil-gui .lil-gui > .lil-children {\n  border: none;\n  margin-left: var(--folder-indent);\n  border-left: 2px solid var(--widget-color);\n}\n.lil-gui .lil-gui .lil-controller {\n  border: none;\n}\n\n.lil-gui label, .lil-gui input, .lil-gui button {\n  -webkit-tap-highlight-color: transparent;\n}\n.lil-gui input {\n  border: 0;\n  outline: none;\n  font-family: var(--font-family);\n  font-size: var(--input-font-size);\n  border-radius: var(--widget-border-radius);\n  height: var(--widget-height);\n  background: var(--widget-color);\n  color: var(--text-color);\n  width: 100%;\n}\n@media (hover: hover) {\n  .lil-gui input:hover {\n    background: var(--hover-color);\n  }\n  .lil-gui input:active {\n    background: var(--focus-color);\n  }\n}\n.lil-gui input:disabled {\n  opacity: 1;\n}\n.lil-gui input[type=text],\n.lil-gui input[type=number] {\n  padding: var(--widget-padding);\n  -moz-appearance: textfield;\n}\n.lil-gui input[type=text]:focus,\n.lil-gui input[type=number]:focus {\n  background: var(--focus-color);\n}\n.lil-gui input[type=checkbox] {\n  appearance: none;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  border-radius: var(--widget-border-radius);\n  text-align: center;\n  cursor: pointer;\n}\n.lil-gui input[type=checkbox]:checked:before {\n  font-family: "lil-gui";\n  content: "\u2713";\n  font-size: var(--checkbox-size);\n  line-height: var(--checkbox-size);\n}\n@media (hover: hover) {\n  .lil-gui input[type=checkbox]:focus {\n    box-shadow: inset 0 0 0 1px var(--focus-color);\n  }\n}\n.lil-gui button {\n  outline: none;\n  cursor: pointer;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--text-color);\n  width: 100%;\n  border: none;\n}\n.lil-gui .lil-controller button {\n  height: var(--widget-height);\n  text-transform: none;\n  background: var(--widget-color);\n  border-radius: var(--widget-border-radius);\n}\n@media (hover: hover) {\n  .lil-gui .lil-controller button:hover {\n    background: var(--hover-color);\n  }\n  .lil-gui .lil-controller button:focus {\n    box-shadow: inset 0 0 0 1px var(--focus-color);\n  }\n}\n.lil-gui .lil-controller button:active {\n  background: var(--focus-color);\n}\n\n@font-face {\n  font-family: "lil-gui";\n  src: url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAALkAAsAAAAABtQAAAKVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqBBIEbATYCJAMUCwwABCAFhAoHgQQbHAbIDiUFEYVARAAAYQTVWNmz9MxhEgodq49wYRUFKE8GWNiUBxI2LBRaVnc51U83Gmhs0Q7JXWMiz5eteLwrKwuxHO8VFxUX9UpZBs6pa5ABRwHA+t3UxUnH20EvVknRerzQgX6xC/GH6ZUvTcAjAv122dF28OTqCXrPuyaDER30YBA1xnkVutDDo4oCi71Ca7rrV9xS8dZHbPHefsuwIyCpmT7j+MnjAH5X3984UZoFFuJ0yiZ4XEJFxjagEBeqs+e1iyK8Xf/nOuwF+vVK0ur765+vf7txotUi0m3N0m/84RGSrBCNrh8Ee5GjODjF4gnWP+dJrH/Lk9k4oT6d+gr6g/wssA2j64JJGP6cmx554vUZnpZfn6ZfX2bMwPPrlANsB86/DiHjhl0OP+c87+gaJo/gY084s3HoYL/ZkWHTRfBXvvoHnnkHvngKun4KBE/ede7tvq3/vQOxDXB1/fdNz6XbPdcr0Vhpojj9dG+owuSKFsslCi1tgEjirjXdwMiov2EioadxmqTHUCIwo8NgQaeIasAi0fTYSPTbSmwbMOFduyh9wvBrESGY0MtgRjtgQR8Q1bRPohn2UoCRZf9wyYANMXFeJTysqAe0I4mrherOekFdKMrYvJjLvOIUM9SuwYB5DVZUwwVjJJOaUnZCmcEkIZZrKqNvRGRMvmFZsmhP4VMKCSXBhSqUBxgMS7h0cZvEd71AWkEhGWaeMFcNnpqyJkyXgYL7PQ1MoSq0wDAkRtJIijkZSmqYTiSImfLiSWXIZwhRh3Rug2X0kk1Dgj+Iu43u5p98ghopcpSo0Uyc8SnjlYX59WUeaMoDqmVD2TOWD9a4pCRAzf2ECgwGcrHjPOWY9bNxq/OL3I/QjwEAAAA=") format("woff2");\n}\n';
+    }
+  });
+
+  // src/viewer.js
+  var viewer_exports = {};
+  __export(viewer_exports, {
+    adopt: () => adopt,
+    viewer: () => viewer
+  });
+  function safeStringify(arg) {
+    if (typeof arg === "string") return arg;
+    if (arg instanceof Error) return arg.stack || arg.message;
+    try {
+      return JSON.stringify(arg);
+    } catch {
+      return String(arg);
+    }
+  }
+  function appendDebugLine(text, isError) {
+    if (!debugLogEl) return;
+    const line = document.createElement("div");
+    if (isError) line.className = "err";
+    line.textContent = `[${(/* @__PURE__ */ new Date()).toISOString().slice(11, 23)}] ${text}`;
+    debugLogEl.appendChild(line);
+    while (debugLogEl.childElementCount > MAX_DEBUG_LINES) {
+      debugLogEl.removeChild(debugLogEl.firstElementChild);
+    }
+    debugLogEl.scrollTop = debugLogEl.scrollHeight;
+  }
+  function trace(...args) {
+    appendDebugLine(args.map(safeStringify).join(" "), false);
+    if (traceToConsole) console.log(...args);
+  }
+  function fail(...args) {
+    appendDebugLine(args.map(safeStringify).join(" "), true);
+    console.error(...args);
+  }
+  function setMode(id) {
+    if (currentMode === id) return;
+    currentMode = id;
+    for (const [modeId, btn] of modeButtons) {
+      btn.classList.toggle("mode-active", modeId === id);
+    }
+    modulePromise.then((Module) => {
+      Module.setMeasureMode(id === "measure");
+      refreshRulerRow(Module);
+    });
+  }
+  function refreshRulerRow(Module) {
+    const count = Module.measurementCount();
+    rulerRow.style.display = count > 0 ? "" : "none";
+    rulerClearBtn.textContent = `Clear ${count}`;
+  }
+  function setFileChip(controller, name, { idleLabel, idleTitle, unloadTitle, onUnload }) {
+    const existingX = controller.domElement.querySelector(".lyp-unload");
+    if (existingX) existingX.remove();
+    controller.domElement.classList.toggle("lyp-loaded", !!name);
+    if (!name) {
+      controller.name(idleLabel);
+      controller.domElement.title = idleTitle;
+      return;
+    }
+    controller.name(name);
+    controller.domElement.title = `${name} \u2014 click to replace, \u2715 to unload`;
+    const x = document.createElement("span");
+    x.className = "lyp-unload";
+    x.textContent = "\u2715";
+    x.title = unloadTitle;
+    x.addEventListener("click", (event) => {
+      event.stopPropagation();
+      onUnload();
+    });
+    controller.domElement.appendChild(x);
+  }
+  function setLypChip(name) {
+    setFileChip(lypController, name, {
+      idleLabel: "Load .lyp File",
+      idleTitle: "Load a .lyp layer-properties file",
+      unloadTitle: "Unload .lyp",
+      onUnload: () => {
+        modulePromise.then((Module) => {
+          Module.loadLypText("");
+          renderLayerList(Module.getLayers());
+        });
+        hostCall("unloadLyp");
+        setLypChip(null);
+      }
+    });
+  }
+  function setMarkerChip(name) {
+    setFileChip(markerController, name, {
+      idleLabel: "Load Marker File (.lyrdb / DRC)",
+      idleTitle: "Load a .lyrdb report database or ASCII DRC results database",
+      unloadTitle: "Unload marker file",
+      onUnload: () => {
+        modulePromise.then((Module) => Module.clearMarkers());
+        hostCall("unloadMarkers");
+        removeMarkerBrowser();
+        currentMarkers = null;
+        setMarkerChip(null);
+      }
+    });
+  }
+  function layerTag(item) {
+    return `${item.layer}/${item.datatype}`;
+  }
+  function fmtCount(n) {
+    if (n < 1e3) return String(n);
+    if (n < 1e6) return `${(n / 1e3).toFixed(n < 1e4 ? 1 : 0)}k`;
+    return `${(n / 1e6).toFixed(n < 1e7 ? 1 : 0)}M`;
+  }
+  function tintBorder(el, color) {
+    if (el) el.style.borderLeft = `4px solid ${color}`;
+  }
+  function setRowVisible(Module, row, visible) {
+    if (row.state.visible === visible) return;
+    row.state.visible = visible;
+    row.controller.updateDisplay();
+    Module.setLayerVisible(row.item.layer, row.item.datatype, visible);
+  }
+  function syncLayerRowsFromModule(Module) {
+    const visibleByTag = /* @__PURE__ */ new Map();
+    for (const layer of Module.getLayers()) {
+      visibleByTag.set(`${layer.layer}/${layer.datatype}`, layer.visible);
+    }
+    for (const row of layerRows) {
+      const visible = visibleByTag.get(layerTag(row.item));
+      if (visible === void 0 || row.state.visible === visible) continue;
+      row.state.visible = visible;
+      row.controller.updateDisplay();
+    }
+    syncCategoryChecks();
+  }
+  function syncCategoryChecks() {
+    for (const category of layerCategories) {
+      const all = category.rows.every((row) => row.state.visible);
+      if (category.allState.visible !== all) {
+        category.allState.visible = all;
+        category.allController.updateDisplay();
+      }
+    }
+  }
+  function forgetSolo() {
+    if (soloTag === null) return;
+    soloTag = null;
+    soloRestore = null;
+    markSoloRow();
+  }
+  function markSoloRow() {
+    for (const row of layerRows) {
+      row.controller.domElement.classList.toggle("layer-soloed", layerTag(row.item) === soloTag);
+    }
+  }
+  function toggleSolo(item) {
+    const tag = layerTag(item);
+    const restore = soloTag === tag ? soloRestore : null;
+    if (restore) {
+      soloTag = null;
+      soloRestore = null;
+    } else {
+      soloRestore = new Map(layerRows.map((row) => [layerTag(row.item), row.state.visible]));
+      soloTag = tag;
+    }
+    markSoloRow();
+    modulePromise.then((Module) => {
+      for (const row of layerRows) {
+        const rowTag = layerTag(row.item);
+        setRowVisible(Module, row, restore ? restore.get(rowTag) !== false : rowTag === tag);
+      }
+      syncCategoryChecks();
+    });
+  }
+  function applyBulkVisibility(kind) {
+    forgetSolo();
+    const rows = layerRows.filter((row) => row.matches);
+    modulePromise.then((Module) => {
+      for (const row of rows) {
+        setRowVisible(Module, row, kind === "invert" ? !row.state.visible : kind === "all");
+      }
+      syncCategoryChecks();
+    });
+  }
+  function applyLayerFilter(text) {
+    const query = text.trim().toLowerCase();
+    if (query && !layerFilterActive) {
+      for (const category of layerCategories) {
+        category.wasOpen = !category.folder.domElement.classList.contains("lil-closed");
+      }
+    }
+    layerFilterActive = !!query;
+    for (const row of layerRows) {
+      row.matches = !query || row.haystack.includes(query);
+      row.controller.domElement.style.display = row.matches ? "" : "none";
+    }
+    for (const category of layerCategories) {
+      const matched = category.rows.reduce((n, row) => n + (row.matches ? 1 : 0), 0);
+      category.folder.domElement.style.display = matched > 0 ? "" : "none";
+      category.folder.title(query ? `${category.name}  (${matched} of ${category.rows.length})` : `${category.name}  (${category.rows.length})`);
+      if (query) category.folder.open();
+      else if (!category.wasOpen) category.folder.close();
+    }
+  }
+  function addLayerRow(parent, item, onSync) {
+    const label = item.name ? `${item.layer}/${item.datatype} \u2013 ${item.name}` : `${item.layer}/${item.datatype}`;
+    const shapes = item.polygonCount || 0;
+    const labels = item.labelCount || 0;
+    const state = { visible: item.visible };
+    const controller = parent.add(state, "visible").name(label).onChange((visible) => {
+      forgetSolo();
+      modulePromise.then((Module) => Module.setLayerVisible(item.layer, item.datatype, visible));
+      if (onSync) onSync();
+    });
+    tintBorder(controller.domElement, item.frameColor);
+    controller.domElement.classList.add("layer-row");
+    controller.domElement.title = [
+      label,
+      `${shapes.toLocaleString()} shape${shapes === 1 ? "" : "s"}, ${labels.toLocaleString()} label${labels === 1 ? "" : "s"}`
+    ].join("\n");
+    const count = document.createElement("span");
+    count.className = "layer-count";
+    count.textContent = shapes > 0 ? fmtCount(shapes) : labels > 0 ? `T${fmtCount(labels)}` : "0";
+    const solo = document.createElement("span");
+    solo.className = "layer-solo";
+    solo.textContent = "S";
+    solo.title = "Solo \u2014 hide every other layer (click again to restore them)";
+    solo.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      toggleSolo(item);
+    });
+    controller.domElement.append(count, solo);
+    return { controller, state, item, matches: true, haystack: `${label} ${item.group || ""}`.toLowerCase() };
+  }
+  function addLayerListControls(folder) {
+    const filterRow = document.createElement("div");
+    filterRow.className = "lil-controller layer-filter-row";
+    const filterName = document.createElement("div");
+    filterName.className = "lil-name";
+    filterName.textContent = "Filter";
+    const filterWidget = document.createElement("div");
+    filterWidget.className = "lil-widget";
+    const filterInput = document.createElement("input");
+    filterInput.type = "text";
+    filterInput.placeholder = "number, name or group";
+    filterInput.addEventListener("input", () => applyLayerFilter(filterInput.value));
+    filterWidget.appendChild(filterInput);
+    filterRow.append(filterName, filterWidget);
+    filterRow.title = "Show only layers whose number, datatype, name or group contains this";
+    const bulkRow = document.createElement("div");
+    bulkRow.className = "lil-controller mode-row layer-bulk-row";
+    const bulkName = document.createElement("div");
+    bulkName.className = "lil-name";
+    bulkName.textContent = "Show";
+    const bulkWidget = document.createElement("div");
+    bulkWidget.className = "lil-widget mode-widget";
+    const BULK = [
+      { id: "all", label: "All", title: "Show every layer the filter is showing" },
+      { id: "none", label: "None", title: "Hide every layer the filter is showing" },
+      { id: "invert", label: "Invert", title: "Flip every filtered layer's visibility" }
+    ];
+    for (const action of BULK) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.textContent = action.label;
+      btn.title = action.title;
+      btn.addEventListener("click", () => applyBulkVisibility(action.id));
+      bulkWidget.appendChild(btn);
+    }
+    bulkRow.append(bulkName, bulkWidget);
+    folder.$children.append(filterRow, bulkRow);
+  }
+  function renderLayerList(layers) {
+    if (layersFolder) {
+      layersFolder.destroy();
+    }
+    layerRows = [];
+    layerCategories = [];
+    layerFilterActive = false;
+    soloTag = null;
+    soloRestore = null;
+    layersFolder = gui.addFolder("Layers");
+    layersFolder.close();
+    addLayerListControls(layersFolder);
+    const OTHER = "Other layers";
+    const categories = /* @__PURE__ */ new Map();
+    for (const layer of layers) {
+      const key = layer.group || OTHER;
+      if (!categories.has(key)) categories.set(key, []);
+      categories.get(key).push(layer);
+    }
+    for (const [category, items] of categories) {
+      const folder = layersFolder.addFolder(`${category}  (${items.length})`);
+      folder.close();
+      tintBorder(folder.domElement, items[0].frameColor);
+      const children = [];
+      const syncCategory = () => {
+        const all = children.every((c) => c.state.visible);
+        if (allState.visible !== all) {
+          allState.visible = all;
+          allController.updateDisplay();
+        }
+      };
+      const allState = { visible: items.every((it) => it.visible) };
+      const allController = folder.add(allState, "visible").name("\u25FC all").onChange((visible) => {
+        forgetSolo();
+        modulePromise.then((Module) => {
+          for (const c of children) setRowVisible(Module, c, visible);
+        });
+      });
+      allController.domElement.title = `Toggle all ${items.length} layers in ${category}`;
+      const shapeTotal = items.reduce((n, it) => n + (it.polygonCount || 0), 0);
+      folder.$title.title = `${category}: ${items.length} layer${items.length === 1 ? "" : "s"}, ${shapeTotal.toLocaleString()} shape${shapeTotal === 1 ? "" : "s"}`;
+      for (const item of items) {
+        children.push(addLayerRow(folder, item, syncCategory));
+      }
+      layerRows.push(...children);
+      layerCategories.push({ name: category, folder, rows: children, allState, allController, wasOpen: false });
+    }
+  }
+  function composeXform(outer, inner) {
+    return [
+      outer[0] * inner[0] + outer[1] * inner[2],
+      outer[0] * inner[1] + outer[1] * inner[3],
+      outer[2] * inner[0] + outer[3] * inner[2],
+      outer[2] * inner[1] + outer[3] * inner[3],
+      outer[0] * inner[4] + outer[1] * inner[5] + outer[4],
+      outer[2] * inner[4] + outer[3] * inner[5] + outer[5]
+    ];
+  }
+  function transformBox(m, box) {
+    const corners = [[box.minX, box.minY], [box.maxX, box.minY], [box.minX, box.maxY], [box.maxX, box.maxY]];
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const [x, y] of corners) {
+      const wx = m[0] * x + m[1] * y + m[4];
+      const wy = m[2] * x + m[3] * y + m[5];
+      minX = Math.min(minX, wx);
+      maxX = Math.max(maxX, wx);
+      minY = Math.min(minY, wy);
+      maxY = Math.max(maxY, wy);
+    }
+    return { minX, maxX, minY, maxY };
+  }
+  function hierarchyBoxes(node, cell, parentXform, spanningBox) {
+    const placements = node.placements;
+    if (!placements || placements.length < 6 || !cell.bbox) {
+      return spanningBox ? [spanningBox] : [];
+    }
+    const boxes = [];
+    for (let i = 0; i + 5 < placements.length; i += 6) {
+      const xform = composeXform(parentXform, [
+        placements[i],
+        placements[i + 1],
+        placements[i + 2],
+        placements[i + 3],
+        placements[i + 4],
+        placements[i + 5]
+      ]);
+      boxes.push(transformBox(xform, cell.bbox));
+    }
+    return boxes;
+  }
+  function setHierarchyOpen(open, byUser) {
+    if (byUser) hierarchyUserChoice = open;
+    if (hierarchyPanel) hierarchyPanel.classList.toggle("hidden", !open);
+    rootEl.classList.toggle("hierarchy-open", open);
+    if (hierarchyShowBtn) hierarchyShowBtn.setAttribute("aria-expanded", String(open));
+    if (hierarchyHide) hierarchyHide.setAttribute("aria-expanded", String(open));
+    syncCellHighlight();
+  }
+  function syncCellHighlight() {
+    const open = hierarchyPanel && !hierarchyPanel.classList.contains("hidden");
+    const boxes = open ? hierarchySelectedBoxes : null;
+    modulePromise.then((Module) => {
+      if (!boxes || boxes.length === 0) {
+        Module.clearCellHighlight();
+        return;
+      }
+      const flat = [];
+      for (const box of boxes) flat.push(box.minX, box.minY, box.maxX, box.maxY);
+      Module.setCellHighlight(flat);
+    });
+  }
+  function hierarchySelect(row, path, boxes) {
+    if (hierarchySelectedRow) hierarchySelectedRow.classList.remove("hier-selected");
+    hierarchySelectedRow = row;
+    hierarchySelectedPath = path;
+    hierarchySelectedBoxes = boxes || [];
+    row.classList.add("hier-selected");
+    syncCellHighlight();
+  }
+  function hierarchyDeselect() {
+    if (hierarchySelectedRow) hierarchySelectedRow.classList.remove("hier-selected");
+    hierarchySelectedRow = null;
+    hierarchySelectedPath = null;
+    hierarchySelectedBoxes = [];
+    syncCellHighlight();
+  }
+  function hierarchyTooltip(cell, node, box, boxes) {
+    const lines = [cell.name];
+    if (node.count > 1) {
+      const each = boxes.length > 1 ? "each outlined" : "outlined as one box, too many to mark separately";
+      lines.push(`${node.count} placements here, ${each} (expanding follows the first)`);
+    }
+    lines.push(`${cell.polygons} own shape${cell.polygons === 1 ? "" : "s"}, ${cell.labels} label${cell.labels === 1 ? "" : "s"}, ${cell.refs.length} child cell${cell.refs.length === 1 ? "" : "s"}`);
+    if (box) {
+      lines.push(`${fmtCoord(box.maxX - box.minX)} \xD7 ${fmtCoord(box.maxY - box.minY)} \xB5m at (${fmtCoord((box.minX + box.maxX) / 2)}, ${fmtCoord((box.minY + box.maxY) / 2)}) \u2014 click to zoom to it and outline it (Esc clears)`);
+    } else {
+      lines.push("empty \u2014 no geometry to zoom to");
+    }
+    return lines.join("\n");
+  }
+  function addHierarchyRows(container, nodes, depth, parentPath, parentXform) {
+    for (const node of nodes) {
+      let setExpanded = function(open) {
+        if (!expandable) return;
+        if (open && !built) {
+          built = true;
+          addHierarchyRows(children, cell.refs, depth + 1, path, childXform);
+        }
+        children.classList.toggle("hidden", !open);
+        twisty.textContent = open ? "\u25BE" : "\u25B8";
+        row.setAttribute("aria-expanded", String(open));
+        if (open) hierarchyExpanded.add(path);
+        else hierarchyExpanded.delete(path);
+      };
+      const cell = hierarchyModel.cells[node.cell];
+      if (!cell) continue;
+      const path = parentPath ? `${parentPath}/${cell.name}` : cell.name;
+      const box = node.bbox ? transformBox(parentXform, node.bbox) : null;
+      const boxes = hierarchyBoxes(node, cell, parentXform, box);
+      const childXform = composeXform(parentXform, node.xform);
+      const expandable = cell.refs.length > 0 && depth + 1 < HIERARCHY_MAX_DEPTH;
+      const row = document.createElement("div");
+      row.className = "hier-row";
+      row.style.paddingLeft = `${6 + depth * 12}px`;
+      if (!box) row.classList.add("hier-boxless");
+      row.setAttribute("role", "treeitem");
+      row.setAttribute("aria-level", String(depth + 1));
+      if (expandable) row.setAttribute("aria-expanded", "false");
+      const twisty = document.createElement("span");
+      twisty.className = "hier-twisty";
+      twisty.textContent = expandable ? "\u25B8" : "";
+      const name = document.createElement("span");
+      name.className = "hier-name";
+      name.textContent = cell.name;
+      const count = document.createElement("span");
+      count.className = "hier-count";
+      if (node.count > 1) count.textContent = `\xD7${node.count}`;
+      row.append(twisty, name, count);
+      row.title = hierarchyTooltip(cell, node, box, boxes);
+      const children = document.createElement("div");
+      children.className = "hier-children hidden";
+      children.setAttribute("role", "group");
+      container.append(row, children);
+      let built = false;
+      twisty.addEventListener("click", (event) => {
+        event.stopPropagation();
+        setExpanded(children.classList.contains("hidden"));
+      });
+      row.addEventListener("click", () => {
+        hierarchySelect(row, path, boxes);
+        if (!box) return;
+        modulePromise.then((Module) => Module.zoomToBox(box.minX, box.minY, box.maxX, box.maxY));
+      });
+      if (path === hierarchySelectedPath) hierarchySelect(row, path, boxes);
+      if (path === hierarchyRevealPath) {
+        row.scrollIntoView({ block: "center" });
+        if (box) modulePromise.then((Module) => Module.zoomToBox(box.minX, box.minY, box.maxX, box.maxY));
+      }
+      if (hierarchyExpanded.has(path)) setExpanded(true);
+    }
+  }
+  function rebuildHierarchyRows() {
+    if (!hierarchyTree || !hierarchyModel) return;
+    hierarchySelectedRow = null;
+    hierarchySelectedBoxes = [];
+    hierarchyTree.textContent = "";
+    const cells = hierarchyModel.cells || [];
+    const roots = (hierarchyModel.roots || []).filter((index) => cells[index]);
+    const rootNodes = roots.map((index) => ({
+      cell: index,
+      count: 1,
+      bbox: cells[index].bbox,
+      xform: HIERARCHY_IDENTITY
+    }));
+    addHierarchyRows(hierarchyTree, rootNodes, 0, "", HIERARCHY_IDENTITY);
+  }
+  function hierarchyPathToCell(target2) {
+    if (!hierarchyModel) return null;
+    return cellPathToTarget(
+      hierarchyModel.cells || [],
+      hierarchyModel.roots || [],
+      target2,
+      HIERARCHY_MAX_DEPTH
+    );
+  }
+  function revealCell(target2) {
+    const path = hierarchyPathToCell(target2);
+    if (!path) return false;
+    const names = path.map((index) => hierarchyModel.cells[index].name);
+    for (let i = 1; i < names.length; i++) {
+      hierarchyExpanded.add(names.slice(0, i).join("/"));
+    }
+    hierarchySelectedPath = names.join("/");
+    hierarchyRevealPath = hierarchySelectedPath;
+    try {
+      rebuildHierarchyRows();
+    } finally {
+      hierarchyRevealPath = null;
+    }
+    return true;
+  }
+  function renderHierarchy(model) {
+    if (!hierarchyTree) return;
+    hierarchyModel = model;
+    hierarchySelectedRow = null;
+    hierarchySelectedBoxes = [];
+    syncCellHighlight();
+    hierarchyTree.textContent = "";
+    const cells = model && model.cells || [];
+    const roots = (model && model.roots || []).filter((index) => cells[index]);
+    const cellCount = model ? model.cellCount : 0;
+    rootEl.classList.toggle("hierarchy-available", cellCount > 0);
+    if (!model || cellCount === 0) {
+      if (hierarchyCount) hierarchyCount.textContent = "";
+      if (hierarchyShowBtn) hierarchyShowBtn.classList.add("hidden");
+      refreshFind(true);
+      setHierarchyOpen(false);
+      return;
+    }
+    if (hierarchyShowBtn) hierarchyShowBtn.classList.remove("hidden");
+    if (hierarchyCount) hierarchyCount.textContent = `${cellCount} cell${cellCount === 1 ? "" : "s"}`;
+    const rootKey = roots.map((i) => cells[i].name).join(" ");
+    const sameDesign = rootKey === hierarchyRootKey;
+    if (!sameDesign) {
+      hierarchyRootKey = rootKey;
+      hierarchyExpanded.clear();
+      hierarchySelectedPath = null;
+    }
+    refreshFind(!sameDesign);
+    if (model.omitted) {
+      const note = document.createElement("div");
+      note.className = "hier-note";
+      note.textContent = `This design has ${cellCount} cells \u2014 too many to browse as a tree, so it isn't built.`;
+      hierarchyTree.append(note);
+      setHierarchyOpen(hierarchyUserChoice === true);
+      return;
+    }
+    if (hierarchyExpanded.size === 0 && roots.length > 0) {
+      hierarchyExpanded.add(cells[roots[0]].name);
+    }
+    rebuildHierarchyRows();
+    setHierarchyOpen(hierarchyUserChoice === true);
+  }
+  function toggleHierarchy() {
+    if (!hierarchyPanel || !hierarchyModel || !hierarchyModel.cellCount) return;
+    setHierarchyOpen(hierarchyPanel.classList.contains("hidden"), true);
+  }
+  function setFindOpen(open) {
+    if (!hierarchySearchBox) return;
+    const changed = open !== findIsOpen();
+    hierarchySearchBox.classList.toggle("hidden", !open);
+    if (hierarchyFindTwisty) hierarchyFindTwisty.textContent = open ? "\u25BE" : "\u25B8";
+    if (hierarchyFindToggle) hierarchyFindToggle.setAttribute("aria-expanded", String(open));
+    if (open) {
+      if (hierarchySearchInput) hierarchySearchInput.focus();
+      return;
+    }
+    if (!changed) return;
+    if (hierarchySearchInput) {
+      hierarchySearchInput.value = "";
+      hierarchySearchInput.blur();
+    }
+    runSearch();
+  }
+  function findIsOpen() {
+    return !!(hierarchySearchBox && !hierarchySearchBox.classList.contains("hidden"));
+  }
+  function setFindResultsOpen(open) {
+    if (!hierarchyResults || !hierarchyTree) return;
+    hierarchyResults.classList.toggle("hidden", !open);
+    hierarchyTree.classList.toggle("hidden", open);
+  }
+  function setFindCount(text) {
+    if (hierarchySearchCount) hierarchySearchCount.textContent = text;
+  }
+  function clearFindRows() {
+    if (hierarchyResults) hierarchyResults.textContent = "";
+    findRows = [];
+    findActiveIndex = -1;
+  }
+  function findNote(text) {
+    if (!hierarchyResults) return;
+    const note = document.createElement("div");
+    note.className = "find-note";
+    note.textContent = text;
+    hierarchyResults.append(note);
+  }
+  function addFindRow(name, meta, title, activate) {
+    if (!hierarchyResults) return;
+    const element = document.createElement("div");
+    element.className = "find-row";
+    const nameEl = document.createElement("span");
+    nameEl.className = "find-name";
+    nameEl.textContent = name;
+    const metaEl = document.createElement("span");
+    metaEl.className = "find-meta";
+    metaEl.textContent = meta;
+    element.append(nameEl, metaEl);
+    element.title = title;
+    const index = findRows.length;
+    element.addEventListener("click", () => activateFindRow(index));
+    hierarchyResults.append(element);
+    findRows.push({ element, activate });
+  }
+  function setFindActive(index) {
+    const previous = findRows[findActiveIndex];
+    if (previous) previous.element.classList.remove("find-active");
+    findActiveIndex = index;
+    const row = findRows[index];
+    if (!row) return;
+    row.element.classList.add("find-active");
+    row.element.scrollIntoView({ block: "nearest" });
+  }
+  function activateFindRow(index) {
+    const row = findRows[index];
+    if (!row || !row.activate) return;
+    setFindActive(index);
+    row.activate(row);
+  }
+  function stepFindRow(direction) {
+    if (findRows.length === 0) return;
+    const from = findActiveIndex < 0 ? direction > 0 ? -1 : 0 : findActiveIndex;
+    setFindActive((from + direction + findRows.length) % findRows.length);
+  }
+  function runSearch() {
+    if (!hierarchySearchInput) return;
+    const query = hierarchySearchInput.value.trim();
+    findQuery = query;
+    if (!query) {
+      clearFindRows();
+      setFindResultsOpen(false);
+      setFindCount("");
+      return;
+    }
+    setFindResultsOpen(true);
+    if (findScope === "labels") runLabelSearch(query);
+    else renderCellResults(query);
+  }
+  function renderCellResults(query) {
+    clearFindRows();
+    if (hierarchyModel && hierarchyModel.omitted) {
+      setFindCount("");
+      findNote(`This design's ${hierarchyModel.cellCount} cells are too many for the viewer to hold as a tree, so it has no cell names to search. Labels still work.`);
+      return;
+    }
+    const cells = hierarchyModel && hierarchyModel.cells || [];
+    const matches = rankCellMatches(cells, query);
+    setFindCount(matches.length === 0 ? "no match" : `${Math.min(matches.length, MAX_FIND_ROWS)} of ${matches.length} cell${matches.length === 1 ? "" : "s"}`);
+    for (const index of matches.slice(0, MAX_FIND_ROWS)) {
+      const cell = cells[index];
+      const meta = cell.polygons > 0 ? fmtCount(cell.polygons) : cell.labels > 0 ? `T${fmtCount(cell.labels)}` : "0";
+      const title = [
+        cell.name,
+        `${cell.polygons.toLocaleString()} own shape${cell.polygons === 1 ? "" : "s"}, ${cell.labels.toLocaleString()} label${cell.labels === 1 ? "" : "s"}, ${cell.refs.length} child cell${cell.refs.length === 1 ? "" : "s"}`,
+        "Click to open the tree down to it, frame it and outline every placement"
+      ].join("\n");
+      addFindRow(cell.name, meta, title, (row) => chooseCell(index, row));
+    }
+    if (matches.length > MAX_FIND_ROWS) {
+      findNote(`\u2026 ${matches.length - MAX_FIND_ROWS} more \u2014 narrow the query`);
+    }
+    if (matches.length === 0) findNote(`No cell name contains \u201C${query}\u201D.`);
+  }
+  function chooseCell(index, row) {
+    setFindResultsOpen(false);
+    if (revealCell(index)) return;
+    setFindResultsOpen(true);
+    row.activate = null;
+    row.element.classList.add("find-unreachable");
+    row.element.title = `${hierarchyModel.cells[index].name}
+No top cell places this one, so the tree has no branch that reaches it.`;
+  }
+  function runLabelSearch(query) {
+    modulePromise.then((Module) => {
+      const result = Module.findLabels(query, MAX_FIND_ROWS);
+      if (query !== findQuery || findScope !== "labels") return;
+      renderLabelResults(query, result);
+    });
+  }
+  function renderLabelResults(query, result) {
+    clearFindRows();
+    const hits = result.hits || [];
+    const total = result.total || 0;
+    setFindCount(total === 0 ? "no match" : `${hits.length} of ${total.toLocaleString()} label${total === 1 ? "" : "s"}`);
+    for (const hit of hits) {
+      const tag = hit.name ? `${hit.layer}/${hit.datatype} ${hit.name}` : `${hit.layer}/${hit.datatype}`;
+      const meta = hit.visible ? tag : `${tag} \xB7 hidden`;
+      const title = [
+        hit.text,
+        `on layer ${tag}${hit.visible ? "" : " \u2014 currently hidden, but the label is still marked"}`,
+        `at (${fmtCoord(hit.x)}, ${fmtCoord(hit.y)}) \xB5m \u2014 click to pan there and mark it`
+      ].join("\n");
+      addFindRow(hit.text, meta, title, () => goToLabel(hit));
+    }
+    if (total > hits.length) {
+      findNote(`\u2026 ${(total - hits.length).toLocaleString()} more \u2014 narrow the query`);
+    }
+    if (total === 0) findNote(`No label text contains \u201C${query}\u201D.`);
+  }
+  function goToLabel(hit) {
+    modulePromise.then((Module) => {
+      Module.goToPoint(hit.x, hit.y);
+      if (!actions.showText) textController.setValue(true);
+      markLabelHit(Module, hit);
+    });
+  }
+  function markLabelHit(Module, hit) {
+    const zoom = Module.getCamera().zoom;
+    const half = LABEL_MARK_PX / (zoom > 0 ? zoom : 1);
+    if (hierarchySelectedRow) hierarchySelectedRow.classList.remove("hier-selected");
+    hierarchySelectedRow = null;
+    hierarchySelectedPath = null;
+    hierarchySelectedBoxes = [{
+      minX: hit.x - half,
+      minY: hit.y - half,
+      maxX: hit.x + half,
+      maxY: hit.y + half
+    }];
+    syncCellHighlight();
+  }
+  function setFindScope(scope) {
+    if (findScope === scope) return;
+    findScope = scope;
+    updateFindScope();
+    runSearch();
+  }
+  function updateFindScope() {
+    const cellsAvailable = !!(hierarchyModel && !hierarchyModel.omitted && hierarchyModel.cells && hierarchyModel.cells.length > 0);
+    if (hierarchyScopeCells) {
+      hierarchyScopeCells.classList.toggle("scope-active", findScope === "cells");
+      hierarchyScopeCells.setAttribute("aria-pressed", String(findScope === "cells"));
+      hierarchyScopeCells.disabled = !cellsAvailable;
+      hierarchyScopeCells.title = cellsAvailable ? "Search the design's cell names" : "This design's cell names aren't held in the viewer \u2014 see the note in the panel";
+    }
+    if (hierarchyScopeLabels) {
+      hierarchyScopeLabels.classList.toggle("scope-active", findScope === "labels");
+      hierarchyScopeLabels.setAttribute("aria-pressed", String(findScope === "labels"));
+    }
+    if (hierarchySearchInput) {
+      hierarchySearchInput.placeholder = findScope === "labels" ? "label text" : "cell name";
+    }
+  }
+  function refreshFind(reset) {
+    if (reset && hierarchySearchInput) hierarchySearchInput.value = "";
+    if (hierarchyModel && hierarchyModel.omitted) findScope = "labels";
+    updateFindScope();
+    runSearch();
+  }
+  function focusFindBox() {
+    if (!hierarchySearchInput || !hierarchyModel || !hierarchyModel.cellCount) return;
+    if (hierarchyPanel && hierarchyPanel.classList.contains("hidden")) setHierarchyOpen(true, true);
+    setFindOpen(true);
+    hierarchySearchInput.select();
+  }
+  function removeMarkerBrowser() {
+    if (markersFolder) {
+      markersFolder.destroy();
+      markersFolder = null;
+    }
+    markerItemRows.clear();
+    selectedMarkerRow = null;
+    selectedMarkerId = -1;
+  }
+  function selectMarker(Module, item) {
+    if (selectedMarkerRow) selectedMarkerRow.classList.remove("marker-selected");
+    selectedMarkerRow = markerItemRows.get(item.id) || null;
+    if (selectedMarkerRow) selectedMarkerRow.classList.add("marker-selected");
+    selectedMarkerId = item.id;
+    Module.setSelectedMarker(item.id);
+    if (item.bbox) {
+      Module.zoomToBox(item.bbox.minX, item.bbox.minY, item.bbox.maxX, item.bbox.maxY);
+    }
+  }
+  function fmtCoord(v) {
+    return Number(v.toPrecision(4)).toString();
+  }
+  function renderMarkerBrowser(model) {
+    const keepSelectedId = selectedMarkerId;
+    removeMarkerBrowser();
+    selectedMarkerId = keepSelectedId;
+    const totalItems = model.categories.reduce((n, c) => n + c.items.length, 0);
+    markersFolder = gui.addFolder(`Markers (${totalItems})`);
+    markersFolder.open();
+    if (model.warnings.length > 0) {
+      fail("[GDS] marker warnings:", model.warnings.join(" | "));
+      const row = markersFolder.add({ w: () => {
+      } }, "w").name(`\u26A0 ${model.warnings.length} warning${model.warnings.length === 1 ? "" : "s"}`);
+      row.domElement.title = model.warnings.join("\n");
+    }
+    const opacityController = markersFolder.add(markerUiState, "opacity", 0, 1, 0.05).name("Opacity").onChange((value) => modulePromise.then((Module) => Module.setMarkerOpacity(value)));
+    opacityController.domElement.title = "Opacity of the whole marker overlay";
+    const emptyCount = model.categories.filter((c) => c.items.length === 0).length;
+    const hideEmptyController = markersFolder.add(markerUiState, "hideEmpty").name("Hide empty categories").onChange(() => renderMarkerBrowser(model));
+    hideEmptyController.domElement.title = `Hide categories with 0 violations (currently ${emptyCount} of ${model.categories.length})`;
+    model.categories.forEach((cat, categoryIndex) => {
+      if (markerUiState.hideEmpty && cat.items.length === 0) return;
+      const folder = markersFolder.addFolder(`${cat.name}  (${cat.items.length})`);
+      folder.close();
+      if (cat.description) folder.domElement.title = cat.description;
+      if (cat.uiVisible === void 0) cat.uiVisible = false;
+      const visState = { visible: cat.uiVisible };
+      const visController = folder.add(visState, "visible").name("\u25FC visible").onChange((visible) => {
+        cat.uiVisible = visible;
+        modulePromise.then((Module) => Module.setMarkerCategoryVisible(categoryIndex, visible));
+      });
+      visController.domElement.title = `Show/hide all ${cat.items.length} markers in ${cat.name}`;
+      for (const item of cat.items.slice(0, MAX_MARKER_ROWS_PER_CATEGORY)) {
+        const label = item.bbox ? `#${item.label} (${fmtCoord((item.bbox.minX + item.bbox.maxX) / 2)}, ${fmtCoord((item.bbox.minY + item.bbox.maxY) / 2)})` : `#${item.label}`;
+        const controller = folder.add({ go: () => modulePromise.then((Module) => selectMarker(Module, item)) }, "go").name(label);
+        controller.domElement.title = [item.note, cat.description].filter(Boolean).join("\n") || label;
+        markerItemRows.set(item.id, controller.domElement);
+      }
+      if (cat.items.length > MAX_MARKER_ROWS_PER_CATEGORY) {
+        const more = folder.add({ m: () => {
+        } }, "m").name(`\u2026 ${cat.items.length - MAX_MARKER_ROWS_PER_CATEGORY} more (press [ or ] to step)`);
+        more.domElement.classList.add("marker-more-row");
+      }
+    });
+    selectedMarkerRow = markerItemRows.get(selectedMarkerId) || null;
+    if (selectedMarkerRow) selectedMarkerRow.classList.add("marker-selected");
+  }
+  function stepMarker(direction) {
+    if (!currentMarkers) return;
+    let items = [];
+    for (const cat of currentMarkers.categories) {
+      if (cat.uiVisible === false) continue;
+      items.push(...cat.items);
+    }
+    if (items.length === 0) {
+      items = currentMarkers.categories.flatMap((cat) => cat.items);
+    }
+    if (items.length === 0) return;
+    let idx = items.findIndex((it) => it.id === selectedMarkerId);
+    idx = idx < 0 ? direction > 0 ? 0 : items.length - 1 : (idx + direction + items.length) % items.length;
+    modulePromise.then((Module) => selectMarker(Module, items[idx]));
+  }
+  function showCopyToast(text) {
+    if (!copyToastEl) return;
+    copyToastEl.textContent = text;
+    copyToastEl.classList.remove("hidden");
+    clearTimeout(copyToastTimer);
+    copyToastTimer = setTimeout(() => copyToastEl.classList.add("hidden"), 1800);
+  }
+  function hideCanvasMenu() {
+    if (canvasMenuEl) canvasMenuEl.classList.add("hidden");
+  }
+  function showCanvasMenu(clientX, clientY, text) {
+    if (!canvasMenuEl) return;
+    canvasMenuText = text;
+    if (canvasMenuValueEl) canvasMenuValueEl.textContent = text;
+    canvasMenuEl.classList.remove("hidden");
+    const margin = 4;
+    const maxLeft = window.innerWidth - canvasMenuEl.offsetWidth - margin;
+    const maxTop = window.innerHeight - canvasMenuEl.offsetHeight - margin;
+    canvasMenuEl.style.left = Math.max(margin, Math.min(clientX, maxLeft)) + "px";
+    canvasMenuEl.style.top = Math.max(margin, Math.min(clientY, maxTop)) + "px";
+    if (canvasMenuCopyEl) canvasMenuCopyEl.focus();
+  }
+  function showStaleBanner(show, text) {
+    if (!staleBanner) return;
+    if (text) staleText.textContent = text;
+    staleBanner.classList.toggle("hidden", !show);
+  }
+  function captureViewState(Module) {
+    const layers = Module.getLayers();
+    if (layers.length === 0) return null;
+    const visibility = {};
+    for (const layer of layers) {
+      visibility[`${layer.layer}/${layer.datatype}`] = layer.visible;
+    }
+    return { camera: Module.getCamera(), visibility };
+  }
+  function restoreViewState(Module, saved) {
+    if (!saved) return;
+    for (const layer of Module.getLayers()) {
+      const wasVisible = saved.visibility[`${layer.layer}/${layer.datatype}`];
+      if (wasVisible !== void 0 && wasVisible !== layer.visible) {
+        Module.setLayerVisible(layer.layer, layer.datatype, wasVisible);
+      }
+    }
+    Module.setCamera(saved.camera.zoom, saved.camera.panX, saved.camera.panY);
+  }
+  function persistNamedViews() {
+    hostCall("saveViews", namedViews);
+  }
+  function requestSaveView() {
+    modulePromise.then((Module) => {
+      const captured = captureViewState(Module);
+      if (!captured) return;
+      pendingViewCapture = captured;
+      Promise.resolve(hostCall("promptViewName", namedViews.map((view) => view.name))).then((name) => {
+        if (name) saveNamedView(name);
+        else pendingViewCapture = null;
+      });
+    });
+  }
+  function saveNamedView(name) {
+    const captured = pendingViewCapture;
+    pendingViewCapture = null;
+    if (!captured || !name) return;
+    const view = {
+      name,
+      camera: {
+        zoom: captured.camera.zoom,
+        panX: captured.camera.panX,
+        panY: captured.camera.panY
+      },
+      visibility: captured.visibility
+    };
+    const at = namedViews.findIndex((existing) => existing.name.toLowerCase() === name.toLowerCase());
+    if (at >= 0) namedViews[at] = view;
+    else namedViews.push(view);
+    renderNamedViews();
+    persistNamedViews();
+  }
+  function deleteNamedView(view) {
+    namedViews = namedViews.filter((existing) => existing !== view);
+    renderNamedViews();
+    persistNamedViews();
+  }
+  function restoreNamedView(view) {
+    modulePromise.then((Module) => {
+      forgetSolo();
+      restoreViewState(Module, view);
+      syncLayerRowsFromModule(Module);
+    });
+  }
+  function renderNamedViews() {
+    for (const controller of viewControllers) controller.destroy();
+    viewControllers = [];
+    viewsFolder.title(namedViews.length > 0 ? `Views  (${namedViews.length})` : "Views");
+    for (const view of namedViews) {
+      const controller = viewsFolder.add({ go: () => restoreNamedView(view) }, "go").name(view.name);
+      controller.domElement.classList.add("view-row");
+      controller.domElement.title = `${view.name} \u2014 click to put the camera and layer visibility back, \u2715 to delete`;
+      const remove = document.createElement("span");
+      remove.className = "view-delete";
+      remove.textContent = "\u2715";
+      remove.title = `Delete "${view.name}"`;
+      remove.addEventListener("click", (event) => {
+        event.stopPropagation();
+        deleteNamedView(view);
+      });
+      controller.domElement.appendChild(remove);
+      viewControllers.push(controller);
+    }
+  }
+  function setNamedViews(views) {
+    namedViews = (Array.isArray(views) ? views : []).filter((view) => view && typeof view.name === "string" && view.name.length > 0 && view.camera && typeof view.camera.zoom === "number" && typeof view.camera.panX === "number" && typeof view.camera.panY === "number");
+    renderNamedViews();
+  }
+  function showFatalError(message) {
+    fail("[GDS] load failed:", message);
+    loadError.textContent = "Could not open this layout\n\n" + message;
+    endProgress();
+    renderHierarchy(null);
+    modulePromise.then((Module) => {
+      Module.showLoadError(message);
+      renderLayerList(Module.getLayers());
+    }).catch(() => {
+    });
+  }
+  function clearFatalError() {
+    loadError.textContent = "";
+  }
+  function beginProgress(inline) {
+    progressInline = inline;
+    loadingOverlay.classList.toggle("hidden", inline);
+    reloadProgress.classList.toggle("hidden", !inline);
+    updateProgress("parsing", 0, 1);
+  }
+  function endProgress() {
+    loadingOverlay.classList.add("hidden");
+    reloadProgress.classList.add("hidden");
+  }
+  function updateProgress(phase, current, total) {
+    const label = phaseLabels[phase] || phase;
+    const fraction = total > 0 ? current / total : 0;
+    const percent = Math.round(fraction * 100);
+    const detail = phase === "triangulating" ? `Layer ${current}/${total}` : `${percent}%`;
+    if (progressInline) {
+      reloadBarFill.style.width = `${percent}%`;
+      reloadLabel.textContent = `Reloading \u2014 ${label} ${detail}`;
+      return;
+    }
+    loadingPhase.textContent = label;
+    loadingBarFill.style.width = `${percent}%`;
+    loadingPercent.textContent = detail;
+  }
+  function detectLightTheme() {
+    if (hostCan("isLightTheme")) return !!host.isLightTheme();
+    if (rootEl.classList.contains("theme-light")) return true;
+    return lightMediaQuery.matches;
+  }
+  function applyTheme() {
+    const light = detectLightTheme();
+    if (light === lightTheme) return;
+    lightTheme = light;
+    rootEl.classList.toggle("theme-light", light);
+    modulePromise.then((Module) => {
+      Module.setTheme(light);
+      const layers = Module.getLayers();
+      if (layers.length > 0) renderLayerList(layers);
+    });
+  }
+  function createParseWorker() {
+    if (hostCan("createWorker")) return host.createWorker();
+    if (workerBundle) {
+      trace("[GDS] building worker from the bundled script");
+      const blob = new Blob([workerBundle.text()], { type: "text/javascript" });
+      return new Worker(URL.createObjectURL(blob), { type: workerBundle.type });
+    }
+    const url = (name) => JSON.stringify(new URL(name, document.baseURI).href);
+    const bootstrap = `self.gdsLensScriptBase = ${url(".")};
+importScripts(${url("gds-lens-engine.js")}, ${url("gds-lens-worker.js")});`;
+    trace("[GDS] building worker from document-relative script URLs");
+    return new Worker(URL.createObjectURL(new Blob([bootstrap], { type: "application/javascript" })));
+  }
+  function adopt(element) {
+    if (!element || element === hostElement) return;
+    const next = element.shadowRoot || element.attachShadow({ mode: "open" });
+    for (const name of hostElement.classList) element.classList.add(name);
+    while (shadow.firstChild) next.appendChild(shadow.firstChild);
+    hostElement = element;
+    rootEl = element;
+    shadow = next;
+    viewerRoot = next;
+    if (resolvedModule) resolvedModule.gdsLensRoot = next;
+    else modulePromise.then((Module) => {
+      Module.gdsLensRoot = next;
+    }).catch(() => {
+    });
+    for (const callback of adoptCallbacks) {
+      try {
+        callback(element);
+      } catch (err) {
+        fail("[GDS] a host's onAdopt callback threw:", err);
+      }
+    }
+    trace("[GDS] moved the viewer into a new <gds-lens>");
+  }
+  function asBytes(source) {
+    if (source instanceof Uint8Array) return source;
+    if (source instanceof ArrayBuffer) return new Uint8Array(source);
+    if (source && source.buffer instanceof ArrayBuffer) {
+      return new Uint8Array(source.buffer, source.byteOffset, source.byteLength);
+    }
+    return source;
+  }
+  async function loadLayout(source, { reload = false } = {}) {
+    const bytes = asBytes(source);
+    trace(
+      "[GDS] init payload: fileData byteLength =",
+      bytes && bytes.byteLength,
+      "reload:",
+      !!reload
+    );
+    if (activeWorker) {
+      trace("[GDS] superseding an in-flight load");
+      activeWorker.terminate();
+      activeWorker = null;
+    }
+    showStaleBanner(false);
+    pendingViewState = null;
+    if (reload && resolvedModule) {
+      try {
+        pendingViewState = captureViewState(resolvedModule);
+      } catch (err) {
+        fail("[GDS] could not capture view state, reloading framed:", err);
+      }
+    }
+    beginProgress(pendingViewState !== null);
+    let parseBytes = bytes;
+    if (looksGzipped(bytes)) {
+      updateProgress("decompressing", 0, 0);
+      const decoded = await decodeLayoutBytes(bytes, MAX_LAYOUT_BYTES);
+      if (!decoded.ok) {
+        fail(`[GDS] gzip expansion failed (${decoded.reason}):`, decoded.detail);
+        showFatalError(describeDecodeFailure(decoded));
+        return;
+      }
+      trace("[GDS] expanded gzip:", bytes.byteLength, "->", decoded.bytes.byteLength, "bytes");
+      parseBytes = decoded.bytes;
+    }
+    let worker;
+    try {
+      worker = createParseWorker();
+      trace("[GDS] new Worker() constructor returned OK");
+    } catch (err) {
+      fail("[GDS] failed to build/start worker:", err);
+      showFatalError(`Failed to create worker: ${err.message || err}`);
+      return;
+    }
+    startWorker(worker, parseBytes);
+  }
+  function applyLyp(name, text) {
+    modulePromise.then((Module) => {
+      Module.loadLypText(text);
+      renderLayerList(Module.getLayers());
+    });
+    setLypChip(name || null);
+  }
+  function applyMarkers(name, text) {
+    modulePromise.then((Module) => {
+      let model;
+      try {
+        model = parseMarkerFile(text, DOMParser);
+      } catch (err) {
+        fail("[GDS] marker parse failed:", err);
+        removeMarkerBrowser();
+        currentMarkers = null;
+        Module.clearMarkers();
+        setMarkerChip(name || null);
+        markerController.domElement.title = `Failed to parse ${name}: ${err.message || err}`;
+        return;
+      }
+      currentMarkers = model;
+      Module.setMarkers(flattenMarkerModel(model));
+      Module.setMarkerOpacity(markerUiState.opacity);
+      selectedMarkerId = -1;
+      renderMarkerBrowser(model);
+      setMarkerChip(name || null);
+    });
+  }
+  function goToPointFromHost(x, y) {
+    return modulePromise.then((Module) => {
+      const onScreen = Module.goToPoint(x, y);
+      Module.flashPoint(x, y);
+      hostCall("onGotoResult", { ok: !!onScreen, x, y });
+      return !!onScreen;
+    });
+  }
+  function toggleDebug() {
+    rootEl.classList.toggle("debug");
+  }
+  function startWorker(worker, fileData) {
+    activeWorker = worker;
+    worker.onerror = (err) => {
+      fail("[GDS] worker.onerror fired:", err.message, "at", err.filename + ":" + err.lineno + ":" + err.colno, err.error);
+      showFatalError(`Worker failed to start: ${err.message || err}`);
+    };
+    worker.onmessageerror = (err) => {
+      fail("[GDS] worker.onmessageerror fired (structured-clone failure):", err);
+      showFatalError("Worker message failed to deserialize -- see devtools console");
+    };
+    worker.onmessage = (workerEvent) => {
+      const workerMessage = workerEvent.data;
+      if (workerMessage.type === "gdsLog") {
+        appendDebugLine("[worker] " + workerMessage.text, workerMessage.level === "error");
+        return;
+      }
+      trace("[GDS] main thread received worker message:", workerMessage.type);
+      if (workerMessage.type === "gdsProgress") {
+        updateProgress(workerMessage.phase, workerMessage.current, workerMessage.total);
+      } else if (workerMessage.type === "gdsResult") {
+        worker.terminate();
+        if (activeWorker === worker) activeWorker = null;
+        if (!workerMessage.ok) {
+          showFatalError(workerMessage.error);
+          return;
+        }
+        trace("[GDS] load succeeded, layer count:", workerMessage.layers.length);
+        modulePromise.then((Module) => {
+          try {
+            Module.uploadLayers(workerMessage.layers, workerMessage.instanceGroups, workerMessage.bbox);
+          } catch (err) {
+            showFatalError(describeLoadFailure(err));
+            return;
+          }
+          clearFatalError();
+          if (pendingViewState) {
+            try {
+              restoreViewState(Module, pendingViewState);
+            } catch (err) {
+              fail("[GDS] could not restore view state:", err);
+            }
+            pendingViewState = null;
+          }
+          renderLayerList(Module.getLayers());
+          renderHierarchy(workerMessage.hierarchy);
+          viewsFolder.show();
+          refreshRulerRow(Module);
+          endProgress();
+          trace("[GDS] done, progress hidden");
+        }, (err) => {
+          showFatalError(`WebAssembly module failed to load: ${err && err.message ? err.message : err}`);
+        });
+      }
+    };
+    trace("[GDS] posting 'parse' message to worker...");
+    let transfer;
+    if (fileData instanceof ArrayBuffer) {
+      transfer = fileData;
+    } else if (fileData.byteOffset === 0 && fileData.byteLength === fileData.buffer.byteLength) {
+      transfer = fileData.buffer;
+    } else {
+      transfer = fileData.slice().buffer;
+    }
+    worker.postMessage(
+      { type: "parse", fileData: transfer },
+      [transfer]
+    );
+    trace("[GDS] worker.postMessage('parse') call returned");
+  }
+  var hostElement, shadow, viewerRoot, rootEl, els, debugLogEl, MAX_DEBUG_LINES, debugRequested, traceToConsole, debugPanelEl, debugToggleBtn, debugCopyBtn, host, hostCan, hostCall, gui, actions, displayFolder, textController, gridController, lypController, markerController, MODES, currentMode, modeButtons, modeRow, modeName, modeWidget, rulerRow, rulerName, rulerWidget, rulerClearBtn, glCanvas, layersFolder, layerRows, layerCategories, layerFilterActive, soloTag, soloRestore, hierarchyPanel, hierarchyTree, hierarchyCount, hierarchyHide, hierarchyShowBtn, hierarchyModel, hierarchyExpanded, hierarchySelectedPath, hierarchySelectedRow, hierarchySelectedBoxes, hierarchyRootKey, hierarchyUserChoice, HIERARCHY_MAX_DEPTH, HIERARCHY_IDENTITY, hierarchyRevealPath, hierarchyFindToggle, hierarchyFindTwisty, hierarchySearchBox, hierarchySearchInput, hierarchySearchCount, hierarchyResults, hierarchyScopeCells, hierarchyScopeLabels, MAX_FIND_ROWS, LABEL_MARK_PX, findScope, findQuery, findRows, findActiveIndex, currentMarkers, markersFolder, selectedMarkerId, selectedMarkerRow, markerItemRows, markerUiState, MAX_MARKER_ROWS_PER_CATEGORY, copyToastEl, copyToastTimer, canvasMenuEl, canvasMenuCopyEl, canvasMenuValueEl, canvasMenuText, staleBanner, staleText, staleReloadBtn, staleAlwaysBtn, staleDismiss, viewsFolder, namedViews, viewControllers, pendingViewCapture, saveViewController, loadingOverlay, loadingBarFill, loadingPhase, loadingPercent, reloadProgress, reloadBarFill, reloadLabel, loadError, phaseLabels, progressInline, resolvedModule, activeWorker, pendingViewState, modulePromise, lightMediaQuery, lightTheme, adoptCallbacks, MAX_LAYOUT_BYTES, viewer, controllerRow;
+  var init_viewer2 = __esm({
+    "src/viewer.js"() {
+      init_cell_search();
+      init_marker_parsers();
+      init_load_errors();
+      init_layout_bytes();
+      init_engine_source();
+      init_mount_target();
+      init_viewer_shell();
+      init_viewer();
+      init_lil_gui_esm();
+      init_lil_gui();
+      hostElement = takeMountTarget() || document.querySelector("gds-lens") || document.body.appendChild(document.createElement("gds-lens"));
+      shadow = hostElement.shadowRoot || hostElement.attachShadow({ mode: "open" });
+      shadow.innerHTML = `<style>${lil_gui_default}</style><style>${viewer_default}</style>${viewer_shell_default}`;
+      viewerRoot = shadow;
+      rootEl = hostElement;
+      els = Object.fromEntries(
+        Array.from(viewerRoot.querySelectorAll("[id]"), (el) => [el.id, el])
+      );
+      debugLogEl = els.debugLog;
+      MAX_DEBUG_LINES = 500;
+      debugRequested = () => {
+        if (rootEl && rootEl.hasAttribute && rootEl.hasAttribute("debug")) return true;
+        try {
+          return new URLSearchParams(location.search).get("gdsDebug") === "1";
+        } catch {
+          return false;
+        }
+      };
+      traceToConsole = debugRequested();
+      debugPanelEl = els.debugPanel;
+      debugToggleBtn = els.debugToggleBtn;
+      if (debugToggleBtn && debugPanelEl) {
+        debugToggleBtn.addEventListener("click", () => {
+          const open = debugPanelEl.classList.toggle("hidden") === false;
+          debugToggleBtn.setAttribute("aria-expanded", String(open));
+        });
+      }
+      debugCopyBtn = els.debugCopyBtn;
+      if (debugCopyBtn) {
+        debugCopyBtn.addEventListener("click", () => {
+          const text = debugLogEl ? debugLogEl.innerText : "";
+          navigator.clipboard.writeText(text).then(
+            () => trace("[GDS] debug log copied to clipboard"),
+            (err) => {
+              fail("[GDS] clipboard write failed, select-all instead:", err);
+              if (!debugLogEl) return;
+              const range = document.createRange();
+              range.selectNodeContents(debugLogEl);
+              const sel = window.getSelection();
+              sel.removeAllRanges();
+              sel.addRange(range);
+            }
+          );
+        });
+      }
+      trace("[GDS] viewer.js starting to execute");
+      window.onerror = (msg, url, line, col, err) => {
+        fail("[GDS] window.onerror:", msg, "at", url + ":" + line + ":" + col, err && err.stack);
+      };
+      window.addEventListener("unhandledrejection", (event) => {
+        fail("[GDS] unhandled promise rejection on main thread:", event.reason);
+      });
+      host = typeof window !== "undefined" && window.gdsLensHost || {};
+      if (!window.gdsLensHost) {
+        fail(
+          "[GDS] no window.gdsLensHost -- gds-lens-host.js did not load or did not run. Nothing can drive the viewer, so no layout will ever appear."
+        );
+      }
+      hostCan = (name) => typeof host[name] === "function";
+      hostCall = (name, ...args) => hostCan(name) ? host[name](...args) : void 0;
+      trace("[GDS] host ready; Worker:", typeof Worker, "Blob:", typeof Blob, "bundled worker:", !!workerBundle);
+      gui = new GUI({ width: 260, container: viewerRoot.getElementById("guiHost"), injectStyles: false });
+      actions = {
+        // Clicking the row always opens the file dialog (load, or replace the
+        // current file); the injected ✕ (see setFileChip) handles unloading.
+        loadLypFile: () => Promise.resolve(hostCall("pickLyp")).then((picked) => {
+          if (picked) applyLyp(picked.name, picked.text);
+        }),
+        loadMarkerFile: () => Promise.resolve(hostCall("pickMarkers")).then((picked) => {
+          if (picked) applyMarkers(picked.name, picked.text);
+        }),
+        resetView: () => modulePromise.then((Module) => Module.resetView()),
+        showInfill: false,
+        showText: false,
+        mergeOverlaps: false,
+        // On by default -- matches g_show_grid in renderer.cpp, which is the
+        // renderer's own initial state (nothing pushes this value down at startup).
+        showGrid: true
+      };
+      displayFolder = gui.addFolder("Display");
+      displayFolder.close();
+      displayFolder.add(actions, "showInfill").name("Infill").onChange((show) => modulePromise.then((Module) => Module.setShowInfill(show)));
+      textController = displayFolder.add(actions, "showText").name("Text").onChange((show) => modulePromise.then((Module) => Module.setShowText(show)));
+      textController.domElement.title = "Show layout text labels, drawn in their layer's color";
+      displayFolder.add(actions, "mergeOverlaps").name("Merge Overlaps").onChange((on) => modulePromise.then((Module) => Module.setMergeMode(on)));
+      gridController = displayFolder.add(actions, "showGrid").name("Grid").onChange((show) => modulePromise.then((Module) => Module.setShowGrid(show)));
+      gridController.domElement.title = "Show the background grid, spaced at a round step that follows the zoom";
+      lypController = displayFolder.add(actions, "loadLypFile").name("Load .lyp File");
+      markerController = displayFolder.add(actions, "loadMarkerFile").name("Load Marker File (.lyrdb / DRC)");
+      displayFolder.add(actions, "resetView").name("Reset View");
+      MODES = [
+        { id: "pan", label: "Pan", title: "Drag to pan the view, wheel to zoom" },
+        {
+          id: "measure",
+          label: "Measure",
+          title: "Click two points to measure between them. Snaps to nearby vertices and edges (Alt to place freely), Shift constrains to horizontal/vertical, Esc cancels."
+        }
+      ];
+      currentMode = "pan";
+      modeButtons = /* @__PURE__ */ new Map();
+      modeRow = document.createElement("div");
+      modeRow.className = "lil-controller mode-row";
+      modeName = document.createElement("div");
+      modeName.className = "lil-name";
+      modeName.textContent = "Mode";
+      modeWidget = document.createElement("div");
+      modeWidget.className = "lil-widget mode-widget";
+      for (const mode of MODES) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.textContent = mode.label;
+        btn.title = mode.title;
+        btn.addEventListener("click", () => setMode(mode.id));
+        modeWidget.appendChild(btn);
+        modeButtons.set(mode.id, btn);
+      }
+      modeRow.appendChild(modeName);
+      modeRow.appendChild(modeWidget);
+      gui.$children.prepend(modeRow);
+      modeButtons.get(currentMode).classList.add("mode-active");
+      rulerRow = document.createElement("div");
+      rulerRow.className = "lil-controller mode-row ruler-row";
+      rulerRow.style.display = "none";
+      rulerName = document.createElement("div");
+      rulerName.className = "lil-name";
+      rulerName.textContent = "Rulers";
+      rulerWidget = document.createElement("div");
+      rulerWidget.className = "lil-widget mode-widget";
+      rulerClearBtn = document.createElement("button");
+      rulerClearBtn.type = "button";
+      rulerClearBtn.title = "Remove every measurement on the canvas (also Esc, once nothing is being placed)";
+      rulerClearBtn.addEventListener("click", () => {
+        modulePromise.then((Module) => {
+          Module.clearMeasurements();
+          refreshRulerRow(Module);
+        });
+      });
+      rulerWidget.appendChild(rulerClearBtn);
+      rulerRow.append(rulerName, rulerWidget);
+      modeRow.after(rulerRow);
+      glCanvas = els.glCanvas;
+      if (glCanvas) {
+        glCanvas.addEventListener("mousedown", () => {
+          if (currentMode !== "measure") return;
+          setTimeout(() => modulePromise.then(refreshRulerRow), 0);
+        });
+      }
+      setLypChip(null);
+      setMarkerChip(null);
+      layersFolder = null;
+      layerRows = [];
+      layerCategories = [];
+      layerFilterActive = false;
+      soloTag = null;
+      soloRestore = null;
+      hierarchyPanel = els.hierarchyPanel;
+      hierarchyTree = els.hierarchyTree;
+      hierarchyCount = els.hierarchyCount;
+      hierarchyHide = els.hierarchyHide;
+      hierarchyShowBtn = els.hierarchyShowBtn;
+      hierarchyModel = null;
+      hierarchyExpanded = /* @__PURE__ */ new Set();
+      hierarchySelectedPath = null;
+      hierarchySelectedRow = null;
+      hierarchySelectedBoxes = [];
+      hierarchyRootKey = null;
+      hierarchyUserChoice = null;
+      HIERARCHY_MAX_DEPTH = 256;
+      HIERARCHY_IDENTITY = [1, 0, 0, 1, 0, 0];
+      hierarchyRevealPath = null;
+      if (hierarchyHide) {
+        hierarchyHide.addEventListener("click", () => setHierarchyOpen(false, true));
+      }
+      if (hierarchyShowBtn) {
+        hierarchyShowBtn.addEventListener("click", () => setHierarchyOpen(true, true));
+      }
+      hierarchyFindToggle = els.hierarchyFindToggle;
+      hierarchyFindTwisty = els.hierarchyFindTwisty;
+      hierarchySearchBox = els.hierarchySearch;
+      hierarchySearchInput = els.hierarchySearchInput;
+      hierarchySearchCount = els.hierarchySearchCount;
+      hierarchyResults = els.hierarchyResults;
+      hierarchyScopeCells = els.hierarchyScopeCells;
+      hierarchyScopeLabels = els.hierarchyScopeLabels;
+      MAX_FIND_ROWS = 200;
+      LABEL_MARK_PX = 14;
+      findScope = "cells";
+      findQuery = "";
+      findRows = [];
+      findActiveIndex = -1;
+      if (hierarchySearchInput) {
+        hierarchySearchInput.addEventListener("input", runSearch);
+        hierarchySearchInput.addEventListener("focus", () => {
+          if (findQuery) setFindResultsOpen(true);
+        });
+        hierarchySearchInput.addEventListener("keydown", (event) => {
+          if (event.key === "Escape") {
+            if (hierarchySearchInput.value) {
+              hierarchySearchInput.value = "";
+              runSearch();
+            } else {
+              setFindOpen(false);
+            }
+            event.stopPropagation();
+          } else if (event.key === "Enter") {
+            activateFindRow(findActiveIndex < 0 ? 0 : findActiveIndex);
+          } else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            stepFindRow(1);
+          } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            stepFindRow(-1);
+          }
+        });
+      }
+      if (hierarchyScopeCells) hierarchyScopeCells.addEventListener("click", () => setFindScope("cells"));
+      if (hierarchyScopeLabels) hierarchyScopeLabels.addEventListener("click", () => setFindScope("labels"));
+      if (hierarchyFindToggle) hierarchyFindToggle.addEventListener("click", () => setFindOpen(!findIsOpen()));
+      updateFindScope();
+      currentMarkers = null;
+      markersFolder = null;
+      selectedMarkerId = -1;
+      selectedMarkerRow = null;
+      markerItemRows = /* @__PURE__ */ new Map();
+      markerUiState = { opacity: 1, hideEmpty: false };
+      MAX_MARKER_ROWS_PER_CATEGORY = 200;
+      copyToastEl = els.copyToast;
+      copyToastTimer = 0;
+      canvasMenuEl = els.canvasMenu;
+      canvasMenuCopyEl = els.canvasMenuCopy;
+      canvasMenuValueEl = canvasMenuEl && canvasMenuEl.querySelector(".menu-value");
+      canvasMenuText = "";
+      if (glCanvas && canvasMenuEl && canvasMenuCopyEl) {
+        glCanvas.addEventListener("contextmenu", (event) => {
+          if (!resolvedModule) return;
+          event.preventDefault();
+          showCanvasMenu(
+            event.clientX,
+            event.clientY,
+            resolvedModule.getCoordinateTextAt(event.clientX, event.clientY)
+          );
+        });
+        canvasMenuCopyEl.addEventListener("click", () => {
+          const text = canvasMenuText;
+          hideCanvasMenu();
+          navigator.clipboard.writeText(text).then(
+            () => showCopyToast("Copied \u2014 " + text),
+            (err) => {
+              fail("[GDS] clipboard write failed for coordinate:", err);
+              showCopyToast("Couldn't copy \u2014 " + text);
+            }
+          );
+        });
+        window.addEventListener("pointerdown", (event) => {
+          if (!canvasMenuEl.contains(event.target)) hideCanvasMenu();
+        }, true);
+        window.addEventListener("wheel", hideCanvasMenu, { passive: true });
+        window.addEventListener("resize", hideCanvasMenu);
+        window.addEventListener("blur", hideCanvasMenu);
+      }
+      window.addEventListener("keydown", (event) => {
+        const t = event.target;
+        const tag = t && t.tagName;
+        if (tag === "TEXTAREA" || tag === "INPUT" && t.type !== "checkbox") return;
+        if (event.key === "[") stepMarker(-1);
+        else if (event.key === "]") stepMarker(1);
+        else if (event.key === "m" || event.key === "M") setMode(currentMode === "measure" ? "pan" : "measure");
+        else if (event.key === "Escape") {
+          if (canvasMenuEl && !canvasMenuEl.classList.contains("hidden")) {
+            hideCanvasMenu();
+            return;
+          }
+          modulePromise.then((Module) => {
+            if (!Module.escapeMeasure()) setMode("pan");
+            refreshRulerRow(Module);
+          });
+          hierarchyDeselect();
+        } else if (event.key === "h" || event.key === "H") toggleHierarchy();
+        else if (event.key === "/") {
+          event.preventDefault();
+          focusFindBox();
+        }
+      }, true);
+      staleBanner = els.staleBanner;
+      staleText = els.staleText;
+      staleReloadBtn = els.staleReloadBtn;
+      staleAlwaysBtn = els.staleAlwaysBtn;
+      staleDismiss = els.staleDismiss;
+      if (staleReloadBtn) {
+        staleReloadBtn.addEventListener("click", () => {
+          showStaleBanner(false);
+          hostCall("requestReload");
+        });
+      }
+      if (staleAlwaysBtn) {
+        staleAlwaysBtn.addEventListener("click", () => {
+          showStaleBanner(false);
+          hostCall("setAutoReload", true);
+          hostCall("requestReload");
+        });
+      }
+      if (staleDismiss) {
+        staleDismiss.addEventListener("click", () => showStaleBanner(false));
+      }
+      viewsFolder = gui.addFolder("Views");
+      viewsFolder.close();
+      viewsFolder.hide();
+      namedViews = [];
+      viewControllers = [];
+      pendingViewCapture = null;
+      saveViewController = viewsFolder.add({ save: () => requestSaveView() }, "save").name("Save Current View");
+      saveViewController.domElement.title = "Name the current camera and layer visibility, and keep it with this layout";
+      loadingOverlay = els.loadingOverlay;
+      loadingBarFill = els.loadingBarFill;
+      loadingPhase = els.loadingPhase;
+      loadingPercent = els.loadingPercent;
+      reloadProgress = els.reloadProgress;
+      reloadBarFill = els.reloadBarFill;
+      reloadLabel = els.reloadLabel;
+      loadError = els.loadError;
+      phaseLabels = {
+        decompressing: "Decompressing layout...",
+        parsing: "Parsing layout file...",
+        flattening: "Flattening hierarchy...",
+        triangulating: "Triangulating geometry..."
+      };
+      progressInline = false;
+      trace("[GDS] resolving the wasm factory on the main thread...");
+      resolvedModule = null;
+      activeWorker = null;
+      pendingViewState = null;
+      modulePromise = loadGdstkFactory().then((createGdstkModule) => {
+        if (typeof createGdstkModule !== "function") {
+          throw new Error(
+            "gds-lens-engine.js did not load: createGdstkModule is not defined. In the served payload it is a classic <script> that must come before gds-lens.js (see gds-lens.html)."
+          );
+        }
+        return createGdstkModule({
+          // Read by dom_root() in renderer.cpp for its own element lookups.
+          // Passed in the instantiation object so it is in place before main()
+          // runs -- and re-pointed by adopt() if the viewer later moves.
+          gdsLensRoot: viewerRoot,
+          preRun: [(Module) => {
+            Module.specialHTMLTargets["!gdsLensCanvas"] = viewerRoot.getElementById("glCanvas");
+          }]
+        });
+      });
+      modulePromise.then(
+        (Module) => {
+          resolvedModule = Module;
+          trace("[GDS] main-thread createGdstkModule() resolved OK");
+        },
+        (err) => {
+          fail("[GDS] main-thread createGdstkModule() REJECTED:", err);
+          showFatalError(`WebAssembly module failed to load: ${describeLoadFailure(err)}`);
+        }
+      );
+      lightMediaQuery = window.matchMedia("(prefers-color-scheme: light)");
+      lightTheme = null;
+      new MutationObserver(applyTheme).observe(rootEl, { attributes: true, attributeFilter: ["class"] });
+      lightMediaQuery.addEventListener("change", applyTheme);
+      applyTheme();
+      adoptCallbacks = /* @__PURE__ */ new Set();
+      MAX_LAYOUT_BYTES = 2 * 1024 * 1024 * 1024;
+      viewer = {
+        // The element the viewer is mounted in. A host needs it to scope anything
+        // it binds to the viewer's own surface -- drag-and-drop above all, which
+        // on `window` would preventDefault every drag in the embedding page and
+        // quietly break the host's own drop targets.
+        get element() {
+          return hostElement;
+        },
+        // Called with the new element when the viewer moves (see adopt). Returns a
+        // function that unregisters. A host that binds anything to `element` needs
+        // this, or its listeners stay on an element that is no longer in the page.
+        onAdopt(callback) {
+          adoptCallbacks.add(callback);
+          return () => adoptCallbacks.delete(callback);
+        },
+        load: loadLayout,
+        showError: showFatalError,
+        setLyp: applyLyp,
+        setMarkers: applyMarkers,
+        showStale: (text) => showStaleBanner(true, text),
+        goToPoint: goToPointFromHost,
+        toggleDebug,
+        // For a host whose theme can change after load, to re-ask isLightTheme().
+        applyTheme,
+        // For a host whose stored views can change after open (another editor on
+        // the same layout saving one, say) rather than only being read once.
+        setNamedViews
+      };
+      controllerRow = (controller) => controller.domElement.closest(".lil-controller");
+      if (!hostCan("pickLyp")) controllerRow(lypController)?.remove();
+      if (!hostCan("pickMarkers")) controllerRow(markerController)?.remove();
+      if (!hostCan("saveViews") && !hostCan("promptViewName")) {
+        controllerRow(saveViewController)?.remove();
+      }
+      Promise.resolve(hostCall("loadViews")).then((views) => {
+        if (views) setNamedViews(views);
+      });
+      hostCall("connect", viewer);
+    }
+  });
+
+  // src/gds-lens.js
+  init_mount_target();
+  var INLINE_WASM = false;
+  function warnIfNotUtf8() {
+    if (!INLINE_WASM) return;
+    const encoding = document.characterSet || document.charset;
+    if (encoding && encoding.toUpperCase() !== "UTF-8") {
+      console.error(
+        `[GDS] this document is ${encoding}, not UTF-8. This build of gds-lens embeds its WebAssembly binary in a script that must be decoded as UTF-8; it will fail to load. Add <meta charset="UTF-8"> to the page, serve the scripts as text/javascript; charset=utf-8, or use the default build, which keeps the binary in a separate file.`
+      );
+    }
+  }
+  var mounted = null;
+  var engine = null;
+  var ElementBase = typeof HTMLElement === "undefined" ? class {
+  } : HTMLElement;
+  var GdsLens = class extends ElementBase {
+    #ready = null;
+    connectedCallback() {
+      if (mounted && mounted !== this) {
+        this.#refuse();
+        return;
+      }
+      if (this.#ready) {
+        mounted = this;
+        return;
+      }
+      mounted = this;
+      warnIfNotUtf8();
+      this.#ready = this.#mount();
+      const src = this.getAttribute("src");
+      if (src) this.#ready.then(() => this.load(src));
+    }
+    async #mount() {
+      if (engine) {
+        engine.adopt(this);
+        return engine.viewer;
+      }
+      setMountTarget(this);
+      engine = await Promise.resolve().then(() => (init_viewer2(), viewer_exports));
+      return engine.viewer;
+    }
+    #refuse() {
+      console.error(
+        "[GDS] only one <gds-lens> can be active at a time: the renderer keeps its state in module-scope globals, so a second one would fight the first. Remove the first from the DOM and this one will take over its engine."
+      );
+      this.textContent = "Only one <gds-lens> is supported at a time.";
+    }
+    // Resolves once the engine has mounted, so callers can await readiness
+    // without racing the dynamic import.
+    get ready() {
+      return this.#ready || Promise.reject(new Error("<gds-lens> is not connected"));
+    }
+    // Accepts what a caller is likely to already have: a URL to fetch, or the
+    // bytes themselves in either of the two shapes they usually arrive in.
+    async load(source, options) {
+      const viewer2 = await this.ready;
+      if (typeof source === "string") {
+        const response = await fetch(source);
+        if (!response.ok) throw new Error(`${source}: HTTP ${response.status}`);
+        return viewer2.load(new Uint8Array(await response.arrayBuffer()), options);
+      }
+      return viewer2.load(source, options);
+    }
+    async goToPoint(x, y) {
+      return (await this.ready).goToPoint(x, y);
+    }
+    async setLyp(name, text) {
+      return (await this.ready).setLyp(name, text);
+    }
+    async setMarkers(name, text) {
+      return (await this.ready).setMarkers(name, text);
+    }
+    async showError(message) {
+      return (await this.ready).showError(message);
+    }
+    // Releases the claim without tearing anything down. The element is very
+    // often coming straight back -- React and friends recreate the node on
+    // re-render -- and discarding the wasm instance and GL context only to
+    // rebuild them a tick later would be far worse than holding them. The
+    // engine stays up; the next element to connect adopts it.
+    disconnectedCallback() {
+      if (mounted === this) mounted = null;
+    }
+    static get observedAttributes() {
+      return ["src"];
+    }
+    attributeChangedCallback(name, previous, current) {
+      if (name === "src" && current && current !== previous && this.#ready) {
+        this.load(current);
+      }
+    }
+  };
+  if (typeof customElements !== "undefined" && !customElements.get("gds-lens")) {
+    customElements.define("gds-lens", GdsLens);
+  }
+})();
+/*! Bundled license information:
+
+lil-gui/dist/lil-gui.esm.js:
+  (**
+   * lil-gui
+   * https://lil-gui.georgealways.com
+   * @version 0.21.0
+   * @author George Michael Brower
+   * @license MIT
+   *)
+*/